election.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as ElectionModel from "/services/model/election-model.js";
import { Delete } from "/services/common/delete.js";

export async function mount(where, parent) {
  const electionComponent = new Election(parent);
  await electionComponent.mount(where);
  return electionComponent;
}

class Election {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
    this.ElectionModel = ElectionModel.getElectionModel();
  }

  async mount(where) {
    this.ElectionModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title">
          Elections
        </p>
      </header>
      <div class="card-content">
        <div id="election-list" class="content">Liste des élections</div>
      </div>
    `;
    this.mountModal("election-modal");
    this.mountCloneModal("election-clone-modal");
    this.handleDom();
    this.displayElections();
  }

  handleDom() {
    let electionHandler = this;

    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-clone-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("election-clone-modal", "election-clone-modal-card");
      });
    document
      .getElementById(`election-clone-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("election-clone-modal", "election-clone-modal-card");
      });
    document
      .getElementById(`election-clone-modal-save`)
      .addEventListener("click", async function () {
        electionHandler.saveCloneElection();
      });
    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>
          <div class="field">
            <label>Carte de circonscriptions</label><br />
            <div class="control select">
              <select
                name="map-area-selector"
                id="election-modal-area-map"
              ></select>
            </div>
          </div>
          <div class="field">
            <label>Carte de villes</label><br />
            <div class="control select">
              <select
                name="map-section-selector"
                id="election-modal-section-map"
              ></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>
    `;
  }

  mountCloneModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="election-clone-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Cloner une élection</p>
          <button
            class="delete"
            aria-label="close"
            id="election-clone-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-clone"
                disabled
              />
            </div>
          </div>
          <div class="field">
            <label>Nom</label>
            <div class="control">
              <input class="input" type="text" id="election-modal-name-clone" />
            </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-clone">
                <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-clone-modal-save" class="button is-success">
            Dupliquer
          </button>
          <button id="election-clone-modal-cancel" class="button">
            Annuler
          </button>
        </footer>
      </div>
    `;
  }

  async displayElections() {
    document.getElementById("election-list").innerHTML = /* HTML */ `<button
      id="election-new"
      class="button large-button is-success"
    >
      <span class="icon is-small">
        <i class="fas fa-plus"></i>
      </span>
    </button>`;

    let elections = await this.ElectionModel.getElections();
    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-clone-${election.ID}`)
        .addEventListener("click", function () {
          electionHandler.cloneElection(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(`election-new`).addEventListener("click", () => {
      this.newElection();
    });
  }

  electionTemplate(election) {
    return /* HTML */ `<div class="card card-list">
      <div
        id="elections-election-${election.ID}"
        class="card-content clickable"
      >
        <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-clone-${election.ID}"
                class="button is-link is-small"
                title="Dupliquer"
              >
                <span class="icon is-small">
                  <i class="fas fa-clone"></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(electionToActivate) {
    this.parent.areaHandler.emptyAreas();
    this.parent.sectionHandler.emptySections();
    this.parent.deskHandler.emptyDesks();
    let elections = await this.ElectionModel.getElections();
    elections.forEach((election) => {
      document
        .getElementById(`elections-election-${election.ID}`)
        .classList.remove("active-card");
    });
    document
      .getElementById(`elections-election-${electionToActivate.ID}`)
      .classList.add("active-card");
  }

  async newElection() {
    this.method = "POST";
    await this.refreshMapSelect();
    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");
  }

  async editElection(election) {
    this.method = "PUT";
    await this.refreshMapSelect();
    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;

    election = await this.ElectionModel.saveElection(
      this.method,
      parseInt(document.getElementById("election-modal-id").value),
      document.getElementById("election-modal-name").value,
      document.getElementById("election-modal-ballot-type").value,
      document.getElementById("election-modal-area-map").value,
      document.getElementById("election-modal-section-map").value
    );

    await this.displayElections();
    Common.toggleModal("election-modal", "election-modal-card");
    this.activateElection(election);
    this.parent.areaHandler.election = election;
    this.parent.areaHandler.displayAreas();
    return election;
  }

  async deleteElection(election) {
    await this.ElectionModel.deleteElection(election.ID);
    this.displayElections();
    this.parent.areaHandler.emptyAreas();
    this.parent.sectionHandler.emptySections();
    this.parent.deskHandler.emptyDesks();
    document.getElementById("areas").style.display = "none";
  }

  cloneElection(election) {
    Common.toggleModal("election-clone-modal", "election-clone-modal-card");
    document.getElementById("election-modal-id-clone").value = election.ID;
    document.getElementById("election-modal-name-clone").value =
      election.Name + " (New)";
    document.getElementById("election-modal-ballot-type-clone").value =
      election.BallotType;
  }

  async saveCloneElection() {
    let electionCloned;
    let electionToClone = await this.ElectionModel.getElection(
      document.getElementById("election-modal-id-clone").value
    );

    electionCloned = await this.ElectionModel.saveElection(
      "POST",
      null,
      document.getElementById("election-modal-name-clone").value,
      document.getElementById("election-modal-ballot-type-clone").value
    );

    await this.parent.areaHandler.cloneAreas(electionCloned, electionToClone);
    Common.toggleModal("election-clone-modal", "election-clone-modal-card");
    await this.displayElections();
    await this.activateElection(electionCloned);
    this.parent.areaHandler.election = electionCloned;
    await this.parent.areaHandler.displayAreas();
  }

  async refreshMapSelect() {
    let selectMapAreas = document.getElementById("election-modal-area-map");
    let selectMapSections = document.getElementById(
      "election-modal-section-map"
    );
    let maps;
    try {
      const response = await fetch("/api/Maps/", {
        method: "GET",
        headers: new Headers({
          "XSRF-Token": this.ElectionModel.current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `Maps could not be fetched (status ${response.status})`
        );
      }
      maps = await response.json();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }

    this.addMapsInSelect(maps, selectMapAreas);
    this.addMapsInSelect(maps, selectMapSections);
  }

  addMapsInSelect(maps, select) {
    for (let i = select.options.length - 1; i >= 0; i--) {
      select.remove(i);
    }

    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner une carte";
    el.value = 0;
    select.appendChild(el);
    maps.forEach((map) => {
      el = document.createElement("option");
      el.textContent = map.substring(
        map.lastIndexOf("/") + 1,
        map.lastIndexOf(".")
      );
      el.value = map;
      select.appendChild(el);
    });
  }
}