Skip to content
GitLab
Commit f6ec271f authored by Matt Glorion's avatar Matt Glorion
Browse files

[ADD] implement scenario duplication with dynamic icons

parent 6efb12f6
Hide whitespace changes
Inline Side-by-side
front/src/App.vue
View file @ f6ec271f
......@@ -7,9 +7,9 @@
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"
......@@ -45,10 +45,21 @@ export default {
re_render_results_detailled_view: false,
display_single_page: false,
displayed_single_page: null,
activeScenarios: [],
};
},
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;
......
front/src/assets/img/add_scenario_bleu.svg 0 → 100644
View file @ f6ec271f
<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>
front/src/assets/img/add_scenario_jaune.svg 0 → 100644
View file @ f6ec271f
<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>
front/src/assets/img/add_scenario_rouge.svg 0 → 100644
View file @ f6ec271f
<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>
front/src/components/Scenario.vue
View file @ f6ec271f
......@@ -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;
......
Supports Markdown
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