cards added xwith time

proj/map/asset/css/style.css

@@ -4,7 +4,8 @@
 @import url("./font.css");
 
 header {
-
+  height: 100px;
+  width: 100vw;
 }
 
 body {
@@ -13,15 +14,28 @@ body {
 }
 
 section#logo {
-  position: fixed;
+  position: relative;
   left: 5px;
   top: 5px;
 }
 
 section#lang {
-  position: fixed;
+  position: relative;
-  right: 5px;
+  text-align: right;
-  top: 5px;
+  margin-top: -12px;
+}
+
+section#lang span.marker {
+  position: absolute;
+  height: 5px;
+  left: 0;
+  width: 0;
+  bottom: -8px;
+  transition: 0.5s;
+}
+
+section#lang span {
+  margin-right: 10px;
 }
 
 section#map-container {
@@ -40,6 +54,7 @@ main {
   top: 340px;
   bottom: 0px;
   width: 100vw;
+  overflow-x: hidden;
 }
 
 div#list {
@@ -49,20 +64,13 @@ div#list {
   padding-left: 10px;
   padding-top: 10px
   scrollbar-width: none;
+  overflow-x: hidden;
 }
 
 div#list::-webkit-scrollbar {
   display: none;
 }
 
-.marker {
-  position: absolute;
-  height: 5px;
-  left: 0;
-  width: 0;
-  bottom: -10px;
-  transition: 0.5s;
-}
 
 .listchild {
   height: 0%;
@@ -156,3 +164,73 @@ section.lastlistitem aside span.info {
   background-color: var(--b9h-color-fg);
   color: var(--b9h-color-bg);
 }
+
+div.sep {
+  background-color: var(--b9h-color-fg);
+  height:5px;
+  width: 100vw;
+  margin-left: -8px;
+  overflow-x: hidden;
+  
+  content: "jsdflkj" 
+}
+
+section.card {
+  position: fixed;
+  top: 110vh;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: var(--b9h-color-bg);
+  z-index: 1000;
+  transition: top 0.5s;
+}
+
+section.card nav {
+  margin-top: 60px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+section.card nav span {
+  font-size: 30px;
+}
+
+section.card span.byl-icon-cross {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  font-size: 1.3rem;
+}
+
+section.tabroll {
+  margin-top: 20px;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
+
+section.tabroll {
+  transform: translateX(-0vw);
+  transition: transform 0.5s;
+}
+
+section.tabroll section.singletab {
+  width: 100vw;
+  height: 100%;
+}
+
+nav.cardnav {
+  position: relative;
+}
+
+nav.cardnav span.marker {
+  position: absolute;
+  height: 5px;
+  left: 0px;
+  width: 0px;
+  background-color: var(--b9h-color-accent);
+  bottom: -20px;
+  transition: 0.5s;
+}

proj/map/asset/js/main.js

@@ -2,12 +2,120 @@
 //const dburl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
 const dburl = "https://ed.brz9.dev/proj/map/asset/json/endpoint/"
 
+Vue.component('Time', {
+  template : `
+  <div>
+<p>
+  <span class="b9h-lang-fr">{{ this.days.mon.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.mon.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.mon.it }}</span>
+  <span>{{ this.obj.mon }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.tue.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.tue.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.tue.it }}</span>
+  <span>{{ this.obj.tue }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.wed.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.wed.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.wed.it }}</span>
+  <span>{{ this.obj.wed }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.thu.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.thu.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.thu.it }}</span>
+  <span>{{ this.obj.thu }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.fri.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.fri.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.fri.it }}</span>
+  <span>{{ this.obj.fri }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.sat.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.sat.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.sat.it }}</span>
+  <span>{{ this.obj.sat }}</span>
+</p>
+
+<p>
+  <span class="b9h-lang-fr">{{ this.days.sun.fr }}</span>
+  <span class="b9h-lang-en">{{ this.days.sun.en }}</span>
+  <span class="b9h-lang-it">{{ this.days.sun.it }}</span>
+  <span>{{ this.obj.sun }}</span>
+</p>
+
+  </div>
+  `,
+  props : {
+    obj : Object
+  },
+  data () {
+    return {
+      message : "hello from time",
+      days : {
+        mon : {
+          fr : "Lundi",
+          en : "Monday",
+          it : "Lunedì"
+        },
+        tue : {
+          fr : "Mardi",
+          en : "Tuesday",
+          it : "Martedì"
+        },
+        wed : {
+          fr : "Mercredi",
+          en : "Wednesday",
+          it : "Mercoledì"
+        },
+        thu : {
+          fr : "Jeudi",
+          en : "Thursday",
+          it : "Giovedì"
+        },
+        fri : {
+          fr : "Vendredi",
+          en : "Friday",
+          it : "Venerdì"
+        },
+        sat : {
+          fr : "Samedi",
+          en : "Saturday",
+          it : "Sabato"
+        },
+        sun : {
+          fr : "Dimanche",
+          en : "Sunday",
+          it : "Domenica"
+        },
+      }
+    }
+  },
+  methods : {
+    getTime () {
+      tabtype
+    }
+
+  }
+});
+
+
 Vue.component('Accordeon', {
   template : `
   <section v-bind:id="this.list.id">
   <nav v-if="this.list.type === 'list'">
 
-    <a v-bind:href="this.href">
+    <a>
       <span
       v-on:click="toggleActive()"
       class="listname"
@@ -34,7 +142,52 @@ Vue.component('Accordeon', {
         <p class="b9h-lang-en">{{ this.list.txtEN }}</p>
         <p class="b9h-lang-it">{{ this.list.txtIT }}</p>
 
-        <span class="info">i</span>
+        <section
+          v-if="'card' in this.list"
+          class="card"
+          v-bind:id="this.cardid"
+          v-bind:style="{ top: this.cardTop }">
+        <span v-on:click="hideCard()"class="byl-icon-cross"></span>
+        <div>
+
+        <nav class="cardnav">
+          <span class="marker"
+            v-bind:style="{
+              left : this.markerL,
+              width : this.markerW
+              }"
+          ></span>
+          <span
+            v-for="i in this.list.card.tabs"
+            v-on:click="setTab(getIndex(i))"
+            v-bind:id="getMarkerId(i)"
+            v-bind:class="getTabLogo(i)"
+            ref="tabnavi"
+            >
+          </span>
+        </nav>
+        <section class="tabroll"
+          v-bind:style="{
+            width : this.tabrollw,
+            transform : this.tabrollTransX
+            }"
+          >
+          <section class="singletab"
+            v-for="i in this.list.card.tabs">
+            <p>{{ i.tabtype }}</p>
+            <Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time>
+          </section>
+
+
+
+        </section>
+        </div>
+        </section>
+
+        <span
+          v-if="'card' in this.list"
+          v-on:click="showCard()"
+          class="info">i</span>
 
       </aside>
     </section>
@@ -45,26 +198,110 @@ Vue.component('Accordeon', {
   },
   data () {
     return {
-      isActive : false
+      isActive : false,
+      displayCard : "block",
+      cardTop : "110vh",
+      tabrollxoff : 0,
+      tabind : 0,
+      markerL : 0,
+      markerW : 0,
     }
   },
   computed: {
     href: function () {
       return "#" + this.list.id;
+    },
+    cardid: function () {
+      return "card" + this.list.id;
+    },
+    tabcount: function () {
+      if ('card' in this.list){
+        console.log(this.list + " has a card")
+        var arr = Object.entries(this.list.card.tabs);
+        return arr.length
+      } else {
+        return 0;
       }
     },
+    tabrollw: function () {
+      return this.tabcount + "00vw";
+    },
+    tabrollTransX: function () {
+      return "translateX(-" + this.tabrollxoff + "00vw)";
+    },
+    markerLL : function () {
+      if ('card' in this.list){
+try {
+        return this.$refs.tabnavi[this.tabind].getBoundingClientRect().left + "px"
+}catch(err) {}
+      } else {
+        return 0;
+      }
+    },
+    markerWW : function () {
+      if ('card' in this.list){
+        try {
+          target = document.querySelector("#" + this.cardid +"0");
+          marker.style.left = target.offsetLeft + "px";
+          return target.offsetWidth + "px";
+          //return this.$refs.tabnavi[this.tabind].getBoundingClientRect().width + "px"
+        }catch(err) {
+          console.log(err.message)
+        }
+      } else {
+        return 0;
+      }
+    },
+  },
   methods : {
+    getMarkerId(i) {
+      return this.cardid + this.getIndex(i).toString()
+    },
+    getIndex(obj) {
+      var arr = Object.entries(this.list.card.tabs);
+      let ind = arr.findIndex(e => e[0] === obj.tabtype);
+      return ind
+    },
+    setTab(ind) {
+      this.tabrollxoff = ind;
+      this.tabind = ind
+      t = document.getElementById(this.cardid + ind);
+      this.markerL = t.offsetLeft + "px"
+      this.markerW = t.offsetWidth + "px"
+      console.log(this.markerL)
+    },
+    getTabLogo(obj) {
+      switch(obj.tabtype) {
+        case "menu":
+          return "byl-icon-restaurant"
+          // code block
+          break;
+        case "time":
+          return "byl-icon-clock"
+          // code block
+          break;
+        default:
+          // code block
+      }
+    },
+    showCard() {
+      this.displayCard = "block";
+      this.setTab(0)
+      console.log("showing card")
+      this.cardTop = "0vh"
+      this.setTab(0)
+      this.setTab(0)
+      this.setTab(0)
+    },
+    hideCard() {
+      this.cardTop = "110vh"
+    },
     donothing () {
 
     },
     toggleActive () {
       this.isActive = !this.isActive
-      document.getElementById(this.list.id).scrollIntoView(
+      document.getElementById(this.list.id).scrollIntoView();
-        {
-          behavior: "smooth",
-          block: "end",
-          inline: "nearest"}
-      );
     }
   }
 })
@@ -85,9 +322,22 @@ let vm = new Vue({
   data: {
     currentLang: 'fr',
     fdata: {},
-    db : {},
+    db : {
-    db2 : {
+      parking : {
-      restaurants : {
+        id : "parking",
+        type : "list",
+        nameFR : "Parking",
+        nameEN : "Car park",
+        nameIT : "Parcheggio",
+        sub : {
+          lamy : {
+            id: "lamy",
+            type: "item",
+            name: "Parking Lamy"
+          }
+        }
+      },
+      resto : {
         id : "resto",
         type : "list",
         nameFR : "Restaurant",
@@ -112,6 +362,7 @@ let vm = new Vue({
                 card : {
                   tabs : {
                     menu : {
+                      tabtype : "menu",
                       priceRange : "18-32€",
                       dishes : {
                         divola : {
@@ -123,9 +374,14 @@ let vm = new Vue({
                       }
                     },
                     time : {
-                      monAM : "11h30-14h00",
+                      tabtype : "time",
-                      monPM : "18h30-22h00",
+                      mon : "11h30-14h00  18h30-22h00",
-
+                      tue : "11h30-14h00  18h30-22h00",
+                      wed : "11h30-14h00  18h30-22h00",
+                      thu : "11h30-14h00  18h30-22h00",
+                      fri : "11h30-14h00  18h30-22h00",
+                      sat : "11h30-14h00  18h30-22h00",
+                      sun : "",
                     }
                   }
                 }
@@ -185,11 +441,6 @@ let vm = new Vue({
         langElms[i].style.display = 'revert';
       }
     },
-    async getJDB(){
-      const res = await fetch(dburl);
-      const data = await res.json();
-      this.db = data;
-    },
     setlang: function (lang) {
       target = document.querySelector("#"+"tab-"+lang);
       marker = document.querySelector("#lang-marker");
@@ -199,13 +450,6 @@ let vm = new Vue({
     },
   },
   created: function(){
-    console.log("about to call getJDB")
-//    this.getJDB();
-    fetch(dburl)
-      .then(res => res.json())
-      .then(data => this.db = data)
-      .catch(err => console.log(err.message))
-    console.log("after getJDB call")
     this.setlang('fr');
   },
   mounted: function() {
@@ -213,9 +457,15 @@ let vm = new Vue({
     this.setlang('fr');
     console.log("mounted");
     this.setlang('fr');
+    this.setlang('fr');
+    this.setlang('fr');
+    this.setlang('fr');
   },
   updated: function() {
     this.setlang('fr');
+    this.setlang('fr');
+    this.setlang('fr');
+    this.setlang('fr');
   }
 
 })

proj/map/index.html

@@ -28,7 +28,9 @@
 <main>
 <div id="list">
 
-  <Accordeon v-bind:list="db.db.restaurants"></Accordeon>
+  <Accordeon v-bind:list="db.parking"></Accordeon>
+  <div class="sep"></div>
+  <Accordeon v-bind:list="db.resto"></Accordeon>
 
 </div>
 
@@ -40,6 +42,9 @@
 
 
 </body>
+
+
+
 <script src="asset/js/vue.min.js"></script>
 <script src="asset/leaflet/leaflet.js"></script>