aswi2021mr-proper-gitlab/application/view/searchContent.php @ 10e26305

<script>
    let pageIndex = 0;
    let itemPerPage = 50;
    let itemCount = 0;
    let pageCount = 0;

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

        //page-label listener
        document.getElementById('page-label').addEventListener('keyup',function(e){
            if (e.key === 'Enter' || e.keyCode === 13) {
                this.blur();
            }
        });
    };
</script>

<div class="search-filters container" onload="filtersChange()">
    <div class="row">
        <div class="mr-3">
            <label for="wordshape" class="mr-2">Slovo</label>
            <input type="text" id="wordshape">
        </div>
        <div class="mr-3">
            <label for="lemma" class="mr-2">Lemma</label>
            <input type="text" id="lemma">
        </div>
        <div class="mr-3">
            <label for="source" class="mr-2">Rukopisný pramen</label>
            <select id="source" multiple>
                <option value = "0">rukopis Vídeňský</option>
                <option value = "1">zlomky Hanušovy</option>
                <option value = "2">zlomky Hradecké</option>
                <option value = "3">rukopis Cambridžský</option>
                <option value = "4">rukopis Františkánský</option>
                <option value = "5">zlomek Olomoucký</option>
                <option value = "6">fragment Strahovský</option>
                <option value = "7">zlomky Klementinsko-Křižovnické</option>
                <option value = "8">zlomky Mnichovské</option>
                <option value = "9">rukopis Lobkovický</option>
                <option value = "10">rukopis Pelclův</option>
                <option value = "11">rukopis Cerronský</option>
                <option value = "12">rukopis Fürstenberský</option>
                <option value = "13">rukopis Zebererův</option>
                <option value = "14">vydání Pavla Ješína z Bezdězi, Praha 1620</option>
                <option value = "15">básně připsané při Pulkavově kronice v rukopisu Litoměřickém</option>
            </select>
        </div>
        <div class="mr-3">
            <label for="location" class="mr-2">Pozice</label>
            <input type="text" id="location">
        </div>


        <div class="mr-3">
            <label for="wordclass" class="mr-2">Slovní druh</label>
            <select onchange="filtersChange()"  id="wordclass">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "N">Substantiva</option>
                <option value = "A">Adjektiva</option>
                <option value = "P">Pronomina</option>
                <option value = "C">Numeralia</option>
                <option value = "V">Verba</option>
                <option value = "D">Adverbia</option>
                <option value = "R">Prepozice</option>
                <option value = "J">Konjunkce</option>
                <option value = "I">Interjekce</option>
                <option value = "T">Partikule</option>
            </select>
        </div>

        <script>
            function filtersChange() {
                const value = document.getElementById("wordclass").value;
                let movedNode;
                let beforeNode;
                switch (value) {
                    case "N":
                        setFilerVisibility([
                            true,
                            true,
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        movedNode = document.getElementById("filter-case");
                        beforeNode = document.getElementById("filter-countability");
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
                        break;
                    case "A":
                        setFilerVisibility([
                            true,
                            true,
                            true,
                            true,
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        movedNode = document.getElementById("filter-case");
                        beforeNode = document.getElementById("filter-countability");
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
                        break;
                    case "P":
                        setFilerVisibility([
                            true,
                            true,
                            true,
                            false,
                            false,
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        movedNode = document.getElementById("filter-case");
                        beforeNode = document.getElementById("filter-countability");
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
                        break;
                    case "C":
                        setFilerVisibility([
                            true,
                            true,
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        movedNode = document.getElementById("filter-case");
                        beforeNode = document.getElementById("filter-countability");
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
                        break;
                    case "V":
                        setFilerVisibility([
                            true,
                            true,
                            true,
                            false,
                            false,
                            false,
                            true,
                            true,
                            true,
                            true,
                            true,
                            true,
                            false
                        ]);
                        movedNode = document.getElementById("filter-case");
                        beforeNode = document.getElementById("filter-but");
                        movedNode.parentNode.insertBefore(movedNode, beforeNode);
                        break;
                    case "D":
                        setFilerVisibility([
                            false,
                            false,
                            false,
                            false,
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        break;
                    case "R":
                        setFilerVisibility([
                            true,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        break;
                    case "J":
                        setFilerVisibility([
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            true
                        ]);
                        break;
                    case "I":
                        setFilerVisibility([
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        break;
                    case "T":
                        setFilerVisibility([
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        break;
                    default:
                        setFilerVisibility([
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false,
                            false
                        ]);
                        break;
                }
            }

            function setFilerVisibility(visibility) {
                const id = [
                    "filter-case",
                    "filter-countability",
                    "filter-gender",
                    "filter-shape",
                    "filter-grade",
                    "filter-type",
                    "filter-mood",
                    "filter-irregular",
                    "filter-person",
                    "filter-time",
                    "filter-vid",
                    "filter-v-type",
                    "filter-k-type"
                ];

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

        <!-- conditionaly rendered filters-->
        <div class="mr-3" id="filter-person">
            <label for="person" class="mr-2">Osoba</label>
            <select id="person">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "1">1.</option>
                <option value = "2">2.</option>
                <option value = "3">3.</option>
            </select>
        </div>
        <div class="mr-3" id="filter-case">
            <label for="case" class="mr-2">Pád</label>
            <select id="case">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "1">Nominativ</option>
                <option value = "2">Genitiv</option>
                <option value = "3">Dativ</option>
                <option value = "4">Akuzativ</option>
                <option value = "5">Vokativ</option>
                <option value = "6">Lokál</option>
                <option value = "7">Instrumentál</option>
            </select>
        </div>
        <div class="mr-3" id="filter-countability">
            <label for="countability" class="mr-2">Číslo</label>
            <select id="countability">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "S">Singulár</option>
                <option value = "P">Plurál</option>
                <option value = "D">Duál</option>
            </select>
        </div>
        <div class="mr-3" id="filter-gender">
            <label for="gender" class="mr-2">Rod</label>
            <select id="gender">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "M">Maskulinum</option>
                <option value = "F">Femininum</option>
                <option value = "N">Neutrum</option>
            </select>
        </div>
        <div class="mr-3" id="filter-shape">
            <label for="shape" class="mr-2">Tvar</label>
            <select id="shape">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "C">Složený</option>
                <option value = "N">Jmenný</option>
            </select>
        </div>
        <div class="mr-3" id="filter-grade">
            <label for="grade" class="mr-2">Stupeň</label>
            <select id="grade">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "1">Pozitiv</option>
                <option value = "2">Komparativ</option>
                <option value = "3">Superlativ</option>
            </select>
        </div>
        <div class="mr-3" id="filter-type">
            <label for="type" class="mr-2">Druh</label>
            <select id="type">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "P">Personalia</option>
                <option value = "S">Posesiva</option>
                <option value = "D">Demonstrativa</option>
                <option value = "Q">Interogativa</option>
                <option value = "J">Relativa</option>
                <option value = "Z">Indefinita</option>
                <option value = "L">Limitativa</option>
                <option value = "W">Negativa</option>
            </select>
        </div>
        <div class="mr-3" id="filter-time">
            <label for="time" class="mr-2">Čas</label>
            <select id="time">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "P">Prézens</option>
                <option value = "A">Aorist</option>
                <option value = "R">Préteritum</option>
                <option value = "I">Imperfektum</option>
                <option value = "H">Plusquamperfektum</option>
                <option value = "F">Futurum</option>
            </select>
        </div>
        <div class="mr-3" id="filter-mood">
            <label for="mood" class="mr-2">Způsob</label>
            <select id="mood" onchange="moodChange()">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "d">Indikativ</option>
                <option value = "i">Imperativ</option>
                <option value = "c">Kondicionál</option>
            </select>
        </div>
        <div class="mr-3" id="filter-irregular">
            <label for="irregular" class="mr-2">Neurčitý slovesný tvar</label>
            <select id="irregular" onchange="irregularChange()">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "f">Infinitiv</option>
                <option value = "S">Supinum</option>
                <option value = "e">Přech. přítomný</option>
                <option value = "m">Přech. minulý</option>
                <option value = "A">Part. perf. akt.</option>
                <option value = "P">Part. perf. pas.</option>
            </select>
        </div>
        <div class="mr-3" id="filter-v-type">
            <label for="v-type" class="mr-2">Slovesný rod</label>
            <select id="v-type">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "A">Aktivum</option>
                <option value = "P">Pasivum</option>
            </select>
        </div>
        <div class="mr-3" id="filter-vid">
            <label for="vid" class="mr-2">Vid</label>
            <select id="vid">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "P">Perfektivum</option>
                <option value = "I">Imperfektivum </option>
            </select>
        </div>
        <div class="mr-3" id="filter-k-type">
            <label for="k-type" class="mr-2">Typ</label>
            <select id="k-type">
                <option selected="selected" value = "">Nevybráno</option>
                <option value = "V">Větná</option>
                <option value = "C">Členská</option>
                <option value = "N">Navazovací</option>
                <option value = "P">Spojení s přechodníkem</option>
            </select>
        </div>

        <!-- send button-->
        <button class="ml-auto btn" id="filter-but" onclick="callFilter()">
            Filtrovat
        </button>
    </div>
</div>

<div class="search-results my-4">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">Slovo</th>
            <th scope="col">Lemma</th>
            <th scope="col">Rukopisy</th>
            <th scope="col">Pozice</th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody id="search-table">
            <script>
                function moodChange() {
                    if(document.getElementById("mood").value !== ""){
                        document.getElementById("irregular").disabled = true;
                        document.getElementById("irregular").title = "Neurčitý slovesný tvar smí být nastaven pouze není-li nastaven způsob";
                    } else {
                        document.getElementById("irregular").disabled = false;
                        document.getElementById("irregular").title = "";
                    }
                }

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

                let data;
                function callFilter() {
                    pageIndex = 0;
                    fetchData(true)
                }

                function filterData (formData) {
                    //regular
                    formData.append("lemma", document.getElementById("lemma").value);
                    formData.append("word", document.getElementById("wordshape").value);

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

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

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

                    if(pos === "P"){
                        formData.append("tag_sentence", document.getElementById("type").value);
                    } else if(pos === "V"){
                        const mood = document.getElementById("mood").value;
                        if(mood !== ""){
                            formData.append("tag_sentence", mood);
                        } else {
                            formData.append("tag_sentence", document.getElementById("irregular").value);
                        }
                    } else if(pos === "J"){
                        formData.append("tag_sentence", document.getElementById("k-type").value);
                    }

                    formData.append("tag_verb_person", document.getElementById("person").value);
                    formData.append("tag_verb_time", document.getElementById("time").value);
                    formData.append("tag_verb_degree", document.getElementById("vid").value);
                    formData.append("tag_verb_aspect", document.getElementById("v-type").value);
                }

                function fetchData (filter = true) {
                    // (A1) GET SEARCH TERM
                    const formData = new FormData();
                    formData.append("page", ""+pageIndex);
                    formData.append("items_per_page", ""+itemPerPage);
                    formData.append("finished", "true");//TODO ADMIN
                    if(filter){
                        filterData(formData);
                    }

                    // (A2) AJAX - USE HTTP:// NOT FILE://
                    let xhr = new XMLHttpRequest();
                    xhr.open("POST", "./controller/TableController.php");
                    xhr.onload = function(){
                        let search = this.response;
                        let parsedJSON = JSON.parse(search);
                        if(parsedJSON.count === 0){
                            document.getElementById("no-data-label").style.display = "";
                            document.getElementById("paging-control").style.display = "none";
                        } else {
                            document.getElementById("no-data-label").style.display = "none";
                            document.getElementById("paging-control").style.display = "";
                        }
                        itemCount = parsedJSON.count;
                        pageCount = Math.ceil(itemCount / itemPerPage);
                        document.getElementById("page-label").value = (pageIndex + 1) + " / " + pageCount;
                        data = parsedJSON.data;
                        renderData(parsedJSON.data);
                    };
                    xhr.send(formData);
                }

                function renderManuscript(manuscripts, shorten=true) {
                    let output = "";
                    for(let i = 0; i < manuscripts.length; i++){
                        if(shorten)
                            output += codeToManuscriptShort[manuscripts[i]];
                        else
                            output += codeToManuscript[manuscripts[i]];

                        if(i < manuscripts.length - 1){
                            if(shorten)
                                output += ", ";
                            else
                                output += "; ";
                        }
                    }
                    return output;
                }

                function renderData(data) {
                    let result = "";
                    data.forEach((item,id) => {
                        result += "<tr>";
                        result += "<td>" + item.word + "</td>";
                        result += "<td>" + item.lemma.lemma + "</td>";
                        result += "<td>" + renderManuscript(item.manuscript) + "</td>";
                        result += "<td>" + item.position1 + (item.position2 ? ("/" + item.position2 + (item.positiondetail ? "/"  + item.positiondetail :  "")) : "")  + "</td>";
                        result += "<td class=\"action-td\">" +
                            /*"<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*/
                            "<button class=\"btn\" title=\"Detail\"  data-toggle=\"modal\" data-target=\"#detail-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-search\"></i></button>" +
                            "</td>";
                        result += "</tr>";
                    });
                    document.getElementById("search-table").innerHTML = result;
                }
            </script>
        </tbody>
    </table>

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

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

        function changeItemsPerPage(){
            //if there is no valid input, return and dont save
            if(checkValidItemsPerPage() === false){
                return;
            }

            pageIndex = 0;
            var visibleItemCount = document.getElementById("itemsPerPage").value;
            itemPerPage = visibleItemCount;
            fetchData(true);
        }

        function moveToFirst(){
            pageIndex = 0;
            fetchData(true);
        }

        function moveToPrevious(){
            pageIndex = (pageIndex - 1 > 0) ? (pageIndex - 1) : (0);
            fetchData(true);
        }

        function moveToNext(){
            pageIndex = (pageIndex + 1 < pageCount) ? (pageIndex + 1) : (pageCount - 1);
            fetchData(true);
        }

        function moveToLast(){
            pageIndex = pageCount - 1;
            fetchData(true);
        }

        function onManualPageStart(element){
            element.value = '';
        }

        function onManualPageEnd(element) {
            const value = Number(element.value) - 1;
            if(Number.isInteger(value) && value >= 0 && value < pageCount){
                pageIndex = value;
                fetchData(true);
            } else {
                element.value = (pageIndex + 1) + " / " + pageCount;
            }

        }
    </script>
    <div id="paging-control" class="mx-auto text-center" style="display: none">
        <button class="border-0 shadow-none bg-transparent" onclick="moveToFirst()"><b><<</b></button>
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToPrevious()"><b><</b></button>
        <input class="border-0 shadow-none bg-transparent text-center font-weight-bold"
               id="page-label"
               onfocus="onManualPageStart(this)"
               onblur="onManualPageEnd(this)"
        />
        <button class="border-0 shadow-none bg-transparent"  onclick="moveToNext()"><b>></b></button>
        <button  class="border-0 shadow-none bg-transparent" onclick="moveToLast()"><b>>></b></button>
    </div>
</div>