round-desks.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as DeskModel from "/services/model/desk-model.js";
import * as DeskRoundModel from "/services/model/deskRound-model.js";
import * as CapturerModel from "/services/model/capturer-model.js";
import * as Messages from "/services/messages/messages.js";

// DOM elements

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

class RoundDesk {
  constructor(parent) {
    this.parent = parent;
    this.DeskModel = DeskModel.getDeskModel();
    this.DeskRoundModel = DeskRoundModel.getDeskRoundModel();
    this.CapturerModel = CapturerModel.getCapturerModel();
  }

  async mount(where) {
    this.DeskModel.current_user = await Auth.GetUser();
    this.DeskRoundModel.current_user = await Auth.GetUser();
    this.CapturerModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p id="desk-round-title" 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 is-half">
          <div id="vote-list" class="card"></div>
        </div>
      </div>
    `;
    this.mountModal("capturers-modal");
    this.handleDom();
  }

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

    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;
    deskRoundHandler.emptyDesksDetails();
    deskRounds.map(async (deskRound) => {
      let desk = await this.DeskModel.getDesk(deskRound.DeskID);
      document.getElementById(
        `deskrounds-deskround-desc-${deskRound.ID}`
      ).innerHTML = desk.Name;
      document
        .getElementById(`deskrounds-deskround-${deskRound.ID}`)
        .addEventListener("click", async function () {
          deskRoundHandler.activateDeskRound(deskRound);
          deskRoundHandler.deskRound = await deskRoundHandler.DeskRoundModel.getDeskRound(
            deskRound.ID
          );
          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;
    let deskRounds = await this.DeskRoundModel.getDeskRounds();
    return deskRounds.filter(function (deskRound) {
      return deskRound.RoundID == deskRoundHandler.round.ID;
    });
  }

  async saveDeskRound() {
    try {
      this.DeskRoundModel.saveDeskRound(
        this.deskRound.ID,
        document.getElementById("deskround-validated").checked
      );
    } catch (e) {
      Messages.Show("is-warning", e.message);
      console.error(e);
      return;
    }
    this.displayDesks();
  }

  async refreshCapturers() {
    let deskRoundHandler = this;
    let capturersAvailable;
    let capturersActive;
    let capturers = await this.CapturerModel.getCapturers();
    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;
    });

    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.CapturerModel.addCapturerToDesk(
            capturer.ID,
            deskRoundHandler.deskRound.ID
          );
          await deskRoundHandler.refreshCapturers();
        });
    });

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

  emptyDesksDetails() {
    this.desk = null;
    document.getElementById("desk-round-details").innerHTML = "";
    document.getElementById("vote-list").innerHTML = "";
  }
}