commit 44924273b02505edf08c6aab0ca07f9267bec1fc
Author: cagy <ml.cagy@seznam.cz>
Date:   Mon Apr 27 23:11:56 2020 +0200

    re #7882 added JS for assembly edit

diff --git a/src/main/webapp/WEB-INF/templates/assembly_edit.html b/src/main/webapp/WEB-INF/templates/assembly_edit.html
deleted file mode 100644
index 05034b75..00000000
--- a/src/main/webapp/WEB-INF/templates/assembly_edit.html
+++ /dev/null
@@ -1,608 +0,0 @@
-<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="">
-    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-    <meta name="generator" content="Jekyll v3.8.6">
-    <title>Album example · Bootstrap</title>
-    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/album/">
-
-    <!-- Bootstrap core CSS -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
-
-    <link href="css/bootstrap-select.min.css" rel="stylesheet">
-    <link href="css/fontawesome.min.css" rel="stylesheet">
-    <link href="css/style.css" rel="stylesheet">
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="js/jquery.js"></script>
-    <script type="text/javascript" src="js/bootstrap.min.js"></script>
-    <script type="text/javascript" src="js/bootstrap-select.min.js"></script>
-
-    <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
-
-    <script type="text/javascript" src="js/jquery.js"></script>
-    <script src="//code.jquery.com/jquery-1.11.1.js"></script>
-    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
-</head>
-<body>
-<div id="test"></div>
-<main role="main">
-
-  <div class="container">
-    <h1>
-      Editace - Studenti - studijní programy
-    </h1>
-  </div>
-
-<form>
-  <div class="container box">
-    <div class="col-md-12">
-    <div class="form-group row">
-      <label for="name" class="col-sm-2 col-form-label">Název sestavy:</label>
-      <div class="col-sm-10">
-        <input type="text" class="form-control" id="name" th:value="${assembly.name}">
-      </div>
-    </div>
-    <div class="form-group row">
-      <label for="sql_query" class="col-sm-2 col-form-label">SQL dotaz:</label>
-      <div class="col-sm-10">
-        <textarea class="form-control" id="sql_query" rows="6" th:text="${assembly.SQLQuery}"></textarea>
-      </div>
-    </div>
-    <div class="form-group row">
-      <label class="form-check-label col-sm-2" for="defaultCheck1">Veřejný:</label>
-      <div class="col-sm-10">
-        <div class="form-check">
-          <input th:if="${assembly.isPublic == 0}" class="form-check-input" type="checkbox" value="" id="defaultCheck1">
-          <input th:unless="${assembly.isPublic == 0}" class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked="true">
-        </div>
-      </div>
-    </div>
-</div>
-  </div>
-</div>
-
-  <div class="container box">
-    <div class="col-md-12">
-    <div class="box-header">
-      <h3 class="box-title">Parametry</h3>
-      <button type="button" class="btn btn-success"><i class="fas fa-plus"></i> Přidat parametr</button>
-    </div>
-
-    <div class="panel-group sort" id="accordion">
-      <div class="panel panel-default">
-
-        <div class="panel-heading">
-          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
-            <span class="panel-title">
-                <i class="fas fa-angle-right"></i> Akademický rok
-            </span>
-          </a>
-
-          <span class="align-right collapse-actions">
-            <span class="action-padding input-action-margin-collapse sort-icon">
-              <i class="fas fa-sort"></i>
-            </span>
-            <span class="action-padding action-button input-action-margin-collapse">
-              <a href=# class="action-link far fa-trash-alt"></a>
-            </span>
-          </span>
-
-        </div>
-        <div id="collapse1" class="panel-collapse collapse in">
-          <div class="panel-body">
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">Název:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="name" class="col-md-2 col-form-label">V&nbsp;SQL:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row type-row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
-              <div class="col-sm-10">
-                <select class="form-control type-select">
-                  <option>Text</option>
-                  <option>Datum</option>
-                  <option>Výčet</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
-              <div class="col-sm-10">
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
-                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
-                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
-                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
-                </div>
-              </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
-                <div class="col-sm-10">
-                  <select class="selectpicker" multiple data-live-search="true">
-                    <option>SUM</option>
-                    <option>AVG</option>
-                    <option>MAX</option>
-                    <option>MIN</option>
-                  </select>
-                </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
-                <div class="col-sm-10">
-                  <select class="selectpicker" multiple data-live-search="true">
-                    <option>LIKE</option>
-                    <option>BETWEEN</option>
-                    <option>EQUAL</option>
-                    <option>LESS</option>
-                  </select>
-                </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <span class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
-              <i class="fas fa-angle-right"></i> Typ studia
-            </a>
-
-            <span class="align-right collapse-actions">
-              <span class="action-padding input-action-margin-collapse sort-icon">
-                <i class="fas fa-sort"></i>
-              </span>
-              <span class="action-padding action-button input-action-margin-collapse">
-                <a href=# class="action-link far fa-trash-alt"></a>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div id="collapse2" class="panel-collapse collapse">
-          <div class="panel-body">
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">Název:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row type-row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
-              <div class="col-sm-10">
-                <select class="form-control type-select">
-                  <option>Text</option>
-                  <option>Datum</option>
-                  <option>Výčet</option>
-                </select>
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
-              <div class="col-sm-10">
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
-                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
-                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
-                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
-                </div>
-              </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
-                <div class="col-sm-10">
-                  <select class="selectpicker" multiple data-live-search="true">
-                    <option>SUM</option>
-                    <option>AVG</option>
-                    <option>MAX</option>
-                    <option>MIN</option>
-                  </select>
-                </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
-                <div class="col-sm-10">
-                  <select class="selectpicker" multiple data-live-search="true">
-                    <option>LIKE</option>
-                    <option>BETWEEN</option>
-                    <option>EQUAL</option>
-                    <option>LESS</option>
-                  </select>
-                </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <span class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
-              <i class="fas fa-angle-right"></i> Fakulta
-            </a>
-            <span class="align-right collapse-actions">
-              <span class="action-padding input-action-margin-collapse sort-icon">
-                <i class="fas fa-sort"></i>
-              </span>
-              <span class="action-padding action-button input-action-margin-collapse">
-                <a href=# class="action-link far fa-trash-alt"></a>
-              </span>
-            </span>
-          </span>
-        </div>
-        <div id="collapse3" class="panel-collapse collapse">
-          <div class="panel-body">
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">Název:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" id="name">
-              </div>
-            </div>
-            <div class="form-group row type-row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
-              <div class="col-sm-10">
-                <select class="form-control type-select">
-                  <option value="1">Text</option>
-                  <option value="2">Datum</option>
-                  <option value="3">Výčet</option>
-                </select>
-              </div>
-            </div>
-
-            <div class="enum_box">
-              Hodnoty:
-              <div class="enum_values col-md-8">
-                  <div id="enum-wrapper">
-                    <div class="input-action-box input-border-bottom">
-                      <input type="text" readonly class="form-control-plaintext" value="Doktorský">
-
-                      <span class="action-padding input-action-margin sort-icon">
-                        <i class="fas fa-sort"></i>
-                      </span>
-                      <span class="action-padding action-button input-action-margin">
-                        <a href=# class="action-link far fa-trash-alt"></a>
-                      </span>
-                    </div>
-                    <div class="input-action-box input-border-bottom">
-                      <input type="text" readonly class="form-control-plaintext" value="Navazující">
-
-                      <span class="action-padding input-action-margin sort-icon">
-                        <i class="fas fa-sort"></i>
-                      </span>
-                      <span class="action-padding action-button input-action-margin">
-                        <a href=# class="action-link far fa-trash-alt"></a>
-                      </span>
-
-                    </div>
-                    <div class="input-action-box input-border-bottom">
-                      <input type="text" readonly class="form-control-plaintext" value="Bakalářský">
-
-                      <span class="action-padding input-action-margin sort-icon">
-                        <i class="fas fa-sort"></i>
-                      </span>
-                      <span class="action-padding action-button input-action-margin">
-                        <a href=# class="action-link far fa-trash-alt"></a>
-                      </span>
-                    </div>
-                </div>
-                <div class="form-group row form-add-item">
-                  <div class="col-md-9">
-                    <input id="enum-input" type="text" class="form-control">
-                  </div>
-                  <span id="enum-button" class="btn btn-primary mb-2">Přidat</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="form-group row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
-              <div class="col-sm-10">
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
-                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
-                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
-                </div>
-                <div class="form-check form-check-inline">
-                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
-                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
-                </div>
-              </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
-                <div class="col-sm-10">
-                  <select class="mbSelect selectpicker" multiple data-live-search="true">
-                    <option>SUM</option>
-                    <option>AVG</option>
-                    <option>MAX</option>
-                    <option>MIN</option>
-                  </select>
-                </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
-                <div class="col-sm-10">
-                  <select class="mbSelect selectpicker" multiple data-live-search="true">
-                    <option>LIKE</option>
-                    <option>BETWEEN</option>
-                    <option>EQUAL</option>
-                    <option>LESS</option>
-                  </select>
-                </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-  <div class="container box">
-    <div class="col-md-4">
-    <div class="box-header">
-      <h3 class="box-title">Oprávnění</h3>
-    </div>
-    <div id ="permission-wrapper">
-        <div class="input-action-box input-border-bottom input-row">
-            <input type="text" readonly class="form-control-plaintext permission-role" id="1" value="Rektor">
-            <span class="action-padding action-button input-action-margin">
-                <a href=# class="action-link far fa-trash-alt" onclick="removeRole(this);"></a>
-            </span>
-        </div>
-        <div class="input-action-box input-border-bottom input-row">
-            <input type="text" readonly class="form-control-plaintext permission-role" id="2" value="Referentka">
-            <span class="action-padding action-button input-action-margin">
-                <a href=# class="action-link far fa-trash-alt" onclick="removeRole(this);"></a>
-            </span>
-        </div>
-    </div>
-
-    <div class="form-group row form-add-item">
-      <div class="col-md-9">
-        <select class="form-control " id="permission-select" name="permission-select">
-          <option value="1">Rektor</option>
-          <option value="2">Studijní oddělení</option>
-          <option value="3">Strudenti</option>
-        </select>
-      </div>
-      <span class="btn btn-primary mb-2" id="permission-button">Přidat</span>
-    </div>
-  </div>
-</div>
-  <div class="submit_center_button">
-      <button type="submit" class="btn btn-success mb-2">Uložit</button>
-  </div>
-
-</form>
-
-
-</main>
-
-<footer class="text-muted">
-  <div class="container">
-
-  </div>
-</footer>
-
-<script type="text/javascript" src="js/app.js"></script>
-</body>
-</html>
-<script type="text/javascript">
-
-    $(document).ready(function() {
-        $(".sort").sortable().disableSelection();
-        $("#enum-wrapper").sortable().disableSelection();
-
-        $('.type-select').on('change', function () {
-            if (this.value == 3)
-            {
-        console.log('a');
-                addEnum(this);
-            }
-            else
-            {
-                removeEnum(this);
-            }
-        });
-
-
-        $('.fa-trash-alt').click(function(event){
-            event.preventDefault();
-        });
-
-    });
-
-    $('#permission-button').on('click', function () {
-        var selectedRoleId = $('select[name=permission-select] option').filter(':selected').val();
-        var selectedRoleValue = $('select[name=permission-select] option').filter(':selected').text();
-
-        var addedRoles = $('.permission-role');
-
-        var roles = [];
-
-        // get assigned roles
-        addedRoles.each(function () {
-            roles.push($(this).attr('id'))
-        });
-
-        if (roles.includes(selectedRoleId))
-        {
-            return;
-        }
-
-        addPermissionRow(selectedRoleId, selectedRoleValue);
-
-    });
-
-
-    function addPermissionRow(id, value){
-
-        let row = document.createElement('div');
-        row.classList.add('input-action-box', 'input-border-bottom', 'permission-row');
-
-        let input = document.createElement('input');
-        input.type = 'text';
-        input.classList.add('form-control-plaintext', 'permission-role');
-        input.id = id;
-        input.value = value;
-        input.setAttribute('readonly', "true");
-
-        row.appendChild(input);
-
-        let actionButton = document.createElement('span');
-        actionButton.classList.add('action-padding', 'action-button', 'input-action-margin');
-
-        let deleteButton = document.createElement('a');
-        deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
-        deleteButton.setAttribute('onclick', 'removeRole(this);');
-        deleteButton.setAttribute('role', 'button');
-
-        actionButton.appendChild(deleteButton);
-        row.appendChild(actionButton);
-
-        document.getElementById('permission-wrapper').appendChild(row);
-
-    };
-
-    $('#enum-button').on('click', function () {
-        var value = $('#enum-input').val();
-        console.log('a');
-        addEnumRow(value);
-
-
-
-    });
-
-    function addEnumRow(value)
-    {
-      let row = document.createElement('div');
-      row.classList.add('input-action-box', 'input-border-bottom');
-
-
-      let input = document.createElement('input');
-      input.type = 'text';
-      input.classList.add('form-control-plaintext');
-      input.value = value;
-      input.setAttribute('readonly', "true");
-
-      row.appendChild(input);
-
-      let sortSpan = document.createElement('span');
-      sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
-      sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";
-
-      row.appendChild(sortSpan);
-
-      let deleteSpan = document.createElement('span');
-      deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');
-
-      let deleteButton = document.createElement('a');
-      deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
-      deleteButton.setAttribute('onclick', 'removeEnum(this);');
-
-      deleteSpan.appendChild(deleteButton);
-
-      row.appendChild(deleteSpan);
-
-      document.getElementById('enum-wrapper').appendChild(row);
-
-    }
-
-
-    function removeRole (selectedField) {
-        selectedField.closest('.input-row').remove();
-    }
-
-
-    function addEnum(select)
-    {
-      console.log(select.parent());
-      let row = document.createElement('div');
-      row.classList.add('enum_box');
-      row.innerHTML = "Hodnoty:";
-
-      let values = document.createElement('div');
-      values.classList.add('enum_values', 'col-md-8');
-
-      let valuesWrapper = document.createElement('div');
-      valuesWrapper.id = "enum-wrapper";
-
-      values.appendChild(valuesWrapper);
-
-      let addButtonDiv = document.createElement('div');
-      addButtonDiv.classList.add('form-group', 'row', 'form-add-item');
-
-      let addInnerButton = document.createElement('div');
-      addInnerButton.classList.add('col-md-9');
-
-      let input = document.createElement('input');
-      input.type = 'text';
-      input.id = "enum-input";
-      input.classList.add('form-control');
-
-
-      let addButton = document.createElement('span');
-      addButton.classList.add('btn', 'btn-primary', 'mb-2');
-      addButton.innerHTML = 'Přidat';
-      addButton.id = "enum-button";
-
-      addInnerButton.appendChild(input);
-      addButtonDiv.appendChild(addInnerButton);
-      addButtonDiv.appendChild(addButton);
-
-      values.appendChild(addButtonDiv);
-      row.appendChild(values);
-
-      select.appendChild(row);
-
-      $(row).insertAfter($('.type-row'));
-
-      $('#enum-button').on('click', function () {
-        var value = $('#enum-input').val();
-        console.log('a');
-        addEnumRow(value);
-      });
-    }
-
-  
-    function removeEnum(select) {
-      $('.enum_box').remove();
-
-    }
-
-</script>
-
diff --git a/src/main/webapp/WEB-INF/templates/assembly_manage.html b/src/main/webapp/WEB-INF/templates/assembly_manage.html
index 2ef19597..95a5b6c0 100644
--- a/src/main/webapp/WEB-INF/templates/assembly_manage.html
+++ b/src/main/webapp/WEB-INF/templates/assembly_manage.html
@@ -14,19 +14,38 @@
     <link href="css/fontawesome.min.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script type="text/javascript" src="js/jquery.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/bootstrap-select.min.js"></script>
