Début du projet

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();