From 302252a1c1508894e71f14c6aa2a74a185d8c9eb Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Mon, 22 May 2023 18:15:04 +0200
Subject: [PATCH] mouse over mapPopUp on besoin & reponse

---
 src/components/ConcernementMapItem.vue  | 92 ++++++++++++-------------
 src/components/ConcernementMapPopup.vue | 22 ++++--
 src/components/MapConcernements.vue     | 15 ++++
 3 files changed, 79 insertions(+), 50 deletions(-)

diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index 04c72f4..c1f8a29 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -588,52 +588,6 @@ export default {
       
       this.ctx.stroke();
     },
-    drawEntites(){
-      // IF OPENED
-      if (this.opened) { 
-        // place all entities points
-        // OR using entitées matter bodies
-        for (let i = 0; i < this.body.parts.length; i++) {
-          if (this.body.parts[i].item_type === 'entite' 
-            // draw only entite agissante if map mode is action
-            && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) {
-            let part = this.body.parts[i];
-            this.ctx.beginPath();
-            this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
-            // console.log(part.id, this.opened_entite_id);
-            if (part.id === this.opened_entite_id) {
-              this.ctx.fillStyle = "#F00";
-            } else {
-              this.ctx.fillStyle = "#000";
-            }
-            this.ctx.fill();
-          }
-        }
-      }
-        // IF CLOSED
-      else {
-        // map mode action
-        // if not opened and has_agissantes draw only entites agissantes
-        if (this.concernement.has_agissantes && this.map_mode === "action") {
-          for (let i = 0; i < this.body.parts.length; i++) {
-            if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) {
-              let part = this.body.parts[i];
-              this.ctx.beginPath();
-              this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false);
-              // console.log(part.id, this.opened_entite_id);
-              if (part.id === this.opened_entite_id) {
-                this.ctx.fillStyle = "#F00";
-              } else {
-                this.ctx.fillStyle = "#000";
-              }
-              this.ctx.fill();
-            }
-          }
-        }
-        
-
-      }
-    },
     drawBesoins(){
       for (let i = 0; i < this.body.parts.length; i++) {
         if (this.body.parts[i].item_type === 'besoin' || this.body.parts[i].item_type === 'reponse') {
@@ -722,6 +676,52 @@ export default {
 
       this.ctx.stroke();
     },
+    drawEntites(){
+      // IF OPENED
+      if (this.opened) { 
+        // place all entities points
+        // OR using entitées matter bodies
+        for (let i = 0; i < this.body.parts.length; i++) {
+          if (this.body.parts[i].item_type === 'entite' 
+            // draw only entite agissante if map mode is action
+            && ((this.map_mode === 'action' && this.body.parts[i].agissante) || this.map_mode !== "action")) {
+            let part = this.body.parts[i];
+            this.ctx.beginPath();
+            this.ctx.arc(part.position.x, part.position.y, 0.3*this.scale, 0, 2 * Math.PI, false);
+            // console.log(part.id, this.opened_entite_id);
+            if (part.id === this.opened_entite_id) {
+              this.ctx.fillStyle = "#F00";
+            } else {
+              this.ctx.fillStyle = "#000";
+            }
+            this.ctx.fill();
+          }
+        }
+      }
+        // IF CLOSED
+      else {
+        // map mode action
+        // if not opened and has_agissantes draw only entites agissantes
+        if (this.concernement.has_agissantes && this.map_mode === "action") {
+          for (let i = 0; i < this.body.parts.length; i++) {
+            if (this.body.parts[i].item_type === 'entite' && this.body.parts[i].agissante) {
+              let part = this.body.parts[i];
+              this.ctx.beginPath();
+              this.ctx.arc(part.position.x, part.position.y, 1*this.scale, 0, 2 * Math.PI, false);
+              // console.log(part.id, this.opened_entite_id);
+              if (part.id === this.opened_entite_id) {
+                this.ctx.fillStyle = "#F00";
+              } else {
+                this.ctx.fillStyle = "#000";
+              }
+              this.ctx.fill();
+            }
+          }
+        }
+        
+
+      }
+    },
     drawContour(){
       if (this.salientPoints.length > 3) {
         var fillStyle;
diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue
index b83c75b..61d5aa5 100644
--- a/src/components/ConcernementMapPopup.vue
+++ b/src/components/ConcernementMapPopup.vue
@@ -20,8 +20,12 @@ export default {
     // console.log(`popup created type: ${this.infos.type}`);
     if (this.infos.type === 'concernement') {
       this.concernement = this.concernementsByID[this.infos.id];
-    } else {
+    } 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 () {
@@ -39,9 +43,13 @@ export default {
       handler (n, o){
         if (n.type === 'concernement') {
           this.concernement = this.concernementsByID[n.id];
-        } else {
-          this.entite = this.allEntitesById[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
     },
@@ -67,6 +75,12 @@ export default {
     <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>
 </template>
 
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index c847e50..8c6f48f 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -153,6 +153,21 @@ export default {
                 id: body.id
               };
           }
+          if (body.item_type === "besoin" // if it is a besoin
+            && this.opened) { // if a concernement is opened
+              this.mapPopupData = {
+                type: 'besoin',
+                id: body.id
+              };
+          }
+
+          if (body.item_type === "reponse" // if it is a besoin
+            && this.opened) { // if a concernement is opened
+              this.mapPopupData = {
+                type: 'reponse',
+                id: body.id
+              };
+          }
         }
         // console.log(`this.mapPopupData type: ${this.mapPopupData.type}, id: ${this.mapPopupData.id}`);
       }