we can now zoom in the opened terrain de vie

src/components/contents/TerrainDeVie.vue

@@ -29,6 +29,8 @@ export default {
       entite: null,
       history_value: 0,
       history_slider_ops: null,
+      details_value: 0,
+      details_slider_ops: null,
       infos_opened: false,
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
@@ -103,6 +105,16 @@ export default {
       this.history_slider_ops = null;
     }
 
+    // details
+    this.details_slider_ops = {
+      min: 1,
+      max: 4,
+      interval: 0.05,
+      'hide-label': true,
+      tooltip: 'none',
+      dotSize:10,
+    } 
+
   },
   // mounted(){
   //   console.log('terrain de vie mounted', this);
@@ -118,6 +130,13 @@ export default {
       },
       deep: true
     },
+    details_value: {
+      handler (n, o) {
+        // console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
+        this.setDetailsZoomValue(n);
+      },
+      deep: true
+    },
     cid: {
       handler (n,o) {
         console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
@@ -140,7 +159,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['setActiveRevision']), // 'loadConcernementsRevisions'
+    ...mapActions(ConcernementsStore, ['setActiveRevision', 'setDetailsZoomValue']), // 'loadConcernementsRevisions'
     onClickInfos(){
       this.infos_opened = !this.infos_opened;
     },
@@ -237,6 +256,15 @@ export default {
             v-bind="history_slider_ops"
           ></vue-slider>
         </section>
+        <section class="details" v-if="details_slider_ops">
+          <label>Details</label>
+          <!-- <h3>{{ details_value }}</h3> -->
+          <vue-slider
+            ref="details_slider"
+            v-model="details_value"
+            v-bind="details_slider_ops"
+          ></vue-slider>
+        </section>
       </section>
     </template>
   </CartoucheLayout>