Results.vue 7.59 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
import { detailled_results_text } from "../options/detailled_results_text.js";
Elouan Le Bars's avatar
Elouan Le Bars committed
50

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

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

Elouan Le Bars's avatar
Elouan Le Bars committed
102
103
104
105
      //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) => {
Elouan Le Bars's avatar
Elouan Le Bars committed
106
        if (scenario.meetingDuration > 1) {
Elouan Le Bars's avatar
Elouan Le Bars committed
107
          line = 34;
Elouan Le Bars's avatar
Elouan Le Bars committed
108
          doc.setFontSize(12);
Elouan Le Bars's avatar
Elouan Le Bars committed
109
          doc.setFont("Helvetica", "Bold");
Elouan Le Bars's avatar
Elouan Le Bars committed
110
          doc.text(headers[index].textContent, left_space, line);
Elouan Le Bars's avatar
Elouan Le Bars committed
111

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

          line += 6;
Elouan Le Bars's avatar
Elouan Le Bars committed
146
          doc.setFont("Helvetica", "Bold");
Elouan Le Bars's avatar
Elouan Le Bars committed
147
          doc.text("Trajets", left_space, line);
Elouan Le Bars's avatar
Elouan Le Bars committed
148
          doc.setFont("Helvetica", "");
Elouan Le Bars's avatar
Elouan Le Bars committed
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
          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
166
          left_space = left_space + 65;
Elouan Le Bars's avatar
Elouan Le Bars committed
167
168
        }
      });
Elouan Le Bars's avatar
Elouan Le Bars committed
169
170
171
172
173
174
175
176
177
178
      // 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"
      );
Elouan Le Bars's avatar
Elouan Le Bars committed
179
180

      all_canvas.forEach((canvas, index) => {
Elouan Le Bars's avatar
Elouan Le Bars committed
181
182
        doc.setFontSize(10);
        doc.setFont("Helvetica", "Bold");
Elouan Le Bars's avatar
Elouan Le Bars committed
183
        doc.text(sections_comparatif[index].title, 20, line);
Elouan Le Bars's avatar
Elouan Le Bars committed
184
185
186
187
188
189
190
        line = line + 4;

        var canvasImg = canvas.toDataURL("image/png");
        doc.addImage(canvasImg, "PNG", 15, line, 54, 18);

        doc.setFont("Helvetica", "");
        doc.setFontSize(7);
Elouan Le Bars's avatar
Elouan Le Bars committed
191
192
        var sectionText = detailled_results_text[sections_comparatif[index].name];
        var splitText = doc.splitTextToSize(sectionText,100);
Elouan Le Bars's avatar
Elouan Le Bars committed
193
194
195
196
197
        doc.text(splitText, 84, line + 4);

        line = line + 40;
      });

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

<style>
Elouan Le Bars's avatar
Elouan Le Bars committed
220
.results {
221
  background-color: #f1f1f1;
Elouan Le Bars's avatar
Elouan Le Bars committed
222
223
  flex-basis: 25%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
Elouan Le Bars's avatar
Elouan Le Bars committed
224
225
226
227
228
229
}

/*
 * HEADER
 */

Elouan Le Bars's avatar
Elouan Le Bars committed
230
231
232
233
.results-header {
  font-weight: bold;
  font-size: 30px;
  line-height: 35px;
234
  color: #3b3b3b;
235
  padding-top: 20px;
Elouan Le Bars's avatar
Elouan Le Bars committed
236
237
  padding-left: 40px;
}
238
.results-header-btn-actions button {
Elouan Le Bars's avatar
Elouan Le Bars committed
239
240
241
  border: none;
  color: black;
  border-radius: 6px;
Elouan Le Bars's avatar
Elouan Le Bars committed
242
243
244
245
  padding: 2px 8px;
  margin-left: 5px;
  position: relative;
  top: -5px;
Elouan Le Bars's avatar
Elouan Le Bars committed
246
247
248
249
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
Elouan Le Bars's avatar
Elouan Le Bars committed
250
251
252
253
254
255
256
257
.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
258
259
  background: rgba(0, 71, 255, 0.58);
}
Elouan Le Bars's avatar
Elouan Le Bars committed
260
261
262
263
264
265
266
.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
267
.results-header-btn-displayed-view {
Elouan Le Bars's avatar
Elouan Le Bars committed
268
  margin-bottom: 10px;
Elouan Le Bars's avatar
Elouan Le Bars committed
269
270
271
  margin-left: 4px;
}

272
273
.results-header-btn-displayed-view input {
  background-color: #3b3b3b;
Elouan Le Bars's avatar
Elouan Le Bars committed
274
  max-width: 50%;
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
  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
290
291
292
293
/*
 * RESULTS
 */
.results-content {
294
  padding-top: 40px;
Elouan Le Bars's avatar
Elouan Le Bars committed
295
296
297
}
.results-section {
  border-top-style: solid;
298
  border-color: #bcbcbc;
Elouan Le Bars's avatar
Elouan Le Bars committed
299
300
301
302
303
304
305
306
307
308
309
  border-width: 3px;
  padding-top: 10px;
  padding-left: 40px;
}

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

.results-section h3 {
310
  color: #3b3b3b;
Elouan Le Bars's avatar
Elouan Le Bars committed
311
}
Elouan Le Bars's avatar
Elouan Le Bars committed
312
313
314
315
316
317
318
319
320

/*
 * CHARTS
 */

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