Merge branch '46-desk-selection-for-vote' into 'master'

Resolve "Desk selection for vote"

Closes #46

See merge request apoyen/elections!41

web/components/vote/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";
 
 export async function mount(where, parent) {
   const deskRoundComponent = new DeskRoundSelector(parent);
@@ -11,9 +17,21 @@ 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();
   }
 
   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();
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
@@ -24,16 +42,186 @@ class DeskRoundSelector {
       <div class="card-content">
         <div class="columns">
           <div class="column">
-            <div id="select-filters" class="card"></div>
+            <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>
           </div>
           <div class="column">
-            <div id="select-desks" class="card"></div>
+            <div id="select-desks"></div>
           </div>
         </div>
       </div>
     `;
     this.handleDom();
+    await this.loadElection();
   }
 
-  handleDom() {}
+  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>
+          </nav>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  handleDom() {
+    let deskRoundHandler = this;
+    document.addEventListener(
+      "input",
+      function (event) {
+        if (event.target.id === "election-select") {
+          deskRoundHandler.loadRounds(event.target.value);
+        }
+        if (event.target.id === "round-select") {
+          deskRoundHandler.loadAreas(event.target.value);
+        }
+        if (event.target.id === "area-select") {
+          deskRoundHandler.loadDesks(event.target.value);
+        }
+      },
+      false
+    );
+  }
+
+  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.loadRounds(elections[0].ID);
+  }
+
+  async loadRounds(ElectionID) {
+    this.ElectionID = ElectionID;
+    let deskRoundHandler = this;
+    let selectRound = document.getElementById("round-select");
+    let rounds = await this.RoundModel.getRounds();
+    rounds.filter((round) => {
+      return round.ElectionID == deskRoundHandler.ElectionID;
+    });
+
+    for (let i = selectRound.options.length - 1; i >= 0; i--) {
+      selectRound.remove(i);
+    }
+    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);
+    });
+
+    this.loadAreas(rounds[0].ID);
+  }
+
+  async loadAreas(RoundID) {
+    this.RoundID = RoundID;
+    let deskRoundHandler = this;
+    let selectArea = document.getElementById("area-select");
+    let areas = await this.AreaModel.getAreas();
+    areas = areas.filter((area) => {
+      return area.ElectionID == deskRoundHandler.ElectionID;
+    });
+
+    for (let i = selectArea.options.length - 1; i >= 0; i--) {
+      selectArea.remove(i);
+    }
+    areas.forEach(async (area) => {
+      let el = document.createElement("option");
+      el.textContent = area.Name;
+      el.value = area.ID;
+      selectArea.appendChild(el);
+    });
+
+    this.loadDesks(areas[0].ID);
+  }
+
+  async loadDesks(AreaID) {
+    this.AreaID = AreaID;
+    let deskRoundHandler = this;
+    let deskRounds = await this.DeskRoundModel.getDeskRounds();
+    deskRounds = deskRounds.filter((deskRound) => {
+      return deskRound.RoundID == deskRoundHandler.RoundID;
+    });
+    let deskRoundsFiltered = [];
+    for (let deskRound of deskRounds) {
+      let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
+      let section = await deskRoundHandler.SectionModel.getSection(
+        desk.SectionID
+      );
+      if (section.AreaID == deskRoundHandler.AreaID)
+        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
+    );
+    console.log("Ouverture des votes");
+  }
 }

web/components/vote/votes.js

@@ -11,4 +11,6 @@ class Vote {
     this.method = null;
     this.parent = parent;
   }
+
+  async displayVotes(RoundID, AreaID, DeskRoundID) {}
 }