Projekt

Obecné

Profil

Stáhnout (32.8 KB) Statistiky
| Větev: | Revize:
1
<script>
2
    let pageIndex = 0;
3
    let itemPerPage = 50;
4
    let itemCount = 0;
5
    let pageCount = 0;
6

    
7
    //what to do when page renders
8
    window.onload = function() {
9
        let sourceSelect = new vanillaSelectBox("#source");
10
        filtersChange();
11
        fetchData(false);
12

    
13
        //page-label listener
14
        document.getElementById('page-label').addEventListener('keyup',function(e){
15
            if (e.key === 'Enter' || e.keyCode === 13) {
16
                this.blur();
17
            }
18
        });
19
    };
20
</script>
21

    
22
<div class="search-filters container" onload="filtersChange()">
23
    <div class="row">
24
        <div class="mr-3">
25
            <label for="lemma" class="mr-2">Lemma</label>
26
            <input type="text" id="lemma">
27
        </div>
28
        <div class="mr-3">
29
            <label for="wordshape" class="mr-2">Slovní tvar</label>
30
            <input type="text" id="wordshape">
31
        </div>
32
        <div class="mr-3">
33
            <label for="source" class="mr-2">Rukopisný pramen</label>
34
            <select id="source" multiple>
35
                <option value = "0">rukopis Vídeňský</option>
36
                <option value = "1">zlomky Hanušovy</option>
37
                <option value = "2">zlomky Hradecké</option>
38
                <option value = "3">rukopis Cambridžský</option>
39
                <option value = "4">rukopis Františkánský</option>
40
                <option value = "5">zlomek Olomoucký</option>
41
                <option value = "6">fragment Strahovský</option>
42
                <option value = "7">zlomky Klementinsko-Křižovnické</option>
43
                <option value = "8">zlomky Mnichovské</option>
44
                <option value = "9">rukopis Lobkovický</option>
45
                <option value = "10">rukopis Pelclův</option>
46
                <option value = "11">rukopis Cerronský</option>
47
                <option value = "12">rukopis Fürstenberský</option>
48
                <option value = "13">rukopis Zebererův</option>
49
                <option value = "14">vydání Pavla Ješína z Bezdězi, Praha 1620</option>
50
                <option value = "15">básně připsané při Pulkavově kronice v rukopisu Litoměřickém</option>
51
            </select>
52
        </div>
53
        <div class="mr-3">
54
            <label for="location" class="mr-2">Pozice</label>
55
            <input type="text" id="location">
56
        </div>
57
        <div class="mr-3">
58
            <label for="description2" class="mr-2">Poznámka 2</label>
59
            <input type="text" id="description2" />
60
        </div>
61

    
62
        <div class="mr-3">
63
            <label for="wordclass" class="mr-2">Slovní druh</label>
64
            <select onchange="filtersChange()"  id="wordclass">
65
                <option selected="selected" value = "">nevybráno</option>
66
                <option value = "N">substantivum</option>
67
                <option value = "A">adjektivum</option>
68
                <option value = "P">pronomen</option>
69
                <option value = "C">numeralie</option>
70
                <option value = "V">verbum</option>
71
                <option value = "D">adverbium</option>
72
                <option value = "R">prepozice</option>
73
                <option value = "J">konjunkce</option>
74
                <option value = "T">partikule</option>
75
                <option value = "I">interjekce</option>
76
            </select>
77
        </div>
78

    
79
        <script>
