Projekt

Obecné

Profil

Stáhnout (22.5 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' + *{parameters[__${i.index}__].id}">
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' + *{parameters[__${i.index}__].id}" 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
                    <div th:each="parameterValue, j : *{parameters[__${i.index}__].parameterValues}" class="input-action-box input-border-bottom enum-row">
135
                      <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}">
136

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

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

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

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

    
198

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

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

    
219
</form>
220

    
221

    
222
</main>
223

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

    
227
  </div>
228
</footer>
229

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

    
236
</script>
237

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

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

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

    
244

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

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

    
253
    initPanelBody();
254

    
255
  });
256

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

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

    
263
    var roles = [];
264

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

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

    
275
    addPermissionRow(selectedRoleId, selectedRoleValue);
276

    
277
  });
278

    
279

    
280
  function addPermissionRow(id, value){
281

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

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

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

    
297

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

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

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

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

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

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

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

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

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

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

    
330
  };
331

    
332

    
333

    
334
  function addEnumRow(context, value)
335
  {
336
    let row = document.createElement('div');
337
    row.classList.add('input-action-box', 'input-border-bottom', 'enum-row');
338

    
339

    
340
    let input = document.createElement('input');
341
    input.type = 'text';
342
    input.classList.add('form-control-plaintext');
343
    input.value = value;
344
    input.setAttribute('readonly', "true");
345

    
346
    row.appendChild(input);
347

    
348
    let sortSpan = document.createElement('span');
349
    sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
350
    sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";
351

    
352
    row.appendChild(sortSpan);
353

    
354
    let deleteSpan = document.createElement('span');
355
    deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');
356

    
357
    let deleteButton = document.createElement('span');
358
    deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
359
    deleteButton.setAttribute('onclick', 'removeEnum(this)');
360

    
361
    deleteSpan.appendChild(deleteButton);
362

    
363
    row.appendChild(deleteSpan);
364

    
365
    $(context).closest(".enum_box").find(".enum-wrapper").append($(row));
366

    
367
  }
368

    
369

    
370
  function removeRole (selectedField) {
371
    selectedField.closest('.permission-row').remove();
372
  }
373

    
374

    
375
  function showEnum(select) {
376
    var enumBox = $(select).closest(".panel-collapse").find(".enum_box");
377
    enumBox.removeClass("hidden");
378
  }
379

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

    
385

    
386
  function removeEnum(select) {
387
    $(select).closest(".enum-row").remove();
388
  }
389

    
390
  function removePanel(panel) {
391
    var r = confirm("Opravdu si přejete odstranit parametr?");
392
    if (r == true) {
393
      $(panel).closest(".parameter").remove();
394
    }
395

    
396
  }
397

    
398

    
399
  function addCollapse() {
400

    
401
    var index = $(".parameter").length + 1;
402

    
403
    var typeSelectValues = $("#allParametersHiddenSelect").html();
404
    var functionSelectValues = $("#allFunctionsHiddenSelect").html();
405
    var operatorSelectValues = $("#allOperatorsHiddenSelect").html();
406

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

    
505
    this.initPanelBody();
506

    
507
  }
508

    
509
  function initPanelBody() {
510
    $('.enum-add-button').on('click', function () {
511
      var input = $(this).closest(".row").find('.enum-add-input');
512
      addEnumRow(this, input.val());
513

    
514
      input.val("");
515
    });
516

    
517
    $('.enum-wrapper').sortable().disableSelection();
518

    
519
    $('.type-select').on('change', function () {
520
      if (this.value == 1)
521
      {
522
        showEnum(this);
523
      }
524
      else
525
      {
526
        hideEnum(this);
527
      }
528
    });
529

    
530
    $(".selectpicker").selectpicker('refresh');
531

    
532
    $('.fa-trash-alt').click(function(event){
533
      event.preventDefault();
534
    });
535
  }
536

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