Resolve "In flow open details"

web/components/visualization/results-section.js

@@ -3,6 +3,7 @@ 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 CandidateListModel from "/services/model/candidateList-model.js";
+import * as AreaModel from "/services/model/area-model.js";
 import * as Scroller from "/services/common/scroller.js";
 
 export async function mount(where, round) {
@@ -15,11 +16,13 @@ class ResultComponent {
     this.round = round;
     this.PartyModel = PartyModel.getPartyModel();
     this.CandidateListModel = CandidateListModel.getCandidateListModel();
+    this.AreaModel = AreaModel.getAreaModel();
   }
 
   async mount(where) {
     this.PartyModel.current_user = await Auth.GetUser();
     this.CandidateListModel.current_user = await Auth.GetUser();
+    this.AreaModel.current_user = await Auth.GetUser();
     const mountpoint = where;
     document.getElementById(mountpoint).innerHTML = /* HTML */ `
       <div class="tabs is-boxed is-toggle is-fullwidth">
@@ -120,13 +123,27 @@ class ResultComponent {
   }
 
   resultFlowTemplate(zone) {
-    return /* HTML */ `<div class="card-list card-no-hover">
+    let html = document.createElement("div");
+    html.classList = "card-list card-no-hover";
+    html.innerHTML = /* HTML */ `
       <div class="card-content">
         <div id="flow-content-${zone.ID}" class="content">
           <h5 class="title is-5">${zone.Name}</h5>
         </div>
       </div>
-    </div>`;
+    `;
+    html.addEventListener("click", async () => {
+      if (this.zone == "sections") {
+        let area = await this.AreaModel.getArea(zone.AreaID);
+        this.refreshSections(area);
+        document.getElementById("select-sections").value = zone.ID;
+        document.getElementById("select-areas").value = zone.AreaID;
+      } else {
+        document.getElementById("select-areas").value = zone.ID;
+      }
+      this.displayZoneResults(zone);
+    });
+    return html;
   }
 
   progressBarTemplate(candidateList, color, electedsNumber) {
@@ -312,9 +329,9 @@ class ResultComponent {
     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);
+        document
+          .getElementById("news-flow")
+          .appendChild(this.resultFlowTemplate(area));
 
         for (let i in area.candidateLists) {
           let party = await this.PartyModel.getParty(
@@ -344,9 +361,9 @@ class ResultComponent {
     for (let j in sections) {
       let section = sections[j];
       if (section.status === this.filter) {
-        document.getElementById(
-          "news-flow"
-        ).innerHTML += this.resultFlowTemplate(section);
+        document
+          .getElementById("news-flow")
+          .appendChild(this.resultFlowTemplate(section));
 
         for (let i in section.candidateLists) {
           let party = await this.PartyModel.getParty(