80
            function filtersChange() {
81
                const value = document.getElementById("wordclass").value;
82
                let movedNode;
83
                let beforeNode;
84
                switch (value) {
85
                    case "N":
86
                        setFilerVisibility([
87
                            true,
88
                            true,
89
                            true,
90
                            false,
91
                            false,
92
                            false,
93
                            false,
94
                            false,
95
                            false,
96
                            false,
97
                            false,
98
                            false,
99
                            false
100
                        ]);
101
                        movedNode = document.getElementById("filter-case");
102
                        beforeNode = document.getElementById("filter-countability");
103
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
104
                        break;
105
                    case "A":
106
                        setFilerVisibility([
107
                            true,
108
                            true,
109
                            true,
110
                            true,
111
                            true,
112
                            false,
113
                            false,
114
                            false,
115
                            false,
116
                            false,
117
                            false,
118
                            false,
119
                            false
120
                        ]);
121
                        movedNode = document.getElementById("filter-case");
122
                        beforeNode = document.getElementById("filter-countability");
123
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
124
                        break;
125
                    case "P":
126
                        setFilerVisibility([
127
                            true,
128
                            true,
129
                            true,
130
                            false,
131
                            false,
132
                            true,
133
                            false,
134
                            false,
135
                            false,
136
                            false,
137
                            false,
138
                            false,
139
                            false
140
                        ]);
141
                        movedNode = document.getElementById("filter-case");
142
                        beforeNode = document.getElementById("filter-countability");
143
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
144
                        break;
145
                    case "C":
146
                        setFilerVisibility([
147
                            true,
148
                            true,
149
                            true,
150
                            false,
151
                            false,
152
                            false,
153
                            false,
154
                            false,
155
                            false,
156
                            false,
157
                            false,
158
                            false,
159
                            false
160
                        ]);
161
                        movedNode = document.getElementById("filter-case");
162
                        beforeNode = document.getElementById("filter-countability");
163
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
164
                        break;
165
                    case "V":
166
                        setFilerVisibility([
167
                            true,
168
                            true,
169
                            true,
170
                            false,
171
                            false,
172
                            false,
173
                            true,
174
                            true,
175
                            true,
176
                            true,
177
                            true,
178
                            true,
179
                            false
180
                        ]);
181
                        movedNode = document.getElementById("filter-case");
182
                        beforeNode = document.getElementById("filter-control-div");
183
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
184
                        break;
185
                    case "D":
186
                        setFilerVisibility([
187
                            false,
188
                            false,
189
                            false,
190
                            false,
191
                            true,
192
                            false,
193
                            false,
194
                            false,
195
                            false,
196
                            false,
197
                            false,
198
                            false,
199
                            false
200
                        ]);
201
                        break;
202
                    case "R":
203
                        setFilerVisibility([
204
                            true,
205
                            false,
206
                            false,
207
                            false,
208
                            false,
209
                            false,
210
                            false,
211
                            false,
212
                            false,
213
                            false,
214
                            false,
215
                            false,
216
                            false
217
                        ]);
218
                        break;
219
                    case "J":
220
                        setFilerVisibility([
221
                            false,
222
                            false,
223
                            false,
224
                            false,
225
                            false,
226
                            false,
227
                            false,
228
                            false,
229
                            false,
230
                            false,
231
                            false,
232
                            false,
233
                            true
234
                        ]);
235
                        break;
236
                    case "I":
237
                        setFilerVisibility([
238
                            false,
239
                            false,
240
                            false,
241
                            false,
242
                            false,
243
                            false,
244
                            false,
245
                            false,
246
                            false,
247
                            false,
248
                            false,
249
                            false,
250
                            false
251
                        ]);
252
                        break;
253
                    case "T":
254
                        setFilerVisibility([
255
                            false,
256
                            false,
257
                            false,
258
                            false,
259
                            false,
260
                            false,
261
                            false,
262
                            false,
263
                            false,
264
                            false,
265
                            false,
266
                            false,
267
                            false
268
                        ]);
269
                        break;
270
                    default:
271
                        setFilerVisibility([
272
                            false,
273
                            false,
274
                            false,
275
                            false,
276
                            false,
277
                            false,
278
                            false,
279
                            false,
280
                            false,
281
                            false,
282
                            false,
283
                            false,
284
                            false
285
                        ]);
286
                        break;
287
                }
288
            }
