Projekt

Obecné

Profil

Stáhnout (23.2 KB) Statistiky
| Větev: | Revize:
1
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head>
2
    <meta charset="utf-8">
3
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
4
    <meta name="description" content="">
5
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
6
    <meta name="generator" content="Jekyll v3.8.6">
7
    <title>Album example · Bootstrap</title>
8
    <link rel="canonical" href="https://getbootstrap.com/docs/4.4/examples/album/">
9

    
10
    <!-- Bootstrap core CSS -->
11
    <link href="css/bootstrap.min.css" rel="stylesheet">
12

    
13
    <link href="css/bootstrap-select.min.css" rel="stylesheet">
14
    <link href="css/fontawesome.min.css" rel="stylesheet">
15
    <link href="css/style.css" rel="stylesheet">
16

    
17
    <script type="text/javascript" src="js/jquery.js"></script>
18
    <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>
19
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
20
    <script type="text/javascript" src="js/bootstrap-select.min.js"></script>
21

    
22

    
23
    <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
24
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
25
</head>
26
<body>
27

    
28
<select class="hidden" id="allParametersHiddenSelect">
29
  <option th:each="parameterType : ${allParameterTypes}" th:value="${parameterType.id}" th:text="${parameterType.name}"></option>
30
</select>
31

    
32

    
33
<select class="hidden" id="allFunctionsHiddenSelect">
34
    <option th:each="function : ${allFunctions}" th:value="${{function.id}}" th:text="${function.name}"></option>
35
</select>
36

    
37

    
38
<select class="hidden" id="allOperatorsHiddenSelect">
39
    <option th:each="operator : ${allOperators}" th:value="${{operator.id}}" th:text="${operator.name}"></option>
40
</select>
41

    
42

    
43
<div id="test"></div>
44
<main role="main">
45

    
46
  <div class="container">
47
    <h1 th:text="${title}"></h1>
48
    <a href="/" class="btn btn-success mb-2">Zpět</a>
49
  </div>
50

    
51
  <p th:text="${errorText}"></p>
52

    
53
<form th:object="${assembly}" th:action="${assembly.id} != null ? @{/assembly_edit(assemblyID=${assembly.id})} : @{/assembly_new}" method="post">
54
  <input type="hidden" th:field="*{id}" th:value="*{id}" />
55
  <div class="container box">
56
    <div class="col-md-12">
57
        <div class="form-group row">
58
          <label for="name" class="col-sm-2 col-form-label">Název sestavy:</label>
59
          <div class="col-sm-10">
60
            <input type="text" class="form-control" name="assemblyName" id="assemblyName" th:field="*{name}" th:value="*{name}" required>
61
          </div>
62
        </div>
63
        <div class="form-group row">
64
          <label for="assemblySQLQuery" class="col-sm-2 col-form-label">SQL dotaz:</label>
65
          <div class="col-sm-10">
66
            <textarea class="form-control" name="assemblySQLQuery" id="assemblySQLQuery" rows="6" th:field="*{SQLQuery}" th:text="*{SQLQuery}" required></textarea>
67
          </div>
68
        </div>
69
        <div class="form-group row">
70
          <label class="form-check-label col-sm-2" for="checkboxPublic">Veřejný:</label>
71
          <div class="col-sm-10">
72
            <div class="form-check">
73
              <input class="form-check-input" type="checkbox"  th:checked="*{isPublic} == 1" name="checkboxPublic" id="checkboxPublic">
74
            </div>
75
          </div>
76
        </div>
77
    </div>
78
  </div>
79
</div>
80

    
81
  <div class="container box">
82
    <div class="col-md-12">
83
    <div class="box-header">
84
      <h3 class="box-title">Parametry</h3>
85
      <span class="btn btn-success" id="add-param-button"><i class="fas fa-plus"></i> Přidat parametr</span>
86
    </div>
87

    
88
    <div id="accordion" class="panel-wrapper">
89
      <div th:each="parameter, i : *{parameters}" class="panel-group parameter">
90
        <input type="hidden" th:field="*{parameters[__${i.index}__]}" th:value="*{parameters[__${i.index}__].id}" />
91
        <div class="panel panel-default">
92
          <div class="panel-heading">
93
            <span class="panel-title">
94
              <a data-toggle="collapse" data-parent="#accordion" th:attr="href='#collapse' + ${i.index}">
