results-section.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as results from "/services/election/calculate-election-generic.js";
import * as PartyModel from "/services/model/party-model.js";
import * as Scroller from "/services/common/scroller.js";

export async function mount(where, round) {
  const resultComponent = new ResultComponent(round);
  await resultComponent.mount(where);
  await resultComponent.calculateResults();
  resultComponent.displayResults();
}

class ResultComponent {
  constructor(round) {
    this.round = round;
    this.PartyModel = PartyModel.getPartyModel();
  }

  async mount(where) {
    this.PartyModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="tabs is-boxed is-toggle is-fullwidth">
        <ul>
          <li id="areas" class="is-active">
            <a>
              <span>Circonscriptions</span>
            </a>
          </li>
          <li id="sections">
            <a>
              <span>Villes</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="control filter">
        <label class="radio">
          <input type="radio" name="filter" value="partial" checked />
          Partiel
        </label>
        <label class="radio">
          <input type="radio" name="filter" value="completed" />
          Complété
        </label>
        <label class="radio">
          <input type="radio" name="filter" value="validated" />
          Validé
        </label>
      </div>
      <div class="columns">
        <div class="column is-half">
          <div id="map-section" class="card-no-hover">
            <header class="card-header">
              <p class="card-header-title">
                Carte
              </p>
              <button id="zoom-map" class="button is-success">
                <span class="icon is-small">
                  <i class="fas fa-search"></i>
                </span>
              </button>
            </header>
            <div class="card-content">
              <div id="round-list" class="content">
                La carte du tour
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <div id="news-flow-section" class="card-no-hover">
            <header class="card-header">
              <p class="card-header-title">
                Actualités
              </p>
              <button id="zoom-news-flow" class="button is-success">
                <span class="icon is-small">
                  <i class="fas fa-search"></i>
                </span>
              </button>
            </header>
            <div class="card-content">
              <div id="news-flow" class="content">
                Flux d'actualité
              </div>
            </div>
          </div>
          <div id="results-section" class="card-no-hover" ">
          <header class="card-header">
            <p class="card-header-title">
              Résultats
            </p>
            <button id="zoom-results" class="button is-success">
              <span class="icon is-small">
                <i class="fas fa-search"></i>
              </span>
            </button>
          </header>
          <div class="card-content">
            <div id="detailed-results" class="content">
              <h5 class="title is-5">Résultats détaillés du tour</h5>
            </div>
          </div>
        </div>
      </div>
    `;
    this.calculator = await results.mountCalculator(this.round);
    this.handleDom();
    document.getElementById("areas").click();
  }

  resultFlowTemplate(zone) {
    return /* HTML */ `<div class="card-list card-no-hover">
      <div class="card-content">
        <div id="flow-content-${zone.ID}" class="content">
          <h5 class="title is-5">${zone.Name}</h5>
        </div>
      </div>
    </div>`;
  }

  progressBarTemplate(candidateList, color) {
    return /* HTML */ `<div class="progressBar">
      <div
        class="progressBarValue"
        style="background-color : ${color}; width : ${candidateList.Percentage}%"
      >
        ${candidateList.Name +
        " (" +
        candidateList.VoiceNumber +
        " voix soit : " +
        candidateList.Percentage +
        "%)"}
      </div>
    </div>`;
  }

  handleDom() {
    let resultHandler = this;
    document.getElementById("areas").addEventListener("click", function () {
      resultHandler.zone = "areas";
      resultHandler.calculateResults();
      resultHandler.displayResults();
      document.getElementById("sections").setAttribute("class", "");
      document.getElementById("areas").setAttribute("class", "is-active");
    });
    document.getElementById("sections").addEventListener("click", function () {
      resultHandler.zone = "sections";
      resultHandler.calculateResults();
      resultHandler.displayResults();
      document.getElementById("areas").setAttribute("class", "");
      document.getElementById("sections").setAttribute("class", "is-active");
    });

    document.getElementById("zoom-map").addEventListener("click", function () {
      resultHandler.zoomMap();
    });
    document
      .getElementById("zoom-news-flow")
      .addEventListener("click", function () {
        resultHandler.zoomNewsFlow();
      });
    document
      .getElementById("zoom-results")
      .addEventListener("click", function () {
        resultHandler.zoomResults();
      });

    let radioButtons = document.getElementsByName("filter");
    for (var i = 0; i < radioButtons.length; i++) {
      radioButtons[i].addEventListener("click", async (e) => {
        await this.calculateResults();
        this.displayResults();
      });
    }
  }

  zoomMap() {
    let resultHandler = this;
    document.getElementById("map-section").parentElement.className =
      "column is-full";
    document.getElementById("zoom-map").addEventListener("click", function () {
      resultHandler.unZoom();
    });
  }

  zoomNewsFlow() {
    let resultHandler = this;
    document.getElementById("news-flow-section").parentElement.className =
      "column is-full";
    document.getElementById("news-flow-section").style.height = "70vh";
    document.getElementById("map-section").parentElement.className = "column";
    document.getElementById("map-section").parentElement.style.display = "none";
    document.getElementById("results-section").style.display = "none";
    document
      .getElementById("zoom-news-flow")
      .addEventListener("click", function () {
        resultHandler.unZoom();
      });
  }

  zoomResults() {
    let resultHandler = this;
    document.getElementById("results-section").parentElement.className =
      "column is-full";
    document.getElementById("map-section").parentElement.className = "column";
    document.getElementById("map-section").parentElement.style.display = "none";
    document.getElementById("news-flow-section").style.display = "none";
    document
      .getElementById("zoom-results")
      .addEventListener("click", function () {
        resultHandler.unZoom();
      });
  }

  unZoom() {
    document.getElementById("map-section").parentElement.className =
      "column is-half";
    document.getElementById("news-flow-section").style.height = "45vh";
    document.getElementById("news-flow-section").parentElement.className =
      "column is-half";
    document.getElementById("map-section").parentElement.style.display =
      "block";
    document.getElementById("results-section").style.display = "block";
    document.getElementById("news-flow-section").style.display = "block";

    this.handleDom();
  }

  async calculateResults() {
    this.filter = document.querySelector('input[name="filter"]:checked').value;
    this.results = await this.calculator.calculateResults(this.filter);
  }

  displayResults() {
    document.getElementById("news-flow").innerHTML = "";
    if (this.zone === "areas") {
      this.displayFlowAreas();
    } else if (this.zone === "sections") {
      this.displayFlowSections();
    }
    this.displayRoundResults();
    Scroller.scrollInit("news-flow");
  }

  async displayFlowAreas() {
    this.results.areasResults.sort(function (a, b) {
      return b.DateCompletion - a.DateCompletion;
    });
    for (let j in this.results.areasResults) {
      let area = this.results.areasResults[j];
      if (area.status === this.filter) {
        document.getElementById(
          "news-flow"
        ).innerHTML += this.resultFlowTemplate(area);

        for (let i in area.candidateLists) {
          let party = await this.PartyModel.getParty(
            area.candidateLists[i].PartyID
          );

          document.getElementById(
            "flow-content-" + area.ID
          ).innerHTML += await this.progressBarTemplate(
            area.candidateLists[i],
            party.Color
          );
        }
      }
    }
  }

  async displayFlowSections() {
    let sections = [];
    this.results.areasResults.forEach((area) => {
      sections = sections.concat(area.Sections);
    });
    sections.sort(function (a, b) {
      return b.DateCompletion - a.DateCompletion;
    });

    for (let j in sections) {
      let section = sections[j];
      if (section.status === this.filter) {
        document.getElementById(
          "news-flow"
        ).innerHTML += this.resultFlowTemplate(section);

        for (let i in section.candidateLists) {
          let party = await this.PartyModel.getParty(
            section.candidateLists[i].PartyID
          );

          document.getElementById(
            "flow-content-" + section.ID
          ).innerHTML += await this.progressBarTemplate(
            section.candidateLists[i],
            party.Color
          );
        }
      }
    }
  }

  displayRoundResults() {
    document.getElementById("detailed-results").innerHTML = `<h5 class="title is-5">Résultats détaillés du tour</h5>`;
    for (let i in this.results.roundResults) {
      document.getElementById(
        "detailed-results"
      ).innerHTML += this.progressBarTemplate(
        this.results.roundResults[i],
        this.results.roundResults[i].Color
      );
    }
  }
}