289

    
290
            function setFilerVisibility(visibility) {
291
                const id = [
292
                    "filter-case",
293
                    "filter-countability",
294
                    "filter-gender",
295
                    "filter-shape",
296
                    "filter-grade",
297
                    "filter-type",
298
                    "filter-mood",
299
                    "filter-irregular",
300
                    "filter-person",
301
                    "filter-time",
302
                    "filter-vid",
303
                    "filter-v-type",
304
                    "filter-k-type"
305
                ];
306

    
307
                for(let i = 0; i < id.length &&  i < visibility.length; i++){
308
                    document.getElementById(id[i]).style.display = visibility[i] === true ? "" : "none";
309
                    document.getElementById(id[i].replace("filter-", "")).value = "";
310
                }
311
            }
312
        </script>
313

    
314
        <!-- conditionaly rendered filters-->
315
        <div class="mr-3" id="filter-person">
316
            <label for="person" class="mr-2">Osoba</label>
317
            <select id="person">
318
                <option selected="selected" value = "">nevybráno</option>
319
                <option value = "1">1.</option>
320
                <option value = "2">2.</option>
321
                <option value = "3">3.</option>
322
            </select>
323
        </div>
324
        <div class="mr-3" id="filter-case">
325
            <label for="case" class="mr-2">Pád</label>
326
            <select id="case">
327
                <option selected="selected" value = "">nevybráno</option>
328
                <option value = "1">nominativ</option>
329
                <option value = "2">genitiv</option>
330
                <option value = "3">dativ</option>
331
                <option value = "4">akuzativ</option>
332
                <option value = "5">vokativ</option>
333
                <option value = "6">lokál</option>
334
                <option value = "7">instrumentál</option>
335
            </select>
336
        </div>
337
        <div class="mr-3" id="filter-countability">
338
            <label for="countability" class="mr-2">Číslo</label>
339
            <select id="countability">
340
                <option selected="selected" value = "">nevybráno</option>
341
                <option value = "S">singulár</option>
342
                <option value = "P">plurál</option>
343
                <option value = "D">duál</option>
344
            </select>
345
        </div>
346
        <div class="mr-3" id="filter-mood">
347
            <label for="mood" class="mr-2">Způsob</label>
348
            <select id="mood" onchange="moodChange()">
349
                <option selected="selected" value = "">nevybráno</option>
350
                <option value = "d">indikativ</option>
351
                <option value = "i">imperativ</option>
352
                <option value = "c">kondicionál</option>
353
            </select>
354
        </div>
355
        <div class="mr-3" id="filter-time">
356
            <label for="time" class="mr-2">Čas</label>
357
            <select id="time">
358
                <option selected="selected" value = "">nevybráno</option>
359
                <option value = "P">prézens</option>
360
                <option value = "A">aorist</option>
361
                <option value = "R">préteritum</option>
362
                <option value = "I">imperfektum</option>
363
                <option value = "H">plusquamperfektum</option>
364
                <option value = "F">futurum</option>
365
            </select>
366
        </div>
367
        <div class="mr-3" id="filter-v-type">
368
            <label for="v-type" class="mr-2">Slovesný rod</label>
369
            <select id="v-type">
370
                <option selected="selected" value = "">nevybráno</option>
371
                <option value = "A">aktivum</option>
372
                <option value = "P">pasivum</option>
373
            </select>
374
        </div>
375
        <div class="mr-3" id="filter-vid">
376
            <label for="vid" class="mr-2">Vid</label>
377
            <select id="vid">
378
                <option selected="selected" value = "">nevybráno</option>
379
                <option value = "P">perfektivum</option>
380
                <option value = "I">imperfektivum </option>
381
            </select>
382
        </div>
383
        <div class="mr-3" id="filter-irregular">
384
            <label for="irregular" class="mr-2">Neurčitý slovesný tvar</label>
385
            <select id="irregular" onchange="irregularChange()">
386
                <option selected="selected" value = "">nevybráno</option>
387
                <option value = "f">infinitiv</option>
388
                <option value = "S">supinum</option>
