Dataport · oeninghe-dataport · Oct 8, 2025 · Aug 26, 2025 · Aug 26, 2025 · Aug 26, 2025
@@ -82,6 +82,17 @@ const polarVueConfig = {
 	},
 }
 
+const polarHtmlConfig = {
+	rules: {
+		// POLAR-specific rules
+		'@html-eslint/require-closing-tags': ['error', { selfClosing: 'always' }],
+		'@html-eslint/no-extra-spacing-attrs': [
+			'error',
+			{ enforceBeforeSelfClose: true },
+		],
+	},
+}
+
 export default defineConfig([
 	{
 		ignores: [
@@ -130,6 +141,12 @@ export default defineConfig([
 			polarVueConfig,
 		],
 	},
+	{
+		files: ['**/examples/**/*.vue'],
+		rules: {
+			'vue/enforce-style-attribute': ['error', { allow: ['scoped', 'module'] }],
+		},
+	},
 	{
 		files: ['**/*.json'],
 		ignores: ['package-lock.json'],
@@ -141,6 +158,6 @@ export default defineConfig([
 	},
 	{
 		files: ['**/*.html'],
-		extends: [htmlConfig],
+		extends: [htmlConfig, polarHtmlConfig],
 	},
 ])
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<title>POLAR@next</title>
-		<meta charset="utf-8">
+		<meta charset="utf-8" />
 	</head>
 
 	<body>

@@ -1,37 +1,108 @@
 <template>
 	<h1 class="kern-heading-display">Eisberg-Register</h1>
 	<h2 class="kern-heading-large">Nicht genehmigten Eisberg melden</h2>
-	<polar-map ref="map"></polar-map>
+	<main :class="$style.main">
+		<div v-if="view !== 'menu'" style="margin-bottom: 2em">
+			<a href="#" class="kern-link" @click.prevent="view = 'menu'">
+				<span class="kern-icon kern-icon--arrow-back" aria-hidden="true" />
+				Zurück zur Übersicht
+			</a>
+		</div>
+		<TaskMenu
+			v-if="view === 'menu'"
+			:config-tasks="configTasks"
+			@select="view = $event"
+		/>
+		<IcebergMap v-else-if="view === 'map'" />
+		<component :is="configTaskComponent" v-else-if="configTaskComponent" />
+		<div
+			v-if="view !== 'menu'"
+			style="display: flex; gap: 2em; margin-top: 2em"
+		>
+			<button
+				v-if="viewIndex > 1"
+				class="kern-btn kern-btn--secondary"
+				style="flex: 1"
+				@click="viewIndex = viewIndex - 1"
+			>
+				<span class="kern-icon kern-icon--arrow-back" aria-hidden="true" />
+				<span class="kern-label">Zurück</span>
+			</button>
+			<button
+				v-if="viewIndex <= configTasks.length"
+				class="kern-btn kern-btn--primary"
+				style="flex: 1"
+				@click="viewIndex = viewIndex + 1"
+			>
+				<span class="kern-label">Weiter</span>
+				<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true" />
+			</button>
+		</div>
+	</main>
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { createMap } from '@polar/polar'
-const map = useTemplateRef('map')
+import { computed, ref } from 'vue'
+import kernExtraIcons from 'virtual:kern-extra-icons'
+import LayoutChooser from './components/LayoutChooser.vue'
+import TaskMenu from './components/TaskMenu.vue'
+import IcebergMap from './components/IcebergMap.vue'
 
-createMap(
+const configTasks = [
 	{
-		layers: [
-			{
-				id: '23420',
-				visibility: true,
-				type: 'background',
-				name: 'snowbox.layers.basemap',
-			},
-		],
+		id: 'choose-layout',
+		label: 'Layout wählen',
+		component: LayoutChooser,
 	},
-	'https://geodienste.hamburg.de/services-internet.json'
+]
+const tasks = computed(() => [
+	'menu',
+	...configTasks.map(({ id }) => id),
+	'map',
+])
+
+const view = ref('menu')
+const viewIndex = computed({
+	get: () => tasks.value.indexOf(view.value),
+	set: (value) => {
+		view.value = tasks.value[value] || 'menu'
+	},
+})
+
+const configTaskComponent = computed(
+	() => configTasks.find((task) => task.id === view.value)?.component
 )
+
+document.adoptedStyleSheets.push(kernExtraIcons)
+if (import.meta.hot) {
+	import.meta.hot.on('kern-extra-icons', ({ icons }) => {
+		icons.forEach((icon) => kernExtraIcons.insertRule(icon))
+	})
+}
 </script>
 
 <!-- eslint-disable-next-line vue/enforce-style-attribute -->
 <style>
 @import url('@kern-ux/native/dist/kern.css');
 @import url('@kern-ux/native/dist/fonts/fira-sans.css');
-@import url('@polar/polar/polar.css');
+</style>
+
+<style scoped>
+.kern-link {
+	color: blue !important;
+	& > .kern-icon {
+		background-color: blue !important;
+	}
+}
+</style>
+
+<style module>
+.main {
+	position: relative;
+	margin: 2em 4em;
 
-polar-map {
-	width: 100%;
-	height: 20em;
+	@media (max-width: 65em) {
+		margin: 1.5em 0.5em;
+	}
 }
 </style>
@@ -0,0 +1,84 @@
+<template>
+	<div :class="$style['language-chooser']">
+		<button class="kern-btn kern-btn--secondary" @click="switchLanguage">
+			<span class="kern-icon kern-icon--flag" />
+			<span class="kern-label">{{
+				language === 'de' ? 'Switch to English' : 'Zu Deutsch wechseln'
+			}}</span>
+		</button>
+	</div>
+	<polar-map
+		v-if="store.serviceRegister.length"
+		ref="map"
+		:map-configuration="store.mapConfiguration"
+		:service-register="store.serviceRegister"
+	/>
+</template>
+
+<script setup lang="ts">
+import { ref, useTemplateRef, watch } from 'vue'
+
+import { addPlugins, getStore, subscribe } from '@polar/polar'
+import type { PolarContainer } from '@polar/polar'
+import pluginIconMenu from '@polar/polar/plugins/iconMenu'
+import pluginFullscreen from '@polar/polar/plugins/fullscreen'
+import pluginToast from '@polar/polar/plugins/toast'
+
+import { useIcebergStore } from '../stores/iceberg'
+
+const store = useIcebergStore()
+
+const language = ref('de')
+
+const map = useTemplateRef<typeof PolarContainer>('map')
+watch(map, (map) => {
+	if (!map) {
+		return
+	}
+	addPlugins(map, [
+		pluginIconMenu({
+			displayComponent: true,
+			layoutTag: 'TOP_RIGHT',
+			menus: [
+				{
+					plugin: pluginFullscreen(),
+					hint: 'Full of yourself',
+				},
+			],
+		}),
+		pluginToast({
+			displayComponent: true,
+			layoutTag: 'BOTTOM_MIDDLE',
+		}),
+	])
+
+	subscribe(map, 'core', 'language', (newLanguage) => {
+		language.value = newLanguage as string
+	})
+})
+
+function switchLanguage() {
+	if (!map.value) {
+		return
+	}
+
+	const coreStore = getStore(map.value, 'core')
+	coreStore.language = language.value === 'de' ? 'en' : 'de'
+}
+</script>
+
+<style scoped>
+@import url('@polar/polar/polar.css');
+
+polar-map {
+	display: block;
+	width: 100%;
+	height: 20em;
+}
+</style>
+
+<style module>
+.language-chooser {
+	margin-bottom: 1em;
+}
+</style>
@@ -0,0 +1,47 @@
+<template>
+	<fieldset class="kern-fieldset">
+		<legend class="kern-label">Welches Kartenlayout möchten Sie nutzen?</legend>
+		<div class="kern-fieldset__body">
+			<div
+				v-for="layout of layouts"
+				:key="layout.value"
+				class="kern-form-check"
+			>
+				<input
+					:id="`${id}-${layout.value}`"
+					v-model="store.mapConfiguration.layout"
+					class="kern-form-check__radio"
+					:name="`${id}-layout`"
+					type="radio"
+					:value="layout.value"
+				/>
+				<label :for="`${id}-${layout.value}`" class="kern-label">
+					{{ layout.label }}
+				</label>
+			</div>
+		</div>
+	</fieldset>
+</template>
+
+<script setup lang="ts">
+import type { MapConfiguration } from '@polar/polar'
+import { useId } from 'vue'
+import { useIcebergStore } from '../stores/iceberg'
+
+const id = useId()
+const store = useIcebergStore()
+
+const layouts = [
+	{
+		value: 'standard',
+		label: 'Standard-Layout',
+	},
+	{
+		value: 'nineRegions',
+		label: 'Klassisches Layout',
+	},
+] satisfies {
+	value: MapConfiguration['layout']
+	label: string
+}[]
+</script>
@@ -0,0 +1,55 @@
+<template>
+	<div class="kern-task-list">
+		<div class="kern-task-list__header">
+			<h2 class="kern-heading-medium">Karte konfigurieren</h2>
+		</div>
+		<ul class="kern-task-list__list">
+			<li
+				v-for="(task, idx) of configTasks"
+				:key="idx"
+				class="kern-task-list__item"
+			>
+				<span class="kern-number">{{ idx + 1 }}</span>
+				<div :id="`task${idx + 1}-title`" class="kern-task-list__title">
+					<a
+						href="#"
+						class="kern-link kern-link--stretched"
+						@click.prevent="emit('select', task.id)"
+					>
+						{{ task.label }}
+					</a>
+				</div>
+			</li>
+		</ul>
+		<div class="kern-task-list__header">
+			<h2 class="kern-heading-medium">Eisberg-Meldung</h2>
+		</div>
+		<ul class="kern-task-list__list">
+			<li class="kern-task-list__item">
+				<span class="kern-number">{{ props.configTasks.length + 1 }}</span>
+				<div :id="`task-map-title`" class="kern-task-list__title">
+					<a
+						href="#"
+						class="kern-link kern-link--stretched"
+						@click="emit('select', 'map')"
+					>
+						Karte anzeigen
+					</a>
+				</div>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	configTasks: {
+		id: string
+		label: string
+	}[]
+}>()
+
+const emit = defineEmits<{
+	select: [string]
+}>()
+</script>
@@ -2,10 +2,10 @@
 <html lang="de">
 	<head>
 		<title>Eisberg-Melderegister</title>
-		<meta charset="utf-8">
+		<meta charset="utf-8" />
 		<meta name="viewport"
-			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
 		<script type="module" defer src="index.js"></script>
 	</head>
 

@@ -1,3 +1,7 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { register as registerPolar } from '@polar/polar'
 import App from './App.vue'
-createApp(App).mount('#app')
+
+registerPolar()
+createApp(App).use(createPinia()).mount('#app')
@@ -0,0 +1,9 @@
+import type { PolarContainer } from '@polar/polar'
+
+declare module 'vue' {
+	interface GlobalComponents {
+		/* eslint-disable @typescript-eslint/naming-convention */
+		'polar-map': typeof PolarContainer
+		/* eslint-enable @typescript-eslint/naming-convention */
+	}
+}