Projekt

Obecné

Profil

Stáhnout (19.2 KB) Statistiky
| Větev: | Revize:
1
<script>
2
    window.onload = function() {
3
        let sourceSelect = new vanillaSelectBox("#source");
4
        filtersChange();
5
        fetchData();
6
    };
7
</script>
8

    
9
<div class="search-filters container" onload="filtersChange()">
10
    <div class="row">
11
        <div class="mr-3">
12
            <label for="lemma" class="mr-2">Lemma</label>
13
            <input type="text" id="lemma">
14
        </div>
15
        <div class="mr-3">
16
            <label for="wordshape" class="mr-2">Slovo</label>
17
            <input type="text" id="wordshape">
18
        </div>
19
        <div class="mr-3">
20
            <label for="source" class="mr-2">Rukopisný pramen</label>
21
            <select id="source" multiple>
22
                <option value = "1">C</option>
23
                <option value = "2">Cr</option>
24
                <option value = "3">F</option>
25
                <option value = "4">Fs</option>
26
                <option value = "5">H</option>
27
                <option value = "6">Hr</option>
28
                <option value = "7"></option>
29
                <option value = "8">K</option>
30
                <option value = "9">L</option>
31
                <option value = "10">M</option>
32
                <option value = "11">O</option>
33
                <option value = "12">P</option>
34
                <option value = "13">S</option>
35
                <option value = "14">V</option>
36
                <option value = "15">Z</option>
37
            </select>
38
        </div>
39
        <div class="mr-3">
40
            <label for="location" class="mr-2">Pozice</label>
41
            <input type="text" id="location">
42
        </div>
43

    
44

    
45
        <div class="mr-3">
46
            <label for="wordclass" class="mr-2">Slovní druh</label>
47
            <select onchange="filtersChange()"  id="wordclass">
48
                <option selected="selected" value = "">Nevybráno</option>
49
                <option value = "1">Substantiva</option>
50
                <option value = "2">Adjektiva</option>
51
                <option value = "3">Pronomina</option>
52
                <option value = "4">Numeralia</option>
53
                <option value = "5">Verba</option>
54
                <option value = "6">Adverbia</option>
55
                <option value = "7">Prepozice</option>
56
                <option value = "8">Konjunkce</option>
57
                <option value = "9">Interjekce</option>
58
                <option value = "10">Partikule</option>
59
            </select>
60
        </div>
61

    
62
        <script>
63
            function filtersChange() {
64
                const value = document.getElementById("wordclass").value;
65
                switch (value) {
66
                    case "1":
67
                        setFilerVisibility([
68
                            true,
69
                            true,
70
                            true,
71
                            false,
72
                            false,
73
                            false,
74
                            false,
75
                            false,
76
                            false,
77
                            false,
78
                            false,
79
                            false
80
                        ]);
81
                        break;
82
                    case "2":
83
                        setFilerVisibility([
84
                            true,
85
                            true,
86
                            true,
87
                            true,
88
                            true,
89
                            false,
90
                            false,
91
                            false,
92
                            false,
93
                            false,
94
                            false,
95
                            false
96
                        ]);
97
                        break;
98
                    case "3":
99
                        setFilerVisibility([
100
                            true,
101
                            true,
102
                            true,
103
                            false,
104
                            false,
105
                            true,
106
                            false,
107
                            false,
108
                            false,
109
                            false,
110
                            false,
111
                            false
112
                        ]);
113
                        break;
114
                    case "4":
115
                        setFilerVisibility([
116
                            true,
117
                            true,
118
                            true,
119
                            false,
120
                            false,
121
                            false,
122
                            false,
123
                            false,
124
                            false,
125
                            false,
126
                            false,
127
                            false
128
                        ]);
129
                        break;
130
                    case "5":
131
                        setFilerVisibility([
132
                            true,
133
                            true,
134
                            true,
135
                            false,
136
                            false,
137
                            false,
138
                            true,
139
                            true,
140
                            true,
141
                            true,
142
                            true,
143
                            false
144
                        ]);
145
                        break;
146
                    case "6":
147
                        setFilerVisibility([
148
                            false,
149
                            false,
150
                            false,
151
                            false,
152
                            true,
153
                            false,
154
                            false,
155
                            false,
156
                            false,
157
                            false,
158
                            false,
159
                            false
160
                        ]);
161
                        break;
162
                    case "7":
163
                        setFilerVisibility([
164
                            true,
165
                            false,
166
                            false,
167
                            false,
168
                            false,
169
                            false,
170
                            false,
171
                            false,
172
                            false,
173
                            false,
174
                            false,
175
                            false
176
                        ]);
177
                        break;
178
                    case "8":
179
                        setFilerVisibility([
180
                            false,
181
                            false,
182
                            false,
183
                            false,
184
                            false,
185
                            false,
186
                            false,
187
                            false,
188
                            false,
189
                            false,
190
                            false,
191
                            true
192
                        ]);
193
                        break;
194
                    case "9":
195
                        setFilerVisibility([
196
                            false,
197
                            false,
198
                            false,
199
                            false,
200
                            false,
201
                            false,
202
                            false,
203
                            false,
204
                            false,
205
                            false,
206
                            false,
207
                            false
208
                        ]);
209
                        break;
210
                    case "10":
211
                        setFilerVisibility([
212
                            false,
213
                            false,
214
                            false,
215
                            false,
216
                            false,
217
                            false,
218
                            false,
219
                            false,
220
                            false,
221
                            false,
222
                            false,
223
                            false
224
                        ]);
225
                        break;
226
                    default:
227
                        setFilerVisibility([
228
                            false,
229
                            false,
230
                            false,
231
                            false,
232
                            false,
233
                            false,
234
                            false,
235
                            false,
236
                            false,
237
                            false,
238
                            false,
239
                            false
240
                        ]);
241
                        break;
242
                }
243
            }