389
                <option value = "e">přech. přítomný</option>
390
                <option value = "m">přech. minulý</option>
391
                <option value = "A">part. perf. akt.</option>
392
                <option value = "P">part. perf. pas.</option>
393
            </select>
394
        </div>
395
        <div class="mr-3" id="filter-gender">
396
            <label for="gender" class="mr-2">Rod</label>
397
            <select id="gender">
398
                <option selected="selected" value = "">nevybráno</option>
399
                <option value = "M">maskulinum</option>
400
                <option value = "F">femininum</option>
401
                <option value = "N">neutrum</option>
402
            </select>
403
        </div>
404
        <div class="mr-3" id="filter-shape">
405
            <label for="shape" class="mr-2">Tvar</label>
406
            <select id="shape">
407
                <option selected="selected" value = "">nevybráno</option>
408
                <option value = "C">složený</option>
409
                <option value = "N">jmenný</option>
410
            </select>
411
        </div>
412
        <div class="mr-3" id="filter-grade">
413
            <label for="grade" class="mr-2">Stupeň</label>
414
            <select id="grade">
415
                <option selected="selected" value = "">nevybráno</option>
416
                <option value = "1">pozitiv</option>
417
                <option value = "2">komparativ</option>
418
                <option value = "3">superlativ</option>
419
            </select>
420
        </div>
421
        <div class="mr-3" id="filter-type">
422
            <label for="type" class="mr-2">Druh</label>
423
            <select id="type">
424
                <option selected="selected" value = "">nevybráno</option>
425
                <option value = "P">personalia</option>
426
                <option value = "S">posesiva</option>
427
                <option value = "D">demonstrativa</option>
428
                <option value = "Q">interogativa</option>
429
                <option value = "J">relativa</option>
430
                <option value = "Z">indefinita</option>
431
                <option value = "L">limitativa</option>
432
                <option value = "W">negativa</option>
433
            </select>
434
        </div>
435
        <div class="mr-3" id="filter-k-type">
436
            <label for="k-type" class="mr-2">Typ</label>
437
            <select id="k-type">
438
                <option selected="selected" value = "">nevybráno</option>
439
                <option value = "V">větná</option>
440
                <option value = "C">členská</option>
441
                <option value = "N">navazovací</option>
442
                <option value = "P">spojení s přechodníkem</option>
443
            </select>
444
        </div>
445

    
446
        <!-- send button-->
447
        <div class="ml-auto" id="filter-control-div">
448
            <i class="mr-1 my-auto" id="hit-count">0 záznamů</i>
449
            <button class="btn" id="filter-but" onclick="callFilter()">
450
                Filtrovat
451
            </button>
452

    
453
            <button class="btn" data-toggle="modal" data-target="#edit-modal" data-title="Nový záznam">
454
                <i class="fa fa-plus"></i>
455
            </button><!--TODO ADMIN ONLY-->
456
        </div>
457
    </div>
458
</div>
459

    
460
<div class="search-results mt-4">
461
    <table class="table table-striped">
462
        <thead>
463
        <tr>
464
            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
465
                <th scope="col">Vydáno</th>
466
            <?php }?>
467
            <th scope="col">Lemma</th>
468
            <th scope="col">Slovní tvar</th>
469
            <th scope="col">Morfologie</th>
470
            <th scope="col">Rukopisy</th>
471
            <th scope="col">Pozice</th>
472
            <th scope="col">Poznámka 2</th>
473
            <th scope="col"></th>
474
        </tr>
475
        </thead>
476
        <tbody id="search-table">
477
            <script>
478
                function moodChange() {
479
                    if(document.getElementById("mood").value !== ""){
480
                        document.getElementById("irregular").disabled = true;
481
                        document.getElementById("irregular").title = "Neurčitý slovesný tvar smí být nastaven pouze není-li nastaven způsob";
482
                    } else {
483
                        document.getElementById("irregular").disabled = false;
484
                        document.getElementById("irregular").title = "";
485
                    }
486
                }