95
                <i class="fas fa-angle-right"></i> <span th:text="*{parameters[__${i.index}__].name}"></span>
96
              </a>
97
              <span class="align-right collapse-actions">
98
                <span class="action-padding input-action-margin-collapse sort-icon">
99
                  <i class="fas fa-sort"></i>
100
                </span>
101
                <span class="action-padding action-button input-action-margin-collapse">
102
                  <span href=# class="action-link far fa-trash-alt" onclick="removePanel(this);"></span>
103
                </span>
104
              </span>
105
            </span>
106
          </div>
107
          <div th:id="'collapse' + ${i.index}" class="panel-collapse collapse">
108
            <div class="panel-body">
109
              <div class="form-group row">
110
                <label for="name" class="col-sm-2 col-form-label">Název:</label>
111
                <div class="col-sm-10">
112
                  <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>
113
                </div>
114
              </div>
115
              <div class="form-group row">
116
                <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
117
                <div class="col-sm-10">
118
                  <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>
119
                </div>
120
              </div>
121
              <div class="form-group row">
122
                <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
123
                <div class="col-sm-10">
124
                  <select th:field="*{parameters[__${i.index}__].parameterType}" class="form-control type-select" id="exampleFormControlSelect1">
125
                    <option th:each="parameterType : ${allParameterTypes}" th:value="${parameterType.id}" th:text="${parameterType.name}"></option>
126
                  </select>
127
                </div>
128
              </div>
129

    
130
              <div th:classappend="!(*{parameters[__${i.index}__].parameterType.name.equals('Výčet')}) ? hidden" class="enum_box">
131
                Hodnoty:
132
                <div class="enum_values col-md-8">
133
                  <div class="enum-wrapper">
134
                    <input type="hidden" class="enum-index" th:value="${i.index}">
135
                    <div th:each="parameterValue, j : *{parameters[__${i.index}__].parameterValues}" class="input-action-box input-border-bottom enum-row">
136
                      <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}">
137

    
138
                      <span class="action-padding input-action-margin sort-icon">
139
                        <i class="fas fa-sort"></i>
140
                      </span>
141
                      <span class="action-padding action-button input-action-margin">
142
                        <span class="action-link far fa-trash-alt" onclick="removeEnum(this)"></span>
143
                      </span>
144
                    </div>
145
                  </div>
146

    
147
                  <div class="form-group row form-add-item">
148
                    <div class="col-md-9">
149
                      <input type="text" class="form-control enum-add-input">
150
                    </div>
151
                    <span class="btn btn-primary mb-2 enum-add-button">Přidat</span>
152
                  </div>
153
                </div>
154
              </div>
155

    
156
              <div th:name="'parameterLocations' + ${i.index}" class="form-group row">
157
                <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>
158
                <div class="col-sm-10">
159
                  <div th:each="location, j : ${allLocations}" class="form-check form-check-inline">
160
                    <input class="form-check-input" th:field="*{parameters[__${i.index}__].locations}" type="checkbox" th:value="${location.id}" >
161
                    <label class="form-check-label" th:for="${location.name}" th:text="${location.name}"></label>
162
                  </div>
163
                </div>
164
              </div>
165
              <div class="form-group row">
166
                  <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
167
                  <div class="col-sm-10">
168
                    <select th:field="*{parameters[__${i.index}__].functions}" class="mbSelect selectpicker" multiple data-live-search="true">
169
                      <option th:each="function : ${allFunctions}" th:value="${{function.id}}" th:text="${function.name}"></option>
170
                    </select>
171
                  </div>
172
              </div>
173
              <div class="form-group row">
174
                  <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
175
                  <div class="col-sm-10">
176
                    <select th:field="*{parameters[__${i.index}__].operators}" class="mbSelect selectpicker" multiple data-live-search="true">
177
                      <option th:each="operator : ${allOperators}" th:value="${{operator.id}}" th:text="${operator.name}"></option>
178
                    </select>
179
                  </div>
180
              </div>
181
            </div>
182
          </div>
183
        </div>
184
      </div>
185
    </div>
186
  </div>
187
</div>
188

    
189
  <div class="container box">
190
    <div class="col-md-4">
191
    <div class="box-header">
192
      <h3 class="box-title">Oprávnění</h3>
193
    </div>
194
    <div id ="permission-wrapper">
195
      <div th:each="roleWithAccess, i : ${assembly.roles}" class="input-action-box input-border-bottom permission-row">
