tag system workinglsls

proj/map/asset/css/style.css

@@ -10,6 +10,7 @@ header {
 
 body {
   height: 100vh;
+  height: --webkit-fill-available;
   overflow: hidden;
 }
 
@@ -319,3 +320,24 @@ section.restomenu h2 {
 ::-webkit-scrollbar {
     display: none;
 }
+
+section#resto nav span.resto-tag {
+  margin-top: 0px;
+  margin-bottom: 20px;
+  width: auto;
+  display: inline-block;
+  cursor: pointer;
+}
+
+section#resto nav span.resto-tag h3 {
+  border: 3px;
+  border-style: solid;
+  border-width: 5px;
+  width: auto;
+  padding: 10px;
+  margin: 10px;
+}
+
+section#resto nav span.resto-tag.active h3 {
+  border-color: var(--b9h-color-accent);
+}

proj/map/asset/js/db.js

@@ -34,29 +34,7 @@ var jdb = {
         sub : {
           SanTelmo,
           Salsamenteria,
-          italiens : {
-            id: "restoital",
-            isActive: false,
-            type : "list",
-            nameFR : "Italien",
-            nameEN : "Italian",
-            nameIT : "Italiano",
-            sub : {
-              SanTelmo,
-              Salsamenteria,
-            },
-          },
-          vege : {
-            id : "restovege",
-            isActive: false,
-            type : "list",
-            nameFR : "Végétarien",
-            nameEN : "Vegan",
-            nameIT : "Vegetariano",
-            sub : {
-              Novaa,
-            }
-          }
+          Novaa,
         }
       }
     }

proj/map/asset/js/main.js

@@ -192,7 +192,15 @@ Vue.component('Accordeon', {
     </a>
     <section class="listchild" :class="{ active: this.list.isActive }">
     <nav v-if="this.list.id == 'resto'">
-      <p>Resto nav</p>
+      <span
+        v-for="t in this.tl"
+        class="resto-tag"
+        v-bind:class="{ active: t.isActive }"
+        v-on:click="toggleTag(t)">
+        <h3 class="b9h-lang-fr">{{ t.fr }}</h3>
+        <h3 class="b9h-lang-en">{{ t.en }}</h3>
+        <h3 class="b9h-lang-it">{{ t.it }}</h3>
+      </span>
     </nav>
 
       <Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
@@ -201,6 +209,7 @@ Vue.component('Accordeon', {
     <section
     v-if="this.list.type === 'item'"
     class="lastlistitem"
+    v-show="this.list.isActive"
     >
       <aside v-on:click="setMap()">
         <img v-bind:src="this.list.img"></img>
@@ -260,10 +269,12 @@ Vue.component('Accordeon', {
   </section>
   `,
   props : {
-    list : Object
+    list : Object,
+    taglist : Object
   },
   data () {
     return {
+      tl : this.taglist,
       isActive : false,
       displayCard : "block",
       cardTop : "110vh",
@@ -317,6 +328,33 @@ Vue.component('Accordeon', {
     },
   },
   methods : {
+    toggleTag(t){
+      t.isActive = !t.isActive
+      this.checkTagFunc()
+    },
+    checkTagFunc() {
+      Object.keys(resto).forEach(r => {
+
+        tagCount = 0
+
+        Object.keys(restoTagList).forEach(rtli => {
+          if (restoTagList[rtli].isActive) {
+            for (t in resto[r].tags) {
+              if (resto[r].tags[t] === restoTagList[rtli]) {
+                tagCount++
+              }
+            }
+          }
+        })
+
+        if (tagCount >= 1) {
+          resto[r].isActive = true
+        } else {
+          resto[r].isActive = false
+        }
+      })
+
+    },
     getMarkerId(i) {
       return this.cardid + this.getIndex(i).toString()
     },

proj/map/asset/js/resto.js

@@ -1,10 +1,34 @@
-
+let restoTagList = {
+  pizza : {
+    isActive: false,
+    fr: "Pizza",
+    en: "Pizza",
+    it: "Pizza",
+  },
+  vege : {
+    isActive: false,
+    fr: "Végétarien",
+    en: "Vegie",
+    it: "Vigi",
+  },
+  ital : {
+    isActive: false,
+    fr: "Italien",
+    en: "Italian",
+    it: "Italiano",
+  }
+}
 
 let SanTelmo = {
   isActive: false,
   id: "santelmo",
   type : "item",
+  cat: "resto",
   name: "San Telmo",
+  tags : [
+    restoTagList.pizza,
+    restoTagList.ital
+  ],
   xy: [-11.42,27.20],
   dirxy: [-12.98,35.95],
   dirzl: 4,
@@ -60,6 +84,9 @@ let Novaa = {
   id: "novasocialfood",
   type : "item",
   name: "Noväa social food",
+  tags : [
+    restoTagList.vege
+  ],
   xy: [-14.60,17.97],
   dirxy: [-18.48,35.68],
   dirzl: 3,
@@ -103,6 +130,9 @@ let Salsamenteria = {
   dirxy: [-19.97,-7.73],
   dirzl: 3,
   minz: 3,
+  tags : [
+    restoTagList.ital
+  ],
   type : "item",
   name: "Salsamenteria di Parma",
   img: "https://ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",

proj/map/index.html

@@ -30,7 +30,7 @@
 
   <Accordeon v-bind:list="db.parking"></Accordeon>
   <div class="sep"></div>
-  <Accordeon v-bind:list="db.resto"></Accordeon>
+  <Accordeon v-bind:list="db.resto" v-bind:taglist="restoTagList"></Accordeon>
   <div class="sep"></div>
 
 <!---