244

    
245
            function setFilerVisibility(visibility) {
246
                const id = [
247
                    "filter-case",
248
                    "filter-countability",
249
                    "filter-gender",
250
                    "filter-shape",
251
                    "filter-grade",
252
                    "filter-type",
253
                    "filter-mood",
254
                    "filter-person",
255
                    "filter-time",
256
                    "filter-vid",
257
                    "filter-v-type",
258
                    "filter-k-type"
259
                ];
260

    
261
                for(let i = 0; i < id.length &&  i < visibility.length; i++){
262
                    document.getElementById(id[i]).style.display = visibility[i] === true ? "" : "none";
263
                    document.getElementById(id[i].replace("filter-", "")).value = "";
264
                }
265
            }
266
        </script>
267

    
268
        <!-- conditionaly rendered filters-->
269
        <div class="mr-3" id="filter-case">
270
            <label for="case" class="mr-2">Pád</label>
271
            <select id="case">
272
                <option selected="selected" value = "">Nevybráno</option>
273
                <option value = "1">Nominativ</option>
274
                <option value = "2">Genitiv</option>
275
                <option value = "3">Dativ</option>
276
                <option value = "4">Akuzativ</option>
277
                <option value = "5">Vokativ</option>
278
                <option value = "6">Lokál</option>
279
                <option value = "7">Instrumentál</option>
280
            </select>
281
        </div>
282
        <div class="mr-3" id="filter-countability">
283
            <label for="countability" class="mr-2">Číslo</label>
284
            <select id="countability">
285
                <option selected="selected" value = "">Nevybráno</option>
286
                <option value = "S">Singulár</option>
287
                <option value = "P">Plurál</option>
288
                <option value = "D">Duál</option>
289
            </select>
290
        </div>
291
        <div class="mr-3" id="filter-gender">
292
            <label for="gender" class="mr-2">Rod</label>
293
            <select id="gender">
294
                <option selected="selected" value = "">Nevybráno</option>
295
                <option value = "M">Maskulinum</option>
296
                <option value = "F">Femininum</option>
297
                <option value = "N">Neutrum</option>
298
            </select>
299
        </div>
300
        <div class="mr-3" id="filter-shape">
301
            <label for="shape" class="mr-2">Tvar</label>
302
            <select id="shape">
303
                <option selected="selected" value = "">Nevybráno</option>
304
                <option value = "C">Složený</option>
305
                <option value = "N">Jmenný</option>
306
            </select>
307
        </div>
308
        <div class="mr-3" id="filter-grade">
309
            <label for="grade" class="mr-2">Stupeň</label>
310
            <select id="grade">
311
                <option selected="selected" value = "">Nevybráno</option>
312
                <option value = "1">Pozitiv</option>
313
                <option value = "2">Komparativ</option>
314
                <option value = "3">Superlativ</option>
315
            </select>
316
        </div>
317
        <div class="mr-3" id="filter-type">
318
            <label for="type" class="mr-2">Druh</label>
319
            <select id="type">
320
                <option selected="selected" value = "">Nevybráno</option>
321
                <option value = "P">Personalia</option>
322
                <option value = "S">Posesiva</option>
323
                <option value = "D">Demonstrativa</option>
324
                <option value = "Q">Interogativa</option>
325
                <option value = "J">Relativa</option>
326
                <option value = "Z">Indefinita</option>
327
                <option value = "L">Limitativa</option>
328
                <option value = "W">Negativa</option>
329
            </select>
330
        </div>
331
        <div class="mr-3" id="filter-mood">
332
            <label for="mood" class="mr-2">Způsob</label>
333
            <select id="mood">
334
                <option selected="selected" value = "">Nevybráno</option>
335
                <option value = "f">Infinitiv</option>
336
                <option value = "d">Indikativ</option>
337
                <option value = "i">Imperativ</option>
338
                <option value = "c">Kondicionál</option>
339
                <option value = "S">Supinum</option>
340
                <option value = "e">Přech. přítomný</option>
341
                <option value = "m">Přech. minulý</option>
342
                <option value = "A">Part. perf. akt.</option>
343
                <option value = "P">Part. perf. pas.</option>
344
            </select>
345
        </div>
346
        <div class="mr-3" id="filter-person">
347
            <label for="person" class="mr-2">Osoba</label>
348
            <select id="person">
349
                <option selected="selected" value = "">Nevybráno</option>
