From 183d53b8df6cbf69690db0181fc1b40ac3251eb2 Mon Sep 17 00:00:00 2001 From: Florian SYLVAIN Date: Wed, 5 Jan 2022 12:02:20 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Implementing=20working=20filters=20?= =?UTF-8?q?(almost)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ProjetProgWeb/api.php | 17 +++++----- ProjetProgWeb/app.js | 57 ++++++++++++++++++++++++---------- ProjetProgWeb/class/dotEnv.php | 1 - ProjetProgWeb/class/dump.php | 48 ++++++++++++++-------------- ProjetProgWeb/index.php | 2 ++ ProjetProgWeb/navbar.php | 9 +++--- ProjetProgWeb/stylesheet.css | 8 +++-- 7 files changed, 86 insertions(+), 56 deletions(-) diff --git a/ProjetProgWeb/api.php b/ProjetProgWeb/api.php index e5d9e8d..28afa79 100644 --- a/ProjetProgWeb/api.php +++ b/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), - "authors" => dump::getAuthorsByAuthor($author_name), - "authorsCount" => dump::getAuthorsCountByAuthor($author_name), + "theses" => dump::getTheses($search, $option), + "suggestion" => dump::getSuggestions($search, $option), default => NULL, }; $json = json_encode(array( "status" => 200, - "message" => "Success", "data" => $json_object - )); + "message" => "Success", + "data" => $json_object, +)); echo $json; diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js index 3edff4c..2cdc1f5 100644 --- a/ProjetProgWeb/app.js +++ b/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) - fetch(`api.php?q=theses&author=${author}`) + searchString = sanitize(search) + 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, `${pre_replacement}`) 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, `${pre_replacement}`) 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 => { -// e.preventDefault() -// let data = new FormData(navbarForm) -// searchBar.blur() -// apiRequestThese(data.get('author')) -// }) +navbarForm.addEventListener('submit', () => { + navbarForm.querySelector('input[name="option"]').value = queryOption +}) let urlSearch = urlParams.get('search') +let urlOption = urlParams.get('option') + +updateFilter(urlOption ? urlOption : 'f-auto') if (urlSearch) { searchBar.value = urlSearch diff --git a/ProjetProgWeb/class/dotEnv.php b/ProjetProgWeb/class/dotEnv.php index 073bb38..36c624c 100644 --- a/ProjetProgWeb/class/dotEnv.php +++ b/ProjetProgWeb/class/dotEnv.php @@ -1,6 +1,5 @@ getPDO(); - $author = '%' . $author . '%'; + $search = '%' . $search . '%'; - $stmt = $pdo->prepare("SELECT * FROM theses WHERE author LIKE :author ORDER BY author;"); - $stmt->bindParam(':author', $author, PDO::PARAM_STR, 100); + $stmt = match ($option) { + '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->bindParam(':author_name', $author_name, PDO::PARAM_STR, 100); + $stmt = $pdo->prepare("SELECT DISTINCT author FROM theses WHERE author LIKE :search LIMIT 10;"); + $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(), diff --git a/ProjetProgWeb/index.php b/ProjetProgWeb/index.php index 04b1308..81e5c30 100644 --- a/ProjetProgWeb/index.php +++ b/ProjetProgWeb/index.php @@ -48,6 +48,8 @@ + + diff --git a/ProjetProgWeb/navbar.php b/ProjetProgWeb/navbar.php index 0ec4f8c..e922daa 100644 --- a/ProjetProgWeb/navbar.php +++ b/ProjetProgWeb/navbar.php @@ -12,6 +12,7 @@
+ @@ -26,10 +27,10 @@

Filtres :

-

Auto

-

Auteur

-

Titre

-

Date

+

Auto

+

Auteur

+

Directeur

+

Etablissement

diff --git a/ProjetProgWeb/stylesheet.css b/ProjetProgWeb/stylesheet.css index 4217c53..0d9a46f 100644 --- a/ProjetProgWeb/stylesheet.css +++ b/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); }