Commit e264a4e4 authored by clementbrizard's avatar clementbrizard

Merge branch 'dev' of gitlab.utc.fr:tx-techno-num/impactometre into dev

parents d12ad659 e2f5e820
......@@ -10,9 +10,9 @@
<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>
<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 />
......@@ -43,11 +43,23 @@ export default {
re_render_results_detailled_view: false,
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;
this.$refs.scenario0.updateActiveScenarios(this.activeScenarios);
this.$refs.scenario1.updateActiveScenarios(this.activeScenarios);
this.$refs.scenario2.updateActiveScenarios(this.activeScenarios);
this.$refs.scenario0.reRenderCopyButtons();
this.$refs.scenario1.reRenderCopyButtons();
this.$refs.scenario2.reRenderCopyButtons();
});
this.$root.$on("show_single_page", (page) => {
this.display_single_page = true;
this.displayed_single_page = page;
......
<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect x="4.5" y="3.5" width="56.0642" height="57.186" rx="9.5" stroke="black"/>
</g>
<rect x="21.5" y="19.5" width="16" height="20" rx="2.5" fill="#84BCEC" stroke="black"/>
<rect x="27.5" y="24.5" width="16" height="20" rx="2.5" fill="white" stroke="black"/>
<path d="M35.9258 34.4238H38.3047V35.4492H35.9258V38.1445H34.8359V35.4492H32.457V34.4238H34.8359V31.9336H35.9258V34.4238Z" fill="black"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="65.0642" height="66.186" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect x="4.5" y="3.5" width="56.0642" height="57.186" rx="9.5" stroke="black"/>
</g>
<rect x="21.5" y="19.5" width="16" height="20" rx="2.5" fill="#E7DC73" stroke="black"/>
<rect x="27.5" y="24.5" width="16" height="20" rx="2.5" fill="white" stroke="black"/>
<path d="M35.9258 34.4238H38.3047V35.4492H35.9258V38.1445H34.8359V35.4492H32.457V34.4238H34.8359V31.9336H35.9258V34.4238Z" fill="black"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="65.0642" height="66.186" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<rect x="4.5" y="3.5" width="56.0642" height="57.186" rx="9.5" stroke="black"/>
</g>
<rect x="21.5" y="19.5" width="16" height="20" rx="2.5" fill="#E97371" stroke="black"/>
<rect x="27.5" y="24.5" width="16" height="20" rx="2.5" fill="white" stroke="black"/>
<path d="M35.9258 34.4238H38.3047V35.4492H35.9258V38.1445H34.8359V35.4492H32.457V34.4238H34.8359V31.9336H35.9258V34.4238Z" fill="black"/>
<defs>
<filter id="filter0_d" x="0" y="0" width="65.0642" height="66.186" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
......@@ -122,9 +122,23 @@
<div class="scenario-header"></div>
<div class="scenario-body">
<img
src="../assets/img/add_scenario_button.svg"
@click.prevent="createScenario"
src="../assets/img/add_scenario_button.svg"
@click.prevent="createScenario(-1)"
/>
<div :key="componentKey">
<img v-if="activeScenarios[0]"
src="../assets/img/add_scenario_rouge.svg"
@click.prevent="createScenario(0)"
/>
<img v-if="activeScenarios[1]"
src="../assets/img/add_scenario_jaune.svg"
@click.prevent="createScenario(1)"
/>
<img v-if="activeScenarios[2]"
src="../assets/img/add_scenario_bleu.svg"
@click.prevent="createScenario(2)"
/>
</div>
</div>
</div>
</div>
......@@ -177,6 +191,10 @@ function initialScenario() {
export default {
name: "Scenario",
props: {
id: {
type: String,
required: true,
},
title: {
type: String,
required: true,
......@@ -192,18 +210,47 @@ export default {
software_options,
journey_options,
scenario: {},
activeScenarios: [false, false, false],
componentKey: 0,
};
},
computed: {
getScenarioData: function() {
return this.scenario
}
},
methods: {
createScenario() {
this.scenario = initialScenario();
this.scenario.meetingScenario = this.title;
this.active = true;
createScenario(id) {
let newScenario;
if (id >= 0) {
const new_scenarios = [];
this.$root.$emit("retrieveScenariosInOrder", new_scenarios);
newScenario = JSON.parse(JSON.stringify(new_scenarios[id]));
this.scenario = newScenario;
this.scenario.meetingScenario = this.title;
this.active = true;
this.$root.$emit('scenario-status-update', [this.id, true]);
}
else {
newScenario = initialScenario();
this.scenario = newScenario;
this.scenario.meetingScenario = this.title;
this.active = true;
this.$root.$emit('scenario-status-update', [this.id, true]);
}
},
deleteScenario() {
this.scenario = initialScenario();
this.scenario.meetingScenario = this.title;
this.active = false;
this.$root.$emit('scenario-status-update', [this.id, false])
this.componentKey += 1;
},
updateActiveScenarios(updatedActiveScenarios) {
this.activeScenarios = updatedActiveScenarios;
},
emitUpdate(active){
this.$root.$emit('scenario-status-update', [this.id, active])
},
addJourney() {
//TODO: Add a journey only if last if not empty
......@@ -215,18 +262,30 @@ export default {
deleteJourney(journey) {
this.scenario.journey = this.scenario.journey.filter((j) => j != journey);
},
reRenderCopyButtons() {
this.componentKey += 1;
},
},
mounted() {
var cookie = JSON.parse(localStorage.getItem(this.title));
if (cookie) {
this.active = cookie[0];
this.scenario = cookie[1];
this.$nextTick(function() {
this.$root.$emit('scenario-status-update', [this.id, this.active]);
});
}
this.$root.$on("retrieveScenarios", (data) => {
if (this.active) {
data.push(this.scenario);
}
});
this.$root.$on("retrieveScenariosInOrder", (data) => {
if (this.active) {
data[this.id] = this.scenario;
}
});
},
updated() {
localStorage.setItem(
......@@ -440,6 +499,15 @@ export default {
transition-timing-function: ease;
width: 50px;
}
.scenario-empty .scenario-body div img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
transition-timing-function: ease;
width: 50px;
}
.scenario-empty .scenario-body img:hover {
transition-timing-function: ease;
......
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