[ADD] implement scenario duplication with dynamic icons

front/src/App.vue

@@ -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

+<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

+<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

+<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

@@ -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;