aswi2021mr-proper-gitlab/application/view/contents/searchContent.php @ 14df9e1d

<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="lemma" class="mr-2">Lemma</label>
            <input type="text" id="lemma">
        </div>
        <div class="mr-3">
            <label for="wordshape" class="mr-2">Slovní tvar</label>
            <input type="text" id="wordshape">
        </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="description2" class="mr-2">Doplňující údaj</label>
            <input type="text" id="description2" />
        </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">substantivum</option>
                <option value = "A">adjektivum</option>
                <option value = "P">pronomen</option>
                <option value = "C">numeralie</option>
                <option value = "V">verbum</option>
                <option value = "D">adverbium</option>
                <option value = "R">prepozice</option>
                <option value = "J">konjunkce</option>
                <option value = "T">partikule</option>
                <option value = "I">interjekce</option>
            </select>
        </div>

        <!-- 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-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-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-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-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-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-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-->
        <div class="ml-auto" id="filter-control-div">
            <i class="mr-1 my-auto" id="hit-count">0 záznamů</i>
            <button class="btn" id="filter-but" onclick="callFilter()">
                Filtrovat
            </button>
            <button class="btn" data-toggle="modal" data-target="#settings-modal" title="Nastavení">
                <i class="fa fa-cogs"></i>
            </button>

            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
            <button class="btn" data-toggle="modal" data-target="#edit-modal" data-title="Nový záznam" title="Nový záznam">
                <i class="fa fa-plus"></i>
            </button>
            <?php }?>
        </div>
    </div>
</div>

<div class="search-results mt-4">
    <table class="table table-striped">
        <thead>
        <tr>
            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
                <th scope="col">Vydáno</th>
            <?php }?>
            <th scope="col">Lemma</th>
            <th scope="col">Slovní tvar</th>
            <th scope="col">Morfologie</th>
            <th scope="col">Rukopisy</th>
            <th scope="col">Pozice</th>
            <th scope="col">Doplňující údaj</th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody id="search-table">
            <script>
                let data;
                function fetchData (filter = true) {
                    // (A1) GET SEARCH TERM
                    const formData = new FormData();
                    formData.append("page", ""+pageIndex);
                    formData.append("items_per_page", ""+itemPerPage);
                    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;
                        //console.log(search);
                        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 = "";
                        }

                        if(parsedJSON.count === 1){
                            document.getElementById("hit-count").innerText = "1 záznamů";
                        } else if(parsedJSON.count < 5){
                            document.getElementById("hit-count").innerText = parsedJSON.count +" záznamů";
                        } else {
                            document.getElementById("hit-count").innerText = parsedJSON.count +" záznamů";
                        }

                        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 publishItem(id, index){
                    let item = data[index];
                    const finishedChecked = document.getElementById("check-"+id).checked;

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

                    formData.append("id", item.id);
                    formData.append("ending", item.ending);
                    formData.append("prefix", item.prefix);
                    formData.append("suffix", item.suffix);

                    formData.append("namedentity", item.namedentity);
                    formData.append("position1", item.position1);
                    formData.append("position2", item.position2);
                    formData.append("positiondetail", item.positiondetail);
                    formData.append("word", item.word);
                    formData.append("lemma", item.lemma.lemma);
                    formData.append("manuscript", item.manuscript);
                    formData.append("context", item.context);
                    formData.append("description", item.description);
                    formData.append("description2", item.description2);
                    formData.append("description3", item.description3);
                    formData.append("tag", item.tag.tag);
                    formData.append("pos", item.lemma.pos);
                    formData.append("date", item.date);

                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "./controller/UpdateController.php");
                    xhr.send(formData);
                    setTimeout(function(){
                        location.reload();
                    }, 500);
                }

                function renderData(data) {
                    let result = "";
                    data.forEach((item,id) => {
                        result += "<tr>";
                        <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
                            result += "<td><input type='checkbox' id='check-"+item.id+"' onchange='publishItem("+item.id+", "+ id+ ")' "+ ((item.finished === true) ? 'checked' : '') +" /></td>";
                        <?php }?>
                        result += "<td>" + item.lemma.lemma + "</td>";
                        result += "<td>" + item.word + "</td>";
                        result += "<td>" + renderTag(item.tag.tag) + "</td>";
                        result += "<td>" + renderManuscript(item.manuscript) + "</td>";
                        result += "<td>" + item.position1 + (item.position2 ? ("/" + item.position2 + (item.positiondetail ? "/"  + item.positiondetail :  "")) : "")  + "</td>";
                        result += "<td>" + ((item.description2 !== null) ? item.description2 : "-") + "</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>" +
                            "<button class=\"btn\" title=\"Detail\"  data-toggle=\"modal\" data-target=\"#detail-modal\" data-pseudo-id='" + id + "'><i class=\"fa fa-search\"></i></button>";
                            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) { ?> //show remove only if logged in
                                result += "<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>";
                            <?php }?>
                        result += "</td>";    
                        result += "</tr>";
                    });
                    document.getElementById("search-table").innerHTML = result;
                }

                function removeSelectedItem(idToDelete){
                    const data = new FormData(); //to pass ids, which we want to delete from DB
                    data.append("id", ""+idToDelete); //id to delete from table dd_wordform

                    let xhr = new XMLHttpRequest();
                    xhr.open("POST", "./controller/RemoveController.php");
                    xhr.send(data);
                    fetchData(true); //reload data after item delete
                }
            </script>
        </tbody>
    </table>

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

    <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>