162 lines
5.5 KiB
Plaintext
162 lines
5.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Page d'accueil - Smart Building</title>
|
|
<link rel="stylesheet" href="/styleObjets.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 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-objets">
|
|
<h1>Gestion des ressources</h1>
|
|
</div>
|
|
<div id="objets-container"></div>
|
|
</section>
|
|
|
|
<div id="myModal" class="modal">
|
|
<!-- Modal content -->
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<div id="modal-info"></div>
|
|
<!-- Conteneur pour les informations -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<%- include('partials/footer') %>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
let objetsContainer = document.getElementById('objets-container');
|
|
|
|
function openModal(objet) {
|
|
const modal = document.getElementById('myModal');
|
|
const modalInfo = document.getElementById('modal-info');
|
|
|
|
modalInfo.innerHTML = `
|
|
<div class='info_objet'>
|
|
<h2 id='denomination-edit'>${objet.denomination}</h2>
|
|
<button type="submit" id="edit-button" onClick="toggleEdit('edit-icon_denomination', 'denomination-edit')">
|
|
<i id="edit-icon_denomination" class="fas fa-pen"></i>
|
|
</button>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p id='address_ip-edit'>${objet.adresse_ip}</p>
|
|
<button type="submit" id="edit-button" onClick="toggleEdit('edit-icon_adresse_ip', 'address_ip-edit')">
|
|
<i id="edit-icon_adresse_ip" class="fas fa-pen"></i>
|
|
</button>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p id='etat-edit'>${objet.etat}</p>
|
|
<button type="submit" id="edit-button" onClick="toggleEdit('edit-icon_etat', 'etat-edit')">
|
|
<i id="edit-icon_etat" class="fas fa-pen"></i>
|
|
</button>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p id='type-edit'>${objet.type}</p>
|
|
<button type="submit" id="edit-button" onClick="toggleEdit('edit-icon_type', 'type-edit')">
|
|
<i id="edit-icon_type" class="fas fa-pen"></i>
|
|
</button>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p><strong>Consommation actuelle :</strong> ${objet.consommation}</p>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p><strong>Consommation maximale :</strong> ${objet.consommation_max}</p>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p><strong>Fournisseur :</strong> ${objet.fournisseur}</p>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p><strong>Abonnement :</strong> ${objet.abonnement}</p>
|
|
</div>
|
|
<div class='info_objet'>
|
|
<p><strong>Échéance :</strong> ${objet.echeance}</p>
|
|
</div>
|
|
`;
|
|
|
|
modal.style.display = 'block';
|
|
}
|
|
|
|
function toggleEdit(edit_icon, field) {
|
|
const editIcon = document.getElementById(edit_icon);
|
|
const paragraph = document.getElementById(field);
|
|
if (editIcon.className == "fas fa-pen") {
|
|
editIcon.className = "fas fa-check";
|
|
editIcon.alt = "Check";
|
|
paragraph.contentEditable = true;
|
|
paragraph.style.backgroundColor = "#cfcfcf";
|
|
} else {
|
|
if (editIcon.className == "fas fa-check") {
|
|
editIcon.className = "fas fa-pen";
|
|
editIcon.alt = "Stylo";
|
|
paragraph.contentEditable = false;
|
|
paragraph.style.backgroundColor = "#666666";
|
|
}
|
|
}
|
|
}
|
|
|
|
var span = document.getElementsByClassName("close")[0];
|
|
|
|
span.onclick = function () {
|
|
const modal = document.getElementById('myModal');
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
// 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
|
|
fetchObjets(); // Recharge les objets
|
|
}
|
|
|
|
async function fetchObjets() {
|
|
const objetsContainer = document.getElementById('objets-container');
|
|
objetsContainer.innerHTML = "";
|
|
|
|
try {
|
|
const response = await fetch('/api/ressources');
|
|
const ressources = await response.json();
|
|
|
|
ressources.forEach(r => {
|
|
const div = document.createElement('div');
|
|
div.classList.add('objet');
|
|
|
|
div.innerHTML = `
|
|
<h3>${r.nom}</h3>
|
|
<p><strong>Consommation actuelle :</strong> ${r.consommation}</p>
|
|
<p><strong>Max atteignable :</strong> ${r.consommation_max}</p>
|
|
<p><strong>Fournisseur :</strong> ${r.fournisseur}</p>
|
|
<p><strong>Abonnement :</strong> ${r.abonnement}</p>
|
|
<p><strong>Date paiement :</strong> ${r.echeance}</p>
|
|
`;
|
|
|
|
objetsContainer.appendChild(div);
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error("Erreur lors du chargement des ressources :", err);
|
|
}
|
|
}
|
|
|
|
// Charger les objets au premier chargement de la page
|
|
window.onload = function () {
|
|
fetchObjets(); // Charge les objets au premier chargement
|
|
};
|
|
|
|
</script> |