poupoule/public/js/fiche.js

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