Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 33d18654

Přidáno uživatelem Jan Čarnogurský před více než 4 roky(ů)

temp

Zobrazit rozdíly:

src/main/webapp/WEB-INF/templates/assembly_edit.html
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 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
18
    <script type="text/javascript" src="js/jquery.js"></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
    <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
23

  
24
    <script type="text/javascript" src="js/jquery.js"></script>
25
    <script src="//code.jquery.com/jquery-1.11.1.js"></script>
26
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
27
</head>
28
<body>
29
<div id="test"></div>
30
<main role="main">
31

  
32
  <div class="container">
33
    <h1>
34
      Editace - Studenti - studijní programy
35
    </h1>
36
  </div>
37

  
38
<form>
39
  <div class="container box">
40
    <div class="col-md-12">
41
    <div class="form-group row">
42
      <label for="name" class="col-sm-2 col-form-label">Název sestavy:</label>
43
      <div class="col-sm-10">
44
        <input type="text" class="form-control" id="name" th:value="${assembly.name}">
45
      </div>
46
    </div>
47
    <div class="form-group row">
48
      <label for="sql_query" class="col-sm-2 col-form-label">SQL dotaz:</label>
49
      <div class="col-sm-10">
50
        <textarea class="form-control" id="sql_query" rows="6" th:text="${assembly.SQLQuery}"></textarea>
51
      </div>
52
    </div>
53
    <div class="form-group row">
54
      <label class="form-check-label col-sm-2" for="defaultCheck1">Veřejný:</label>
55
      <div class="col-sm-10">
56
        <div class="form-check">
57
          <input th:if="${assembly.isPublic == 0}" class="form-check-input" type="checkbox" value="" id="defaultCheck1">
58
          <input th:unless="${assembly.isPublic == 0}" class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked="true">
59
        </div>
60
      </div>
61
    </div>
62
</div>
63
  </div>
64
</div>
65

  
66
  <div class="container box">
67
    <div class="col-md-12">
68
    <div class="box-header">
69
      <h3 class="box-title">Parametry</h3>
70
      <button type="button" class="btn btn-success"><i class="fas fa-plus"></i> Přidat parametr</button>
71
    </div>
72

  
73
    <div class="panel-group sort" id="accordion">
74
      <div class="panel panel-default">
75

  
76
        <div class="panel-heading">
77
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
78
            <span class="panel-title">
79
                <i class="fas fa-angle-right"></i> Akademický rok
80
            </span>
81
          </a>
82

  
83
          <span class="align-right collapse-actions">
84
            <span class="action-padding input-action-margin-collapse sort-icon">
85
              <i class="fas fa-sort"></i>
86
            </span>
87
            <span class="action-padding action-button input-action-margin-collapse">
88
              <a href=# class="action-link far fa-trash-alt"></a>
89
            </span>
90
          </span>
91

  
92
        </div>
93
        <div id="collapse1" class="panel-collapse collapse in">
94
          <div class="panel-body">
95
            <div class="form-group row">
96
              <label for="name" class="col-sm-2 col-form-label">Název:</label>
97
              <div class="col-sm-10">
98
                <input type="text" class="form-control" id="name">
99
              </div>
100
            </div>
101
            <div class="form-group row">
102
              <label for="name" class="col-md-2 col-form-label">V&nbsp;SQL:</label>
103
              <div class="col-sm-10">
104
                <input type="text" class="form-control" id="name">
105
              </div>
106
            </div>
107
            <div class="form-group row type-row">
108
              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
109
              <div class="col-sm-10">
110
                <select class="form-control type-select">
111
                  <option>Text</option>
112
                  <option>Datum</option>
113
                  <option>Výčet</option>
114
                </select>
115
              </div>
116
            </div>
117
            <div class="form-group row">
118
              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
119
              <div class="col-sm-10">
120
                <div class="form-check form-check-inline">
121
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
122
                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
123
                </div>
124
                <div class="form-check form-check-inline">
125
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
126
                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
127
                </div>
128
                <div class="form-check form-check-inline">