196
        <input type="hidden" class="permission-role" th:field="${assembly.roles[__${i.index}__].id}" th:value="${roleWithAccess.id}">
197
        <input type="text" readonly class="form-control-plaintext permission-title" th:field="${assembly.roles[__${i.index}__].name}" th:value="${roleWithAccess.name}">
198

    
199

    
200
        <span class="action-padding action-button input-action-margin">
201
          <span class="action-link far fa-trash-alt" onclick="removeRole(this);"></span>
202
        </span>
203
      </div>
204
    </div>
205

    
206
    <div class="form-group row form-add-item">
207
      <div class="col-md-9">
208
        <select class="form-control " id="permission-select" name="permission-select">
209
          <option th:each="role : ${allRoles}" th:value="${role.id}" th:text="${role.name}"></option>
210
        </select>
211
      </div>
212
      <span class="btn btn-primary mb-2" id="permission-button">Přidat</span>
213
    </div>
214
  </div>
215
</div>
216
  <div class="submit_center_button">
217
      <button type="submit" class="btn btn-success mb-2">Uložit</button>
218
  </div>
219

    
220
</form>
221

    
222

    
223
</main>
224

    
225
<footer class="text-muted">
226
  <div class="container">
227

    
228
  </div>
229
</footer>
230

    
231
<script type="text/javascript" src="js/app.js"></script>
232
</body>
233
</html>
234
<script type="text/javascript">
235
//$("select").selectpicker();
236

    
237
</script>
238

    
239
<script type="text/javascript">
240

    
241
  $(document).ready(function() {
242

    
243
    $(".panel-wrapper").sortable().disableSelection();
244

    
245

    
246
    $('.fa-trash-alt').click(function(event){
247
      event.preventDefault();
248
    });
249

    
250
    $('#add-param-button').on('click', function () {
251
      addCollapse();
252
    });
253

    
254
    initPanelBody();
255

    
256
  });
257

    
258
  $('#permission-button').on('click', function () {
259
    var selectedRoleId = $('select[name=permission-select] option').filter(':selected').val();
260
    var selectedRoleValue = $('select[name=permission-select] option').filter(':selected').text();
261

    
262
    var addedRoles = $('.permission-role');
263

    
264
    var roles = [];
265

    
266
    // get assigned roles
267
    addedRoles.each(function () {
268
      roles.push($(this).val())
269
    });
270

    
271
    if (roles.includes(selectedRoleId))
272
    {
273
      return;
274
    }
275

    
276
    addPermissionRow(selectedRoleId, selectedRoleValue);
277

    
278
  });
279

    
280

    
281
  function addPermissionRow(id, value){
282

    
283
    let row = document.createElement('div');
284
    row.classList.add('input-action-box', 'input-border-bottom', 'permission-row');
285

    
286
    let input = document.createElement('input');
287
    input.type = 'text';
288
    input.classList.add('form-control-plaintext', 'permission-title');
289
    input.id = id;
290
    input.value = value;
291
    input.setAttribute('readonly', "true");
292

    
293
    let hiddenInput = document.createElement('input');
294
    hiddenInput.type = 'hidden';
295
    hiddenInput.classList.add('permission-role');
296
    hiddenInput.value = id;
297

    
298

    
299
    row.appendChild(input);
300
    row.appendChild(hiddenInput);
301

    
302
    let actionButton = document.createElement('span');
303
    actionButton.classList.add('action-padding', 'action-button', 'input-action-margin');
304

    
305
    let deleteButton = document.createElement('span');
306
    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
307
    deleteButton.setAttribute('onclick', 'removeRole(this);');
308
    deleteButton.setAttribute('role', 'button');
309

    
310
    actionButton.appendChild(deleteButton);
311
    row.appendChild(actionButton);
312

    
313
    document.getElementById('permission-wrapper').appendChild(row);
314

    
315
    var permissionRoles = $('.permission-row');
316
    var permissionIndex = 0;
317

    
318
    permissionRoles.each(function () {
319
        var hiddenInput = $(this).find('.permission-role');
320

    
321
        hiddenInput.attr("id",`roles${permissionIndex}.id`);
322

    
323
        hiddenInput.attr("name",`roles[${permissionIndex}].id`);
324

    
325
        var input = $(this).find('.permission-title');
326
        input.attr("name", `roles[${permissionIndex}].name`);
327
        input.attr("id", `roles${permissionIndex}.name`);
328
        permissionIndex++;
329
    });
330

    
331
  };