+
+
+    <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
+    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
 </head>
 <body>
+
+<select class="hidden" id="allParametersHiddenSelect">
+  <option th:each="parameterType : ${allParameterTypes}" th:value="${parameterType.id}" th:text="${parameterType.name}"></option>
+</select>
+
+
+<select class="hidden" id="allFunctionsHiddenSelect">
+    <option th:each="function : ${allFunctions}" th:value="${{function.id}}" th:text="${function.name}"></option>
+</select>
+
+
+<select class="hidden" id="allOperatorsHiddenSelect">
+    <option th:each="operator : ${allOperators}" th:value="${{operator.id}}" th:text="${operator.name}"></option>
+</select>
+
+
 <div id="test"></div>
 <main role="main">
 
   <div class="container">
+    <h1 th:text="${title}"></h1>
     <a href="/" class="btn btn-success mb-2">Zpět</a>
-    <h1 th:text="${title}">
-    </h1>
   </div>
 
   <p th:text="${errorText}"></p>
@@ -35,27 +54,27 @@
   <input type="hidden" th:field="*{id}" th:value="*{id}" />
   <div class="container box">
     <div class="col-md-12">
-    <div class="form-group row">
-      <label for="name" class="col-sm-2 col-form-label">Název sestavy:</label>
-      <div class="col-sm-10">
-        <input type="text" class="form-control" name="assemblyName" id="assemblyName" th:field="*{name}" th:value="*{name}" required>
-      </div>
-    </div>
-    <div class="form-group row">
-      <label for="assemblySQLQuery" class="col-sm-2 col-form-label">SQL dotaz:</label>
-      <div class="col-sm-10">
-        <textarea class="form-control" name="assemblySQLQuery" id="assemblySQLQuery" rows="6" th:field="*{SQLQuery}" th:text="*{SQLQuery}" required></textarea>
-      </div>
-    </div>
-    <div class="form-group row">
-      <label class="form-check-label col-sm-2" for="checkboxPublic">Veřejný:</label>
-      <div class="col-sm-10">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox"  th:checked="*{isPublic} == 1" name="checkboxPublic" id="checkboxPublic">
+        <div class="form-group row">
+          <label for="name" class="col-sm-2 col-form-label">Název sestavy:</label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control" name="assemblyName" id="assemblyName" th:field="*{name}" th:value="*{name}" required>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="assemblySQLQuery" class="col-sm-2 col-form-label">SQL dotaz:</label>
+          <div class="col-sm-10">
+            <textarea class="form-control" name="assemblySQLQuery" id="assemblySQLQuery" rows="6" th:field="*{SQLQuery}" th:text="*{SQLQuery}" required></textarea>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="form-check-label col-sm-2" for="checkboxPublic">Veřejný:</label>
+          <div class="col-sm-10">
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox"  th:checked="*{isPublic} == 1" name="checkboxPublic" id="checkboxPublic">
+            </div>
+          </div>
         </div>