129
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
130
                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
131
                </div>
132
              </div>
133
            </div>
134
            <div class="form-group row">
135
                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
136
                <div class="col-sm-10">
137
                  <select class="selectpicker" multiple data-live-search="true">
138
                    <option>SUM</option>
139
                    <option>AVG</option>
140
                    <option>MAX</option>
141
                    <option>MIN</option>
142
                  </select>
143
                </div>
144
            </div>
145
            <div class="form-group row">
146
                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
147
                <div class="col-sm-10">
148
                  <select class="selectpicker" multiple data-live-search="true">
149
                    <option>LIKE</option>
150
                    <option>BETWEEN</option>
151
                    <option>EQUAL</option>
152
                    <option>LESS</option>
153
                  </select>
154
                </div>
155
            </div>
156
          </div>
157
        </div>
158
      </div>
159
      <div class="panel panel-default">
160
        <div class="panel-heading">
161
          <span class="panel-title">
162
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
163
              <i class="fas fa-angle-right"></i> Typ studia
164
            </a>
165

  
166
            <span class="align-right collapse-actions">
167
              <span class="action-padding input-action-margin-collapse sort-icon">
168
                <i class="fas fa-sort"></i>
169
              </span>
170
              <span class="action-padding action-button input-action-margin-collapse">
171
                <a href=# class="action-link far fa-trash-alt"></a>
172
              </span>
173
            </span>
174
          </span>
175
        </div>
176
        <div id="collapse2" class="panel-collapse collapse">
177
          <div class="panel-body">
178
            <div class="form-group row">
179
              <label for="name" class="col-sm-2 col-form-label">Název:</label>
180
              <div class="col-sm-10">
181
                <input type="text" class="form-control" id="name">
182
              </div>
183
            </div>
184
            <div class="form-group row">
185
              <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
186
              <div class="col-sm-10">
187
                <input type="text" class="form-control" id="name">
188
              </div>
189
            </div>
190
            <div class="form-group row type-row">
191
              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
192
              <div class="col-sm-10">
193
                <select class="form-control type-select">
194
                  <option>Text</option>
195
                  <option>Datum</option>
196
                  <option>Výčet</option>
197
                </select>
198
              </div>
199
            </div>
200
            <div class="form-group row">
201
              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
202
              <div class="col-sm-10">
203
                <div class="form-check form-check-inline">
204
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
205
                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
206
                </div>
207
                <div class="form-check form-check-inline">
208
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
209
                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
210
                </div>
211
                <div class="form-check form-check-inline">
212
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
213
                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
214
                </div>
215
              </div>
216
            </div>
217
            <div class="form-group row">
218
                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
219
                <div class="col-sm-10">
220
                  <select class="selectpicker" multiple data-live-search="true">
221
                    <option>SUM</option>
222
                    <option>AVG</option>
223
                    <option>MAX</option>
224
                    <option>MIN</option>
225
                  </select>
226
                </div>
227
            </div>
228
            <div class="form-group row">
229
                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
230
                <div class="col-sm-10">
231
                  <select class="selectpicker" multiple data-live-search="true">
232
                    <option>LIKE</option>
233
                    <option>BETWEEN</option>
234
                    <option>EQUAL</option>
235
                    <option>LESS</option>
236
                  </select>
237
                </div>
238
            </div>
239
          </div>
240
        </div>
241
      </div>
242
      <div class="panel panel-default">
243
        <div class="panel-heading">
244
          <span class="panel-title">
245
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
246
              <i class="fas fa-angle-right"></i> Fakulta
247
            </a>
248
            <span class="align-right collapse-actions">
249
              <span class="action-padding input-action-margin-collapse sort-icon">
250
                <i class="fas fa-sort"></i>
251
              </span>
252
              <span class="action-padding action-button input-action-margin-collapse">
253
                <a href=# class="action-link far fa-trash-alt"></a>
254
              </span>
255
            </span>
256
          </span>
257
        </div>
258
        <div id="collapse3" class="panel-collapse collapse">
