Skip to content

Commit

Permalink
Добавлен собственный Select
Browse files Browse the repository at this point in the history
  • Loading branch information
@DmitriyKapral
DmitriyKapral committed May 9, 2022
1 parent 28639e1 commit 90d5cc9
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 216 deletions.
21 changes: 11 additions & 10 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<div v-for="n in 8" :key="n">
<get-markers
v-if="selectedCategory.includes(nameCategoryObject[n - 1])"
v-if="selectedCategory.includes(categoryObject[n - 1])"
:data="data[n - 1]"
:icon="icons[n - 1]"
:events="events[n - 1]"
Expand Down Expand Up @@ -113,14 +113,14 @@ export default {
selectedFree: 0,
inputAge: 0,
selectedCategory: [
"libraries",
"culture_palaces_clubs",
"cinema",
"circuses",
"concert_halls",
"museums",
"parks",
"theaters",
"Библиотеки",
"Кинотеатры",
"Цирки",
"Концертные залы",
"Музеи и галереи",
"Парки",
"Театры",
"ДК и клубы",
],
city: "",
data: [[], [], [], [], [], [], [], []],
Expand Down Expand Up @@ -206,7 +206,7 @@ export default {
"Музеи и галереи",
"Парки",
"Театры",
"Дворцы культуры и клубы",
"ДК и клубы",
],
};
},
Expand Down Expand Up @@ -300,6 +300,7 @@ export default {
async filterObject(selectCategory, selectRadius) {
this.filterObjectVisible = false;
this.selectedCategory = selectCategory;
this.selectRadius = selectRadius;
for (let i = 0; i < 8; i++) {
Expand Down
51 changes: 26 additions & 25 deletions src/components/FilterEvents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,14 @@
/>
<br>
<strong>Поиск по платным мероприятиям:</strong> <br>
<span class="custom-dropdown big">
<select v-model="selectedFree">
<option
class="decorated"
v-for="FreeFalse in freeOrFalse"
v-bind:key="FreeFalse"
:value="FreeFalse.value"
>
{{ FreeFalse.text }}
</option>
</select>
</span>
<my-select
style="top: 10px; width: 20%; left: 40%"
:options="freeOrFalse"
:default="'Все'"
class="select"
@input="input"
/>

<br />
<strong>Выберите ограничение по возврасту: </strong> <br>
<div class="number">
Expand Down Expand Up @@ -53,9 +49,10 @@

<script>
import MySelectMult from "./UI/MySelectMult.vue";
import MySelect from "./UI/MySelect.vue";
import Btn from "./UI/Btn.vue";
export default {
components: { MySelectMult, Btn },
components: { MySelectMult, Btn, MySelect },
emits: ["filterEvents", "allEvents"],
data() {
return {
Expand All @@ -64,15 +61,15 @@ export default {
value: null,
options: ["Batman", "Robin", "Joker"],
categoryEvents: [
{ name: "Встречи", value: "Встречи" },
{ name: "Прочие", value: "Прочие" },
{ name: "Выставки", value: "Выставки" },
{ name: "Концерты", value: "Концерты" },
{ name: "Праздники", value: "Праздники" },
{ name: "Обучение", value: "Обучение" },
{ name: "Спектакли", value: "Спектакли" },
{ name: "Кино", value: "Кино" },
{ name: "Экскурсии", value: "Экскурсии" },
"Встречи",
"Прочие",
"Выставки",
"Концерты",
"Праздники",
"Обучение",
"Спектакли",
"Кино",
"Экскурсии",
],
selectCategoryEvents: [
"Встречи",
Expand All @@ -87,14 +84,18 @@ export default {
],
selectedFree: 2,
freeOrFalse: [
{ text: "Да", value: 1 },
{ text: "Нет", value: 0 },
{ text: "Все", value: 2 },
{ name: "Да", value: 1 },
{ name: "Нет", value: 0 },
{ name: "Все", value: 2 },
],
inputAge: 0,
};
},
methods: {
input(selectFree){
this.selectedFree = selectFree;
},
minusInput() {
if(this.inputAge <= 18 && this.inputAge > 0)
{
Expand Down
86 changes: 29 additions & 57 deletions src/components/FilterObjects.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,22 @@
<fieldset @click="closeOut">
<legend>Фильтры объектов</legend>
<h2>Выберите радиус поиска объектов от своей позиции:</h2>
<span class="custom-dropdown big">
<select v-model="selectRadius">
<option value="500">500 метров</option>
<option value="1000">1000 метров</option>
<option value="1500">1500 метров</option>
<option value="3000">3000 метров</option>
<option value="100000">Весь город</option>
</select>
</span>

<my-select
:options="optionsRadius"
:default="'Весь город'"
class="select"
@input="input"
/>

<div class="v-options"></div>
<h2>Выберите категории поиска объектов:</h2>
<my-select-mult
:options="optionsCategory"
@select="optionMult"
v-model:show="showSelect"
@all="closeSelectOut"
:selectedOptions="selected"
:selectedOptions="optionsCategory"
/>

<br />
Expand All @@ -34,66 +33,41 @@

<script>
import Btn from "./UI/Btn.vue";
//import MySelect from './UI/MySelect.vue';
import MySelect from "./UI/MySelect.vue";
import MySelectMult from "./UI/MySelectMult.vue";
export default {
components: { Btn, /*MySelect*/ MySelectMult },
components: { Btn, MySelectMult, MySelect },
emits: ["filterObject"],
props: {
selected: {
type: Array,
}
},
data() {
return {
showSelect: false,
all: [],
options: [
{ name: "Option 1", value: 1 },
{ name: "Option 2", value: 2 },
optionsRadius: [
{ name: "500 метров", value: 500 },
{ name: "1000 метров", value: 1000 },
{ name: "1500 метров", value: 1500 },
{ name: "3000 метров", value: 3000 },
{ name: "Весь город", value: 100000 },
],
selectRadius: 100000,
selectCategory: [
],
selectCategory: [],
optionsCategory: [
{
name: "Библиотеки",
value: "libraries",
},
{
name: "ДК и клубы",
value: "culture_palaces_clubs",
},
{
name: "Кинотеатры",
value: "cinema",
},
{
name: "Цирки",
value: "circuses",
},
{
name: "Концертные залы",
value: "concert_halls",
},
{
name: "Музеи",
value: "museums",
},
{
name: "Парки",
value: "parks",
},
{
name: "Театры",
value: "theaters",
},
"Библиотеки",
"Кинотеатры",
"Цирки",
"Концертные залы",
"Музеи и галереи",
"Парки",
"Театры",
"ДК и клубы",
],
};
},
methods: {
input(rad) {
this.selectRadius = rad;
},
closeSelectOut(arr) {
this.selectCategory = arr;
},
Expand Down Expand Up @@ -133,6 +107,4 @@ body {
text-align: center;
font-family: Arial, Helvetica;
}
</style>
55 changes: 29 additions & 26 deletions src/components/InfoPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<component v-bind:is="currentTabComponent" class="tab"></component>
</div>


<button class="object__close" @click="closeAside"></button>

<div v-if="bool">
Expand All @@ -22,9 +23,9 @@
<img :src="info.img" alt="" class="img-absolute" />
</div>
<div>
<p>Контакты для связи:</p>
<strong>Контакты для связи:</strong>
<div v-if="info.contacts?.hasOwnProperty('email')">
<p>Email: {{ info.contacts.email }}</p>
Email: {{ info.contacts.email }}
</div>

<div v-if="info.contacts?.hasOwnProperty('phones')">
Expand Down Expand Up @@ -60,7 +61,11 @@
<td>{{ event.data.general.category.name }}</td>
<td>{{ trueFalse(event.data.general.isFree) }}</td>
<td>
<btn class="submit" style="cursor: pointer;" @click="openAsideMore(event.data.general)">
<btn
class="submit"
style="cursor: pointer"
@click="openAsideMore(event.data.general)"
>
Подробнее
</btn>
</td>
Expand All @@ -85,24 +90,18 @@
</div>
<div>Сеансы:</div>
<div class="eventtable">
<table
width="70%"
cellspacing="0"
cellpadding="10"

>
<tr>
<th>Начало</th>
<th>Конец</th>
</tr>
<table width="70%" cellspacing="0" cellpadding="10">
<tr>
<th>Начало</th>
<th>Конец</th>
</tr>
<tr v-for="seance in moreEvent.seances" v-bind:key="seance">
<td>{{ new Date(seance.start).toLocaleString() }}</td>

<td>{{ new Date(seance.end).toLocaleString() }}</td>
</tr>
</table>
</div>

</aside>
</div>
</div>
Expand Down Expand Up @@ -175,21 +174,24 @@ export default {
font-weight: 700;
text-decoration: none;
user-select: none;
padding: .25em .5em;
padding: 0.25em 0.5em;
outline: none;
border: 1px solid teal;
border-radius: 7px;
background: white;
box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
transition: box-shadow .2s, border-color .2s;
}
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0),
inset 0 1px 2px rgba(0, 0, 0, 0), inset 0 0 0 60px rgba(255, 255, 0, 0);
transition: box-shadow 0.2s, border-color 0.2s;
}
.submit:hover {
box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px teal;
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0),
inset 0 1px 2px rgba(0, 0, 0, 0), inset 0 0 0 60px teal;
}
.submit:active {
padding: calc(.25em + 1px) .5em calc(.25em - 1px);
padding: calc(0.25em + 1px) 0.5em calc(0.25em - 1px);
border-color: teal;
box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgb(24, 90, 90);
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1),
inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 60px rgb(24, 90, 90);
}
.eventtable {
max-height: 500px; /* Максимальная высота */
Expand All @@ -209,13 +211,13 @@ export default {
z-index: 1001;
}
::-webkit-scrollbar {
width: 6px;
}
width: 6px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.object {
position: fixed;
Expand Down Expand Up @@ -277,4 +279,5 @@ export default {
left: 5%;
top: -2%;
}
</style>
Loading

0 comments on commit 90d5cc9

Please sign in to comment.