-      </div>
     </div>
-</div>
   </div>
 </div>
 
@@ -63,97 +82,101 @@
     <div class="col-md-12">
     <div class="box-header">
       <h3 class="box-title">Parametry</h3>
-      <button type="button" class="btn btn-success"><i class="fas fa-plus"></i> Přidat parametr</button>
+      <span class="btn btn-success" id="add-param-button"><i class="fas fa-plus"></i> Přidat parametr</span>
     </div>
 
-    <div th:each="parameter, i : *{parameters}" class="panel-group" id="accordion">
-      <input type="hidden" th:field="*{parameters[__${i.index}__]}" th:value="*{parameters[__${i.index}__].id}" />
-      <div class="panel panel-default">
-        <div class="panel-heading">
-          <span class="panel-title">
-            <a data-toggle="collapse" data-parent="#accordion" th:attr="href='#collapse' + *{parameters[__${i.index}__].id}">
-              <i class="fas fa-angle-right"></i> <span th:text="*{parameters[__${i.index}__].name}"></span>
-            </a>
-            <span class="align-right collapse-actions">
-              <span class="action-padding input-action-margin-collapse sort-icon">
-                <i class="fas fa-sort"></i>
-              </span>
-              <span class="action-padding action-button input-action-margin-collapse">
-                <a href=# class="action-link far fa-trash-alt"></a>
+    <div id="accordion" class="panel-wrapper">
+      <div th:each="parameter, i : *{parameters}" class="panel-group parameter">
+        <input type="hidden" th:field="*{parameters[__${i.index}__]}" th:value="*{parameters[__${i.index}__].id}" />
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            <span class="panel-title">
+              <a data-toggle="collapse" data-parent="#accordion" th:attr="href='#collapse' + *{parameters[__${i.index}__].id}">
+                <i class="fas fa-angle-right"></i> <span th:text="*{parameters[__${i.index}__].name}"></span>
+              </a>
+              <span class="align-right collapse-actions">
+                <span class="action-padding input-action-margin-collapse sort-icon">
+                  <i class="fas fa-sort"></i>
+                </span>
+                <span class="action-padding action-button input-action-margin-collapse">
+                  <span href=# class="action-link far fa-trash-alt" onclick="removePanel(this);"></span>
+                </span>
               </span>
             </span>
