Feat : Add generic interface for Round

- left column for rounds list
- right column in two card
- one card for desks rounds
- the second for candidate list

web/components/management/candidate-lists.js

+// Imports
+import * as Auth from "/services/auth/auth.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;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Liste des candidats
+        </p>
+        <button id="round-new" class="button is-success" disabled>
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="candidate-lists-list" class="content">
+          Liste des listes de candidats
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}

web/components/management/round-desks.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const roundDesksComponent = new RoundDesk(parent);
+  await roundDesksComponent.mount(where);
+  return roundDesksComponent;
+}
+
+class RoundDesk {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Bureaux de votes
+        </p>
+      </header>
+      <div class="card-content">
+        <div id="round-desks-list" class="content">
+          Liste des bureaux de votes
+        </div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}

web/components/management/round.js

 // Imports
 import * as Auth from "/services/auth/auth.js";
+import * as RoundsCard from "/components/management/rounds-card.js";
+import * as RoundDesks from "/components/management/round-desks.js";
+import * as CandidateList from "/components/management/candidate-lists.js";
 
 // DOM elements
 
@@ -17,8 +20,25 @@ class Round {
   async mount(where) {
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
-      Ceci est un tour d'élection.
+      <div class="columns">
+        <div class="column is-one-quarter">
+          <div id="rounds-list" class="card">
+            Liste des tours
+          </div>
+        </div>
+        <div class="column">
+          <div id="round-desks" class="card card-list">
+            Liste des bureaux d'un tour
+          </div>
+          <div id="candidate-lists" class="card card-list">
+            Liste des listes de candidats d'un tour
+          </div>
+        </div>
+      </div>
     `;
     current_user = await Auth.GetUser();
+    this.roundsHandler = RoundsCard.mount("rounds-list", this)
+    this.roundsHandler = RoundDesks.mount("round-desks", this)
+    this.roundsHandler = CandidateList.mount("candidate-lists", this)
   }
 }

web/components/management/rounds-card.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+// DOM elements
+
+// local variables
+let current_user;
+
+export async function mount(where, parent) {
+  const roundsComponent = new Round(parent);
+  await roundsComponent.mount(where);
+  return roundsComponent;
+}
+
+class Round {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <header class="card-header">
+        <p class="card-header-title">
+          Tours
+        </p>
+        <button id="round-new" class="button is-success">
+          <span class="icon is-small">
+            <i class="fas fa-plus"></i>
+          </span>
+        </button>
+      </header>
+      <div class="card-content">
+        <div id="rounds-list" class="content">Liste des tours</div>
+      </div>
+    `;
+    current_user = await Auth.GetUser();
+  }
+}

web/style.css

@@ -107,4 +107,8 @@ img {
 
 .card-content .level-left {
   flex-basis: 70%;
+}
+
+#round-desks{
+  height: 35vh;
 }
\ No newline at end of file