Merge pull request #366 from Dataport/vue3/migration-plugin-geo-location

feat(plugins/geoLocation): migrate plugin

Author: dopenguin

examples/snowbox/GeoLocationMock.ce.vue

@@ -7,6 +7,7 @@ import {
 	updateState,
 } from '@polar/polar'
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
+import pluginGeoLocation from '@polar/polar/plugins/geoLocation'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
 import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
@@ -15,13 +16,13 @@ import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
 import services from './services.js'
 import YetAnotherEmptyComponent from './YetAnotherEmptyComponent.vue'
-import GeoLocationMockCe from './GeoLocationMock.ce.vue'
 
 const basemapId = '23420'
 const basemapGreyId = '23421'
 const ausgleichsflaechen = '1454'
 const reports = '6059'
 const denkmal = 'denkmaelerWMS'
+// const hamburgBorder = '1693' // boundary layer for pins / geolocalization
 
 let colorScheme = 'light'
 // eslint-disable-next-line no-unused-vars
@@ -243,11 +244,17 @@ addPlugin(
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
-					plugin: {
-						component: GeoLocationMockCe,
-						id: 'geoLocationMock',
-						locales: [],
-					},
+					plugin: pluginGeoLocation({
+						checkLocationInitially: false,
+						keepCentered: false,
+						showTooltip: true,
+						zoomLevel: 7,
+						// usable when you're in HH or fake your geolocation to HH
+						/* boundary: {
+							layerId: hamburgBorder,
+							onError: 'strict',
+						}, */
+					}),
 				},
 			],
 			[

examples/snowbox/index.js

@@ -5,6 +5,7 @@ import type { LayerConfiguration } from './layer'
 import type { PolarTheme } from './theme'
 import type { LocaleOverride } from './locales'
 import type { FullscreenPluginOptions } from '@/plugins/fullscreen'
+import type { GeoLocationPluginOptions } from '@/plugins/geoLocation'
 import type { IconMenuPluginOptions } from '@/plugins/iconMenu'
 import type { LoadingIndicatorOptions } from '@/plugins/loadingIndicator'
 import type { ToastPluginOptions } from '@/plugins/toast'
@@ -293,6 +294,11 @@ export interface MapConfiguration extends MasterportalApiConfiguration {
 	 */
 	fullscreen?: FullscreenPluginOptions
 
+	/**
+	 * Configuration for geoLocation plugin.
+	 */
+	geoLocation?: GeoLocationPluginOptions
+
 	/**
 	 * Configuration for iconMenu plugin.
 	 */

src/core/types/main.ts

@@ -7,6 +7,10 @@ import type { PluginId as FullscreenPluginId } from '@/plugins/fullscreen'
 import type { useFullscreenStore as FullscreenStore } from '@/plugins/fullscreen/store'
 import type { resourcesEn as FullscreenResources } from '@/plugins/fullscreen/locales'
 
+import type { PluginId as GeoLocationPluginId } from '@/plugins/geoLocation'
+import type { useGeoLocationStore as GeoLocationStore } from '@/plugins/geoLocation/store'
+import type { resourcesEn as GeoLocationResources } from '@/plugins/geoLocation/locales'
+
 import type { PluginId as IconMenuPluginId } from '@/plugins/iconMenu'
 import type { useIconMenuStore as IconMenuStore } from '@/plugins/iconMenu/store'
 import type { resourcesEn as IconMenuResources } from '@/plugins/iconMenu/locales'
@@ -27,6 +31,38 @@ export interface PluginOptions {
 	layoutTag?: keyof typeof NineLayoutTag
 }
 
+interface BoundaryOptions {
+	/**
+	 * ID of the vector layer to restrict requests to.
+	 * The layer must contain vectors. This is useful for restricted maps to avoid
+	 * selecting unfit coordinates.
+	 */
+	layerId: string
+
+	/**
+	 * If the boundary layer check does not work due to loading or configuration
+	 * errors, style `'strict'` will disable the affected feature, and style
+	 * `'permissive'` will act as if no {@link layerId} was set.
+	 *
+	 * @defaultValue 'permissive'
+	 */
+	onError?: 'strict' | 'permissive'
+
+	/**
+	 * If the boundary layer check does not work due to loading or configuration
+	 * errors, style `'strict'` will disable the affected feature, and style
+	 * `'permissive'` will act as if no boundaryLayerId was set.
+	 * @defaultValue `'permissive'`
+	 */
+}
+
+export interface LayerBoundPluginOptions extends PluginOptions {
+	/**
+	 * Set to check whether something is within the layer's boundaries.
+	 */
+	boundary?: BoundaryOptions
+}
+
 export type PolarPluginStore<
 	T extends {
 		setupPlugin?: () => void
@@ -40,6 +76,7 @@ export type PolarPluginStore<
 /** @internal */
 export type BundledPluginId =
 	| typeof FullscreenPluginId
+	| typeof GeoLocationPluginId
 	| typeof IconMenuPluginId
 	| typeof LayerChooserPluginId
 	| typeof LoadingIndicatorId
@@ -57,6 +94,7 @@ type GetPluginStore<
 /** @internal */
 export type BundledPluginStores<T extends BundledPluginId> =
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
+	| GetPluginStore<T, typeof GeoLocationPluginId, typeof GeoLocationStore>
 	| GetPluginStore<T, typeof IconMenuPluginId, typeof IconMenuStore>
 	| GetPluginStore<T, typeof LayerChooserPluginId, typeof LayerChooserStore>
 	| GetPluginStore<T, typeof LoadingIndicatorId, typeof LoadingIndicatorStore>
@@ -71,6 +109,11 @@ type GetPluginResources<
 /** @internal */
 export type BundledPluginLocaleResources<T extends BundledPluginId> =
 	| GetPluginResources<T, typeof FullscreenPluginId, typeof FullscreenResources>
+	| GetPluginResources<
+			T,
+			typeof GeoLocationPluginId,
+			typeof GeoLocationResources
+	  >
 	| GetPluginResources<T, typeof IconMenuPluginId, typeof IconMenuResources>
 	| GetPluginResources<
 			T,

src/core/types/plugin.ts

@@ -1,6 +1,6 @@
-import i18next from 'i18next'
+import i18next, { type TOptions } from 'i18next'
 
-type TooltipLocaleKeys = [string, string][]
+type TooltipLocaleKeys = [string, string, TOptions?][]
 
 export interface Tooltip {
 	/** tooltip as a div, bound to inputs */
@@ -14,9 +14,9 @@ const setInnerHtml =
 	(tooltip: HTMLDivElement, localeKeys: TooltipLocaleKeys) => () =>
 		(tooltip.innerHTML = localeKeys
 			.map(
-				([element, localeKey]) =>
+				([element, localeKey, options = {}]) =>
 					// @ts-expect-error | Locale keys are dynamic.
-					`<${element}>${i18next.t(localeKey)}</${element}>`
+					`<${element}>${i18next.t(localeKey, options)}</${element}>`
 			)
 			.join(''))
 

src/lib/tooltip.ts

@@ -0,0 +1,48 @@
+<template>
+	<PolarIconButton
+		:class="
+			layout === 'nineRegions' ? 'polar-plugin-geoLocation-nineRegions' : ''
+		"
+		:hint="$t(($) => $.button.tooltip, { ns: PluginId })"
+		:icon="icon"
+		:tooltip-position="tooltipPosition"
+		:disabled="state === 'DISABLED'"
+		@click="geoLocationStore.locate"
+	/>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+import { useGeoLocationStore } from '../store'
+import { PluginId } from '../types'
+import PolarIconButton from '@/components/PolarIconButton.ce.vue'
+import { useCoreStore } from '@/core/stores/export'
+
+const { layout } = storeToRefs(useCoreStore())
+const geoLocationStore = useGeoLocationStore()
+const { state } = storeToRefs(geoLocationStore)
+
+const icon = computed(() => {
+	if (state.value === 'LOCATED') {
+		return 'kern-icon-fill--near-me'
+	} else if (state.value === 'LOCATABLE') {
+		return 'kern-icon--near-me'
+	}
+	return 'kern-icon--near-me-disabled'
+})
+const tooltipPosition = computed(() =>
+	geoLocationStore.configuration.renderType === 'iconMenu'
+		? undefined
+		: layout.value === 'standard' ||
+			  geoLocationStore.configuration.layoutTag?.includes('RIGHT')
+			? 'left'
+			: 'right'
+)
+</script>
+
+<style scoped>
+.polar-plugin-geoLocation-nineRegions {
+	margin: 0.5rem;
+}
+</style>

src/plugins/geoLocation/components/GeoLocation.ce.vue

@@ -0,0 +1,75 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { expect, test as _test, vi } from 'vitest'
+import { useGeoLocationStore } from '../store'
+import GeoLocation from './GeoLocation.ce.vue'
+import { mockedT } from '@/test/utils/mockI18n'
+
+// TODO: Finalize tets once useCoreStore works
+
+/* eslint-disable no-empty-pattern */
+const test = _test.extend<{
+	wrapper: VueWrapper
+	store: ReturnType<typeof useGeoLocationStore>
+}>({
+	wrapper: async ({}, use) => {
+		const wrapper = mount(GeoLocation, {
+			global: {
+				plugins: [createTestingPinia({ createSpy: vi.fn })],
+				mocks: {
+					$t: mockedT,
+				},
+			},
+		})
+		await use(wrapper)
+	},
+	store: async ({}, use) => {
+		const store = useGeoLocationStore()
+		await use(store)
+	},
+})
+/* eslint-enable no-empty-pattern */
+
+test.skip('The button should include a tooltip', ({ wrapper }) => {
+	const btn = wrapper.find('button')
+	expect(btn.element.disabled).toBe('false')
+	expect(btn.find('.polar-tooltip').exists()).toBe(true)
+	expect(btn.find('.kern-label').exists()).toBe(true)
+})
+
+test.skip('The icon of the button should change on click to a filled icon if the user accepts the location request', async ({
+	wrapper,
+}) => {
+	const btn = wrapper.find('button')
+	expect(btn.element.disabled).toBe('false')
+	expect(btn.find('.kern-icon').element.classList).toContain(
+		'kern-icon--near-me'
+	)
+
+	await btn.trigger('click')
+
+	expect(btn.element.disabled).toBe('false')
+	expect(btn.find('.kern-icon').element.classList).toContain(
+		'kern-icon--near-me-filled'
+	)
+})
+
+test.skip('The icon of the button should change on click to a disabled icon and be disabled if the user declines the location', async ({
+	wrapper,
+	store,
+}) => {
+	const btn = wrapper.find('button')
+
+	expect(btn.element.disabled).toBe('false')
+	expect(btn.find('.kern-icon').element.classList).toContain(
+		'kern-icon--near-me'
+	)
+
+	store.isGeolocationDenied = true
+	await btn.trigger('click')
+
+	expect(btn.element.disabled).toBe('true')
+	expect(btn.find('.kern-icon').element.classList).toContain(
+		'kern-icon--near-me-disabled'
+	)
+})

src/plugins/geoLocation/components/GeoLocation.spec.ts

@@ -0,0 +1,35 @@
+/* eslint-disable tsdoc/syntax */
+/**
+ * @module \@polar/polar/plugins/geoLocation
+ */
+/* eslint-enable tsdoc/syntax */
+
+import component from './components/GeoLocation.ce.vue'
+import locales from './locales'
+import { PluginId, type GeoLocationPluginOptions } from './types'
+import { useGeoLocationStore } from './store'
+import type { PluginContainer, PolarPluginStore } from '@/core'
+
+/**
+ * The GeoLocation plugin is responsible for collecting and displaying a user's
+ * GPS location for display on the map. The tracking can be triggered initially
+ * on startup or via a button.
+ *
+ * If a users denies the location tracking, the button for this plugin gets
+ * disabled and indicates the user's decision.
+ *
+ * @returns Plugin for use with {@link addPlugin}.
+ */
+export default function pluginGeoLocation(
+	options: GeoLocationPluginOptions
+): PluginContainer {
+	return {
+		id: PluginId,
+		component,
+		locales,
+		storeModule: useGeoLocationStore as PolarPluginStore,
+		options,
+	}
+}
+
+export * from './types'