rounds-card.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as Getters from "/services/common/getters.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 roundsComponent = new Round(parent);
  await roundsComponent.mount(where);
  return roundsComponent;
}

class Round {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
  }

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title">
          Tours
        </p>
        <button id="round-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="round-list" class="content">Liste des tours</div>
      </div>
    `;
    current_user = await Auth.GetUser();
    this.mountModal("round-modal");
    this.handleDom();
    this.displayRounds();
    this.refreshElections();
  }

  handleDom() {
    let roundHandler = this;
    document.getElementById(`round-new`).addEventListener("click", function () {
      roundHandler.newRound();
    });

    document
      .getElementById(`round-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("round-modal", "round-modal-card");
      });
    document
      .getElementById(`round-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("round-modal", "round-modal-card");
      });
    document
      .getElementById(`round-modal-save`)
      .addEventListener("click", async function () {
        if (document.getElementById("round-modal-election-id").value === "0") {
          Messages.Show("is-danger", "Veuillez sélectionner une élection.");
          return;
        }
        await roundHandler.saveRound();
      });
  }

  async refreshElections() {
    let selectElection = document.getElementById("round-modal-election-id");
    let elections = await Getters.getElections(current_user);
    elections.forEach((election) => {});
    for (let i = selectElection.options.length - 1; i >= 0; i--) {
      selectElection.remove(i);
    }

    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner une élection";
    el.value = 0;
    selectElection.appendChild(el);
    elections.forEach((election) => {
      el = document.createElement("option");
      el.textContent = election.Name;
      el.value = election.ID;
      selectElection.appendChild(el);
    });
  }

  mountModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="round-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Ajout/modification d'un tour</p>
          <button
            class="delete"
            aria-label="close"
            id="round-modal-close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label>Id</label>
            <div class="control">
              <input class="input" type="number" id="round-modal-id" disabled />
            </div>
          </div>
          <div class="field">
            <label>Tour de l'élection</label><br />
            <div class="control select">
              <select name="ballot-type" id="round-modal-election-id"></select>
            </div>
          </div>
          <div class="field">
            <label>Date</label>
            <div class="control">
              <input class="input" type="date" id="round-modal-date" />
            </div>
          </div>
          <div class="field">
            <label>Tour n°</label>
            <div class="control">
              <input class="input" type="number" id="round-modal-round" />
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button id="round-modal-save" class="button is-success">
            Sauvegarder
          </button>
          <button id="round-modal-cancel" class="button">Annuler</button>
        </footer>
      </div>
    `;
  }

  async displayRounds() {
    let rounds = await this.updateRounds();
    const markup = rounds.map((round) => this.roundTemplate(round)).join("");
    document.getElementById("round-list").innerHTML = markup;

    let roundHandler = this;
    rounds.map(async (round) => {
      document
        .getElementById(`rounds-round-edit-${round.ID}`)
        .addEventListener("click", function () {
          roundHandler.editRound(round);
        });
      let election = await Getters.getElection(current_user, round.ElectionID);
      document.getElementById(`rounds-round-desc-${round.ID}`).innerHTML =
        election.Name +
        " " +
        document.getElementById(`rounds-round-desc-${round.ID}`).innerHTML;
      document
        .getElementById(`rounds-round-delete-${round.ID}`)
        .addEventListener("click", function () {
          new Delete(() => {
            roundHandler.deleteRound(round);
          });
        });
      document
        .getElementById(`rounds-round-${round.ID}`)
        .addEventListener("click", function () {
          // TODO open desk rounds
          // TODO open candidate list
        });
    });
  }

  roundTemplate(round) {
    return /* HTML */ `<div class="card card-list">
      <div id="rounds-round-${round.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div id="rounds-round-desc-${round.ID}" class="level-left">
              (tour : ${round.Round}, date :
              ${new Date(round.Date).toLocaleDateString()})
            </div>
            <div class="level-right">
              <a
                id="rounds-round-edit-${round.ID}"
                class="button is-link is-small"
                title="Modifier"
              >
                <span class="icon is-small">
                  <i class="fas fa-pen"></i>
                </span>
              </a>
              <a
                id="rounds-round-delete-${round.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 activateRound(roundToActivate) {
    // TODO unselect desks and candidateLists
    let rounds = await this.updateRounds();
    rounds.forEach((round) => {
      document
        .getElementById(`rounds-round-${round.ID}`)
        .classList.remove("active-card");
    });
    document
      .getElementById(`rounds-round-${roundToActivate.ID}`)
      .classList.add("active-card");
  }

  newRound() {
    this.method = "POST";
    document.getElementById("round-modal-id").value = null;
    document.getElementById("round-modal-date").value = null;
    document.getElementById("round-modal-round").value = null;
    Common.toggleModal("round-modal", "round-modal-card");
  }

  editRound(round) {
    this.method = "PUT";
    document.getElementById("round-modal-id").value = round.ID;
    document.getElementById("round-modal-election-id").value = round.ElectionID;
    document.getElementById("round-modal-date").value = new Date(round.Date).toISOString().split('T')[0];
    document.getElementById("round-modal-round").value = round.Round;
    Common.toggleModal("round-modal", "round-modal-card");
  }

  async saveRound() {
    let round;
    if (this.method == "POST")
      document.getElementById("round-modal-id").value = null;

    try {
      const response = await fetch(
        "/api/Round/" + document.getElementById("round-modal-id").value,
        {
          method: this.method,
          headers: new Headers({
            "XSRF-Token": current_user.xsrftoken,
          }),
          body: JSON.stringify({
            ID: parseInt(document.getElementById("round-modal-id").value),
            ElectionID: parseInt(
              document.getElementById("round-modal-election-id").value
            ),
            Date: document.getElementById("round-modal-date").value,
            Round: parseInt(document.getElementById("round-modal-round").value),
          }),
        }
      );
      if (response.status !== 200) {
        throw new Error(
          `Area could not be updated or created (status ${response.status})`
        );
      }
      round = await response.json();
      this.displayRounds();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
      return;
    }
    Common.toggleModal("round-modal", "round-modal-card");
    this.activateRound(round);
    // TODO open desks
    // TODO open candidateLists
    return round;
  }

  async updateRounds() {
    try {
      const response = await fetch("/api/Round/", {
        method: "GET",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `Rounds could not be fetched (status ${response.status})`
        );
      }
      return await response.json();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
  }

  async deleteRound(round) {
    try {
      const response = await fetch("/api/Round/" + round.ID, {
        method: "delete",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `Round could not be deleted (status ${response.status})`
        );
      }
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
    this.displayRounds();
    // TODO empty desks
    // TODO empty candidateLists
    document
      .getElementById("candidate-list-new")
      .setAttribute("disabled", "true");
  }
}