time and menu improved

This commit is contained in:
ed barz 2022-05-20 20:00:03 +02:00
parent 5e8639fae4
commit e43dee3ac3
7 changed files with 350 additions and 105 deletions

View File

@ -183,6 +183,7 @@ section.card {
background-color: var(--b9h-color-bg);
z-index: 1000;
transition: top 0.5s;
height: 100vh;
}
section.card nav {
@ -217,7 +218,7 @@ section.tabroll {
section.tabroll section.singletab {
width: 100vw;
height: 100%;
height: ;
}
nav.cardnav {
@ -253,3 +254,30 @@ div.leaflet-popup-tip {
.leaflet-container a.leaflet-popup-close-button {
color: var(--b9h-color-bg);
}
div.timetable p span.hour {
float: right;
margin-right: 20px;
}
div.timetable p {
margin-left: 30px;
margin-bottom: 30px;
}
section.restomenu {
margin-top: 50px;
padding: 10px;
height: 100%;
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
section.restomenu div.dish h3 {
margin-bottom: 10px;
margin-top: 10px;
}
::-webkit-scrollbar {
display: none;
}

Binary file not shown.

View File

@ -1,3 +1,31 @@
let ingredients = {
tomate : {
fr: "tomate",
en: "tomato",
it: "pomodoro",
},
mozzarella : {
fr: "mozzarella",
en: "mozzarella",
it: "mozzarella",
},
saucissecalabraisepiquante : {
fr: "saucisse calabraise piquante",
en: "spicy sausage",
it: "sopressata calabrese piccante",
},
jambonblanc : {
fr: "jambon blanc",
en: "white ham",
it: "prosciutto cotto",
},
champignons : {
fr: "champignons",
en: "mushrooms",
it: "funghi",
}
}
let SanTelmo = {
isActive: false,
id: "santelmo",
@ -6,6 +34,79 @@ let SanTelmo = {
xy: [-11.42,27.20],
dirxy: [-12.98,35.95],
dirzl: 4,
minz: 3,
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",
ing : [
ingredients.tomate,
ingredients.mozzarella,
ingredients.saucissecalabraisepiquante
]
},
reg : {
name : "Pizza Regina nanana",
ing : [
ingredients.tomate,
ingredients.mozzarella,
ingredients.jambonblanc,
ingredients.champignons
]
},
regina : {
name : "Pizza Regina",
ing : [
ingredients.tomate,
ingredients.mozzarella,
ingredients.jambonblanc,
ingredients.champignons
]
},
regina2 : {
name : "Pizza Regina due",
ing : [
ingredients.tomate,
ingredients.mozzarella,
ingredients.jambonblanc,
ingredients.champignons
]
}
}
},
time : {
tabtype : "time",
list : {
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 : "",
}
}
}
}
}
let Novaa = {
isActive: false,
id: "novasocialfood",
type : "item",
name: "Noväa social food",
xy: [-14.60,17.97],
dirxy: [-18.48,35.68],
dirzl: 3,
minz: 3,
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.",
@ -44,6 +145,7 @@ let Salsamenteria = {
xy: [-21.96, -21.64],
dirxy: [-19.64,13.36],
dirzl: 3,
minz: 3,
type : "item",
name: "Salsamenteria di Parma",
img: "https://ed.brz9.dev/proj/map/asset/img/salsamentiera.jpg",
@ -56,6 +158,7 @@ var jdb = {
data: {
currentLang: 'fr',
db : {
ingredients : ingredients,
parking : {
id : "parking",
isActive: false,
@ -70,6 +173,7 @@ var jdb = {
xy: [-18.27,56.91],
dirxy: [-21.66,52.47],
dirzl: 5,
minz: 2,
img: "https://ed.brz9.dev/proj/map/asset/img/lamy.jpg",
type: "item",
name: "Parking Lamy",
@ -98,21 +202,13 @@ var jdb = {
},
vege : {
id : "restovege",
isActive: false,
type : "list",
nameFR : "Végétarien",
nameEN : "Vegan",
nameIT : "Vegetariano",
sub : {
Nova : {
id: "nova",
type : "item",
name: "nova",
},
Salsamenteria : {
id: "salsamenteria",
type : "item",
name: "Salsamenteria di Parma",
},
Novaa,
}
}
}

View File

@ -1,59 +1,77 @@
//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('Menu',{
template: `
<section class="restomenu">
<div class="dish" v-for="d in this.obj.dishes">
<h3>{{ d.name }}</h3>
<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>
</span>
</div>
</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",
}
}
},
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>
<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 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 class="hour">{{ d }}</span>
</p>
</div>
`,
props : {
@ -62,6 +80,11 @@ Vue.component('Time', {
data () {
return {
message : "hello from time",
closed : {
fr : "fermé",
fr : "closed",
it : "chiuso",
},
days : {
mon : {
fr : "Lundi",
@ -102,8 +125,13 @@ Vue.component('Time', {
}
},
methods : {
getTime () {
tabtype
checkTime (d) {
if (d != "" ){
return d
} else {
return this.closed
}
}
}
@ -177,12 +205,9 @@ Vue.component('Accordeon', {
>
<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>
<Menu v-if="i.tabtype === 'menu'" v-bind:obj="i"></Menu>
</section>
</section>
</div>
</section>
@ -240,7 +265,6 @@ Vue.component('Accordeon', {
},
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 {
@ -269,7 +293,6 @@ Vue.component('Accordeon', {
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) {
@ -288,7 +311,6 @@ Vue.component('Accordeon', {
showCard() {
this.displayCard = "block";
this.setTab(0)
console.log("showing card")
this.cardTop = "0vh"
this.setTab(0)
this.setTab(0)
@ -308,7 +330,6 @@ Vue.component('Accordeon', {
setMap () {
map.setView(this.dirxy, this.dirzl)
this.list.marker.openPopup()
console.log("setMap")
}
},
})
@ -360,9 +381,7 @@ let vm = new Vue({
this.setlang('fr');
},
mounted: function() {
console.log("mounting");
this.setlang('fr');
console.log("mounted");
this.setlang('fr');
this.setlang('fr');
this.setlang('fr');

View File

@ -1,4 +1,3 @@
console.log("hello from map.js")
var hotelxy=[-19.8,47.5]
var maxZoomLevel = 6
@ -32,10 +31,6 @@ map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapNE, map.getMaxZoom())
))
console.log("getMaxZoom:")
console.log(map.getMaxZoom())
var markPointerIcon = L.icon({
iconUrl: 'asset/markers/pointer.png',
iconSize: [22, 32],
@ -69,38 +64,52 @@ marker.on('click', function(e) {
console.log(marker.getLatLng())
})
console.log("looping resto from map.js")
var layzl3 = L.layerGroup()
var layzl3 = L.layerGroup()
var layzl1 = L.layerGroup()
var layzl2 = L.layerGroup()
var layzl3 = L.layerGroup()
var layzl4 = L.layerGroup()
var layzl5 = L.layerGroup()
var layzl6 = L.layerGroup()
let layzls = [null,null,layzl2,layzl3,layzl4,layzl5,layzl6]
var layResto = L.layerGroup()
var layParking = L.layerGroup()
let resto = jdb.data.db.resto.sub
function removeLs(list) {
for (i in list){
map.removeLayer(list[i])
}
}
function addLs(list) {
for (i in list) {
list[i].addTo(map)
}
}
function iToZL(i) {
return lay
}
let parking = jdb.data.db.parking.sub
Object.entries(parking).forEach(p => {
console.log(p[1]['name'])
p[1]['marker'] = L.marker(p[1]['xy'], {
icon: markParkingIcon,
}).addTo(map);
}).addTo(layzls[p[1]['minz']]);
})
layParking.addTo(map)
Object.entries(resto).forEach(item => {
console.log(item)
console.log(item[1]['sub'])
Object.entries(item[1]['sub']).forEach(r => {
console.log(r[1]['name'])
console.log(r[1]['xy'])
if (typeof r[1]['xy'] !== "undefined") {
r[1]['marker'] = L.marker(r[1]['xy'], {
icon: markRestoIcon,
}).addTo(layResto);
}).addTo(layzls[r[1]['minz']]);
r[1]['marker'].bindPopup(r[1]['name'])
r[1]['marker'].on('click', function(e) {
console.log("hello")
jdb.data.db.resto.isActive = true
item[1]['isActive'] = true
let target = document.getElementById(r[1]['id'])
@ -116,3 +125,77 @@ layResto.addTo(map)
min/max = 163
map.setView([-163,-163],2)
*/
map.on('zoomend', function() {
let z = map.getZoom();
switch(z) {
case 1:
addLs([layzl1])
removeLs([
layzl2,
layzl3,
layzl4,
layzl5,
layzl6
])
break;
case 2:
addLs([
layzl1,
layzl2
])
removeLs([
layzl3,
layzl4,
layzl5,
layzl6
])
break;
case 3:
addLs([
layzl1,
layzl2,
layzl3
])
removeLs([
layzl4,
layzl5,
layzl6
])
break;
case 4:
addLs([
layzl1,
layzl2,
layzl3,
layzl4
])
removeLs([
layzl5,
layzl6
])
break;
case 5:
addLs([
layzl1,
layzl2,
layzl3,
layzl4,
layzl5
])
removeLs([
layzl6
])
break;
case 6:
addLs([
layzl1,
layzl2,
layzl3,
layzl4,
layzl5,
layzl6
])
break;
}
});

File diff suppressed because one or more lines are too long

View File

@ -23,13 +23,13 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.33537079"
inkscape:cx="-555.87544"
inkscape:cy="-7828.6266"
inkscape:zoom="0.20296809"
inkscape:cx="2214.5142"
inkscape:cy="-7879.0027"
inkscape:document-units="mm"
inkscape:current-layer="g5160"
inkscape:document-rotation="0"
showgrid="false"
showgrid="true"
inkscape:snap-bbox="true"
inkscape:snap-intersection-paths="true"
inkscape:object-paths="true"
@ -312,25 +312,25 @@
inkscape:export-ydpi="4.0456319" />
<path
style="fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:28.5419;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 1856.6876,-1692.7927 v -450.8728 h 45.9013 l 27.3256,259.5934 h -27.3256 v 191.2794 z"
d="m 1840.5138,-1692.7927 v -450.8728 h 45.9013 l 27.3256,259.5934 h -27.3256 v 191.2794 z"
id="path5137"
sodipodi:nodetypes="ccccccc"
inkscape:export-xdpi="4.0456319"
inkscape:export-ydpi="4.0456319" />
<g
id="g5153"
style="stroke-width:22.10880158;stroke-miterlimit:4;stroke-dasharray:none"
style="stroke-width:22.1088;stroke-miterlimit:4;stroke-dasharray:none"
inkscape:export-xdpi="4.0456319"
inkscape:export-ydpi="4.0456319"
transform="matrix(1.2909742,0,0,1.2909742,-386.47561,489.87865)">
transform="matrix(1.2909742,0,0,1.2909742,-393.13541,489.87865)">
<circle
style="opacity:0.999987;fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:22.10880158;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="opacity:0.999987;fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:22.1088;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path5139"
cx="1554.7484"
cy="-1858.869"
r="149.92163" />
<circle
style="opacity:0.999987;fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:22.10880158;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
style="opacity:0.999987;fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:22.1088;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5149"
cx="1554.7484"
cy="-1858.869"
@ -343,7 +343,9 @@
height="450.2742"
x="2125.3508"
y="-2143.6992"
ry="102.63766" />
ry="102.63766"
inkscape:export-xdpi="3.05"
inkscape:export-ydpi="3.05" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:423.322px;line-height:1.25;font-family:Inter;-inkscape-font-specification:'Inter, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#b3bfb6;fill-opacity:1;stroke-width:62.9295;stroke-miterlimit:4;stroke-dasharray:none"
@ -355,6 +357,24 @@
x="2184.0947"
y="-1764.6268"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:423.322px;font-family:Inter;-inkscape-font-specification:'Inter, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#b3bfb6;fill-opacity:1;stroke-width:62.9295;stroke-miterlimit:4;stroke-dasharray:none">P</tspan></text>
<path
id="path7872"
style="fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:28.5419;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 2789.7063,-2109.3442 v 285.4189 h 304.4469 l 0,-28.5419 h 133.1954 l 0,-218.8211 h -133.1954 v -38.0559 z m 304.4469,76.1117 h 95.1396 l 0,142.7094 h -95.1396 z"
sodipodi:nodetypes="cccccccccccccc" />
<rect
style="opacity:0.999987;fill:#1c2729;fill-opacity:1;stroke:#b3bfb6;stroke-width:28.5419;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="rect7885"
width="361.53076"
height="38.055813"
x="2761.1643"
y="-1776.3555"
ry="0" />
<path
style="fill:#1c2729;stroke:#b3bfb6;stroke-width:28.54189243;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke fill markers"
d="m 3370.0581,-2099.8304 h 228.3351 l -38.0558,247.3632 -57.0838,-10e-5 v 76.1117 l 57.0838,19.028 0,19.0279 H 3408.114 l 0,-19.0279 57.0837,-19.028 v -76.1117 l -57.0837,10e-5 z"
id="path7887"
sodipodi:nodetypes="ccccccccccccc" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 23 KiB