Commit e2f5e820 authored by Matt Glorion's avatar Matt Glorion

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

# Conflicts:
#	front/src/App.vue
parents f6ec271f e0099876
......@@ -28,7 +28,27 @@ Les résultats sont présentés sous forme de pourcentage, par rapport à celui
Le back-end utilise `Node.js` tandis que le front-end utilise `VueJS`.
## Modification du texte sur l'interface gitlab/github
Il est possible d'éditer directement les fichiers sur gitlab ou github, de façon à mettre à jour simplement les différents textes contenus dans l'application.
### Modification de l'explication pour chaque sphères d'impact
Modifier le texte du fichier JSON `front/src/options/detailled_results_text.js`.
_Vous pouvez aussi changer directement l'intitulé des boutons et labels. Attention, une modification du code peut entraîner le disfonctionnement de l'application._
### Modification du texte de la section "A propos"
Se rendre sur le fichier `impactometre/front/src/components/SinglePage.vue` et modifier uniquement le texte entre les balises `<p>`.
### Modification des boutons et legendes des formulaires
Se rendre sur le fichier `impactometre/front/src/components/Scenario.vue` et modifier le texte entre les balises `<p>`.
### Modification du titre et du sous-titre de l'application
Se rendre sur le fichier `impactometre/front/src/components/Header.vue `et modifier le texte entre les balises `<h1>` pour le titre et entre les balises `<b>` pour le sous-titre.
## Pour développer
### Installer Node.js et npm
Avec Linux :
```bash
......@@ -54,22 +74,13 @@ Pour vérifier le code :
$ npm run lint
```
### Pour modifier le texte dans le à propos
Se rendre sur le fichier impactometre/front/src/components/SinglePage.vue et modifier uniquement le texte entre les balises \<p>
### Pour modifier le texte des formualaires
Se rendre sur le fichier impactometre/front/src/components/Scenario.vue et modifier le texte entre les balises \<p>
### Pour modifier le titre Impactomètre et le sous titre "Comparaison d'impact environnemental des réunions"
Se rendre sur le fichier impactometre/front/src/components/Header.vue et modifier le texte entre les balises \<h1> pour le tire et entre les balises \<b> pour le sous titre
## Communication entre le front-end et le back-end
Le client effectue une requête POST sur la route `api/meeting` afin d'obtenir les impacts comparatifs et équivalents.
### Exemple de payload JSON pour la requête POST
Avec 3 scénarios.
Pour deux scénarios.
```json
[
......@@ -158,44 +169,6 @@ Avec 3 scénarios.
}
],
"meetingScenario":"Scenario B"
},
{
"meetingDuration":120,
"numberOfParticipants":6,
"hardware":[
{
"name":"LAPTOP",
"french":"Ordinateurs portables",
"qty":2
},
{
"name":"DESKTOP",
"french":"Ordinateurs fixes",
"qty":1
},
{
"name":"LOGITECH_KIT",
"french":"Kits de vidéo-conférence",
"qty":1
},
{
"name":"COMPUTER_SCREEN_LCD",
"french":"Ecrans supplémentaires",
"qty":0
},
{
"name":"PROJECTOR",
"french":"Vidéo-projecteurs",
"qty":4
}
],
"software":{
"name":""
},
"journey":[
],
"meetingScenario":"Scenario C"
}
]
```
......@@ -205,14 +178,6 @@ Avec 3 scénarios.
{
"comparison":{
"HUMAN_HEALTH":{
"Scenario C":{
"damageEndpoint":"HUMAN_HEALTH",
"meetingScenario":"Scenario C",
"value":100,
"hardware":100,
"software":0,
"journey":0
},
"Scenario A":{
"damageEndpoint":"HUMAN_HEALTH",
"meetingScenario":"Scenario A",
......@@ -231,14 +196,6 @@ Avec 3 scénarios.
}
},
"ECOSYSTEM_QUALITY":{
"Scenario C":{
"damageEndpoint":"ECOSYSTEM_QUALITY",
"meetingScenario":"Scenario C",
"value":100,
"hardware":100,
"software":0,
"journey":0
},
"Scenario B":{
"damageEndpoint":"ECOSYSTEM_QUALITY",
"meetingScenario":"Scenario B",
......@@ -265,14 +222,6 @@ Avec 3 scénarios.
"software":0,
"journey":80.16
},
"Scenario C":{
"damageEndpoint":"CLIMATE_CHANGE",
"meetingScenario":"Scenario C",
"value":56.32,
"hardware":56.32,
"software":0,
"journey":0
},
"Scenario B":{
"damageEndpoint":"CLIMATE_CHANGE",
"meetingScenario":"Scenario B",
......@@ -283,14 +232,6 @@ Avec 3 scénarios.
}
},
"RESOURCES":{
"Scenario C":{
"damageEndpoint":"RESOURCES",
"meetingScenario":"Scenario C",
"value":100,
"hardware":100,
"software":0,
"journey":0
},
"Scenario A":{
"damageEndpoint":"RESOURCES",
"meetingScenario":"Scenario A",
......@@ -314,28 +255,24 @@ Avec 3 scénarios.
"ONE_KM_CAR":{
"Scenario A":0.2,
"Scenario B":0.2,
"Scenario C":0.2
}
},
"ECOSYSTEM_QUALITY":{
"ONE_KM_CAR":{
"Scenario A":0.3,
"Scenario B":0.2,
"Scenario C":0.2
}
},
"CLIMATE_CHANGE":{
"ONE_KM_CAR":{
"Scenario A":0.2,
"Scenario B":0.4,
"Scenario C":0.3
}
},
"RESOURCES":{
"ONE_KM_CAR":{
"Scenario A":0.2,
"Scenario B":0.2,
"Scenario C":0.1
}
}
}
......
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<link rel="stylesheet" href="stylesheets/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<title>Impactomètre</title>
......
<template>
<div id="app">
<Header></Header>
<main id="main-flexbox">
<SinglePage
:page="displayed_single_page"
v-show="display_single_page"
></SinglePage>
<div class="scenarios" v-show="display_scenarios">
<Scenario ref="scenario0" id=0 title="Scenario A"></Scenario>
<Scenario ref="scenario1" id=1 title="Scenario B"></Scenario>
<Scenario ref="scenario2" id=2 title="Scenario C"></Scenario>
</div>
<ResultsDetailledView
:selectedView="results_detailled_view_choice"
class="scenarios"
v-show="!display_scenarios"
:key="re_render_results_detailled_view"
/>
<Results />
</main>
<div id="app">
<div v-show="!hide_warning" id="mobile-warning">
<p>Cette application n'est pas destinée aux supports mobiles.
Nous vous recommandons d'utiliser un ordinateur.<br>
<a href="#" @click.prevent="hide_warning = true">Continuer</a>
</p>
</div>
<Header></Header>
<main id="main-flexbox">
<SinglePage :page="displayed_single_page" v-show="display_single_page"></SinglePage>
<div class="scenarios" v-show="display_scenarios">
<Scenario ref="scenario0" id=0 title="Scenario A"></Scenario>
<Scenario ref="scenario1" id=1 title="Scenario B"></Scenario>
<Scenario ref="scenario2" id=2 title="Scenario C"></Scenario>
</div>
<ResultsDetailledView :selectedView="results_detailled_view_choice" class="scenarios" v-show="!display_scenarios" :key="re_render_results_detailled_view" />
<Results />
</main>
</div>
</template>
<script>
......@@ -46,8 +44,10 @@ export default {
display_single_page: false,
displayed_single_page: null,
activeScenarios: [],
hide_warning: false,
};
},
methods: {},
mounted() {
this.$root.$on("scenario-status-update", ([scenario, value]) =>{
this.activeScenarios[scenario] = value;
......@@ -86,18 +86,46 @@ export default {
<style>
#app {
height: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 800px) {
#mobile-warning {
display: none;
}
}
#mobile-warning {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
}
#mobile-warning p {
text-align: center;
margin-left: 25%;
width: 50%;
margin-top: 20%;
color: white;
}
#mobile-warning a {
color: white;
font-weight: bold;
}
#main-flexbox {
flex-basis:90%;
flex-basis: 90%;
display: flex;
width: 100%;
}
main {
/* height: 100%; */
}
.scenarios {
display: flex;
flex-basis: 75%;
......
......@@ -46,6 +46,13 @@ export default {
legend: {
display: false,
},
hover: {
mode: 'nearest',
intersect: true
},
tooltips: {
mode: 'point',
},
scales: {
xAxes: [
{
......
......@@ -59,7 +59,7 @@
<br />
<div class="video">
<iframe
src="https://player.vimeo.com/video/431704870?title=0&byline=0&portrait=0"
src="https://player.vimeo.com/video/436047872"
style="
position: absolute;
top: 0;
......
......@@ -6,11 +6,6 @@ Vue.use(Vuex);
let labels = ["A", "B", "C"];
let labels_detailled = ["Scenario A", "Scenario B", "Scenario C"];
let backgroundColor = ["#e97272", "#e7dc73", "#83bdec"];
let hoverBackgroundColor = [
"rgba(0,0,0,0.8)",
"rgba(0,0,0,0.6)",
"rgba(0,0,0,0.3)",
];
const state = {
scenarios_json: [],
......@@ -61,19 +56,16 @@ const state = {
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[0],
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[1],
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[2],
},
],
},
......@@ -84,19 +76,16 @@ const state = {
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[0],
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[1],
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[2],
},
],
},
......@@ -107,19 +96,16 @@ const state = {
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[0],
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[1],
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[2],
},
],
},
......@@ -130,19 +116,16 @@ const state = {
label: "Matériel",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[0],
},
{
label: "Réseau",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[1],
},
{
label: "Trajets",
data: [0, 0, 0],
backgroundColor,
hoverBackgroundColor: hoverBackgroundColor[2],
},
],
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment