From 5242baa8116ca8fa10bb9a0bb0ba36d8dc8b6bd5 Mon Sep 17 00:00:00 2001
From: Jakob Miksch <info@jakobmiksch.eu>
Date: Wed, 25 Dec 2024 17:41:07 +0100
Subject: [PATCH] Update UI

---
 web-client/src/App.vue                | 40 ++++++++++++++++++---------
 web-client/src/components/OsmInfo.vue | 36 ++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 web-client/src/components/OsmInfo.vue

diff --git a/web-client/src/App.vue b/web-client/src/App.vue
index cdda0c0..cb3040b 100644
--- a/web-client/src/App.vue
+++ b/web-client/src/App.vue
@@ -9,20 +9,15 @@
         color: zoom < minZoomForQuery ? 'red' : 'green'
       }">Zoom Level: {{ zoom?.toFixed(2) }}</p>
       <p>Search Radius: {{ extractedSearchRadius }} meter</p>
-      <p v-if="displayedFeatures.length > 0">{{ displayedFeatures.length }} features found</p>
+      <p v-if="foundFeatures.length > 0">{{ foundFeatures.length }} features found</p>
 
       <div :style="{flex: 1, overflowY: 'auto'}">
-        <p v-for="feature in displayedFeatures" :key="feature" :style="{marginLeft: '10px', marginRight: '10px'}">
-          <b>{{
-          // @ts-ignore
-          feature.geometry ? '' : 'No geometry, because outside of BBOX' }}
-          </b>
-          {{ feature }}
-        </p>
+       <OsmInfo :headline="QueryType.ENCLOSING" :results="enclosingFeatures"/>
+       <OsmInfo :headline="QueryType.AROUND" :results="aroundFeatures"/>
       </div>
     </div>
 
-    <OlMap id="map" :style="{flex: 1}"/>
+    <OlMap id="map" :style="{ flex: 1 }"/>
   </main>
 </template>
 
@@ -35,6 +30,8 @@ import 'ol/ol.css'
 import VectorSource from 'ol/source/Vector'
 import VectorLayer from 'ol/layer/Vector'
 
+import OsmInfo from './components/OsmInfo.vue'
+
 import {GeoJSON} from "ol/format"
 import XYZ from 'ol/source/XYZ'
 import { Feature } from 'ol'
@@ -46,20 +43,37 @@ useGeographic()
 const minZoomForQuery = 14
 
 const { map, onMapClick, extent, zoom } = useOl()
-const displayedFeatures = ref([])
+const foundFeatures = ref([])
 const functionName = ref("")
 const functionNameOptions = ref<string[]>()
 const clickedLatitude = ref(NaN)
 const clickedLongitude = ref(NaN)
 
+enum QueryType {
+  ENCLOSING = 'enclosing',
+  AROUND = 'around'
+}
+
 // @ts-ignore
 const extractedSearchRadius = computed(() => Math.round(10 * Math.pow(1.5, 19 - zoom.value)))
 
+const displayedResult = computed(() => foundFeatures.value.map(feature => {
+  const { geometry, properties } = feature
+  const { query_type, osm_id, osm_type, tags, geometry_type } = properties
+  const url = `https://osm.org/${osm_type}/${osm_id}`
+  const hidden = !geometry
+  return { url, geometry_type, tags, query_type, osm_id, osm_type, hidden }
+}))
+
+const enclosingFeatures = computed(() => displayedResult.value.filter(result => result.query_type === QueryType.ENCLOSING))
+
+const aroundFeatures = computed(()=>displayedResult.value.filter(result => result.query_type === QueryType.AROUND))
+
 const resultVectorSource = new VectorSource()
 const pointDataSource = new VectorSource()
 
 const reset = (() => {
-  displayedFeatures.value = []
+  foundFeatures.value = []
   resultVectorSource.clear()
   pointDataSource.clear()
 })
@@ -69,7 +83,7 @@ const triggerRequest = () => {
   // @ts-ignore
   if (zoom.value < minZoomForQuery) {
     // @ts-ignore
-    alert(`Zoom must be below ${minZoom}`)
+    alert(`Zoom must be below ${minZoomForQuery}`)
     return
   }
 
@@ -84,7 +98,7 @@ const triggerRequest = () => {
     .then(geojson => {
 
     const { features } = geojson
-    displayedFeatures.value = features
+    foundFeatures.value = features
 
     const olFeatures = new GeoJSON().readFeatures(geojson) as any // TODO: fix TS anys
 
diff --git a/web-client/src/components/OsmInfo.vue b/web-client/src/components/OsmInfo.vue
new file mode 100644
index 0000000..10b368a
--- /dev/null
+++ b/web-client/src/components/OsmInfo.vue
@@ -0,0 +1,36 @@
+<template>
+    <h3 v-show="hasResults">{{ headline }}</h3>
+    <p v-for="{geometry_type, osm_id, osm_type, tags, url, hidden} in results" :key="osm_id" :style="{marginLeft: '10px', marginRight: '10px'}">
+        <h4>
+        <a :href="url" target="_blank" :style="{marginRight: '5px'}">{{ osm_type }} {{ osm_id }}</a>
+        <span v-if="hidden">(hidden)</span> <span>{{ geometry_type }}</span>
+        </h4>
+        <table>
+        <tbody>
+            <tr v-for="(value, key) in tags" :key="key">
+            <td :style="{fontWeight: 'bold'}">{{ key }}</td>
+            <td>{{ value }}</td>
+            </tr>
+        </tbody>
+        </table>
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  results: any;
+  headline: string;
+}>();
+
+const hasResults = computed(() => !!props.results.length);
+</script>
+
+<style scoped>
+table, td {
+  border: 1px solid #ddd;
+  border-collapse: collapse;
+  padding: 8px;
+}
+</style>