round-desks.js

// Imports
import * as Auth from "/services/auth/auth.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();
  }

  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"></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>`;
  }

  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();
          // TODO open capturers affected
        });
    });
  }

  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() {
    let round;
    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();
  }
}