332

    
333

    
334

    
335
  function addEnumRow(context, value)
336
  {
337
    let enumIndex = $(context).closest('.enum_box').find('.enum-index').val();
338
    let countIndex = $(context).closest('.enum_box').find('.enum-row').length;
339

    
340
    let row = document.createElement('div');
341
    row.classList.add('input-action-box', 'input-border-bottom', 'enum-row');
342

    
343

    
344
    let input = document.createElement('input');
345
    input.type = 'text';
346
    input.classList.add('form-control-plaintext');
347
    input.value = value;
348
    input.setAttribute('readonly', "true");
349
    input.setAttribute('id', `parameters${enumIndex}.parameterValues${countIndex}.value`);
350
    input.setAttribute('name', `parameters[${enumIndex}].parameterValues[${countIndex}].value`);
351

    
352
    row.appendChild(input);
353

    
354
    let sortSpan = document.createElement('span');
355
    sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
356
    sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";
357

    
358
    row.appendChild(sortSpan);
359

    
360
    let deleteSpan = document.createElement('span');
361
    deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');
362

    
363
    let deleteButton = document.createElement('span');
364
    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
365
    deleteButton.setAttribute('onclick', 'removeEnum(this)');
366

    
367
    deleteSpan.appendChild(deleteButton);
368

    
369
    row.appendChild(deleteSpan);
370

    
371
    $(context).closest(".enum_box").find(".enum-wrapper").append($(row));
372

    
373
  }
374

    
375

    
376
  function removeRole (selectedField) {
377
    selectedField.closest('.permission-row').remove();
378
  }
379

    
380

    
381
  function showEnum(select) {
382
    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
383
    enumBox.removeClass("hidden");
384
  }
385

    
386
  function hideEnum(select) {
387
    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
388
    enumBox.addClass("hidden");
389
  }
390

    
391

    
392
  function removeEnum(select) {
393
    $(select).closest(".enum-row").remove();
394
  }
395

    
396
  function removePanel(panel) {
397
    var r = confirm("Opravdu si přejete odstranit parametr?");
398
    if (r == true) {
399
      $(panel).closest(".parameter").remove();
400
    }
401

    
402
  }
