displaying double cartouche on superposition opening

src/assets/main.scss

@@ -125,6 +125,8 @@ body{
   }
 
   #content{
+    display: flex;
+    gap: 0.5rem;
     @mixin main-cartouche{
       background-color: rgba(255, 255, 255, 0.9);
       box-sizing: border-box;

src/components/ConcernementMapItem.vue

@@ -1395,8 +1395,12 @@ export default {
               // push route (keep the hash for map_mode)
             this.$router.push({
               name: 'concernement',
-              hash: `#${this.map_mode}`,
-              params: {id: this.cid, mapitemid: this.id}
+              params: {cid: this.cid},
+              query: {
+                mapitemid: this.id, 
+                superposition_id: this.superposition_id
+              },
+              hash: `#${this.map_mode}`
             });
             // reset the mousehover
             this.resetHoverElmt();

src/components/ConcernementMapPopup.vue

@@ -36,10 +36,10 @@ export default {
     window.removeEventListener('mousemove', this.onMousemove);
   },
   computed: {
-    ...mapState(ConcernementsStore,['concernements']),
-    ...mapState(ConcernementsStore,['concernementsByID']),
-    ...mapState(ConcernementsStore,['allEntitesById']),
-    ...mapState(ConcernementsStore,['allBesoinsById'])
+    ...mapState(ConcernementsStore,['concernements',
+                                    'concernementsByID',
+                                    'allEntitesById',
+                                    'allBesoinsById'])
   },
   watch: {
     infos: {

src/components/MapConcernements.vue

@@ -1265,7 +1265,7 @@ export default {
       <li>
         <a 
           title="superposition" href="#superposition" @click="setMapMode('superposition')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions }"
         >
           <span class="icon superposition"></span> <span class="label"> superposition</span>
         </a>

src/components/contents/TerrainDeVie.vue

@@ -16,9 +16,10 @@ import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
 
 export default {
-  props: ['id', 'eid', 'entite'],
+  props: ['cid', 'eid', 'entite'],
   data(){
     return {
+      concernement: null,
       history_value: 0,
       history_slider_ops: null,
       infos_opened: false,
@@ -29,16 +30,17 @@ export default {
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'opened_concernement',
+                                    'concernementsByID',
                                     'ct_concernement',
                                     'ct_entite']),
     ...mapState(UserStore,['name']),
     created(){
-      let d = new Date(this.opened_concernement.created); 
+      let d = new Date(this.concernement.created); 
       console.log('d', d);
       return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
     },
     changed(){
-      let d = new Date(this.opened_concernement.changed); 
+      let d = new Date(this.concernement.changed); 
       console.log('d', d);
       return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
     },
@@ -47,12 +49,14 @@ export default {
     }
   },
   created () {
-    console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
+    this.concernement = this.concernementsByID[this.cid];
+
+    console.log(`terraindevie created, cid: ${this.cid}, eid: ${this.eid}, this.concernement:`, this.concernement);
 
     // revisions
         
     let data=[];
-    this.opened_concernement.revisions.forEach(rev => {
+    this.concernement.revisions.forEach(rev => {
       if (rev.entites.length > 3) {
         let d = new Date(rev.changed);
         data.push({
@@ -80,7 +84,7 @@ export default {
     history_value: {
       handler (n, o) {
         console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
-        this.setActiveRevision(this.opened_concernement.id, n);
+        this.setActiveRevision(this.concernement.id, n);
       },
       deep: true
     }
@@ -102,12 +106,12 @@ export default {
 </script>
 
 <template>
-  <CartoucheLayout>
+  <CartoucheLayout :cid="cid">
     <template v-slot:header>
       <div class="entite">
         <!-- TODO update entite with revisions -->
-        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
-        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
+        <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
+        <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
         <h3 v-if="entite"><span class="entite-point">&bull;</span>&ThinSpace;{{ entite.title }}</h3>
       </div>
     </template>
@@ -115,13 +119,13 @@ export default {
     <template v-slot:main>
       <!-- concernement -->
       <template v-if="!entite">
-        <section v-if="opened_concernement.description" class="description">
+        <section v-if="concernement.description" class="description">
             <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
-            <div v-html="opened_concernement.description"/>
+            <div v-html="concernement.description"/>
         </section>
-        <section v-if="opened_concernement.caillou" class="caillou">
+        <section v-if="concernement.caillou" class="caillou">
             <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
-            <div v-html="opened_concernement.caillou"/>
+            <div v-html="concernement.caillou"/>
         </section>
       </template>
 
@@ -140,14 +144,14 @@ export default {
           <div 
             class="author info" 
             @click="onClickInfos">
-              <span>une enquête de</span> {{ opened_concernement.author.username }}<br/>
+              <span>une enquête de</span> {{ concernement.author.username }}<br/>
           </div>
           <div class="wrapper" :class="{ 'opened': infos_opened }">
-            <div class="info structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></div>
-            <div class="info lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></div>
+            <div class="info structure" v-if="concernement.author.structure.length"><span>avec</span> {{ concernement.author.structure[0].name }}<br/></div>
+            <div class="info lieu" v-if="concernement.lieu.length"><span>à</span> {{ concernement.lieu[0].name }}<br/></div>
             <div class="info created"><span>démarrée le</span> {{ created }}<br/></div>
             <div class="info changed"><span>mise à jour le</span> {{ changed }}</div>
-            <div class="info recit-colophon" v-if="opened_concernement.recit_colophon" v-html="opened_concernement.recit_colophon"/>
+            <div class="info recit-colophon" v-if="concernement.recit_colophon" v-html="concernement.recit_colophon"/>
           </div>
       </section>
       

src/components/layout/CartoucheLayout.vue

@@ -7,14 +7,18 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiHeadphones } from '@mdi/js';
 
 export default {
-  props: ['id', 'eid', 'entite'],
+  props: ['cid'],
   data(){
     return {
       headphones_path: mdiHeadphones
     }
   },
+  created () {
+    console.log('Cartouch layout created', this.cid);
+    this.concernement = this.concernementsByID[this.cid];
+  },
   computed: {
-    ...mapState(ConcernementsStore,['opened_concernement', 'ct_concernement']),
+    ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
   },
   methods: {
     ...mapActions(ConcernementsStore,['setMapMode'])
@@ -29,28 +33,28 @@ export default {
   <header>
     <div class="concernement-cartouche-icons">
       <label>{{ ct_concernement.title.description }}</label>
-      <h2>{{ opened_concernement.title }}</h2>
+      <h2>{{ concernement.title }}</h2>
       <nav class="icons">
         <ul>
-          <li v-if="opened_concernement.has_recit" >
+          <li v-if="concernement.has_recit" >
             <svg-icon type="mdi" :path="headphones_path"></svg-icon>
           </li>
           <li>
             <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
           </li>
-          <li v-if="opened_concernement.has_puissancedagir" >
+          <li v-if="concernement.has_puissancedagir" >
             <a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a>
           </li>
-          <li v-if="opened_concernement.has_proximite" >
+          <li v-if="concernement.has_proximite" >
             <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
           </li>
-          <li v-if="opened_concernement.has_superposition" >
+          <li v-if="concernement.has_superposition" >
             <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
           </li>
-          <li v-if="opened_concernement.has_agissantes" >
+          <li v-if="concernement.has_agissantes" >
             <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
           </li>
-          <li v-if="opened_concernement.has_doleance" >
+          <li v-if="concernement.has_doleance" >
             <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
           </li>
         </ul>

src/router/index.js

@@ -25,7 +25,7 @@ const router = createRouter({
       props: true
     },
     {
-      path: '/concernement/:id/:mapitemid/:eid?',
+      path: '/concernement/:cid/:eid?',
       name: 'concernement',
       // component: ConcernementView,
       // route level code-splitting

src/views/Concernement.vue

@@ -17,7 +17,7 @@ import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
 import Doleancer from '@components/contents/Doleancer.vue';
 
 export default {
-  props: ['id', 'eid'],
+  props: ['cid', 'eid'],
   data(){
     return {
       entite: null,
@@ -28,12 +28,58 @@ export default {
   computed: {
     ...mapState(ConcernementsStore,['map_mode',
                                     'opened_concernement',
-                                    'concernements_loaded']),
-    // ...mapState(CommonStore,['hover_elmt'])
+                                    'concernements_loaded',
+                                    'allSuperpositions_byid']),
+    // ...mapState(CommonStore,['hover_elmt']),
+    superposition_id () {
+      console.log('superposition_id computed');
+      if(this.$route.query.superposition_id){
+        return this.$route.query.superposition_id
+      } else {
+        return null;
+      }
+    },
+    superposition () {
+      console.log('superposition computed', this.superposition_id);
+      if(this.superposition_id){
+        let sid = this.$route.query.superposition_id;
+        let ids = sid.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
+        let couple_key = `${ids[1]}-${ids[3]}`
+        console.log('superposition_id', sid, couple_key, ids);
+        if (this.allSuperpositions_byid[couple_key][sid]) {
+          let s = this.allSuperpositions_byid[couple_key][sid]
+          console.log(s); 
+          return s;
+        }else{
+          return null;
+        }
+      } else {
+        return null;
+      }
+    },
+    superposed_cid_eid () {
+      if (this.superposition) {
+        let r = null;
+        this.superposition.forEach(s => {
+          if(s.cid !== this.opened_concernement.id){
+            r = {
+              cid: s.cid,
+              eid: s.eid
+            }
+          }
+        });
+        console.log('superposed_cid_eid', r);
+        return r;
+      } else {
+        return null
+      }
+      
+    }
   },
   created () {
-    console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
-    
+    console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
+    console.log('Concernement view created, allSuperpositions_byid', this.allSuperpositions_byid);
+    console.log("superposition", this.superposition);
     // when we arrived directly to the url, load the entite
     // this.eid provided by route params
     if (!this.entity && this.eid) {
@@ -46,7 +92,7 @@ export default {
         // console.log(`watch concernements_loaded n: ${n}, opened_concernement:${this.opened_concernement}, id:${this.id}`);
         // when we arrived directly to the url then all concernement are loaded: do open the concernement
         if (!this.opened_concernement) {
-          this.openCloseConcernements(parseInt(this.id))
+          this.openCloseConcernements(parseInt(this.cid))
         }
       },
       deep: true
@@ -61,7 +107,7 @@ export default {
         }
       },
       deep: true
-    },
+    }
   },
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements',
@@ -106,19 +152,22 @@ export default {
 
 <template>
   <section v-if="opened_concernement" class="concernement">
-    <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :id="id" :eid="eid" :entite="entite"/>
-    <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
-    <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>  
-    <nav class="close-concernement" @click="closeConcernement">
-      <svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
-        <mask id="arrowMask">
-          <rect x="0" y="0" width="24" height="24" fill="white"/>
-          <path :d="arrowup_path" fill="black"/>
-        </mask>
-        <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
-      </svg> 
-    </nav>
+    <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action'|| map_mode === 'superposition'" :cid="cid" :eid="eid" :entite="entite"/>
+    <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="cid"/>
+    <Doleancer v-if="map_mode === 'doleancer'" :id="cid"/>
+  </section>
+  <section v-if="map_mode === 'superposition' && superposition" class="concernement clone">
+    <TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
   </section>
+  <nav class="close-concernement" @click="closeConcernement">
+    <svg class="close-btn" viewbox="0 0 24 24" width="24" height="24" style="--sx: 1; --sy: 1; --r: 0deg;">
+      <mask id="arrowMask">
+        <rect x="0" y="0" width="24" height="24" fill="white"/>
+        <path :d="arrowup_path" fill="black"/>
+      </mask>
+      <circle cx="12" cy="12" r="12" mask="url(#arrowMask)" fill="white" />
+    </svg> 
+  </nav>
 </template>
 
 <style lang="scss" scoped>