From ab7817215e7374aa7ece5853674a78b6773b372f Mon Sep 17 00:00:00 2001 From: goulven Date: Thu, 2 Jan 2025 17:19:46 +0100 Subject: [PATCH] UI / UX --- .../commons/config/yml/ui/VerticalConfig.java | 9 + .../ui/pages/EcoscoreController.java | 4 + .../templates/default/contribution.html | 831 ++++++++---------- .../templates/themes/v2/ecoscore.html | 314 +++---- .../templates/themes/v2/inc/footer.html | 121 ++- .../themes/v2/inc/navbar/navbar-home.html | 16 +- 6 files changed, 633 insertions(+), 662 deletions(-) diff --git a/commons/src/main/java/org/open4goods/commons/config/yml/ui/VerticalConfig.java b/commons/src/main/java/org/open4goods/commons/config/yml/ui/VerticalConfig.java index d70823973..e59585839 100644 --- a/commons/src/main/java/org/open4goods/commons/config/yml/ui/VerticalConfig.java +++ b/commons/src/main/java/org/open4goods/commons/config/yml/ui/VerticalConfig.java @@ -424,6 +424,15 @@ public String getBaseUrl(final Locale siteLocale) { } + /** + * + * @return the sum of the coefficient applyed to this ecoscore + */ + public Double getEcoscoreCriteriasSum() { + return impactScoreConfig.getCriteriasPonderation().values().stream() + .mapToDouble(Double::doubleValue) + .sum(); + } public String getBaseUrl(final String siteLocale) { return i18n.getOrDefault(siteLocale, i18n.get("default")).getVerticalHomeUrl(); } diff --git a/ui/src/main/java/org/open4goods/ui/controllers/ui/pages/EcoscoreController.java b/ui/src/main/java/org/open4goods/ui/controllers/ui/pages/EcoscoreController.java index fff13c70c..0ad78168d 100644 --- a/ui/src/main/java/org/open4goods/ui/controllers/ui/pages/EcoscoreController.java +++ b/ui/src/main/java/org/open4goods/ui/controllers/ui/pages/EcoscoreController.java @@ -51,6 +51,10 @@ public ModelAndView api(final HttpServletRequest request) { VerticalConfig verticalConfig = verticalsConfigService.getConfigById("tv"); ret.addObject("impactscore",verticalConfig .getImpactScoreConfig()); ret.addObject("verticalConfig",verticalConfig); + ret.addObject("verticals",verticalsConfigService.getConfigsWithoutDefault()); + + + return ret; } diff --git a/ui/src/main/resources/templates/default/contribution.html b/ui/src/main/resources/templates/default/contribution.html index cfd8affa9..c261a6ae1 100644 --- a/ui/src/main/resources/templates/default/contribution.html +++ b/ui/src/main/resources/templates/default/contribution.html @@ -1,495 +1,408 @@ - + + + + +La contribution écologique | Nudger + - - - - - La contribution écologique | Nudger - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - + +
+
+ +
+
- -
- -
- - - -
- -
-
-
-

La contribution écologique

- - - -
-
-
-
+ + - -
-
-
-
- Compensation carbone -
-
- -
- - - - - -
- - - - -
-
-
-
- - - - - - +
+ +
+
+
+

La contribution écologique

+ + + +
+
+
+ + + +
+
- -
- -
-

L'action de Nudger en chiffres

-

Ce n'est qu'un début !

-
- -
- -
-

- -
-
- -
-
- -
-

Organismes

- -
- -
-
- -
-
- -
-

Versements effectués

- 2 -
- -
-
- -
-
- -
-

Montant reversé

- € -
- -
-
-
-
-
- - - -
- -
-

Vous décidez !

-
- - -
-
-
-
-

Système de vote de Nudger

-
-
-
-
- -
-
-
-

Vous choisissez l'organisation

-

- - - -

-
-
-
-
-
-
-
- -
-
-
-

Fonctionnement du vote

-

- - - -

-
-
-
- -
-
-
-
- -
-
-
-

Répartition des revenus

-

- - - -

-
-
-
- - - - - -
-
- - -
- - - -
-
- -
-

En toute transparence

-

- - - - -

