UI : improve UI for generic elections

- Update Card title on select
- showcase the elements currently selected
- empty children zone on delete or changing selection

web/components/management/area.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+import * as Common from "/services/common/common.js";
+import * as Messages from "/services/messages/messages.js";
+import { Delete } from "/services/common/delete.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const areaComponent = new Area(parent);
+  await areaComponent.mount(where);
+  return areaComponent;
+}
+
+class Area {
+  constructor(parent) {
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title" id="area-title">
+          Circonscriptions
+        </p>
+        <button id="area-new" class="button is-success" disabled>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="area-list" class="content">
+          Sélectionner une élection.
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+    this.mountModal("area-modal");
+    this.handleDom();
+  }
+
+  handleDom() {
+    let areaHandler = this;
+    document.getElementById(`area-new`).addEventListener("click", function () {
+      areaHandler.newArea(areaHandler.election);
+    });
+
+    document
+      .getElementById(`area-modal-close`)
+      .addEventListener("click", function () {
+        Common.toggleModal("area-modal", "area-modal-card");
+      });
+    document
+      .getElementById(`area-modal-cancel`)
+      .addEventListener("click", function () {
+        Common.toggleModal("area-modal", "area-modal-card");
+      });
+    document
+      .getElementById(`area-modal-save`)
+      .addEventListener("click", async function () {
+        await areaHandler.saveArea();
+      });
+    document
+      .getElementById(`area-modal-save-area`)
+      .addEventListener("click", async function () {
+        await areaHandler.saveArea();
+        await new Promise((r) => setTimeout(r, 800));
+        areaHandler.newArea(areaHandler.election);
+      });
+    document
+      .getElementById(`area-modal-save-section`)
+      .addEventListener("click", async function () {
+        let area = await areaHandler.saveArea();
+        await new Promise((r) => setTimeout(r, 800));
+        areaHandler.parent.sectionHandler.newSection(area);
+      });
+  }
+
+  mountModal(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <div class="modal-background"></div>
+      <div class="modal-card" id="area-modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            Ajout/modification d'une circonscription
+          </p>
+          <button
+            class="delete"
+            aria-label="close"
+            id="area-modal-close"
+          ></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="field">
+            <label>Id</label>
+            <div class="control">
+              <input class="input" type="number" id="area-modal-id" disabled />
+            </div>
+          </div>
+          <div class="field">
+            <label>Nom</label>
+            <div class="control">
+              <input class="input" type="text" id="area-modal-name" />
+            </div>
+          </div>
+          <div class="field">
+            <label>Nombre de siège</label>
+            <div class="control">
+              <input class="input" type="number" id="area-modal-seat-number" />
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button id="area-modal-save" class="button is-success">
+            Sauvegarder
+          </button>
+          <button id="area-modal-save-area" class="button is-success">
+            Sauvegarder <br />
+            (ajouter circonscription)
+          </button>
+          <button id="area-modal-save-section" class="button is-success">
+            Sauvegarder <br />(ajouter ville)
+          </button>
+          <button id="area-modal-cancel" class="button">Annuler</button>
+        </footer>
+      </div>
+    `;
+  }
+
+  async displayAreas() {
+    let areaHandler = this;
+    let areas = await this.updateAreas();
+    const markup = areas.map((area) => this.areaTemplate(area)).join("");
+    document.getElementById("area-list").innerHTML = markup;
+    document.getElementById("area-new").removeAttribute("disabled");
+    document.getElementById("area-title").innerHTML =
+      "Circonscriptions de&nbsp;<em> " + this.election.Name + "</em>";
+
+    areas.map((area) => {
+      document
+        .getElementById(`areas-area-edit-${area.ID}`)
+        .addEventListener("click", function () {
+          areaHandler.editArea(area);
+        });
+      document
+        .getElementById(`areas-area-delete-${area.ID}`)
+        .addEventListener("click", function () {
+          new Delete(() => {
+            areaHandler.deleteArea(area);
+          });
+        });
+      document
+        .getElementById(`areas-area-${area.ID}`)
+        .addEventListener("click", function () {
+          areaHandler.activateArea(area);
+          areaHandler.parent.sectionHandler.area = area;
+          areaHandler.parent.sectionHandler.displaySections();
+          document.getElementById("desk-new").setAttribute("disabled", "true");
+          document
+            .getElementById("section-new")
+            .setAttribute("disabled", "true");
+        });
+    });
+  }
+
+  emptyAreas() {
+    this.election = null;
+    document.getElementById("area-title").innerHTML = "Circonscriptions";
+    document.getElementById("area-list").innerHTML =
+      "Veuillez sélectionner une élection";
+  }
+
+  areaTemplate(area) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="areas-area-${area.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div class="level-left">
+              ${area.Name} (Nombre de siège : ${area.SeatNumber})
+            </div>
+            <div class="level-right">
+              <a
+                id="areas-area-edit-${area.ID}"
+                class="button is-link is-small"
+                title="Modifier"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-pen"></i>
+                </span>
+              </a>
+              <a
+                id="areas-area-delete-${area.ID}"
+                class="button is-danger is-small"
+                title="Supprimer"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-times"></i>
+                </span>
+              </a>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  async activateArea(area) {
+    this.parent.sectionHandler.emptySections();
+    this.parent.deskHandler.emptyDesks();
+    let areas = await this.updateAreas();
+    areas.forEach((area) => {
+      document
+        .getElementById(`areas-area-${area.ID}`)
+        .classList.remove("active-card");
+    });
+    document
+      .getElementById(`areas-area-${area.ID}`)
+      .classList.add("active-card");
+  }
+
+  newArea(election) {
+    this.method = "POST";
+    this.election = election;
+    document.getElementById("area-modal-id").value = null;
+    document.getElementById("area-modal-name").value = election.Name;
+    document.getElementById("area-modal-seat-number").value = null;
+    Common.toggleModal("area-modal", "area-modal-card");
+  }
+
+  editArea(area) {
+    this.method = "PUT";
+    document.getElementById("area-modal-id").value = area.ID;
+    document.getElementById("area-modal-name").value = area.Name;
+    document.getElementById("area-modal-seat-number").value = area.SeatNumber;
+    Common.toggleModal("area-modal", "area-modal-card");
+  }
+
+  async saveArea() {
+    let area;
+    if (this.method == "POST")
+      document.getElementById("area-modal-id").value = null;
+
+    try {
+      const response = await fetch(
+        "/api/Area/" + document.getElementById("area-modal-id").value,
+        {
+          method: this.method,
+          headers: new Headers({
+            "XSRF-Token": current_user.xsrftoken,
+          }),
+          body: JSON.stringify({
+            ID: parseInt(document.getElementById("area-modal-id").value),
+            ElectionID: this.election.ID,
+            Name: document.getElementById("area-modal-name").value,
+            SeatNumber: parseInt(
+              document.getElementById("area-modal-seat-number").value
+            ),
+          }),
+        }
+      );
+      if (response.status !== 200) {
+        throw new Error(
+          `Area could not be updated or created (status ${response.status})`
+        );
+      }
+      area = await response.json();
+      await this.displayAreas();
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    Common.toggleModal("area-modal", "area-modal-card");
+    this.activateArea(area);
+    this.parent.sectionHandler.area = area;
+    this.parent.sectionHandler.displaySections();
+    return area;
+  }
+
+  async updateAreas() {
+    let areaHandler = this;
+    try {
+      const response = await fetch("/api/Area/", {
+        method: "GET",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Areas could not be fetched (status ${response.status})`
+        );
+      }
+      let areas = await response.json();
+      return areas.filter(function (area) {
+        return area.ElectionID == areaHandler.election.ID;
+      });
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+  }
+
+  async deleteArea(area) {
+    try {
+      const response = await fetch("/api/Area/" + area.ID, {
+        method: "delete",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Area could not be deleted (status ${response.status})`
+        );
+      }
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    this.displayAreas();
+    this.parent.sectionHandler.emptySections();
+    this.parent.deskHandler.emptyDesks();
+    document.getElementById("desk-new").setAttribute("disabled", "true");
+    document.getElementById("section-new").setAttribute("disabled", "true");
+  }
+}

web/components/management/desk.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+import * as Common from "/services/common/common.js";
+import * as Messages from "/services/messages/messages.js";
+import { Delete } from "/services/common/delete.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where) {
+  const deskComponent = new Desk();
+  await deskComponent.mount(where);
+  return deskComponent;
+}
+
+class Desk {
+  constructor() {}
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title" id="desk-title">
+          Bureaux
+        </p>
+        <button id="desk-new" class="button is-success" disabled>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="desk-list" class="content">
+          Sélectionner une section.
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+    this.mountModal("desk-modal");
+    this.handleDom();
+  }
+
+  handleDom() {
+    let deskHandler = this;
+    document.getElementById(`desk-new`).addEventListener("click", function () {
+      deskHandler.newDesk(deskHandler.section)
+    });
+
+    document
+      .getElementById(`desk-modal-close`)
+      .addEventListener("click", function () {
+        Common.toggleModal("desk-modal", "desk-modal-card");
+      });
+    document
+      .getElementById(`desk-modal-cancel`)
+      .addEventListener("click", function () {
+        Common.toggleModal("desk-modal", "desk-modal-card");
+      });
+    document
+      .getElementById(`desk-modal-save`)
+      .addEventListener("click", async function () {
+        await deskHandler.saveDesk();
+      });
+    document
+      .getElementById(`desk-modal-save-desk`)
+      .addEventListener("click", async function () {
+        await deskHandler.saveDesk();
+        await new Promise((r) => setTimeout(r, 800));
+        deskHandler.newDesk(deskHandler.section);
+      });
+  }
+
+  mountModal(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <div class="modal-background"></div>
+      <div class="modal-card" id="desk-modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            Ajout/modification d'un bureau
+          </p>
+          <button
+            class="delete"
+            aria-label="close"
+            id="desk-modal-close"
+          ></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="field">
+            <label>Id</label>
+            <div class="control">
+              <input class="input" type="number" id="desk-modal-id" disabled />
+            </div>
+          </div>
+          <div class="field">
+            <label>Nom</label>
+            <div class="control">
+              <input class="input" type="text" id="desk-modal-name" />
+            </div>
+          </div>
+          <div class="field">
+            <label>Subscribed</label>
+            <div class="control">
+              <input class="input" type="number" id="desk-modal-subscribed" />
+            </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <label class="checkbox">
+                <input class="input" type="checkbox" id="desk-modal-witness" />
+                Bureau témoin
+              </label>
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button id="desk-modal-save" class="button is-success">
+            Sauvegarder
+          </button>
+          <button id="desk-modal-save-desk" class="button is-success">
+            Sauvegarder (ajouter bureau)
+          </button>
+          <button id="desk-modal-cancel" class="button">Annuler</button>
+        </footer>
+      </div>
+    `;
+  }
+
+  async displayDesks() {
+    let deskHandler = this;
+    let desks = await this.updateDesks();
+    const markup = desks.map((section) => this.deskTemplate(section)).join("");
+    document.getElementById("desk-list").innerHTML = markup;
+    document.getElementById("desk-new").removeAttribute("disabled");
+    document.getElementById("desk-title").innerHTML =
+      "Bureaux de&nbsp;<em> " + this.section.Name + "</em>";
+
+    desks.map((desk) => {
+      document
+        .getElementById(`desks-desk-edit-${desk.ID}`)
+        .addEventListener("click", function () {
+          deskHandler.editSection(desk);
+        });
+      document
+        .getElementById(`desks-desk-delete-${desk.ID}`)
+        .addEventListener("click", function () {
+          new Delete(() => {
+            deskHandler.deleteDesk(desk);
+          });
+        });
+    });
+  }
+
+  emptyDesks() {
+    document.getElementById("desk-title").innerHTML =
+      "Bureaux";
+    this.section = null;
+    document.getElementById("desk-list").innerHTML = "Veuillez sélectionner une section";
+  }
+
+  deskTemplate(desk) {
+    return /* HTML */ `<div class="card card-list">
+      <div class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div class="level-left">
+              ${desk.Name} (Inscrits : ${desk.Subscribed})
+            </div>
+            <div class="level-right">
+              <a
+                id="desks-desk-edit-${desk.ID}"
+                class="button is-link is-small"
+                title="Modifier"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-pen"></i>
+                </span>
+              </a>
+              <a
+                id="desks-desk-delete-${desk.ID}"
+                class="button is-danger is-small"
+                title="Supprimer"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-times"></i>
+                </span>
+              </a>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  newDesk(section) {
+    this.method = "POST";
+    this.section = section;
+    document.getElementById("desk-modal-id").value = null;
+    document.getElementById("desk-modal-name").value = section.Name;
+    document.getElementById("desk-modal-subscribed").value = section.Subscribed;
+    document.getElementById("desk-modal-witness").checked = section.WitnessDesk;
+    Common.toggleModal("desk-modal", "desk-modal-card");
+  }
+
+  editSection(section) {
+    this.method = "PUT";
+    document.getElementById("desk-modal-id").value = section.ID;
+    document.getElementById("desk-modal-name").value = section.Name;
+    document.getElementById("desk-modal-subscribed").value = section.Subscribed;
+    document.getElementById("desk-modal-witness").checked = section.WitnessDesk;
+    Common.toggleModal("desk-modal", "desk-modal-card");
+  }
+
+  async saveDesk() {
+    let desk;
+    if (this.method == "POST")
+      document.getElementById("desk-modal-id").value = null;
+
+    try {
+      const response = await fetch(
+        "/api/Desk/" + document.getElementById("desk-modal-id").value,
+        {
+          method: this.method,
+          headers: new Headers({
+            "XSRF-Token": current_user.xsrftoken,
+          }),
+          body: JSON.stringify({
+            ID: parseInt(document.getElementById("desk-modal-id").value),
+            SectionID: this.section.ID,
+            Name: document.getElementById("desk-modal-name").value,
+            Subscribed: parseInt(
+              document.getElementById("desk-modal-subscribed").value
+            ),
+            WitnessDesk: document.getElementById("desk-modal-witness").checked,
+          }),
+        }
+      );
+      if (response.status !== 200) {
+        throw new Error(
+          `Desk could not be updated or created (status ${response.status})`
+        );
+      }
+      desk = await response.json();
+      await this.displayDesks();
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    Common.toggleModal("desk-modal", "desk-modal-card");
+  }
+
+  async updateDesks() {
+    let deskHandler = this;
+    try {
+      const response = await fetch("/api/Desk/", {
+        method: "GET",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Desks could not be fetched (status ${response.status})`
+        );
+      }
+      let desks = await response.json();
+      return desks.filter(function (desk) {
+        return desk.SectionID == deskHandler.section.ID;
+      });
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+  }
+
+  async deleteDesk(desk) {
+    try {
+      const response = await fetch("/api/Desk/" + desk.ID, {
+        method: "delete",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Desk could not be deleted (status ${response.status})`
+        );
+      }
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    this.displayDesks();
+  }
+}

web/components/management/election.js

 // Imports
 import * as Auth from "/services/auth/auth.js";
+import * as Common from "/services/common/common.js";
+import * as Messages from "/services/messages/messages.js";
+import { Delete } from "/services/common/delete.js";
 
 // DOM elements
 
 // local variables
 let current_user;
 
-export async function mount(where) {
-  const roundComponent = new Election();
-  await roundComponent.mount(where);
+export async function mount(where, parent) {
+  const electionComponent = new Election(parent);
+  await electionComponent.mount(where);
+  return electionComponent;
 }
 
 class Election {
-  constructor() {}
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
 
   async mount(where) {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
-      Ceci est une élection
+      <header class="card-header">
+        <p class="card-header-title">
+          Elections
+        </p>
+        <button id="election-new" class="button is-success">
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="election-list" class="content">Liste des élections</div>
+      </div>
     `;
     current_user = await Auth.GetUser();
+    this.mountModal("election-modal");
+    this.handleDom();
+    this.displayElections();
+  }
+
+  handleDom() {
+    let electionHandler = this;
+    document
+      .getElementById(`election-new`)
+      .addEventListener("click", function () {
+        electionHandler.newElection();
+      });
+
+    document
+      .getElementById(`election-modal-close`)
+      .addEventListener("click", function () {
+        Common.toggleModal("election-modal", "election-modal-card");
+      });
+    document
+      .getElementById(`election-modal-cancel`)
+      .addEventListener("click", function () {
+        Common.toggleModal("election-modal", "election-modal-card");
+      });
+    document
+      .getElementById(`election-modal-save`)
+      .addEventListener("click", async function () {
+        await electionHandler.saveElection();
+      });
+    document
+      .getElementById(`election-modal-save-area`)
+      .addEventListener("click", async function () {
+        let election = await electionHandler.saveElection();
+        electionHandler.parent.areaHandler.newArea(election);
+      });
+  }
+
+  mountModal(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <div class="modal-background"></div>
+      <div class="modal-card" id="election-modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Ajout/modification d'une élection</p>
+          <button
+            class="delete"
+            aria-label="close"
+            id="election-modal-close"
+          ></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="field">
+            <label>Id</label>
+            <div class="control">
+              <input
+                class="input"
+                type="number"
+                id="election-modal-id"
+                disabled
+              />
+            </div>
+          </div>
+          <div class="field">
+            <label>Nom</label>
+            <div class="control">
+              <input class="input" type="text" id="election-modal-name" />
+            </div>
+          </div>
+          <div class="field">
+            <label>Système de vote</label><br />
+            <div class="control select">
+              <select name="ballot-type" id="election-modal-ballot-type">
+                <option value="local-counsil-direct"
+                  >Conseil communautaire au suffrage direct</option
+                >
+                <option value="local-counsil-indirect"
+                  >Conseil communautaire au suffrage indirect</option
+                >
+              </select>
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button id="election-modal-save" class="button is-success">
+            Sauvegarder
+          </button>
+          <button id="election-modal-save-area" class="button is-success">
+            Sauvegarder (ajouter circonscription)
+          </button>
+          <button id="election-modal-cancel" class="button">Annuler</button>
+        </footer>
+      </div>
+    `;
+  }
+
+  async displayElections() {
+    let elections = await this.updateElections();
+    const markup = elections
+      .map((election) => this.electionTemplate(election))
+      .join("");
+    document.getElementById("election-list").innerHTML = markup;
+
+    let electionHandler = this;
+    elections.map((election) => {
+      document
+        .getElementById(`elections-election-edit-${election.ID}`)
+        .addEventListener("click", function () {
+          electionHandler.editElection(election);
+        });
+      document
+        .getElementById(`elections-election-delete-${election.ID}`)
+        .addEventListener("click", function () {
+          new Delete(() => {
+            electionHandler.deleteElection(election);
+          });
+        });
+      document
+        .getElementById(`elections-election-${election.ID}`)
+        .addEventListener("click", function () {
+          electionHandler.activateElection(election);
+          electionHandler.parent.areaHandler.election = election;
+          electionHandler.parent.areaHandler.displayAreas();
+          document.getElementById("desk-new").setAttribute("disabled", "true");
+          document
+            .getElementById("section-new")
+            .setAttribute("disabled", "true");
+          document.getElementById("area-new").setAttribute("disabled", "true");
+        });
+    });
+  }
+
+  electionTemplate(election) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="elections-election-${election.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div class="level-left">
+              ${election.Name} (${election.BallotType})
+            </div>
+            <div class="level-right">
+              <a
+                id="elections-election-edit-${election.ID}"
+                class="button is-link is-small"
+                title="Modifier"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-pen"></i>
+                </span>
+              </a>
+              <a
+                id="elections-election-delete-${election.ID}"
+                class="button is-danger is-small"
+                title="Supprimer"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-times"></i>
+                </span>
+              </a>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  async activateElection(election) {
+    this.parent.areaHandler.emptyAreas();
+    this.parent.sectionHandler.emptySections();
+    this.parent.deskHandler.emptyDesks();
+    let elections = await this.updateElections();
+    elections.forEach((election) => {
+      document
+        .getElementById(`elections-election-${election.ID}`)
+        .classList.remove("active-card");
+    });
+    document
+      .getElementById(`elections-election-${election.ID}`)
+      .classList.add("active-card");
+  }
+
+  newElection() {
+    this.method = "POST";
+    document.getElementById("election-modal-id").value = null;
+    document.getElementById("election-modal-name").value = null;
+    document.getElementById("election-modal-ballot-type").value = null;
+    Common.toggleModal("election-modal", "election-modal-card");
+  }
+
+  editElection(election) {
+    this.method = "PUT";
+    document.getElementById("election-modal-id").value = election.ID;
+    document.getElementById("election-modal-name").value = election.Name;
+    document.getElementById("election-modal-ballot-type").value =
+      election.BallotType;
+    Common.toggleModal("election-modal", "election-modal-card");
+  }
+
+  async saveElection() {
+    let election;
+    if (this.method == "POST")
+      document.getElementById("election-modal-id").value = null;
+
+    try {
+      const response = await fetch(
+        "/api/Election/" + document.getElementById("election-modal-id").value,
+        {
+          method: this.method,
+          headers: new Headers({
+            "XSRF-Token": current_user.xsrftoken,
+          }),
+          body: JSON.stringify({
+            ID: parseInt(document.getElementById("election-modal-id").value),
+            Name: document.getElementById("election-modal-name").value,
+            BallotType: document.getElementById("election-modal-ballot-type")
+              .value,
+          }),
+        }
+      );
+      if (response.status !== 200) {
+        throw new Error(
+          `Election could not be updated or created (status ${response.status})`
+        );
+      }
+      election = await response.json();
+      this.displayElections();
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    Common.toggleModal("election-modal", "election-modal-card");
+    this.activateElection(election);
+    this.parent.areaHandler.election = election;
+    this.parent.areaHandler.displayAreas();
+    return election;
+  }
+
+  async updateElections() {
+    try {
+      const response = await fetch("/api/Election/", {
+        method: "GET",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Elections could not be fetched (status ${response.status})`
+        );
+      }
+      return await response.json();
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+  }
+
+  async deleteElection(election) {
+    try {
+      const response = await fetch("/api/Election/" + election.ID, {
+        method: "delete",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Election could not be deleted (status ${response.status})`
+        );
+      }
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    this.displayElections();
+    this.parent.areaHandler.emptyAreas();
+    this.parent.sectionHandler.emptySections();
+    this.parent.deskHandler.emptyDesks();
+    document.getElementById("desk-new").setAttribute("disabled", "true");
+    document.getElementById("section-new").setAttribute("disabled", "true");
+    document.getElementById("area-new").setAttribute("disabled", "true");
   }
 }

web/components/management/genericElection.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+import * as Election from "/components/management/election.js";
+import * as Areas from "/components/management/area.js";
+import * as Sections from "/components/management/section.js";
+import * as Desks from "/components/management/desk.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where) {
+  const genericElectionComponent = new GenericElection();
+  await genericElectionComponent.mount(where);
+}
+
+class GenericElection {
+  constructor() {}
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <div class="columns">
+        <div class="column">
+          <div id="election" class="card"></div>
+        </div>
+        <div class="column">
+          <div id="areas" class="card"></div>
+        </div>
+        <div class="column">
+          <div id="sections" class="card"></div>
+        </div>
+        <div class="column">
+          <div id="desks" class="card"></div>
+        </div>
+      </div>
+
+      <div class="modal" id="election-modal"></div>
+      <div class="modal" id="area-modal"></div>
+      <div class="modal" id="section-modal"></div>
+      <div class="modal" id="desk-modal"></div>
+    `;
+    current_user = await Auth.GetUser();
+    this.electionHandler = await Election.mount("election", this);
+    this.areaHandler = await Areas.mount("areas", this);
+    this.sectionHandler = await Sections.mount("sections", this);
+    this.deskHandler = await Desks.mount("desks", this);
+  }
+}

web/components/management/management.js

 // Imports
 import * as Auth from "/services/auth/auth.js";
-import * as Election from "/components/management/election.js";
+import * as Election from "/components/management/genericElection.js";
 import * as Round from "/components/management/round.js";
 
 // DOM elements
@@ -21,7 +21,7 @@ class Management {
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <div class="tabs is-boxed is-toggle is-fullwidth">
         <ul>
-          <li id="election" class="is-active">
+          <li id="elections" class="is-active">
             <a>
               <span class="icon is-small"
                 ><i class="fas fa-vote-yea" aria-hidden="true"></i
@@ -29,7 +29,7 @@ class Management {
               <span>Election</span>
             </a>
           </li>
-          <li id="round">
+          <li id="rounds">
             <a>
               <span class="icon is-small"
                 ><i class="fas fa-calendar" aria-hidden="true"></i
@@ -43,20 +43,20 @@ class Management {
     `;
     current_user = await Auth.GetUser();
     this.handleDom();
-    document.getElementById("election").click()
+    document.getElementById("elections").click()
 
   }
 
   handleDom(){
-      document.getElementById("election").addEventListener("click", async function (){
+      document.getElementById("elections").addEventListener("click", async function (){
         await Election.mount("management-section");
-        document.getElementById("election").setAttribute("class", "is-active")
-        document.getElementById("round").setAttribute("class", "")
+        document.getElementById("elections").setAttribute("class", "is-active")
+        document.getElementById("rounds").setAttribute("class", "")
     });
-    document.getElementById("round").addEventListener("click", async function (){
+    document.getElementById("rounds").addEventListener("click", async function (){
         await Round.mount("management-section");
-        document.getElementById("election").setAttribute("class", "")
-        document.getElementById("round").setAttribute("class", "is-active")
+        document.getElementById("elections").setAttribute("class", "")
+        document.getElementById("rounds").setAttribute("class", "is-active")
       });
   }
 }

web/components/management/section.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+import * as Common from "/services/common/common.js";
+import * as Messages from "/services/messages/messages.js";
+import { Delete } from "/services/common/delete.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const sectionComponent = new Section(parent);
+  await sectionComponent.mount(where);
+  return sectionComponent;
+}
+
+class Section {
+  constructor(parent) {
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title" id="section-title">
+          Sections
+        </p>
+        <button id="section-new" class="button is-success" disabled>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="section-list" class="content">
+          Sélectionner une circonscription.
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+    this.mountModal("section-modal");
+    this.handleDom();
+  }
+
+  handleDom() {
+    let sectionHandler = this;
+    document
+      .getElementById(`section-new`)
+      .addEventListener("click", function () {
+        sectionHandler.newSection(sectionHandler.area);
+      });
+
+    document
+      .getElementById(`section-modal-close`)
+      .addEventListener("click", function () {
+        Common.toggleModal("section-modal", "section-modal-card");
+      });
+    document
+      .getElementById(`section-modal-cancel`)
+      .addEventListener("click", function () {
+        Common.toggleModal("section-modal", "section-modal-card");
+      });
+    document
+      .getElementById(`section-modal-save`)
+      .addEventListener("click", async function () {
+        await sectionHandler.saveSection();
+      });
+    document
+      .getElementById(`section-modal-save-section`)
+      .addEventListener("click", async function () {
+        await sectionHandler.saveSection();
+        await new Promise((r) => setTimeout(r, 800));
+        sectionHandler.newSection(sectionHandler.area);
+      });
+    document
+      .getElementById(`section-modal-save-desk`)
+      .addEventListener("click", async function () {
+        let section = await sectionHandler.saveSection();
+        await new Promise((r) => setTimeout(r, 800));
+        sectionHandler.parent.deskHandler.section = section;
+        sectionHandler.parent.deskHandler.newDesk(section);
+      });
+  }
+
+  mountModal(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <div class="modal-background"></div>
+      <div class="modal-card" id="section-modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">
+            Ajout/modification d'une section
+          </p>
+          <button
+            class="delete"
+            aria-label="close"
+            id="section-modal-close"
+          ></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="field">
+            <label>Id</label>
+            <div class="control">
+              <input
+                class="input"
+                type="number"
+                id="section-modal-id"
+                disabled
+              />
+            </div>
+          </div>
+          <div class="field">
+            <label>Nom</label>
+            <div class="control">
+              <input class="input" type="text" id="section-modal-name" />
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button id="section-modal-save" class="button is-success">
+            Sauvegarder
+          </button>
+          <button id="section-modal-save-section" class="button is-success">
+            Sauvegarder <br />
+            (ajouter section)
+          </button>
+          <button id="section-modal-save-desk" class="button is-success">
+            Sauvegarder <br />
+            (ajouter bureau)
+          </button>
+          <button id="section-modal-cancel" class="button">Annuler</button>
+        </footer>
+      </div>
+    `;
+  }
+
+  async displaySections() {
+    let sectionHandler = this;
+    let sections = await this.updateSections();
+    const markup = sections
+      .map((section) => this.sectionTemplate(section))
+      .join("");
+    document.getElementById("section-list").innerHTML = markup;
+    document.getElementById("section-new").removeAttribute("disabled");
+    document.getElementById("section-title").innerHTML =
+      "Sections de&nbsp;<em> " + this.area.Name + "</em>";
+
+    sections.map((section) => {
+      document
+        .getElementById(`sections-section-edit-${section.ID}`)
+        .addEventListener("click", function () {
+          sectionHandler.editSection(section);
+        });
+      document
+        .getElementById(`sections-section-delete-${section.ID}`)
+        .addEventListener("click", function () {
+          new Delete(() => {
+            sectionHandler.deleteSection(section);
+          });
+        });
+      document
+        .getElementById(`sections-section-${section.ID}`)
+        .addEventListener("click", function () {
+          sectionHandler.activateSection(section);
+          sectionHandler.parent.deskHandler.section = section;
+          sectionHandler.parent.deskHandler.displayDesks();
+          document.getElementById("desk-new").setAttribute("disabled", "true");
+        });
+    });
+  }
+
+  emptySections() {
+    this.area = null;
+    document.getElementById("section-title").innerHTML = "Sections";
+    document.getElementById("section-list").innerHTML =
+      "Veuillez sélectionner une circonscription";
+  }
+
+  sectionTemplate(section) {
+    return /* HTML */ `<div class="card card-list">
+      <div id="sections-section-${section.ID}" class="card-content">
+        <div class="content">
+          <nav class="level">
+            <div class="level-left">
+              ${section.Name}
+            </div>
+            <div class="level-right">
+              <a
+                id="sections-section-edit-${section.ID}"
+                class="button is-link is-small"
+                title="Modifier"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-pen"></i>
+                </span>
+              </a>
+              <a
+                id="sections-section-delete-${section.ID}"
+                class="button is-danger is-small"
+                title="Supprimer"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-times"></i>
+                </span>
+              </a>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  async activateSection(section) {
+    this.parent.deskHandler.emptyDesks();
+    let sections = await this.updateSections();
+    sections.forEach((section) => {
+      document
+        .getElementById(`sections-section-${section.ID}`)
+        .classList.remove("active-card");
+    });
+    document
+      .getElementById(`sections-section-${section.ID}`)
+      .classList.add("active-card");
+  }
+
+  newSection(area) {
+    this.method = "POST";
+    this.area = area;
+    document.getElementById("section-modal-id").value = null;
+    document.getElementById("section-modal-name").value = area.Name;
+    Common.toggleModal("section-modal", "section-modal-card");
+  }
+
+  editSection(section) {
+    this.method = "PUT";
+    document.getElementById("section-modal-id").value = section.ID;
+    document.getElementById("section-modal-name").value = section.Name;
+    Common.toggleModal("section-modal", "section-modal-card");
+  }
+
+  async saveSection() {
+    let section;
+    if (this.method == "POST")
+      document.getElementById("section-modal-id").value = null;
+
+    try {
+      const response = await fetch(
+        "/api/Section/" + document.getElementById("section-modal-id").value,
+        {
+          method: this.method,
+          headers: new Headers({
+            "XSRF-Token": current_user.xsrftoken,
+          }),
+          body: JSON.stringify({
+            ID: parseInt(document.getElementById("section-modal-id").value),
+            AreaID: this.area.ID,
+            Name: document.getElementById("section-modal-name").value,
+          }),
+        }
+      );
+      if (response.status !== 200) {
+        throw new Error(
+          `Section could not be updated or created (status ${response.status})`
+        );
+      }
+      section = await response.json();
+      await this.displaySections();
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    Common.toggleModal("section-modal", "section-modal-card");
+    this.activateSection(section);
+    this.parent.deskHandler.section = section;
+    this.parent.deskHandler.displayDesks();
+    return section;
+  }
+
+  async updateSections() {
+    let sectionHandler = this;
+    try {
+      const response = await fetch("/api/Section/", {
+        method: "GET",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Sections could not be fetched (status ${response.status})`
+        );
+      }
+      let sections = await response.json();
+      return sections.filter(function (section) {
+        return section.AreaID == sectionHandler.area.ID;
+      });
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+  }
+
+  async deleteSection(section) {
+    try {
+      const response = await fetch("/api/Section/" + section.ID, {
+        method: "delete",
+        headers: new Headers({
+          "XSRF-Token": current_user.xsrftoken,
+        }),
+      });
+      if (response.status !== 200) {
+        throw new Error(
+          `Section could not be deleted (status ${response.status})`
+        );
+      }
+    } catch (e) {
+      Messages.Show("is-warning", e.message);
+      console.error(e);
+    }
+    this.displaySections();
+    this.parent.deskHandler.emptyDesks();
+    document.getElementById("desk-new").setAttribute("disabled", "true");
+  }
+}

web/components/users/handleUser.js

@@ -2,7 +2,7 @@
 import { RandomString } from "/services/common/common.js";
 import * as Messages from "/services/messages/messages.js";
 import * as Auth from "/services/auth/auth.js";
-import * as Users from "/components/users/users.js";
+import * as Common from "/services/common/common.js";
 
 // DOM elements
 let id_field;
@@ -104,12 +104,12 @@ class HandleUser {
     document
       .getElementById(`users-modal-close`)
       .addEventListener("click", function () {
-        Users.toggleModal("users-modal", "users-modal-card");
+        Common.toggleModal("users-modal", "users-modal-card");
       });
     document
       .getElementById(`users-modal-cancel`)
       .addEventListener("click", function () {
-        Users.toggleModal("users-modal", "users-modal-card");
+        Common.toggleModal("users-modal", "users-modal-card");
       });
     let userHandler = this;
     document
@@ -129,7 +129,7 @@ class HandleUser {
     password_field.value = RandomString(48);
     name_field.value = "";
     role_field.value = "";
-    Users.toggleModal("users-modal", "users-modal-card");
+    Common.toggleModal("users-modal", "users-modal-card");
   }
 
   async deleteUser(user) {
@@ -165,7 +165,7 @@ class HandleUser {
     password_field.value = "";
     name_field.value = user.name;
     role_field.value = user.role;
-    Users.toggleModal("users-modal", "users-modal-card");
+    Common.toggleModal("users-modal", "users-modal-card");
   }
 
   async updateUsers() {
@@ -227,7 +227,7 @@ class HandleUser {
       Messages.Show("is-warning", e.message);
       console.error(e);
     }
-    Users.toggleModal("users-modal", "users-modal-card");
+    Common.toggleModal("users-modal", "users-modal-card");
   }
 
   async postCapturer(user, method) {

web/components/users/users.js

 // Imports
-import { AnimateCSS } from "/services/common/common.js";
 import * as Auth from "/services/auth/auth.js";
 import { Delete } from "/services/common/delete.js";
 import * as HandleUser from "/components/users/handleUser.js";
@@ -99,19 +98,4 @@ class Users {
       </tr>
     `;
   }
-}
-
-export function toggleModal(modalID, cardID) {
-  const modal = document.getElementById(modalID);
-  const card = document.getElementById(cardID);
-  if (modal.classList.contains("is-active")) {
-    AnimateCSS(modal, "fadeOut");
-    AnimateCSS(card, "zoomOut", function () {
-      modal.classList.remove("is-active");
-    });
-  } else {
-    modal.classList.add("is-active");
-    AnimateCSS(modal, "fadeIn");
-    AnimateCSS(card, "zoomIn");
-  }
-}
+}
\ No newline at end of file

web/services/common/common.js

@@ -19,4 +19,19 @@ export function RandomString(length) {
     text += possible.charAt(Math.floor(Math.random() * possible.length));
   }
   return text;
-}
\ No newline at end of file
+}
+
+export function toggleModal(modalID, cardID) {
+  const modal = document.getElementById(modalID);
+  const card = document.getElementById(cardID);
+  if (modal.classList.contains("is-active")) {
+    AnimateCSS(modal, "fadeOut");
+    AnimateCSS(card, "zoomOut", function () {
+      modal.classList.remove("is-active");
+    });
+  } else {
+    modal.classList.add("is-active");
+    AnimateCSS(modal, "fadeIn");
+    AnimateCSS(card, "zoomIn");
+  }
+}

web/style.css

@@ -90,4 +90,17 @@ img {
 
 .select, select{
   width :100%;
+}
+
+.card-list{
+  border: solid lightgray;
+  border-width: 0.5px;
+  border-radius: 2px;
+  margin:6px;
+}
+
+.active-card{
+  background-color: rgba(55,122,195,.95);
+  font-weight: bold;
+  color: white;
 }
\ No newline at end of file