Results.vue 7.37 KB
Newer Older
Elouan Le Bars's avatar
Elouan Le Bars committed
1
2
<template>
  <div class="results">
3
4
5
6
7
8
9
    <div class="results-header">
      Résultats
      <div class="results-header-btn-actions">
        <button
          class="results-header-btn-reload"
          @click.prevent="updateResults"
        >
10
          Calculer
11
        </button>
Elouan Le Bars's avatar
Elouan Le Bars committed
12
13
14
15
16
17
        <button
          class="results-header-btn-export"
          @click.prevent="exportResults"
        >
          Exporter
        </button>
Elouan Le Bars's avatar
Elouan Le Bars committed
18
      </div>
19
    </div>
20
    <div class="results-content">
21
22
      <div
        class="results-section"
Elouan Le Bars's avatar
Elouan Le Bars committed
23
24
25
        @click="display_results_detailled_view(section.name)"
        v-for="section in sections_comparatif"
        :key="section.name"
26
      >
Elouan Le Bars's avatar
Elouan Le Bars committed
27
28
29
        <h3>{{ section.title }}</h3>
        <div class="results-chart">
          <ResultsChart
30
31
            :key="re_render_results"
            :chart-data="chartData(section.name)"
Elouan Le Bars's avatar
Elouan Le Bars committed
32
            :options="chartOptions"
Elouan Le Bars's avatar
Elouan Le Bars committed
33
34
            :width="50"
            :height="90"
Elouan Le Bars's avatar
Elouan Le Bars committed
35
36
          ></ResultsChart>
        </div>
37
38
39
      </div>
    </div>
    <div class="results-detailled"></div>
Elouan Le Bars's avatar
Elouan Le Bars committed
40
41
42
43
  </div>
</template>

<script>
Elouan Le Bars's avatar
Elouan Le Bars committed
44
45
import jsPDF from "jspdf";

Elouan Le Bars's avatar
Elouan Le Bars committed
46
import ResultsChart from "./ResultsChart.js";
47
import store from "../store/MainStore.js";
Elouan Le Bars's avatar
Elouan Le Bars committed
48
import { sections_comparatif, journey_options } from "../options/options.js";
Elouan Le Bars's avatar
Elouan Le Bars committed
49

Elouan Le Bars's avatar
Elouan Le Bars committed
50
export default {
Elouan Le Bars's avatar
Elouan Le Bars committed
51
  components: { ResultsChart },
52
  store: store,
53
54
  data() {
    return {
55
      re_render_results: false,
56
      scenarios_json: [],
Elouan Le Bars's avatar
Elouan Le Bars committed
57
      sections_comparatif,
Elouan Le Bars's avatar
Elouan Le Bars committed
58
      chartOptions: {
Elouan Le Bars's avatar
Elouan Le Bars committed
59
        maintainAspectRatio: false,
Elouan Le Bars's avatar
Elouan Le Bars committed
60
61
62
63
64
65
66
67
68
        legend: {
          display: false,
        },
        tooltips: {
          enabled: false,
        },
        hover: {
          mode: false,
        },
Matt Glorion's avatar
Matt Glorion committed
69
        scales: {
70
71
72
73
74
75
76
77
78
          xAxes: [
            {
              ticks: {
                max: 100,
                min: 0,
              },
            },
          ],
        },
Elouan Le Bars's avatar
Elouan Le Bars committed
79
      },
80
    };
81
  },
82
  methods: {
83
    updateResults() {
84
      const new_scenarios = [];
85
      this.$root.$emit("retrieveScenarios", new_scenarios);
86
      store.commit("updateScenarios", new_scenarios);
87
      store.dispatch("callAPI").then(() => {
88
89
        this.re_render_results = !this.re_render_results;
        this.$root.$emit("re_render_results_detailled");
90
      });
Elouan Le Bars's avatar
Elouan Le Bars committed
91
    },
Elouan Le Bars's avatar
Elouan Le Bars committed
92
93
94
    exportResults() {
      let pdfName = "impactometre-results";
      var doc = new jsPDF();
Elouan Le Bars's avatar
Elouan Le Bars committed
95
      doc.setFont("Helvetica", "Bold");
Elouan Le Bars's avatar
Elouan Le Bars committed
96
97
      var line = 20;
      var left_space = 20;
Elouan Le Bars's avatar
Elouan Le Bars committed
98

Elouan Le Bars's avatar
Elouan Le Bars committed
99
100
101
102
      doc.text("Impactomètre - Comparatif", left_space, line);

      store.state.scenarios_json.forEach((scenario) => {
        if (scenario.meetingDuration > 1) {
Elouan Le Bars's avatar
Elouan Le Bars committed
103
          line = 34;
Elouan Le Bars's avatar
Elouan Le Bars committed
104
          doc.setFontSize(12);
Elouan Le Bars's avatar
Elouan Le Bars committed
105
          doc.setFont("Helvetica", "Bold");
Elouan Le Bars's avatar
Elouan Le Bars committed
106
107
          doc.text("Scenario", left_space, line);

Elouan Le Bars's avatar
Elouan Le Bars committed
108
109
          doc.setFont("Helvetica", "");
          doc.setFontSize(7);
Elouan Le Bars's avatar
Elouan Le Bars committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
          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.text("Matériel", left_space, line);
          scenario.hardware.forEach((hardware) => {
            if (hardware.qty != 0) {
              line += 4;
              doc.text(
                " - " + String(hardware.qty) + " " + hardware.french,
                left_space,
                line
              );
            }
          });

          line += 6;
          doc.text("Trajets", left_space, line);
          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
              );
            }
          });

Elouan Le Bars's avatar
Elouan Le Bars committed
158
          left_space = left_space + 65;
Elouan Le Bars's avatar
Elouan Le Bars committed
159
160
        }
      });
