zkt26/z1/webapp/views/admin.ejs
2026-03-31 19:33:15 +02:00

401 lines
20 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Admin - Smart Building</title>
<link rel="stylesheet" href="/styleAdmin.css" />
<script>
function toggleForm(id) {
const form = document.getElementById(id);
form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>
</head>
<body>
<%- include('partials/header') %>
<main class="admin-container">
<h1>Gestion des utilisateurs</h1>
<div class="ajout-section">
<h2>Ajouter un utilisateur <span class="toggle-btn" onclick="toggleForm('form-ajout-user')"></span></h2>
<form id="form-ajout-user" action="/admin/ajouter-utilisateur" method="POST" style="display: none;">
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
/>
</svg>
</span>
<input type="text" name="nom" class="form-control-admin" placeholder="Nom" required />
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"
/>
</svg>
</span>
<input type="text" name="prenom" class="form-control-admin" placeholder="Prénom" required />
</div>
<div class="form-row">
<label>Sexe / Genre :</label>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path
d="M176 288a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM352 176c0 86.3-62.1 158.1-144 173.1l0 34.9 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-32 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-34.9C62.1 334.1 0 262.3 0 176C0 78.8 78.8 0 176 0s176 78.8 176 176zM271.9 360.6c19.3-10.1 36.9-23.1 52.1-38.4c20 18.5 46.7 29.8 76.1 29.8c61.9 0 112-50.1 112-112s-50.1-112-112-112c-7.2 0-14.3 .7-21.1 2c-4.9-21.5-13-41.7-24-60.2C369.3 66 384.4 64 400 64c37 0 71.4 11.4 99.8 31l20.6-20.6L487 41c-6.9-6.9-8.9-17.2-5.2-26.2S494.3 0 504 0L616 0c13.3 0 24 10.7 24 24l0 112c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-33.4-33.4L545 140.2c19.5 28.4 31 62.7 31 99.8c0 97.2-78.8 176-176 176c-50.5 0-96-21.3-128.1-55.4z"
/>
</svg>
</span>
<select name="sexe" class="form-control-admin">
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
<option value="Autre">Autre</option></select
><br />
</div>
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"
/>
</svg>
</span>
<input type="number" name="age" class="form-control-admin" placeholder="Âge" required />
</div>
<div class="form-row">
<label>Date de naissance :</label>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#e3e3e3"
>
<path
d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"
/>
</svg>
</span>
<input type="date" name="date_naissance" class="form-control-admin" required />
</div>
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
/>
</svg>
</span>
<input type="text" name="identifiant" class="form-control-admin" placeholder="Identifiant" required />
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
/>
</svg>
</span>
<input type="email" name="email" class="form-control-admin" placeholder="Email" required />
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
>
<path
d="M12 2C8.691 2 6 4.691 6 8v4c-1.104 0-2 .896-2 2v8c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2v-8c0-1.104-.896-2-2-2V8c0-3.309-2.691-6-6-6zm0 2c2.205 0 4 1.795 4 4v4H8V8c0-2.205 1.795-4 4-4zm-4 10h8v8H8v-8z"
/>
</svg>
</span>
<input type="password" name="mot_de_passe" class="form-control-admin" placeholder="Mot de passe" required />
</div>
<div class="form-group">
<span class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
color="#000000"
stroke-width="1.5"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.75 16.7143C20.75 16.7631 20.7453 16.8109 20.7364 16.8571C20.7453 16.9034 20.75 16.9511 20.75 17C20.75 17.4142 20.4142 17.75 20 17.75H6C5.30964 17.75 4.75 18.3096 4.75 19C4.75 19.6904 5.30964 20.25 6 20.25H20C20.4142 20.25 20.75 20.5858 20.75 21C20.75 21.4142 20.4142 21.75 20 21.75H6C4.48122 21.75 3.25 20.5188 3.25 19V5C3.25 3.48122 4.48122 2.25 6 2.25H19.4C20.1456 2.25 20.75 2.85442 20.75 3.6V16.7143ZM9 6.25C8.58579 6.25 8.25 6.58579 8.25 7C8.25 7.41421 8.58579 7.75 9 7.75H15C15.4142 7.75 15.75 7.41421 15.75 7C15.75 6.58579 15.4142 6.25 15 6.25H9Z"
fill="#000000"
></path>
</svg>
</span>
<input type="text" name="situation" class="form-control-admin" placeholder="Situation professionnelle" required />
</div>
<div class="form-row">
<label>Statut :</label>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 1 0 7.07 2.93A9.95 9.95 0 0 0 12 2zm0 18a8 8 0 1 1 5.66-2.34A7.96 7.96 0 0 1 12 20z"/>
<circle cx="12" cy="12" r="4"/>
</svg>
</span>
<select name="statut" class="form-control-admin">
<option value="visiteur">Visiteur</option>
<option value="simple">Simple</option>
<option value="complexe">Complexe</option>
<option value="administrateur">Administrateur</option></select
><br />
</div>
</div>
<button class="bouton-admin" type="submit">Ajouter</button>
</form>
</div>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Statut</th>
<th>État</th>
<th>Modifier</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody>
<% utilisateurs.forEach(user => { %>
<tr>
<form action="/admin/update-user" method="POST">
<input type="hidden" name="id" value="<%= user.id %>" />
<td><%= user.nom %></td>
<td><%= user.prenom %></td>
<td>
<select name="statut">
<option value="visiteur" <%= user.statut === 'visiteur' ? 'selected' : '' %>>Visiteur</option>
<option value="simple" <%= user.statut === 'simple' ? 'selected' : '' %>>Simple</option>
<option value="complexe" <%= user.statut === 'complexe' ? 'selected' : '' %>>Complexe</option>
<option value="administrateur" <%= user.statut === 'administrateur' ? 'selected' : '' %>>Administrateur</option>
</select>
</td>
<td>
<select name="etat">
<option value="en attente" <%= user.etat === 'en attente' ? 'selected' : '' %>>En attente</option>
<option value="validé" <%= user.etat === 'validé' ? 'selected' : '' %>>Validé</option>
</select>
</td>
<td><button type="submit">Modifier</button></td>
</form>
<td>
<form action="/admin/supprimer-user" method="POST" onsubmit="return confirm('Supprimer cet utilisateur ?')">
<input type="hidden" name="id" value="<%= user.id %>">
<button type="submit" style="background-color: #e74c3c; color: white;">Supprimer</button>
</form>
</td>
</tr>
<% }) %>
</tbody>
</table>
<h1>Gestion des objets</h1>
<div class="ajout-section">
<h2>Ajouter un objet <span class="toggle-btn" onclick="toggleForm('form-ajout-objet')"></span></h2>
<form id="form-ajout-objet" action="/admin/ajouter-objet" method="POST" style="display: none;">
<div class="ajout-section">
<div class="form-group">
<span class="icon">
<svg id="Layer_1" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m19 4h-4v-1a3 3 0 0 0 -6 0v1h-4a5.006 5.006 0 0 0 -5 5v10a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5v-10a5.006 5.006 0 0 0 -5-5zm-8-1a1 1 0 0 1 2 0v2a1 1 0 0 1 -2 0zm11 16a3 3 0 0 1 -3 3h-14a3 3 0 0 1 -3-3v-10a3 3 0 0 1 3-3h4.184a2.982 2.982 0 0 0 5.632 0h4.184a3 3 0 0 1 3 3zm-12-9h-5a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-8a1 1 0 0 0 -1-1zm-1 8h-3v-6h3zm11-3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 0-2h5a1 1 0 0 1 1 1zm0-4a1 1 0 0 1 -1 1h-5a1 1 0 0 1 0-2h5a1 1 0 0 1 1 1zm-2 8a1 1 0 0 1 -1 1h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 1 1z"/></svg>
</span>
<input type="text" name="denomination" class="form-control-admin" placeholder="Nom" required />
</div>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
<path d="m19.07,2.929c-1.889-1.889-4.399-2.929-7.07-2.929s-5.183,1.04-7.071,2.929c-3.899,3.899-3.899,10.243.008,14.149l7.063,6.909,7.07-6.917c1.89-1.889,2.93-4.4,2.93-7.071s-1.04-5.182-2.93-7.071Zm-1.406,12.72l-5.664,5.541-5.657-5.533c-1.511-1.511-2.343-3.52-2.343-5.657s.832-4.146,2.343-5.657,3.521-2.343,5.657-2.343,4.146.832,5.656,2.343c1.512,1.511,2.344,3.52,2.344,5.657s-.832,4.146-2.336,5.649ZM8.9,6h1.6v8h-1.6V6Zm5.6,0h-2.5v8h1.6v-3h.9c1.381,0,2.5-1.119,2.5-2.5s-1.119-2.5-2.5-2.5Zm0,3.4h-.9v-1.801h.9c.497,0,.9.403.9.9s-.403.9-.9.9Z"/>
</svg>
</span>
<input type="text" name="adresse_ip" class="form-control-admin" placeholder="Adresse IP" required />
</div>
<div class="form-row">
<label>Type :</label>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M15,24H9V20.487a9,9,0,0,1-2.849-1.646L3.107,20.6l-3-5.2L3.15,13.645a9.1,9.1,0,0,1,0-3.29L.107,8.6l3-5.2L6.151,5.159A9,9,0,0,1,9,3.513V0h6V3.513a9,9,0,0,1,2.849,1.646L20.893,3.4l3,5.2L20.85,10.355a9.1,9.1,0,0,1,0,3.29L23.893,15.4l-3,5.2-3.044-1.758A9,9,0,0,1,15,20.487Zm-4-2h2V18.973l.751-.194A6.984,6.984,0,0,0,16.994,16.9l.543-.553,2.623,1.515,1-1.732-2.62-1.513.206-.746a7.048,7.048,0,0,0,0-3.75l-.206-.746,2.62-1.513-1-1.732L17.537,7.649,16.994,7.1a6.984,6.984,0,0,0-3.243-1.875L13,5.027V2H11V5.027l-.751.194A6.984,6.984,0,0,0,7.006,7.1l-.543.553L3.84,6.134l-1,1.732L5.46,9.379l-.206.746a7.048,7.048,0,0,0,0,3.75l.206.746L2.84,16.134l1,1.732,2.623-1.515.543.553a6.984,6.984,0,0,0,3.243,1.875l.751.194Zm1-6a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"/></g></svg> </span>
<select name="type" class="form-control-admin" required>
<option value="Climatisation">Climatisation</option>
<option value="Lumière">Lumière</option>
<option value="thermostat">Thermostat</option>
<option value="securite">Sécurité</option>
<option value="Enceinte connectée">Enceinte connectée</option>
<option value="Capteur">Capteur</option>
<option value="appareil_menager">Appareil ménager</option>
<option value="Prise">Prise</option></select
><br />
</div>
</div>
<div class="form-row">
<label>Niveau :</label>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M1,4.75H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2ZM7.333,2a1.75,1.75,0,1,1-1.75,1.75A1.752,1.752,0,0,1,7.333,2Z"/><path d="M23,11H20.264a3.727,3.727,0,0,0-7.194,0H1a1,1,0,0,0,0,2H13.07a3.727,3.727,0,0,0,7.194,0H23a1,1,0,0,0,0-2Zm-6.333,2.75A1.75,1.75,0,1,1,18.417,12,1.752,1.752,0,0,1,16.667,13.75Z"/><path d="M23,19.25H10.931a3.728,3.728,0,0,0-7.195,0H1a1,1,0,0,0,0,2H3.736a3.728,3.728,0,0,0,7.195,0H23a1,1,0,0,0,0-2ZM7.333,22a1.75,1.75,0,1,1,1.75-1.75A1.753,1.753,0,0,1,7.333,22Z"/></svg> </span>
<select name="niveau" class="form-control-admin" required>
<option value="débutant">Débutant</option>
<option value="intermédiaire">Intermédiaire</option>
<option value="avancé">Avancé</option>
<option value="expert">Expert</option></select
><br />
</div>
</div>
<div class="form-row">
<label>État :</label>
<div class="form-group">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2a10 10 0 1 0 7.07 2.93A9.95 9.95 0 0 0 12 2zm0 18a8 8 0 1 1 5.66-2.34A7.96 7.96 0 0 1 12 20z"/>
<circle cx="12" cy="12" r="4"/>
</svg>
</span>
<select name="etat" class="form-control-admin">
<option value="Actif">Actif</option>
<option value="Inactif">Inactif</option></select
><br />
</div>
</div>
<button class="bouton-admin" type="submit">Ajouter</button>
</form>
</div>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Adresse IP</th>
<th>Type</th>
<th>Niveau</th>
<th>État</th>
<th>Modifier</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody>
<% objets.forEach(objet => { %>
<tr>
<form action="/admin/update-objet" method="POST">
<input type="hidden" name="adresse_ip" value="<%= objet.adresse_ip %>" />
<td><%= objet.denomination %></td>
<td><%= objet.adresse_ip %></td>
<td><%= objet.type %></td>
<td>
<select name="niveau">
<option value="débutant" <%= objet.niveau === 'débutant' ? 'selected' : '' %>>Débutant</option>
<option value="intermédiaire" <%= objet.niveau === 'intermédiaire' ? 'selected' : '' %>>Intermédiaire</option>
<option value="avancé" <%= objet.niveau === 'avancé' ? 'selected' : '' %>>Avancé</option>
<option value="expert" <%= objet.niveau === 'expert' ? 'selected' : '' %>>Expert</option>
</select>
</td>
<td>
<select name="etat">
<option value="Actif" <%= objet.etat === 'Actif' ? 'selected' : '' %>>Actif</option>
<option value="Inactif" <%= objet.etat === 'Inactif' ? 'selected' : '' %>>Inactif</option>
</select>
</td>
<td><button type="submit">Modifier</button></td>
</form>
<td>
<form action="/admin/supprimer-objet" method="POST" onsubmit="return confirm('Supprimer cet objet ?')">
<input type="hidden" name="adresse_ip" value="<%= objet.adresse_ip %>">
<button type="submit" style="background-color: #e74c3c; color: white;">Supprimer</button>
</form>
</td>
</tr>
<% }) %>
</tbody>
</table>
<h1>Messages de contact</h1>
<table>
<thead>
<tr>
<th>Nom</th>
<th>Email</th>
<th>Message</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<% contacts.forEach(c => { %>
<tr>
<td><%= c.nom %></td>
<td><%= c.email %></td>
<td><%= c.message %></td>
<td><%= new Date(c.date_envoi).toLocaleString('fr-FR') %></td>
</tr>
<% }) %>
</tbody>
</table>
</main>
<%- include('partials/footer') %>
</body>
</html>