259
          <div class="panel-body">
260
            <div class="form-group row">
261
              <label for="name" class="col-sm-2 col-form-label">Název:</label>
262
              <div class="col-sm-10">
263
                <input type="text" class="form-control" id="name">
264
              </div>
265
            </div>
266
            <div class="form-group row">
267
              <label for="name" class="col-sm-2 col-form-label">V&nbsp;SQL:</label>
268
              <div class="col-sm-10">
269
                <input type="text" class="form-control" id="name">
270
              </div>
271
            </div>
272
            <div class="form-group row type-row">
273
              <label for="exampleFormControlSelect1" class="col-sm-2">Typ:</label>
274
              <div class="col-sm-10">
275
                <select class="form-control type-select">
276
                  <option value="1">Text</option>
277
                  <option value="2">Datum</option>
278
                  <option value="3">Výčet</option>
279
                </select>
280
              </div>
281
            </div>
282

  
283
            <div class="enum_box">
284
              Hodnoty:
285
              <div class="enum_values col-md-8">
286
                  <div id="enum-wrapper">
287
                    <div class="input-action-box input-border-bottom">
288
                      <input type="text" readonly class="form-control-plaintext" value="Doktorský">
289

  
290
                      <span class="action-padding input-action-margin sort-icon">
291
                        <i class="fas fa-sort"></i>
292
                      </span>
293
                      <span class="action-padding action-button input-action-margin">
294
                        <a href=# class="action-link far fa-trash-alt"></a>
295
                      </span>
296
                    </div>
297
                    <div class="input-action-box input-border-bottom">
298
                      <input type="text" readonly class="form-control-plaintext" value="Navazující">
299

  
300
                      <span class="action-padding input-action-margin sort-icon">
301
                        <i class="fas fa-sort"></i>
302
                      </span>
303
                      <span class="action-padding action-button input-action-margin">
304
                        <a href=# class="action-link far fa-trash-alt"></a>
305
                      </span>
306

  
307
                    </div>
308
                    <div class="input-action-box input-border-bottom">
309
                      <input type="text" readonly class="form-control-plaintext" value="Bakalářský">
310

  
311
                      <span class="action-padding input-action-margin sort-icon">
312
                        <i class="fas fa-sort"></i>
313
                      </span>
314
                      <span class="action-padding action-button input-action-margin">
315
                        <a href=# class="action-link far fa-trash-alt"></a>
316
                      </span>
317
                    </div>
318
                </div>
319
                <div class="form-group row form-add-item">
320
                  <div class="col-md-9">
321
                    <input id="enum-input" type="text" class="form-control">
322
                  </div>
323
                  <span id="enum-button" class="btn btn-primary mb-2">Přidat</span>
324
                </div>
325
              </div>
326
            </div>
327

  
328
            <div class="form-group row">
329
              <label for="exampleFormControlSelect1" class="col-sm-2">Sloupec:</label>
330
              <div class="col-sm-10">
331
                <div class="form-check form-check-inline">
332
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
333
                  <label class="form-check-label" for="inlineCheckbox1">Sloupec</label>
334
                </div>
335
                <div class="form-check form-check-inline">
336
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
337
                  <label class="form-check-label" for="inlineCheckbox2">Řádek</label>
338
                </div>
339
                <div class="form-check form-check-inline">
340
                  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
341
                  <label class="form-check-label" for="inlineCheckbox3">Hodnota</label>
342
                </div>
343
              </div>
344
            </div>
345
            <div class="form-group row">
346
                <label for="exampleFormControlSelect1" class="col-sm-2">Funkce:</label>
347
                <div class="col-sm-10">
348
                  <select class="mbSelect selectpicker" multiple data-live-search="true">
349
                    <option>SUM</option>
350
                    <option>AVG</option>
351
                    <option>MAX</option>
352
                    <option>MIN</option>
353
                  </select>
354
                </div>
355
            </div>
356
            <div class="form-group row">
357
                <label for="exampleFormControlSelect1" class="col-sm-2">Operátory:</label>
