Merge branch '44-navigation-to-votes' into 'master'

Feat : add nav and page for votes

Closes #44

See merge request apoyen/elections!40

web/components/navbar/navbar.js

@@ -12,8 +12,16 @@ export function mount(mountpoint) {
   window.document.title = brand.windowTitle;
   where.innerHTML = /* HTML */ `
     <div class="navbar-brand">
-      <a class="navbar-item is-size-4" href="/"><img src="assets/brand/logo.png" alt="logo" />${brand.navTitle}</a>
-      <a role="button" id="navbar-burger" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
+      <a class="navbar-item is-size-4" href="/"
+        ><img src="assets/brand/logo.png" alt="logo" />${brand.navTitle}</a
+      >
+      <a
+        role="button"
+        id="navbar-burger"
+        class="navbar-burger burger"
+        aria-label="menu"
+        aria-expanded="false"
+      >
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
@@ -51,11 +59,27 @@ export async function CreateMenu() {
             user === undefined
               ? ``
               : /* HTML */ `
-                  <a class="navbar-item" href="#home"><i class="navbar-menu-icon fas fa-home"></i>Accueil</a>
+                  <a class="navbar-item" href="#home"
+                    ><i class="navbar-menu-icon fas fa-home"></i>Accueil</a
+                  >
+                  ${user.role == "ADMIN" || "CAPTURER"
+                    ? /* HTML */ `
+                        <a class="navbar-item" href="#votes"
+                          ><i class="navbar-menu-icon fas fa-vote-yea"></i
+                          >Votes</a
+                        >
+                      `
+                    : ""}
                   ${user.role == "ADMIN"
                     ? /* HTML */ `
-                        <a class="navbar-item" href="#management"><i class="navbar-menu-icon fas fa-edit"></i>Gestion</a>
-                        <a class="navbar-item" href="#users"><i class="navbar-menu-icon fas fa-users"></i>Utilisateurs</a>
+                        <a class="navbar-item" href="#management"
+                          ><i class="navbar-menu-icon fas fa-edit"></i
+                          >Gestion</a
+                        >
+                        <a class="navbar-item" href="#users"
+                          ><i class="navbar-menu-icon fas fa-users"></i
+                          >Utilisateurs</a
+                        >
                       `
                     : ""}
                 `
@@ -64,8 +88,18 @@ export async function CreateMenu() {
         <div class="navbar-end">
           ${
             user === undefined
-              ? /* HTML */ ` <a class="navbar-item" href="#login"><i class="navbar-menu-icon fas fa-sign-in-alt"></i>Connexion</a> `
-              : /* HTML */ ` <a class="navbar-item" href="/Logout"><i class="navbar-menu-icon fas fa-sign-out-alt"></i>Déconnexion</a> `
+              ? /* HTML */ `
+                  <a class="navbar-item" href="#login"
+                    ><i class="navbar-menu-icon fas fa-sign-in-alt"></i
+                    >Connexion</a
+                  >
+                `
+              : /* HTML */ `
+                  <a class="navbar-item" href="/Logout"
+                    ><i class="navbar-menu-icon fas fa-sign-out-alt"></i
+                    >Déconnexion</a
+                  >
+                `
           }
         </div>
      `;

web/components/vote/desk-round.js

+// Imports
+import * as Auth from "/services/auth/auth.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;
+  }
+
+  async mount(where) {
+    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" class="card"></div>
+          </div>
+          <div class="column">
+            <div id="select-desks" class="card"></div>
+          </div>
+        </div>
+      </div>
+    `;
+    this.handleDom();
+  }
+
+  handleDom() {}
+}

web/components/vote/vote-page.js

+// Imports
+import * as DeskRound from "/components/vote/desk-round.js";
+import * as Vote from "/components/vote/votes.js";
+
+// DOM elements
+
+export async function mount(where) {
+  const votePage = new VotePage();
+  await votePage.mount(where);
+}
+
+class VotePage {
+  constructor() {}
+
+  async mount(where) {
+    const mountpoint = where;
+    document.getElementById(mountpoint).innerHTML = /* HTML */ `
+      <section style="margin-bottom: 230px;">
+        <div class="container"><div id="vote-section" class="card"></div></div>
+      </section>
+    `;
+    this.deskRoundHandler = await DeskRound.mount("vote-section", this);
+    this.voteHandler = await Vote.mount(this);
+    this.handleDom();
+  }
+
+  handleDom() {}
+}

web/components/vote/votes.js

+// Imports
+import * as Auth from "/services/auth/auth.js";
+
+export async function mount(parent) {
+  const voteComponent = new Vote(parent);
+  return voteComponent;
+}
+
+class Vote {
+  constructor(parent) {
+    this.method = null;
+    this.parent = parent;
+  }
+}

web/main.js

 import * as Home from "/components/home/home.js";
 import * as Users from "/components/users/users.js";
 import * as Management from "/components/management/management.js";
+import * as Votes from "/components/vote/vote-page.js";
 import * as Login from "/components/login/login.js";
 import * as Navbar from "/components/navbar/navbar.js";
 import { AnimateCSS } from "/services/common/common.js";
@@ -23,6 +24,11 @@ async function navigate() {
         await Home.mount("main");
       });
       break;
+    case "#votes":
+      load(mountPoint, async function () {
+        await Votes.mount("main");
+      });
+      break;
     case "#users":
       load(mountPoint, async function () {
         await Users.mount("main");