350
                <option value = "1">1.</option>
351
                <option value = "2">2.</option>
352
                <option value = "3">3.</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-vid">
368
            <label for="vid" class="mr-2">Vid</label>
369
            <select id="vid">
370
                <option selected="selected" value = "">Nevybráno</option>
371
                <option value = "P">Perfektivum</option>
372
                <option value = "I">Imperfektivum </option>
373
            </select>
374
        </div>
375
        <div class="mr-3" id="filter-v-type">
376
            <label for="v-type" class="mr-2">Slovesný rod</label>
377
            <select id="v-type">
378
                <option selected="selected" value = "">Nevybráno</option>
379
                <option value = "A">Aktivum</option>
380
                <option value = "P">Pasivum</option>
381
            </select>
382
        </div>
383
        <div class="mr-3" id="filter-k-type">
384
            <label for="k-type" class="mr-2">Typ</label>
385
            <select id="k-type">
386
                <option selected="selected" value = "">Nevybráno</option>
387
                <option value = "V">Větná</option>
388
                <option value = "C">Členská</option>
389
                <option value = "N">Navazovací</option>
390
                <option value = "P">Spojení s přechodníkem</option>
391
            </select>
392
        </div>
393

    
394
        <!-- send button-->
395
        <button class="ml-auto btn" onclick="filterData()">
396
            Filtrovat
397
        </button>
398
    </div>
399
</div>
400

    
401
<div class="search-results my-4">
402
    <table class="table table-striped">
403
        <thead>
404
        <tr>
405
            <th scope="col">Slovo</th>
406
            <th scope="col">Lemma</th>
407
            <th scope="col">Rukopisy</th>
408
            <th scope="col">Pozice</th>
409
            <th scope="col"></th>
410
        </tr>
411
        </thead>
412
        <tbody id="search-table">
413
            <script>
414
                function filterData () {
415
                    //TODO
416
                }
417

    
418
                let data;
419

    
420
                function fetchData () {
421
                    // (A1) GET SEARCH TERM
422
                    const formData = new FormData();
423
                    formData.append("page", "0");//TODO PAGING
424
                    formData.append("items_per_page", "50");//TODO PAGING
425
                    formData.append("finished", "true");//TODO ADMIN
426

    
427
                    // (A2) AJAX - USE HTTP:// NOT FILE://
428
                    let xhr = new XMLHttpRequest();
429
                    xhr.open("POST", "./controller/TableController.php");
430
                    xhr.onload = function(){
431
                        let search = this.response;
432
                        let parsedJSON = JSON.parse(search);
433
                        data = parsedJSON.data;
434
                        renderData(parsedJSON.data);
435
                    };
436
                    xhr.send(formData);
437
                }
438

    
439
                function renderManuscript(manuscripts, shorten=true) {
440
                    const names = [
441
                        "rukopis Vídeňský",
442
                        "zlomky Hanušovy",
443
                        "zlomky Hradecké",
444
                        "rukopis Cambridžský",
445
                        "rukopis Františkánský",
446
                        "zlomek Olomoucký",
447
                        "fragment Strahovský",
448
                        "zlomky Klementinsko-Křižovnické",
449
                        "zlomky Mnichovské",
450
                        "rukopis Lobkovický",
451
                        "rukopis Pelclův",
452
                        "rukopis Cerronský",
453
                        "rukopis Fürstenberský",
454
                        "rukopis Zebererův",
455
                        "vydání Pavla Ješína z Bezdězi, Praha 1620",
456
                        "básně připsané při Pulkavově kronice v rukopisu Litoměřickém",
457
                    ];
458
                    let output = "";
459
                    for(let i = 0; i < manuscripts.length; i++){
460
                        output += names[manuscripts[i]];
461

    
462
                        if(i < manuscripts.length - 1){
463
                            if(shorten && i === 2){
464
                                const extras = manuscripts.length - (i + 1);
465
                                output += " <i><small>a " + extras + " další" + (extras > 4? "ch" : "") + "</small></i>";
466
                                break;
467
                            }
468
                            output += "; "
469
                        }
470
                    }
471
                    return output;
472
                }
473

    
474
                function renderData(data) {
475
                    let result = "";
476
                    data.forEach((item,id) => {
477
                        result += "<tr>";
478
                        result += "<td>" + item.word + "</td>";
479
                        result += "<td>" + item.lemma.lemma + "</td>";
480
                        result += "<td>" + renderManuscript(item.manuscript) + "</td>";
481
                        result += "<td>" + item.position1 + (item.position2 ? ("/" + item.position2 + (item.positiondetail ? "/"  + item.positiondetail :  "")) : "")  + "</td>";
482
                        result += "<td class=\"action-td\">" +
483
                            "<button class=\"btn\" title=\"Detail\"  data-toggle=\"modal\" data-target=\"#detail-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-search\"></i></button>" +
484
                            "</td>";
485
                        result += "</tr>";
486
                    });
487
                    document.getElementById("search-table").innerHTML = result;
488
                }
489
            </script>
490
        </tbody>
491
    </table>
492
</div>
493

    
494

    
(6-6/7)