Fix : scroll issue

- scroll at the same point before refresh
- auto scroll only if box is checked even after refresh

web/components/visualization/results-section.js

@@ -133,36 +133,7 @@ class ResultComponent {
       });
     }
 
-    document.addEventListener(
-      "input",
-      function __listener(event) {
-        if (event.target.id == "select-areas") {
-          if (event.target.value != 0) {
-            let area = resultHandler.results.areasResults.find(
-              (area) => area.ID == event.target.value
-            );
-
-            if (resultHandler.zone === "areas")
-              resultHandler.resultsZone.displayZoneResults(area);
-            else if (resultHandler.zone === "sections") {
-              resultHandler.refreshSections(area);
-              resultHandler.resultsZone.displayZoneResults(area.Sections[0]);
-            }
-          }
-        } else if (event.target.id == "select-sections") {
-          let area = resultHandler.results.areasResults.find(
-            (area) => area.ID == document.getElementById("select-areas").value
-          );
-          let section = area.Sections.find(
-            (section) => section.ID == event.target.value
-          );
-          resultHandler.resultsZone.displayZoneResults(section);
-        }
-      },
-      false
-    );
-
-    this.interval = setInterval(async () => {
+    window.intervalRefreshResults = setInterval(async () => {
       this.calculateResults();
       this.resultsZone.displayResults();
       this.resultsGeneral.displayRoundResults();
@@ -187,18 +158,4 @@ class ResultComponent {
       );
     }
   }
-
-  refreshSections(area) {
-    let selectSections = document.getElementById("select-sections");
-    selectSections.parentNode.style.display = "block";
-    for (let i = selectSections.options.length - 1; i >= 0; i--) {
-      selectSections.remove(i);
-    }
-    for (let i in area.Sections) {
-      let el = document.createElement("option");
-      el.textContent = area.Sections[i].Name;
-      el.value = area.Sections[i].ID;
-      selectSections.appendChild(el);
-    }
-  }
 }

web/components/visualization/results-zone.js

@@ -93,6 +93,7 @@ class ResultZoneComponent {
       </div>
     `;
     this.handleDom();
+    this.scroller = Scroller.scrollInit("news-flow");
   }
 
   resultFlowTemplate(zone) {
@@ -108,7 +109,7 @@ class ResultZoneComponent {
     html.addEventListener("click", async () => {
       if (this.parent.zone == "sections") {
         let area = await this.AreaModel.getArea(zone.AreaID);
-        this.parent.refreshSections(area);
+        this.refreshSections(area);
         document.getElementById("select-sections").value = zone.ID;
         document.getElementById("select-areas").value = zone.AreaID;
       } else {
@@ -148,25 +149,29 @@ class ResultZoneComponent {
       function __listener(event) {
         if (event.target.id == "select-areas") {
           if (event.target.value != 0) {
-            let area = resultHandler.results.areasResults.find(
+            let area = resultHandler.parent.results.areasResults.find(
               (area) => area.ID == event.target.value
             );
 
-            if (resultHandler.zone === "areas")
+            if (resultHandler.parent.zone === "areas") {
               resultHandler.displayZoneResults(area);
-            else if (resultHandler.zone === "sections") {
+              resultHandler.areaDisplayed = area;
+            } else if (resultHandler.parent.zone === "sections") {
               resultHandler.refreshSections(area);
               resultHandler.displayZoneResults(area.Sections[0]);
+              resultHandler.areaDisplayed = area;
+              resultHandler.sectionDisplayed = area.Sections[0];
             }
           }
         } else if (event.target.id == "select-sections") {
-          let area = resultHandler.results.areasResults.find(
+          let area = resultHandler.parent.results.areasResults.find(
             (area) => area.ID == document.getElementById("select-areas").value
           );
           let section = area.Sections.find(
             (section) => section.ID == event.target.value
           );
           resultHandler.displayZoneResults(section);
+          resultHandler.sectionDisplayed = section;
         }
       },
       false
@@ -229,18 +234,21 @@ class ResultZoneComponent {
     this.handleDom();
   }
 
-  displayResults() {
+  async displayResults() {
     document.getElementById("news-flow").innerHTML = "";
     if (this.parent.zone === "areas") {
-      this.displayFlowAreas();
+      await this.displayFlowAreas();
       this.displayAreasResults();
     } else if (this.parent.zone === "sections") {
-      this.displayFlowSections();
+      await this.displayFlowSections();
       this.displaySectionsResults();
     }
-    let scroller = Scroller.scrollInit("news-flow");
+
+    if (document.getElementById("auto-scroll").checked) {
+      this.scroller.scrollDiv();
+    }
     document.getElementById("auto-scroll").addEventListener("change", () => {
-      scroller.switch();
+      this.scroller.switch();
     });
   }
 
@@ -319,7 +327,9 @@ class ResultZoneComponent {
       selectAreas.appendChild(el);
     });
 
-    this.displayZoneResults(this.parent.results.areasResults[0]);
+    if (this.parent.zone == "areas" && this.areaDisplayed != undefined) {
+      document.getElementById("select-areas").value = this.areaDisplayed.ID;
+    } else this.displayZoneResults(this.parent.results.areasResults[0]);
   }
 
   displaySectionsResults() {
@@ -338,9 +348,17 @@ class ResultZoneComponent {
       selectAreas.appendChild(el);
     });
 
-    this.parent.refreshSections(this.parent.results.areasResults[0]);
+    this.refreshSections(this.parent.results.areasResults[0]);
 
-    this.displayZoneResults(this.parent.results.areasResults[0].Sections[0]);
+    if (this.parent.zone == "sections" && this.sectionDisplayed != undefined) {
+      document.getElementById("select-areas").value = this.areaDisplayed.ID;
+      this.refreshSections(this.areaDisplayed);
+      document.getElementById(
+        "select-sections"
+      ).value = this.sectionDisplayed.ID;
+    } else {
+      this.displayZoneResults(this.parent.results.areasResults[0].Sections[0]);
+    }
   }
 
   async displayZoneResults(zone) {
@@ -348,19 +366,22 @@ class ResultZoneComponent {
       if (zone.status == "no_results") {
         document.getElementById(
           "zone-results"
-        ).innerHTML = Common.warningMessage("Pas de résultats",
+        ).innerHTML = Common.warningMessage(
+          "Pas de résultats",
           "Aucun résultats n'ont étaient saisis sur cette zone"
         );
       } else if (zone.status == "incompleted") {
         document.getElementById(
           "zone-results"
-        ).innerHTML = Common.warningMessage("Pas complets",
+        ).innerHTML = Common.warningMessage(
+          "Pas complets",
           "Les résultats pour cette zone ne sont pas complets"
         );
       } else if (zone.status == "not validated") {
         document.getElementById(
           "zone-results"
-        ).innerHTML = Common.warningMessage("Non validé",
+        ).innerHTML = Common.warningMessage(
+          "Non validé",
           "Les résultats pour cette zone n'ont pas étaient validés"
         );
       }
@@ -459,4 +480,18 @@ class ResultZoneComponent {
       }
     }
   }
+
+  refreshSections(area) {
+    let selectSections = document.getElementById("select-sections");
+    selectSections.parentNode.style.display = "block";
+    for (let i = selectSections.options.length - 1; i >= 0; i--) {
+      selectSections.remove(i);
+    }
+    for (let i in area.Sections) {
+      let el = document.createElement("option");
+      el.textContent = area.Sections[i].Name;
+      el.value = area.Sections[i].ID;
+      selectSections.appendChild(el);
+    }
+  }
 }

web/main.js

@@ -9,7 +9,6 @@ import { AnimateCSS } from "/services/common/common.js";
 
 const mountPoint = document.getElementById("main");
 const spinner = document.getElementById("spinner");
-let sysInfoInterval;
 
 document.addEventListener("DOMContentLoaded", function () {
   Navbar.mount("navbar");
@@ -18,7 +17,7 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 async function navigate() {
-  clearInterval(sysInfoInterval);
+  window.clearInterval(window.intervalRefreshResults);
   switch (location.hash) {
     case "#home":
       load(mountPoint, async function () {

web/services/common/scroller.js

@@ -11,17 +11,16 @@ class Scroller {
     this.elmnt.scrollTop = 0;
     this.previousScrollTop = 0;
 
-    this.scrollDiv();
     this.elmnt.addEventListener("mouseover", () => {
       if (this.autoScroll) this.pauseScroll();
     });
     this.elmnt.addEventListener("mouseout", () => {
       if (this.autoScroll) this.resumeScroll();
     });
-    this.autoScroll = true;
   }
 
   scrollDiv() {
+    this.autoScroll = true;
     if (!this.reachedMaxScroll) {
       this.elmnt.scrollBy({ top: 5, left: 0, behavior: "smooth" });
       this.reachedMaxScroll =