Début du projet

public/js/accueil.js

@@ -0,0 +1,114 @@
+/**
+ * Page d'accueil : statistiques + liste des animaux actifs.
+ */
+
+let utilisateurCourant = null;
+
+async function chargerStatistiques()
+{
+    const stats = await appelerApi("/api/statistiques");
+
+    if (!stats)
+    {
+        return;
+    }
+
+    document.getElementById("statPoules").textContent = stats.nombrePoulesActives;
+    document.getElementById("statCoqs").textContent = stats.nombreCoqsActifs;
+    document.getElementById("statTotal").textContent = stats.nombreTotalActifs;
+    document.getElementById("statPonte").textContent = stats.nombreEnPonte;
+    document.getElementById("statCouvage").textContent = stats.nombreEnCouvage;
+}
+
+async function chargerAnimaux()
+{
+    const animaux = await appelerApi("/api/animaux?actifs=oui");
+
+    if (!animaux)
+    {
+        return;
+    }
+
+    const liste = document.getElementById("listeAnimaux");
+    const messageVide = document.getElementById("messageVide");
+
+    if (animaux.length === 0)
+    {
+        liste.innerHTML = "";
+        messageVide.hidden = false;
+        return;
+    }
+
+    messageVide.hidden = true;
+    liste.innerHTML = animaux.map(htmlCarteAnimal).join("");
+}
+
+function ouvrirDialogueAjout()
+{
+    document.getElementById("titreDialogueAnimal").textContent = "Ajouter un animal";
+    document.getElementById("animalId").value = "";
+    document.getElementById("formAnimal").reset();
+    document.getElementById("erreurAnimal").hidden = true;
+    document.getElementById("dialogueAnimal").showModal();
+}
+
+document.getElementById("boutonNouvelAnimal").addEventListener("click", ouvrirDialogueAjout);
+
+document.getElementById("annulerAnimal").addEventListener("click", function ()
+{
+    document.getElementById("dialogueAnimal").close();
+});
+
+document.getElementById("formAnimal").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    const erreurAnimal = document.getElementById("erreurAnimal");
+    erreurAnimal.hidden = true;
+
+    const formData = new FormData();
+    formData.append("type", document.getElementById("type").value);
+    formData.append("couleurBague", document.getElementById("couleurBague").value);
+    formData.append("numeroBague", document.getElementById("numeroBague").value);
+    formData.append("dateNaissance", document.getElementById("dateNaissance").value);
+    formData.append("etatSante", document.getElementById("etatSante").value);
+
+    const photo = document.getElementById("photo").files[0];
+    if (photo)
+    {
+        formData.append("photo", photo);
+    }
+
+    try
+    {
+        await appelerApi("/api/animaux", {
+            method: "POST",
+            body: formData
+        });
+
+        document.getElementById("dialogueAnimal").close();
+        await chargerAnimaux();
+        await chargerStatistiques();
+    }
+    catch (erreur)
+    {
+        erreurAnimal.textContent = erreur.message;
+        erreurAnimal.hidden = false;
+    }
+});
+
+async function demarrer()
+{
+    utilisateurCourant = await verifierSession();
+
+    if (!utilisateurCourant)
+    {
+        return;
+    }
+
+    brancherDeconnexion();
+    await chargerStatistiques();
+    await chargerAnimaux();
+}
+
+demarrer();

public/js/archives.js

@@ -0,0 +1,41 @@
+/**
+ * Page archives : animaux décédés.
+ */
+
+async function chargerArchives()
+{
+    const animaux = await appelerApi("/api/animaux?archives=oui");
+
+    if (!animaux)
+    {
+        return;
+    }
+
+    const liste = document.getElementById("listeArchives");
+    const messageVide = document.getElementById("messageVide");
+
+    if (animaux.length === 0)
+    {
+        liste.innerHTML = "";
+        messageVide.hidden = false;
+        return;
+    }
+
+    messageVide.hidden = true;
+    liste.innerHTML = animaux.map(htmlCarteAnimal).join("");
+}
+
+async function demarrer()
+{
+    const utilisateur = await verifierSession();
+
+    if (!utilisateur)
+    {
+        return;
+    }
+
+    brancherDeconnexion();
+    await chargerArchives();
+}
+
+demarrer();

