From 87b71a538bf7d0aca2fb0dd837df869e8d98dfb8 Mon Sep 17 00:00:00 2001
From: apoyen <apoyen@grandlyon.com>
Date: Mon, 27 Jul 2020 10:57:29 +0200
Subject: [PATCH] Refactor : split flow in an other file
---
web/components/visualization/results-flow.js | 108 +++++++++++++++++++
web/components/visualization/results-zone.js | 94 +---------------
2 files changed, 112 insertions(+), 90 deletions(-)
create mode 100644 web/components/visualization/results-flow.js
diff --git a/web/components/visualization/results-flow.js b/web/components/visualization/results-flow.js
new file mode 100644
index 0000000..c9c02ee
--- /dev/null
+++ b/web/components/visualization/results-flow.js
@@ -0,0 +1,108 @@
+// Imports
+import * as Auth from "/services/auth/auth.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";
+import * as Common from "/services/common/common.js";
+
+export async function mount(parent) {
+ const flowComponent = new FlowComponent(parent);
+ return flowComponent;
+}
+
+class FlowComponent {
+ constructor(parent) {
+ this.parent = parent;
+ this.PartyModel = PartyModel.getPartyModel();
+ this.AreaModel = AreaModel.getAreaModel();
+ }
+
+ resultFlowTemplate(zone) {
+ let resultHandler = this;
+ let html = document.createElement("div");
+ html.classList = "card-list card-no-hover";
+ html.innerHTML = /* HTML */ `
+ <div class="card-content clickable">
+ <div id="flow-content-${zone.ID}" class="content">
+ <h5 class="title is-5">${zone.Name}</h5>
+ </div>
+ </div>
+ `;
+ html.addEventListener("click", async () => {
+ if (this.parent.parent.zone == "sections") {
+ let area = await this.AreaModel.getArea(zone.AreaID);
+ this.parent.refreshSections(area);
+ document.getElementById("select-sections").value = zone.ID;
+ document.getElementById("select-areas").value = zone.AreaID;
+ resultHandler.areaDisplayed = area;
+ resultHandler.sectionDisplayed = area.Sections[0];
+ } else {
+ document.getElementById("select-areas").value = zone.ID;
+ resultHandler.areaDisplayed = area;
+ }
+ this.parent.displayZoneResults(zone);
+ });
+ return html;
+ }
+
+ async displayFlowAreas() {
+ let areasResults = this.parent.parent.results.areasResults;
+ areasResults.sort(function (a, b) {
+ return b.DateCompletion - a.DateCompletion;
+ });
+ for (let j in areasResults) {
+ let area = areasResults[j];
+ if (area.status === this.parent.parent.filter) {
+ document
+ .getElementById("news-flow")
+ .appendChild(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.parent.parent.progressBarTemplate(
+ area.candidateLists[i],
+ party.Color
+ );
+ }
+ }
+ }
+ }
+
+ async displayFlowSections() {
+ let sections = [];
+ this.parent.parent.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.parent.parent.filter) {
+ document
+ .getElementById("news-flow")
+ .appendChild(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.parent.parent.progressBarTemplate(
+ section.candidateLists[i],
+ party.Color
+ );
+ }
+ }
+ }
+ }
+}
diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js
index 3a012e2..563fb2a 100644
--- a/web/components/visualization/results-zone.js
+++ b/web/components/visualization/results-zone.js
@@ -5,6 +5,7 @@ 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";
import * as Common from "/services/common/common.js";
+import * as ResultsFlow from "/components/visualization/results-flow.js";
export async function mount(where, parent) {
const resultZoneComponent = new ResultZoneComponent(parent);
@@ -88,6 +89,7 @@ class ResultZoneComponent {
</div>
</div>
`;
+ this.ResultsFlow = await ResultsFlow.mount(this);
this.scroller = Scroller.scrollInit(
"news-flow",
document.getElementById("auto-scroll")
@@ -95,34 +97,6 @@ class ResultZoneComponent {
this.handleDom();
}
- resultFlowTemplate(zone) {
- let resultHandler = this;
- let html = document.createElement("div");
- html.classList = "card-list card-no-hover";
- html.innerHTML = /* HTML */ `
- <div class="card-content clickable">
- <div id="flow-content-${zone.ID}" class="content">
- <h5 class="title is-5">${zone.Name}</h5>
- </div>
- </div>
- `;
- html.addEventListener("click", async () => {
- if (this.parent.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;
- resultHandler.areaDisplayed = area;
- resultHandler.sectionDisplayed = area.Sections[0];
- } else {
- document.getElementById("select-areas").value = zone.ID;
- resultHandler.areaDisplayed = area;
- }
- this.displayZoneResults(zone);
- });
- return html;
- }
-
handleDom() {
let resultHandler = this;
document.getElementById("zoom-map").addEventListener("click", function () {
@@ -271,74 +245,14 @@ class ResultZoneComponent {
async displayResults() {
document.getElementById("news-flow").innerHTML = "";
if (this.parent.zone === "areas") {
-
- await this.displayFlowAreas();
+ await this.ResultsFlow.displayFlowAreas();
this.displayAreasResults();
} else if (this.parent.zone === "sections") {
- await this.displayFlowSections();
+ await this.ResultsFlow.displayFlowSections();
this.displaySectionsResults();
}
}
- async displayFlowAreas() {
- this.parent.results.areasResults.sort(function (a, b) {
- return b.DateCompletion - a.DateCompletion;
- });
- for (let j in this.parent.results.areasResults) {
- let area = this.parent.results.areasResults[j];
- if (area.status === this.parent.filter) {
- document
- .getElementById("news-flow")
- .appendChild(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.parent.progressBarTemplate(
- area.candidateLists[i],
- party.Color
- );
- }
- }
- }
- }
-
- async displayFlowSections() {
- let sections = [];
- this.parent.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.parent.filter) {
- document
- .getElementById("news-flow")
- .appendChild(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.parent.progressBarTemplate(
- section.candidateLists[i],
- party.Color
- );
- }
- }
- }
- }
-
displayAreasResults() {
this.refreshAreas();
document.getElementById("select-sections").parentNode.style.display =
--
GitLab