487

    
488
                function irregularChange() {
489
                    if(document.getElementById("irregular").value !== ""){
490
                        document.getElementById("mood").disabled = true;
491
                        document.getElementById("mood").title = "Způsob smí být nastaven pouze není-li nastaven neurčitý slovesný tvar";
492
                    } else {
493
                        document.getElementById("mood").disabled = false;
494
                        document.getElementById("mood").title = "";
495
                    }
496
                }
497

    
498
                let data;
499
                function callFilter() {
500
                    pageIndex = 0;
501
                    fetchData(true)
502
                }
503

    
504
                function filterData (formData) {
505
                    //regular
506
                    formData.append("lemma", document.getElementById("lemma").value);
507
                    formData.append("word", document.getElementById("wordshape").value);
508
                    formData.append("description2", document.getElementById("description2").value);
509

    
510
                    //positions
511
                    const positionSplit = document.getElementById("location").value.split("/");
512
                    formData.append("position1", positionSplit[0] !== undefined ? positionSplit[0] : "");
513
                    formData.append("position2", positionSplit[1] !== undefined ? positionSplit[1] : "");
514
                    formData.append("positiondetail", positionSplit[2] !== undefined ? positionSplit[2] : "");
515

    
516
                    //multiselect
517
                    formData.append("manuscript", getValues("source"));
518

    
519
                    const pos = document.getElementById("wordclass").value;
520
                    formData.append("tag_pos", pos);
521
                    //those upcoming are dynamic based on the previous field
522
                    formData.append("tag_case", document.getElementById("case").value);
523
                    formData.append("tag_number", document.getElementById("countability").value);
524
                    formData.append("tag_gender", document.getElementById("gender").value);
525
                    formData.append("tag_degree", document.getElementById("grade").value);
526
                    formData.append("tag_shape", document.getElementById("shape").value);
527
                    formData.append("tag_num", "");//THIS ONE IS WORTHLESS
528

    
529
                    if(pos === "P"){
530
                        formData.append("tag_sentence", document.getElementById("type").value);
531
                    } else if(pos === "V"){
532
                        const mood = document.getElementById("mood").value;
533
                        if(mood !== ""){
534
                            formData.append("tag_sentence", mood);
535
                        } else {
536
                            formData.append("tag_sentence", document.getElementById("irregular").value);
537
                        }
538
                    } else if(pos === "J"){
539
                        formData.append("tag_sentence", document.getElementById("k-type").value);
540
                    }
541

    
542
                    formData.append("tag_verb_person", document.getElementById("person").value);
543
                    formData.append("tag_verb_time", document.getElementById("time").value);
544
                    formData.append("tag_verb_degree", document.getElementById("vid").value);
545
                    formData.append("tag_verb_aspect", document.getElementById("v-type").value);
546
                }
547

    
548
                function fetchData (filter = true) {
549
                    // (A1) GET SEARCH TERM
550
                    const formData = new FormData();
551
                    formData.append("page", ""+pageIndex);
552
                    formData.append("items_per_page", ""+itemPerPage);
553
                    formData.append("finished", "true");//TODO ADMIN
554
                    if(filter){
555
                        filterData(formData);
556
                    }
557

    
558
                    // (A2) AJAX - USE HTTP:// NOT FILE:/
559
                    let xhr = new XMLHttpRequest();
560
                    xhr.open("POST", "./controller/TableController.php");
561
                    xhr.onload = function(){
562
                        let search = this.response;
563
                        let parsedJSON = JSON.parse(search);
564
                        if(parsedJSON.count === 0){
565
                            document.getElementById("no-data-label").style.display = "";
566
                            document.getElementById("paging-control").style.display = "none";
567
                        } else {
568
                            document.getElementById("no-data-label").style.display = "none";
569
                            document.getElementById("paging-control").style.display = "";
570
                        }
571

    
572
                        if(parsedJSON.count === 1){
573
                            document.getElementById("hit-count").innerText = "1 záznamů";
574
                        } else if(parsedJSON.count < 5){
575
                            document.getElementById("hit-count").innerText = parsedJSON.count +" záznamů";
576
                        } else {
577
                            document.getElementById("hit-count").innerText = parsedJSON.count +" záznamů";
578
                        }
579

    
580
                        itemCount = parsedJSON.count;
581
                        pageCount = Math.ceil(itemCount / itemPerPage);
582
                        document.getElementById("page-label").value = (pageIndex + 1) + " / " + pageCount;
583
                        data = parsedJSON.data;
584
                        renderData(parsedJSON.data);
585
                    };
586
                    xhr.send(formData);
587
                }
