✨ Implementing working filters (almost)

ProjetProgWeb/api.php

@@ -2,15 +2,16 @@
 
 require_once("class/dump.php");
 
-if (!isset($_GET['q']) || !isset($_GET['author'])) {
+if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option'])) {
     print_r(json_encode(array("status" => 400, "message" => "Missing query type or attributes.")));
     exit();
 }
 
-$author_name = filter_var($_GET['author'], FILTER_SANITIZE_ADD_SLASHES);
 $q = $_GET['q'];
+$search = filter_var($_GET['search'], FILTER_SANITIZE_ADD_SLASHES);
+$option = $_GET['option'];
 
-if (strlen($author_name) < 3) {
+if (strlen($search) < 3) {
     print_r(json_encode(array(
         "status" => 400,
         "message" => "La recherche doit comporter un minimum de 3 caractères."
@@ -19,15 +20,15 @@ if (strlen($author_name) < 3) {
 }
 
 $json_object = match ($q) {
-    "theses" => dump::getTheseByAuthor($author_name),
+    "theses" => dump::getTheses($search, $option),
-    "authors" => dump::getAuthorsByAuthor($author_name),
+    "suggestion" => dump::getSuggestions($search, $option),
-    "authorsCount" => dump::getAuthorsCountByAuthor($author_name),
     default => NULL,
 };
 
 $json = json_encode(array(
     "status" => 200,
-    "message" => "Success", "data" => $json_object
+    "message" => "Success",
+    "data" => $json_object,
 ));
 
 echo $json;

ProjetProgWeb/app.js

@@ -23,6 +23,7 @@ let pagesNumbersContainer = document.querySelector('.page-nav')
 let pagesNumbers = document.querySelector('.page-nav div')
 let resultsDiv = document.querySelector('#results')
 let resultsCount = document.querySelector('#results-count')
+let filters = document.querySelectorAll('.filters p')
 
 function sanitize(chain) {
     return chain.replace(/[^a-zA-Z0-9\- ]/g,'')
@@ -54,18 +55,19 @@ function emptyResults(withCount = false) {
         resultsCount.innerHTML = ""
 }
 
-let authorName = "";
+let searchString = "";
 let lastRequest = null
+let queryOption = null
 
-function apiRequestThese(author) {
+function apiRequestThese(search) {
     hideSuggestions()
     if (lastRequest === null || (new Date().getTime() - lastRequest) > 1000) {
         lastRequest = new Date().getTime()
         emptyResults(true)
         pagesNumbers.innerHTML = ""
         loader.style.display = "block"
-        authorName = sanitize(author)
+        searchString = sanitize(search)
-        fetch(`api.php?q=theses&author=${author}`)
+        fetch(`api.php?q=theses&search=${search}&option=${queryOption}`)
             .then(response => response.json())
             .then(data => displayResults(data))
     } else {
@@ -139,7 +141,7 @@ function displayResults(results) {
 
             let qAuthor = elem[0]
             let author = document.createElement('h3')
-            let pre_replacement = new RegExp( authorName, 'gi').exec(qAuthor)
+            let pre_replacement = new RegExp(searchString, 'gi').exec(qAuthor)
             author.innerHTML = qAuthor.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
 
             let qTitle = elem[2]
@@ -168,14 +170,14 @@ function displayResults(results) {
             elem.forEach(e => {
                 if (i > 3 && i !== 14) {
                     let child = document.createElement('p')
-                    let pre_replacement = new RegExp(authorName, 'gi').exec(e)
+                    let pre_replacement = new RegExp(searchString, 'gi').exec(e)
                     child.innerHTML = e.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
                     content.appendChild(child)
                 } i += 1
             })
             count += 1
 
-            header.addEventListener('click', (e) => {
+            header.addEventListener('click', () => {
                 focusResults(result)
             })
 
@@ -185,7 +187,7 @@ function displayResults(results) {
         })
 
         let nb = document.createElement("p")
-        nb.innerHTML = `Nombre de résultats pour "${authorName}": 
+        nb.innerHTML = `Nombre de résultats pour "${searchString}": 
             ${new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(count)}.`
         resultsCount.appendChild(nb)
 
@@ -216,6 +218,7 @@ function displayResults(results) {
 
 let currentPage = 1
 
+// TODO URGENCE ABSOLUE Charger les résultats de 10 à 10 pour de vrai depuis la requête SQL elle-même (bon courage)
 function browseResults(wantedPage) {
     if ((wantedPage > 0 && wantedPage < nbPages + 1)) {
         emptyResults()
@@ -239,7 +242,7 @@ function realTimeDisplay() {
     if (search.length > 3 && (search !== lastSearch && (new Date().getTime() - lastSuggestion) > 500)) {
         lastSearch = search
         lastSuggestion = new Date().getTime()
-        fetch(`api.php?q=authors&author=${search}`)
+        fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}`)
             .then(response => response.json())
             .then(results => {
                 suggestions.innerHTML = ""
@@ -282,6 +285,20 @@ function switchNavTitle(q) {
     }
 }
 
+function updateFilter(f) {
+    if (f.includes('f-')) {
+        queryOption = f.substring(2)
+    } else {
+        queryOption = f
+    }
+
+    filters.forEach(elem => {
+        elem.style.boxShadow = 'none'
+    })
+
+    document.querySelector('#f-' + queryOption).style.boxShadow = 'inset rgba(0, 0, 0, 0.40) 0 0 5px'
+}
+
 document.addEventListener('click', e => {
     if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
 
@@ -295,24 +312,32 @@ document.addEventListener('click', e => {
                 switchHam(true)
         }
 
-        if (e.target === errorButton) {
+        if (e.target === errorButton || e.target === errorButton.firstElementChild) {
             error.classList.replace('fade-in', 'fade-out')
         }
 
         let toggleSwitch = null
+        let toggleSwitchParent = null
         if (e.target.classList.contains('slider')) {
             toggleSwitch = e.target
+            toggleSwitchParent = e.target.parentNode
         } else if (e.target.classList.contains('toggle-switch')) {
             toggleSwitch = e.target.firstElementChild
+            toggleSwitchParent = e.target
         }
         if (toggleSwitch !== null) {
             if (toggleSwitch.classList.contains('untoggle')) {
+                toggleSwitchParent.style.backgroundColor = '#FFF'
                 toggleSwitch.classList.replace('untoggle', 'toggle')
             } else {
+                toggleSwitchParent.style.backgroundColor = '#ECECEC'
                 toggleSwitch.classList.replace('toggle', 'untoggle')
             }
         }
 
+        if (e.target.id.toString().includes('f-')) {
+            updateFilter(e.target.id)
+        }
     }
 })
 
@@ -320,14 +345,14 @@ searchBar.addEventListener('focus', () => {
     switchNavTitle(false)
 })
 
-// navbarForm.addEventListener('submit', e => {
+navbarForm.addEventListener('submit', () => {
-//     e.preventDefault()
+    navbarForm.querySelector('input[name="option"]').value = queryOption
-//     let data = new FormData(navbarForm)
+})
-//     searchBar.blur()
-//     apiRequestThese(data.get('author'))
-// })
 
 let urlSearch = urlParams.get('search')
+let urlOption = urlParams.get('option')
+
+updateFilter(urlOption ? urlOption : 'f-auto')
 
 if (urlSearch) {
     searchBar.value = urlSearch

ProjetProgWeb/class/dotEnv.php

@@ -1,6 +1,5 @@
 <?php
 
-// Since I don't know atm if I am allowed to use external libs like dotenv, I used this piece of code to load .env file.
 // Link : https://dev.to/fadymr/php-create-your-own-php-dotenv-3k2i
 // Author : F.R Michel
 class dotEnv

ProjetProgWeb/class/dump.php

@@ -16,16 +16,31 @@ class dump {
         return date("Y-m-d", strtotime($old_date));
     }
 
-    public static function getTheseByAuthor($author) : array {
+    public static function getTheses(string $search, string $option) : array {
         $theses_array = [];
 
         $pdo_obj = new conf();
         $pdo = $pdo_obj->getPDO();
 
-        $author = '%' . $author . '%';
+        $search = '%' . $search . '%';
 
-        $stmt = $pdo->prepare("SELECT * FROM theses WHERE author LIKE :author ORDER BY author;");
+        $stmt = match ($option) {
-        $stmt->bindParam(':author', $author, PDO::PARAM_STR, 100);
+            'auto' => $pdo->prepare("
+                SELECT *
+                FROM theses
+                WHERE author LIKE :search
+                  OR title LIKE :search
+                  OR these_director LIKE :search
+                  OR soutenance_establishment LIKE :search;
+            "),
+            'author' => $pdo->prepare("SELECT * FROM theses WHERE author LIKE :search ORDER BY author;"),
+            'title' => $pdo->prepare("SELECT * FROM theses WHERE title LIKE :search;"),
+            'director' => $pdo->prepare("SELECT * FROM theses WHERE these_director LIKE :search;"),
+            'establishment' => $pdo->prepare("SELECT * FROM theses WHERE soutenance_establishment LIKE :search;"),
+            default => "",
+        };
+
+        $stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
         $stmt->execute();
 
         $i = 0;
@@ -40,16 +55,16 @@ class dump {
         return $theses_array;
     }
 
-    public static function getAuthorsByAuthor(string $author_name) : array {
+    public static function getSuggestions(string $search, string $option) : array {
         $array = [];
 
-        $author_name = '%' . $author_name . '%';
+        $search = '%' . $search . '%';
 
         $pdo_obj = new conf();
         $pdo = $pdo_obj->getPDO();
 
-        $stmt = $pdo->prepare("SELECT DISTINCT author FROM theses WHERE author LIKE :author_name LIMIT 10;");
+        $stmt = $pdo->prepare("SELECT DISTINCT author FROM theses WHERE author LIKE :search LIMIT 10;");
-        $stmt->bindParam(':author_name', $author_name, PDO::PARAM_STR, 100);
+        $stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
         $stmt->execute();
 
         while ($obj = $stmt->fetchObject()) {
@@ -61,23 +76,6 @@ class dump {
         return $array;
     }
 
-    public static function getAuthorsCountByAuthor(string $author_name) : int {
-        $author_name = '%' . $author_name . '%';
-
-        $pdo_obj = new conf();
-        $pdo = $pdo_obj->getPDO();
-
-        $stmt = $pdo->prepare("SELECT COUNT(author) FROM theses WHERE author LIKE :author_name;");
-        $stmt->bindParam(':author_name', $author_name, PDO::PARAM_STR, 100);
-        $stmt->execute();
-
-        while ($obj = $stmt->fetchObject()) {
-            foreach ($obj as $elem) {
-                return $elem;
-            }
-        } return 0;
-    }
-
     public function sendThese($pdo) {
         $data = [
             'author' => $this->these->getAuthor(),

ProjetProgWeb/index.php

@@ -48,6 +48,8 @@
             </svg>
         </div>
 
+        <!-- TODO Footer avec lien vers depot github -->
+
         <script src="app.js"></script>
 
     </body>

ProjetProgWeb/navbar.php

@@ -12,6 +12,7 @@
         <div class="research-section">
             <form class="navbar-form" method="GET" action="index.php">
                 <input type="text" name="search" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar">
+                <input style="display:none" type="text" name="option">
                 <button id="form-button">
                     <img src="assets/search.svg" alt="search" id="search-button" class="animation-in">
                 </button>
@@ -26,10 +27,10 @@
         <div>
             <h3>Filtres : </h3>
             <div class="filters">
-                <p>Auto</p>
+                <p id="f-auto">Auto</p>
-                <p>Auteur</p>
+                <p id="f-author">Auteur</p>
-                <p>Titre</p>
+                <p id="f-director">Directeur</p>
-                <p>Date</p>
+                <p id="f-establishment">Etablissement</p>
             </div>
         </div>
 

ProjetProgWeb/stylesheet.css

@@ -178,12 +178,14 @@ header {
 
 .filters {
     display: flex;
+    flex-wrap: wrap;
     gap: 5px;
     color: white;
     font-family: sans-serif;
 }
 
 .filters p {
+    margin: 0;
     padding: 3px 10px 3px 10px;
     border-radius: 10px;
     background-color: #39B4E7;
@@ -218,11 +220,13 @@ header {
     user-select: none;
     display: flex;
     align-items: center;
-    background-color: white;
+    background-color: #ECECEC;
+    box-shadow: inset rgba(0, 0, 0, 0.15) 0 0 10px;
     width: 60px;
     height: 30px;
     border-radius: 25px;
     padding: 0 3px 0 3px;
+    transition: 200ms background-color;
 }
 .toggle-switch .slider {
     -ms-user-select: none;
@@ -292,7 +296,7 @@ header {
     box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px;
     border-radius: 25px;
     margin: 0 5px 0 5px;
-    padding: 5px 15px 5px 15px;
+    padding: 5px 20px 5px 20px;
     transform: translateX(100px);
 }