693 lines
17 KiB
JavaScript
693 lines
17 KiB
JavaScript
Vue.component('Prototab',{
|
|
template : `
|
|
<div class="tabprixcontent">
|
|
|
|
|
|
</div>
|
|
`,
|
|
props : {
|
|
obj : Object
|
|
},
|
|
data () {
|
|
return {
|
|
siteoff : {
|
|
fr : "Site officiel",
|
|
en : "Official website",
|
|
it : "Sito ufficiale",
|
|
},
|
|
}
|
|
},
|
|
methods : {
|
|
capitalize(s){
|
|
return s.charAt(0).toUpperCase() + s.slice(1)
|
|
},
|
|
}
|
|
})
|
|
|
|
Vue.component('Prix',{
|
|
template : `
|
|
<div class="tabprixcontent">
|
|
<section class="prixtexttop" v-if="this.obj.hasOwnProperty('txt')">
|
|
<p class="b9h-lang-fr">{{ this.obj.txt.fr }}</p>
|
|
<p class="b9h-lang-en">{{ this.obj.txt.en }}</p>
|
|
<p class="b9h-lang-it">{{ this.obj.txt.it }}</p>
|
|
</section>
|
|
|
|
<section class="pricelist">
|
|
<p v-for="l in this.obj.list">
|
|
<span class="pricename">
|
|
<span class="b9h-lang-fr">{{ l.nameFR }}</span>
|
|
<span class="b9h-lang-en">{{ l.nameEN }}</span>
|
|
<span class="b9h-lang-it">{{ l.nameIT }}</span>
|
|
</span>
|
|
<span class="price">
|
|
<span class="b9h-lang-fr">{{ checkPrice(l.price,free.fr) }}</span>
|
|
<span class="b9h-lang-en">{{ checkPrice(l.price,free.en) }}</span>
|
|
<span class="b9h-lang-it">{{ checkPrice(l.price,free.it) }}</span>
|
|
</span>
|
|
</p>
|
|
</section>
|
|
<section class="prixindicatif">
|
|
<p class="b9h-lang-fr">{{ indicatif.fr }}</p>
|
|
<p class="b9h-lang-en">{{ indicatif.en }}</p>
|
|
<p class="b9h-lang-it">{{ indicatif.it }}</p>
|
|
</section>
|
|
|
|
</div>
|
|
`,
|
|
props : {
|
|
obj : Object
|
|
},
|
|
data () {
|
|
return {
|
|
indicatif : {
|
|
fr : "Prix fournis à titre indicatif.",
|
|
en : "Prices provided as an indication.",
|
|
it : "Prezzi puramente indicativi.",
|
|
},
|
|
free : {
|
|
fr : "Gratuit",
|
|
en : "Free",
|
|
it : "Gratuito",
|
|
}
|
|
}
|
|
},
|
|
methods : {
|
|
checkPrice(p,f){
|
|
if (p == "") {
|
|
return f
|
|
} else {
|
|
return p
|
|
}
|
|
},
|
|
|
|
}
|
|
})
|
|
|
|
Vue.component('Info',{
|
|
template : `
|
|
<div class="tabinfocontent">
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('site')">
|
|
<a v-bind:href="this.obj.site" target="_blank">
|
|
<span class="byl-icon-link infotags"></span>
|
|
<span class="b9h-lang-fr">{{ siteoff.fr }}</span>
|
|
<span class="b9h-lang-en">{{ siteoff.en }}</span>
|
|
<span class="b9h-lang-it">{{ siteoff.it }}</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('tel')">
|
|
<a v-bind:href="this.telhref">
|
|
<span class="byl-icon-call infotags"></span>
|
|
<span>{{ this.obj.tel }}</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('email')">
|
|
<a v-bind:href="this.mailhref">
|
|
<span class="byl-icon-mail_outline infotags"></span>
|
|
<span>{{ this.obj.email }}</span>
|
|
</a>
|
|
</section>
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('address')">
|
|
<span class="byl-icon-location_on infotags"></span>
|
|
<span>{{ this.obj.address }}</span>
|
|
</section>
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('handi')">
|
|
<span class="byl-icon-accessible infotags"></span>
|
|
<span class="b9h-lang-fr">{{ handi.fr }}</span>
|
|
<span class="b9h-lang-en">{{ handi.en }}</span>
|
|
<span class="b9h-lang-it">{{ handi.it }}</span>
|
|
</section>
|
|
|
|
<section class="infoline" v-if="this.obj.hasOwnProperty('hautmax')">
|
|
<span class="byl-icon-publish infotags"></span>
|
|
<span class="b9h-lang-fr">
|
|
{{ hautmax.fr }} {{ this.obj.hautmax}}
|
|
</span>
|
|
<span class="b9h-lang-en">
|
|
{{ hautmax.en }} {{ this.obj.hautmax}}
|
|
</span>
|
|
<span class="b9h-lang-it">
|
|
{{ hautmax.it }} {{ this.obj.hautmax}}
|
|
</span>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
`,
|
|
props : {
|
|
obj : Object
|
|
},
|
|
computed : {
|
|
telhref: function () {
|
|
if (this.obj.hasOwnProperty('tel')) {
|
|
return "tel:" + this.obj.tel
|
|
}
|
|
},
|
|
mailhref: function () {
|
|
if (this.obj.hasOwnProperty('email')) {
|
|
return "mailto:" + this.obj.email
|
|
}
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
siteoff : {
|
|
fr : "Site officiel",
|
|
en : "Official website",
|
|
it : "Sito ufficiale",
|
|
},
|
|
handi : {
|
|
fr : "Accessible en fauteuil roulant",
|
|
en : "Wheelchair accessible",
|
|
it : "Accessibile con sedia a rotelle",
|
|
},
|
|
hautmax: {
|
|
fr : "Hauteur maximum: ",
|
|
en : "Maximum height: ",
|
|
it : "Altezza massima: ",
|
|
}
|
|
}
|
|
},
|
|
methods : {
|
|
capitalize(s){
|
|
return s.charAt(0).toUpperCase() + s.slice(1)
|
|
},
|
|
}
|
|
//byl-icon-wifi
|
|
//byl-icon-location_on
|
|
//byl-icon-accessible
|
|
})
|
|
|
|
Vue.component('Menu',{
|
|
template: `
|
|
<section class="restomenu">
|
|
<section v-if="this.obj.priceRange" class="top">
|
|
<p class="b9h-lang-fr range">{{ fourchette.fr }}</p>
|
|
<p class="b9h-lang-en range">{{ fourchette.en }}</p>
|
|
<p class="b9h-lang-it range">{{ fourchette.it }}</p>
|
|
<p class="price"> {{ this.obj.priceRange }}</p>
|
|
<p class="b9h-lang-fr drinks">{{ horsboissons.fr }}</p>
|
|
<p class="b9h-lang-en drinks">{{ horsboissons.en }}</p>
|
|
<p class="b9h-lang-it drinks">{{ horsboissons.it }}</p>
|
|
</section>
|
|
|
|
<section v-for="s in this.obj.sections">
|
|
<h2 class="b9h-lang-fr"> {{ s.nameFR }}</h2>
|
|
<h2 class="b9h-lang-en"> {{ s.nameEN }}</h2>
|
|
<h2 class="b9h-lang-it"> {{ s.nameIT }}</h2>
|
|
|
|
<div class="dish" v-for="d in s.list">
|
|
<h3 v-if="d.name !== 'blank'">
|
|
{{ d.name }}
|
|
<span
|
|
v-if="d.hasOwnProperty('vege')"
|
|
class="byl-icon-leaf vege">
|
|
</span>
|
|
</h3>
|
|
<ul v-if="d.name !== 'blank'">
|
|
<p class="b9h-lang-fr"> {{ l2s(ings2ls(d.ing,"fr"), "fr") }}</p>
|
|
<p class="b9h-lang-en"> {{ l2s(ings2ls(d.ing,"en"), "en") }}</p>
|
|
<p class="b9h-lang-it"> {{ l2s(ings2ls(d.ing,"it"), "it") }}</p>
|
|
</ul>
|
|
<ul v-else>
|
|
<h3 class="b9h-lang-fr">
|
|
{{ l2s(ings2ls(d.ing,"fr"), "fr") }}
|
|
<span
|
|
v-if="d.hasOwnProperty('vege')"
|
|
class="byl-icon-leaf vege">
|
|
</span>
|
|
</h3>
|
|
<h3 class="b9h-lang-en">
|
|
{{ l2s(ings2ls(d.ing,"en"), "en") }}
|
|
<span
|
|
v-if="d.hasOwnProperty('vege')"
|
|
class="byl-icon-leaf vege">
|
|
</span>
|
|
</h3>
|
|
<h3 class="b9h-lang-it">
|
|
{{ l2s(ings2ls(d.ing,"it"), "it") }}
|
|
<span
|
|
v-if="d.hasOwnProperty('vege')"
|
|
class="byl-icon-leaf vege">
|
|
</span>
|
|
</h3>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="menuindicatif">
|
|
<p class="b9h-lang-fr"> {{ indicatif.fr }}</p>
|
|
<p class="b9h-lang-en"> {{ indicatif.en }}</p>
|
|
<p class="b9h-lang-it"> {{ indicatif.it }}</p>
|
|
</section>
|
|
</br>
|
|
</br>
|
|
</br>
|
|
</section>
|
|
`,
|
|
props : {
|
|
obj : Object
|
|
},
|
|
data () {
|
|
return {
|
|
message : "hello from menu",
|
|
et : {
|
|
fr : " et ",
|
|
en : " and ",
|
|
it : " e ",
|
|
},
|
|
fourchette : {
|
|
fr : "Fourchette de prix par personne :",
|
|
en : "Price range per person:",
|
|
it : "Fascia di prezzo per persona :",
|
|
},
|
|
horsboissons : {
|
|
fr : "(hors boissons)",
|
|
en : "(excluding drinks)",
|
|
it : "(bevande escluse)",
|
|
},
|
|
indicatif : {
|
|
fr : "Menu fournis à titre indicatif, soumis aux disponibilités",
|
|
en : "Menu provided as an indication, subject to availability",
|
|
it : "Menu fornito a titolo informativo, soggetto a disponibilità",
|
|
}
|
|
}
|
|
},
|
|
methods : {
|
|
capitalize(s){
|
|
return s.charAt(0).toUpperCase() + s.slice(1)
|
|
},
|
|
l2s(l, lang) {
|
|
let r = ""
|
|
let llength = l.length - 1
|
|
for (i in l){
|
|
if (parseInt(i) === 0){
|
|
r = this.capitalize(l[i])
|
|
} else if (parseInt(i) < parseInt(llength)) {
|
|
r = r + ", " + l[i]
|
|
} else {
|
|
r = r + this.et[lang] + l[i]
|
|
}
|
|
}
|
|
return r
|
|
},
|
|
ings2ls(ings, lang){
|
|
let l = []
|
|
for (i in ings) {
|
|
l.push(ings[i][lang])
|
|
}
|
|
return l
|
|
}
|
|
}
|
|
})
|
|
|
|
Vue.component('Time', {
|
|
template : `
|
|
<div class="timetable">
|
|
<p v-for="(d, i) in this.obj.list">
|
|
<span class="b9h-lang-fr">{{ days[i].fr }}</span>
|
|
<span class="b9h-lang-en">{{ days[i].en }}</span>
|
|
<span class="b9h-lang-it">{{ days[i].it }}</span>
|
|
<span v-if="d != ''" class="hour">{{ d }}</span>
|
|
<span v-if="d ==''" class="hour b9h-lang-fr">
|
|
{{ closed.fr }}
|
|
</span>
|
|
<span v-if="d ==''" class="hour b9h-lang-en">
|
|
{{ closed.en }}
|
|
</span>
|
|
<span v-if="d ==''" class="hour b9h-lang-it">
|
|
{{ closed.it }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
`,
|
|
props : {
|
|
obj : Object
|
|
},
|
|
data () {
|
|
return {
|
|
message : "hello from time",
|
|
closed : {
|
|
fr : "Fermé",
|
|
en : "Closed",
|
|
it : "Chiuso",
|
|
},
|
|
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 : {
|
|
checkTime (d) {
|
|
if (d != "" ){
|
|
return d
|
|
} else {
|
|
return this.closed
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
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: this.list.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-plus listicon"></span>
|
|
|
|
</span>
|
|
</a>
|
|
<section class="listchild" :class="{ active: this.list.isActive }">
|
|
<nav class="restotagcloud" v-if="this.list.id == 'resto'">
|
|
<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>
|
|
</section>
|
|
</nav>
|
|
<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>
|
|
</aside>
|
|
<aside class="txt">
|
|
<h3 v-on:click="setMap()">{{ this.list.name }}</h3>
|
|
<p class="b9h-lang-fr" v-on:click="setMap()">{{ this.list.txtFR }}</p>
|
|
<p class="b9h-lang-en" v-on:click="setMap()">{{ this.list.txtEN }}</p>
|
|
<p class="b9h-lang-it" v-on:click="setMap()">{{ 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>
|
|
|
|
<h3 class="cardtitle">{{ this.list.name }}</h3>
|
|
|
|
<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">
|
|
<Time v-if="i.tabtype === 'time'" v-bind:obj="i"></Time>
|
|
<Menu v-if="i.tabtype === 'menu'" v-bind:obj="i"></Menu>
|
|
<Info v-if="i.tabtype === 'info'" v-bind:obj="i"></Info>
|
|
<Prix v-if="i.tabtype === 'prix'" v-bind:obj="i"></Prix>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<span
|
|
v-if="'card' in this.list"
|
|
v-on:click="showCard()"
|
|
class="byl-icon-info info"></span>
|
|
|
|
</aside>
|
|
</section>
|
|
</section>
|
|
`,
|
|
props : {
|
|
list : Object,
|
|
taglist : Object
|
|
},
|
|
data () {
|
|
return {
|
|
tl : this.taglist,
|
|
isActive : false,
|
|
displayCard : "block",
|
|
cardTop : "110vh",
|
|
tabrollxoff : 0,
|
|
tabind : 0,
|
|
markerL : 0,
|
|
markerW : 0,
|
|
}
|
|
},
|
|
computed: {
|
|
xy: function () {
|
|
if ('xy' in this.list) {
|
|
return this.list.xy
|
|
} else {
|
|
return [0,0]
|
|
}
|
|
},
|
|
dirxy: function () {
|
|
if ('dirxy' in this.list) {
|
|
return this.list.dirxy
|
|
} else {
|
|
return [0,0]
|
|
}
|
|
},
|
|
dirzl: function () {
|
|
if ('dirzl' in this.list) {
|
|
return this.list.dirzl
|
|
} else {
|
|
return 1
|
|
}
|
|
},
|
|
href: function () {
|
|
return "#" + this.list.id;
|
|
},
|
|
cardid: function () {
|
|
return "card" + this.list.id;
|
|
},
|
|
tabcount: function () {
|
|
if ('card' in this.list){
|
|
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 : {
|
|
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()
|
|
},
|
|
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"
|
|
},
|
|
getTabLogo(obj) {
|
|
switch(obj.tabtype) {
|
|
case "menu":
|
|
return "byl-icon-restaurant"
|
|
break;
|
|
case "time":
|
|
return "byl-icon-clock"
|
|
break;
|
|
case "info":
|
|
return "byl-icon-info"
|
|
break;
|
|
case "prix":
|
|
return "byl-icon-euro_symbol"
|
|
break;
|
|
default:
|
|
return ""
|
|
}
|
|
},
|
|
showCard() {
|
|
this.displayCard = "block";
|
|
this.setTab(0)
|
|
this.cardTop = "0vh"
|
|
this.setTab(0)
|
|
this.setTab(0)
|
|
this.setMap()
|
|
this.setTab(0)
|
|
},
|
|
hideCard() {
|
|
this.cardTop = "110vh"
|
|
},
|
|
donothing () {
|
|
|
|
},
|
|
toggleActive () {
|
|
this.list.isActive = !this.list.isActive
|
|
document.getElementById(this.list.id).scrollIntoView(true);
|
|
},
|
|
setMap () {
|
|
map.setView(this.dirxy, this.dirzl)
|
|
this.list.marker.openPopup()
|
|
}
|
|
},
|
|
})
|
|
|
|
let vm = new Vue({
|
|
el: '#root',
|
|
data : jdb.data,
|
|
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() {
|
|
this.setlang('fr');
|
|
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');
|
|
}
|
|
|
|
})
|
|
|