Add Ajax display WIP for the number of rdv

This commit is contained in:
2024-04-05 10:50:12 +02:00
parent a2bcc00a44
commit 6fdf04db9a
6 changed files with 138 additions and 36 deletions

View File

@@ -2,7 +2,7 @@ GET http://serveur-projet-s4.felix/src/API/requests.php/api/search?type=Généra
Accept: application/json
###
GET http://serveur-projet-s4.felix/src/API/requests.php/api/search-location?location=44
GET http://serveur-projet-s4.felix/src/API/requests.php/api/search-postal?postal=44
Accept: application/json
###
@@ -18,4 +18,9 @@ Accept: application/json
GET http://serveur-projet-s4.felix/src/API/requests.php/api/rdv-date?date=2024-03-18&id=1
Accept: application/json
###
GET http://serveur-projet-s4.felix/src/API/requests.php/api/search?type=G%C3%A9n%C3%A9raliste&postal=35
Accept: application/json
###

View File

@@ -28,28 +28,31 @@
$pdo = dbConnect();
?>
<div id="topbar">
<a href="index.php">
<p id="DoctISEN" class="top-0">
Doct'ISEN
</p>
</a>
<div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
<?php
loginUI($pdo);
?>
<div id="topInfo">
<a href="index.php">
<p id="DoctISEN" class="top-0 position-fixed">
Doct'ISEN
</p>
</a>
<div class="d-flex position-fixed end-0 flex-row align-items-center gap-3 mt-2 top-0">
<?php
loginUI($pdo);
?>
</div>
</div>
<div id="searchbar"></div>
</div>
<div id="content">
<div style="background-color: red; height: 50vh;">
<img src="src/img/img_index.png" alt="img_index" id="img_index">
<div id="rdv">
<p class="text-white fw-bold fs-3">Trouvez un rendez vous avec un medecin</p>
<form action="search.php" class="input-group" method="post">
<form action="" class="input-group" method="post">
<input type="text" aria-label="First name" class="form-control" id="nom" name="nom" placeholder="Nom, spécialité">
<input type="text" aria-label="Last name" class="form-control" id="postal" name="postal" placeholder="Où ?">
<button class="btn btn-success" type="submit" id="button-addon2">Rechercher</button>
<button class="btn btn-success" type="submit" id="recherche">Rechercher</button>
</form>
</div>
<img src="src/img/img_index.png" alt="img_index" id="img_index">
<div class="d-flex justify-content-center gap-5 w-100" id="cardPos">
<div class="card" style="width: 18rem;">
<div class="card-body">

View File

