Commit 162b16dc authored by Elouan Le Bars's avatar Elouan Le Bars

[ADD] Howto section in header

Move header into a VueJS component
parent ae4f4ccd
......@@ -10,26 +10,11 @@
<title>Impactomètre</title>
</head>
<body>
<header>
<div class="header-logo">
<h1>Impactomètre</h1>
<b>Comparaison d'impact environnemental des réunions.</b>
</div>
<div class="header-about">
<a href="#" onclick="showAbout()">A propos</a>
</div>
</header>
<main>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</main>
<script>
function showAbout() {
document.getElementById("about").style.display = "block";
}
</script>
</body>
</html>
<script src="https://player.vimeo.com/api/player.js"></script>
......@@ -17,49 +17,3 @@ body {
flex-direction: column;
width:100vw;
}
header {
position:relative;
z-index: 3;
flex-basis: 60px;
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
background-color: #3C3C3C;
color: #FFFFFF;
}
header .header-logo {
height: 50px;
margin: 5px 30px;
}
header .header-logo h1 {
font-size: 24px;
line-height: 30px;
}
header .header-logo b {
font-size: 16px;
font-weight: normal;
line-height: 20px;
}
header .header-about a {
color: white;
position: absolute;
top: 20px;
left: 92%;
text-decoration-line: none;
}
header .header-about a:hover {
color: gray;
}
main {
height:100%
}
/*
* RESULTS
*/
.results {
flex-basis: 25%;
/* background-color: #BCBCBC; */
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}
.results-header {
}
<template>
<div id="app">
<About></About>
<div class="scenarios" v-show="display_scenarios">
<Scenario title="Scenario A"></Scenario>
<Scenario title="Scenario B"></Scenario>
<Scenario title="Scenario C"></Scenario>
</div>
<ResultsDetailledView
:selectedView="results_detailled_view_choice"
class="scenarios"
v-show="!display_scenarios"
:key="re_render_results_detailled_view"
/>
<Results />
<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 title="Scenario A"></Scenario>
<Scenario title="Scenario B"></Scenario>
<Scenario 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>
import About from "./components/About.vue";
import Header from "./components/Header.vue";
import SinglePage from "./components/SinglePage.vue";
import Results from "./components/Results.vue";
import ResultsDetailledView from "./components/ResultsDetailledView.vue";
import Scenario from "./components/Scenario.vue";
......@@ -25,7 +32,8 @@ import Scenario from "./components/Scenario.vue";
export default {
name: "App",
components: {
About,
Header,
SinglePage,
ResultsDetailledView,
Results,
Scenario,
......@@ -35,10 +43,19 @@ export default {
display_scenarios: true,
results_detailled_view_choice: "",
re_render_results_detailled_view: false,
display_single_page: false,
displayed_single_page: null,
};
},
methods: {},
mounted() {
this.$root.$on("show_single_page", (page) => {
this.display_single_page = true;
this.displayed_single_page = page;
});
this.$root.$on("hide_single_page", () => {
this.display_single_page = false;
});
this.$root.$on("re_render_results_detailled", () => {
// We re-render the component as a workaround to force chart to update
this.re_render_results_detailled_view = !this
......@@ -56,9 +73,17 @@ export default {
</script>
<style>
#app {
#main-flexbox {
display: flex;
}
main {
height: 100%;
}
.results {
flex-basis: 25%;
/* background-color: #BCBCBC; */
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
.scenarios {
display: flex;
flex-basis: 75%;
......
<template>
<div id="about">
<div class="about-body">
<div class="about-text">
<button class="close-btn" @click.prevent="hideAbout">
&#10006;
</button>
<p>
L’impactomètre 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.
</p>
<p>
Cet outil a pour vocation d’évaluer l’impact environnemental d’une
réunion afin que l’utilisateur puisse optimiser au mieux sa réunion
dans une démarche écologique. Cette évaluation est réalisée selon une
méthode inspirée de la méthode ACV (Analyse Cycle de Vie d’un
produit).
</p>
<p>
L’impact environnemental d’une réunion est calculé comme étant la
somme des impacts environnementaux dues aux matériels utilisés,
transports engendrés et le logiciel de visioconférence. L’utilisateur
doit donc juste renseigner les informations de ces différents critères
pour que l’Impactomètre puisse évaluer l’impact environnemental de la
réunion selon 4 catégories : l’impact sur la santé humaine, l’impact
sur la qualité de l’écosystème, l’impact sur le changement climatique
et l’impact sur les ressources.
</p>
<p>
Vous pouvez retrouver l'article sur lequel se basent les calculs
effectués dans le code <a href="#">à cette adresse</a>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
hideAbout: () => {
document.getElementById("about").style.display = "none";
},
},
};
</script>
<style>
#about {
position: absolute;
display: none;
width: 100%;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
}
.about-body {
position: absolute;
padding: 6%;
color: black;
font-size: 120%;
}
.about-text {
padding: 4% 2% 2% 2%;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 53px -18px rgba(0, 0, 0, 0.75);
border-radius: 8px;
}
.about-text p {
margin-bottom: 20px;
}
.about-text .close-btn {
top: -35px;
left: 5px;
margin: 5px;
}
</style>
<template>
<header>
<span class="header-logo">
<h1>Impactomètre</h1>
<b>Comparaison d'impact environnemental des réunions.</b>
</span>
<div class="header-links">
<a href="#" @click.prevent="showSinglePage('howto')">Utilisation</a>
<a href="#" @click.prevent="showSinglePage('about')">A propos</a>
</div>
</header>
</template>
<script>
export default {
methods: {
showSinglePage: function (page) {
this.$root.$emit("show_single_page", page);
},
},
};
</script>
<style>
header {
z-index: 3;
flex-basis: 60px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
background-color: #3c3c3c;
color: #ffffff;
}
header .header-logo {
display: inline-block;
height: 50px;
padding: 5px 30px;
}
header .header-logo h1 {
font-size: 24px;
line-height: 30px;
}
header .header-logo b {
font-size: 16px;
font-weight: normal;
line-height: 20px;
}
header .header-links {
display: inline-block;
float: right;
padding: 20px;
}
header .header-links a {
color: white;
text-decoration-line: none;
margin-left: 20px;
}
header .header-links a:hover {
color: gray;
}
</style>
......@@ -65,6 +65,7 @@
<script>
import ResultsChart from "./ResultsChart.js";
import store from "../store/MainStore.js";
import { sections_comparatif } from "../options/options.js";
export default {
components: { ResultsChart },
......@@ -75,24 +76,7 @@ export default {
re_render_results: false,
scenarios_json: [],
displayed_view: "comparatif",
sections_comparatif: [
{
name: "sante_humaine",
title: "Santé Humaine",
},
{
name: "qualite_ecosysteme",
title: "Qualité des Écosystèmes",
},
{
name: "changement_climatique",
title: "Changement Climatique",
},
{
name: "ressources",
title: "Ressources",
},
],
sections_comparatif,
sections_equivalents: [
{
name: "douches",
......
......@@ -14,9 +14,7 @@
></ResultsChart>
</div>
<p>
The disability-adjusted life year (DALY) is a measure of overall disease
burden, expressed as the number of years lost due to ill-health,
disability or early death.
{{ detailled_results_text }}
</p>
</div>
</div>
......@@ -25,7 +23,7 @@
<script>
import ResultsChart from "./ResultsChart.js";
import store from "../store/MainStore.js";
import { detailled_results_text } from "../options/detailled_results_text.js";
export default {
props: ["selectedView"],
store,
......@@ -62,6 +60,9 @@ export default {
chartData: function () {
return (sphere) => store.state.impact_on_spheres_detailled[sphere];
},
detailled_results_text: function () {
return detailled_results_text[this.selectedView];
},
},
mounted() {
this.$root.$on("re_render_results_detailled", () => {
......@@ -76,7 +77,7 @@ export default {
.results-detailled-view {
display: flex;
flex-direction: column;
padding: 30px;
padding: 60px;
background: repeating-linear-gradient(
-45deg,
rgba(0, 0, 0, 0),
......
<template>
<div id="single-page">
<div class="single-page-body">
<div class="single-page-text">
<button class="close-btn" @click.prevent="hidePage">
&#10006;
</button>
<div v-if="page == 'about'">
<h2>A propos</h2>
<br />
<p>
L’impactomètre 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.
</p>
<p>
Cet outil a pour vocation d’évaluer l’impact environnemental d’une
réunion afin que l’utilisateur puisse optimiser au mieux sa réunion
dans une démarche écologique. Cette évaluation est réalisée selon
une méthode inspirée de la méthode ACV (Analyse Cycle de Vie d’un
produit).
</p>
<p>
L’impact environnemental d’une réunion est calculé comme étant la
somme des impacts environnementaux dues aux matériels utilisés,
transports engendrés et le logiciel de visioconférence.
L’utilisateur doit donc juste renseigner les informations de ces
différents critères pour que l’Impactomètre puisse évaluer l’impact
environnemental de la réunion selon 4 catégories : l’impact sur la
santé humaine, l’impact sur la qualité de l’écosystème, l’impact sur
le changement climatique et l’impact sur les ressources.
</p>
<p>
Vous pouvez retrouver l'article sur lequel se basent les calculs
effectués dans le code <a href="#">à cette adresse</a>
</p>
</div>
<div v-if="page == 'howto'" class="howto">
<h2>Utilisation</h2>
<br />
<p>Cette vidéo présente l'utilisation de l'Impactomètre.</p>
<div class="video">
<iframe
src="https://player.vimeo.com/video/431704870?title=0&byline=0&portrait=0"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
</div>
<p>
<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["page"],
methods: {
hidePage() {
this.$root.$emit("hide_single_page");
},
},
};
</script>
<style>
#single-page {
position: absolute;
display: block;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
}
.single-page-body {
position: absolute;
padding: 6%;
color: black;
font-size: 16px;
}
.single-page-text {
padding: 2%;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 53px -18px rgba(0, 0, 0, 0.75);
border-radius: 8px;
}
.single-page-text p {
margin-bottom: 20px;
}
.single-page-text .close-btn {
top: -15px;
left: 5px;
margin: 5px;
}
/*
* HOWTO
*/
.video {
padding: 40% 0 0 0;
position: relative;
}
</style>
export const detailled_results_text = {
sante_humaine: `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,
les effets respiratoires, les rayonnements ionisants et la diminution de la couche.
`,
qualite_ecosysteme: `L’impact sur la qualité de l’écosystème est mesuré en PDF*m^2*année.
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 et l’occupation des terres.`,
changement_climatique: `L’impact sur le changement climatique est mesuré en Kg eqCO2.`,
ressources: `L’impact sur les ressources considère l’utilisation d’énergies non renouvelables et l'extraction de minéraux.`,
};
......@@ -55,3 +55,22 @@ export const journey_options = [
french: "Avion intercontinental",
},
];
export const sections_comparatif = [
{
name: "sante_humaine",
title: "Santé Humaine",
},
{
name: "qualite_ecosysteme",
title: "Qualité des Écosystèmes",
},
{
name: "changement_climatique",
title: "Changement Climatique",
},
{
name: "ressources",
title: "Ressources",
},
];
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