-          </span>
-        </div>
-        <div th:id="'collapse' + *{parameters[__${i.index}__].id}" class="panel-collapse collapse">
-          <div class="panel-body">
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">Název:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" th:name="'parameterName' + ${i.index}" th:id="'parameterName' + ${i.index}" th:field="*{parameters[__${i.index}__].name}" th:value="*{parameters[__${i.index}__].name}" required>
+          </div>
+          <div th:id="'collapse' + *{parameters[__${i.index}__].id}" class="panel-collapse collapse">
+            <div class="panel-body">
+              <div class="form-group row">
+                <label for="name" class="col-sm-2 col-form-label">Název:</label>
+                <div class="col-sm-10">
+                  <input type="text" class="form-control" th:name="'parameterName' + ${i.index}" th:id="'parameterName' + ${i.index}" th:field="*{parameters[__${i.index}__].name}" th:value="*{parameters[__${i.index}__].name}" required>
+                </div>
               </div>
-            </div>
-            <div class="form-group row">
-              <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" th:name="'parameterSQLName' + ${i.index}" th:id="'parameterSQLName' + ${i.index}" th:field="*{parameters[__${i.index}__].nameOfSelect}" th:value="*{parameters[__${i.index}__].nameOfSelect}" required>
+              <div class="form-group row">
+                <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
+                <div class="col-sm-10">
+                  <input type="text" class="form-control" th:name="'parameterSQLName' + ${i.index}" th:id="'parameterSQLName' + ${i.index}" th:field="*{parameters[__${i.index}__].nameOfSelect}" th:value="*{parameters[__${i.index}__].nameOfSelect}" required>
+                </div>
               </div>
-            </div>
-            <div class="form-group row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
-              <div class="col-sm-10">
-                <select th:field="*{parameters[__${i.index}__].parameterType}" class="form-control" id="exampleFormControlSelect1">
-                  <option th:each="parameterType : ${allParameterTypes}" th:value="${parameterType.id}" th:text="${parameterType.name}"></option>
-                </select>
+              <div class="form-group row">
+                <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
+                <div class="col-sm-10">
+                  <select th:field="*{parameters[__${i.index}__].parameterType}" class="form-control type-select" id="exampleFormControlSelect1">
+                    <option th:each="parameterType : ${allParameterTypes}" th:value="${parameterType.id}" th:text="${parameterType.name}"></option>
+                  </select>
+                </div>
               </div>
-            </div>
 
-            <div th:if="*{parameters[__${i.index}__].parameterType.name.equals('Výčet')}" class="enum_box">
-              Hodnoty:
-              <div class="enum_values col-md-8">
-                <div th:each="parameterValue, j : *{parameters[__${i.index}__].parameterValues}" class="input-action-box input-border-bottom">
-                  <input type="text" class="form-control-plaintext" th:field="*{parameters[__${i.index}__].parameterValues[__${j.index}__].value}" th:value="*{parameters[__${i.index}__].parameterValues[__${j.index}__].value}">
-
-                  <span class="action-padding input-action-margin sort-icon">
-                    <i class="fas fa-sort"></i>
-                  </span>
-                  <span class="action-padding action-button input-action-margin">
-                    <a href=# class="action-link far fa-trash-alt"></a>
-                  </span>
-                </div>
+              <div th:classappend="!(*{parameters[__${i.index}__].parameterType.name.equals('Výčet')}) ? hidden" class="enum_box">
+                Hodnoty:
+                <div class="enum_values col-md-8">
+                  <div class="enum-wrapper">
+                    <div th:each="parameterValue, j : *{parameters[__${i.index}__].parameterValues}" class="input-action-box input-border-bottom enum-row">
+                      <input type="text" readonly class="form-control-plaintext" th:field="*{parameters[__${i.index}__].parameterValues[__${j.index}__].value}" th:value="*{parameters[__${i.index}__].parameterValues[__${j.index}__].value}">
 
