commit af2e04cde07994822135c042d7c58f7dfd9c187d
Author: Anděl Ondřej <ondrej.andel@marbes.cz>
Date:   Wed Apr 28 21:01:40 2021 +0200

    Enhancement #8756: Refactoring, klient-side

diff --git a/application/changes.php b/application/changes.php
index c4e54a3..d7d93b2 100644
--- a/application/changes.php
+++ b/application/changes.php
@@ -9,7 +9,7 @@
 
     <!-- css -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="view/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
+    <link rel="stylesheet" href="view/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!-- jQuery library -->
@@ -26,7 +26,7 @@
 
     <div class="row app-content">
         <div class="col-xs-12 col-sm-12 p-4 content d-flex">
-            <?php include "./view/changesContent.php" ?>
+            <?php include "./view/contents/changesContent.php" ?>
         </div>
     </div>
     <?php include "./view/footer.html" ?>
diff --git a/application/index.php b/application/index.php
index 8cbc5db..624fb00 100644
--- a/application/index.php
+++ b/application/index.php
@@ -11,7 +11,7 @@ session_start();
 
     <!-- css -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="view/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
+    <link rel="stylesheet" href="view/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!-- jQuery library -->
@@ -29,7 +29,7 @@ session_start();
 
     <div class="row app-content">
         <div class="col-xs-12 col-sm-12 p-4 content d-flex">
-            <?php include "./view/indexContent.html" ?>
+            <?php include "./view/contents/indexContent.html" ?>
         </div>
     </div>
     <?php include "./view/footer.html" ?>
diff --git a/application/manual.php b/application/manual.php
index bc3b967..257afcf 100644
--- a/application/manual.php
+++ b/application/manual.php
@@ -10,7 +10,7 @@ session_start();
     <title>Dalimilova kronika</title>
     <!-- css -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="view/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
+    <link rel="stylesheet" href="view/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!-- jQuery library -->
@@ -28,7 +28,7 @@ session_start();
 
     <div class="row app-content">
         <div class="col-xs-12 col-sm-12 p-4 content d-flex">
-            <?php include "./view/manualContent.php" ?>
+            <?php include "./view/contents/manualContent.php" ?>
         </div>
     </div>
     <?php include "./view/footer.html" ?>
diff --git a/application/search.php b/application/search.php
index f512b29..12e92b4 100644
--- a/application/search.php
+++ b/application/search.php
@@ -7,7 +7,7 @@
 
     <!-- css -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="view/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
+    <link rel="stylesheet" href="view/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="./view/library/vanillaSelectBox/vanillaSelectBox.css">
 
@@ -16,9 +16,14 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
     <script src="./view/library/jQuery-Multi/src/jquery.multi-select.js"></script>
 
-    <!-- JavaScript -->
+    <!-- JavaScript library-->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
     <script src="./view/library/vanillaSelectBox/vanillaSelectBox.js"></script>
+
+    <!-- own JavaScript -->
+    <script src="./view/js-scripts/convertors.js"></script>
+    <script src="./view/js-scripts/filterControl.js"></script>
+    <script src="./view/js-scripts/paging.js"></script>
 </head>
 <body>
 <div class="container-fluid">
@@ -27,7 +32,7 @@
 
     <div class="row app-content">
         <div class="col-xs-12 col-sm-12 p-5 pb-4 content d-flex">
-            <?php include "./view/searchContent.php" ?>
+            <?php include "./view/contents/searchContent.php" ?>
         </div>
     </div>
     <?php include "./view/footer.html" ?>
diff --git a/application/users.php b/application/users.php
index 05e90d2..5dcf25f 100644
--- a/application/users.php
+++ b/application/users.php
@@ -9,7 +9,7 @@
 
     <!-- css -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
-    <link rel="stylesheet" href="view/style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
+    <link rel="stylesheet" href="view/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!-- jQuery library -->
@@ -26,7 +26,7 @@
 
     <div class="row app-content">
         <div class="col-xs-12 col-sm-12 p-4 content d-flex">
-            <?php include "./view/userContent.php" ?>
+            <?php include "./view/contents/userContent.php" ?>
         </div>
     </div>
     <?php include "./view/footer.html" ?>
