Add Map and Filter

2024-05-26 22:52:39 +02:00
parent 7b344d4fa4
commit aae9215215
18 changed files with 45920 additions and 42 deletions
@@ -0,0 +1,84 @@
+<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>