-
-
-
- - - - - - - - - -
- -
-

Votes

- - - -

Depuis le dernier reversement

-
- - -
- - -

votes en double, exclus des données ci-dessus

- -
- -
- -
- -
-
- -
- - - -
-
-

Détails des dons

-
+ +
+
+
+
+ + Compensation carbone +
+
+
+ + + +
-
+ + + +
+
+
+
-
- -
-
+ +
+
+

L'action de Nudger en chiffres

+

Ce n'est qu'un début !

+
+
+
+
+
+
+ +

Organismes

+ +
+
+
+
+ +

Versements effectués

+ 2 +
+
+
+
+ +

Montant reversé

+ € + +
+
+
+
+
+
-

Choix des organisations

- -
-
-
- + +
+
+

Vous décidez !

+
+
+
+ + +
+
+

Système de vote de Nudger

+ + +
+
+
+
-
-

- +
+

Vous choisissez l'organisation

+

+ + + +

- -
- - - -
- -

Dons effectués

- -
-
-
-
- -
-
- € -
-
-
-
-
- - - - -
- - -
- -
- - -
- - - - - - - -
- - - - -
-
-

La contribution écologique en détail

-
- -
-
- -
-

Contribution écologique, compensation carbone. Quelles différences ?

-
- - - + +
+
+
+
-
- - - - -
-

Comment sont calculés les dons ?

-
- - - +
+

Fonctionnement du vote

+

+ + + +

-
- - - - - -
-

Puis je vérifier ?

-
- - - -
-
- -
-
-
-
- + + - - + +
+
+
+ +
+
+

Répartition des revenus

+

+ + + +

+
+
+
+ + - - - - + +
+
+
+
+

En toute transparence

+

+ + + +

+
+
+
- - - - - - - - - - + +
+
+

Votes

+ -- + +

Depuis le dernier reversement

+
+
+ +

+ votes en double, exclus des données ci-dessus +

+
+
+
+ + + - + +
+
+

Détails des dons

+
+
+
+
+ +
+

Choix des organisations

+
+
+
+ + +
+
+

+
+
+
+
- + +
+

Dons effectués

+
+
+
+
+ +
+
+ € + +
+
+ +
+
+
+
- - - - + + +
+
+
+
+
- - + +
+
+

La contribution écologique en détail

+
+
+
+
+

Contribution écologique, compensation carbone. Quelles différences ?

+
+ + + +
+
+
+

Comment sont calculés les dons ?

+
+ + + +
+
+
+

Puis-je vérifier ?

+
+ + + +
+
+
+
+
+
- + + + + + + + + + + + + + + - // Extracting labels and data from the repartition map - const labels = Object.keys(repartition); - const dataValues = Object.values(repartition); + + + + - // Chart configuration - const data = { - labels: labels, - datasets: [ - { - label: 'Dataset 1', - data: dataValues, - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(255, 159, 64, 0.2)', - 'rgba(255, 205, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(201, 203, 207, 0.2)' - ], - borderColor: [ - 'rgba(255, 99, 132, 1)', - 'rgba(255, 159, 64, 1)', - 'rgba(255, 205, 86, 1)', - 'rgba(75, 192, 192, 1)', - 'rgba(54, 162, 235, 1)', - 'rgba(153, 102, 255, 1)', - 'rgba(201, 203, 207, 1)' - ], - borderWidth: 1 - } - ] - }; + + - const ctx = document.getElementById('voteChart').getContext('2d'); - var pieChart = new Chart(ctx, { - type: 'pie', - data: data, - options: { - responsive: true, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Répartition des votes' - } - } - }, - }); + + + const data = { + labels : labels, + datasets : [ { + label : 'Votes', + data : dataValues, + backgroundColor : [ 'rgba(255, 99, 132, 0.2)', + 'rgba(255, 159, 64, 0.2)', + 'rgba(255, 205, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(201, 203, 207, 0.2)' ], + borderColor : [ 'rgba(255, 99, 132, 1)', + 'rgba(255, 159, 64, 1)', + 'rgba(255, 205, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(201, 203, 207, 1)' ], + borderWidth : 1 + } ] + }; + const ctx = document.getElementById('voteChart') + .getContext('2d'); + var pieChart = new Chart(ctx, { + type : 'pie', + data : data, + options : { + responsive : true, + plugins : { + legend : { + position : 'top', + }, + title : { + display : true, + text : 'Répartition des votes' + } + } + } + }); + }); + - diff --git a/ui/src/main/resources/templates/themes/v2/ecoscore.html b/ui/src/main/resources/templates/themes/v2/ecoscore.html index be9b16f2f..1b180df24 100644 --- a/ui/src/main/resources/templates/themes/v2/ecoscore.html +++ b/ui/src/main/resources/templates/themes/v2/ecoscore.html @@ -1,174 +1,187 @@ - - - - - - - L'Impact Score : Eco score des produits éléctroniques et éléctriques | Nudger - - - - - - - - - - - - - - - - + + + + + L'Impact Score : Eco score pour les produits éléctroniques et éléctriques | Nudger + + + + + + + + + + + + + + + - - -
- - - - - -
- -
- - -
-
-
-
-

