123 lines
3.3 KiB
Vue
123 lines
3.3 KiB
Vue
<script>
|
|
// import { RouterLink, RouterView } from 'vue-router'
|
|
|
|
import { mapState, mapActions } from 'pinia'
|
|
// import { UserStore } from '@/stores/user'
|
|
import { ConcernementsStore } from '@/stores/concernements'
|
|
|
|
export default {
|
|
name: 'concernementMapPopup',
|
|
props: ['infos'],
|
|
data() {
|
|
return {
|
|
dom: null,
|
|
type: null,
|
|
concernement: null,
|
|
entite: null
|
|
}
|
|
},
|
|
created () {
|
|
// console.log(`popup created type: ${this.infos.type}`);
|
|
if (this.infos.type === 'concernement') {
|
|
this.concernement = this.concernementsByID[this.infos.id];
|
|
} else if(this.infos.type === 'entite') {
|
|
this.entite = this.allEntitesById[this.infos.id];
|
|
} else if (this.infos.type === 'besoin') {
|
|
|
|
} else if (this.infos.type === 'reponse') {
|
|
|
|
}
|
|
},
|
|
mounted () {
|
|
// console.log('APP onMounted')
|
|
this.dom = this.$refs['map-popup'];
|
|
window.addEventListener('mousemove', this.onMousemove);
|
|
},
|
|
computed: {
|
|
...mapState(ConcernementsStore,['concernements']),
|
|
...mapState(ConcernementsStore,['concernementsByID']),
|
|
...mapState(ConcernementsStore,['allEntitesById'])
|
|
},
|
|
watch: {
|
|
infos: {
|
|
handler (n, o){
|
|
if (n.type === 'concernement') {
|
|
this.concernement = this.concernementsByID[n.id];
|
|
} else if(n.type === 'entite') {
|
|
this.entite = this.allEntitesById[this.infos.id];
|
|
} else if (n.type === 'besoin') {
|
|
|
|
} else if (n.type === 'reponse') {
|
|
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
methods: {
|
|
onMousemove(e){
|
|
// console.log(`popup move type: ${this.infos.type}`);
|
|
let v = "top";
|
|
let h = "right";
|
|
if (e.clientX + this.dom.clientWidth > document.body.clientWidth) {
|
|
h = "left";
|
|
} else {
|
|
h = "right";
|
|
}
|
|
if (e.clientY - this.dom.clientHeight < 0) {
|
|
v = "bottom";
|
|
} else {
|
|
v = "top";
|
|
}
|
|
this.dom.setAttribute("pos", `${v}-${h}`);
|
|
switch (h) {
|
|
case "right":
|
|
this.dom.style.left = `${e.clientX+2}px`;
|
|
break;
|
|
case "left":
|
|
this.dom.style.left = `${e.clientX - this.dom.clientWidth-2}px`;
|
|
break;
|
|
}
|
|
switch (v) {
|
|
case "top":
|
|
this.dom.style.top = `${e.clientY - this.dom.clientHeight-2}px`;
|
|
break;
|
|
case "bottom":
|
|
this.dom.style.top = `${e.clientY+2}px`;
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div id="map-popup" ref="map-popup">
|
|
|
|
<div class="popup-content-wrapper">
|
|
<section v-if="infos.type === 'concernement'" class="concernement-map-popup">
|
|
<h1>{{ concernement.title }}</h1>
|
|
<ul class="icons">
|
|
<li v-if="concernement.has_agissantes" ><span class="icon action">Action</span></li>
|
|
<li v-if="concernement.has_puissancedagir" ><span class="icon puissanceagir">Puissance d'agir</span></li>
|
|
</ul>
|
|
</section>
|
|
<section v-if="infos.type === 'entite'" class="entite-map-popup">
|
|
<h1>{{ entite.entite.title }}</h1>
|
|
</section>
|
|
<section v-if="infos.type === 'besoin'" class="besoin-map-popup">
|
|
<h1>Besoin</h1>
|
|
</section>
|
|
<section v-if="infos.type === 'reponse'" class="reponse-map-popup">
|
|
<h1>Réponse</h1>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|