public/js/commun.js

@@ -0,0 +1,133 @@
+/**
+ * Fonctions partagées entre les pages.
+ */
+
+/**
+ * Appelle l'API et retourne la réponse JSON.
+ * Redirige vers la page de connexion si non authentifié (401).
+ */
+async function appelerApi(url, options)
+{
+    const reponse = await fetch(url, options);
+    const donnees = await reponse.json().catch(function ()
+    {
+        return {};
+    });
+
+    if (reponse.status === 401 && !url.includes("/api/connexion"))
+    {
+        window.location.href = "/connexion.html";
+        return null;
+    }
+
+    if (!reponse.ok)
+    {
+        throw new Error(donnees.erreur || "Erreur serveur");
+    }
+
+    return donnees;
+}
+
+/**
+ * Vérifie la session. Redirige vers connexion si besoin.
+ * Affiche le nom et le lien Comptes pour l'admin.
+ */
+async function verifierSession()
+{
+    const session = await appelerApi("/api/session");
+
+    if (!session || !session.connecte)
+    {
+        window.location.href = "/connexion.html";
+        return null;
+    }
+
+    const nomUtilisateur = document.getElementById("nomUtilisateur");
+    if (nomUtilisateur)
+    {
+        nomUtilisateur.textContent = session.utilisateur.login + " (" + session.utilisateur.profil + ")";
+    }
+
+    const lienComptes = document.getElementById("lienComptes");
+    if (lienComptes && session.utilisateur.profil === "admin")
+    {
+        lienComptes.hidden = false;
+    }
+
+    return session.utilisateur;
+}
+
+/**
+ * Branche le bouton de déconnexion s'il est présent sur la page.
+ */
+function brancherDeconnexion()
+{
+    const bouton = document.getElementById("boutonDeconnexion");
+
+    if (!bouton)
+    {
+        return;
+    }
+
+    bouton.addEventListener("click", async function ()
+    {
+        await appelerApi("/api/deconnexion", { method: "POST" });
+        window.location.href = "/connexion.html";
+    });
+}
+
+/**
+ * Affiche une étiquette lisible pour le type d'animal.
+ */
+function libelleType(type)
+{
+    return type === "coq" ? "Coq" : "Poule";
+}
+
+/**
+ * Affiche une étiquette pour l'état de santé.
+ */
+function libelleSante(etat)
+{
+    if (etat === "moyen")
+    {
+        return "Moyen";
+    }
+
+    if (etat === "mauvais")
+    {
+        return "Mauvais";
+    }
+
+    return "Bon";
+}
+
+/**
+ * Construit le HTML d'une carte animal (liste).
+ */
+function htmlCarteAnimal(animal)
+{
+    let photoHtml = "<div class=\"sans-photo\">Pas de photo</div>";
+
+    if (animal.photo)
+    {
+        photoHtml = "<img src=\"" + animal.photo + "\" alt=\"Photo de l'animal\">";
+    }
+
+    let badges = "";
+
+    if (animal.actif === false && animal.dateFinDeVie)
+    {
+        badges += "<span class=\"badge\">Décédé le " + animal.dateFinDeVie + "</span>";
+    }
+
+    return (
+        "<a class=\"carte-animal\" href=\"/animal.html?id=" + animal.id + "\">" +
+            photoHtml +
+            "<h3>" + libelleType(animal.type) + "</h3>" +
+            "<p>Bague : " + (animal.couleurBague || "—") + " " + (animal.numeroBague || "") + "</p>" +
+            "<p>Santé : " + libelleSante(animal.etatSante) + "</p>" +
+            badges +
+        "</a>"
+    );
+}

public/js/comptes.js

