Projekt

Obecné

Profil

Stáhnout (28.5 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="wordshape" class="mr-2">Slovo</label>
26
            <input type="text" id="wordshape">
27
        </div>
28
        <div class="mr-3">
29
            <label for="lemma" class="mr-2">Lemma</label>
30
            <input type="text" id="lemma">
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

    
58

    
59
        <div class="mr-3">
60
            <label for="wordclass" class="mr-2">Slovní druh</label>
61
            <select onchange="filtersChange()"  id="wordclass">
62
                <option selected="selected" value = "">Nevybráno</option>
63
                <option value = "N">Substantiva</option>
64
                <option value = "A">Adjektiva</option>
65
                <option value = "P">Pronomina</option>
66
                <option value = "C">Numeralia</option>
67
                <option value = "V">Verba</option>
68
                <option value = "D">Adverbia</option>
69
                <option value = "R">Prepozice</option>
70
                <option value = "J">Konjunkce</option>
71
                <option value = "I">Interjekce</option>
72
                <option value = "T">Partikule</option>
73
            </select>
74
        </div>
75

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

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

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

    
311
        <!-- conditionaly rendered filters-->
312
        <div class="mr-3" id="filter-person">
313
            <label for="person" class="mr-2">Osoba</label>
314
            <select id="person">
315
                <option selected="selected" value = "">Nevybráno</option>
316
                <option value = "1">1.</option>
317
                <option value = "2">2.</option>
318
                <option value = "3">3.</option>
319
            </select>
320
        </div>
321
        <div class="mr-3" id="filter-case">
322
            <label for="case" class="mr-2">Pád</label>
323
            <select id="case">
324
                <option selected="selected" value = "">Nevybráno</option>
325
                <option value = "1">Nominativ</option>
326
                <option value = "2">Genitiv</option>
327
                <option value = "3">Dativ</option>
328
                <option value = "4">Akuzativ</option>
329
                <option value = "5">Vokativ</option>
330
                <option value = "6">Lokál</option>
331
                <option value = "7">Instrumentál</option>
332
            </select>
333
        </div>
334
        <div class="mr-3" id="filter-countability">
335
            <label for="countability" class="mr-2">Číslo</label>
336
            <select id="countability">
337
                <option selected="selected" value = "">Nevybráno</option>
338
                <option value = "S">Singulár</option>
339
                <option value = "P">Plurál</option>
340
                <option value = "D">Duál</option>
341
            </select>
342
        </div>
343
        <div class="mr-3" id="filter-gender">
344
            <label for="gender" class="mr-2">Rod</label>
345
            <select id="gender">
346
                <option selected="selected" value = "">Nevybráno</option>
347
                <option value = "M">Maskulinum</option>
348
                <option value = "F">Femininum</option>
349
                <option value = "N">Neutrum</option>
350
            </select>
351
        </div>
352
        <div class="mr-3" id="filter-shape">
353
            <label for="shape" class="mr-2">Tvar</label>
354
            <select id="shape">
355
                <option selected="selected" value = "">Nevybráno</option>
356
                <option value = "C">Složený</option>
357
                <option value = "N">Jmenný</option>
358
            </select>
359
        </div>
360
        <div class="mr-3" id="filter-grade">
361
            <label for="grade" class="mr-2">Stupeň</label>
362
            <select id="grade">
363
                <option selected="selected" value = "">Nevybráno</option>
364
                <option value = "1">Pozitiv</option>
365
                <option value = "2">Komparativ</option>
366
                <option value = "3">Superlativ</option>
367
            </select>
368
        </div>
369
        <div class="mr-3" id="filter-type">
370
            <label for="type" class="mr-2">Druh</label>
371
            <select id="type">
372
                <option selected="selected" value = "">Nevybráno</option>
373
                <option value = "P">Personalia</option>
374
                <option value = "S">Posesiva</option>
375
                <option value = "D">Demonstrativa</option>
376
                <option value = "Q">Interogativa</option>
377
                <option value = "J">Relativa</option>
378
                <option value = "Z">Indefinita</option>
379
                <option value = "L">Limitativa</option>
380
                <option value = "W">Negativa</option>
381
            </select>
382
        </div>
383
        <div class="mr-3" id="filter-time">
384
            <label for="time" class="mr-2">Čas</label>
385
            <select id="time">
386
                <option selected="selected" value = "">Nevybráno</option>
387
                <option value = "P">Prézens</option>
388
                <option value = "A">Aorist</option>
389
                <option value = "R">Préteritum</option>
390
                <option value = "I">Imperfektum</option>
391
                <option value = "H">Plusquamperfektum</option>
392
                <option value = "F">Futurum</option>
393
            </select>
394
        </div>
395
        <div class="mr-3" id="filter-mood">
396
            <label for="mood" class="mr-2">Způsob</label>
397
            <select id="mood" onchange="moodChange()">
398
                <option selected="selected" value = "">Nevybráno</option>
399
                <option value = "d">Indikativ</option>
400
                <option value = "i">Imperativ</option>
401
                <option value = "c">Kondicionál</option>
402
            </select>
403
        </div>
404
        <div class="mr-3" id="filter-irregular">
405
            <label for="irregular" class="mr-2">Neurčitý slovesný tvar</label>
406
            <select id="irregular" onchange="irregularChange()">
407
                <option selected="selected" value = "">Nevybráno</option>
408
                <option value = "f">Infinitiv</option>
409
                <option value = "S">Supinum</option>
410
                <option value = "e">Přech. přítomný</option>
411
                <option value = "m">Přech. minulý</option>
412
                <option value = "A">Part. perf. akt.</option>
413
                <option value = "P">Part. perf. pas.</option>
414
            </select>
415
        </div>
416
        <div class="mr-3" id="filter-v-type">
417
            <label for="v-type" class="mr-2">Slovesný rod</label>
418
            <select id="v-type">
419
                <option selected="selected" value = "">Nevybráno</option>
420
                <option value = "A">Aktivum</option>
421
                <option value = "P">Pasivum</option>
422
            </select>
423
        </div>
424
        <div class="mr-3" id="filter-vid">
425
            <label for="vid" class="mr-2">Vid</label>
426
            <select id="vid">
427
                <option selected="selected" value = "">Nevybráno</option>
428
                <option value = "P">Perfektivum</option>
429
                <option value = "I">Imperfektivum </option>
430
            </select>
431
        </div>
432
        <div class="mr-3" id="filter-k-type">
433
            <label for="k-type" class="mr-2">Typ</label>
434
            <select id="k-type">
435
                <option selected="selected" value = "">Nevybráno</option>
436
                <option value = "V">Větná</option>
437
                <option value = "C">Členská</option>
438
                <option value = "N">Navazovací</option>
439
                <option value = "P">Spojení s přechodníkem</option>
440
            </select>
441
        </div>
442

    
443
        <!-- send button-->
444
        <button class="ml-auto btn" id="filter-but" onclick="callFilter()">
445
            Filtrovat
446
        </button>
447
    </div>
448
</div>
449

    
450
<div class="search-results my-4">
451
    <table class="table table-striped">
452
        <thead>
453
        <tr>
454
            <th scope="col">Slovo</th>
455
            <th scope="col">Lemma</th>
456
            <th scope="col">Rukopisy</th>
457
            <th scope="col">Pozice</th>
458
            <th scope="col"></th>
459
        </tr>
460
        </thead>
461
        <tbody id="search-table">
462
            <script>
463
                function moodChange() {
464
                    if(document.getElementById("mood").value !== ""){
465
                        document.getElementById("irregular").disabled = true;
466
                        document.getElementById("irregular").title = "Neurčitý slovesný tvar smí být nastaven pouze není-li nastaven způsob";
467
                    } else {
468
                        document.getElementById("irregular").disabled = false;
469
                        document.getElementById("irregular").title = "";
470
                    }
471
                }
472

    
473
                function irregularChange() {
474
                    if(document.getElementById("irregular").value !== ""){
475
                        document.getElementById("mood").disabled = true;
476
                        document.getElementById("mood").title = "Způsob smí být nastaven pouze není-li nastaven neurčitý slovesný tvar";
477
                    } else {
478
                        document.getElementById("mood").disabled = false;
479
                        document.getElementById("mood").title = "";
480
                    }
481
                }
482

    
483
                let data;
484
                function callFilter() {
485
                    pageIndex = 0;
486
                    fetchData(true)
487
                }
488

    
489
                function filterData (formData) {
490
                    //regular
491
                    formData.append("lemma", document.getElementById("lemma").value);
492
                    formData.append("word", document.getElementById("wordshape").value);
493

    
494
                    //positions
495
                    const positionSplit = document.getElementById("location").value.split("/");
496
                    formData.append("position1", positionSplit[0] !== undefined ? positionSplit[0] : "");
497
                    formData.append("position2", positionSplit[1] !== undefined ? positionSplit[1] : "");
498
                    formData.append("positiondetail", positionSplit[2] !== undefined ? positionSplit[2] : "");
499

    
500
                    //multiselect
501
                    formData.append("manuscript", getValues("source"));
502

    
503
                    const pos = document.getElementById("wordclass").value;
504
                    formData.append("tag_pos", pos);
505
                    //those upcoming are dynamic based on the previous field
506
                    formData.append("tag_case", document.getElementById("case").value);
507
                    formData.append("tag_number", document.getElementById("countability").value);
508
                    formData.append("tag_gender", document.getElementById("gender").value);
509
                    formData.append("tag_degree", document.getElementById("grade").value);
510
                    formData.append("tag_shape", document.getElementById("shape").value);
511
                    formData.append("tag_num", "");//THIS ONE IS WORTHLESS
512

    
513
                    if(pos === "P"){
514
                        formData.append("tag_sentence", document.getElementById("type").value);
515
                    } else if(pos === "V"){
516
                        const mood = document.getElementById("mood").value;
517
                        if(mood !== ""){
518
                            formData.append("tag_sentence", mood);
519
                        } else {
520
                            formData.append("tag_sentence", document.getElementById("irregular").value);
521
                        }
522
                    } else if(pos === "J"){
523
                        formData.append("tag_sentence", document.getElementById("k-type").value);
524
                    }
525

    
526
                    formData.append("tag_verb_person", document.getElementById("person").value);
527
                    formData.append("tag_verb_time", document.getElementById("time").value);
528
                    formData.append("tag_verb_degree", document.getElementById("vid").value);
529
                    formData.append("tag_verb_aspect", document.getElementById("v-type").value);
530
                }
531

    
532
                function fetchData (filter = true) {
533
                    // (A1) GET SEARCH TERM
534
                    const formData = new FormData();
535
                    formData.append("page", ""+pageIndex);
536
                    formData.append("items_per_page", ""+itemPerPage);
537
                    formData.append("finished", "true");//TODO ADMIN
538
                    if(filter){
539
                        filterData(formData);
540
                    }
541

    
542
                    // (A2) AJAX - USE HTTP:// NOT FILE://
543
                    let xhr = new XMLHttpRequest();
544
                    xhr.open("POST", "./controller/TableController.php");
545
                    xhr.onload = function(){
546
                        let search = this.response;
547
                        let parsedJSON = JSON.parse(search);
548
                        if(parsedJSON.count === 0){
549
                            document.getElementById("no-data-label").style.display = "";
550
                            document.getElementById("paging-control").style.display = "none";
551
                        } else {
552
                            document.getElementById("no-data-label").style.display = "none";
553
                            document.getElementById("paging-control").style.display = "";
554
                        }
555
                        itemCount = parsedJSON.count;
556
                        pageCount = Math.ceil(itemCount / itemPerPage);
557
                        document.getElementById("page-label").value = (pageIndex + 1) + " / " + pageCount;
558
                        data = parsedJSON.data;
559
                        renderData(parsedJSON.data);
560
                    };
561
                    xhr.send(formData);
562
                }
563

    
564
                function renderManuscript(manuscripts, shorten=true) {
565
                    let output = "";
566
                    for(let i = 0; i < manuscripts.length; i++){
567
                        if(shorten)
568
                            output += codeToManuscriptShort[manuscripts[i]];
569
                        else
570
                            output += codeToManuscript[manuscripts[i]];
571

    
572
                        if(i < manuscripts.length - 1){
573
                            if(shorten)
574
                                output += ", ";
575
                            else
576
                                output += "; ";
577
                        }
578
                    }
579
                    return output;
580
                }
581

    
582
                function renderData(data) {
583
                    let result = "";
584
                    data.forEach((item,id) => {
585
                        result += "<tr>";
586
                        result += "<td>" + item.word + "</td>";
587
                        result += "<td>" + item.lemma.lemma + "</td>";
588
                        result += "<td>" + renderManuscript(item.manuscript) + "</td>";
589
                        result += "<td>" + item.position1 + (item.position2 ? ("/" + item.position2 + (item.positiondetail ? "/"  + item.positiondetail :  "")) : "")  + "</td>";
590
                        result += "<td class=\"action-td\">" +
591
                            /*"<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 ONLY*/
592
                            "<button class=\"btn\" title=\"Detail\"  data-toggle=\"modal\" data-target=\"#detail-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-search\"></i></button>" +
593
                            "</td>";
594
                        result += "</tr>";
595
                    });
596
                    document.getElementById("search-table").innerHTML = result;
597
                }
598
            </script>
599
        </tbody>
600
    </table>
601

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

    
604
    <script>
605
        function checkValidItemsPerPage(){
606
            var visibleItemCount = document.getElementById("itemsPerPage");
607
            if(!isNaN(visibleItemCount.value) && visibleItemCount.value % 1 === 0 && parseInt(visibleItemCount.value) >= 1 && parseInt(visibleItemCount.value) <= 500){
608
                return true;
609
            }else{
610
                alert("Zadaný počet není validní, zkuste to znovu.\nPlatný rozsah: 1 - 500 položek na stránku.");
611
                visibleItemCount.value = itemPerPage;
612
                return false;
613
            }
614
        }
615

    
616
        function changeItemsPerPage(){
617
            //if there is no valid input, return and dont save
618
            if(checkValidItemsPerPage() === false){
619
                return;
620
            }
621

    
622
            pageIndex = 0;
623
            var visibleItemCount = document.getElementById("itemsPerPage").value;
624
            itemPerPage = visibleItemCount;
625
            fetchData(true);
626
        }
627

    
628
        function moveToFirst(){
629
            pageIndex = 0;
630
            fetchData(true);
631
        }
632

    
633
        function moveToPrevious(){
634
            pageIndex = (pageIndex - 1 > 0) ? (pageIndex - 1) : (0);
635
            fetchData(true);
636
        }
637

    
638
        function moveToNext(){
639
            pageIndex = (pageIndex + 1 < pageCount) ? (pageIndex + 1) : (pageCount - 1);
640
            fetchData(true);
641
        }
642

    
643
        function moveToLast(){
644
            pageIndex = pageCount - 1;
645
            fetchData(true);
646
        }
647

    
648
        function onManualPageStart(element){
649
            element.value = '';
650
        }
651

    
652
        function onManualPageEnd(element) {
653
            const value = Number(element.value) - 1;
654
            if(Number.isInteger(value) && value >= 0 && value < pageCount){
655
                pageIndex = value;
656
                fetchData(true);
657
            } else {
658
                element.value = (pageIndex + 1) + " / " + pageCount;
659
            }
660

    
661
        }
662
    </script>
663
    <div id="paging-control" class="mx-auto text-center" style="display: none">
664
        <button class="border-0 shadow-none bg-transparent" onclick="moveToFirst()"><b><<</b></button>
665
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToPrevious()"><b><</b></button>
666
        <input class="border-0 shadow-none bg-transparent text-center font-weight-bold"
667
               id="page-label"
668
               onfocus="onManualPageStart(this)"
669
               onblur="onManualPageEnd(this)"
670
        />
671
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToNext()"><b>></b></button>
672
        <button  class="border-0 shadow-none bg-transparent" onclick="moveToLast()"><b>>></b></button>
673
    </div>
674
</div>
675

    
676

    
(6-6/7)