management.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Election from "/components/management/genericElection.js";
import * as Round from "/components/management/round.js";

// DOM elements

// local variables
let current_user;

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="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-calendar" aria-hidden="true"></i
              ></span>
              <span>Tour</span>
            </a>
          </li>
        </ul>
      </div>
      <section id="management-section" style="margin-bottom: 230px;"></section>
    `;
    current_user = await Auth.GetUser();
    this.handleDom();
    document.getElementById("elections").click()

  }

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