Feat leaflet component (#53)

added maps to place details. also some small bug fixes --------- Co-authored-by: Robin Kaggl <[email protected]>
acdh-oeaw · Feb 9, 2024 · 8e58295 · 8e58295
1 parent bccb395
commit 8e58295
Show file tree

Hide file tree

Showing 14 changed files with 139 additions and 172 deletions.
diff --git a/components/detail-disclosure.vue b/components/detail-disclosure.vue
@@ -23,18 +23,20 @@ const t = useTranslations();
 		:default-open="defaultOpen"
 	>
 		<slot>
-			<div class="grid gap-2" :class="gridClass">
-				<span v-for="header in headers" :key="header" class="font-bold">
-					{{ t(`collection-keys.${collectionName}["${header}"]`) }}
-				</span>
-			</div>
-			<div
-				v-for="hit in rels"
-				:key="String(hit)"
-				class="mt-1 grid gap-2 border-t pt-1"
-				:class="gridClass"
-			>
-				<span v-for="header in headers" :key="hit + header">{{ get(hit, header) }}</span>
+			<div class="p-2">
+				<div class="grid gap-2" :class="gridClass">
+					<span v-for="header in headers" :key="header" class="font-bold">
+						{{ t(`collection-keys.${collectionName}["${header}"]`) }}
+					</span>
+				</div>
+				<div
+					v-for="hit in rels"
+					:key="String(hit)"
+					class="mt-1 grid gap-2 border-t pt-1"
+					:class="gridClass"
+				>
+					<span v-for="header in headers" :key="hit + header">{{ get(hit, header) }}</span>
+				</div>
 			</div>
 		</slot>
 	</GenericDisclosure>

diff --git a/components/facet-disclosures.vue b/components/facet-disclosures.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
-import { ChevronUp } from "lucide-vue-next";
 import type { SearchResponseFacetCountSchema } from "typesense/lib/Typesense/Documents";
 
+import GenericDisclosure from "@/components/generic-disclosure.vue";
 import { facetObjectToTypesenseQuery, getFacetObjectFromURL } from "@/lib/facets";
 import type { AnyEntity } from "@/types/schema";
 
-const t = useTranslations();
-
 defineProps<{
 	facets: Array<SearchResponseFacetCountSchema<AnyEntity>> | undefined;
 	loading: boolean;
@@ -35,38 +32,19 @@ const facetChange = async (facets: Array<string>, field: string) => {
 </script>
 
 <template>
-	<Disclosure v-slot="{ open }" as="div" class="flex flex-col md:pt-2" :default-open="defaultOpen">
-		<DisclosureButton
-			class="flex items-center justify-end gap-2 rounded align-top text-xl transition hover:bg-slate-200 active:bg-slate-300 lg:justify-center"
-		>
-			{{ open ? t("ui.hide-filters") : t("ui.show-filters") }}
-			<ChevronUp class="h-5 w-5 rotate-180 ui-open:rotate-0" />
-		</DisclosureButton>
-		<Transition
-			enter-active-class="transition duration-100 ease-out"
-			enter-from-class="transform scale-95 translate-x-8 opacity-0"
-			enter-to-class="transform scale-100 translate-x-0 opacity-100"
-			leave-active-class="transition duration-75 ease-out"
-			leave-from-class="transform scale-100 translate-x-0 opacity-100"
-			leave-to-class="transform scale-95 translate-x-8 opacity-0"
-		>
-			<DisclosurePanel
-				v-if="!loading && facets !== undefined"
-				as="div"
-				class="flex flex-col gap-2 divide-y"
-			>
-				<FacetField
-					v-for="facet in facets"
-					:key="facet.field_name"
-					class="pt-2"
-					:field-name="String(facet.field_name)"
-					:facets="facet.counts"
-					:collection="collection"
-					:selected="facetObject[facet.field_name] || []"
-					:query-by="queryBy"
-					@facet-change="(model) => facetChange(model, facet.field_name)"
-				/>
-			</DisclosurePanel>
-		</Transition>
-	</Disclosure>
+	<GenericDisclosure title="Facets" default-open>
+		<div class="p-2">
+			<FacetField
+				v-for="facet in facets"
+				:key="facet.field_name"
+				class="p-2"
+				:field-name="String(facet.field_name)"
+				:facets="facet.counts"
+				:collection="collection"
+				:selected="facetObject[facet.field_name] || []"
+				:query-by="queryBy"
+				@facet-change="(model) => facetChange(model, facet.field_name)"
+			/>
+		</div>
+	</GenericDisclosure>
 </template>
diff --git a/components/generic-disclosure.vue b/components/generic-disclosure.vue
@@ -28,7 +28,7 @@ defineProps<{
 			v-if="!disabled"
 			static
 			as="div"
-			class="box-border overflow-hidden rounded rounded-t-none border-2 p-2 transition-[max-height,border,padding] ui-open:max-h-screen ui-open:border-t-0 ui-not-open:max-h-0 ui-not-open:border-transparent ui-not-open:py-0"
+			class="box-border overflow-hidden rounded rounded-t-none border-2 transition-[max-height,border,padding] ui-open:max-h-screen ui-open:border-t-0 ui-not-open:max-h-0 ui-not-open:border-transparent ui-not-open:py-0"
 		>
 			<slot />
 		</DisclosurePanel>

diff --git a/components/map-component.vue b/components/map-component.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+defineProps<{
+	point: {
+		lat: string;
+		long: string;
+	};
+	zoom?: number;
+}>();
+
+const attribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
+</script>
+
+<template>
+	<div class="relative z-0 bg-slate-200">
+		<LMap ref="map" :zoom="zoom ?? 13" :center="[Number(point.lat), Number(point.long)]">
+			<LTileLayer
+				url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+				:attribution="attribution"
+				:min-zoom="3"
+			/>
+			<LMarker :lat-lng="[Number(point.lat), Number(point.long)]" />
+		</LMap>
+	</div>
+</template>
diff --git a/components/range-slider.vue b/components/range-slider.vue
@@ -6,7 +6,10 @@ const emit = defineEmits<{
 	change: [value: [number, number]];
 }>();
 
-const range: Ref<[number, number]> = ref([1700, 1900]);
+const min = 1600;
+const max = 1900;
+
+const range: Ref<[number, number]> = ref([min, max]);
 
 const { Root, Control, Thumb, MarkerGroup, Marker, Range, Track } = Slider; // important
 
@@ -20,7 +23,7 @@ watch(range, (from, to) => {
 </script>
 
 <template>
-	<Root v-model="range" :min="1700" :max="1900" class="flex w-full flex-col gap-2">
+	<Root v-model="range" :min="min" :max="max" class="flex w-full flex-col gap-2">
 		<div class="my-1 flex justify-between">
 			<div>
 				<label for="start_year" class="sr-only">Select start year</label>
@@ -29,8 +32,8 @@ watch(range, (from, to) => {
 					v-model="range[0]"
 					class="w-16 rounded text-right shadow"
 					type="number"
-					:min="1700"
-					:max="1900"
+					:min="min"
+					:max="max"
 					name="start_year"
 					@input="
 						(event: Event) =>
@@ -45,8 +48,8 @@ watch(range, (from, to) => {
 					v-model="range[1]"
 					class="w-16 rounded text-right shadow"
 					type="number"
-					:min="1700"
-					:max="1900"
+					:min="min"
+					:max="max"
 					name="end_year"
 					@change="
 						(event: Event) =>
@@ -71,6 +74,8 @@ watch(range, (from, to) => {
 			/>
 		</Control>
 		<MarkerGroup class="mx-1 h-4">
+			<Marker :value="1600" class="text-slate-400">1600</Marker>
+			<Marker :value="1650" class="text-slate-400">&#183;</Marker>
 			<Marker :value="1700" class="text-slate-400">1700</Marker>
 			<Marker :value="1750" class="text-slate-400">&#183;</Marker>
 			<Marker :value="1800" class="text-slate-400">1800</Marker>

diff --git a/components/search-table.vue b/components/search-table.vue
@@ -330,7 +330,7 @@ const getDetailLink = (id: string, entity?: string) => {
 		</div>
 		<div v-if="!loading && data">
 			<FacetDisclosures
-				class="float-right m-4 w-96 max-w-full"
+				class="ml-2 w-full max-w-full pr-4 lg:float-right lg:mx-0 lg:mt-6 lg:w-96"
 				:facets="data.facet_counts"
 				:loading="loading"
 				:collection="collectionName"

diff --git a/locales/de.json b/locales/de.json
@@ -80,7 +80,7 @@
 			"married_names": "Ehenamen",
 			"born": "Geboren",
 			"died": "Gestorben",
-			"duplicates": "Potenizelle Dubletten",
+			"duplicates": "Potenzielle Dubletten",
 			"alternative_first_names": "Alternative Vornamensschreibweisen",
 			"alternative_last_names": "Alternative Namensschreibweisen",
 			"honorary_titles": "Adelstand und Auszeichnungen",

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -35,7 +35,7 @@ export default defineNuxtConfig({
 		strategy: "prefix",
 		vueI18n: "./i18n.config.ts",
 	},
-	modules: ["@nuxt/content", "@nuxt/image", "@nuxtjs/i18n"],
+	modules: ["@nuxt/content", "@nuxt/image", "@nuxtjs/i18n", "nuxt3-leaflet"],
 	nitro: {
 		compressPublicAssets: true,
 	},

diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
 		"eslint": "^8.56.0",
 		"eslint-plugin-tailwindcss": "^3.13.1",
 		"lint-staged": "^15.2.0",
+		"nuxt3-leaflet": "^1.0.12",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"rehype-mermaid": "^2.0.1",

diff --git a/pages/detail/places/[id].vue b/pages/detail/places/[id].vue
@@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
 import Chip from "@/components/chip.vue";
 import DetailDisclosure from "@/components/detail-disclosure.vue";
 import DetailPage from "@/components/detail-page.vue";
+import MapComponent from "@/components/map-component.vue";
 import type { Place, PlaceDetail } from "@/types/schema";
 import { definePageMeta, getDetails, getDocument, ref } from "#imports";
 
@@ -103,15 +104,29 @@ definePageMeta({
 			<div class="col-span-2 my-1 border-t"></div>
 		</template>
 		<template #left>
-			<div v-if="data.details.data" class="flex flex-col gap-3">
+			<div v-if="data.details.data || data.entity.data" class="flex flex-col gap-3">
 				<DetailDisclosure
+					v-if="data.details.data"
 					:title="t('collection-keys.viecpro_places.alternative_names')"
 					:rels="data.details.data?.alternative_names.map((name) => ({ name })) || []"
 					:headers="['name']"
 					grid-class="grid-cols-1"
 					:loading="loading.details"
 					:collection-name="collection"
 				/>
+				<GenericDisclosure
+					title="Map"
+					default-open
+					:disabled="!data.entity.data?.lat || !data.entity.data?.long"
+				>
+					<ClientOnly>
+						<MapComponent
+							v-if="!loading.entity && data.entity.data?.lat && data.entity.data.long"
+							class="h-96 w-full"
+							:point="{ lat: data.entity.data.lat, long: data.entity.data.long }"
+						/>
+					</ClientOnly>
+				</GenericDisclosure>
 			</div>
 			<div v-else>{{ t("ui.no-data") }}.</div>
 		</template>

diff --git a/pages/search.vue b/pages/search.vue
@@ -72,9 +72,11 @@ definePageMeta({
 				<div class="mx-4 xl:max-w-sm">
 					<ClientOnly>
 						<GenericDisclosure :title="t('ui.timespan')" default-open>
-							<RangeSlider class="p-1" @change="(value) => console.log(value)" />
-							<div class="mt-1 text-xs text-gray-400">
-								note: as of now this component is purely cosmetic
+							<div class="p-2">
+								<RangeSlider class="p-1" @change="(value) => console.log(value)" />
+								<div class="mt-1 text-xs text-gray-400">
+									note: as of now this component is purely cosmetic
+								</div>
 							</div>
 						</GenericDisclosure>
 					</ClientOnly>

diff --git a/pages/search/relations.vue b/pages/search/relations.vue
@@ -7,7 +7,7 @@ import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
 const collectionName = "viecpro_relations";
-const queryBy = ["target.name", "source.name"];
+const queryBy = ["target.name", "source.name", "relation_type"];
 const koi = ["source_kind", "source.name", "relation_type", "target_kind", "target.name"];
 const tableCols = "grid-cols-[2fr_3fr_3fr_2fr_3fr]";