453 lines
12 KiB
JavaScript
453 lines
12 KiB
JavaScript
//const dburl = "http://localhost:3000/db"
|
|
//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 class="hour">{{ 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 class="hour">{{ 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 class="hour">{{ 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 class="hour">{{ 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 class="hour">{{ 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 class="hour">{{ 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 class="hour">{{ 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>
|
|
<span
|
|
v-on:click="toggleActive()"
|
|
class="listname"
|
|
:class="{ active: isActive }">
|
|
|
|
<h3 class="b9h-lang-fr">{{ this.list.nameFR }}</h3>
|
|
<h3 class="b9h-lang-en">{{ this.list.nameEN }}</h3>
|
|
<h3 class="b9h-lang-it">{{ this.list.nameIT }}</h3>
|
|
<span class="byl-icon-chevron-down listicon">
|
|
|
|
</span>
|
|
</a>
|
|
<section class="listchild" :class="{ active: isActive }">
|
|
<Accordeon v-for="i in this.list.sub" v-bind:list="i"></Accordeon>
|
|
</section>
|
|
</nav>
|
|
<section v-if="this.list.type === 'item'" class="lastlistitem">
|
|
<aside>
|
|
<img v-bind:src="this.list.img"></img>
|
|
</aside>
|
|
<aside class="txt">
|
|
<h3 v-on:click="setMap()" >{{ this.list.name }}</h3>
|
|
<p class="b9h-lang-fr">{{ this.list.txtFR }}</p>
|
|
<p class="b9h-lang-en">{{ this.list.txtEN }}</p>
|
|
<p class="b9h-lang-it">{{ this.list.txtIT }}</p>
|
|
|
|
<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>
|
|
</section>
|
|
`,
|
|
props : {
|
|
list : Object
|
|
},
|
|
data () {
|
|
return {
|
|
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)";
|
|
},
|
|
},
|
|
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();
|
|
},
|
|
setMap () {
|
|
map.setView([14,54],3)
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
const jsonurl = "https://ed.brz9.dev/proj/map/asset/json/db.json"
|
|
|
|
/*
|
|
let jdnb
|
|
|
|
fetch(jsonurl)
|
|
.then(res => res.json())
|
|
.then(data => jdnb = data)
|
|
*/
|
|
|
|
let vm = new Vue({
|
|
el: '#root',
|
|
data: {
|
|
currentLang: 'fr',
|
|
fdata: {},
|
|
db : {
|
|
parking : {
|
|
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",
|
|
nameEN : "Restaurant",
|
|
nameIT : "Ristoranti",
|
|
sub : {
|
|
italiens : {
|
|
id: "restoital",
|
|
type : "list",
|
|
nameFR : "Italien",
|
|
nameEN : "Italian",
|
|
nameIT : "Italiano",
|
|
sub : {
|
|
SanTelmo : {
|
|
id: "santelmo",
|
|
type : "item",
|
|
name: "San Telmo",
|
|
img: "https://ed.brz9.dev/proj/map/asset/img/santelmo.jpg",
|
|
txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
card : {
|
|
tabs : {
|
|
menu : {
|
|
tabtype : "menu",
|
|
priceRange : "18-32€",
|
|
dishes : {
|
|
divola : {
|
|
name : "Pizza Divola",
|
|
},
|
|
regina : {
|
|
name : "Pizza Regina",
|
|
}
|
|
}
|
|
},
|
|
time : {
|
|
tabtype : "time",
|
|
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 : "",
|
|
}
|
|
}
|
|
}
|
|
},
|
|
Salsamenteria : {
|
|
id: "salsamenteria",
|
|
type : "item",
|
|
name: "Salsamenteria di Parma",
|
|
img: "https://ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
|
|
txtFR: "Français Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
txtEN: "English Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
txtIT: "Italiano Adipisicing live-edge fam velit. Messenger bag poke laboris aesthetic viral do semiotics authentic est selfies.",
|
|
},
|
|
},
|
|
},
|
|
vege : {
|
|
id : "restovege",
|
|
type : "list",
|
|
nameFR : "Végétarien",
|
|
nameEN : "Vegan",
|
|
nameIT : "Vegetariano",
|
|
sub : {
|
|
SanTelmo : {
|
|
id: "santelmo",
|
|
type : "item",
|
|
name: "San Telmo",
|
|
},
|
|
Salsamenteria : {
|
|
id: "salsamenteria",
|
|
type : "item",
|
|
name: "Salsamenteria di Parma",
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
hidelang: function(lang) {
|
|
langClass = "b9h-lang-" + lang;
|
|
langElms = document.getElementsByClassName(langClass);
|
|
for (i = 0; i < langElms.length; i++) {
|
|
langElms[i].style.display = 'none';
|
|
}
|
|
},
|
|
hidelangs: function() {
|
|
this.hidelang('fr');
|
|
this.hidelang('en');
|
|
this.hidelang('it');
|
|
},
|
|
showlang: function(lang) {
|
|
this.hidelangs();
|
|
langClass = "b9h-lang-" + lang;
|
|
langElms = document.getElementsByClassName(langClass);
|
|
for (i = 0; i < langElms.length; i++) {
|
|
langElms[i].style.display = 'revert';
|
|
}
|
|
},
|
|
setlang: function (lang) {
|
|
target = document.querySelector("#"+"tab-"+lang);
|
|
marker = document.querySelector("#lang-marker");
|
|
marker.style.left = target.offsetLeft + "px";
|
|
marker.style.width = target.offsetWidth + "px";
|
|
this.showlang(lang);
|
|
},
|
|
},
|
|
created: function(){
|
|
this.setlang('fr');
|
|
},
|
|
mounted: function() {
|
|
console.log("mounting");
|
|
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');
|
|
}
|
|
|
|
})
|
|
|