better mode nav, from concernement & main menu

README.md

@@ -4,7 +4,7 @@
 app (VueJs)
 
 
-part of https://figureslibres.io/gogs/bachir/docker-enfrancais
+part of https://figureslibres.io/gogs/bachir/docker-ouatterrir
 
 .....
 

src/assets/main.scss

@@ -76,6 +76,11 @@ body{
           @include btn();
           display: block;
           line-height: 2.1;
+          &.disabled{
+            pointer-events: none;
+            opacity: 0.4;
+            cursor: default;
+          }
         }
       }
     }
@@ -108,22 +113,59 @@ body{
 
       >header{
         display: flex;
-        height: 8rem;
+        // 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;
-        }
-        h2{
-          font-weight: 400;
-          font-size: 1.512em;
+        div.pre-header{
+          min-height: 10em;
+          display: flex;
+          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.323em;
+          }
+          span.menacemaintient{
+            display: block;
+            font-weight: 100;
+            font-size: 0.882em;
+            padding: 1em 0 1em 0;
+          }
         }
-        h3{
-          font-weight: 400;
-          font-size: 1.2em;
+        div.concernement-cartouche{
+          h2{
+            font-weight: 400;
+            font-size: 1.323em;
+            // &.faded{
+            //   font-weight: 100;
+            // }
+          }
+          nav.icons{
+            ul{
+              display: flex;
+              flex-direction: row;
+              li{
+                margin: 0.4em 0.6em 0 0;
+                >svg{
+                  display: inline-block;
+                  $d: 35px; 
+                  width:$d; height:$d;
+                  border-radius: $d * 0.5;
+                  background-color: #fff;
+                  padding: 2px;
+                  box-sizing: border-box;
+                  color: #333;
+                  // font-size: 2em;
+                }
+              }
+            }
+          }
         }
         
       }

src/components/MapConcernements.vue

@@ -55,7 +55,7 @@ export default {
     ...mapState(ConcernementsStore,['map_mode']),
     ...mapState(ConcernementsStore,['concernements']),
     ...mapState(ConcernementsStore,['concernementsByID']),
-    // ...mapState(ConcernementsStore,['opened_concernement']),
+    ...mapState(ConcernementsStore,['opened_concernement']),
     ...mapState(CommonStore,['hover_elmt']),
     ...mapState(CommonStore,['paper_symbol_definitions'])
   },
@@ -919,22 +919,51 @@ export default {
   <nav id="map-nav">
     <ul>
       <li>
-        <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span>  terrain de vie</a>
+        <a 
+          href="#terraindevie" @click="setMapMode('terraindevie')"
+        >
+          <span class="icon terraindevie"></span>  terrain de vie
+        </a>
       </li>
       <li>
-        <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span>  proximité</a>
+        <a 
+          href="#proximite" @click="setMapMode('proximite')"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
+        >
+          <span class="icon proximite"></span>  proximité
+        </a>
       </li>
       <li>
-        <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span>  superposition</a>
+        <a 
+          href="#superposition" @click="setMapMode('superposition')"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
+        >
+          <span class="icon superposition"></span>  superposition
+        </a>
       </li>
       <li>
-        <a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span>  puissance d'agir</a>
+        <a 
+          href="#puissancedagir" @click="setMapMode('puissancedagir')"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
+        >
+          <span class="icon puissancedagir"></span>  puissance d'agir
+        </a>
       </li>
       <li>
-        <a href="#action" @click="setMapMode('action')"><span class="icon action"></span>  action</a>
+        <a 
+          href="#action" @click="setMapMode('action')"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
+        >
+          <span class="icon action"></span>  action
+        </a>
       </li>
       <li>
-        <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span>  cercle politique</a>
+        <a 
+          href="#doleancer" @click="setMapMode('doleancer')"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
+        >
+          <span class="icon doleancer"></span>  cercle politique
+        </a>
       </li>
     </ul>
   </nav>

src/views/Concernement.vue

@@ -10,13 +10,17 @@ import gql from 'graphql-tag'
 import GQL from '@api/graphql-axios'
 import EntiteFields from '@api/gql/entite.fragment.gql'
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiHeadphones } from '@mdi/js';
+
 
 export default {
   props: ['id', 'eid'],
   data(){
     return {
       entite: null,
-      opened_besoin_id: null
+      opened_besoin_id: null,
+      headphones_path: mdiHeadphones
     }
   },
   computed: {
@@ -32,7 +36,10 @@ export default {
     ...mapState(ConcernementsStore,['p_reception_et_traitement']),
     ...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
     ...mapState(ConcernementsStore,['p_reception_application_decision']),
-    ...mapState(CommonStore,['hover_elmt'])
+    ...mapState(CommonStore,['hover_elmt']),
+    display_concernement(){
+      return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir'&& this.map_mode !== 'doleancer';
+    }
   },
   created () {
     console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
@@ -70,6 +77,7 @@ export default {
   methods: {
     ...mapActions(ConcernementsStore,['openCloseConcernements']),
     ...mapActions(ConcernementsStore,['setOpenedEntityId']),
+    ...mapActions(ConcernementsStore,['setMapMode']),
     openEntity(){
       this.setOpenedEntityId(parseInt(this.eid))
       this.loadEntite()
@@ -101,6 +109,7 @@ export default {
     }
   },
   components: {
+    SvgIcon
   }
 }
 
@@ -109,15 +118,47 @@ export default {
 <template>
   <section v-if="opened_concernement" class="concernement">
     <header v-if="concernements_loaded">
-      <label 
-        v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'&& map_mode !== 'doleancer'"
+      <div class="pre-header">
+        <!-- concernement -->
+        <label 
+        v-if="display_concernement"
         >
           {{ ct_concernement.title.description }}
         </label>
-      <h3 v-if="entite">{{ entite.title }}</h3>
-      <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0">menace</span>
-      <span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0">maintient</span>
-      <h2>{{ opened_concernement.title }}</h2>
+        <!-- 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>
+      <div class="concernement-cartouche">
+        <h2 :class='{ faded: !display_concernement}'>{{ 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>
     <!-- concernement -->
     <section