From da967347a31bfc5c7fe0c6483e89677633e9734c Mon Sep 17 00:00:00 2001
From: Alexis POYEN <apoyen@grandlyon.com>
Date: Mon, 6 Jul 2020 16:44:03 +0200
Subject: [PATCH] Resolve "Add button"
---
web/components/management/area.js | 27 +++++++++---------
web/components/management/candidate-lists.js | 29 +++++++++++--------
web/components/management/desk.js | 22 ++++++++------
web/components/management/election.js | 30 +++++++++-----------
web/components/management/party.js | 22 ++++++++------
web/components/management/rounds-card.js | 22 ++++++++------
web/components/management/section.js | 27 ++++++++++--------
web/style.css | 4 +++
8 files changed, 102 insertions(+), 81 deletions(-)
diff --git a/web/components/management/area.js b/web/components/management/area.js
index 0bbaf36..6f1d647 100644
--- a/web/components/management/area.js
+++ b/web/components/management/area.js
@@ -26,11 +26,6 @@ class Area {
<p class="card-header-title" id="area-title">
Circonscriptions
</p>
- <button id="area-new" class="button is-success" disabled>
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="area-list" class="content">
@@ -44,9 +39,6 @@ class Area {
handleDom() {
let areaHandler = this;
- document.getElementById(`area-new`).addEventListener("click", function () {
- areaHandler.newArea(areaHandler.election);
- });
document
.getElementById(`area-modal-close`)
@@ -132,11 +124,19 @@ class Area {
}
async displayAreas() {
+ document.getElementById("area-list").innerHTML = /* HTML */ `<button
+ id="area-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
+
let areaHandler = this;
let areas = await this.updateAreas();
const markup = areas.map((area) => this.areaTemplate(area)).join("");
- document.getElementById("area-list").innerHTML = markup;
- document.getElementById("area-new").removeAttribute("disabled");
+ document.getElementById("area-list").innerHTML += markup;
document.getElementById("area-title").innerHTML =
"Circonscriptions de <em> " + this.election.Name + "</em>";
@@ -159,12 +159,11 @@ class Area {
areaHandler.activateArea(area);
areaHandler.parent.sectionHandler.area = area;
areaHandler.parent.sectionHandler.displaySections();
- document.getElementById("desk-new").setAttribute("disabled", "true");
- document
- .getElementById("section-new")
- .setAttribute("disabled", "true");
});
});
+ document.getElementById(`area-new`).addEventListener("click", () => {
+ this.newArea(this.election);
+ });
}
emptyAreas() {
diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index a157dfa..1998e25 100644
--- a/web/components/management/candidate-lists.js
+++ b/web/components/management/candidate-lists.js
@@ -42,11 +42,6 @@ class CandidateList {
<i class="fas fa-caret-down"></i>
</span>
</button>
- <button id="candidate-list-new" class="button is-success" disabled>
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div id="candidate-lists-dropdown-content" class="columns card-content">
<div class="column">
@@ -333,11 +328,6 @@ class CandidateList {
handleDom() {
let candidateListHandler = this;
- document
- .getElementById(`candidate-list-new`)
- .addEventListener("click", function () {
- candidateListHandler.newCandidateList();
- });
document
.getElementById(`candidateList-modal-close`)
@@ -400,7 +390,6 @@ class CandidateList {
document
.getElementById(`areas-area-${areaToActivate.ID}`)
.classList.add("active-card");
- document.getElementById("candidate-list-new").removeAttribute("disabled");
}
async activateCandidateList(candidateListToActivate) {
@@ -422,10 +411,20 @@ class CandidateList {
async displayCandidateLists() {
let candidateListHandler = this;
let candidateLists = await this.updateCandidateLists();
+ document.getElementById(
+ "candidate-lists-list"
+ ).innerHTML = /* HTML */ `<button
+ id="candidate-list-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
const markup = candidateLists
.map((candidateList) => this.candidateListTemplate(candidateList))
.join("");
- document.getElementById("candidate-lists-list").innerHTML = markup;
+ document.getElementById("candidate-lists-list").innerHTML += markup;
candidateLists.map(async (candidateList) => {
let party = await this.PartyModel.getParty(candidateList.PartyID);
@@ -453,6 +452,12 @@ class CandidateList {
await candidateListHandler.displayCandidates();
});
});
+
+ document
+ .getElementById(`candidate-list-new`)
+ .addEventListener("click", function () {
+ candidateListHandler.newCandidateList();
+ });
}
async updateCandidateLists() {
diff --git a/web/components/management/desk.js b/web/components/management/desk.js
index 88b5e04..af07485 100644
--- a/web/components/management/desk.js
+++ b/web/components/management/desk.js
@@ -26,11 +26,6 @@ class Desk {
<p class="card-header-title" id="desk-title">
Bureaux
</p>
- <button id="desk-new" class="button is-success" disabled>
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="desk-list" class="content">
@@ -44,9 +39,6 @@ class Desk {
handleDom() {
let deskHandler = this;
- document.getElementById(`desk-new`).addEventListener("click", function () {
- deskHandler.newDesk(deskHandler.section);
- });
document
.getElementById(`desk-modal-close`)
@@ -129,10 +121,18 @@ class Desk {
}
async displayDesks() {
+ document.getElementById("desk-list").innerHTML = /* HTML */ `<button
+ id="desk-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
let deskHandler = this;
let desks = await this.updateDesks();
const markup = desks.map((section) => this.deskTemplate(section)).join("");
- document.getElementById("desk-list").innerHTML = markup;
+ document.getElementById("desk-list").innerHTML += markup;
document.getElementById("desk-new").removeAttribute("disabled");
document.getElementById("desk-title").innerHTML =
"Bureaux de <em> " + this.section.Name + "</em>";
@@ -151,6 +151,10 @@ class Desk {
});
});
});
+
+ document.getElementById(`desk-new`).addEventListener("click", () => {
+ this.newDesk(this.section);
+ });
}
emptyDesks() {
diff --git a/web/components/management/election.js b/web/components/management/election.js
index 4907425..05b3d84 100644
--- a/web/components/management/election.js
+++ b/web/components/management/election.js
@@ -25,11 +25,6 @@ class Election {
<p class="card-header-title">
Elections
</p>
- <button id="election-new" class="button is-success">
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="election-list" class="content">Liste des élections</div>
@@ -43,11 +38,6 @@ class Election {
handleDom() {
let electionHandler = this;
- document
- .getElementById(`election-new`)
- .addEventListener("click", function () {
- electionHandler.newElection();
- });
document
.getElementById(`election-modal-close`)
@@ -203,11 +193,20 @@ class Election {
}
async displayElections() {
+ document.getElementById("election-list").innerHTML = /* HTML */ `<button
+ id="election-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
+
let elections = await this.ElectionModel.getElections();
const markup = elections
.map((election) => this.electionTemplate(election))
.join("");
- document.getElementById("election-list").innerHTML = markup;
+ document.getElementById("election-list").innerHTML += markup;
let electionHandler = this;
elections.map((election) => {
@@ -234,13 +233,12 @@ class Election {
electionHandler.activateElection(election);
electionHandler.parent.areaHandler.election = election;
electionHandler.parent.areaHandler.displayAreas();
- document.getElementById("desk-new").setAttribute("disabled", "true");
- document
- .getElementById("section-new")
- .setAttribute("disabled", "true");
- document.getElementById("area-new").setAttribute("disabled", "true");
});
});
+
+ document.getElementById(`election-new`).addEventListener("click", () => {
+ this.newElection();
+ });
}
electionTemplate(election) {
diff --git a/web/components/management/party.js b/web/components/management/party.js
index 01b86e2..c02f7c2 100644
--- a/web/components/management/party.js
+++ b/web/components/management/party.js
@@ -35,11 +35,6 @@ class Party {
<p class="card-header-title">
Partis
</p>
- <button id="party-new" class="button is-success">
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="party-list" class="content">Liste des partis</div>
@@ -54,9 +49,6 @@ class Party {
handleDom() {
let partyHandler = this;
- document.getElementById(`party-new`).addEventListener("click", function () {
- partyHandler.newParty();
- });
document
.getElementById(`party-modal-close`)
@@ -154,9 +146,18 @@ class Party {
}
async displayParties() {
+ document.getElementById("party-list").innerHTML = /* HTML */ `<button
+ id="party-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
+
let parties = await this.PartyModel.getParties();
const markup = parties.map((party) => this.partyTemplate(party)).join("");
- document.getElementById("party-list").innerHTML = markup;
+ document.getElementById("party-list").innerHTML += markup;
let partyHandler = this;
parties.map((party) => {
@@ -244,6 +245,9 @@ class Party {
});
});
});
+ document.getElementById(`party-new`).addEventListener("click", () => {
+ this.newParty();
+ });
}
newParty() {
diff --git a/web/components/management/rounds-card.js b/web/components/management/rounds-card.js
index 9bee067..8c9862a 100644
--- a/web/components/management/rounds-card.js
+++ b/web/components/management/rounds-card.js
@@ -31,11 +31,6 @@ class Round {
<p class="card-header-title">
Tours
</p>
- <button id="round-new" class="button is-success">
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="round-list" class="content">Liste des tours</div>
@@ -48,9 +43,6 @@ class Round {
handleDom() {
let roundHandler = this;
- document.getElementById(`round-new`).addEventListener("click", function () {
- roundHandler.newRound();
- });
document
.getElementById(`round-modal-close`)
@@ -142,9 +134,17 @@ class Round {
}
async displayRounds() {
+ document.getElementById("round-list").innerHTML = /* HTML */ `<button
+ id="round-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
let rounds = await this.RoundModel.getRounds();
const markup = rounds.map((round) => this.roundTemplate(round)).join("");
- document.getElementById("round-list").innerHTML = markup;
+ document.getElementById("round-list").innerHTML += markup;
let roundHandler = this;
rounds.map(async (round) => {
@@ -171,6 +171,10 @@ class Round {
roundHandler.activateRound(round);
});
});
+
+ document.getElementById(`round-new`).addEventListener("click", () => {
+ this.newRound();
+ });
}
roundTemplate(round) {
diff --git a/web/components/management/section.js b/web/components/management/section.js
index ffe99b4..3ea21be 100644
--- a/web/components/management/section.js
+++ b/web/components/management/section.js
@@ -27,11 +27,6 @@ class Section {
<p class="card-header-title" id="section-title">
Sections
</p>
- <button id="section-new" class="button is-success" disabled>
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>
</header>
<div class="card-content">
<div id="section-list" class="content">
@@ -45,11 +40,6 @@ class Section {
handleDom() {
let sectionHandler = this;
- document
- .getElementById(`section-new`)
- .addEventListener("click", function () {
- sectionHandler.newSection(sectionHandler.area);
- });
document
.getElementById(`section-modal-close`)
@@ -136,13 +126,20 @@ class Section {
}
async displaySections() {
+ document.getElementById("section-list").innerHTML = /* HTML */ `<button
+ id="section-new"
+ class="button large-button is-success"
+ >
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
let sectionHandler = this;
let sections = await this.updateSections();
const markup = sections
.map((section) => this.sectionTemplate(section))
.join("");
- document.getElementById("section-list").innerHTML = markup;
- document.getElementById("section-new").removeAttribute("disabled");
+ document.getElementById("section-list").innerHTML += markup;
document.getElementById("section-title").innerHTML =
"Sections de <em> " + this.area.Name + "</em>";
@@ -168,6 +165,12 @@ class Section {
document.getElementById("desk-new").setAttribute("disabled", "true");
});
});
+
+ document
+ .getElementById(`section-new`)
+ .addEventListener("click", () => {
+ this.newSection(this.area);
+ });
}
emptySections() {
diff --git a/web/style.css b/web/style.css
index a89ab93..b564fd9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -204,3 +204,7 @@ select {
#round-detaileds-results {
padding: 20px;
}
+
+.large-button {
+ width: 100%;
+}
\ No newline at end of file
--
GitLab