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

⚡️ Pages system overhaul, improving performances a lot

Browse Source
This commit is contained in:
Florian SYLVAIN
2022-01-06 16:46:23 +01:00
parent a89a4f2315
commit 62be572702
5 changed files with 90 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/api.php
+4 -2
View File
@@ -2,7 +2,7 @@
require_once("class/dump.php");
if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option'])) {
if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option']) || !isset($_GET['offset'])) {
print_r(json_encode(array("status" => 400, "message" => "Missing query type or attributes.")));
exit();
}
@@ -10,6 +10,7 @@ if (!isset($_GET['q']) || !isset($_GET['search']) || !isset($_GET['option'])) {
$q = $_GET['q'];
$search = filter_var($_GET['search'], FILTER_SANITIZE_ADD_SLASHES);
$option = $_GET['option'];
$offset = $_GET['offset'];
if (strlen($search) < 3) {
print_r(json_encode(array(
@@ -20,8 +21,9 @@ if (strlen($search) < 3) {
}
$json_object = match ($q) {
"theses" => dump::getTheses($search, $option),
"theses" => dump::getTheses($search, $option, $offset),
"suggestion" => dump::getSuggestions($search, $option),
"count" => dump::getThesesCount($search, $option),
default => NULL,
};
ProjetProgWeb/app.js
+41 -32
View File
@@ -59,7 +59,7 @@ let searchString = "";
let lastRequest = null
let queryOption = null
function apiRequestThese(search) {
function apiRequestThese(search, offset) {
hideSuggestions()
if (lastRequest === null || (new Date().getTime() - lastRequest) > 1000) {
lastRequest = new Date().getTime()
@@ -67,9 +67,13 @@ function apiRequestThese(search) {
pagesNumbers.innerHTML = ""
loader.style.display = "block"
searchString = sanitize(search)
fetch(`api.php?q=theses&search=${search}&option=${queryOption}`)
fetch(`api.php?q=theses&search=${searchString}&option=${queryOption}&offset=${offset}`)
.then(response => response.json())
.then(data => displayResults(data))
.then(data => {
fetch(`api.php?q=count&search=${searchString}&option=${queryOption}&offset=0`)
.then(response => response.json())
.then(aCount => displayResults(data, aCount.data[0]))
})
} else {
alert('Veuillez attendre une seconde entre chaque recherche.')
}
@@ -89,15 +93,17 @@ function fadeIn() {
window.addEventListener('scroll', fadeIn);
function updateUnderline(number) {
function updatePageNumber(number) {
pagesNumbers.childNodes.forEach(elem => {
if (elem.innerHTML == number) {
elem.style.fontWeight = "bold"
elem.style.textDecoration = "underline"
pagesNumbers.scrollLeft += elem.getBoundingClientRect().left -
pagesNumbers.getBoundingClientRect().left -
(pagesNumbers.offsetWidth / 2) + (elem.offsetWidth / 2)
} else {
elem.style.textDecoration = 'none'
elem.style.textDecoration = "normal"
elem.style.textDecoration = "none"
}
})
}
@@ -118,9 +124,9 @@ function focusResults(result) {
let resultsArray = []
let count = 0
let nbPages = 0
let currentPage = null
function displayResults(results) {
function displayResults(results, aCount) {
if (results.status === 400) {
loader.style.display = "none"
error.classList.remove("fade-out");
@@ -129,7 +135,7 @@ function displayResults(results) {
pagesNumbersContainer.style.display = 'none'
return;
} else if (results.status === 200) {
count = 0
count = aCount
resultsArray = []
pagesNumbersContainer.style.display = 'flex'
results.data.forEach(elem => {
@@ -176,7 +182,6 @@ function displayResults(results) {
content.appendChild(child)
} i += 1
})
count += 1
header.addEventListener('click', () => {
focusResults(result)
@@ -201,8 +206,7 @@ function displayResults(results) {
number.innerHTML = i + 1
if (i === 0)
number.style.textDecoration = 'underline'
number.onclick = (e) => {
updateUnderline(e.target.innerHTML)
number.onclick = () => {
browseResults(i + 1)
}
pagesNumbers.appendChild(number)
@@ -212,27 +216,30 @@ function displayResults(results) {
pagesNumbersContainer.style.display = 'none'
}
browseResults(1)
fadeIn()
}
}
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()
updateUnderline(wantedPage)
currentPage = wantedPage
wantedPage *= RESULTS_NUMBER
resultsArray.slice(wantedPage - RESULTS_NUMBER, wantedPage).forEach(result => {
resultsArray.forEach(result => {
resultsDiv.appendChild(result)
})
currentPage = (parseInt(urlOffset) + RESULTS_NUMBER) / RESULTS_NUMBER
updatePageNumber(currentPage)
fadeIn()
}
}
function submitForm(offset) {
navbarForm.querySelector('input[name="option"]').value = queryOption
navbarForm.querySelector('input[name="offset"]').value = offset
navbarForm.submit()
}
function browseResults(wantedPage) {
if (wantedPage > 0 && wantedPage < nbPages + 1) {
let offset = (wantedPage * RESULTS_NUMBER) - RESULTS_NUMBER
submitForm(offset)
// window.location.href = `index.php?search=${search}&option=${queryOption}&offset=${offset}`
}
}
let lastSearch = ""
let lastSuggestion = new Date().getTime()
let suggestionsDisplayed = false
@@ -243,7 +250,7 @@ function realTimeDisplay() {
if (search.length > 3 && (search !== lastSearch && (new Date().getTime() - lastSuggestion) > 500)) {
lastSearch = search
lastSuggestion = new Date().getTime()
fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}`)
fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}&offset=0`)
.then(response => response.json())
.then(results => {
if (results.data) {
@@ -258,7 +265,7 @@ function realTimeDisplay() {
name.innerHTML = elem
name.addEventListener('click', () => {
searchBar.value = elem
apiRequestThese(elem)
apiRequestThese(elem, 0)
})
suggestions.appendChild(name)
})
@@ -348,16 +355,18 @@ searchBar.addEventListener('focus', () => {
switchNavTitle(false)
})
navbarForm.addEventListener('submit', () => {
navbarForm.querySelector('input[name="option"]').value = queryOption
navbarForm.addEventListener('submit', e => {
e.preventDefault()
submitForm(0)
})
let urlSearch = urlParams.get('search')
let urlOption = urlParams.get('option')
let urlOffset = urlParams.get('offset')
updateFilter(urlOption ? urlOption : 'f-auto')
if (urlSearch) {
if (urlSearch && urlOption && urlOffset) {
searchBar.value = urlSearch
apiRequestThese(urlSearch)
apiRequestThese(urlSearch, urlOffset)
}
ProjetProgWeb/class/dump.php
+43 -6
View File
@@ -16,7 +16,7 @@ class dump {
return date("Y-m-d", strtotime($old_date));
}
public static function getTheses(string $search, string $option) : array {
public static function getTheses(string $search, string $option, int $offset) : array {
$theses_array = [];
$pdo_obj = new conf();
@@ -31,16 +31,18 @@ class dump {
WHERE author LIKE :search
OR title LIKE :search
OR these_director LIKE :search
OR soutenance_establishment LIKE :search;
OR soutenance_establishment LIKE :search
LIMIT 10 OFFSET :offset;
"),
'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;"),
'author' => $pdo->prepare("SELECT * FROM theses WHERE author LIKE :search ORDER BY author LIMIT 10 OFFSET :offset;"),
'title' => $pdo->prepare("SELECT * FROM theses WHERE title LIKE :search LIMIT 10 OFFSET :offset;"),
'director' => $pdo->prepare("SELECT * FROM theses WHERE these_director LIKE :search LIMIT 10 OFFSET :offset;"),
'establishment' => $pdo->prepare("SELECT * FROM theses WHERE soutenance_establishment LIKE :search LIMIT 10 OFFSET :offset;"),
default => "",
};
$stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$i = 0;
@@ -86,6 +88,41 @@ class dump {
return $array;
}
public static function getThesesCount(string $search, string $option) : array {
$array = [];
$search = '%' . $search . '%';
$pdo_obj = new conf();
$pdo = $pdo_obj->getPDO();
$stmt = match ($option) {
'auto' => $pdo->prepare("
SELECT COUNT(*)
FROM theses
WHERE author LIKE :search
OR title LIKE :search
OR these_director LIKE :search
OR soutenance_establishment LIKE :search;
"),
'author' => $pdo->prepare("SELECT COUNT(author) FROM theses WHERE author LIKE :search;"),
'title' => $pdo->prepare("SELECT COUNT(title) FROM theses WHERE title LIKE :search;"),
'director' => $pdo->prepare("SELECT COUNT(these_director) FROM theses WHERE these_director LIKE :search;"),
'establishment' => $pdo->prepare("SELECT COUNT(soutenance_establishment) FROM theses WHERE soutenance_establishment LIKE :search;"),
default => "",
};
$stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
$stmt->execute();
while ($obj = $stmt->fetchObject()) {
foreach ($obj as $elem) {
array_push($array, $elem);
}
}
return $array;
}
public function sendThese($pdo) {
$data = [
'author' => $this->these->getAuthor(),
ProjetProgWeb/navbar.php
+3 -2
View File
@@ -7,12 +7,13 @@
<path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
</svg>
<h1 id="title"><a href="/projet_programmation_web/ProjetProgWeb/">theses.fr</a></h1>
<h1 id="title"><a href="index.php">theses.fr</a></h1>
<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 type="text" name="search" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar" maxlength="100">
<input style="display:none" type="text" name="option">
<input style="display:none" type="text" name="offset">
<button id="form-button">
<img src="assets/search.svg" alt="search" id="search-button" class="animation-in">
</button>