@@ -21,14 +21,19 @@ $router->GET('/api/search-type', ["type"], function($type){
searchDoctor($pdo, $type);
});
$router->GET('/api/search-location', ["location"], function($location){
$router->GET('/api/search-postal', ["postal"], function($postal){
global $pdo;
searchDoctorByLocation($pdo, $location);
searchDoctorByLocation($pdo, $postal);
});
$router->GET('/api/search', ["type", "location"], function($type, $location){
$router->GET('/api/search', ["type", "postal"], function($type, $postal){
global $pdo;
searchDoctorByLocation($pdo, $location, $type);
searchDoctorByLocation($pdo, $postal, $type);
});
$router->GET('/api/rdv', ["id"], function($id){
global $pdo;
getNumberOfRDVByMedecin($pdo, $id);
});
$router->GET('/api/rdv-time', ["id"], function($id){

View File

@@ -1,13 +1,31 @@
body{
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
#DoctISEN{
font-family: 'Just Me Again Down Here', cursive;
color: white;
font-size: 36px
font-size: 36px;
margin-left: 0.5rem;
margin-top: 0;
cursor: pointer;
}
#topbar{
background-color: #ff0000;
height: 6vh;
height: 22vh;
width: 100%;
display: flex;
flex-direction: column;
gap: 1em;
}
#topInfo{
height: 5vh;
}
#acceuil{

View File

@@ -1,19 +1,10 @@
console.log("index.js loaded");
//Search
type = document.getElementById("nom").value;
postal = document.getElementById("postal").value;
document.getElementById("button-addon2").addEventListener("click", function() {
ajaxRequest('GET',"src/API/requests.php/api/search?type=" + type + "&postal=" + postal, displaySearchResults);
});
function displaySearchResults(data) {
container = document.getElementById("content");
let container = document.getElementById("content");
container.innerHTML = "";
// Create a div for the result with the following classes d-flex flex-row flex-wrap mx-5 gap-5
mainDiv = document.createElement("div");
let mainDiv = document.createElement("div");
mainDiv.classList.add("d-flex", "flex-row", "flex-wrap", "mx-5", "gap-5");
// for each data of the json, create a card and append it to the mainDiv and count the number of results
let count = 0;
data.forEach(function(element) {
count++;
@@ -27,20 +18,83 @@ function displaySearchResults(data) {
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${element.name}</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">${element.type}</h6>
<p class="card-text">Disponibilité: ${element.disponibility}</p>
<h5 class="card-title">${element.m_surname} ${element.m_name}</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">${element.m_specialty}</h6>
<p class="card-text">Code Postal: ${element.m_postal}</p>
<!-- Affiche le nombre de disponibilités -->
<p class="card-text">Disponibilités: ${element.m_availabilities}</p>
<button type="submit" class="btn btn-danger">Prendre rendez-vous</button>
</div>
</div>
</div>`;
mainDiv.appendChild(card);
});
container.appendChild(mainDiv);
if(count === 0) {
mainDiv.innerHTML = "<h1>Aucun résultats</h1>";
}
else {
mainDiv.innerHTML = "<h1>" + count + " résultats</h1>";
container.appendChild(mainDiv);
let resultText = document.createElement("h1");
resultText.textContent = count + " résultats";
container.insertBefore(resultText, mainDiv);
}
}
}
function displaySearchTopBar(){
let topbar = document.getElementById("topbar");
let searchbar = document.getElementById("searchbar");
let form = topbar.querySelector("form");
if (form) {
topbar.removeChild(form);
}
searchbar.innerHTML = `
<form class="input-group p-5" onsubmit="performSearch(event)" method="post">
<input type="text" aria-label="First name" class="form-control" id="nom" name="nom" placeholder="Nom, spécialité">
<input type="text" aria-label="Last name" class="form-control" id="postal" name="postal" placeholder="Où ?">
<button class="btn btn-danger" type="submit" id="recherche">Rechercher</button>
</form>`;
attachSearchEventListener();
}
function performSearch(event){
event.preventDefault();
let type = document.getElementById("nom").value;
let postal = document.getElementById("postal").value;
if(postal === ""){
if(type === "") {
alert("Veuillez remplir au moins un champ");
return;
}
else{
ajaxRequest('GET', "src/API/requests.php/api/search-type?type=" + type, function (data){
displaySearchResults(data);
displaySearchTopBar();
})
}
}
else if(type === "") {
ajaxRequest('GET', "src/API/requests.php/api/search-postal?postal=" + postal, function (data){
displaySearchResults(data);
displaySearchTopBar();
});
}
else{
ajaxRequest('GET', "src/API/requests.php/api/search?type=" + type + "&postal=" + postal, function(data){
displaySearchResults(data);
displaySearchTopBar();
});
}
}
function attachSearchEventListener() {
document.getElementById("recherche").addEventListener("click", function(event) {
performSearch(event);
});
}
attachSearchEventListener();

View File

@@ -296,5 +296,22 @@ function searchDoctorByLocation($pdo, $location, $type = null): void
}
}
function getNumberOfRDVByMedecin($pdo, $id): void
{
$query = $pdo->prepare("SELECT * FROM propose WHERE m_id = :id");
$query->bindParam(':id', $id);
$query->execute();
$result = $query->fetchAll();
$count = 0;
foreach($result as $row){
$count++;
}
if($count == 0){
Response::HTTP404(['error' => "Aucun rendez-vous"]);
}
else {
Response::HTTP200(['count' => $count]);
}
}
?>