264 lines
9.0 KiB
Vue
264 lines
9.0 KiB
Vue
<script>
|
|
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { ConcernementsStore } from '@stores/concernements'
|
|
import { CommonStore } from '@/stores/common'
|
|
|
|
// import { print } from 'graphql/language/printer'
|
|
// import gql from 'graphql-tag'
|
|
// import GQL from '@api/graphql-axios'
|
|
// import EntiteFields from '@api/gql/entite.fragment.gql'
|
|
|
|
// import SvgIcon from '@jamescoyle/vue-icon';
|
|
import { mdiArrowUp } from '@mdi/js';
|
|
|
|
import TerrainDeVie from '@components/contents/TerrainDeVie.vue';
|
|
import PuissanceAgir from '@components/contents/PuissanceAgir.vue';
|
|
import Doleancer from '@components/contents/Doleancer.vue';
|
|
|
|
export default {
|
|
// props: {
|
|
// cid: {
|
|
// type: Number
|
|
// },
|
|
// eid: {
|
|
// type: Number
|
|
// }
|
|
// },
|
|
props: ['cid', 'eid'],
|
|
data(){
|
|
return {
|
|
// entite: null,
|
|
proximite_cid_eid: null,
|
|
superposition_cluster_index: null,
|
|
superposition: null,
|
|
opened_besoin_id: null,
|
|
arrowup_path: mdiArrowUp
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(ConcernementsStore,['map_mode',
|
|
'opened_concernement',
|
|
'concernements_loaded',
|
|
'allSuperpositions_clustered',
|
|
'concernement_is_updating_nid']),
|
|
...mapState(CommonStore,['cartouch_width']),
|
|
//
|
|
main_cid_eid () {
|
|
let r = {
|
|
cid: this.cid,
|
|
eid: null
|
|
};
|
|
|
|
if (this.eid) {
|
|
r.eid = this.eid
|
|
} else if (this.map_mode === "superposition" && this.superposition) {
|
|
this.superposition.forEach(s => {
|
|
// routeview param -> props do not respect type (Number), this.cid should be number
|
|
if(s.cid === parseInt(this.cid)){
|
|
r.eid = s.eid;
|
|
}
|
|
});
|
|
}
|
|
return r;
|
|
},
|
|
superposed_cid_eid () {
|
|
if (this.superposition) {
|
|
let r = null;
|
|
this.superposition.forEach(s => {
|
|
if(this.opened_concernement && 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, this.$route`, this.$route);
|
|
console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
|
|
console.log('Concernement view created, allSuperpositions_clustered', this.allSuperpositions_clustered);
|
|
console.log("superposition", this.superposition);
|
|
|
|
if(this.map_mode === "proximite"){
|
|
if (this.$route.query.proximite_cid && this.$route.query.proximite_eid) {
|
|
this.proximite_cid_eid = {
|
|
cid: this.$route.query.proximite_cid,
|
|
eid: this.$route.query.proximite_eid,
|
|
}
|
|
}
|
|
// as we have two content to show multiply the cartouch with by 2
|
|
// necessary for mapitem opening scale and position
|
|
this.setCartoucheWidth(2)
|
|
}else if(this.map_mode === "superposition" && this.$route.query.superposition_cluster_index){
|
|
this.getSuperposition()
|
|
// as we have two content to show multiply the cartouch with by 2
|
|
// necessary for mapitem opening scale and position
|
|
this.setCartoucheWidth(2)
|
|
}else{
|
|
// as we have one content to show multiply the cartouch with by 1
|
|
// necessary for mapitem opening scale and position
|
|
this.setCartoucheWidth(1)
|
|
}
|
|
|
|
// when we arrived directly to the url, load the entite
|
|
// this.eid provided by route params
|
|
if (this.map_mode === "terraindevie" && this.eid) {
|
|
this.setOpenedEntiteId(this.eid)
|
|
}
|
|
},
|
|
watch: {
|
|
concernements_loaded: {
|
|
handler (n, o){
|
|
// 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.cid))
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
eid: {
|
|
handler (n, o){
|
|
this.setOpenedEntiteId(n)
|
|
},
|
|
deep: true
|
|
},
|
|
// watch superposition_id query
|
|
$route: {
|
|
handler (n, o) {
|
|
console.log("concernement view $route watcher o, n", o, n);
|
|
if (n.query && n.query.superposition_cluster_index) {
|
|
this.getSuperposition()
|
|
}
|
|
if (n.query && n.query.proximite_cid && n.query.proximite_eid) {
|
|
this.proximite_cid_eid = {
|
|
cid: n.query.proximite_cid,
|
|
eid: n.query.proximite_eid,
|
|
}
|
|
this.setCartoucheWidth(2)
|
|
}else{
|
|
this.proximite_cid_eid = null;
|
|
this.setCartoucheWidth(1)
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
map_mode: {
|
|
handler (n, o) {
|
|
console.log('concernement watch map_mode', o, n);
|
|
if(n === "proximite" || n === "superposition"){
|
|
// as we have two content to show multiply the cartouch with by 2
|
|
// necessary for mapitem opening scale and position
|
|
this.setCartoucheWidth(2)
|
|
}else{
|
|
// as we have one content to show multiply the cartouch with by 1
|
|
// necessary for mapitem opening scale and position
|
|
this.setCartoucheWidth(1)
|
|
}
|
|
},
|
|
deep: true
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
...mapActions(ConcernementsStore,['openCloseConcernements',
|
|
'setOpenedEntiteId',
|
|
'setMapMode',
|
|
'resetConcernementOpened']),
|
|
...mapActions(CommonStore,['setCartoucheWidth']),
|
|
getSuperposition(){
|
|
console.log('getSuperposition');
|
|
// get superposition_cluster_id and superposition object
|
|
if (this.$route.query.superposition_cluster_index) {
|
|
this.superposition_cluster_index = this.$route.query.superposition_cluster_index;
|
|
console.log('this.superposition_cluster_index', this.superposition_cluster_index);
|
|
if(this.superposition_cluster_index){
|
|
// let ids = this.superposition_id.match(/(\d+)_(\d+)__(\d+)_(\d+)/i)
|
|
// let couple_key = `${ids[1]}-${ids[3]}`
|
|
// // console.log('superposition_id', this.superposition_id, couple_key, ids);
|
|
// if (this.allSuperpositions_bycids[couple_key][this.superposition_id]) {
|
|
// this.superposition = this.allSuperpositions_bycids[couple_key][this.superposition_id]
|
|
// console.log("this.superposition", this.superposition);
|
|
// }
|
|
let cluster = this.allSuperpositions_clustered[this.superposition_cluster_index];
|
|
this.superposition = []
|
|
for(let cid_eid of cluster){
|
|
if (cid_eid.cid === this.cid) {
|
|
this.superposition.push(cid_eid)
|
|
}
|
|
if (cid_eid.cid === parseInt(this.$route.query.superposed_cid)){
|
|
this.superposition.push(cid_eid)
|
|
// console.log('this.superposition', this.superposition);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
closeConcernement(){
|
|
// unfocus any active element to trigger recording if needed
|
|
document.activeElement.blur();
|
|
// setTimeout to let time for editable fields to focus out and record changes
|
|
this.waitForUpdatingEnded();
|
|
},
|
|
waitForUpdatingEnded(){
|
|
setTimeout(() => {
|
|
if (!this.concernement_is_updating_nid) {
|
|
this.resetConcernementOpened();
|
|
} else {
|
|
this.waitForUpdatingEnded();
|
|
}
|
|
}, 1);
|
|
|
|
}
|
|
},
|
|
components: {
|
|
TerrainDeVie,
|
|
PuissanceAgir,
|
|
Doleancer
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="opened_concernement" class="concernement">
|
|
<TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action' || map_mode === 'superposition' || map_mode === 'proximite'" :cid="main_cid_eid.cid" :eid="main_cid_eid.eid"/>
|
|
<PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
|
|
<Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>
|
|
</section>
|
|
<section v-if="map_mode === 'superposition' && superposition && superposed_cid_eid" class="concernement clone">
|
|
<TerrainDeVie :cid="superposed_cid_eid.cid" :eid="superposed_cid_eid.eid" />
|
|
</section>
|
|
<section v-if="map_mode === 'proximite' && proximite_cid_eid" class="concernement clone">
|
|
<TerrainDeVie :cid="proximite_cid_eid.cid" :eid="proximite_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>
|
|
nav.close-concernement{
|
|
position: absolute;
|
|
top:65px;
|
|
left: -30px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|