Составил полный список булочных

This commit is contained in:
2020-08-05 05:05:32 +03:00
parent 6d2a2a3032
commit dbfa0883ef
5 changed files with 387 additions and 23 deletions

View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Анатолий Копыл 2020 -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">

View File

@@ -1 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M 13.261719 14.867188 L 15.742188 17.347656 C 15.363281 18.070313 15.324219 18.789063 15.722656 19.1875 L 20.25 23.714844 C 20.820313 24.285156 22.0625 23.972656 23.015625 23.015625 C 23.972656 22.058594 24.285156 20.820313 23.714844 20.25 L 19.191406 15.722656 C 18.789063 15.324219 18.070313 15.363281 17.347656 15.738281 L 14.867188 13.261719 Z M 8.5 0 C 3.804688 0 0 3.804688 0 8.5 C 0 13.195313 3.804688 17 8.5 17 C 13.195313 17 17 13.195313 17 8.5 C 17 3.804688 13.195313 0 8.5 0 Z M 8.5 15 C 4.910156 15 2 12.089844 2 8.5 C 2 4.910156 4.910156 2 8.5 2 C 12.089844 2 15 4.910156 15 8.5 C 15 12.089844 12.089844 15 8.5 15 Z"/></svg> <svg fill="#b4a89c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M 13.261719 14.867188 L 15.742188 17.347656 C 15.363281 18.070313 15.324219 18.789063 15.722656 19.1875 L 20.25 23.714844 C 20.820313 24.285156 22.0625 23.972656 23.015625 23.015625 C 23.972656 22.058594 24.285156 20.820313 23.714844 20.25 L 19.191406 15.722656 C 18.789063 15.324219 18.070313 15.363281 17.347656 15.738281 L 14.867188 13.261719 Z M 8.5 0 C 3.804688 0 0 3.804688 0 8.5 C 0 13.195313 3.804688 17 8.5 17 C 13.195313 17 17 13.195313 17 8.5 C 17 3.804688 13.195313 0 8.5 0 Z M 8.5 15 C 4.910156 15 2 12.089844 2 8.5 C 2 4.910156 4.910156 2 8.5 2 C 12.089844 2 15 4.910156 15 8.5 C 15 12.089844 12.089844 15 8.5 15 Z"/></svg>

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 748 B

View File