358
                <div class="col-sm-10">
359
                  <select class="mbSelect selectpicker" multiple data-live-search="true">
360
                    <option>LIKE</option>
361
                    <option>BETWEEN</option>
362
                    <option>EQUAL</option>
363
                    <option>LESS</option>
364
                  </select>
365
                </div>
366
            </div>
367
          </div>
368
        </div>
369
      </div>
370
    </div>
371
  </div>
372
</div>
373

  
374
  <div class="container box">
375
    <div class="col-md-4">
376
    <div class="box-header">
377
      <h3 class="box-title">Oprávnění</h3>
378
    </div>
379
    <div id ="permission-wrapper">
380
        <div class="input-action-box input-border-bottom input-row">
381
            <input type="text" readonly class="form-control-plaintext permission-role" id="1" value="Rektor">
382
            <span class="action-padding action-button input-action-margin">
383
                <a href=# class="action-link far fa-trash-alt" onclick="removeRole(this);"></a>
384
            </span>
385
        </div>
386
        <div class="input-action-box input-border-bottom input-row">
387
            <input type="text" readonly class="form-control-plaintext permission-role" id="2" value="Referentka">
388
            <span class="action-padding action-button input-action-margin">
389
                <a href=# class="action-link far fa-trash-alt" onclick="removeRole(this);"></a>
390
            </span>
391
        </div>
392
    </div>
393

  
394
    <div class="form-group row form-add-item">
395
      <div class="col-md-9">
396
        <select class="form-control " id="permission-select" name="permission-select">
397
          <option value="1">Rektor</option>
398
          <option value="2">Studijní oddělení</option>
399
          <option value="3">Strudenti</option>
400
        </select>
401
      </div>
402
      <span class="btn btn-primary mb-2" id="permission-button">Přidat</span>
403
    </div>
404
  </div>
405
</div>
406
  <div class="submit_center_button">
407
      <button type="submit" class="btn btn-success mb-2">Uložit</button>
408
  </div>
409

  
410
</form>
411

  
412

  
413
</main>
414

  
415
<footer class="text-muted">
416
  <div class="container">
417

  
418
  </div>
419
</footer>
420

  
421
<script type="text/javascript" src="js/app.js"></script>
422
</body>
423
</html>
424
<script type="text/javascript">
425

  
426
    $(document).ready(function() {
427
        $(".sort").sortable().disableSelection();
428
        $("#enum-wrapper").sortable().disableSelection();
429

  
430
        $('.type-select').on('change', function () {
431
            if (this.value == 3)
432
            {
433
        console.log('a');
434
                addEnum(this);
435
            }
436
            else
437
            {
438
                removeEnum(this);
439
            }
440
        });
441

  
442

  
443
        $('.fa-trash-alt').click(function(event){
444
            event.preventDefault();
445
        });
446

  
447
    });
448

  
449
    $('#permission-button').on('click', function () {
450
        var selectedRoleId = $('select[name=permission-select] option').filter(':selected').val();
451
        var selectedRoleValue = $('select[name=permission-select] option').filter(':selected').text();
452

  
453
        var addedRoles = $('.permission-role');
454

  
455
        var roles = [];
456

  
457
        // get assigned roles
458
        addedRoles.each(function () {
459
            roles.push($(this).attr('id'))
460
        });
461

  
462
        if (roles.includes(selectedRoleId))
463
        {
464
            return;
465
        }
466

  
467
        addPermissionRow(selectedRoleId, selectedRoleValue);
468

  
469
    });
470

  
471

  
472
    function addPermissionRow(id, value){
473

  
474
        let row = document.createElement('div');
475
        row.classList.add('input-action-box', 'input-border-bottom', 'permission-row');
476

  
477
        let input = document.createElement('input');
478
        input.type = 'text';
479
        input.classList.add('form-control-plaintext', 'permission-role');
480
        input.id = id;
481
        input.value = value;
482
        input.setAttribute('readonly', "true");
483

  
484
        row.appendChild(input);
485

  
486
        let actionButton = document.createElement('span');
487
        actionButton.classList.add('action-padding', 'action-button', 'input-action-margin');
488

  
489
        let deleteButton = document.createElement('a');
490
        deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
491
        deleteButton.setAttribute('onclick', 'removeRole(this);');
492
        deleteButton.setAttribute('role', 'button');
493

  
494
        actionButton.appendChild(deleteButton);
495
        row.appendChild(actionButton);
496

  
497
        document.getElementById('permission-wrapper').appendChild(row);
498

  
499
    };
