Resolve "Display the round"

web/components/management/candidate-lists.js

@@ -34,7 +34,7 @@ class CandidateList {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
-        <p class="card-header-title">
+        <p id="candidate-list-title" class="card-header-title">
           Liste des candidats par circonscription
         </p>
         <button id="candidate-list-new" class="button is-success" disabled>
@@ -359,10 +359,13 @@ class CandidateList {
       document
         .getElementById(`areas-area-${area.ID}`)
         .addEventListener("click", async function () {
+          candidateListHandler.emptyCandidateList();
           await candidateListHandler.activateArea(area);
           await candidateListHandler.displayCandidateLists();
         });
     });
+
+    this.emptyCandidateList();
   }
 
   async updateAreas() {
@@ -396,8 +399,11 @@ class CandidateList {
         .classList.remove("active-card");
     });
     document
-      .getElementById(`candidateLists-candidateList-${candidateListToActivate.ID}`)
+      .getElementById(
+        `candidateLists-candidateList-${candidateListToActivate.ID}`
+      )
       .classList.add("active-card");
+    this.displayCandidates();
   }
 
   async displayCandidateLists() {
@@ -440,7 +446,10 @@ class CandidateList {
     let candidateListHandler = this;
     let candidateLists = await this.CandidateListModel.getCandidateLists();
     return candidateLists.filter(function (candidateList) {
-      return candidateList.AreaID == candidateListHandler.area.ID;
+      return (
+        candidateList.AreaID == candidateListHandler.area.ID &&
+        candidateList.RoundID == candidateListHandler.round.ID
+      );
     });
   }
 
@@ -539,4 +548,11 @@ class CandidateList {
     await this.CandidateModel.deleteCandidate(candidate.ID);
     await this.displayCandidates();
   }
+
+  emptyCandidateList() {
+    this.area = null;
+    document.getElementById("candidate-lists-list").innerHTML = "";
+    this.candidateList = null;
+    document.getElementById("candidate-list").innerHTML = "";
+  }
 }

web/components/management/round-desks.js

