created layout component for concernement content cartouche, continued to integrate entites

src/components/contents/TerrainDeVie.vue

@@ -3,13 +3,27 @@
 import { mapActions, mapState } from 'pinia'
 import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@/stores/user'
-import { CommonStore } from '@/stores/common'
+// import { CommonStore } from '@/stores/common'
+
+import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
+
+import { VideoPlayer } from '@videojs-player/vue'
+import 'videojs-youtube'
+import 'video.js/dist/video-js.css'
+
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/antd.css'
 
 export default {
   props: ['id', 'eid', 'entite'],
   data(){
     return {
-
+      history_value: 0,
+      history_slider_ops: {
+        dotSize:10,
+        min: 0,
+        max: 100,
+      }
     }
   },
   computed: {
@@ -26,49 +40,119 @@ export default {
       let d = new Date(this.opened_concernement.changed); 
       console.log('d', d);
       return d.toLocaleDateString("fr-FR");//.toISOString().split('T')[0];
+    },
+    display_concernement(){
+      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
     }
   },
   created () {
     console.log(`terrain de vie content created, id: ${this.id}, eid: ${this.eid}, opened_concernement:`, this.opened_concernement);
+  },
+  components: {
+    CartoucheLayout,
+    VideoPlayer,
+    VueSlider
   }
 }
 
 </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>
+  <CartoucheLayout>
+    <template v-slot:header>
+      <div class="pre-header">
+        <!-- concernement -->
+        <label v-if="display_concernement">{{ ct_concernement.title.description }}</label>
+        <!-- entite -->
+        <h3 v-if="entite">{{ entite.title }}</h3>
+        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
+        <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
+      </div>
+      
+    </template>
+    
+    <template v-slot:main>
+      <!-- concernement -->
+      <template v-if="!entite">
+        <section v-if="opened_concernement.description" class="description">
+            <label v-if="ct_concernement">{{ ct_concernement.field_description.description }}</label>
+            <div v-html="opened_concernement.description"/>
+        </section>
+        <section v-if="opened_concernement.caillou" class="caillou">
+            <label v-if="ct_concernement">{{ ct_concernement.field_caillou.description }}</label>
+            <div v-html="opened_concernement.caillou"/>
+        </section>
+      </template>
+
+      <!-- entite -->
+      <template v-if="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
+          v-if="entite.sources.length" 
+          class="sources multiple">
+          <section 
+            v-for="(source, index) in entite.sources"
+            :key="index"
+            class="source">
+            <section class="description">
+                <label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</label>
+                <div v-html="source.description"/>
+              </section>
+              <section
+                v-if="source.images.length" 
+                class="images">
+                <figure
+                  v-for="(image, j) in source.images"
+                  :key="j">
+                  <img :src="image.url" :alt="image.alt"/>
+                </figure>
+              </section>
+              <section
+                v-if="source.videos.length"
+                class="video multiple">
+                <!-- <a 
+                  v-for="(video,v) in source.videos"
+                  :key="v"
+                  :href="video.url">{{ video.url }}</a> -->
+                  <VideoPlayer
+                    v-for="(video,v) in source.videos"
+                    :key="v"
+                    type="video/youtube"
+                    :src="video.url"
+                    controls/>
+              </section>
+          </section>
+        </section>
+      </template>
+    </template>
+
+    <template v-slot:footer>
+      <section class="infos">
+        <p>
+          <span class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}<br/></span>
+          <span class="structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></span>
+          <span class="lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></span>
+          <span class="created"><span>démarrée le</span> {{ created }}<br/></span>
+          <span class="changed"><span>mise à jour le</span> {{ changed }}</span>
+        </p>
+      </section>
+        
+      <!-- <section class="historique">
+        <label>Historique</label>
+        <vue-slider
+          ref="slider"
+          v-model="history_value"
+          v-bind="history_slider_ops"
+        ></vue-slider>
+      </section> -->
+    </template>
+  </CartoucheLayout> 
+  
 </template>

src/components/layout/CartoucheLayout.vue

@@ -0,0 +1,67 @@
+<script>
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiHeadphones } from '@mdi/js';
+
+export default {
+  props: ['id', 'eid', 'entite'],
+  data(){
+    return {
+      headphones_path: mdiHeadphones
+    }
+  },
+  computed: {
+    ...mapState(ConcernementsStore,['opened_concernement']),
+  },
+  methods: {
+    ...mapActions(ConcernementsStore,['setMapMode'])
+  },
+  components: {
+    SvgIcon
+  }
+}
+</script>
+
+<template>
+  <header>
+    <slot name="header"></slot>
+    <div class="concernement-cartouche-icons">
+        <h2>{{ opened_concernement.title }}</h2>
+        <nav class="icons">
+          <ul>
+            <li v-if="opened_concernement.has_recit" >
+              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+            </li>
+            <li>
+              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_puissancedagir" >
+              <a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_proximite" >
+              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_superposition" >
+              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_agissantes" >
+              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
+            </li>
+            <li v-if="opened_concernement.has_doleance" >
+              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
+            </li>
+          </ul>
+        </nav>
+
+      </div>
+  </header>
+  <main>
+    <slot name="main"></slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</template>