round-desks.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";

// DOM elements

// local variables
let current_user;

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

class RoundDesk {
  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">
          Bureaux de votes
        </p>
      </header>
      <div class="columns card-content">
        <div class="column">
          <div id="desk-rounds"></div>
        </div>
        <div class="column">
          <div id="desk-round-details"></div>
        </div>
        <div class="column">
          <div id="active-capturer" class="card"></div>
        </div>
        <div class="column">
          <div id="available-capturer" class="card"></div>
        </div>
      </div>
    `;
    current_user = await Auth.GetUser();
    this.mountModal("capturers-modal");
    this.handleDom();
  }

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

    document
      .getElementById(`capturers-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("capturers-modal", "capturers-modal-card");
      });
  }

  mountModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="capturers-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Ajout/supression de saisisseurs</p>
          <button
            class="delete"
            aria-label="close"
            id="capturers-modal-close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="columns">
            <div class="column">
              <header class="card-header card-header-success">
                <p class="card-header-title">
                  Saisisseurs actifs
                </p>
              </header>
              <div id="active-capturers">
                Liste des saisisseurs actif
              </div>
            </div>
            <div class="column">
              <header class="card-header card-header-danger">
                <p class="card-header-title">
                  Saisisseurs disponibles
                </p>
              </header>

              <div id="available-capturers""> Liste des saisseurs disponibles
            </div>
          </div>
        </section>
      </div>
    `;
  }

  deskRoundTemplate(deskRound) {
    return /* HTML */ `<div class="card card-list">
      <div id="deskrounds-deskround-${deskRound.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div
              id="deskrounds-deskround-desc-${deskRound.ID}"
              class="level-left"
            ></div>
            <div class="level-right">
              <a
                id="deskrounds-deskround-capturers-${deskRound.ID}"
                class="button is-link is-small"
                title="Saisisseurs"
              >
                <span class="icon is-small">
                  <i class="fas fa-user"></i>
                </span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  deskRoundDetailsTemplate() {
    return /* HTML */ `<div>
      <section class="modal-card-body">
        <div class="field">
          <div class="control">
            <label class="checkbox" disabled>
              <input
                class="input"
                type="checkbox"
                id="deskround-completed"
                ${this.deskRound.Completed ? 'checked="true"' : ""}
                disabled
              />
              Complété
              ${this.deskRound.Completed
                ? "(" +
                  new Date(this.deskRound.DateCompletion).toLocaleDateString() +
                  ")"
                : ""}
            </label>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <label
              class="checkbox"
              ${!this.deskRound.Completed ? 'disabled="true"' : ""}
            >
              <input
                class="input"
                type="checkbox"
                id="deskround-validated"
                ${this.deskRound.Validated ? 'checked="true"' : ""}
                ${!this.deskRound.Completed ? 'disabled="true"' : ""}
              />
              Validé
            </label>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button id="deskround-save" class="button is-success">
          Sauvegarder
        </button>
        <button id="deskround-cancel" class="button">
          Annuler
        </button>
      </footer>
    </div>`;
  }

  capturersTemplate(capturer) {
    return /* HTML */ `<div class="card card-list">
      <div id="capturers-capturer-${capturer.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div class="level-left">${capturer.Name}</div>
            <div class="level-right"></div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  async displayDesks() {
    let deskRounds = await this.updateDeskRounds();
    const markup = deskRounds
      .map((deskRound) => this.deskRoundTemplate(deskRound))
      .join("");
    document.getElementById("desk-rounds").innerHTML = markup;

    let deskRoundHandler = this;
    deskRounds.map(async (deskRound) => {
      let desk = await Getters.getDesk(current_user, deskRound.DeskID);
      document.getElementById(
        `deskrounds-deskround-desc-${deskRound.ID}`
      ).innerHTML = desk.Name;
      document
        .getElementById(`deskrounds-deskround-${deskRound.ID}`)
        .addEventListener("click", function () {
          deskRoundHandler.activateDeskRound(deskRound);
          deskRoundHandler.deskRound = deskRound;
          deskRoundHandler.displayDeskRoundsDetails();
        });
      document
        .getElementById(`deskrounds-deskround-capturers-${deskRound.ID}`)
        .addEventListener("click", function () {
          Common.toggleModal("capturers-modal", "capturers-modal-card");
          deskRoundHandler.refreshCapturers();
        });
    });
  }

  async displayDeskRoundsDetails() {
    document.getElementById(
      "desk-round-details"
    ).innerHTML = this.deskRoundDetailsTemplate();
    let deskRoundHandler = this;
    document
      .getElementById(`deskround-save`)
      .addEventListener("click", async function () {
        await deskRoundHandler.saveDeskRound();
      });
  }

  async activateDeskRound(deskRoundToActivate) {
    let deskRounds = await this.updateDeskRounds();
    deskRounds.forEach((deskRound) => {
      document
        .getElementById(`deskrounds-deskround-${deskRound.ID}`)
        .classList.remove("active-card");
    });
    document
      .getElementById(`deskrounds-deskround-${deskRoundToActivate.ID}`)
      .classList.add("active-card");
  }

  async updateDeskRounds() {
    let deskRoundHandler = this;
    try {
      const response = await fetch("/api/DeskRound/", {
        method: "GET",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `DeskRounds could not be fetched (status ${response.status})`
        );
      }
      let deskRounds = await response.json();
      return deskRounds.filter(function (deskRound) {
        return deskRound.RoundID == deskRoundHandler.round.ID;
      });
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
  }

  async saveDeskRound() {
    try {
      const response = await fetch("/api/DeskRound/" + this.deskRound.ID, {
        method: "PUT",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
        body: JSON.stringify({
          ID: this.deskRound.ID,
          Validated: document.getElementById("deskround-validated").checked,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `DeskRound could not be updated (status ${response.status})`
        );
      }
      await response.json();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
      return;
    }
    Messages.Show("is-success", "Bureau de vote mis à jour");
    this.displayDesks();
  }

  async refreshCapturers() {
    let deskRoundHandler = this;
    let capturersAvailable;
    let capturersActive;
    try {
      const response = await fetch("/api/Capturer/", {
        method: "GET",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `Capturers could not be fetched (status ${response.status})`
        );
      }
      let capturers = await response.json();
      capturersAvailable = capturers.filter(function (capturer) {
        let flag = true;
        capturer.DeskRounds.forEach((deskRound) => {
          if (deskRound.ID === deskRoundHandler.deskRound.ID) flag = false;
        });
        return flag;
      });
      capturersActive = capturers.filter(function (capturer) {
        let flag = false;
        capturer.DeskRounds.forEach((deskRound) => {
          if (deskRound.ID === deskRoundHandler.deskRound.ID) flag = true;
        });
        return flag;
      });
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }

    let markup = capturersAvailable
      .map((capturer) => this.capturersTemplate(capturer))
      .join("");
    document.getElementById("available-capturers").innerHTML = markup;

    markup = capturersActive
      .map((capturer) => this.capturersTemplate(capturer))
      .join("");
    document.getElementById("active-capturers").innerHTML = markup;

    capturersAvailable.map(async (capturer) => {
      document
        .getElementById(`capturers-capturer-${capturer.ID}`)
        .addEventListener("click", async function () {
          await deskRoundHandler.addCapturerToDesk(capturer);
          await deskRoundHandler.refreshCapturers();
        });
    });

    capturersActive.map(async (capturer) => {
      document
        .getElementById(`capturers-capturer-${capturer.ID}`)
        .addEventListener("click", async function () {
          await deskRoundHandler.removeCapturerFromDesk(capturer);
          await deskRoundHandler.refreshCapturers();
        });
    });
  }

  async addCapturerToDesk(capturer) {
    try {
      const response = await fetch("/api/CapturerDeskRound/", {
        method: "POST",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
        body: JSON.stringify({
          CapturerID: capturer.ID,
          DeskRoundID: this.deskRound.ID,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `DeskRound could not be added to capturer (status ${response.status})`
        );
      }
      await response.json();
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
      return;
    }
  }

  async removeCapturerFromDesk(capturer) {
    try {
      const response = await fetch("/api/CapturerDeskRound/", {
        method: "delete",
        headers: new Headers({
          "XSRF-Token": current_user.xsrftoken,
        }),
        body: JSON.stringify({
          CapturerID: capturer.ID,
          DeskRoundID: this.deskRound.ID,
        }),
      });
      if (response.status !== 200) {
        throw new Error(
          `DeskRound could not be removed from capturer (status ${response.status})`
        );
      }
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
    }
  }
}