-                <div class="form-group row form-add-item">
-                  <div class="col-md-9">
-                    <input type="text" class="form-control" id="name">
+                      <span class="action-padding input-action-margin sort-icon">
+                        <i class="fas fa-sort"></i>
+                      </span>
+                      <span class="action-padding action-button input-action-margin">
+                        <span class="action-link far fa-trash-alt" onclick="removeEnum(this)"></span>
+                      </span>
+                    </div>
                   </div>
-                  <button type="submit" class="btn btn-primary mb-2">Přidat</button>
-                </div>
-              </div>
-            </div>
 
-            <div th:name="'parameterLocations' + ${i.index}" class="form-group row">
-              <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>
-              <div class="col-sm-10">
-                <div th:each="location, j : ${allLocations}" class="form-check form-check-inline">
-                  <input class="form-check-input" th:field="*{parameters[__${i.index}__].locations}" type="checkbox" th:value="${location.id}" >
-                  <label class="form-check-label" th:for="${location.name}" th:text="${location.name}"></label>
+                  <div class="form-group row form-add-item">
+                    <div class="col-md-9">
+                      <input type="text" class="form-control enum-add-input">
+                    </div>
+                    <span class="btn btn-primary mb-2 enum-add-button">Přidat</span>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
-                <div class="col-sm-10">
-                  <select th:field="*{parameters[__${i.index}__].functions}" class="mbSelect selectpicker" multiple data-live-search="true">
-                    <option th:each="function : ${allFunctions}" th:value="${{function.id}}" th:text="${function.name}"></option>
-                  </select>
-                </div>
-            </div>
-            <div class="form-group row">
-                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
+
+              <div th:name="'parameterLocations' + ${i.index}" class="form-group row">
+                <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>
                 <div class="col-sm-10">
-                  <select th:field="*{parameters[__${i.index}__].operators}" class="mbSelect selectpicker" multiple data-live-search="true">
-                    <option th:each="operator : ${allOperators}" th:value="${{operator.id}}" th:text="${operator.name}"></option>
-                  </select>
+                  <div th:each="location, j : ${allLocations}" class="form-check form-check-inline">
+                    <input class="form-check-input" th:field="*{parameters[__${i.index}__].locations}" type="checkbox" th:value="${location.id}" >
+                    <label class="form-check-label" th:for="${location.name}" th:text="${location.name}"></label>
+                  </div>
                 </div>
+              </div>
+              <div class="form-group row">
+                  <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
+                  <div class="col-sm-10">
+                    <select th:field="*{parameters[__${i.index}__].functions}" class="mbSelect selectpicker" multiple data-live-search="true">
+                      <option th:each="function : ${allFunctions}" th:value="${{function.id}}" th:text="${function.name}"></option>
+                    </select>
+                  </div>
+              </div>
+              <div class="form-group row">
+                  <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
+                  <div class="col-sm-10">
+                    <select th:field="*{parameters[__${i.index}__].operators}" class="mbSelect selectpicker" multiple data-live-search="true">
+                      <option th:each="operator : ${allOperators}" th:value="${{operator.id}}" th:text="${operator.name}"></option>
+                    </select>
+                  </div>
+              </div>
             </div>
           </div>
         </div>
@@ -167,25 +190,25 @@
     <div class="box-header">
       <h3 class="box-title">Oprávnění</h3>
     </div>
-    <div th:each="roleWithAccess, i : ${assembly.roles}" class="input-action-box input-border-bottom">
-      <input type="hidden" th:field="${assembly.roles[__${i.index}__].id}" th:value="${roleWithAccess.id}">
-      <input type="text" readonly class="form-control-plaintext" th:field="${assembly.roles[__${i.index}__].name}" th:id="${roleWithAccess.name}" th:value="${roleWithAccess.name}">
+    <div id ="permission-wrapper">
+      <div th:each="roleWithAccess, i : ${assembly.roles}" class="input-action-box input-border-bottom permission-row">
+        <input type="hidden" class="permission-role" th:field="${assembly.roles[__${i.index}__].id}" th:value="${roleWithAccess.id}">
+        <input type="text" readonly class="form-control-plaintext permission-title" th:field="${assembly.roles[__${i.index}__].name}" th:value="${roleWithAccess.name}">
+
 
-      <span class="action-padding input-action-margin sort-icon">
-      <i class="fas fa-sort"></i>
-      </span>
         <span class="action-padding action-button input-action-margin">
-        <a href=# class="action-link far fa-trash-alt"></a>
-      </span>
+          <span class="action-link far fa-trash-alt" onclick="removeRole(this);"></span>
+        </span>
+      </div>
     </div>
 
     <div class="form-group row form-add-item">
       <div class="col-md-9">
-        <select class="form-control " id="selectNewRole">
+        <select class="form-control " id="permission-select" name="permission-select">
           <option th:each="role : ${allRoles}" th:value="${role.id}" th:text="${role.name}"></option>
         </select>
       </div>
-      <button type="submit" class="btn btn-primary mb-2">Přidat</button>
+      <span class="btn btn-primary mb-2" id="permission-button">Přidat</span>
     </div>
   </div>
 </div>
@@ -208,5 +231,307 @@
 </body>
 </html>
 <script type="text/javascript">
-$("select").selectpicker();
+//$("select").selectpicker();
+
 </script>
