splitted concernement content cartouche into components for each mapmode, completed terrain de vie concernement display

src/api/gql/concernement.fragment.gql

@@ -13,7 +13,17 @@ fragment ConcernementFields on Concernement {
     }
     description
   }
-  author
+  author {
+    username
+    structure {
+      name
+    }
+  }
+  created
+  changed
+  lieu {
+    name
+  }
   entites {
     menacemaintien
     prise

src/assets/main.scss

@@ -186,6 +186,47 @@ body{
         font-weight: 300;
       }
 
+      section.content-concernement{
+        section.infos{
+          >p{
+            font-size: 0.882em;
+            font-weight: 100;
+              
+            >span{
+              >span{
+                font-weight: 100;
+              }
+            }
+            span.author{
+              span{
+              
+              }
+            }
+            span.structure{
+              span{
+  
+              }
+            }
+            span.lieu{
+              span{
+  
+              }
+            }
+            span.created{
+              span{
+  
+              }
+            }
+            span.changed{
+              span{
+  
+              }
+            }
+
+          }
+        }
+      }
+
       // PUISSANCE D'AGIR
       section.content-besoins{
         li.besoin{

src/components/contents/Doleancer.vue

@@ -0,0 +1,127 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@/stores/user'
+import { CommonStore } from '@/stores/common'
+
+export default {
+  props: ['id'],
+  data(){
+    return {
+
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['ct_concernement']),
+    ...mapState(ConcernementsStore,['ct_entite']),
+  },
+  created () {
+    console.log(`Doleancer content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
+  }
+}
+
+</script>
+
+<template>
+  <section
+      class="content-doleances">
+        <section
+          v-for="doleance in opened_concernement.doleances"
+          class="doleance">
+            <header>
+              <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
+              <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
+
+              <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
+              <h4 name="lenquete">{{ doleance.lenquete }}</h4>
+            </header>
+            <section class="groupesinterets">
+              <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
+              <ul>
+                <li
+                  v-for="groupe in doleance.groupesinterets">
+                    
+                    <label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
+                    <p name="groupe" v-html="groupe.groupe_interets" />
+                    <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
+                    <p name="accorder" v-html="groupe.accorder_interets" />
+                    <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
+                    <p name="formuler" v-html="groupe.formuler" />
+                </li>
+              </ul>
+            </section>
+            <section class="adresse">
+              <label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
+              <p name="entite_addresse_doleance" v-html="doleance.entite_addresse_doleance" />
+              <label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
+              <p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
+              <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
+              <p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
+              <h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
+              <ul class="reception_traitement">
+                <li
+                  v-for="rec in doleance.reception_traitement">
+                    <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
+                    <p name="entite_adressee" v-html="rec.entite_adressee" />
+                    <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
+                    <p name="doleance_formulee" v-html="rec.doleance_formulee" />
+                    <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
+                    <p name="traite_doleance" v-html="rec.traite_doleance" />
+                    <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
+                    <p name="entite_recoit_doleance" v-html="rec.entite_recoit_doleance" />
+                </li>
+              </ul>               
+            </section>
+            <section class="miseenoeuvre">
+              <label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
+              <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
+              <label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
+              <p name="decision_formule" v-html="doleance.decision_formule" />
+              <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
+              <ul class="mise_en_oeuvre_decision">
+                <li
+                  v-for="dec in doleance.mise_en_oeuvre_decision">
+                    <label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
+                    <p name="entite_adresse_decision" v-html="dec.entite_adresse_decision" />
+                    <label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
+                    <p name="formule_decision" v-html="dec.formule_decision" />
+                    <label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
+                    <p name="entite_metenoeuvre_decisio" v-html="dec.entite_metenoeuvre_decisio" />
+                </li>
+              </ul>
+            </section>
+            <section class="receptions_et_applications">
+              <label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
+              <p name="entite_adresse_application" v-html="doleance.entite_adresse_application" />
+              <label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
+              <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
+              <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
+              <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
+              <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
+              <ul class="receptions_et_applications">
+                <li
+                  v-for="app in doleance.receptions_et_applications">
+                    <label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
+                    <p name="applique_decision" v-html="app.applique_decision" />
+                    <label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
+                    <p name="formule_decision_applic" v-html="app.formule_decision_applic" />
+                    <label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
+                    <p name="entite_recoit_decision" v-html="app.entite_recoit_decision" />
+                </li>
+              </ul>
+
+              <label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
+              <p name="probleme_initial_resolu" v-html="doleance.probleme_initial_resolu" />
+              <label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
+              <p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" />
+              <label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
+              <p name="non_adresse_doleance" v-html="doleance.non_adresse_doleance" />
+              
+              
+              
+            </section>
+        </section>
+    </section>
+</template>

src/components/contents/PuissanceAgir.vue

@@ -0,0 +1,90 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@/stores/user'
+import { CommonStore } from '@/stores/common'
+
+export default {
+  props: ['id'],
+  data(){
+    return {
+
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['ct_concernement']),
+    ...mapState(ConcernementsStore,['ct_entite']),
+  },
+  created () {
+    console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
+  }
+}
+
+</script>
+
+<template>
+  <section
+    class="content-besoins">
+      <ul class="besoins">
+        <li
+          v-for="besoin in opened_concernement.besoins"
+          :key="besoin.id"
+          class="besoin"
+          :id="besoin.id"
+          :class="besoinClass(besoin.id)"
+        >
+          <span 
+            class="open-btn mdi"
+            :class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
+            @click="onClickBesoin(besoin.id)"
+            />
+          <header>
+            <label 
+              class="mdi mdi-rhombus"
+              :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
+              @click="onClickBesoin(besoin.id)"
+              >
+                Besoin de l'enqueteur
+            </label>
+            <h4 class="besoin-description" v-html="besoin.description"/>
+            <a 
+              v-if="isloggedin"
+              :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              class="contribute-link mdi mdi-pencil-plus">
+                contribuer à ce besoin
+            </a>
+          </header>
+          <ul class="reponses">
+            <li
+              v-for="reponse in besoin.reponses"
+              :key="reponse.id"
+              class="reponse"
+              :id="reponse.id"
+            >
+              <label class="mdi mdi-rhombus-outline">Ressource</label>
+              <section v-if="reponse.qui">
+                <label for="reponse-qui">Qui</label>
+                <p name="reponse-qui" v-html="reponse.qui" />
+              </section>
+              <section v-if="reponse.quoi">
+                <label for="reponse-quoi">Quoi</label>
+                <p name="reponse-quoi" v-html="reponse.quoi" />
+              </section>    
+              <section v-if="reponse.ou">
+                <label for="reponse-ou">Où</label>
+                <p name="reponse-ou" v-html="reponse.ou" />
+              </section>    
+              <section v-if="reponse.avec">
+                <label for="reponse-avec">Avec</label>
+                <p name="reponse-avec" v-html="reponse.avec" />
+              </section>    
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+</template>

src/components/contents/TerrainDeVie.vue

@@ -0,0 +1,74 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@/stores/user'
+import { CommonStore } from '@/stores/common'
+
+export default {
+  props: ['id', 'eid', 'entite'],
+  data(){
+    return {
+
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['ct_concernement']),
+    ...mapState(ConcernementsStore,['ct_entite']),
+    ...mapState(UserStore,['name']),
+    created(){
+      let d = new Date(this.opened_concernement.created); 
+      console.log('d', d);
+      return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
+    },
+    changed(){
+      let d = new Date(this.opened_concernement.changed); 
+      console.log('d', d);
+      return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
+    }
+  },
+  created () {
+    console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
+  }
+}
+
+</script>
+
+<template>
+  <!-- concernement -->
+  <section
+    v-if="!entite"
+    class="content-concernement">
+    <section class="description">
+        <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
+        <div v-html="opened_concernement.description"/>
+    </section>
+    <section class="caillou">
+        <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
+        <div v-html="opened_concernement.caillou "/>
+    </section>
+    <section class="infos">
+      <p>
+        <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}</span><br/>
+        <span class="structure" v-if="opened_concernement.author.structure"><span>avec</span> {{ opened_concernement.author.structure[0].name }}</span><br/>
+        <span class="lieu" v-if="opened_concernement.lieu"><span>à</span> {{ opened_concernement.lieu[0].name }}</span><br/>
+        <span class="created"><span>démarrée le</span> {{ created }}</span><br/>
+        <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
+      </p>
+    </section>
+  </section>
+  <!-- entite -->
+  <section
+    v-if="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>
+</template>

src/views/Concernement.vue

@@ -13,6 +13,9 @@ import EntiteFields from '@api/gql/entite.fragment.gql'
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiHeadphones } 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: ['id', 'eid'],
@@ -109,7 +112,10 @@ export default {
     }
   },
   components: {
-    SvgIcon
+    SvgIcon,
+    TerrainDeVie,
+    PuissanceAgir,
+    Doleancer
   }
 }
 
@@ -160,196 +166,11 @@ export default {
 
       </div>
     </header>
-    <!-- concernement -->
-    <section
-      v-if="map_mode === 'terraindevie' && !entite"
-      class="content-concernement">
-      <section class="description">
-          <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
-          <div v-html="opened_concernement.description"/>
-      </section>
-      <section class="caillou">
-          <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
-          <div v-html="opened_concernement.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="content-besoins">
-        <ul class="besoins">
-          <li
-            v-for="besoin in opened_concernement.besoins"
-            :key="besoin.id"
-            class="besoin"
-            :id="besoin.id"
-            :class="besoinClass(besoin.id)"
-          >
-            <span 
-              class="open-btn mdi"
-              :class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
-              @click="onClickBesoin(besoin.id)"
-              />
-            <header>
-              <label 
-                class="mdi mdi-rhombus"
-                :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
-                @click="onClickBesoin(besoin.id)"
-                >
-                  Besoin de l'enqueteur
-              </label>
-              <h4 class="besoin-description" v-html="besoin.description"/>
-              <a 
-                v-if="isloggedin"
-                :href="'/api/node/add/reponse?besoin_id='+besoin.id" 
-                target="_blank" 
-                rel="noopener noreferrer"
-                class="contribute-link mdi mdi-pencil-plus">
-                  contribuer à ce besoin
-              </a>
-            </header>
-            <ul class="reponses">
-              <li
-                v-for="reponse in besoin.reponses"
-                :key="reponse.id"
-                class="reponse"
-                :id="reponse.id"
-              >
-                <label class="mdi mdi-rhombus-outline">Ressource</label>
-                <section v-if="reponse.qui">
-                  <label for="reponse-qui">Qui</label>
-                  <p name="reponse-qui" v-html="reponse.qui" />
-                </section>
-                <section v-if="reponse.quoi">
-                  <label for="reponse-quoi">Quoi</label>
-                  <p name="reponse-quoi" v-html="reponse.quoi" />
-                </section>    
-                <section v-if="reponse.ou">
-                  <label for="reponse-ou">Où</label>
-                  <p name="reponse-ou" v-html="reponse.ou" />
-                </section>    
-                <section v-if="reponse.avec">
-                  <label for="reponse-avec">Avec</label>
-                  <p name="reponse-avec" v-html="reponse.avec" />
-                </section>    
-              </li>
-            </ul>
-          </li>
-        </ul>
-    </section>
-    <section
-      v-if="map_mode === 'doleancer'"
-      class="content-doleances">
-        <section
-          v-for="doleance in opened_concernement.doleances"
-          class="doleance">
-            <header>
-              <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
-              <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
-
-              <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
-              <h4 name="lenquete">{{ doleance.lenquete }}</h4>
-            </header>
-            <section class="groupesinterets">
-              <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
-              <ul>
-                <li
-                  v-for="groupe in doleance.groupesinterets">
-                    
-                    <label for="groupe">{{ p_groupes_interets.field_groupe_interets.label }}</label>
-                    <p name="groupe" v-html="groupe.groupe_interets" />
-                    <label for="accorder">{{ p_groupes_interets.field_accorder_interets.label }}</label>
-                    <p name="accorder" v-html="groupe.accorder_interets" />
-                    <label for="formuler">{{ p_groupes_interets.field_formuler.label }}</label>
-                    <p name="formuler" v-html="groupe.formuler" />
-                </li>
-              </ul>
-            </section>
-            <section class="adresse">
-              <label for="entite_addresse_doleance">{{ ct_cercle_politique.field_entite_adresse_doleance.label }}</label>
-              <p name="entite_addresse_doleance" v-html="doleance.entite_addresse_doleance" />
-              <label for="comment_ennonce_doleance">{{ ct_cercle_politique.field_comment_enonce_doleance.label }}</label>
-              <p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
-              <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
-              <p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
-              <h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
-              <ul class="reception_traitement">
-                <li
-                  v-for="rec in doleance.reception_traitement">
-                    <label for="entite_adressee">{{ p_reception_et_traitement.field_entite_adressee.label }}</label>
-                    <p name="entite_adressee" v-html="rec.entite_adressee" />
-                    <label for="doleance_formulee">{{ p_reception_et_traitement.field_doleance_formulee.label }}</label>
-                    <p name="doleance_formulee" v-html="rec.doleance_formulee" />
-                    <label for="traite_doleance">{{ p_reception_et_traitement.field_traite_doleance.label }}</label>
-                    <p name="traite_doleance" v-html="rec.traite_doleance" />
-                    <label for="entite_recoit_doleance">{{ p_reception_et_traitement.field_entite_recoit_doleance.label }}</label>
-                    <p name="entite_recoit_doleance" v-html="rec.entite_recoit_doleance" />
-                </li>
-              </ul>               
-            </section>
-            <section class="miseenoeuvre">
-              <label for="entites_decisionnaires">{{ ct_cercle_politique.field_entites_decisionnaires.label }}</label>
-              <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
-              <label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
-              <p name="decision_formule" v-html="doleance.decision_formule" />
-              <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
-              <ul class="mise_en_oeuvre_decision">
-                <li
-                  v-for="dec in doleance.mise_en_oeuvre_decision">
-                    <label for="entite_adresse_decision">{{ p_mise_en_oeuvre_decision.field_entite_adresse_decision.label }}</label>
-                    <p name="entite_adresse_decision" v-html="dec.entite_adresse_decision" />
-                    <label for="formule_decision">{{ p_mise_en_oeuvre_decision.field_formule_decision.label }}</label>
-                    <p name="formule_decision" v-html="dec.formule_decision" />
-                    <label for="entite_metenoeuvre_decisio">{{ p_mise_en_oeuvre_decision.field_entite_metenoeuvre_decisio.label }}</label>
-                    <p name="entite_metenoeuvre_decisio" v-html="dec.entite_metenoeuvre_decisio" />
-                </li>
-              </ul>
-            </section>
-            <section class="receptions_et_applications">
-              <label for="entite_adresse_application">{{ ct_cercle_politique.field_entite_adresse_application.label }}</label>
-              <p name="entite_adresse_application" v-html="doleance.entite_adresse_application" />
-              <label for="aqui_adresse_decision">{{ ct_cercle_politique.field_aqui_adresse_decision.label }}</label>
-              <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
-              <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
-              <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
-              <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
-              <ul class="receptions_et_applications">
-                <li
-                  v-for="app in doleance.receptions_et_applications">
-                    <label for="applique_decision">{{ p_reception_application_decision.field_applique_decision.label }}</label>
-                    <p name="applique_decision" v-html="app.applique_decision" />
-                    <label for="formule_decision_applic">{{ p_reception_application_decision.field_formule_decision_applic.label }}</label>
-                    <p name="formule_decision_applic" v-html="app.formule_decision_applic" />
-                    <label for="entite_recoit_decision">{{ p_reception_application_decision.field_entite_recoit_decision.label }}</label>
-                    <p name="entite_recoit_decision" v-html="app.entite_recoit_decision" />
-                </li>
-              </ul>
-
-              <label for="probleme_initial_resolu">{{ ct_cercle_politique.field_probleme_initial_resolu.label }}</label>
-              <p name="probleme_initial_resolu" v-html="doleance.probleme_initial_resolu" />
-              <label for="oui_nouvelle_situation">{{ ct_cercle_politique.field_oui_nouvelle_situation.label }}</label>
-              <p name="oui_nouvelle_situation" v-html="doleance.oui_nouvelle_situation" />
-              <label for="non_adresse_doleance">{{ ct_cercle_politique.field_non_adresse_doleance.label }}</label>
-              <p name="non_adresse_doleance" v-html="doleance.non_adresse_doleance" />
-              
-              
-              
-            </section>
-        </section>
-    </section>
+    <!-- body -->
+    <TerrainDeVie v-if="map_mode === 'terraindevie'" :id="id" :eid="eid" :entite="entite"/>
+    <PuissanceAgir v-if="map_mode === 'puissancedagir'" :id="id"/>
+    <Doleancer v-if="map_mode === 'doleancer'" :id="id"/>
+    
   </section>
 </template>