management.js

// Imports
import * as Election from "/components/management/genericElection.js";
import * as Round from "/components/management/round.js";
import * as Party from "/components/management/party.js";

// DOM elements

export async function mount(where) {
  const managementPage = new Management();
  await managementPage.mount(where);
}

class Management {
  constructor() {}

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="tabs is-boxed is-toggle is-fullwidth">
        <ul>
          <li id="parties">
            <a>
              <span class="icon is-small"
              ><i class="fab fa-old-republic" aria-hidden="true"></i
              ></span>
              <span>Partis Politiques</span>
            </a>
          </li>
          <li id="elections" class="is-active">
            <a>
              <span class="icon is-small"
                ><i class="fas fa-vote-yea" aria-hidden="true"></i
              ></span>
              <span>Election</span>
            </a>
          </li>
          <li id="rounds">
            <a>
              <span class="icon is-small"
                ><i class="fas fa-person-booth" aria-hidden="true"></i
              ></span>
              <span>Tour</span>
            </a>
          </li>
        </ul>
      </div>
      <section id="management-section" style="margin-bottom: 230px;"></section>
    `;
    this.handleDom();
    document.getElementById("elections").click();
  }

  handleDom() {
    document
      .getElementById("parties")
      .addEventListener("click", async function () {
        await Party.mount("management-section");
        document.getElementById("elections").setAttribute("class", "");
        document.getElementById("rounds").setAttribute("class", "");
        document.getElementById("parties").setAttribute("class", "is-active");
      });
    document
      .getElementById("elections")
      .addEventListener("click", async function () {
        await Election.mount("management-section");
        document.getElementById("rounds").setAttribute("class", "");
        document.getElementById("parties").setAttribute("class", "");
        document.getElementById("elections").setAttribute("class", "is-active");
      });
    document
      .getElementById("rounds")
      .addEventListener("click", async function () {
        await Round.mount("management-section");
        document.getElementById("elections").setAttribute("class", "");
        document.getElementById("parties").setAttribute("class", "");
        document.getElementById("rounds").setAttribute("class", "is-active");
      });
  }
}