displaying double cartouche on superposition opening

This commit is contained in:
2023-09-15 11:27:59 +02:00
parent 36b76a9ba6
commit c1c1eab95d
8 changed files with 116 additions and 53 deletions

View File

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