Show node on map in confirmation before deleting it.

frontend/src/components/NodeMap.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import "leaflet/dist/leaflet.css";
+import { onMounted, ref } from "vue";
+import { useConfigStore } from "@/stores/config";
+import type { Coordinates } from "@/types";
+import * as L from "leaflet";
+import { parseToFloat } from "@/utils/Numbers";
+
+const wrapper = ref<HTMLElement>();
+const configStore = useConfigStore();
+
+interface Props {
+    coordinates?: Coordinates;
+}
+
+const props = defineProps<Props>();
+
+onMounted(renderMap);
+
+function getLayers(): {
+    layers: { [name: string]: L.Layer };
+    defaultLayers: L.Layer[];
+} {
+    const layers: { [name: string]: L.Layer } = {};
+    const defaultLayers: L.Layer[] = [];
+    for (const [id, layerCfg] of Object.entries(
+        configStore.getConfig.coordsSelector.layers
+    )) {
+        const layerOptions = layerCfg.layerOptions;
+
+        const layer = L.tileLayer(layerCfg.url, {
+            id,
+            ...layerOptions,
+        });
+
+        layers[layerCfg.name] = layer;
+        if (defaultLayers.length === 0) {
+            defaultLayers.push(layer);
+        }
+    }
+    return { layers, defaultLayers };
+}
+
+function createMap(defaultLayers: L.Layer[], layers: { [p: string]: L.Layer }) {
+    const element = wrapper.value;
+    if (!element) {
+        throw new Error("Illegal state: Map wrapper element not set.");
+    }
+
+    const options: L.MapOptions = {
+        renderer: new L.Canvas(),
+        minZoom: 2,
+        crs: L.CRS.EPSG3857,
+        zoomControl: true,
+        worldCopyJump: true,
+        maxBounds: L.latLngBounds([90, -540.5], [-90, 540.5]),
+        attributionControl: true,
+        layers: defaultLayers,
+    };
+    const map = L.map(element, options);
+    L.control.layers(layers).addTo(map);
+
+    return map;
+}
+
+function centerOnCoordinates(map: L.Map) {
+    let { lat, lng, defaultZoom: zoom } = configStore.getConfig.coordsSelector;
+
+    if (props.coordinates) {
+        [lat, lng] = props.coordinates.split(" ").map(parseToFloat);
+        zoom = map.getMaxZoom();
+        L.marker([lat, lng], {}).addTo(map);
+    }
+    map.setView([lat, lng], zoom);
+}
+
+function renderMap() {
+    const { layers, defaultLayers } = getLayers();
+    const map = createMap(defaultLayers, layers);
+    centerOnCoordinates(map);
+}
+</script>
+
+<template>
+    <div class="map-container">
+        <div class="map" ref="wrapper"></div>
+    </div>
+</template>
+
+<style lang="scss">
+@use "sass:math";
+@import "../scss/variables";
+.map-container {
+    position: relative;
+
+    width: 100%;
+    padding-top: math.percentage(math.div(1, $node-map-aspect-ratio));
+
+    .map {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        border-radius: $node-map-border-radius;
+    }
+}
+</style>

frontend/src/components/nodes/NodeDeleteConfirmationForm.vue

@@ -103,6 +103,9 @@ async function onAbort() {
 
 <style lang="scss" scoped>
 .preview {
-    margin: 1em 0;
+    margin: {
+        top: 1em;
+        bottom: 1em;
+    }
 }
 </style>

frontend/src/components/nodes/NodePreviewCard.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { StoredNode } from "@/types";
 import { MonitoringState } from "@/types";
+import NodeMap from "@/components/NodeMap.vue";
 
 interface Props {
     node: StoredNode;
@@ -54,11 +55,21 @@ const props = defineProps<Props>();
                 nicht aktiv
             </span>
         </div>
+
+        <NodeMap class="node-map" :coordinates="props.node.coords" />
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import "../../scss/variables";
+@import "../../scss/mixins";
+
+@include min-page-breakpoint(medium) {
+    .node-preview-card {
+        max-width: nth(map-get($page-breakpoints, small), 1);
+        margin: 0 auto;
+    }
+}
 
 .node-preview-card {
     display: flex;
@@ -76,6 +87,10 @@ const props = defineProps<Props>();
         text-align: center;
     }
 
+    .node-map {
+        margin: $node-preview-card-map-margin;
+    }
+
     .field {
         margin: $node-preview-card-field-margin;
         max-width: 100%;