588

    
589
                function renderManuscript(manuscripts, shorten=true) {
590
                    let output = "";
591
                    for(let i = 0; i < manuscripts.length; i++){
592
                        if(shorten)
593
                            output += ("<span title=\""+ codeToManuscript[manuscripts[i]] +"\">" + codeToManuscriptShort[manuscripts[i]] + "</span>");
594
                        else
595
                            output += codeToManuscript[manuscripts[i]];
596

    
597
                        if(i < manuscripts.length - 1){
598
                            if(shorten)
599
                                output += ", ";
600
                            else
601
                                output += "; ";
602
                        }
603
                    }
604
                    return output;
605
                }
606

    
607
                function publishItem(id){
608
                    let item = data[id];
609
                    const finishedChecked = document.getElementById("check-"+id).checked;
610

    
611
                    const formData = new FormData();
612
                    formData.append("finished", finishedChecked);
613

    
614
                    formData.append("id", item.id);
615
                    formData.append("ending", item.ending);
616
                    formData.append("prefix", item.prefix);
617
                    formData.append("suffix", item.suffix);
618

    
619
                    formData.append("namedentity", item.namedentity);
620
                    formData.append("position1", item.position1);
621
                    formData.append("position2", item.position2);
622
                    formData.append("positiondetail", item.positiondetail);
623
                    formData.append("word", item.word);
624
                    formData.append("lemma", item.lemma.lemma);
625
                    formData.append("manuscript", item.manuscript);
626
                    formData.append("context", item.context);
627
                    formData.append("description", item.description);
628
                    formData.append("description2", item.description2);
629
                    formData.append("description3", item.description3);
630
                    formData.append("tag", item.tag.tag);
631
                    formData.append("pos", item.lemma.pos);
632
                    formData.append("date", item.date);
633

    
634
                    var xhr = new XMLHttpRequest();
635
                    xhr.open("POST", "./controller/UpdateController.php");
636
                    xhr.send(formData);//TODO VACI CHECK?
637
                    setTimeout(function(){
638
                        location.reload();
639
                    }, 500);
640
                }
641

    
642
                function renderData(data) {
643
                    let result = "";
644
                    data.forEach((item,id) => {
645
                        result += "<tr>";
646
                        <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
647
                            result += "<td><input type='checkbox' id='check-"+item.id+"' onchange='publishItem("+item.id+")' "+ ((item.finished === true) ? 'checked' : '') +" /></td>";
648
                        <?php }?>
649
                        result += "<td>" + item.lemma.lemma + "</td>";
650
                        result += "<td>" + item.word + "</td>";
651
                        result += "<td>" + item.tag.tag + "</td>";
652
                        result += "<td>" + renderManuscript(item.manuscript) + "</td>";
653
                        result += "<td>" + item.position1 + (item.position2 ? ("/" + item.position2 + (item.positiondetail ? "/"  + item.positiondetail :  "")) : "")  + "</td>";
654
                        result += "<td>" + item.description2 + "</td>";
655
                        result += "<td class=\"action-td\">" +
656
                            "<button class=\"btn mr-1\" title=\"Upravit\"  data-toggle=\"modal\" data-target=\"#edit-modal\" data-pseudo-id='" + id + "' data-title=\"Upravit záznam\"><i class=\"fa fa-pencil\"></i></button>" + //TODO ADMIN change , regular send report
657
                            "<button class=\"btn\" title=\"Detail\"  data-toggle=\"modal\" data-target=\"#detail-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-search\"></i></button>" +
658
                            "<button class=\"btn ml-1\" title=\"Odstranit\"  data-toggle=\"modal\" data-target=\"#remove-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-trash\"></i></button>" + //TODO ADMIN change , regular send report
659
                            "</td>";
660
                        result += "</tr>";
661
                    });
