show field of view, display tags in tabular form

webapp/src/components/DFMapMarker.vue

@@ -0,0 +1,61 @@
+<template>
+  <l-circle-marker :lat-lng="[alpr.lat, alpr.lon]" :radius="7" color="#3f54f3">
+    <l-popup>
+      <DFMapPopup :alpr="alpr" />
+    </l-popup>
+  </l-circle-marker>
+  <l-polygon
+    :lat-lngs="directionIndicatorPolygonCoordinates"
+    :options="{ color: 'red' }"
+    v-if="showFov"
+  >
+    <!-- TODO: use the same popup -->
+    <l-popup>
+      <DFMapPopup :alpr="alpr" />
+    </l-popup>
+  </l-polygon>
+</template>
+
+<script setup lang="ts">
+import { LMarker, LCircleMarker, LFeatureGroup, LPolygon, LPopup } from '@vue-leaflet/vue-leaflet';
+import DFMapPopup from '@/components/DFMapPopup.vue';
+import type { ALPR } from '@/types';
+import type { PropType } from 'vue';
+import { computed, defineProps } from 'vue';
+
+const props = defineProps({
+  alpr: {
+    type: Object as PropType<ALPR>,
+    required: true
+  },
+  showFov: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const directionIndicatorPolygonCoordinates = computed(() => {
+  const { lat, lon } = props.alpr;
+  const direction = parseInt(props.alpr.tags.direction);
+  const fov = 30; // Field of view in degrees
+  const distance = 0.0004; // Distance for the triangle points
+
+  const toRadians = (degrees: number) => degrees * (Math.PI / 180);
+
+  const pointL = {
+    lat: lat + distance * Math.cos(toRadians(direction - fov / 2)),
+    lon: lon + distance * Math.sin(toRadians(direction - fov / 2))
+  };
+
+  const pointR = {
+    lat: lat + distance * Math.cos(toRadians(direction + fov / 2)),
+    lon: lon + distance * Math.sin(toRadians(direction + fov / 2))
+  };
+
+  return [
+    [lat, lon],
+    [pointL.lat, pointL.lon],
+    [pointR.lat, pointR.lon]
+  ];
+});
+</script>

webapp/src/components/DFMapPopup.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-sheet>
+    <v-data-table density="compact" hide-default-footer disable-sort :items="kvTags" />
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue';
+import type { PropType } from 'vue';
+import type { ALPR } from '@/types';
+
+const props = defineProps({
+  alpr: {
+    type: Object as PropType<ALPR>,
+    required: true
+  }
+});
+
+const valueTransformations: { [key: string]: (value: string) => string } = {
+  direction: (value: string) => `${degreesToCardinal(parseInt(value))} ${value}º`
+};
+
+const whitelistedTags = ['brand', 'camera:mount', 'camera:type', 'direction', 'operator'];
+
+const kvTags = computed(() => {
+  return Object.entries(props.alpr.tags)
+    .filter(([key]) => whitelistedTags.includes(key))
+    .map(([key, value]) => ({ key, value: valueTransformations[key]?.(value) ?? value }));
+});
+
+function degreesToCardinal(degrees: number): string {
+  const cardinals = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+  return cardinals[Math.round(degrees / 45) % 8];
+}
+</script>