better concernment and entite content display

src/assets/main.scss

@@ -84,7 +84,7 @@ body{
       box-sizing: border-box;
       width:450px;
       height: 100%;
-      padding: 5rem 1rem 1rem;
+      padding: 1rem 1rem 1rem;
       overflow-y: auto;
       overflow-x: hidden;
       header, section{
@@ -97,10 +97,25 @@ body{
         padding: 0 0 1em 0;
       }
       header{
+        display: flex;
+        height: 8rem;
+        flex-direction: column;
+        justify-content: flex-end;
+        label, h3{
+          // height: 70px;
+          box-sizing: border-box;
+          // padding: 0 0 1em 0;
+          // flex-grow: auto;
+        }
+        h3{
+          font-weight: 400;
+          font-size: 1.2em;
+        }
         h2{
           font-weight: 400;
           font-size: 1.512em;
         }
+        
       }
       section>div{
         font-size: 1em;
@@ -123,6 +138,19 @@ body{
       border-radius: 3px;
       // min-width: 10em;
       // max-width: 30em;
+      .concernement-map-popup{
+        ul.icons{
+          display: flex;
+          flex-direction: row;
+          padding: 0;
+          margin: 0;
+          li{
+            list-style:none;
+            padding:0;
+            margin:0;
+          }
+        }
+      }
       h1{
         font-size: 1em;
         font-weight: 400;

src/components/ConcernementMapItem.vue

@@ -121,7 +121,7 @@ export default {
     },
     hover_elmt: {
       handler (n, o) {
-        console.log('watch hover_elmt', o, n);
+        // console.log('watch hover_elmt', o, n);
         if (n && n.type === 'concernement' && n.id === this.id) {
           this.isHover = true;
         } else {
@@ -704,7 +704,7 @@ export default {
             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";
+              this.ctx.fillStyle = "#01ffe2";
             } else {
               this.ctx.fillStyle = "#000";
             }
@@ -724,7 +724,7 @@ export default {
               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";
+                this.ctx.fillStyle = "#01ffe2";
               } else {
                 this.ctx.fillStyle = "#000";
               }

src/components/ConcernementMapPopup.vue

@@ -72,18 +72,18 @@ export default {
       this.dom.setAttribute("pos", `${v}-${h}`);
       switch (h) {
         case "right":
-          this.dom.style.left = `${e.clientX}px`;
+          this.dom.style.left = `${e.clientX+2}px`;
           break;
         case "left":
-          this.dom.style.left = `${e.clientX - this.dom.clientWidth}px`;
+          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}px`;
+          this.dom.style.top = `${e.clientY - this.dom.clientHeight-2}px`;
           break;
         case "bottom":
-          this.dom.style.top = `${e.clientY}px`;
+          this.dom.style.top = `${e.clientY+2}px`;
           break;
       }
     }
@@ -100,6 +100,10 @@ export default {
     <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>

src/stores/concernements.js

@@ -23,6 +23,7 @@ export const ConcernementsStore = defineStore({
     opened: false,
     opened_entite_id: null,
     ct_concernement: {},
+    ct_entite: {},
     concernements_loaded: false,
   }),
   getters: {
@@ -97,15 +98,30 @@ export const ConcernementsStore = defineStore({
               }
             }
           }`,
-        variables: { type: 'node', bundle: 'concernement' }
+        variables: {}
       } 
+
+      // concernement
+      body.variables = { type: 'node', bundle: 'concernement' } 
       GQL.post('', body)
         .then(({ data: { data: { entitydef }}}) => {
           // console.log('loadContentTypeDefinition entitydef', entitydef);
           entitydef.fields.forEach(field => {
             this.ct_concernement[field.field_name] = field;
           });
-          console.log('loadContentTypeDefinition entitydef', this.ct_concernement);
+          console.log('loadContentTypeDefinition entitydef concernement', this.ct_concernement);
+          
+        })
+
+              // concernement
+      body.variables = { type: 'node', bundle: 'entite' } 
+      GQL.post('', body)
+        .then(({ data: { data: { entitydef }}}) => {
+          // console.log('loadContentTypeDefinition entitydef', entitydef);
+          entitydef.fields.forEach(field => {
+            this.ct_entite[field.field_name] = field;
+          });
+          console.log('loadContentTypeDefinition entitydef entite', this.ct_entite);
           
         })
 

src/views/Concernement.vue

@@ -22,7 +22,8 @@ export default {
     ...mapState(ConcernementsStore,['opened']),
     // ...mapState(ConcernementsStore,['opened_entity_id']),
     ...mapState(ConcernementsStore,['concernements_loaded']),
-    ...mapState(ConcernementsStore,['ct_concernement'])
+    ...mapState(ConcernementsStore,['ct_concernement']),
+    ...mapState(ConcernementsStore,['ct_entite'])
   },
   created () {
     console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened:${this.opened}`);
@@ -91,26 +92,43 @@ export default {
 
 <template>
   <section v-if="opened" class="concernement">
-    <div v-if="entite">{{ entite.title }}</div>
     <header v-if="concernements_loaded">
-      <label v-if="ct_concernement">{{ ct_concernement.title.description }}</label>
+      <label v-if="ct_concernement && !entite">{{ ct_concernement.title.description }}</label>
+      <h3 v-if="entite">{{ entite.title }}</h3>
+      <span v-if="entite && opened.entites_byid[eid].menacemaintien > 0">menace</span>
+      <span v-if="entite && opened.entites_byid[eid].menacemaintien < 0">maintient</span>
       <h2>{{ opened.title }}</h2>
     </header>
+    <!-- concernement -->
     <section
-      v-if="concernements_loaded && map_mode === 'terraindevie'" 
+      v-if="map_mode === 'terraindevie' && !entite"
-      class="description">
+      class="content-concernement">
+      <section class="description">
           <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
           <div v-html="opened.description"/>
       </section>
-    <section 
+      <section class="caillou">
-      v-if="concernements_loaded && map_mode === 'terraindevie'" 
-      class="caillou">
           <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
           <div v-html="opened.caillou "/>
       </section>
+    </section>
+    <!-- entite -->
+    <section
+      v-if="map_mode === 'terraindevie' && entite"
+      class="content-entite">
+      <section class="action">
+          <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
+          <div v-html="entite.action"/>
+      </section>
+      <section class="menace-maintien">
+          <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
+          <div v-html="entite.menacemaintien"/>
+      </section>
+    </section>
+    <!-- puissance d'agir -->
     <section
       v-if="map_mode === 'puissancedagir'"
-      class="besoins">
+      class="content-besoins">
         <ul>
           <li
             v-for="(besoin,index) in opened.besoins"