662
                    document.getElementById("search-table").innerHTML = result;
663
                }
664
            </script>
665
        </tbody>
666
    </table>
667

    
668
    <h3 id="no-data-label" class="mx-auto text-center font-italic">Žádná data nebyla nalezena</h3>
669

    
670
    <script>
671
        function removeSelectedItem(idToDelete){
672
            const data = new FormData(); //to pass ids, which we want to delete from DB
673
            data.append("id", ""+idToDelete); //id to delete from table dd_wordform
674
            
675
            let xhr = new XMLHttpRequest();
676
            xhr.open("POST", "./controller/RemoveController.php");
677
            xhr.send(data);
678
            fetchData(true); //reload data after item delete
679
        }
680

    
681
        function checkValidItemsPerPage(){
682
            var visibleItemCount = document.getElementById("itemsPerPage");
683
            if(!isNaN(visibleItemCount.value) && visibleItemCount.value % 1 === 0 && parseInt(visibleItemCount.value) >= 1 && parseInt(visibleItemCount.value) <= 500){
684
                return true;
685
            }else{
686
                alert("Zadaný počet není validní, zkuste to znovu.\nPlatný rozsah: 1 - 500 položek na stránku.");
687
                visibleItemCount.value = itemPerPage;
688
                return false;
689
            }
690
        }
691

    
692
        function changeItemsPerPage(){
693
            //if there is no valid input, return and dont save
694
            if(checkValidItemsPerPage() === false){
695
                return;
696
            }
697

    
698
            pageIndex = 0;
699
            var visibleItemCount = document.getElementById("itemsPerPage").value;
700
            itemPerPage = visibleItemCount;
701
            fetchData(true);
702
        }
703

    
704
        function moveToFirst(){
705
            pageIndex = 0;
706
            fetchData(true);
707
        }
708

    
709
        function moveToPrevious(){
710
            pageIndex = (pageIndex - 1 > 0) ? (pageIndex - 1) : (0);
711
            fetchData(true);
712
        }
713

    
714
        function moveToNext(){
715
            pageIndex = (pageIndex + 1 < pageCount) ? (pageIndex + 1) : (pageCount - 1);
716
            fetchData(true);
717
        }
718

    
719
        function moveToLast(){
720
            pageIndex = pageCount - 1;
721
            fetchData(true);
722
        }
723

    
724
        function onManualPageStart(element){
725
            element.value = '';
726
        }
727

    
728
        function onManualPageEnd(element) {
729
            const value = Number(element.value) - 1;
730
            if(Number.isInteger(value) && value >= 0 && value < pageCount){
731
                pageIndex = value;
732
                fetchData(true);
733
            } else {
734
                element.value = (pageIndex + 1) + " / " + pageCount;
735
            }
736

    
737
        }
738
    </script>
739
    <div id="paging-control" class="mx-auto text-center" style="display: none">
740
        <button class="border-0 shadow-none bg-transparent" onclick="moveToFirst()"><b><<</b></button>
741
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToPrevious()"><b><</b></button>
742
        <input class="border-0 shadow-none bg-transparent text-center font-weight-bold"
743
               id="page-label"
744
               onfocus="onManualPageStart(this)"
745
               onblur="onManualPageEnd(this)"
746
        />
747
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToNext()"><b>></b></button>
748
        <button  class="border-0 shadow-none bg-transparent" onclick="moveToLast()"><b>>></b></button>
749
    </div>
750
</div>
751

    
752

    
(7-7/9)