L’Impact Score : évaluation de l'impact environnemental de vos produits

- -
- -
-
- -
+
+ + + + + +
+ +
+ +
+
+
+
+

+ L’Impact Score : évaluation de l'impact environnemental de vos produits +

+ +
+
+
-
- - - - -
-
-
-
-

Qu’est-ce que l’Impact Score ?

- - - -
-
- -
+
+
+ + + +
+
+
+
+

Qu’est-ce que l’Impact Score ?

+ + + +
+
+ Exemple d'impact écologique
-
- -
-
-
-
- -
-
-

Notre ecoscore : transparent, innovant et performant

- - - -
+
+
+ + +
+
+
+
+ Illustration d'un écoscore transparent et innovant +
+
+

+ Notre ecoscore : transparent, innovant et performant +

+ + +
-
- - -
-
-
-

Comment est calculé l'Impact Score ?

- +
+
+ + +
+
+
+
+

+ Comment est calculé l'Impact Score ? +

-
- - - - -
- -
-
Synthèse et déploiement
-
- - - - - - - - - - - - - - - - - -
NomCoef. proposéCoef. appliqué
- -
- Ce tableau permet de confronter les coefficients proposés par le système d'IA (Coef. proposé) à ceux actuellement utilisés par Nudger (Coef. appliqué). Les coefficients sont appliquées dans le - fichier de configuration des . -
- - - -
-
- -
+

+ Les règles de calcul de l'ecoscore sont expliquées sur chaque produit, au travers de l'explication détaillée de l'évaluation dans la section "bilan écologique". Surtout, chaque catégorie de produit dispose de ses propres critères et pondérations. Voici la liste des catégories que nous couvrons, vous trouverez le détail des critères et coefficients via les liens ci-dessous. - - - - - - - - +

+ +
+
+ +
+ , + +
+ +
+
+ +
- - - +
+ + + + + +
+
Critères et coefficients de l'ecoscore téléviseurs
+
+ + + + + + + + + + + + + + + + + + + +
Nom du critèreCoefficient (0-1)
+ Critère + + 0.0 +
Total + + + +
+
+
+ + + +
-
-
-
- +
+
+
- - + + - + - @@ -181,13 +194,8 @@

Comment est calculé l'Impact Score ?

- - - - - - \ No newline at end of file + diff --git a/ui/src/main/resources/templates/themes/v2/inc/footer.html b/ui/src/main/resources/templates/themes/v2/inc/footer.html index a9f0cc9df..83ac9a15f 100644 --- a/ui/src/main/resources/templates/themes/v2/inc/footer.html +++ b/ui/src/main/resources/templates/themes/v2/inc/footer.html @@ -1,66 +1,103 @@ - diff --git a/ui/src/main/resources/templates/themes/v2/inc/navbar/navbar-home.html b/ui/src/main/resources/templates/themes/v2/inc/navbar/navbar-home.html index 51f698e93..01cbb0fab 100644 --- a/ui/src/main/resources/templates/themes/v2/inc/navbar/navbar-home.html +++ b/ui/src/main/resources/templates/themes/v2/inc/navbar/navbar-home.html @@ -1,9 +1,9 @@ -
-
\ No newline at end of file + \ No newline at end of file