diff --git a/application/view/Index.php b/application/view/Index.php
deleted file mode 100644
index ca04ea3..0000000
--- a/application/view/Index.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<!-- TESTOVACI INDEX-->
-<?
-include "../controller/TableController.php";
-include "../controller/UpdateController.php";
-?>
-<script>
-    function doSearch () {
-        // (A1) GET SEARCH TERM
-        var data = new FormData();
-        //data.append("manuscript", "0,3"); //příklad pro filtraci manuscriptů, asi se ještě uprav
-       /* data.append("page", "0");
-        data.append("items_per_page", "50");
-        data.append("lemma", "megaultranováLemma");
-        data.append("word", "novéWord2");
-        data.append("context", "novýContext");
-        data.append("description", "novádescription");
-        data.append("description2", "novádescription2");
-        data.append("description3", "novádescription3");
-        data.append("ending", "novéEnding");
-        data.append("finished", false);
-        data.append("namedentity",1);
-        data.append("position1", "1");
-        data.append("position2", "2");
-        data.append("positiondetail", "posdet");
-        data.append("prefix", "prefix");
-        data.append("suffix", "suffix");
-        data.append("id", 9);*/
-
-        data.append("id", 4);
-        data.append("wordform_id", 4);
-        //data.append("lemma_id", 3686);
-        //data.append("tag_id", 1219);
-        /*data.append("pos", 6);
-        data.append("manuscript", [1,2,3,4,5]);
-        data.append("wordform_id", 9);
-        data.append("tag", "A---------");*/
-        //data.append("finished", "false");
-        // data.append("tag_pos", "V");
-        // data.append("tag_verb_aspect", "P");
-        // data.append("tag_number", "S");
-        // data.append("word", "okáza");
-        var xhr = new XMLHttpRequest();
-        xhr.open("POST", "../controller/RemoveController.php");
-        /*xhr.onload = function(){
-            let results = document.getElementById("results"),
-                //if anything returned then do this
-                search = JSON.parse(this.response);
-            results.innerHTML = "";
-            console.log(search);
-        };*/
-        xhr.send(data);
-        return false;
-    }
-</script>
-
-<form onsubmit="return doSearch()">
-    <input type="submit" value="Search"/>
-</form>
-
-<div id="results"></div>
\ No newline at end of file
diff --git a/application/view/changesContent.php b/application/view/changesContent.php
deleted file mode 100644
index 5cf288d..0000000
--- a/application/view/changesContent.php
+++ /dev/null
@@ -1,70 +0,0 @@
-<?php
-if (isset($_SESSION['role']) && $_SESSION['role'] == "admin") {
-    echo "<script>
-        //what to do when page renders
-        window.onload = function() {
-            fetchChanges();
-        };
-    </script>
-
-    <div class=\"search-results my-4\">
-        <table class=\"table table-striped\">
-            <thead>
-            <tr>
-                <th scope=\"col\">Lemma</th>
-                <th scope=\"col\">Slovní tvar</th>
-                <th scope=\"col\">Návrh změny</th>
-                <th scope=\"col\"></th>
-            </tr>
-            </thead>
-            <tbody id=\"search-table\">
-                <script>
-                    let changes;
-                    function fetchChanges () {
-                        // (A1) GET SEARCH TERM
-                        const formData = new FormData();
-
-                        // (A2) AJAX - USE HTTP:// NOT FILE:/
-                        let xhr = new XMLHttpRequest();
-                        xhr.open(\"POST\", \"./controller/GetChangeRequests.php\");
-                        xhr.onload = function(){
-                            let search = this.response;
-                            let parsedJSON = JSON.parse(search);
-                            changes = parsedJSON;
-                            renderChanges(parsedJSON);
-                        };
-                        xhr.send(formData);
-                    }
-
-
-                    function renderChanges(changesList) {
-                        let result = \"\";
-                        if(changesList !== null){
-                            changesList.forEach((item,id) => {
-                                result +=\" <tr>\";
-                                result += \" <td>\" + item.lemma + \" </td> \";
-                                result += \" <td>\" + item.word + \" </td> \";
-                                result += \" <td>\" + item.message + \" <td>\";
-                                result += \" <td class='action-td'> \" +
-                                    \" <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 > \" +
-                                    \" </td>\";
-                                result += \" </tr> \";
-                            });
-                            document.getElementById(\"search-table\").innerHTML = result;                            
-                            document.getElementById(\"no-data-label\").style.display = \"none\";
-                        } else {
-                            document.getElementById(\"search-table\").innerHTML = result;   
-                            document.getElementById(\"no-data-label\").style.display = \"\";
-                        }
-                    }
-                </script>
-            </tbody>
-        </table>
-        
-        <h3 id=\"no-data-label\" class=\"mx-auto text-center font-italic\">Žádná data nebyla nalezena</h3>
-    </div>";
-} else {
-    echo "<h3 class=\"mx-auto text-center\">Pro navštívení stránky nemáte dostatečná oprávnění</h3>";
-}
-
-
diff --git a/application/view/contents/changesContent.php b/application/view/contents/changesContent.php
new file mode 100644
index 0000000..5cf288d
--- /dev/null
+++ b/application/view/contents/changesContent.php
@@ -0,0 +1,70 @@
+<?php
+if (isset($_SESSION['role']) && $_SESSION['role'] == "admin") {
+    echo "<script>
+        //what to do when page renders
+        window.onload = function() {
+            fetchChanges();
+        };
+    </script>
+
+    <div class=\"search-results my-4\">
+        <table class=\"table table-striped\">
+            <thead>
+            <tr>
+                <th scope=\"col\">Lemma</th>
+                <th scope=\"col\">Slovní tvar</th>
+                <th scope=\"col\">Návrh změny</th>
+                <th scope=\"col\"></th>
+            </tr>
+            </thead>
+            <tbody id=\"search-table\">
+                <script>
+                    let changes;
+                    function fetchChanges () {
+                        // (A1) GET SEARCH TERM
+                        const formData = new FormData();
+
+                        // (A2) AJAX - USE HTTP:// NOT FILE:/
+                        let xhr = new XMLHttpRequest();
+                        xhr.open(\"POST\", \"./controller/GetChangeRequests.php\");
+                        xhr.onload = function(){
+                            let search = this.response;
+                            let parsedJSON = JSON.parse(search);
+                            changes = parsedJSON;
+                            renderChanges(parsedJSON);
+                        };
+                        xhr.send(formData);
+                    }
+
+
+                    function renderChanges(changesList) {
+                        let result = \"\";
+                        if(changesList !== null){
+                            changesList.forEach((item,id) => {
+                                result +=\" <tr>\";
+                                result += \" <td>\" + item.lemma + \" </td> \";
+                                result += \" <td>\" + item.word + \" </td> \";
+                                result += \" <td>\" + item.message + \" <td>\";
+                                result += \" <td class='action-td'> \" +
+                                    \" <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 > \" +
+                                    \" </td>\";
+                                result += \" </tr> \";
+                            });
+                            document.getElementById(\"search-table\").innerHTML = result;                            
+                            document.getElementById(\"no-data-label\").style.display = \"none\";
+                        } else {
+                            document.getElementById(\"search-table\").innerHTML = result;   
+                            document.getElementById(\"no-data-label\").style.display = \"\";
+                        }
+                    }
+                </script>
+            </tbody>
+        </table>
+        
+        <h3 id=\"no-data-label\" class=\"mx-auto text-center font-italic\">Žádná data nebyla nalezena</h3>
+    </div>";
+} else {
+    echo "<h3 class=\"mx-auto text-center\">Pro navštívení stránky nemáte dostatečná oprávnění</h3>";
+}
+
+
diff --git a/application/view/contents/indexContent.html b/application/view/contents/indexContent.html
new file mode 100644
index 0000000..c1b98e0
--- /dev/null
+++ b/application/view/contents/indexContent.html
@@ -0,0 +1,8 @@
+<p>
+    Dvě existující, už vytvořené samostatné databáze slov a jejich tvarů ze všech pramenů Dalimilovy kroniky (tj. staročeské památky z období 14., 15. století).
+    Kronika vypráví ve staročeštině o dějinách naší země, je to první česky psaná kronika.
+    Zkoumání jejího jazyka dovoluje popsat hlavní vývojové tendence češtiny v tzv. staročeském období (14., 15. století)
+    a pochopit stav češtiny i její vývoj v současnosti. Databáze byly vytvořeny jako podpora pro zpracování tiskové podoby indexu
+    všech slov a tvarů doložených v dochovaných pramenech. Index (celkem 3 díly) vyšel postupně v letech 2012–2020 jako výsledek
+    řešení tří vědeckých projektů v rámci Fakulty pedagogické.
+</p>
\ No newline at end of file
diff --git a/application/view/contents/manualContent.php b/application/view/contents/manualContent.php
new file mode 100644
index 0000000..c81a141
--- /dev/null
+++ b/application/view/contents/manualContent.php
@@ -0,0 +1,162 @@
+<h1>Vyhledávání</h1>
+<h2>Základní možnosti</h2>
+<p>Vyhledávání je možné dle libovolných z níže uvedených parametrů. Je možné vybrat jeden nebo více parametrů a vyhledávání zobrazí poze výsledky, jež splňují všechny podmínky. Při vybrání specifických parametrů se zobrazí rozšiřující možnosti pro bližší upřesnění požadavků. U parametrů, které zobrazí tyto rozšiřující možnosti, bude tato skutečnost zdůrazněna níže v této kapitole.</p>
+<h3>Lemma</h3>
+<p>Toto vyhledávací políčko umožní vyhledávání podle sloupce lemma. Je možné zadat samotné počáteční písmeno, počáteční část slova nebo slovo celé. V případě, že výrazem, který bude zadán, je očekáván právě jeden znak, je možné použít operátor <b>_</b>. Pokud má hledaný výzar předcházet libovolný počet znaků, je možné použít operátor <b>%</b>.</p>
+<h3>Slovní tvar</h3>
+<p>Jedná se opět o otevřené políčko pro zadávání, ovšem s velkým rozdílem oproti vyhledávání lemmy. Toto políčko hledá ve sloupci Slovní tvar pouze přesné shody.</p>
+<h3>Rukopisný pramen</h3>
+<p>Toto kritérium je zadané pomocí rozbalovacího seznamu. V tomto seznamu jsou vyzobrazeny všechny prameny, jež databáze obsahuje. Je možné vybrat libovolné množství pramenů současně, přičemž při nevyplnění tohoto políčka systém automaticky bere v potaz všechny prameny. Po výběru pramenů systém najde všechny záznamy, které se nachází aspoň v jednom z vybraných pramenů. </p>
+<h3>Pozice</h3>
+<p> Toto číselné kritérium určuje pozici záznamu v dokumentu a lze zadat následujícími třemi způsoby. První způsob je zadat pouze číselnou hodnotu. V tomto případě se systém pokusí najít všechny záznamy, jejichž číselná hodnota před lomítkem je stejná. V opačném případě je možné zadat číselnou hodnotu předcházenou znakem <b>/</b>. Výsledek této operace bude vypsání všech záznamů, jež  mají zadanou hodnotu na druhé pozici, za lomítkem. Poslední způsob je zadání celé pozice, v jehož případě systém vyhledá pouze danou pozici. Tímto způsobem lze také zadat element na třetí pozici.</p>
+<h3>Poznámka 2</h3>
+<p>Toto kritérium porovná zadaný text s obsahem sloupce Poznámka 2. Pokud je zadán pouze text nebo část textu, systém zaháji hledání této části od začátku slova ve sloupci. Pokud je požadováno, aby text předcházel právě jeden znak lze použít operátor <b>_</b>. V opačném případě kdy vyžadováno, aby text předcházelo nula až neomezeně znaků, lze použít operátor <b>%</b>.</p>
+<h3>Slovní druh</h3>
+<p>Slovní druh lze vybrat z rozbalovacího seznamu. Tato volba nejen ovlivní výsledky vyhledávání, ale také <b>umožňí volbu pokročilých možností</b>. Tyty možnosti jsou popsány v tabulce v kapitole <b>Pokročilé možnosti</b>.</p>
+
+<h2>Pokročilé možnosti</h2>
+<h3>Slovní druh</h3>
+<table>
+<tr>
+	<td>Slovní druh</td>
+	<td>Pád</td>
+	<td>Číslo</td>
+	<td>Rod</td>
+	<td>Tvar</td>
+	<td>Stupeň</td>
+	<td>Druh</td>
+	<td>Osoba</td>
+	<td>Způsob</td>
+	<td>Čas</td>
+	<td>Slovesný rod</td>
+	<td>Vid</td>
+	<td>Neurčitý Slovesný Tvar</td>
+	<td>Typ</td>
+</tr>
+<tr>
+	<td>Substantivum </td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+</tr>
+<tr>
+	<td>Adjektivum</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+</tr>
+<tr>
+	<td>Pronomen</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+</tr>
+	<td>Numeralie</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+<tr>
+	<td>Verbum</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ano</td>
+	<td>Ne</td>
+</tr>
+<tr>
+	<td>Adverbium</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+</tr>
+<tr>
+	<td>Prepozice</td>
+	<td>Ano</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+</tr>
+<tr>
+	<td>Konjunkce</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ne</td>
+	<td>Ano</td>
+</tr>
+</table>
\ No newline at end of file
diff --git a/application/view/contents/searchContent.php b/application/view/contents/searchContent.php
new file mode 100644
index 0000000..aaaa518
--- /dev/null
+++ b/application/view/contents/searchContent.php
@@ -0,0 +1,373 @@
+<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">Poznámka 2</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>
+
+            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
+            <button class="btn" data-toggle="modal" data-target="#edit-modal" data-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">Poznámka 2</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>" + 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>
\ No newline at end of file
diff --git a/application/view/contents/userContent.php b/application/view/contents/userContent.php
new file mode 100644
index 0000000..e785bab
--- /dev/null
+++ b/application/view/contents/userContent.php
@@ -0,0 +1,61 @@
+<?php
+if (isset($_SESSION['role']) && $_SESSION['role'] == "admin") {
+    echo "<script>
+        //what to do when page renders
+        window.onload = function() {
+            fetchUsers();
+        };
+    </script>
+
+    <div class=\"search-results my-4\">
+        <table class=\"table table-striped\">
+            <thead>
+            <tr>
+                <th scope=\"col\">Uživatel</th>
+                <th scope=\"col\">Práva</th>
+                <th scope=\"col\"><button class=\"btn ml-1\" title=\"Přidat\"  data-toggle=\"modal\" data-target=\"#edit-modal\"  data-title=\"Nový uživatel\"><i class=\"fa fa-plus\"></i></button></th>
+            </tr>
+            </thead>
+            <tbody id=\"search-table\">
+                <script>
+                    let users;
+                    function fetchUsers () {
+                        // (A1) GET SEARCH TERM
+                        const formData = new FormData();
+
+                        // (A2) AJAX - USE HTTP:// NOT FILE:/
+                        let xhr = new XMLHttpRequest();
+                        xhr.open(\"POST\", \"./controller/UsersListController.php\");
+                        xhr.onload = function(){
+                            let search = this.response;
+                            let parsedJSON = JSON.parse(search);
+                            users = parsedJSON;
+                            renderUsers(parsedJSON);
+                        };
+                        xhr.send(formData);
+                    }
+
+
+                    function renderUsers(users) {
+                        let result = \"\";
+                        users.forEach((item,id) => {
+                            result += \"<tr>\";
+                            result += \"<td>\" + item.username + \"</td>\";
+                            result += \"<td>\" + item.role + \"</td>\";
+                            (item.role !== \"admin\") ? (result += \"<td class='action-td'>\" +
+                                \"<button class='btn ml-1' title='Upravit'  data-toggle='modal' data-target='#edit-modal' data-pseudo-id='\" + id + \"' data-title='Upravit uživatele'><i class='fa fa-pencil'></i></button>\" +
+                                \"<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>\" +
+                                \"</td>\") : result += \"<td class='action-td'/>\";
+                            result += \"</tr>\";
+                        });
+                        document.getElementById(\"search-table\").innerHTML = result;
+                    }
+                </script>
+            </tbody>
+        </table>
+    </div>";
+} else {
+    echo "<h3 class=\"mx-auto text-center\">Pro navštívení stránky nemáte dostatečná oprávnění</h3>";
+}
+
+
diff --git a/application/view/indexContent.html b/application/view/indexContent.html
deleted file mode 100644
index c1b98e0..0000000
--- a/application/view/indexContent.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<p>
-    Dvě existující, už vytvořené samostatné databáze slov a jejich tvarů ze všech pramenů Dalimilovy kroniky (tj. staročeské památky z období 14., 15. století).
-    Kronika vypráví ve staročeštině o dějinách naší země, je to první česky psaná kronika.
-    Zkoumání jejího jazyka dovoluje popsat hlavní vývojové tendence češtiny v tzv. staročeském období (14., 15. století)
-    a pochopit stav češtiny i její vývoj v současnosti. Databáze byly vytvořeny jako podpora pro zpracování tiskové podoby indexu
-    všech slov a tvarů doložených v dochovaných pramenech. Index (celkem 3 díly) vyšel postupně v letech 2012–2020 jako výsledek
-    řešení tří vědeckých projektů v rámci Fakulty pedagogické.
-</p>
\ No newline at end of file
diff --git a/application/view/js-scripts/convertors.js b/application/view/js-scripts/convertors.js
new file mode 100644
index 0000000..21ffeba
--- /dev/null
+++ b/application/view/js-scripts/convertors.js
@@ -0,0 +1,176 @@
+
+const codeToWordclass = {
+    "N": "substantivum",
+    "A": "adjektivum",
+    "P": "pronomen",
+    "C": "numeralie",
+    "V": "verbum",
+    "D": "adverbium",
+    "R": "prepozice",
+    "J": "konjunkce",
+    "I": "interjekce",
+    "T": "partikule"
+};
+
+const wordclassToNum = {
+    "N": 0,
+    "A": 1,
+    "P": 2,
+    "C": 3,
+    "V": 4,
+    "D": 5,
+    "R": 6,
+    "J": 7,
+    "I": 8,
+    "T": 9
+};
+
+const codeToManuscript = {
+    "0":  "rukopis Vídeňský",
+    "1":  "zlomky Hanušovy",
+    "2":  "zlomky Hradecké",
+    "3":  "rukopis Cambridžský",
+    "4":  "rukopis Františkánský",
+    "5":  "zlomek Olomoucký",
+    "6":  "fragment Strahovský",
+    "7":  "zlomky Klementinsko-Křižovnické",
+    "8":  "zlomky Mnichovské",
+    "9":  "rukopis Lobkovický",
+    "10": "rukopis Pelclův",
+    "11": "rukopis Cerronský",
+    "12": "rukopis Fürstenberský",
+    "13": "rukopis Zebererův",
+    "14": "vydání Pavla Ješína z Bezdězi, Praha 1620",
+    "15": "básně připsané při Pulkavově kronice v rukopisu Litoměřickém",
+};
+
+const codeToManuscriptShort = {
+    "0":  "V",
+    "1":  "H",
+    "2":  "Hr",
+    "3":  "C",
+    "4":  "F",
+    "5":  "O",
+    "6":  "S",
+    "7":  "K",
+    "8":  "M",
+    "9":  "L",
+    "10": "P",
+    "11": "Cr",
+    "12": "Fs",
+    "13": "Z",
+    "14": "Js",
+    "15": "Pl",
+};
+
+const codeToCase = {
+    "1": "nominativ",
+    "2": "genitiv",
+    "3": "dativ",
+    "4": "akuzativ",
+    "5": "vokativ",
+    "6": "lokál",
+    "7": "instrumentál"
+};
+
+const codeToCountability = {
+    "S": "singulár",
+    "P": "plurál",
+    "D": "duál"
+};
+
+const codeToGender = {
+    "M": "maskulinum",
+    "F": "femininum",
+    "N": "neutrum"
+};
+
+const codeToGrade = {
+    "1": "pozitiv",
+    "2": "komparativ",
+    "3": "superlativ"
+};
+
+const codeToKType = {
+    "V": "větná",
+    "C": "členská",
+    "N": "navazovací",
+    "P": "spojení s přechodníkem"
+};
+
+const codeToShape = {
+    "C": "složený",
+    "N": "jmenný"
+};
+
+const codeToVid = {
+    "P": "perfektivum",
+    "I": "imperfektivum",
+};
+
+const codeToVType = {
+    "A": "aktivum",
+    "P": "pasivum",
+};
+
+const codeToTime= {
+    "P": "prézens",
+    "A": "aorist",
+    "R": "préteritum",
+    "I": "imperfektum",
+    "H": "plusquamperfektum",
+    "F": "futurum"
+};
+
+const codeToType = {
+    "P": "posesivum",
+    "S": "personale",
+    "D": "demonstrativum",
+    "Q": "interogativum",
+    "J": "relativum",
+    "Z": "indefinitum",
+    "L": "limitativum",
+    "W": "negativum",
+};
+
+const codeToMood = {
+    "d": "indikativ",
+    "i": "imperativ",
+    "c": "kondicionál"
+};
+
+const codeToIrregular = {
+    "f": "infinitiv",
+    "S": "supinum",
+    "e": "přech. přítomný",
+    "m": "přech. minulý",
+    "A": "part. perf. akt.",
+    "P": "part. perf. akt."
+};
+
+function convertDate(date) {
+    let newDate = "";
+    date = date.replace(" 00:00:00", "");
+    let splitDate = date.split("-");
+
+    newDate += splitDate[2] + ". " + splitDate[1] + ". " + splitDate[0];
+    return newDate;
+}
+
+function renderManuscript(manuscripts, shorten=true) {
+    let output = "";
+    for(let i = 0; i < manuscripts.length; i++){
+        if(shorten)
+            output += ("<span title=\""+ codeToManuscript[manuscripts[i]] +"\">" + codeToManuscriptShort[manuscripts[i]] + "</span>");
+        else
+            output += codeToManuscript[manuscripts[i]];
+
+        if(i < manuscripts.length - 1){
+            if(shorten)
+                output += ", ";
+            else
+                output += "; ";
+        }
+    }
+    return output;
+}
\ No newline at end of file
diff --git a/application/view/js-scripts/filterControl.js b/application/view/js-scripts/filterControl.js
new file mode 100644
index 0000000..a3ad45c
--- /dev/null
+++ b/application/view/js-scripts/filterControl.js
@@ -0,0 +1,301 @@
+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 = "";
+    }
+}
+
+function callFilter() {
+    pageIndex = 0;
+    fetchData(true)
+}
+
+function filterData (formData) {
+    //regular
+    formData.append("lemma", document.getElementById("lemma").value);
+    formData.append("word", document.getElementById("wordshape").value);
+    formData.append("description2", document.getElementById("description2").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 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-control-div");
+            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 = "";
+    }
+}
\ No newline at end of file
diff --git a/application/view/js-scripts/paging.js b/application/view/js-scripts/paging.js
new file mode 100644
index 0000000..272c1de
--- /dev/null
+++ b/application/view/js-scripts/paging.js
@@ -0,0 +1,57 @@
+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;
+    }
+
+}
\ No newline at end of file
diff --git a/application/view/manualContent.php b/application/view/manualContent.php
deleted file mode 100644
index c81a141..0000000
--- a/application/view/manualContent.php
+++ /dev/null
@@ -1,162 +0,0 @@
-<h1>Vyhledávání</h1>
-<h2>Základní možnosti</h2>
-<p>Vyhledávání je možné dle libovolných z níže uvedených parametrů. Je možné vybrat jeden nebo více parametrů a vyhledávání zobrazí poze výsledky, jež splňují všechny podmínky. Při vybrání specifických parametrů se zobrazí rozšiřující možnosti pro bližší upřesnění požadavků. U parametrů, které zobrazí tyto rozšiřující možnosti, bude tato skutečnost zdůrazněna níže v této kapitole.</p>
-<h3>Lemma</h3>
-<p>Toto vyhledávací políčko umožní vyhledávání podle sloupce lemma. Je možné zadat samotné počáteční písmeno, počáteční část slova nebo slovo celé. V případě, že výrazem, který bude zadán, je očekáván právě jeden znak, je možné použít operátor <b>_</b>. Pokud má hledaný výzar předcházet libovolný počet znaků, je možné použít operátor <b>%</b>.</p>
-<h3>Slovní tvar</h3>
-<p>Jedná se opět o otevřené políčko pro zadávání, ovšem s velkým rozdílem oproti vyhledávání lemmy. Toto políčko hledá ve sloupci Slovní tvar pouze přesné shody.</p>
-<h3>Rukopisný pramen</h3>
-<p>Toto kritérium je zadané pomocí rozbalovacího seznamu. V tomto seznamu jsou vyzobrazeny všechny prameny, jež databáze obsahuje. Je možné vybrat libovolné množství pramenů současně, přičemž při nevyplnění tohoto políčka systém automaticky bere v potaz všechny prameny. Po výběru pramenů systém najde všechny záznamy, které se nachází aspoň v jednom z vybraných pramenů. </p>
-<h3>Pozice</h3>
-<p> Toto číselné kritérium určuje pozici záznamu v dokumentu a lze zadat následujícími třemi způsoby. První způsob je zadat pouze číselnou hodnotu. V tomto případě se systém pokusí najít všechny záznamy, jejichž číselná hodnota před lomítkem je stejná. V opačném případě je možné zadat číselnou hodnotu předcházenou znakem <b>/</b>. Výsledek této operace bude vypsání všech záznamů, jež  mají zadanou hodnotu na druhé pozici, za lomítkem. Poslední způsob je zadání celé pozice, v jehož případě systém vyhledá pouze danou pozici. Tímto způsobem lze také zadat element na třetí pozici.</p>
-<h3>Poznámka 2</h3>
-<p>Toto kritérium porovná zadaný text s obsahem sloupce Poznámka 2. Pokud je zadán pouze text nebo část textu, systém zaháji hledání této části od začátku slova ve sloupci. Pokud je požadováno, aby text předcházel právě jeden znak lze použít operátor <b>_</b>. V opačném případě kdy vyžadováno, aby text předcházelo nula až neomezeně znaků, lze použít operátor <b>%</b>.</p>
-<h3>Slovní druh</h3>
-<p>Slovní druh lze vybrat z rozbalovacího seznamu. Tato volba nejen ovlivní výsledky vyhledávání, ale také <b>umožňí volbu pokročilých možností</b>. Tyty možnosti jsou popsány v tabulce v kapitole <b>Pokročilé možnosti</b>.</p>
-
-<h2>Pokročilé možnosti</h2>
-<h3>Slovní druh</h3>
-<table>
-<tr>
-	<td>Slovní druh</td>
-	<td>Pád</td>
-	<td>Číslo</td>
-	<td>Rod</td>
-	<td>Tvar</td>
-	<td>Stupeň</td>
-	<td>Druh</td>
-	<td>Osoba</td>
-	<td>Způsob</td>
-	<td>Čas</td>
-	<td>Slovesný rod</td>
-	<td>Vid</td>
-	<td>Neurčitý Slovesný Tvar</td>
-	<td>Typ</td>
-</tr>
-<tr>
-	<td>Substantivum </td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-</tr>
-<tr>
-	<td>Adjektivum</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-</tr>
-<tr>
-	<td>Pronomen</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-</tr>
-	<td>Numeralie</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-<tr>
-	<td>Verbum</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ano</td>
-	<td>Ne</td>
-</tr>
-<tr>
-	<td>Adverbium</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-</tr>
-<tr>
-	<td>Prepozice</td>
-	<td>Ano</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-</tr>
-<tr>
-	<td>Konjunkce</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ne</td>
-	<td>Ano</td>
-</tr>
-</table>
\ No newline at end of file
diff --git a/application/view/modals/detailModal.html b/application/view/modals/detailModal.html
index 43473dd..50cb082 100644
--- a/application/view/modals/detailModal.html
+++ b/application/view/modals/detailModal.html
@@ -327,163 +327,4 @@
             modal.find('#vid-wrapper').show();
         modal.find('#vid').text(codeToVid[morphem.charAt(11)]);
     }
-
-    //CONVERTORS
-    function convertDate(date) {
-        let newDate = "";
-        date = date.replace(" 00:00:00", "");
-        let splitDate = date.split("-");
-
-        newDate += splitDate[2] + ". " + splitDate[1] + ". " + splitDate[0];
-        return newDate;
-    }
-
-    const codeToWordclass = {
-        "N": "substantivum",
-        "A": "adjektivum",
-        "P": "pronomen",
-        "C": "numeralie",
-        "V": "verbum",
-        "D": "adverbium",
-        "R": "prepozice",
-        "J": "konjunkce",
-        "I": "interjekce",
-        "T": "partikule"
-    };
-
-    const wordclassToNum = {
-        "N": 0,
-        "A": 1,
-        "P": 2,
-        "C": 3,
-        "V": 4,
-        "D": 5,
-        "R": 6,
-        "J": 7,
-        "I": 8,
-        "T": 9
-    };
-
-    const codeToManuscript = {
-        "0":  "rukopis Vídeňský",
-        "1":  "zlomky Hanušovy",
-        "2":  "zlomky Hradecké",
-        "3":  "rukopis Cambridžský",
-        "4":  "rukopis Františkánský",
-        "5":  "zlomek Olomoucký",
-        "6":  "fragment Strahovský",
-        "7":  "zlomky Klementinsko-Křižovnické",
-        "8":  "zlomky Mnichovské",
-        "9":  "rukopis Lobkovický",
-        "10": "rukopis Pelclův",
-        "11": "rukopis Cerronský",
-        "12": "rukopis Fürstenberský",
-        "13": "rukopis Zebererův",
-        "14": "vydání Pavla Ješína z Bezdězi, Praha 1620",
-        "15": "básně připsané při Pulkavově kronice v rukopisu Litoměřickém",
-    };
-
-    const codeToManuscriptShort = {
-        "0":  "V",
-        "1":  "H",
-        "2":  "Hr",
-        "3":  "C",
-        "4":  "F",
-        "5":  "O",
-        "6":  "S",
-        "7":  "K",
-        "8":  "M",
-        "9":  "L",
-        "10": "P",
-        "11": "Cr",
-        "12": "Fs",
-        "13": "Z",
-        "14": "Js",
-        "15": "Pl",
-    };
-
-    const codeToCase = {
-        "1": "nominativ",
-        "2": "genitiv",
-        "3": "dativ",
-        "4": "akuzativ",
-        "5": "vokativ",
-        "6": "lokál",
-        "7": "instrumentál"
-    };
-
-    const codeToCountability = {
-        "S": "singulár",
-        "P": "plurál",
-        "D": "duál"
-    };
-
-    const codeToGender = {
-            "M": "maskulinum",
-            "F": "femininum",
-            "N": "neutrum"
-    };
-
-    const codeToGrade = {
-        "1": "pozitiv",
-        "2": "komparativ",
-        "3": "superlativ"
-    };
-
-    const codeToKType = {
-        "V": "větná",
-        "C": "členská",
-        "N": "navazovací",
-        "P": "spojení s přechodníkem"
-    };
-
-    const codeToShape = {
-        "C": "složený",
-        "N": "jmenný"
-    };
-
-    const codeToVid = {
-        "P": "perfektivum",
-        "I": "imperfektivum",
-    };
-
-    const codeToVType = {
-        "A": "aktivum",
-        "P": "pasivum",
-    };
-
-    const codeToTime= {
-        "P": "prézens",
-        "A": "aorist",
-        "R": "préteritum",
-        "I": "imperfektum",
-        "H": "plusquamperfektum",
-        "F": "futurum"
-    };
-
-    const codeToType = {
-        "P": "posesivum",
-        "S": "personale",
-        "D": "demonstrativum",
-        "Q": "interogativum",
-        "J": "relativum",
-        "Z": "indefinitum",
-        "L": "limitativum",
-        "W": "negativum",
-    };
-
-    const codeToMood = {
-        "d": "indikativ",
-        "i": "imperativ",
-        "c": "kondicionál"
-    };
-
-    const codeToIrregular = {
-        "f": "infinitiv",
-        "S": "supinum",
-        "e": "přech. přítomný",
-        "m": "přech. minulý",
-        "A": "part. perf. akt.",
-        "P": "part. perf. akt."
-    };
 </script>
\ No newline at end of file
diff --git a/application/view/modals/editModal.html b/application/view/modals/editModal.html
index 83bc3a1..9041e97 100644
--- a/application/view/modals/editModal.html
+++ b/application/view/modals/editModal.html
@@ -166,7 +166,7 @@
                             <label for="mood">Způsob:</label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
-                            <select class="min-wdth" id="mood" onchange="moodChange()">
+                            <select class="min-wdth" id="mood">
                                 <option selected="selected" value = "">nevybráno</option>
                                 <option value = "d">indikativ</option>
                                 <option value = "i">imperativ</option>
@@ -219,7 +219,7 @@
                             <label for="irregular">Neurčitý slovesný tvar:</label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
-                            <select class="min-wdth" id="irregular" onchange="irregularChange()">
+                            <select class="min-wdth" id="irregular">
                                 <option selected="selected" value = "">nevybráno</option>
                                 <option value = "f">infinitiv</option>
                                 <option value = "S">supinum</option>
diff --git a/application/view/modals/invalidLoginModal.html b/application/view/modals/invalidLoginModal.html
index 66f8879..3ce8acb 100644
--- a/application/view/modals/invalidLoginModal.html
+++ b/application/view/modals/invalidLoginModal.html
@@ -2,8 +2,8 @@
 	<div class="modal-dialog modal-dialog-centered" role="document">
 		<div class="modal-content">
 			 <div class="modal-header">
-					<h4 class="modal-title">Neplatné přihlašovací údaje</h4>
-					<button type="button" class="close" data-dismiss="modal">&times;</button>
+				 <h4 class="modal-title">Neplatné přihlašovací údaje</h4>
+				 <button type="button" class="close" data-dismiss="modal">&times;</button>
 			 </div>
 			 <div class="modal-body">
 				<div class="container">
diff --git a/application/view/searchContent.php b/application/view/searchContent.php
deleted file mode 100644
index 9fc1b91..0000000
--- a/application/view/searchContent.php
+++ /dev/null
@@ -1,758 +0,0 @@
-<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">Poznámka 2</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>
-
-        <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-control-div");
-                        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-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>
-
-            <?php if(isset($_SESSION['loggedIn']) && $_SESSION['loggedIn'] == true) {?>
-            <button class="btn" data-toggle="modal" data-target="#edit-modal" data-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">Poznámka 2</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);
-                    formData.append("description2", document.getElementById("description2").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;
-                        //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 renderManuscript(manuscripts, shorten=true) {
-                    let output = "";
-                    for(let i = 0; i < manuscripts.length; i++){
-                        if(shorten)
-                            output += ("<span title=\""+ codeToManuscript[manuscripts[i]] +"\">" + codeToManuscriptShort[manuscripts[i]] + "</span>");
-                        else
-                            output += codeToManuscript[manuscripts[i]];
-
-                        if(i < manuscripts.length - 1){
-                            if(shorten)
-                                output += ", ";
-                            else
-                                output += "; ";
-                        }
-                    }
-                    return output;
-                }
-
-                function publishItem(id, index){
-                    console.log(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>" + 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>" + //TODO ADMIN change , regular send report
-                            "<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;
-                }
-            </script>
-        </tbody>
-    </table>
-
-    <h3 id="no-data-label" class="mx-auto text-center font-italic">Žádná data nebyla nalezena</h3>
-
-    <script>
-        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
-        }
-
-        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>
-
-
diff --git a/application/view/userContent.php b/application/view/userContent.php
deleted file mode 100644
index e785bab..0000000
--- a/application/view/userContent.php
+++ /dev/null
@@ -1,61 +0,0 @@
-<?php
-if (isset($_SESSION['role']) && $_SESSION['role'] == "admin") {
-    echo "<script>
-        //what to do when page renders
-        window.onload = function() {
-            fetchUsers();
-        };
-    </script>
-
-    <div class=\"search-results my-4\">
-        <table class=\"table table-striped\">
-            <thead>
-            <tr>
-                <th scope=\"col\">Uživatel</th>
-                <th scope=\"col\">Práva</th>
-                <th scope=\"col\"><button class=\"btn ml-1\" title=\"Přidat\"  data-toggle=\"modal\" data-target=\"#edit-modal\"  data-title=\"Nový uživatel\"><i class=\"fa fa-plus\"></i></button></th>
-            </tr>
-            </thead>
-            <tbody id=\"search-table\">
-                <script>
-                    let users;
-                    function fetchUsers () {
-                        // (A1) GET SEARCH TERM
-                        const formData = new FormData();
-
-                        // (A2) AJAX - USE HTTP:// NOT FILE:/
-                        let xhr = new XMLHttpRequest();
-                        xhr.open(\"POST\", \"./controller/UsersListController.php\");
-                        xhr.onload = function(){
-                            let search = this.response;
-                            let parsedJSON = JSON.parse(search);
-                            users = parsedJSON;
-                            renderUsers(parsedJSON);
-                        };
-                        xhr.send(formData);
-                    }
-
-
-                    function renderUsers(users) {
-                        let result = \"\";
-                        users.forEach((item,id) => {
-                            result += \"<tr>\";
-                            result += \"<td>\" + item.username + \"</td>\";
-                            result += \"<td>\" + item.role + \"</td>\";
-                            (item.role !== \"admin\") ? (result += \"<td class='action-td'>\" +
-                                \"<button class='btn ml-1' title='Upravit'  data-toggle='modal' data-target='#edit-modal' data-pseudo-id='\" + id + \"' data-title='Upravit uživatele'><i class='fa fa-pencil'></i></button>\" +
-                                \"<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>\" +
-                                \"</td>\") : result += \"<td class='action-td'/>\";
-                            result += \"</tr>\";
-                        });
-                        document.getElementById(\"search-table\").innerHTML = result;
-                    }
-                </script>
-            </tbody>
-        </table>
-    </div>";
-} else {
-    echo "<h3 class=\"mx-auto text-center\">Pro navštívení stránky nemáte dostatečná oprávnění</h3>";
-}
-
-