500

  
501
    $('#enum-button').on('click', function () {
502
        var value = $('#enum-input').val();
503
        console.log('a');
504
        addEnumRow(value);
505

  
506

  
507

  
508
    });
509

  
510
    function addEnumRow(value)
511
    {
512
      let row = document.createElement('div');
513
      row.classList.add('input-action-box', 'input-border-bottom');
514

  
515

  
516
      let input = document.createElement('input');
517
      input.type = 'text';
518
      input.classList.add('form-control-plaintext');
519
      input.value = value;
520
      input.setAttribute('readonly', "true");
521

  
522
      row.appendChild(input);
523

  
524
      let sortSpan = document.createElement('span');
525
      sortSpan.classList.add('action-padding', 'input-action-margin', 'sort-icon');
526
      sortSpan.innerHTML = "<i class=\"fas fa-sort\"></i>";
527

  
528
      row.appendChild(sortSpan);
529

  
530
      let deleteSpan = document.createElement('span');
531
      deleteSpan.classList.add('action-padding', 'input-action-margin', 'action-button');
532

  
533
      let deleteButton = document.createElement('a');
534
      deleteButton.classList.add('action-link', 'far', 'fa-trash-alt');
535
      deleteButton.setAttribute('onclick', 'removeEnum(this);');
536

  
537
      deleteSpan.appendChild(deleteButton);
538

  
539
      row.appendChild(deleteSpan);
540

  
541
      document.getElementById('enum-wrapper').appendChild(row);
542

  
543
    }
544

  
545

  
546
    function removeRole (selectedField) {
547
        selectedField.closest('.input-row').remove();
548
    }
549

  
550

  
551
    function addEnum(select)
552
    {
553
      console.log(select.parent());
554
      let row = document.createElement('div');
555
      row.classList.add('enum_box');
556
      row.innerHTML = "Hodnoty:";
557

  
558
      let values = document.createElement('div');
559
      values.classList.add('enum_values', 'col-md-8');
560

  
561
      let valuesWrapper = document.createElement('div');
562
      valuesWrapper.id = "enum-wrapper";
563

  
564
      values.appendChild(valuesWrapper);
565

  
566
      let addButtonDiv = document.createElement('div');
567
      addButtonDiv.classList.add('form-group', 'row', 'form-add-item');
568

  
569
      let addInnerButton = document.createElement('div');
570
      addInnerButton.classList.add('col-md-9');
571

  
572
      let input = document.createElement('input');
573
      input.type = 'text';
574
      input.id = "enum-input";
575
      input.classList.add('form-control');
576

  
577

  
578
      let addButton = document.createElement('span');
579
      addButton.classList.add('btn', 'btn-primary', 'mb-2');
580
      addButton.innerHTML = 'Přidat';
581
      addButton.id = "enum-button";
582

  
583
      addInnerButton.appendChild(input);
584
      addButtonDiv.appendChild(addInnerButton);
585
      addButtonDiv.appendChild(addButton);
586

  
587
      values.appendChild(addButtonDiv);
588
      row.appendChild(values);
589

  
590
      select.appendChild(row);
591

  
592
      $(row).insertAfter($('.type-row'));
593

  
594
      $('#enum-button').on('click', function () {
595
        var value = $('#enum-input').val();
596
        console.log('a');
597
        addEnumRow(value);
598
      });
599
    }
600

  
601
  
602
    function removeEnum(select) {
603
      $('.enum_box').remove();
604

  
605
    }
606

  
607
</script>
608

  

Také k dispozici: Unified diff