85 lines
2.5 KiB
Vue
85 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from 'vuestic-ui';
|
|
import { amenities } from '@/osm';
|
|
import { useMapStore } from '@/stores/map';
|
|
import { useThemeStore } from '@/stores/theme';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { isValid } = useForm('formRef');
|
|
|
|
const theme = useThemeStore();
|
|
const mapStore = useMapStore();
|
|
|
|
const i18n = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<main class="text-content">
|
|
<h1 class="mt-2 text-center text-3xl">
|
|
<VaIcon name="filter_alt" size="large" />{{ $t('pages.filter.title') }}
|
|
</h1>
|
|
<div class="flex">
|
|
<VaSwitch v-model="theme.fullName" label="Show full names" />
|
|
</div>
|
|
<VaForm ref="formRef">
|
|
<VaAccordion>
|
|
<VaCollapse>
|
|
<template #header-content
|
|
>Amenity
|
|
<VaChip
|
|
v-if="mapStore.filterForm.amenitySelect.length > 0"
|
|
class="ml-auto"
|
|
>{{ mapStore.filterForm.amenitySelect.length }}</VaChip
|
|
></template
|
|
>
|
|
<template #content>
|
|
<VaButton
|
|
icon="delete"
|
|
class="mb-3"
|
|
color="danger"
|
|
:disabled="mapStore.filterForm.amenitySelect.length <= 0"
|
|
@click="() => mapStore.filterForm.amenitySelect.splice(0)"
|
|
>Reset</VaButton
|
|
>
|
|
<VaVirtualScroller
|
|
v-slot="{ item }"
|
|
:items="amenities"
|
|
wrapper-size="30rem"
|
|
>
|
|
<VaCheckbox
|
|
preset="solid"
|
|
class="my-3 ml-1"
|
|
v-model="mapStore.filterForm.amenitySelect"
|
|
:array-value="item.value"
|
|
:label="
|
|
!theme.fullName
|
|
? item.value
|
|
: i18n.locale.value in item.lang
|
|
? item.lang[i18n.locale.value as 'en']
|
|
: item.lang.en
|
|
? item.lang.en
|
|
: item.value
|
|
"
|
|
/>
|
|
</VaVirtualScroller>
|
|
</template>
|
|
</VaCollapse>
|
|
<VaCollapse>
|
|
<template #header-content
|
|
>Objects <VaChip class="ml-auto">1</VaChip></template
|
|
>
|
|
<template #content> </template>
|
|
</VaCollapse>
|
|
<VaCollapse>
|
|
<template #header-content
|
|
>Objects <VaChip class="ml-auto">1</VaChip></template
|
|
>
|
|
<template #content> </template>
|
|
</VaCollapse>
|
|
</VaAccordion>
|
|
</VaForm>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped></style>
|