@@ -0,0 +1,86 @@
+/**
+ * Page comptes (admin uniquement) : liste et création.
+ */
+
+async function chargerComptes()
+{
+    const comptes = await appelerApi("/api/utilisateurs");
+
+    if (!comptes)
+    {
+        return;
+    }
+
+    const tbody = document.getElementById("listeComptes");
+    tbody.innerHTML = comptes.map(function (compte)
+    {
+        return (
+            "<tr>" +
+                "<td>" + compte.login + "</td>" +
+                "<td>" + compte.profil + "</td>" +
+            "</tr>"
+        );
+    }).join("");
+}
+
+document.getElementById("boutonNouveauCompte").addEventListener("click", function ()
+{
+    document.getElementById("formCompte").reset();
+    document.getElementById("erreurCompte").hidden = true;
+    document.getElementById("dialogueCompte").showModal();
+});
+
+document.getElementById("annulerCompte").addEventListener("click", function ()
+{
+    document.getElementById("dialogueCompte").close();
+});
+
+document.getElementById("formCompte").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    const erreurCompte = document.getElementById("erreurCompte");
+    erreurCompte.hidden = true;
+
+    try
+    {
+        await appelerApi("/api/utilisateurs", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                login: document.getElementById("login").value.trim(),
+                motDePasse: document.getElementById("motDePasse").value,
+                profil: document.getElementById("profil").value
+            })
+        });
+
+        document.getElementById("dialogueCompte").close();
+        await chargerComptes();
+    }
+    catch (erreur)
+    {
+        erreurCompte.textContent = erreur.message;
+        erreurCompte.hidden = false;
+    }
+});
+
+async function demarrer()
+{
+    const utilisateur = await verifierSession();
+
+    if (!utilisateur)
+    {
+        return;
+    }
+
+    if (utilisateur.profil !== "admin")
+    {
+        window.location.href = "/";
+        return;
+    }
+
+    brancherDeconnexion();
+    await chargerComptes();
+}
+
+demarrer();

public/js/connexion.js

@@ -0,0 +1,42 @@
+/**
+ * Page de connexion.
+ */
+
+document.getElementById("formConnexion").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    const messageErreur = document.getElementById("messageErreur");
+    messageErreur.hidden = true;
+
+    const login = document.getElementById("login").value.trim();
+    const motDePasse = document.getElementById("motDePasse").value;
+
+    try
+    {
+        await appelerApi("/api/connexion", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                login: login,
+                motDePasse: motDePasse
+            })
+        });
+
+        window.location.href = "/";
+    }
+    catch (erreur)
+    {
+        messageErreur.textContent = erreur.message;
+        messageErreur.hidden = false;
+    }
+});
+
+/* Si déjà connecté, aller directement à l'accueil */
+appelerApi("/api/session").then(function (session)
+{
+    if (session && session.connecte)
+    {
+        window.location.href = "/";
+    }
+});

public/js/fiche.js