403

    
404

    
405
  function addCollapse() {
406

    
407
    var index = $(".parameter").length;
408

    
409
    var typeSelectValues = $("#allParametersHiddenSelect").html();
410
    var functionSelectValues = $("#allFunctionsHiddenSelect").html();
411
    var operatorSelectValues = $("#allOperatorsHiddenSelect").html();
412

    
413
    $(".panel-wrapper").append('\n' +
414
            '      <div class="panel-group parameter">\n' +
415
            '        <div class="panel panel-default">\n' +
416
            '          <div class="panel-heading">\n' +
417
            '            <span class="panel-title">\n' +
418
            `              <a data-toggle="collapse" data-parent="#accordion" href=#collapse${index}>\n` +
419
            `                <i class="fas fa-angle-right"></i> Nový parametr\n` +
420
            '              </a>\n' +
421
            '              <span class="align-right collapse-actions">\n' +
422
            '                <span class="action-padding input-action-margin-collapse sort-icon">\n' +
423
            '                  <i class="fas fa-sort"></i>\n' +
424
            '                </span>\n' +
425
            '                <span class="action-padding action-button input-action-margin-collapse">\n' +
426
            '                  <span href=# class="action-link far fa-trash-alt" onclick="removePanel(this);"></span>\n' +
427
            '                </span>\n' +
428
            '              </span>\n' +
429
            '            </span>\n' +
430
            '          </div>\n' +
431
            `          <div id="collapse${index}" class="panel-collapse collapse">\n` +
432
            '            <div class="panel-body">\n' +
433
            '              <div class="form-group row">\n' +
434
            '                <label for="name" class="col-sm-2 col-form-label">Název:</label>\n' +
435
            '                <div class="col-sm-10">\n' +
436
            `                  <input type="text" class="form-control" name="parameters[${index}].name" id="parameterName${index}" value="Nový parametr" required>\n` +
437
            '                </div>\n' +
438
            '              </div>\n' +
439
            '              <div class="form-group row">\n' +
440
            '                <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>\n' +
441
            '                <div class="col-sm-10">\n' +
442
            `                  <input type="text" class="form-control" name="parameters[${index}].nameOfSelect" id="parameterSQLName${index}" required>\n` +
443
            '                </div>\n' +
444
            '              </div>\n' +
445
            '              <div class="form-group row">\n' +
446
            '                <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>\n' +
447
            '                <div class="col-sm-10">\n' +
448
            `                  <select name="parameters[${index}].parameterType" class="form-control type-select">\n` +
449
                                  typeSelectValues+
450
            '                  </select>\n' +
451
            '                </div>\n' +
452
            '              </div>\n' +
453
            '\n' +
454
            '              <div class="enum_box">\n' +
455
            '                Hodnoty:\n' +
456
            '                <div class="enum_values col-md-8">\n' +
457
            '                  <div class="enum-wrapper">\n' +
458
            `                     <input type="hidden" class="enum-index" value="${index}">\n` +
459
            '                  </div>\n' +
460
            '\n' +
461
            '                  <div class="form-group row form-add-item">\n' +
462
            '                    <div class="col-md-9">\n' +
463
            '                      <input type="text" class="form-control enum-add-input">\n' +
464
            '                    </div>\n' +
465
            '                    <span class="btn btn-primary mb-2 enum-add-button">Přidat</span>\n' +
466
            '                  </div>\n' +
467
            '                </div>\n' +
468
            '              </div>\n' +
469
            '\n' +
470
            `              <div class="form-group row">\n` +
471
            '                <label for="exampleFormControlSelect1" class="col-sm-2">Umístění:</label>\n' +
472
            '                <div class="col-sm-10">\n' +
473
            '                  <div class="form-check form-check-inline">\n' +
474
            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
475
            `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations1" type="checkbox" value="1">\n` +
476
            `                    <label class="form-check-label" for="parameters[${index}].locations" >Sloupec</label>\n` +
477
            '                  </div>\n' +
478
            '                  <div class="form-check form-check-inline">\n' +
479
            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
480
            `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations2" type="checkbox" value="2">\n` +
481
            '                    <label class="form-check-label" for="parameters[${index}].locations">Řádek</label>\n' +
482
            '                  </div>\n' +
483
            '                  <div class="form-check form-check-inline">\n' +
484
            `                    <input type="hidden" name="_parameters[${index}].locations" value="on">\n` +
485
            `                    <input class="form-check-input" name="parameters[${index}].locations" id="parameters${index}.locations3" type="checkbox" value="3">\n` +
486
            '                    <label class="form-check-label" for="parameters[${index}].locations" >Hodnota</label>\n' +
487
            '                  </div>\n' +
488
            '                </div>\n' +
489
            '              </div>\n' +
490
            '              <div class="form-group row">\n' +
491
            '                  <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>\n' +
492
            '                  <div class="col-sm-10">\n' +
493
            `                    <select name="parameters[${index}].functions" id="parameters${index}.functions" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
494
                                    functionSelectValues +
495
            '                    </select>\n' +
496
            '                  </div>\n' +
497
            '              </div>\n' +
498
            '              <div class="form-group row">\n' +
499
            '                  <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>\n' +
500
            '                  <div class="col-sm-10">\n' +
501
            `                    <select name="parameters[${index}].operators" id="parameters${index}.operators" class="mbSelect selectpicker" multiple data-live-search="true">\n` +
502
                                    operatorSelectValues +
503
            '                    </select>\n' +
504
            '                  </div>\n' +
505
            '              </div>\n' +
506
            '            </div>\n' +
507
            '          </div>\n' +
508
            '        </div>\n' +
509
            '      </div>\n' +
510
            '    ');
511

    
512
    this.initPanelBody();
513

    
514
  }
515

    
516
  function initPanelBody() {
517
    $('.enum-add-button').on('click', function () {
518
      var input = $(this).closest(".row").find('.enum-add-input');
519
      addEnumRow(this, input.val());
520

    
521
      input.val("");
522
    });
523

    
524
    $('.enum-wrapper').sortable().disableSelection();
525

    
526
    $('.type-select').on('change', function () {
527
      if (this.value == 1)
528
      {
529
        showEnum(this);
530
      }
531
      else
532
      {
533
        hideEnum(this);
534
      }
535
    });
536

    
537
    $(".selectpicker").selectpicker('refresh');
538

    
539
    $('.fa-trash-alt').click(function(event){
540
      event.preventDefault();
541
    });
542
  }
543

    
544
</script>
(2-2/4)