@@ -1,11 +1,12 @@
<template> <template>
<div> <div class="wrapper">
<div v-on:scroll="handleScroll" id="address-list"> <div v-on:scroll="handleScroll" id="address-list">
<div class="address" v-for="bakery in bakeries" v-bind:key="bakery.n" <div class="address" v-for="bakery in bakeries" v-bind:key="bakery.n"
v-bind:class="{ 'inactive': bakery.hours.includes('закрыта'), 'selected': selected===bakery.n }" v-bind:class="{ 'inactive': bakery.hours.includes('закрыта'), 'selected': selected===bakery.n }"
:id="'element'+bakery.n"
v-on:click="select(bakery.n)"> v-on:click="select(bakery.n)">
<h3>{{ bakery.address }}</h3> <h3>{{ bakery.address }}</h3>
<img src="@/assets/metro.png" /> <span class="light">{{ bakery.metro }}</span> <img v-if="bakery.metro" src="@/assets/metro.png" /> <span class="light">{{ bakery.metro }}{{ bakery.location }}</span>
<br /> <br />
<span>{{ bakery.hours }}</span> <span>{{ bakery.hours }}</span>
</div> </div>
@@ -18,6 +19,7 @@
<script> <script>
export default { export default {
name: "AddressList", name: "AddressList",
props: ['selectedNew'],
data() { data() {
return { return {
selected: 1, selected: 1,
@@ -340,6 +342,324 @@ export default {
metro: "Петроградская", metro: "Петроградская",
hours: "8:00 - 22:00", hours: "8:00 - 22:00",
}, },
{
n: 22,
address: "Энгельса пр., д.124, к.1, ТК Вояж",
metro: "Озерки",
hours: "8:00 - 22:00",
},
{
n: 21,
address: "Пулковская ул., д.10, к.2",
metro: "Звездная",
hours: "8:00 - 22:00",
},
{
n: 23,
address: "8-я линия ВО, д.49",
metro: "Василеостровская",
hours: "8:00 - 22:00",
},
{
n: 25,
address: "Коллонтай ул. д.5",
metro: "Проспект Большевиков",
hours: "8:00 - 22:00",
},
{
n: 26,
address: "Гривцова пер. д.26",
metro: "Садовая",
hours: "8:00 - 22:00",
},
{
n: 27,
address: "Разъезжая ул. д.43",
metro: "Лиговский проспект",
hours: "8:00 - 22:00",
},
{
n: 28,
address: "наб. Канала Грибоедова, д.79/23",
metro: "Садовая",
hours: "8:00 - 22:00",
},
{
n: 30,
address: "Ветеранов пр., д.110",
metro: "Проспект Ветеранов",
hours: "8:00 - 22:00",
},
{
n: 29,
address: "Заневский пр., д.9/8",
metro: "Новочеркасская",
hours: "8:00 - 22:00",
},
{
n: 24,
address: "Блохина ул. д.23",
metro: "Спортивная",
hours: "8:00 - 22:00",
},
{
n: 31,
address: "Разъезжая ул., д.1",
metro: "Владимирская",
hours: "8:00 - 22:00",
},
{
n: 32,
address: "Ленина ул., д.27",
metro: "Чкаловская",
hours: "8:00 - 22:00",
},
{
n: 34,
address: "Автовская ул., д.4",
metro: "Автово",
hours: "8:00 - 22:00",
},
{
n: 36,
address: "Чкаловский пр., д.11",
metro: "Чкаловская",
hours: "8:00 - 22:00",
},
{
n: 38,
address: "Удельный пр., д.25",
metro: "Удельная",
hours: "8:00 - 22:00",
},
{
n: 35,
address: "1-ая Красноармейская, д.8-10",
metro: "Технологический Институт",
hours: "8:00 - 22:00",
},
{
n: 42,
address: "ул. Марата, д.54/34",
metro: "Лиговский проспект",
hours: "8:00 - 22:00",
},
{
n: 39,
address: "Вознесенский пр., д.45",
metro: "Садовая",
hours: "8:00 - 22:00",
},
{
n: 33,
address: "Пионерская ул., д.35",
metro: "Чкаловская",
hours: "8:00 - 22:00",
},
{
n: 40,
address: "Лермонтовский пр., д.55",
metro: "Балтийская",
hours: "8:00 - 22:00",
},
{
n: 37,
address: "Большая Зеленина ул., д.2/42",
metro: "Чкаловская",
hours: "8:00 - 22:00",
},
{
n: 44,
address: "наб. Канала Грибоедова, д.42",
metro: "Сенная площадь",
hours: "8:00 - 22:00",
},
{
n: 47,
address: "Солидарности пр., д.9",
metro: "Проспект Большевиков",
hours: "8:00 - 22:00",
},
{
n: 50,
address: "ул. Дыбенко, д.16",
metro: "Улица Дыбенко",
hours: "8:00 - 22:00",
},
{
n: 52,
address: "Елизарова пр., д.3",
metro: "Елизаровская",
hours: "8:00 - 22:00",
},
{
n: 54,
address: "Всеволожский пр., д.72А",
location: "Всеволожск",
hours: "8:00 - 22:00",
},
{
n: 60,
address: "Невский пр., д.15",
metro: "Адмиралтейская",
hours: "8:00 - 0:00",
},
{
n: 56,
address: "Белышева ул., д.5/6",
metro: "Большевиков",
hours: "8:00 - 22:00",
},
{
n: 57,
address: "Ланское ш., д.59",
metro: "Черная речка",
hours: "8:00 - 22:00",
},
{
n: 49,
address: "Жуковского ул. д.38А",
metro: "Площадь восстания",
hours: "закрыта",
},
{
n: 62,
address: "Коли Томчака ул. д.18/26",
metro: "Московские ворота",
hours: "8:00 - 22:00",
},
{
n: 65,
address: "Стачек пр., д. 40",
metro: "Кировский завод",
hours: "8:00 - 22:00",
},
{
n: 67,
address: "Стачек пр., д. 75",
metro: "Автово",
hours: "8:00 - 22:00",
},
{
n: 68,
address: "Будапештская ул., д.74 к.1",
metro: "Купчино",
hours: "8:00 - 22:00",
},
{
n: 69,
address: "Ярослава Гашека ул., д.4",
metro: "Купчино",
hours: "8:00 - 22:00",
},
{
n: 72,
address: "Большевиков пр., д.9",
metro: "Проспект Большевиков",
hours: "8:00 - 22:00",
},
{
n: 70,
address: "Будапештская ул., д.14",
metro: "Международная",
hours: "8:00 - 22:00",
},
{
n: 77,
address: "Гражданский пр., д.76",
metro: "Академическая",
hours: "8:00 - 22:00",
},
{
n: 79,
address: "Новоизмайловский пр., д.38 к.1",
metro: "Московская",
hours: "8:00 - 22:00",
},
{
n: 80,
address: "Гатчинская ул., д.35",
metro: "Чкаловская",
hours: "8:00 - 22:00",
},
{
n: 82,
address: "Федора Абрамова ул., д.8",
metro: "Парнас",
hours: "8:00 - 22:00",
},
{
n: 84,
address: "ул.Борисова д.4, лит А",
location: "г.Сестрорецк",
hours: "8:00 - 22:00",
},
{
n: 93,
address: "Европейский проспект, д.8 (Кудрово)",
metro: "Улица Дыбенко",
hours: "8:00 - 22:00",
},
{
n: 90,
address: "Невский д.52/Садовая ул.д.14",
metro: "Гостинный двор",
hours: "8:00 - 22:00",
},
{
n: 91,
address: "Конюшенный пер.,д.1/6",
metro: "Адмиралтейская",
hours: "8:00 - 0:00",
},
{
n: 94,
address: "Бабушкина ул., д.14",
metro: "Ломоносовская",
hours: "8:00 - 22:00",
},
{
n: 97,
address: "Восстания ул., д.43",
metro: "Чернышевская",
hours: "8:00 - 22:00",
},
{
n: 98,
address: "Некрасова ул., д.1/38",
metro: "Чернышевская",
hours: "8:00 - 22:00",
},
{
n: 100,
address: "Невский пр., д.151",
metro: "пл. Александра Невского",
hours: "8:00 - 22:00",
},
/*{
n: ,
address: "Маршала Казакова ул., д.1, корп.2",
metro: "Автово",
hours: "8:00 - 22:00",
},*/
{
n: 104,
address: "1-я линия В.О., д. 46, лит. А",
metro: "Василеостровская",
hours: "8:00 - 22:00",
},
/*{
n: ,
address: "Ветеранов пр., д. 87",
metro: "Проспект Ветеранов",
hours: "8:00 - 22:00",
},*/
{
n: 107,
address: "Средний пр. В.О. д. 50., лит. А",
metro: "Василеостровская",
hours: "8:00 - 22:00",
}
], ],
showHint: true showHint: true
}; };
@@ -352,6 +672,11 @@ export default {
handleScroll: function() { handleScroll: function() {
this.showHint = false; this.showHint = false;
} }
},
watch: {
selectedNew: function() {
this.selected = this.selectedNew;
}
} }
}; };
</script> </script>
@@ -417,6 +742,10 @@ export default {
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
#address-list { #address-list {
height: 100%; height: 100%;
width: 90%; width: 90%;

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="goods"> <div class="goods">
<a class="jump-to-top" href="#router-view"><img src="@/assets/down.png"></a> <a v-bind:style="{ transform: jumpOffset }" class="jump-to-top" href="#app"><img src="@/assets/down.png"></a>
<div id="menu"> <div id="menu">
<div class="buttons"> <div class="buttons">
<a href="#pastry"> <a href="#pastry">
@@ -26,10 +26,10 @@
</div> </div>
<input type="text" placeholder="Поиск..." v-model="query"/> <input type="text" placeholder="Поиск..." v-model="query"/>
</div> </div>
<h2 v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" id="pastry">Кондитерские изделия:</h2> <h2 v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье', 'Торты на заказ'])" id="pastry">Кондитерские изделия:</h2>
<div v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" class="category"> <div v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье', 'Торты на заказ'])" class="category">
<div v-for="n in 3" v-bind:key=n class="col"> <div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(n, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item :query=query /> <Card v-for="item in itemsSubset(n, ['Кондитерские изделия', 'Леденцы', 'Печенье', 'Торты на заказ'])" v-bind:key=item.nameEng :item=item :query=query />
</div> </div>
</div> </div>
<h2 v-if="categoryLength('Мелкоштучные изделия')" id="singles">Мелкоштучные изделия:</h2> <h2 v-if="categoryLength('Мелкоштучные изделия')" id="singles">Мелкоштучные изделия:</h2>
@@ -71,7 +71,8 @@ export default {
data() { data() {
return { return {
items: items, items: items,
query: '' query: '',
jumpOffset: "translateY(100px)"
} }
}, },
methods: { methods: {
@@ -82,7 +83,14 @@ export default {
let cropped = this.items.filter((v) => category.includes(v.category)); let cropped = this.items.filter((v) => category.includes(v.category));
let result = cropped.filter((v) => v.name.toLowerCase().includes(this.query.toLowerCase())); let result = cropped.filter((v) => v.name.toLowerCase().includes(this.query.toLowerCase()));
return result.length; return result.length;
},
handleScroll: function() {
let offset = Math.max(150-window.scrollY, 0);
this.jumpOffset = `translateY(${offset}px)`;
} }
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
} }
} }
</script> </script>
@@ -196,7 +204,7 @@ h2::before {
} }
.jump-to-top img { .jump-to-top img {
width: 10vh; width: 7vh;
transform: rotate(180deg); transform: rotate(180deg);
} }

