desk-round.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as ElectionModel from "/services/model/election-model.js";
import * as RoundModel from "/services/model/round-model.js";
import * as AreaModel from "/services/model/area-model.js";
import * as SectionModel from "/services/model/section-model.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";

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

class DeskRoundSelector {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
    this.ElectionModel = ElectionModel.getElectionModel();
    this.RoundModel = RoundModel.getRoundModel();
    this.AreaModel = AreaModel.getAreaModel();
    this.SectionModel = SectionModel.getSectionModel();
    this.DeskModel = DeskModel.getDeskModel();
    this.DeskRoundModel = DeskRoundModel.getDeskRoundModel();
    this.CapturerModel = CapturerModel.getCapturerModel();
  }

  async mount(where) {
    this.ElectionModel.current_user = await Auth.GetUser();
    this.RoundModel.current_user = await Auth.GetUser();
    this.AreaModel.current_user = await Auth.GetUser();
    this.SectionModel.current_user = await Auth.GetUser();
    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 class="card-header-title">
          Choix du bureau de vote
        </p>
      </header>
      <div class="card-content">
        <div class="columns">
          <div class="column">
            <div id="select-filters">
              <div class="field">
                <label>Élection</label><br />
                <div class="control select">
                  <select name="election-select" id="election-select">
                    <option>Veuillez sélectionner une élection</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Tour</label><br />
                <div class="control select">
                  <select name="round-select" id="round-select">
                    <option>Veuillez sélectionner un tour</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Circonscription</label><br />
                <div class="control select">
                  <select name="area-select" id="area-select">
                    <option>Veuillez sélectionner une circonscription</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Section</label><br />
                <div class="control select">
                  <select name="section-select" id="section-select">
                    <option>Veuillez sélectionner une section</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div id="select-desks"></div>
          </div>
        </div>
      </div>
    `;
    await this.loadElection();
  }

  deskRoundTemplate(deskRound) {
    return /* HTML */ `<div class="card card-list">
      <div
        id="deskrounds-deskround-${deskRound.ID}"
        class="card-content clickable"
      >
        <div class="content">
          <nav class="level">
            <div
              id="deskrounds-deskround-desc-${deskRound.ID}"
              class="level-left"
            ></div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  async loadElection() {
    let selectElection = document.getElementById("election-select");
    let elections = await this.ElectionModel.getElections();

    for (let i = selectElection.options.length - 1; i >= 0; i--) {
      selectElection.remove(i);
    }
    elections.forEach((election) => {
      let el = document.createElement("option");
      el.textContent = election.Name;
      el.value = election.ID;
      selectElection.appendChild(el);
    });

    this.ElectionID = elections[0].ID;
    this.loadRounds();
  }

  async loadRounds() {
    let deskRoundHandler = this;
    let selectRound = document.getElementById("round-select");
    let rounds = await this.RoundModel.getRounds();
    rounds = rounds.filter((round) => {
      return round.ElectionID == deskRoundHandler.ElectionID;
    });

    rounds.forEach(async (round) => {
      let election = await this.ElectionModel.getElection(round.ElectionID);
      let el = document.createElement("option");
      el.textContent =
        election.Name +
        " (tour : " +
        round.Round +
        ", date : " +
        new Date(round.Date).toLocaleDateString() +
        ")";
      el.value = round.ID;
      selectRound.appendChild(el);
    });
  }

  async loadAreas() {
    let deskRoundHandler = this;
    let selectArea = document.getElementById("area-select");
    let areas = await this.AreaModel.getAreas();
    areas = areas.filter((area) => {
      return area.ElectionID == deskRoundHandler.ElectionID;
    });

    areas.forEach(async (area) => {
      let el = document.createElement("option");
      el.textContent = area.Name;
      el.value = area.ID;
      selectArea.appendChild(el);
    });
  }

  async loadSections() {
    let deskRoundHandler = this;
    let selectSection = document.getElementById("section-select");
    let sections = await this.SectionModel.getSections();
    sections = sections.filter((section) => {
      return section.AreaID == deskRoundHandler.AreaID;
    });

    sections.forEach((section) => {
      let el = document.createElement("option");
      el.textContent = section.Name;
      el.value = section.ID;
      selectSection.appendChild(el);
    });
  }

  async loadDesks() {
    let selectRound = document.getElementById("round-select");

    if (selectRound.value != 0) {
      let deskRoundHandler = this;
      let deskRounds = await this.DeskRoundModel.getDeskRounds();

      deskRounds = deskRounds.filter((deskRound) => {
        return deskRound.RoundID == deskRoundHandler.RoundID;
      });
      // Filter the desks to display only the one affected to capturer
      if (this.DeskRoundModel.current_user.role === "CAPTURER") {
        let capturer = await this.CapturerModel.getCapturerByUserID(
          this.DeskRoundModel.current_user.id
        );
        let deskRoundsToKeep = [];
        for (let i in deskRounds) {
          for (let j in capturer.DeskRounds) {
            if (capturer.DeskRounds[j].ID == deskRounds[i].ID)
              deskRoundsToKeep.push(deskRounds[i]);
          }
        }
        deskRounds = deskRoundsToKeep;
      }

      let deskRoundsFiltered = [];
      let selectArea = document.getElementById("area-select");
      if (selectArea.value != 0) {
        let area = await this.AreaModel.getArea(selectArea.value);
        for (let i in area.Sections) {
          for (let deskRound of deskRounds) {
            let desk = await deskRoundHandler.DeskModel.getDesk(
              deskRound.DeskID
            );
            if (desk.SectionID == area.Sections[i].ID)
              deskRoundsFiltered.push(deskRound);
          }
        }
        deskRounds = deskRoundsFiltered;
      }
      deskRoundsFiltered = [];
      let selectSection = document.getElementById("section-select");
      if (selectSection.value != 0) {
        for (let deskRound of deskRounds) {
          let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
          if (desk.SectionID == deskRoundHandler.SectionID)
            deskRoundsFiltered.push(deskRound);
        }
        deskRounds = deskRoundsFiltered;
      }
      const markup = deskRounds
        .map((deskRound) => this.deskRoundTemplate(deskRound))
        .join("");
      document.getElementById("select-desks").innerHTML = markup;

      deskRounds.map(async (deskRound) => {
        let desk = await deskRoundHandler.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.openVotes(deskRound);
          });
      });
    }
  }

  async openVotes(deskRound) {
    this.parent.voteHandler.displayVotes(
      this.RoundID,
      this.AreaID,
      deskRound.ID
    );
  }

  clearRounds() {
    let selectRound = document.getElementById("round-select");
    for (let i = selectRound.options.length - 1; i >= 0; i--) {
      selectRound.remove(i);
    }
    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner un tour";
    el.value = 0;
    selectRound.appendChild(el);
  }

  clearAreas() {
    let selectArea = document.getElementById("area-select");
    for (let i = selectArea.options.length - 1; i >= 0; i--) {
      selectArea.remove(i);
    }
    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner une circonscription";
    el.value = 0;
    selectArea.appendChild(el);
  }

  clearSections() {
    let selectSection = document.getElementById("section-select");
    for (let i = selectSection.options.length - 1; i >= 0; i--) {
      selectSection.remove(i);
    }
    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner une section";
    el.value = 0;
    selectSection.appendChild(el);
  }
}