@@ -29,7 +29,7 @@ class RoundDesk {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <header class="card-header">
-        <p class="card-header-title">
+        <p id="desk-round-title" class="card-header-title">
           Bureaux de votes
         </p>
       </header>
@@ -40,11 +40,8 @@ class RoundDesk {
         <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 class="column is-half">
+          <div id="vote-list" class="card"></div>
         </div>
       </div>
     `;
@@ -54,8 +51,9 @@ class RoundDesk {
 
   handleDom() {
     let roundHandler = this;
-    document.getElementById(`round-new`).addEventListener("click", function () {
-    });
+    document
+      .getElementById(`round-new`)
+      .addEventListener("click", function () {});
 
     document
       .getElementById(`capturers-modal-close`)
@@ -202,6 +200,7 @@ class RoundDesk {
     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(
@@ -325,4 +324,10 @@ class RoundDesk {
         });
     });
   }
+
+  emptyDesksDetails() {
+    this.desk = null;
+    document.getElementById("desk-round-details").innerHTML = "";
+    document.getElementById("vote-list").innerHTML = "";
+  }
 }

web/components/management/round.js

@@ -18,16 +18,16 @@ class Round {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <div class="columns">
-        <div class="column is-one-quarter">
+        <div class="column is-full">
           <div id="rounds-list" class="card">
             Liste des tours
           </div>
         </div>
-        <div class="column">
+        <div class="column" style="padding-right:40px;">
           <div id="round-desks" class="card card-list">
             Liste des bureaux d'un tour
           </div>
-          <div id="candidate-lists" class="card card-list">
+          <div id="candidate-lists" class="card card-list" ">
             Liste des listes de candidats d'un tour
           </div>
         </div>

web/components/management/rounds-card.js

@@ -169,10 +169,6 @@ class Round {
         .getElementById(`rounds-round-${round.ID}`)
         .addEventListener("click", async function () {
           roundHandler.activateRound(round);
-          roundHandler.parent.deskRoundsHandler.round = round;
-          await roundHandler.parent.deskRoundsHandler.displayDesks();
-          roundHandler.parent.candidateListHandler.round = round;
-          roundHandler.parent.candidateListHandler.displayAreas();
         });
     });
   }
@@ -213,23 +209,30 @@ class Round {
   }
 
   async activateRound(roundToActivate) {
-    document
-      .getElementById("candidate-list-new")
-      .setAttribute("disabled", "true");
-    let rounds = await this.RoundModel.getRounds();
-    rounds.forEach((round) => {
-      document
-        .getElementById(`rounds-round-${round.ID}`)
-        .classList.remove("active-card");
-    });
-    document
-      .getElementById(`rounds-round-${roundToActivate.ID}`)
-      .classList.add("active-card");
-    // TODO unselect candidateLists
-    document.getElementById("rounds-list").setAttribute("hidden", "true");
-    document.getElementById("rounds-list").parentElement.className = "column";
-    document.getElementById("candidate-lists").parentElement.className =
-      "column is-full";
+    let election = await this.ElectionModel.getElection(
+      roundToActivate.ElectionID
+    );
+    document.getElementById("candidate-list-title").innerHTML =
+      "Liste des candidats par circonscription (" +
+      election.Name +
+      ", tour : " +
+      roundToActivate.Round +
+      ", date : " +
+      new Date(roundToActivate.Date).toLocaleDateString() +
+      ")";
+    document.getElementById("desk-round-title").innerHTML =
+      "Bureaux de votes (" +
+      election.Name +
+      ", tour : " +
+      roundToActivate.Round +
+      ", date : " +
+      new Date(roundToActivate.Date).toLocaleDateString() +
+      ")";
+    this.parent.deskRoundsHandler.round = roundToActivate;
+    await this.parent.deskRoundsHandler.displayDesks();
+    this.parent.candidateListHandler.round = roundToActivate;
+    await this.parent.candidateListHandler.displayAreas();
+    this.hideRounds();
   }
 
   async newRound() {
@@ -281,4 +284,25 @@ class Round {
       .getElementById("candidate-list-new")
       .setAttribute("disabled", "true");
   }
+
+  hideRounds() {
+    let roundsHandler = this;
+    document.getElementById("rounds-list").innerHTML =
+      '<p id="display-rounds">Afficher la liste des tours</p>';
+    document.getElementById("rounds-list").className = "upper-text";
+    document.getElementById("rounds-list").parentElement.className =
+      "column upper-text";
+    document.getElementById("candidate-lists").parentElement.className =
+      "column is-full";
+    document
+      .getElementById("display-rounds")
+      .addEventListener("click", async function () {
+        await roundsHandler.mount("rounds-list");
+        document.getElementById("rounds-list").className = "card";
+        document.getElementById("rounds-list").parentElement.className =
+          "column is-full";
+        document.getElementById("candidate-lists").parentElement.className =
+          "column";
+      });
+  }
 }

web/style.css

@@ -110,22 +110,32 @@ select {
   flex-basis: 70%;
 }
 
-#round-desks, #candidate-lists {
+#round-desks,
+#candidate-lists {
   height: 35vh;
 }
 
-#round-desks .column, #candidate-lists .column {
+#round-desks .column,
+#candidate-lists .column {
   overflow-y: auto;
 }
 
-#round-desks .columns, #candidate-lists .columns {
+#round-desks .columns,
+#candidate-lists .columns {
   max-height: 90%;
 }
 
-.card-header-success{
-  background-color: rgba(127,186,0,.95);
+.card-header-success {
+  background-color: rgba(127, 186, 0, 0.95);
 }
 
-.card-header-danger{
-  background-color: rgba(242,80,34,.95);
-}
\ No newline at end of file
+.card-header-danger {
+  background-color: rgba(242, 80, 34, 0.95);
+}
+
+.upper-text {
+  writing-mode: sideways-lr;
+  background-color: rgba(55,122,195,.95);
+  text-orientation: sideways-right;
+  text-align: center;
+}