View File

@@ -5,14 +5,15 @@
<div id="map"> <div id="map">
<div id="napkin"> <div id="napkin">
<yandex-map :settings=settings :coords=markers[selected] :zoom=16> <yandex-map :settings=settings :coords=markers[selected] :zoom=16>
<ymap-marker v-for="marker in markers" v-bind:key="marker.join()" <ymap-marker v-for="(value, i) in markers" v-bind:key=i
marker-id=marker marker-id=i
:coords=marker :coords=value
:icon=markerIcon :icon=markerIcon
@click="selectOnMap(i)"
/> />
</yandex-map> </yandex-map>
</div> </div>
<AddressList v-on:selected="selectMarker" /> <AddressList v-on:selected="selectMarker" v-bind:selectedNew="selected" />
</div> </div>
<br> <br>
</div> </div>
@@ -34,6 +35,7 @@ export default {
data() { data() {
return { return {
selected: 1, selected: 1,
nearest: 10,
settings: { settings: {
apiKey: '40a5e665-b4d4-4f22-8443-0482b3e0053d', apiKey: '40a5e665-b4d4-4f22-8443-0482b3e0053d',
lang: 'ru_RU', lang: 'ru_RU',
@@ -160,8 +162,32 @@ export default {
methods: { methods: {
selectMarker: function(n) { selectMarker: function(n) {
this.selected = n; this.selected = n;
},
selectOnMap: function(n) {
this.selected = +n;
document.getElementById("element"+n).scrollIntoView();
},
pythagorean: function(sideA, sideB){
return Math.sqrt(Math.pow(sideA, 2) + Math.pow(sideB, 2));
},
selectNearest: function(pos) {
const coords = pos.coords;
let selectedDistLat = this.markers[0][0] - coords.latitude;
let selectedDistLon = this.markers[0][1] - coords.longitude;
for (let marker of this.markers) {
let distLat = marker[0] - coords.latitude;
let distLon = marker[1] - coords.longitude;
if (this.pythagorean(selectedDistLat, selectedDistLon) > this.pythagorean(distLat, distLon)) {
this.nearest = marker;
} }
} }
}
},
mounted() {
//navigator.geolocation.getCurrentPosition(this.selectNearest);
}
}; };
</script> </script>