119 lines
3.9 KiB
Plaintext
119 lines
3.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Page d'accueil - Smart Building</title>
|
|
<link rel="stylesheet" href="/styleMembres.css" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<script
|
|
src="https://kit.fontawesome.com/a076d05399.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<%- include('partials/header') %>
|
|
|
|
<main>
|
|
<section class="left-panel">
|
|
<img src="/images/batiment.png" alt="Bâtiment" />
|
|
</section>
|
|
|
|
<section class="right-panel">
|
|
<div class="header-membres">
|
|
<h1>Membres</h1>
|
|
<form class="form">
|
|
<label for="search">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
placeholder="Rechercher"
|
|
id="search"
|
|
/>
|
|
<div class="fancy-bg"></div>
|
|
<div class="search">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path
|
|
d="M21.53 20.47l-3.66-3.66C19.19 15.24 20 13.21 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.21 0 4.24-.8 5.81-2.13l3.66 3.66c.29.29.76.29 1.06 0s.29-.76 0-1.06zM3.5 11c0-4.14 3.36-7.5 7.5-7.5s7.5 3.36 7.5 7.5-3.36 7.5-7.5 7.5S3.5 15.14 3.5 11z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<button class="close-btn" type="reset" onClick="clearInput()">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</label>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="membres-container"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<%- include('partials/footer') %>
|
|
</body>
|
|
|
|
<script>
|
|
const membresContainer = document.getElementById("membres-container");
|
|
|
|
async function fetchMembres() {
|
|
try {
|
|
const response = await fetch("/api/utilisateurs");
|
|
const membres = await response.json();
|
|
|
|
const statutColor = {
|
|
visiteur: "#ffbe0b",
|
|
simple: "#4ecdc4",
|
|
complexe: "#f72585",
|
|
administrateur: "#e63946",
|
|
};
|
|
|
|
membresContainer.innerHTML = "";
|
|
|
|
membres.forEach((membre) => {
|
|
const div = document.createElement("div");
|
|
div.classList.add("membre");
|
|
div.innerHTML = `
|
|
<h3>${membre.nom}</h3>
|
|
<h4>${membre.prenom}</h4>
|
|
<p>${membre.age} ans</p>
|
|
<p style="color: ${
|
|
statutColor[membre.statut] || "#888"
|
|
}; font-weight: bold;">${membre.statut}</p>
|
|
`;
|
|
membresContainer.appendChild(div);
|
|
});
|
|
} catch (err) {
|
|
console.error("Erreur lors du chargement des membres :", err);
|
|
}
|
|
}
|
|
|
|
// Fonction pour réinitialiser l'input et les objets affichés
|
|
function clearInput() {
|
|
const inputField = document.getElementById("search"); // Sélectionne l'input par son id
|
|
inputField.value = ""; // Vide l'input
|
|
inputField.dispatchEvent(new Event("input")); // Déclenche l'événement 'input' pour actualiser l'affichage des objets
|
|
}
|
|
|
|
document.getElementById("search").addEventListener("input", function (e) {
|
|
const val = e.target.value.toLowerCase();
|
|
document.querySelectorAll(".membre").forEach((div) => {
|
|
const content = div.innerText.toLowerCase();
|
|
div.style.display = content.includes(val) ? "block" : "none";
|
|
});
|
|
});
|
|
|
|
window.onload = fetchMembres;
|
|
</script>
|
|
</html> |