enites as matter body and popup display on mouse over entites

src/components/ConcernementMapPopup.vue

@@ -7,28 +7,48 @@ import { ConcernementsStore } from '@/stores/concernements'
 
 export default {
   name: 'concernementMapPopup',  
-  props: ['id'],
+  props: ['infos'],
   data() {
     return {
       dom: null,
-      concernement: null
+      type: null,
+      concernement: null,
+      entite: null
     }
   },
   created () {
-    this.concernement = this.concernementsByID[this.id];
+    // console.log(`popup created type: ${this.infos.type}`);
+    if (this.infos.type === 'concernement') {
+      this.concernement = this.concernementsByID[this.infos.id];
+    } else {
+      this.entite = this.allEntitesById[this.infos.id];
+    }
   },
   mounted () {
     // console.log('APP onMounted')
-    this.dom = this.$refs['concernement-map-popup'];
+    this.dom = this.$refs['map-popup'];
     window.addEventListener('mousemove', this.onMousemove);
   },
   computed: {
     ...mapState(ConcernementsStore,['concernements']),
-    ...mapState(ConcernementsStore,['concernementsByID'])
+    ...mapState(ConcernementsStore,['concernementsByID']),
+    ...mapState(ConcernementsStore,['allEntitesById'])
+  },
+  watch: {
+    infos: {
+      handler (n, o){
+        if (n.type === 'concernement') {
+          this.concernement = this.concernementsByID[n.id];
+        } else {
+          this.entite = this.allEntitesById[n.id];
+        }   
+      },
+      deep: true
+    },
   },
   methods: {
     onMousemove(e){
-      // console.log('popup mousemove', e, this.dom);
+      // console.log(`popup move type: ${this.infos.type}`);
       this.dom.style.left = `${e.clientX + 5}px`;
       this.dom.style.top = `${e.clientY - this.dom.clientHeight - 5}px`;
     }
@@ -40,8 +60,13 @@ export default {
 </script>
 
 <template>
-  <div id="concernement-map-popup" ref="concernement-map-popup">
-    <h1>{{ concernement.title }}</h1>
+  <div id="map-popup" ref="map-popup">
+    <section v-if="infos.type === 'concernement'" class="concernement-map-popup">
+      <h1>{{ concernement.title }}</h1>
+    </section>
+    <section v-if="infos.type === 'entite'" class="entite-map-popup">
+      <h1>alors ? {{ entite.entite.title }}</h1>
+    </section>
   </div>
 </template>