Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	front/src/components/Results.vue
#	front/src/components/ResultsDetailedView.vue
#	front/src/store/MainStore.js

front/src/components/IncrementButton.vue

@@ -12,6 +12,7 @@
       -
     </button>
     <input
+    @focus="$event.target.select()"
       type="text"
       name="increment-button-value"
       v-bind:value="value"
@@ -83,15 +84,20 @@ export default {
       this.interval = false;
     },
     input: function (event) {
-      if (parseInt(event.target.value) > this.min) {
-        this.$emit("input", parseInt(event.target.value));
+      var value = parseInt(event.target.value);
+      if (value > this.min) {
+        this.newValue = value
+        this.$emit("input", value);
       } else {
+        this.newValue = this.min
         this.$emit("input", this.min);
         event.target.value = this.min;
       }
       if (parseInt(event.target.value) < this.max) {
-        this.$emit("input", parseInt(event.target.value));
+        this.newValue = value
+        this.$emit("input", value);
       } else {
+        this.newValue = this.max
         this.$emit("input", this.max);
         event.target.value = this.max;
       }

front/src/components/Results.vue

@@ -87,116 +87,10 @@ export default {
         this.$root.$emit("re_render_results_detailed");
       });
     },
-    exportResults() {
-      let pdfName = "impactometre-results";
-      var doc = new jsPDF();
-      doc.setFont("Helvetica", "Bold");
-      var line = 20;
-      var left_space = 20;
-
-      doc.text("Impactomètre - Comparatif", left_space, line);
-
-      //TODO: fix this workaround by setting a "name" variable inside Scenario component
-      var headers = document.querySelectorAll(".scenario-header h2");
-
-      store.state.scenarios_json.forEach((scenario, index) => {
-        if (scenario.meetingDuration > 1) {
-          line = 34;
-          doc.setFontSize(12);
-          doc.setFont("Helvetica", "Bold");
-          doc.text(headers[index].textContent, left_space, line);
-
-          doc.setFont("Helvetica", "");
-          doc.setFontSize(7);
-          line += 6;
-          doc.text(
-            "Nombre de participants : " + String(scenario.numberOfParticipants),
-            left_space,
-            line
-          );
-
-          line += 4;
-          doc.text(
-            "Durée de la réunion (min) : " + String(scenario.meetingDuration),
-            left_space,
-            line
-          );
-
-          line += 6;
-          doc.text("Logiciel : " + scenario.software.name, left_space, line);
-          line += 6;
-          doc.setFont("Helvetica", "Bold");
-          doc.text("Matériel", left_space, line);
-          doc.setFont("Helvetica", "");
-          scenario.hardware.forEach((hardware) => {
-            if (hardware.qty != 0) {
-              line += 4;
-              doc.text(
-                " - " + String(hardware.qty) + " " + hardware.french,
-                left_space,
-                line
-              );
-            }
-          });
-
-          line += 6;
-          doc.setFont("Helvetica", "Bold");
-          doc.text("Trajets", left_space, line);
-          doc.setFont("Helvetica", "");
-          scenario.journey.forEach((journey) => {
-            line += 4;
-            var journey_fr = journey_options.find(
-              (option) => option.name === journey.mean
-            );
-            if (journey_fr) {
-              doc.text(
-                "- " +
-                  String(journey.distance) +
-                  " km parcourus en " +
-                  journey_fr.french,
-                left_space,
-                line
-              );
-            }
-          });
-
-          left_space = left_space + 65;
-        }
-      });
-      // Canvas
-      line = line + 40;
-      doc.setFontSize(12);
-      doc.setFont("Helvetica", "Bold");
-      doc.text("Résultats", 20, line);
-      line = line + 10;
-
-      var all_canvas = document.querySelectorAll(
-        ".results-chart canvas#horizontalbar-chart"
-      );
-
-      all_canvas.forEach((canvas, index) => {
-        doc.setFontSize(10);
-        doc.setFont("Helvetica", "Bold");
-        doc.text(sections_comparatif[index].title, 20, line);
-        line = line + 4;
-
-        var canvasImg = canvas.toDataURL("image/png");
-        doc.addImage(canvasImg, "PNG", 15, line, 54, 18);
-
-        doc.setFont("Helvetica", "");
-        doc.setFontSize(7);
-        var sectionText = detailed_results_text[sections_comparatif[index].name];
-        // var splitText = doc.splitTextToSize(sectionText,100);
-        doc.text(sectionText, 84, line + 4);
-
-        line = line + 40;
-      });
-
-      doc.save(pdfName + ".pdf");
-    },
-    display_results_detailed_view(choice) {
-      this.$root.$emit("display_results_detailed_view", choice);
-      this.$root.$emit("re_render_results_detailed");
+    exportResults,
+    display_results_detailled_view(choice) {
+      this.$root.$emit("display_results_detailled_view", choice);
+      this.$root.$emit("re_render_results_detailled");
     },
   },
   computed: {

front/src/components/ResultsDetailedView.vue

@@ -30,6 +30,7 @@
 <script>
 import ResultsChart from "./ResultsChart.js";
 import store from "../store/MainStore.js";
+import { sections_comparatif } from "../options/options.js";
 import { detailed_results_text } from "../options/detailed_results_text";
 
 //register custom tooltip positioner for chart
@@ -89,12 +90,8 @@ export default {
       return (sphere) => store.state.impact_on_spheres_detailed[sphere];
     },
     title: function () {
-      //TODO: clean this function (code redundancy)
-      switch(this.selectedView) {
-        case "HUMAN_HEALTH": return "Impact sur la santé humaine"
-        case "ECOSYSTEM_QUALITY": return "Impact sur la qualité des écosystèmes"
-        case "CLIMATE_CHANGE": return "Impact sur le changement climatique"
-        case "RESOURCES": return "Impact sur les ressources"
+      if (this.selectedView) {
+        return sections_comparatif.find(el => el.name == this.selectedView).title;
       }
     },
     detailed_results_text: function () {
@@ -153,8 +150,10 @@ export default {
 
 .results-detailed-view-content p {
   line-height: 25px;
+    text-align: justify;
 }
 
+
 /*
  * CHARTS
  */

front/src/components/SinglePage.vue

@@ -9,36 +9,33 @@
           <h2>A propos</h2>
           <br />
           <p>
-            <b>L’Impactomètre</b> est un outil ayant été produit dans le cadre
-            d’un projet de l’UTC encadré par Yacine Baouch. Il est le fruit d’un
-            travail réalisé par plusieurs groupes d’étudiants que sont Jules
-            Farjas, William Boffy, Aurélien Béranger, Clément Brizard, Valentin
-            Le Gauche, Maria Idrissi, Elouan Le Bars, Matthieu Glorion et Edmond
-            Giraud.
+            <b>Impactometre.fr</b> permet de comparer différents scénarios de
+             réunions selon des critères environnementaux. Son objectif est de
+             vous aider à faire des choix : est-il préférable d’organiser une
+             visio-conférence ou de faire déplacer tous les participants ? etc.
           </p>
           <p>
-            Cet outil a pour vocation d’évaluer l’impact environnemental d’une
-            réunion afin que l’utilisateur puisse l’optimiser au mieux, dans une
-            démarche écologique. L’évaluation de cet impact est réalisée selon
-            une méthode fortement inspirée de la méthode ACV (Analyse Cycle de
-            Vie d’un produit). L’impact environnemental d’une réunion est en
-            effet calculé comme la somme des impacts environnementaux des
-            matériels utilisés, des transports réalisés et du logiciel de
-            visioconférence.
+            Impactometre.fr prend en compte les impacts environnementaux du
+            matériel utilisé (ordinateurs, vidéoprojecteur…), des transports
+            réalisés par les participants à la réunion mais aussi ceux de la
+            visioconférence (transfert de données, logiciel…). L’utilisateur
+            renseigne donc différentes informations pour décrire
+            les scénarios de réunions envisagés.
           </p>
           <p>
-            L’utilisateur doit renseigner ces différents critères pour que
-            l’application puisse évaluer l’impact environnemental de la réunion,
-            selon quatre catégories : l’impact sur la santé humaine, sur la
-            qualité de l’écosystème, sur le changement climatique et sur les
-            ressources. Le résultat est calculé dans une unité adaptée pour
-            chacune de ces catégories et affiché en pourcentages. Il est
-            normalisé sur le scénario ayant le plus d’impact, celui-ci étant à
-            100%.
+            Les résultats sont affichés selon quatre catégories environnementales
+            : l’impact sur la santé humaine, la qualité de l’écosystème,
+            le changement climatique et les ressources. Pour chaque catégorie,
+            le résultat est normalisé par le scénario ayant le plus d’impact,
+            c’est-à-dire qu’il sera affiché à 100%. Un équivalent est aussi
+            donné en kilomètres parcourus en voiture thermique.
           </p>
           <p>
-            Vous pouvez retrouver l'article sur lequel se basent les calculs
-            réalisés dans le code
+            La méthode utilisée par Impactometre.fr est fortement inspirée
+            d’une Analyse de Cycle de Vie. Les données utilisées proviennent
+            de la base de données EcoInvent et l’évaluation est réalisée
+            selon Impact2002+. Vous pouvez retrouver l'article qui décrit
+            la construction de la méthode d’évaluation
             <a
               target="_blank"
               rel="noopener noreferrer"
@@ -46,6 +43,17 @@
               >à cette adresse.</a
             >
           </p>
+          <p>
+            <b>Impactometre.fr</b> est un outil développé dans le cadre
+            d’un projet de l’Université de technologie de Compiègne.
+            Il est le fruit d’un travail réalisé par Aurélien Béranger,
+            William Boffy, Clément Brizard, Jules Farjas, Edmond Giraud,
+            Matthieu Glorion, Maria Idrissi, Elouan Le Bars et Valentin
+            Le Gauche et encadré par Yacine Baouch, enseignant à l’UTC.
+          </p>
+          <p>
+            Impactometre.fr est hébergé par l’association Picasoft.
+          </p>
           <p id="licence">
             Licence libre GNU GPL V3 -
             <a href="https://gitlab.utc.fr/tx-techno-num/impactometre"
@@ -58,19 +66,11 @@
           <h2>Utilisation</h2>
           <br />
           <div class="video">
-            <iframe
-              src="https://player.vimeo.com/video/436047872"
-              style="
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-              "
-              frameborder="0"
-              allow="autoplay; fullscreen"
-              allowfullscreen
-            ></iframe>
+            <video controls width="80%" >
+              <source src="../../public/videos/impactometre-utilisation-720.mp4"
+                      type="video/mp4">
+                Sorry, your browser doesn't support embedded videos.
+              </video>
           </div>
         </div>
       </div>
@@ -130,11 +130,8 @@ export default {
   color: gray;
   text-align: right;
 }
-/*
- * HOWTO
- */
-.video {
-  padding: 30% 0 0 0;
-  position: relative;
+.video video{
+  margin-left: 10%;
+  margin-right: 10%;
 }
 </style>

front/src/functions/export_results.js

+import jsPDF from "jspdf";
+import store from "../store/MainStore.js";
+import { sections_comparatif, journey_options } from "../options/options.js";
+import { detailled_results_text } from "../options/detailled_results_text.js";
+
+export function exportResults() {
+  let pdfName = "impactometre-resultats";
+  var doc = new jsPDF();
+  doc.setFont("Helvetica", "Bold");
+  var line = 18;
+  var left_space = 20;
+
+  doc.text("Impactometre.fr", left_space, line);
+
+  //TODO: fix this workaround by setting a "name" variable inside Scenario component
+  var headers = document.querySelectorAll(".scenario-header h2");
+
+  store.state.scenarios_json.forEach((scenario, index) => {
+    if (scenario.meetingDuration > 1) {
+      line = 26;
+      doc.setFontSize(12);
+      doc.setFont("Helvetica", "Bold");
+      doc.text(headers[index].textContent, left_space, line);
+
+      doc.setFont("Helvetica", "");
+      doc.setFontSize(7);
+      line += 6;
+      doc.text(
+        "Nombre de participants : " + String(scenario.numberOfParticipants),
+        left_space,
+        line
+      );
+
+      line += 4;
+      doc.text(
+        "Durée de la réunion (min) : " + String(scenario.meetingDuration),
+        left_space,
+        line
+      );
+
+      line += 6;
+      doc.text("Logiciel : " + scenario.software.name, left_space, line);
+      line += 6;
+      doc.setFont("Helvetica", "Bold");
+      doc.text("Matériel", left_space, line);
+      doc.setFont("Helvetica", "");
+      scenario.hardware.forEach((hardware) => {
+        if (hardware.qty != 0) {
+          line += 4;
+          doc.text(
+            " - " + String(hardware.qty) + " " + hardware.french,
+            left_space,
+            line
+          );
+        }
+      });
+
+      line += 6;
+      doc.setFont("Helvetica", "Bold");
+      doc.text("Trajets", left_space, line);
+      doc.setFont("Helvetica", "");
+      scenario.journey.forEach((journey) => {
+        line += 4;
+        var journey_fr = journey_options.find(
+          (option) => option.name === journey.mean
+        );
+        if (journey_fr) {
+          doc.text(
+            "- " +
+              String(journey.distance) +
+              " km parcourus en " +
+              journey_fr.french,
+            left_space,
+            line
+          );
+        }
+      });
+
+      left_space = left_space + 65;
+    }
+  });
+  // Canvas
+  line = line + 34;
+  doc.setFontSize(12);
+  doc.setFont("Helvetica", "Bold");
+  doc.text("Comparaison des scénarios de réunion", 20, line);
+  line = line + 10;
+
+  var all_canvas = document.querySelectorAll(
+    ".results-chart canvas#horizontalbar-chart"
+  );
+
+  all_canvas.forEach((canvas, index) => {
+    doc.setFontSize(10);
+    doc.setFont("Helvetica", "Bold");
+    doc.text(sections_comparatif[index].title, 20, line);
+    line = line + 4;
+
+    var canvasImg = canvas.toDataURL("image/png", 1);
+    console.log(canvas.width);
+    doc.addImage(canvasImg, "PNG", 15, line, 70, canvas.height*70/canvas.width);
+
+    doc.setFont("Helvetica", "");
+    doc.setFontSize(8);
+    var sectionText = detailled_results_text[sections_comparatif[index].name];
+    // var splitText = doc.splitTextToSize(sectionText,100);
+    doc.text(sectionText, 100, line + 4);
+
+    line = line + 32;
+  });
+
+  doc.setFontSize(12);
+  doc.setFont("Helvetica", "Bold");
+  line = line + 6;
+  doc.text("A propos d'Impactometre.fr", 20, line);
+  line = line + 8;
+  doc.setFont("Helvetica", "");
+  doc.setFontSize(8);
+  var about = `Ces comparaisons sont des estimations des impacts environnementaux potentiels. Elles ne constituent pas des mesures réelles.
+Les données utilisées proviennent de la base de données EcoInvent et l'évaluation environnementale est réalisée selon Impact2002+.
+Vous pouvez retrouver plus d'informations sur la construction de la méthode dans la rubrique « A propos » de Impactometre.fr.
+
+Impactometre.fr a été développé dans le cadre d'un projet de l'Université de technologie de Compiègne et est hébergé par l'association
+Picasoft.
+
+Licence libre GNU GPL V3.`;
+  doc.text(about, 20, line);
+
+  doc.save(pdfName + ".pdf");
+}

front/src/options/detailed_results_text.js

 export const detailed_results_text = {
   HUMAN_HEALTH:
-`L'impact sur la santé humaine est mesuré en DALY (Disability Adjusted Life Years)
-et exprimé en pourcentage par rapport au scénario ayant le plus d'impact.
-Cette méthode d'évaluation consiste à déterminer l'impact en année de vies de la
-réunion sur une vie humaine.
-
-Elle prend en compte la toxicité de la réunion sur la santé humaine, les effets respiratoires,
-les rayonnements ionisants et la diminution de la couche.`
+`L'impact sur la santé humaine est une catégorie de dommage
+environnemental quis'exprime en DALY, Disability Adjusted
+Life Years (années de vie corrigées du facteur d'incapacité).
+Elle prend en compte les indicateurs environnementaux de
+la toxicité humaine, des effets respiratoires, des
+rayonnements ionisants et la diminution de la couche d'ozone. `
   ,
   ECOSYSTEM_QUALITY:
-`L'impact sur la qualité de l'écosystème est mesuré en PDF*m^2*année et exprimé
-en pourcentage par rapport au scénario ayant le plus d'impact. Le PDF (Potentially
-Disappeared Fraction of species) correspond à la fraction des espèces qui a une
-forte probabilité de ne pas se trouver dans une région en raison des impacts
-néfastes de la réunion.
-
-Cet impact est mesuré en prenant en compte la diminution de la couche d'ozone,
-l'oxydation photochimique, l'écotoxicité aquatique et terrestre, l'acidification
-et l'eutrophisation des eaux et des terres ainsi que l'occupation des terres.`
+`L'impact sur la qualité de l'écosystème est une catégorie de dommage
+environnemental qui s'exprime en PDF*m2*année. Le Potentially
+Disappeared Fraction of species (PDF) correspond à la fraction des
+espèces qui a une forte probabilité de ne pas se trouver dans une
+région. Cette catégorie prend en compte la diminution de la couche
+d'ozone, l'oxydation photochimique, l'écotoxicité aquatique et
+terrestre, l'acidification et l'eutrophisation des eaux et des terres,
+ainsi que l'occupation des terres.`
   ,
   CLIMATE_CHANGE:
-`L'impact sur la changement climatique est mesuré en Kg eqCO2 et exprimé en
-pourcentage par rapport au scénario ayant le plus d'impact. L'équivalent C02 étant,
-pour un gaz à effet de serre, la quantité de dioxyde de carbone qui aurait la même
-capacité à retenir le rayonnement solaire.`
+`L'impact sur le changement climatique s'exprime en kilogramme
+équivalent CO2 (KgeqCO2). Cette catégorie prend en compte les
+émissions des gaz à effet de serre.`
   ,
   RESOURCES:
-`L'impact sur les ressources considère l'utilisation d'énergies non renouvelables et
-l'extraction de minéraux. Il est mesuré en MJ primaire et exprimé en pourcentage par
-rapport au scénario ayant le plus d'impact. Cette quantité d'énergie primaire correspond à
-la quantité d'énergoe contenue dans les ressources naturelles avant transformation.`
+`L'impact sur les ressources est une catégorie de dommage
+environnemental qui s'exprime en MJ primaire. Cela regroupe
+à la fois l'utilisation d'énergies non renouvelables et
+l'extraction de minéraux.`
   ,
 };

front/src/store/MainStore.js

@@ -7,127 +7,72 @@ let labels = ["A", "B", "C"];
 let labels_detailed = ["Scenario A", "Scenario B", "Scenario C"];
 let backgroundColor = ["#e97272", "#e7dc73", "#83bdec"];
 
+var datasets = function () {
+  return [
+    {
+      backgroundColor,
+      data: [0, 0, 0],
+    },
+  ];
+};
+
+var datasets_detailled = function () {
+  return [
+    {
+      label: "Matériel",
+      data: [0, 0, 0],
+      backgroundColor,
+    },
+    {
+      label: "Réseau",
+      data: [0, 0, 0],
+      backgroundColor,
+    },
+    {
+      label: "Trajets",
+      data: [0, 0, 0],
+      backgroundColor,
+    },
+  ];
+};
+
 const state = {
   scenarios_json: [],
   equivalents: {},
   impact_on_spheres: {
     HUMAN_HEALTH: {
       labels,
-      datasets: [
-        {
-          backgroundColor,
-          data: [0, 0, 0],
-        },
-      ],
+      datasets: datasets(),
     },
     ECOSYSTEM_QUALITY: {
       labels,
-      datasets: [
-        {
-          backgroundColor,
-          data: [0, 0, 0],
-        },
-      ],
+      datasets: datasets(),
     },
     CLIMATE_CHANGE: {
       labels,
-      datasets: [
-        {
-          backgroundColor,
-          data: [0, 0, 0],
-        },
-      ],
+      datasets: datasets(),
     },
     RESOURCES: {
       labels,
-      datasets: [
-        {
-          backgroundColor,
-          data: [0, 0, 0],
-        },
-      ],
+      datasets: datasets(),
     },
   },
   impact_on_spheres_detailed: {
     HUMAN_HEALTH: {
-      labels: labels_detailed,
-      datasets: [
-        {
-          label: "Matériel",
-          data: [0, 0, 0],
-          backgroundColor,
-        },
-        {
-          label: "Réseau",
-          data: [0, 0, 0],
-          backgroundColor,
-        },
-        {
-          label: "Trajets",
-          data: [0, 0, 0],
-          backgroundColor,
-        },
-      ],
+      labels: labels_detailled,
+      datasets: datasets_detailled(),
     },
     ECOSYSTEM_QUALITY: {
-      labels: labels_detailed,
-      datasets: [
-        {
-          label: "Matériel",
-          data: [0, 0, 0],
-          backgroundColor,
-        },
-        {
-          label: "Réseau",
-          data: [0, 0, 0],
-          backgroundColor,
-        },
-        {
-          label: "Trajets",
-          data: [0, 0, 0],
-          backgroundColor,
-        },