+
+<script type="text/javascript">
+
+  $(document).ready(function() {
+
+    $(".panel-wrapper").sortable().disableSelection();
+
+
+    $('.fa-trash-alt').click(function(event){
+      event.preventDefault();
+    });
+
+    $('#add-param-button').on('click', function () {
+      addCollapse();
+    });
+
+    initPanelBody();
+
+  });
+
+  $('#permission-button').on('click', function () {
+    var selectedRoleId = $('select[name=permission-select] option').filter(':selected').val();
+    var selectedRoleValue = $('select[name=permission-select] option').filter(':selected').text();
+
+    var addedRoles = $('.permission-role');
+
+    var roles = [];
+
+    // get assigned roles
+    addedRoles.each(function () {
+      roles.push($(this).val())
+    });
+
+    if (roles.includes(selectedRoleId))
+    {
+      return;
+    }
+
+    addPermissionRow(selectedRoleId, selectedRoleValue);
+
+  });
+
+
+  function addPermissionRow(id, value){
+
+    let row = document.createElement('div');
+    row.classList.add('input-action-box', 'input-border-bottom', 'permission-row');
+
+    let input = document.createElement('input');
+    input.type = 'text';
+    input.classList.add('form-control-plaintext', 'permission-title');
+    input.id = id;
+    input.value = value;
+    input.setAttribute('readonly', "true");
+
+    let hiddenInput = document.createElement('input');
+    hiddenInput.type = 'hidden';
+    hiddenInput.classList.add('permission-role');
+    hiddenInput.value = id;
+
+
+    row.appendChild(input);
+    row.appendChild(hiddenInput);
+
+    let actionButton = document.createElement('span');
+    actionButton.classList.add('action-padding', 'action-button', 'input-action-margin');
+
+    let deleteButton = document.createElement('span');
+    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
+    deleteButton.setAttribute('onclick', 'removeRole(this);');
+    deleteButton.setAttribute('role', 'button');
+
+    actionButton.appendChild(deleteButton);
+    row.appendChild(actionButton);
+
+    document.getElementById('permission-wrapper').appendChild(row);
+
+    var permissionRoles = $('.permission-row');
+    var permissionIndex = 0;
+
+    permissionRoles.each(function () {
+        var hiddenInput = $(this).find('.permission-role');
+
+        hiddenInput.attr("id",`roles${permissionIndex}.id`);
+
+        hiddenInput.attr("name",`roles[${permissionIndex}].id`);
+
+        var input = $(this).find('.permission-title');
+        input.attr("name", `roles[${permissionIndex}].name`);
+        input.attr("id", `roles${permissionIndex}.name`);
+        permissionIndex++;
+    });
+
+  };
+
+
+
+  function addEnumRow(context, value)
+  {
+    let row = document.createElement('div');
+    row.classList.add('input-action-box', 'input-border-bottom', 'enum-row');
+
+
+    let input = document.createElement('input');
+    input.type = 'text';
+    input.classList.add('form-control-plaintext');
+    input.value = value;
+    input.setAttribute('readonly', "true");
+
+    row.appendChild(input);
+
+    let sortSpan = document.createElement('span');
+    sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
+    sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";
+
+    row.appendChild(sortSpan);
+
+    let deleteSpan = document.createElement('span');
+    deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');
+
+    let deleteButton = document.createElement('span');
+    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
+    deleteButton.setAttribute('onclick', 'removeEnum(this)');
+
+    deleteSpan.appendChild(deleteButton);
+
+    row.appendChild(deleteSpan);
+
+    $(context).closest(".enum_box").find(".enum-wrapper").append($(row));
+
+  }
+
+
+  function removeRole (selectedField) {
+    selectedField.closest('.permission-row').remove();
+  }
+
+
+  function showEnum(select) {
+    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
+    enumBox.removeClass("hidden");
+  }
+
+  function hideEnum(select) {
+    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
+    enumBox.addClass("hidden");
+  }
+
+
+  function removeEnum(select) {
+    $(select).closest(".enum-row").remove();
+  }
+
+  function removePanel(panel) {
+    var r = confirm("Opravdu si přejete odstranit parametr?");
+    if (r == true) {
+      $(panel).closest(".parameter").remove();
+    }
+
+  }
+
+
+  function addCollapse() {
+
+    var index = $(".parameter").length + 1;
+
+    var typeSelectValues = $("#allParametersHiddenSelect").html();
+    var functionSelectValues = $("#allFunctionsHiddenSelect").html();
+    var operatorSelectValues = $("#allOperatorsHiddenSelect").html();
+
+    $(".panel-wrapper").append('\n' +
+            '      <div class="panel-group parameter">\n' +
+            '        <div class="panel panel-default">\n' +
+            '          <div class="panel-heading">\n' +
+            '            <span class="panel-title">\n' +
+            `              <a data-toggle="collapse" data-parent="#accordion" href=#collapse${index}>\n` +
+            `                <i class="fas fa-angle-right"></i> Nový parametr\n` +
+            '              </a>\n' +
+            '              <span class="align-right collapse-actions">\n' +
+            '                <span class="action-padding input-action-margin-collapse sort-icon">\n' +
+            '                  <i class="fas fa-sort"></i>\n' +
+            '                </span>\n' +
+            '                <span class="action-padding action-button input-action-margin-collapse">\n' +
+            '                  <span href=# class="action-link far fa-trash-alt" onclick="removePanel(this);"></span>\n' +
+            '                </span>\n' +
+            '              </span>\n' +
+            '            </span>\n' +
+            '          </div>\n' +
+            `          <div id="collapse${index}" class="panel-collapse collapse">\n` +
+            '            <div class="panel-body">\n' +
+            '              <div class="form-group row">\n' +
+            '                <label for="name" class="col-sm-2 col-form-label">Název:</label>\n' +
+            '                <div class="col-sm-10">\n' +
+            `                  <input type="text" class="form-control" name="parametersName[${index}]" id="parameterName[${index}]" value="Nový parametr" required>\n` +
+            '                </div>\n' +
+            '              </div>\n' +
+            '              <div class="form-group row">\n' +
+            '                <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>\n' +
+            '                <div class="col-sm-10">\n' +
+            `                  <input type="text" class="form-control" name="parametersSQLName[${index}]" id="parameterSQLName[${index}]" required>\n` +
+            '                </div>\n' +
+            '              </div>\n' +
+            '              <div class="form-group row">\n' +
+            '                <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>\n' +
+            '                <div class="col-sm-10">\n' +
+            `                  <select name="parameters[${index}].parameterType" class="form-control type-select">\n` +
+                                  typeSelectValues+
+            '                  </select>\n' +
+            '                </div>\n' +
+            '              </div>\n' +
+            '\n' +
+            '              <div class="enum_box">\n' +
+            '                Hodnoty:\n' +
+            '                <div class="enum_values col-md-8">\n' +
+            '                  <div class="enum-wrapper">\n' +
+            '                  </div>\n' +
+            '\n' +
+            '                  <div class="form-group row form-add-item">\n' +
+            '                    <div class="col-md-9">\n' +
+            '                      <input type="text" class="form-control enum-add-input">\n' +
+            '                    </div>\n' +
+            '                    <span class="btn btn-primary mb-2 enum-add-button">Přidat</span>\n' +
+            '                  </div>\n' +
+            '                </div>\n' +
+            '              </div>\n' +
+            '\n' +
+            `              <div class="form-group row">\n` +
+            '                <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>\n' +
+            '                <div class="col-sm-10">\n' +
+            '                  <div class="form-check form-check-inline">\n' +
+            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
+            `                    <input class="form-check-input" name="_parameters[${index}].locations}" type="checkbox" value="1">\n` +
+            '                    <label class="form-check-label" text="Sloupec"></label>\n' +
+            '                  </div>\n' +
+            '                  <div class="form-check form-check-inline">\n' +
+            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
+            `                    <input class="form-check-input" name="_parameters[${index}].locations}" type="checkbox" value="2">\n` +
+            '                    <label class="form-check-label" text="Řádek"></label>\n' +
+            '                  </div>\n' +
+            '                  <div class="form-check form-check-inline">\n' +
+            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
+            `                    <input class="form-check-input" name="_parameters[${index}].locations}" type="checkbox" value="3">\n` +
+            '                    <label class="form-check-label" text="Hodnota"></label>\n' +
+            '                  </div>\n' +
+            '                </div>\n' +
+            '              </div>\n' +
+            '              <div class="form-group row">\n' +
+            '                  <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>\n' +
+            '                  <div class="col-sm-10">\n' +
+            `                    <select name="parameters[${index}].functions" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
+                                    functionSelectValues +
+            '                    </select>\n' +
+            '                  </div>\n' +
+            '              </div>\n' +
+            '              <div class="form-group row">\n' +
+            '                  <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>\n' +
+            '                  <div class="col-sm-10">\n' +
+            `                    <select name="parameters[${index}].operators" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
+                                    operatorSelectValues +
+            '                    </select>\n' +
+            '                  </div>\n' +
+            '              </div>\n' +
+            '            </div>\n' +
+            '          </div>\n' +
+            '        </div>\n' +
+            '      </div>\n' +
+            '    ');
+
+    this.initPanelBody();
+
+  }
+
+  function initPanelBody() {
+    $('.enum-add-button').on('click', function () {
+      var input = $(this).closest(".row").find('.enum-add-input');
+      addEnumRow(this, input.val());
+
+      input.val("");
+    });
+
+    $('.enum-wrapper').sortable().disableSelection();
+
+    $('.type-select').on('change', function () {
+      if (this.value == 1)
+      {
+        showEnum(this);
+      }
+      else
+      {
+        hideEnum(this);
+      }
+    });
+
+    $(".selectpicker").selectpicker('refresh');
+
+    $('.fa-trash-alt').click(function(event){
+      event.preventDefault();
+    });
+  }
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index 45181263..c321f04d 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -315,3 +315,7 @@ table .col-3-p { width:10%; }
   text-align:center;
   vertical-align:middle !important;
 }
+
+.hidden {
+  display: none;
+}
