[UPD] front refactoring + css stuff

front/src/components/Header.vue

@@ -24,7 +24,7 @@ export default {
 <style>
 header {
   z-index: 3;
-  flex-basis: 60px;
+  height: 7vh;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
   background-color: #3c3c3c;
   color: #ffffff;

front/src/components/Results.vue

@@ -11,24 +11,8 @@
         </button>
         <button class="results-header-btn-export">Exporter</button>
       </div>
-      <div class="results-header-btn-displayed-view">
-        <input
-          type="button"
-          value="Comparatif"
-          id="btn-comparatif"
-          @click.prevent="change_displayed_view('comparatif')"
-          :class="{ active: displayed_view == 'comparatif' }"
-        />
-        <input
-          type="button"
-          value="Equivalents"
-          id="btn-equivalents"
-          @click.prevent="change_displayed_view('equivalents')"
-          :class="{ active: displayed_view == 'equivalents' }"
-        />
-      </div>
     </div>
-    <div class="results-content" v-if="displayed_view == 'comparatif'">
+    <div class="results-content">
       <div
         class="results-section"
         @click="display_results_detailled_view(section.name)"
@@ -47,17 +31,6 @@
         </div>
       </div>
     </div>
-    <div class="results-content" v-if="displayed_view == 'equivalents'">
-      <div
-        class="results-section"
-        @click="display_results_detailled_view(section.name)"
-        v-for="section in sections_equivalents"
-        :key="section.name"
-      >
-        <h3>{{ section.title }}</h3>
-        <p>Texte</p>
-      </div>
-    </div>
     <div class="results-detailled"></div>
   </div>
 </template>
@@ -75,22 +48,7 @@ export default {
     return {
       re_render_results: false,
       scenarios_json: [],
-      displayed_view: "comparatif",
       sections_comparatif,
-      sections_equivalents: [
-        {
-          name: "douches",
-          title: "Douches",
-        },
-        {
-          name: "chauffage",
-          title: "Chauffage",
-        },
-        {
-          name: "trajets_voiture",
-          title: "Trajets en voiture",
-        },
-      ],
       chartOptions: {
         maintainAspectRatio: false,
         legend: {
@@ -129,9 +87,6 @@ export default {
       this.$root.$emit("display_results_detailled_view", choice);
       this.$root.$emit("re_render_results_detailled");
     },
-    change_displayed_view(choice) {
-      this.displayed_view = choice;
-    },
   },
   computed: {
     chartData: function () {
@@ -217,12 +172,6 @@ export default {
   float: left;
 }
 
-#btn-equivalents {
-  border-radius: 0 6px 6px 0;
-}
-#btn-comparatif {
-  border-radius: 6px 0 0 6px;
-}
 /*
  * RESULTS
  */

front/src/components/Scenario.vue

@@ -63,7 +63,7 @@
           <div class="scenario-section-body">
             <div class="scenario-line">
               <span class="scenario-line-caption">
-                <p>Logiciel utilisé</p>
+                <p>Logiciel de visioconférence</p>
                 <select v-model="scenario.software.name" class="align-right">
                   <option value="">Aucun</option>
                   <option

front/src/options/detailled_results_text.js

 export const detailled_results_text = {
-  sante_humaine: `L’impact sur la santé humaine est mesuré en DALY
+  HUMAN_HEALTH: `L’impact sur la santé humaine est mesuré en DALY
      (Disability Adjusted Life Years). 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,

front/src/options/options.js

@@ -58,19 +58,19 @@ export const journey_options = [
 
 export const sections_comparatif = [
   {
-    name: "sante_humaine",
-    title: "Santé Humaine",
+    name: "HUMAN_HEALTH",
+    title: "Impact sur la santé humaine",
   },
   {
-    name: "qualite_ecosysteme",
-    title: "Qualité des Écosystèmes",
+    name: "ECOSYSTEM_QUALITY",
+    title: "Impact sur la qualité des écosystèmes",
   },
   {
-    name: "changement_climatique",
-    title: "Changement Climatique",
+    name: "CLIMATE_CHANGE",
+    title: "Impact sur le changement climatique",
   },
   {
-    name: "ressources",
-    title: "Ressources",
+    name: "RESOURCES",
+    title: "Impact sur les ressources",
   },
 ];

front/src/store/MainStore.js

@@ -14,8 +14,9 @@ let hoverBackgroundColor = [
 
 const state = {
   scenarios_json: [],
+  equivalents: {},
   impact_on_spheres: {
-    sante_humaine: {
+    HUMAN_HEALTH: {
       labels,
       datasets: [
         {
@@ -24,7 +25,7 @@ const state = {
         },
       ],
     },
-    qualite_ecosysteme: {
+    ECOSYSTEM_QUALITY: {
       labels,
       datasets: [
         {
@@ -33,7 +34,7 @@ const state = {
         },
       ],
     },
-    changement_climatique: {
+    CLIMATE_CHANGE: {
       labels,
       datasets: [
         {
@@ -42,7 +43,7 @@ const state = {
         },
       ],
     },
-    ressources: {
+    RESOURCES: {
       labels,
       datasets: [
         {
@@ -53,7 +54,7 @@ const state = {
     },
   },
   impact_on_spheres_detailled: {
-    sante_humaine: {
+    HUMAN_HEALTH: {
       labels: labels_detailled,
       datasets: [
         {
@@ -76,7 +77,7 @@ const state = {
         },
       ],
     },
-    qualite_ecosysteme: {
+    ECOSYSTEM_QUALITY: {
       labels: labels_detailled,
       datasets: [
         {
@@ -99,7 +100,7 @@ const state = {
         },
       ],
     },
-    changement_climatique: {
+    CLIMATE_CHANGE: {
       labels: labels_detailled,
       datasets: [
         {
@@ -122,7 +123,7 @@ const state = {
         },
       ],
     },
-    ressources: {
+    RESOURCES: {
       labels: labels_detailled,
       datasets: [
         {
@@ -217,16 +218,16 @@ let store = new Vuex.Store({
         let sphere;
         switch (sphereName) {
           case "HUMAN_HEALTH":
-            sphere = "sante_humaine";
+            sphere = "HUMAN_HEALTH";
             break;
           case "ECOSYSTEM_QUALITY":
-            sphere = "qualite_ecosysteme";
+            sphere = "ECOSYSTEM_QUALITY";
             break;
           case "CLIMATE_CHANGE":
-            sphere = "changement_climatique";
+            sphere = "CLIMATE_CHANGE";
             break;
           case "RESOURCES":
-            sphere = "ressources";
+            sphere = "RESOURCES";
             break;
           default:
             throw Error(