@@ -0,0 +1,319 @@
+/**
+ * Page fiche animal : détail, modification, périodes, décès.
+ */
+
+let animalCourant = null;
+let periodesPonte = [];
+let periodesCouvage = [];
+
+function recupererIdDepuisUrl()
+{
+    const parametres = new URLSearchParams(window.location.search);
+    return parametres.get("id");
+}
+
+function afficherFiche()
+{
+    const animal = animalCourant;
+    let photoHtml = "<div class=\"sans-photo\">Pas de photo</div>";
+
+    if (animal.photo)
+    {
+        photoHtml = "<img src=\"" + animal.photo + "\" alt=\"Photo\">";
+    }
+
+    let actions = "";
+
+    if (animal.actif)
+    {
+        actions =
+            "<div class=\"actions-fiche\">" +
+                "<button type=\"button\" id=\"boutonModifier\">Modifier</button>" +
+                "<button type=\"button\" id=\"boutonDeces\" class=\"danger\">Marquer comme décédé</button>" +
+            "</div>";
+    }
+
+    const dateFin = animal.dateFinDeVie
+        ? "<dt>Date de fin de vie</dt><dd>" + animal.dateFinDeVie + "</dd>"
+        : "";
+
+    document.getElementById("ficheAnimal").innerHTML =
+        photoHtml +
+        "<div>" +
+            "<h2>" + libelleType(animal.type) + "</h2>" +
+            "<dl>" +
+                "<dt>Couleur de bague</dt><dd>" + (animal.couleurBague || "—") + "</dd>" +
+                "<dt>Numéro de bague</dt><dd>" + (animal.numeroBague || "—") + "</dd>" +
+                "<dt>Date de naissance</dt><dd>" + (animal.dateNaissance || "—") + "</dd>" +
+                "<dt>État de santé</dt><dd>" + libelleSante(animal.etatSante) + "</dd>" +
+                "<dt>Statut</dt><dd>" + (animal.actif ? "Actif" : "Archivé") + "</dd>" +
+                dateFin +
+            "</dl>" +
+            actions +
+        "</div>";
+
+    if (animal.actif)
+    {
+        document.getElementById("boutonModifier").addEventListener("click", ouvrirModification);
+        document.getElementById("boutonDeces").addEventListener("click", ouvrirDeces);
+    }
+
+    /* Ponte et couvage : poules uniquement */
+    const sectionPeriodes = document.getElementById("sectionPeriodes");
+
+    if (animal.type === "poule")
+    {
+        sectionPeriodes.hidden = false;
+        afficherPeriodes();
+    }
+    else
+    {
+        sectionPeriodes.hidden = true;
+    }
+}
+
+function htmlTableauPeriodes(periodes, typePeriode)
+{
+    if (periodes.length === 0)
+    {
+        return "<p class=\"message-vide\">Aucune période enregistrée.</p>";
+    }
+
+    let lignes = periodes.map(function (periode)
+    {
+        const enCours = !periode.dateFin;
+        const statut = enCours ? "<span class=\"badge\">En cours</span>" : "";
+        let boutonCloture = "";
+
+        if (enCours && animalCourant.actif)
+        {
+            boutonCloture =
+                "<button type=\"button\" class=\"secondaire\" data-cloturer=\"" +
+                typePeriode + "\" data-id=\"" + periode.id + "\">Clôturer</button>";
+        }
+
+        return (
+            "<tr>" +
+                "<td>" + periode.dateDebut + "</td>" +
+                "<td>" + (periode.dateFin || "—") + " " + statut + "</td>" +
+                "<td>" + (periode.remarque || "—") + "</td>" +
+                "<td>" + boutonCloture + "</td>" +
+            "</tr>"
+        );
+    }).join("");
+
+    return (
+        "<table class=\"tableau-periodes\">" +
+            "<thead><tr><th>Début</th><th>Fin</th><th>Remarque</th><th></th></tr></thead>" +
+            "<tbody>" + lignes + "</tbody>" +
+        "</table>"
+    );
+}
+
+function afficherPeriodes()
+{
+    document.getElementById("listePonte").innerHTML = htmlTableauPeriodes(periodesPonte, "ponte");
+    document.getElementById("listeCouvage").innerHTML = htmlTableauPeriodes(periodesCouvage, "couvage");
+
+    document.querySelectorAll("[data-cloturer]").forEach(function (bouton)
+    {
+        bouton.addEventListener("click", async function ()
+        {
+            const type = bouton.getAttribute("data-cloturer");
+            const id = bouton.getAttribute("data-id");
+            const aujourdHui = new Date().toISOString().slice(0, 10);
+            const url = type === "ponte"
+                ? "/api/periodes-ponte/" + id
+                : "/api/periodes-couvage/" + id;
+
+            await appelerApi(url, {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ dateFin: aujourdHui })
+            });
+
+            await chargerFiche();
+        });
+    });
+}
+
+function ouvrirModification()
+{
+    document.getElementById("animalId").value = animalCourant.id;
+    document.getElementById("type").value = animalCourant.type;
+    document.getElementById("couleurBague").value = animalCourant.couleurBague || "";
+    document.getElementById("numeroBague").value = animalCourant.numeroBague || "";
+    document.getElementById("dateNaissance").value = animalCourant.dateNaissance || "";
+    document.getElementById("etatSante").value = animalCourant.etatSante || "bon";
+    document.getElementById("photo").value = "";
+    document.getElementById("erreurAnimal").hidden = true;
+    document.getElementById("dialogueAnimal").showModal();
+}
+
+function ouvrirDeces()
+{
+    document.getElementById("dateFinDeVie").value = new Date().toISOString().slice(0, 10);
+    document.getElementById("dialogueDeces").showModal();
+}
+
+function ouvrirPeriode(type)
+{
+    document.getElementById("typePeriode").value = type;
+    document.getElementById("titrePeriode").textContent =
+        type === "ponte" ? "Nouvelle période de ponte" : "Nouvelle période de couvage";
+    document.getElementById("formPeriode").reset();
+    document.getElementById("typePeriode").value = type;
+    document.getElementById("dateDebut").value = new Date().toISOString().slice(0, 10);
+    document.getElementById("erreurPeriode").hidden = true;
+    document.getElementById("dialoguePeriode").showModal();
+}
+
+async function chargerFiche()
+{
+    const id = recupererIdDepuisUrl();
+
+    if (!id)
+    {
+        window.location.href = "/";
+        return;
+    }
+
+    const donnees = await appelerApi("/api/animaux/" + id);
+
+    if (!donnees)
+    {
+        return;
+    }
+
+    animalCourant = donnees.animal;
+    periodesPonte = donnees.periodesPonte;
+    periodesCouvage = donnees.periodesCouvage;
+    afficherFiche();
+}
+
+document.getElementById("annulerAnimal").addEventListener("click", function ()
+{
+    document.getElementById("dialogueAnimal").close();
+});
+
+document.getElementById("annulerDeces").addEventListener("click", function ()
+{
+    document.getElementById("dialogueDeces").close();
+});
+
+document.getElementById("annulerPeriode").addEventListener("click", function ()
+{
+    document.getElementById("dialoguePeriode").close();
+});
+
+document.getElementById("boutonAjouterPonte").addEventListener("click", function ()
+{
+    ouvrirPeriode("ponte");
+});
+
+document.getElementById("boutonAjouterCouvage").addEventListener("click", function ()
+{
+    ouvrirPeriode("couvage");
+});
+
+document.getElementById("formAnimal").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    const erreurAnimal = document.getElementById("erreurAnimal");
+    erreurAnimal.hidden = true;
+
+    const formData = new FormData();
+    formData.append("type", document.getElementById("type").value);
+    formData.append("couleurBague", document.getElementById("couleurBague").value);
+    formData.append("numeroBague", document.getElementById("numeroBague").value);
+    formData.append("dateNaissance", document.getElementById("dateNaissance").value);
+    formData.append("etatSante", document.getElementById("etatSante").value);
+
+    const photo = document.getElementById("photo").files[0];
+    if (photo)
+    {
+        formData.append("photo", photo);
+    }
+
+    try
+    {
+        await appelerApi("/api/animaux/" + animalCourant.id, {
+            method: "PUT",
+            body: formData
+        });
+
+        document.getElementById("dialogueAnimal").close();
+        await chargerFiche();
+    }
+    catch (erreur)
+    {
+        erreurAnimal.textContent = erreur.message;
+        erreurAnimal.hidden = false;
+    }
+});
+
+document.getElementById("formDeces").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    await appelerApi("/api/animaux/" + animalCourant.id + "/deces", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            dateFinDeVie: document.getElementById("dateFinDeVie").value
+        })
+    });
+
+    document.getElementById("dialogueDeces").close();
+    window.location.href = "/archives.html";
+});
+
+document.getElementById("formPeriode").addEventListener("submit", async function (event)
+{
+    event.preventDefault();
+
+    const erreurPeriode = document.getElementById("erreurPeriode");
+    erreurPeriode.hidden = true;
+
+    const type = document.getElementById("typePeriode").value;
+    const url = type === "ponte" ? "/api/periodes-ponte" : "/api/periodes-couvage";
+    const dateFin = document.getElementById("dateFin").value || null;
+
+    try
+    {
+        await appelerApi(url, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                idAnimal: animalCourant.id,
+                dateDebut: document.getElementById("dateDebut").value,
+                dateFin: dateFin,
+                remarque: document.getElementById("remarque").value
+            })
+        });
+
+        document.getElementById("dialoguePeriode").close();
+        await chargerFiche();
+    }
+    catch (erreur)
+    {
+        erreurPeriode.textContent = erreur.message;
+        erreurPeriode.hidden = false;
+    }
+});
+
+async function demarrer()
+{
+    const utilisateur = await verifierSession();
+
+    if (!utilisateur)
+    {
+        return;
+    }
+
+    brancherDeconnexion();
+    await chargerFiche();
+}
+
+demarrer();