Elouan Le Bars's avatar
Elouan Le Bars committed
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
      // 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) => {
        doc.setFontSize(10);
        doc.setFont("Helvetica", "Bold");
        doc.text("Résultats", 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 splitText = doc.splitTextToSize(
          "L'impact sur le changement climatique est mesuré en Kg eqCO2 et exprimé en pourcentage par rapport au scénario ayant le plus d’impact. L'équivalent CO₂ étant, pour un gaz à effet de serre, la quantité de dioxyde de carbone qui aurait la même capacité à retenir le rayonnement solaire.",
          90
        );
        doc.text(splitText, 84, line + 4);

        line = line + 40;
      });

Elouan Le Bars's avatar
Elouan Le Bars committed
191
192
      doc.save(pdfName + ".pdf");
    },
Elouan Le Bars's avatar
Elouan Le Bars committed
193
194
    display_results_detailled_view(choice) {
      this.$root.$emit("display_results_detailled_view", choice);
195
      this.$root.$emit("re_render_results_detailled");
196
197
    },
  },
198
199
  computed: {
    chartData: function () {
200
      return (sphere) => store.state.impact_on_spheres[sphere];
201
202
203
    },
  },
  mounted() {
204
    this.updateResults();
205
206
207
    this.$root.$on("renderResults", () => {
      this.re_render_results = !this.re_render_results;
    });
208
  },
209
};
Elouan Le Bars's avatar
Elouan Le Bars committed
210
211
212
</script>

<style>
Elouan Le Bars's avatar
Elouan Le Bars committed
213
.results {
214
  background-color: #f1f1f1;
Elouan Le Bars's avatar
Elouan Le Bars committed
215
216
  flex-basis: 25%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
Elouan Le Bars's avatar
Elouan Le Bars committed
217
218
219
220
221
222
}

/*
 * HEADER
 */

Elouan Le Bars's avatar
Elouan Le Bars committed
223
224
225
226
.results-header {
  font-weight: bold;
  font-size: 30px;
  line-height: 35px;
227
  color: #3b3b3b;
228
  padding-top: 20px;
Elouan Le Bars's avatar
Elouan Le Bars committed
229
230
  padding-left: 40px;
}
231
.results-header-btn-actions button {
Elouan Le Bars's avatar
Elouan Le Bars committed
232
233
234
  border: none;
  color: black;
  border-radius: 6px;
Elouan Le Bars's avatar
Elouan Le Bars committed
235
236
237
238
  padding: 2px 8px;
  margin-left: 5px;
  position: relative;
  top: -5px;
Elouan Le Bars's avatar
Elouan Le Bars committed
239
240
241
242
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
243
244
245
246
247
248
249
250
.results-header button:hover {
  cursor: pointer;
}

.results-header-btn-export {
  background: rgba(58, 104, 224, 0.5);
}
.results-header-btn-export:hover {
Elouan Le Bars's avatar
Elouan Le Bars committed
251
252
  background: rgba(0, 71, 255, 0.58);
}
Elouan Le Bars's avatar
Elouan Le Bars committed
253
254
255
256
257
258
259
.results-header-btn-reload {
  background: rgba(85, 235, 52, 0.5);
}
.results-header-btn-reload:hover {
  background: rgba(85, 235, 52, 0.8);
}

Elouan Le Bars's avatar
Elouan Le Bars committed
260
.results-header-btn-displayed-view {
Elouan Le Bars's avatar
Elouan Le Bars committed
261
  margin-bottom: 10px;
Elouan Le Bars's avatar
Elouan Le Bars committed
262
263
264
  margin-left: 4px;
}

265
266
.results-header-btn-displayed-view input {
  background-color: #3b3b3b;
Elouan Le Bars's avatar
Elouan Le Bars committed
267
  max-width: 50%;
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
  border: none;
  color: white;
  padding: 5px 15px;
  float: left;
  cursor: pointer;
}

.results-header-btn-displayed-view .active {
  background-color: rgba(59, 59, 59, 0.5);
  color: white;
  font-weight: bold;
  padding: 5px 15px;
  float: left;
}

Elouan Le Bars's avatar
Elouan Le Bars committed
283
284
285
286
/*
 * RESULTS
 */
.results-content {
287
  padding-top: 40px;
Elouan Le Bars's avatar
Elouan Le Bars committed
288
289
290
}
.results-section {
  border-top-style: solid;
291
  border-color: #bcbcbc;
Elouan Le Bars's avatar
Elouan Le Bars committed
292
293
294
295
296
297
298
299
300
301
302
  border-width: 3px;
  padding-top: 10px;
  padding-left: 40px;
}

.results-section:hover {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.results-section h3 {
303
  color: #3b3b3b;
Elouan Le Bars's avatar
Elouan Le Bars committed
304
}
Elouan Le Bars's avatar
Elouan Le Bars committed
305
306
307
308
309
310
311
312
313

/*
 * CHARTS
 */

.results-chart {
  height: 25%;
  padding-right: 25px;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
314
</style>