candidate-lists.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as AreaModel from "/services/model/area-model.js";

// DOM elements

// local variables
let current_user;

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

class CandidateList {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
    this.AreaModel = AreaModel.getAreaModel();
  }

  async mount(where) {
    this.AreaModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title">
          Liste des candidats par circonscription
        </p>
        <button id="candidate-list-new" class="button is-success" disabled>
          <span class="icon is-small">
            <i class="fas fa-plus"></i>
          </span>
        </button>
      </header>
        <div class="columns card-content">
          <div class="column">
            <div id="areas-round"></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();
  }

  areaTemplate(area) {
    return /* HTML */ `<div class="card card-list">
      <div id="areas-area-${area.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div class="level-left">
              ${area.Name} (Nombre de siège : ${area.SeatNumber})
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  async displayAreas() {
    let candidateListHandler = this;
    let areas = await this.updateAreas();
    const markup = areas.map((area) => this.areaTemplate(area)).join("");
    document.getElementById("areas-round").innerHTML = markup;

    areas.map((area) => {
      document
        .getElementById(`areas-area-${area.ID}`)
        .addEventListener("click", async function () {
          await candidateListHandler.activateArea(area);
          candidateListHandler.area = area;
          await candidateListHandler.displayCandidateLists();
        });
    });
  }

  async updateAreas() {
    let candidateListHandler = this;
    let areas = await this.AreaModel.getAreas();
    return areas.filter(function (area) {
      return area.ElectionID == candidateListHandler.round.ElectionID;
    });
  }

  async activateArea(){

  }

  async displayCandidateLists(){

  }
}