fsylvain/projet_programmation_web
1
0
Fork 0
mirror of https://github.com/Floriansylvain/projet_programmation_web.git synced 2026-08-19 11:43:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ Implementing working filters (almost)

Browse Source
This commit is contained in:
Florian SYLVAIN
2022-01-05 12:02:20 +01:00
parent f55f866476
commit 183d53b8df
7 changed files with 86 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/api.php
+9 -8
View File
@@ -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;
ProjetProgWeb/app.js
+41 -16
View File
@@ -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, `<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 => {
// 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
ProjetProgWeb/class/dotEnv.php
-1
View File
@@ -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
+23 -25
View File
@@ -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->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(),
ProjetProgWeb/index.php
+2
View File
@@ -48,6 +48,8 @@
</svg>
</div>
<!-- TODO Footer avec lien vers depot github -->
<script src="app.js"></script>
</body>
ProjetProgWeb/navbar.php
+5 -4
View File
@@ -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>Auteur</p>
<p>Titre</p>
<p>Date</p>
<p id="f-auto">Auto</p>
<p id="f-author">Auteur</p>
<p id="f-director">Directeur</p>
<p id="f-establishment">Etablissement</p>
</div>
</div>
ProjetProgWeb/stylesheet.css
+6 -2
View File
@@ -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);
}