Projekt

Obecné

Profil

« Předchozí | Další » 

Revize c63100b4

Přidáno uživatelem Ondřej Váně před téměř 3 roky(ů)

#5 Implement user input checks

- added information icon on cofniguration page next to all substrings configuration values
- added popover on information icon for info message

Zobrazit rozdíly:

src/main/webapp/WEB-INF/templates/configuration.html
4 4 
    <title>Anti Pattern Detector - Configuration</title>
5 5 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
6 6 
    <meta name="viewport" content="width=device-width, initial-scale=1">
7 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
8 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
7 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
10 8 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
10 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
11 11 

  		




  12
  12
  
    
    <style>


  		




  13
  13
  
    
        .analyze-button-container {


  		




  ......




  17
  17
  
    
        .container {


  		




  18
  18
  
    
            margin-top: 20px;


  		




  19
  19
  
    
        }


  		




  
  20
  
    

  		




  
  21
  
    
        #wrapper {


  		




  
  22
  
    
            width: 800px;


  		




  
  23
  
    
            overflow: hidden;


  		




  
  24
  
    
        }


  		




  
  25
  
    

  		




  
  26
  
    
        #first {


  		




  
  27
  
    
            width: 500px;


  		




  
  28
  
    
            float: left;


  		




  
  29
  
    
        }


  		




  
  30
  
    

  		




  
  31
  
    
        #second {


  		




  
  32
  
    
            overflow: hidden;


  		




  
  33
  
    
        }


  		




  20
  34
  
    
    </style>


  		




  21
  35
  
    

  		




  22
  36
  
    
</head>


  		




  ......




  54
  68
  
    
                    <div class="col-sm-5">


  		




  55
  69
  
    
                        <small th:text="${config.value.description}" th:value="${config.value.name}"


  		




  56
  70
  
    
                               class="form-text text-muted"></small>


  		




  57
  
  
    
                        <input th:if="${config.value.isErrorMessageShown}" th:value="${config.value.value}" class="form-control is-invalid" th:id="${config.value.name}"


  		




  58
  
  
    
                               name="configValues">


  		




  59
  
  
    
                        <input th:unless="${config.value.isErrorMessageShown}" th:value="${config.value.value}" class="form-control" th:id="${config.value.name}"


  		




  60
  
  
    
                               name="configValues">


  		




  61
  
  
    
                        <input th:value="${config.value.name}" style="display: none" class="form-control"


  		




  62
  
  
    
                               name="configNames">


  		




  63
  
  
    
                        <small th:if="${config.value.isErrorMessageShown}" th:text="${config.value.errorMessage}" th:value="${config.value.errorMessage}"


  		




  
  71
  
    
                        <div id="wrapper">


  		




  
  72
  
    
                            <div id="first">


  		




  
  73
  
    
                                <input th:if="${config.value.isErrorMessageShown}" th:value="${config.value.value}"


  		




  
  74
  
    
                                       class="form-control is-invalid" th:id="${config.value.name}"


  		




  
  75
  
    
                                       name="configValues">


  		




  
  76
  
    
                                <input th:unless="${config.value.isErrorMessageShown}" th:value="${config.value.value}"


  		




  
  77
  
    
                                       class="form-control" th:id="${config.value.name}"


  		




  
  78
  
    
                                       name="configValues">


  		




  
  79
  
    
                                <input th:value="${config.value.name}" style="display: none" class="form-control"


  		




  
  80
  
    
                                       name="configNames">


  		




  
  81
  
    
                            </div>


  		




  
  82
  
    
                            <div th:if="${#strings.contains(config.value.name,'Substrings')}" id="second"


  		




  
  83
  
    
                                 style="margin: 10px; padding-left: 10px">


  		




  
  84
  
    
                                <svg style="display: inline-block"


  		




  
  85
  
    
                                     xmlns="http://www.w3.org/2000/svg"


  		




  
  86
  
    
                                     width="20" height="20"


  		




  
  87
  
    
                                     fill="currentColor"


  		




  
  88
  
    
                                     class="bi bi-info-circle"


  		




  
  89
  
    
                                     viewBox="0 0 16 16"


  		




  
  90
  
    
                                     data-container="body"


  		




  
  91
  
    
                                     data-toggle="popover"


  		




  
  92
  
    
                                     data-placement="right"


  		




  
  93
  
    
                                     data-content="Insert search substrings separated by characters ||, you can enter substrings in sql regex syntax and maximum number of search substrings is ten.">


  		




  
  94
  
    
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>


  		




  
  95
  
    
                                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>


  		




  
  96
  
    
                                </svg>


  		




  
  97
  
    
                            </div>


  		




  
  98
  
    
                        </div>


  		




  
  99
  
    

  		




  
  100
  
    
                        <small th:if="${config.value.isErrorMessageShown}" th:text="${config.value.errorMessage}"


  		




  
  101
  
    
                               th:value="${config.value.errorMessage}"


  		




  64
  102
  
    
                               class="form-text text-danger"></small>


  		




  65
  103
  
    

  		




  66
  104
  
    
                    </div>


  		




  ......




  79
  117
  
    
</div>


  		




  80
  118
  
    
<!-- ./Page body -->


  		




  81
  119
  
    

  		




  
  120
  
    

  		




  
  121
  
    
<!-- Scripts -->


  		




  
  122
  
    
<script>


  		




  
  123
  
    
    // script to popover


  		




  
  124
  
    
    $(document).ready(function () {


  		




  
  125
  
    
        $('[data-toggle="popover"]').popover();


  		




  
  126
  
    
    });


  		




  
  127
  
    

  		




  
  128
  
    
</script>


  		




  
  129
  
    
<!-- ./Scripts -->


  		




  
  130
  
    

  		




  82
  131
  
    
</body>


  		




  83
  132
  
    
</html>


  		




  84
  133
  
    

  		












Také k dispozici:  Unified diff