Skip to content

Commit

Permalink
Mise en forme tableau de synthèse
Browse files Browse the repository at this point in the history
  • Loading branch information
@JC144
JC144 committed Jan 19, 2024
1 parent fb663eb commit 2bb6ac3
Showing 1 changed file with 108 additions and 96 deletions.
204 changes: 108 additions & 96 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ function displayResults() {

function AddCustomisationToAbonnements() {
abonnements.forEach((abo) => {
if(abo.hasSpecialDaysCustom) {
if (abo.hasSpecialDaysCustom) {
abo.specialDays.push(parseInt(jourZenPlusSelector.value));
}
if (abo.hasHCCustom) {
Expand Down Expand Up @@ -241,9 +241,11 @@ function refreshResultView(dateBegin, dateEnd) {
rowHeader.appendChild(headerTarifName);
const headerEstimationName = document.createElement("th");
headerEstimationName.innerHTML = "Estimation";
headerEstimationName.className = "text-center";
rowHeader.appendChild(headerEstimationName);
const headerDifferenceName = document.createElement("th");
headerDifferenceName.innerHTML = "Différence";
headerDifferenceName.className = "text-center";
rowHeader.appendChild(headerDifferenceName);

const tableBody = document.createElement("tbody");
Expand All @@ -257,102 +259,112 @@ function refreshResultView(dateBegin, dateEnd) {
.sort((a, b) => a.tarif.price - b.tarif.price);

resultsOrdered.forEach(result => {
const tarifRow = document.createElement("tr");
const accordionRowId = dateBegin.getFullYear() + "-" + currentRow;
tableBody.appendChild(tarifRow);
tarifRow.setAttribute("data-bs-toggle", "collapse");
tarifRow.setAttribute("data-bs-target", "#" + accordionRowId);

const accordionRow = document.createElement("tr");
tableBody.appendChild(accordionRow);
accordionRow.id = accordionRowId;
accordionRow.className = "collapse";

const accordionCell = document.createElement("td");
accordionCell.colSpan = 2;
accordionRow.appendChild(accordionCell);

result.tarif.months.forEach((m) => {
const titleDetail = document.createElement("h3");
accordionCell.appendChild(titleDetail);
titleDetail.className = "main-title";
const subTitleDetail = document.createElement("h4");
accordionCell.appendChild(subTitleDetail);
subTitleDetail.className = "sub-title";

titleDetail.innerHTML = getMonthName(parseInt(m.month));
subTitleDetail.innerHTML = (m.conso / 1000).toFixed(2) + "kWh / " + m.price.toFixed(2) + "€";

const tableDailyDetail = document.createElement("table");
tableDailyDetail.className = "table mt-2";
accordionCell.appendChild(tableDailyDetail);
const headerDailyDetail = document.createElement("tr");
tableDailyDetail.appendChild(document.createElement("thead").appendChild(headerDailyDetail));
const cell1HeaderDailyDetail = document.createElement("th");
const cell2HeaderDailyDetail = document.createElement("th");
const cell3HeaderDailyDetail = document.createElement("th");
const cell4HeaderDailyDetail = document.createElement("th");
const cell5HeaderDailyDetail = document.createElement("th");
const cell6HeaderDailyDetail = document.createElement("th");
const cell7HeaderDailyDetail = document.createElement("th");
cell1HeaderDailyDetail.innerHTML = "Jour";
cell2HeaderDailyDetail.innerHTML = "Consommation totale";
cell3HeaderDailyDetail.innerHTML = "Conso HC (kWh)";
cell4HeaderDailyDetail.innerHTML = "Estimation HC (€)";
cell5HeaderDailyDetail.innerHTML = "Conso HP (kWh)";
cell6HeaderDailyDetail.innerHTML = "Estimation HP (€)";
cell7HeaderDailyDetail.innerHTML = "Total (€)";

headerDailyDetail.appendChild(cell1HeaderDailyDetail);
headerDailyDetail.appendChild(cell2HeaderDailyDetail);
headerDailyDetail.appendChild(cell3HeaderDailyDetail);
headerDailyDetail.appendChild(cell4HeaderDailyDetail);
headerDailyDetail.appendChild(cell5HeaderDailyDetail);
headerDailyDetail.appendChild(cell6HeaderDailyDetail);
headerDailyDetail.appendChild(cell7HeaderDailyDetail);

for (let j = m.days.length - 1; j >= 0; j--) {
const bodyDailyDetail = document.createElement("tr");
tableDailyDetail.appendChild(document.createElement("tbody").appendChild(bodyDailyDetail));
const cell1BodyDailyDetail = document.createElement("td");
const cell2BodyDailyDetail = document.createElement("td");
const cell3BodyDailyDetail = document.createElement("td");
const cell4BodyDailyDetail = document.createElement("td");
const cell5BodyDailyDetail = document.createElement("td");
const cell6BodyDailyDetail = document.createElement("td");
const cell7BodyDailyDetail = document.createElement("td");

cell1BodyDailyDetail.innerHTML = m.days[j].date;
cell2BodyDailyDetail.innerHTML = (m.days[j].conso / 1000).toFixed(2) + "kWh";
cell3BodyDailyDetail.innerHTML = (m.days[j].consoHC / 1000).toFixed(2) + "kWh";
cell4BodyDailyDetail.innerHTML = m.days[j].priceHC.toFixed(2) + "€";
cell5BodyDailyDetail.innerHTML = (m.days[j].consoHP / 1000).toFixed(2) + "kWh";
cell6BodyDailyDetail.innerHTML = m.days[j].priceHP.toFixed(2) + "€";
cell7BodyDailyDetail.innerHTML = m.days[j].price.toFixed(2) + "€";
bodyDailyDetail.appendChild(cell1BodyDailyDetail);
bodyDailyDetail.appendChild(cell2BodyDailyDetail);
bodyDailyDetail.appendChild(cell3BodyDailyDetail);
bodyDailyDetail.appendChild(cell4BodyDailyDetail);
bodyDailyDetail.appendChild(cell5BodyDailyDetail);
bodyDailyDetail.appendChild(cell6BodyDailyDetail);
bodyDailyDetail.appendChild(cell7BodyDailyDetail);
}
});

const cellTarifName = document.createElement("th");
tarifRow.appendChild(cellTarifName);
cellTarifName.innerHTML = result.title;

const cellTarifPrice = document.createElement("td");
tarifRow.appendChild(cellTarifPrice);
cellTarifPrice.innerHTML = result.tarif.price.toFixed(2) + " € TTC <br>(" + (result.tarif.price / 12).toFixed(2) + " €/mois)";

const cellDiffencePrice = document.createElement("td");
tarifRow.appendChild(cellDiffencePrice);
cellDiffencePrice.innerHTML = "+ " + (result.tarif.price - resultsOrdered[0].tarif.price).toFixed(2) + " € TTC <br>(" + ((result.tarif.price - resultsOrdered[0].tarif.price) / 12).toFixed(2) + " €/mois)";

currentRow++;
const tarifRow = document.createElement("tr");
const accordionRowId = dateBegin.getFullYear() + "-" + currentRow;
tableBody.appendChild(tarifRow);
tarifRow.setAttribute("data-bs-toggle", "collapse");
tarifRow.setAttribute("data-bs-target", "#" + accordionRowId);

const accordionRow = document.createElement("tr");
tableBody.appendChild(accordionRow);
accordionRow.id = accordionRowId;
accordionRow.className = "collapse";

const accordionCell = document.createElement("td");
accordionCell.colSpan = 3;
accordionRow.appendChild(accordionCell);

result.tarif.months.forEach((m) => {
const titleDetail = document.createElement("h3");
accordionCell.appendChild(titleDetail);
titleDetail.className = "main-title";
const subTitleDetail = document.createElement("h4");
accordionCell.appendChild(subTitleDetail);
subTitleDetail.className = "sub-title";

titleDetail.innerHTML = getMonthName(parseInt(m.month));
subTitleDetail.innerHTML = (m.conso / 1000).toFixed(2) + "kWh / " + m.price.toFixed(2) + "€";

const tableDailyDetail = document.createElement("table");
tableDailyDetail.className = "table mt-2";
accordionCell.appendChild(tableDailyDetail);
const headerDailyDetail = document.createElement("tr");
tableDailyDetail.appendChild(document.createElement("thead").appendChild(headerDailyDetail));
const cell1HeaderDailyDetail = document.createElement("th");
const cell2HeaderDailyDetail = document.createElement("th");
const cell3HeaderDailyDetail = document.createElement("th");
const cell4HeaderDailyDetail = document.createElement("th");
const cell5HeaderDailyDetail = document.createElement("th");
const cell6HeaderDailyDetail = document.createElement("th");
const cell7HeaderDailyDetail = document.createElement("th");
cell1HeaderDailyDetail.innerHTML = "Jour";
cell2HeaderDailyDetail.innerHTML = "Consommation totale";
cell3HeaderDailyDetail.innerHTML = "Conso HC (kWh)";
cell4HeaderDailyDetail.innerHTML = "Estimation HC (€)";
cell5HeaderDailyDetail.innerHTML = "Conso HP (kWh)";
cell6HeaderDailyDetail.innerHTML = "Estimation HP (€)";
cell7HeaderDailyDetail.innerHTML = "Total (€)";

headerDailyDetail.appendChild(cell1HeaderDailyDetail);
headerDailyDetail.appendChild(cell2HeaderDailyDetail);
headerDailyDetail.appendChild(cell3HeaderDailyDetail);
headerDailyDetail.appendChild(cell4HeaderDailyDetail);
headerDailyDetail.appendChild(cell5HeaderDailyDetail);
headerDailyDetail.appendChild(cell6HeaderDailyDetail);
headerDailyDetail.appendChild(cell7HeaderDailyDetail);

for (let j = m.days.length - 1; j >= 0; j--) {
const bodyDailyDetail = document.createElement("tr");
tableDailyDetail.appendChild(document.createElement("tbody").appendChild(bodyDailyDetail));
const cell1BodyDailyDetail = document.createElement("td");
const cell2BodyDailyDetail = document.createElement("td");
const cell3BodyDailyDetail = document.createElement("td");
const cell4BodyDailyDetail = document.createElement("td");
const cell5BodyDailyDetail = document.createElement("td");
const cell6BodyDailyDetail = document.createElement("td");
const cell7BodyDailyDetail = document.createElement("td");

cell1BodyDailyDetail.innerHTML = m.days[j].date;
cell2BodyDailyDetail.innerHTML = (m.days[j].conso / 1000).toFixed(2) + "kWh";
cell3BodyDailyDetail.innerHTML = (m.days[j].consoHC / 1000).toFixed(2) + "kWh";
cell4BodyDailyDetail.innerHTML = m.days[j].priceHC.toFixed(2) + "€";
cell5BodyDailyDetail.innerHTML = (m.days[j].consoHP / 1000).toFixed(2) + "kWh";
cell6BodyDailyDetail.innerHTML = m.days[j].priceHP.toFixed(2) + "€";
cell7BodyDailyDetail.innerHTML = m.days[j].price.toFixed(2) + "€";
bodyDailyDetail.appendChild(cell1BodyDailyDetail);
bodyDailyDetail.appendChild(cell2BodyDailyDetail);
bodyDailyDetail.appendChild(cell3BodyDailyDetail);
bodyDailyDetail.appendChild(cell4BodyDailyDetail);
bodyDailyDetail.appendChild(cell5BodyDailyDetail);
bodyDailyDetail.appendChild(cell6BodyDailyDetail);
bodyDailyDetail.appendChild(cell7BodyDailyDetail);
}
});

const cellTarifName = document.createElement("th");
cellTarifName.className = "align-middle";
tarifRow.appendChild(cellTarifName);
cellTarifName.innerHTML = result.title;

const cellTarifPrice = document.createElement("td");
cellTarifPrice.className = "text-center align-middle";
tarifRow.appendChild(cellTarifPrice);
cellTarifPrice.innerHTML = result.tarif.price.toFixed(2) + " € TTC <br>(" + (result.tarif.price / 12).toFixed(2) + " €/mois)";

const cellDiffencePrice = document.createElement("td");
cellDiffencePrice.className = "text-center align-middle";
tarifRow.appendChild(cellDiffencePrice);
if (currentRow == 0) {
const spanLessExpensive = document.createElement("span");
spanLessExpensive.className = "fw-bold";
spanLessExpensive.innerHTML = "Tarif le moins cher";
cellDiffencePrice.appendChild(spanLessExpensive);
}
else {
cellDiffencePrice.innerHTML = "+ " + (result.tarif.price - resultsOrdered[0].tarif.price).toFixed(2) + " € TTC <br>(" + ((result.tarif.price - resultsOrdered[0].tarif.price) / 12).toFixed(2) + " €/mois)";
}
currentRow++;
});
}

function getMonthName(monthNumber) {
Expand Down

0 comments on commit 2bb6ac3

Please sign in to comment.