From 198cd4eb3d4375855da0678449e0968d280ddde5 Mon Sep 17 00:00:00 2001
From: Cfp <jannik@picoscratch.de>
Date: Thu, 14 Aug 2025 13:36:14 +0200
Subject: [PATCH] feat: add more infos to info sidebar

---
 .../components/lnv/info/FuelStation.svelte    | 54 ++++++++++---------
 .../components/lnv/info/InternetAccess.svelte | 21 ++++++++
 .../components/lnv/info/RestaurantInfo.svelte | 22 ++++++++
 .../components/lnv/sidebar/InfoSidebar.svelte | 28 +++++++---
 4 files changed, 93 insertions(+), 32 deletions(-)
 create mode 100644 src/lib/components/lnv/info/InternetAccess.svelte
 create mode 100644 src/lib/components/lnv/info/RestaurantInfo.svelte

diff --git a/src/lib/components/lnv/info/FuelStation.svelte b/src/lib/components/lnv/info/FuelStation.svelte
index 60d4603..4c8df3d 100644
--- a/src/lib/components/lnv/info/FuelStation.svelte
+++ b/src/lib/components/lnv/info/FuelStation.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Badge from "$lib/components/ui/badge/badge.svelte";
 	import { getStations } from "$lib/services/MTSK";
+	import RequiresCapability from "../RequiresCapability.svelte";
 
 	let { tags, lat, lng } = $props();
 </script>
@@ -9,33 +10,34 @@
 <ul class="flex gap-2 flex-wrap">
 	{#each Object.entries(tags).filter( ([key]) => key.startsWith("fuel:"), ) as [key, tag] (key)}
 		<!-- <li>{key.replace("fuel:", "")}: {tag}</li> -->
-		<Badge>
-			{key.replace("fuel:", "")}
-			{#if tag !== "yes"}
-				({tag})
-			{/if}
-		</Badge>
+		{#if tag == "yes"}
+			<Badge>
+				{key.replace("fuel:", "")}
+			</Badge>
+		{/if}
 	{/each}
 </ul>
 
-<h3 class="text-lg font-bold mt-2">Prices</h3>
-{#await getStations(lat, lng)}
-	<p>Loading fuel prices...</p>
-{:then stations}
-	{#if stations.stations.length > 0}
-		{@const station = stations.stations[0]}
-		{#if station.diesel}
-			<p>Diesel: {station.diesel}</p>
+<RequiresCapability capability="fuel">
+	<h3 class="text-lg font-bold mt-2">Prices</h3>
+	{#await getStations(lat, lng)}
+		<p>Loading fuel prices...</p>
+	{:then stations}
+		{#if stations.stations.length > 0}
+			{@const station = stations.stations[0]}
+			{#if station.diesel}
+				<p>Diesel: {station.diesel}</p>
+			{/if}
+			{#if station.e10}
+				<p>E10: {station.e10}</p>
+			{/if}
+			{#if station.e5}
+				<p>E5: {station.e5}</p>
+			{/if}
+		{:else}
+			<p>No fuel prices available.</p>
 		{/if}
-		{#if station.e10}
-			<p>E10: {station.e10}</p>
-		{/if}
-		{#if station.e5}
-			<p>E5: {station.e5}</p>
-		{/if}
-	{:else}
-		<p>No fuel prices available.</p>
-	{/if}
-{:catch err}
-	<p>Error loading fuel prices: {err.message}</p>
-{/await}
+	{:catch err}
+		<p>Error loading fuel prices: {err.message}</p>
+	{/await}
+</RequiresCapability>
diff --git a/src/lib/components/lnv/info/InternetAccess.svelte b/src/lib/components/lnv/info/InternetAccess.svelte
new file mode 100644
index 0000000..01d31c1
--- /dev/null
+++ b/src/lib/components/lnv/info/InternetAccess.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Badge from "$lib/components/ui/badge/badge.svelte";
+
+	let { tags } = $props();
+
+	const tag = $derived(tags.internet_access);
+	const splitter = $derived(tag.split(";"));
+</script>
+
+{#if tag != "no"}
+	<h3 class="text-lg font-bold mt-2">Internet Access</h3>
+	{#each splitter as value, _index (value)}
+		<Badge>{value}</Badge>
+	{/each}
+	{#if tags["internet_access:fee"] && tags["internet_access:fee"] != "no"}
+		<Badge>Fee: {tags["internet_access:fee"]}</Badge>
+	{/if}
+	{#if tags["internet_access:ssid"]}
+		<Badge>{tags["internet_access:ssid"]}</Badge>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/lnv/info/RestaurantInfo.svelte b/src/lib/components/lnv/info/RestaurantInfo.svelte
new file mode 100644
index 0000000..1ea4ddc
--- /dev/null
+++ b/src/lib/components/lnv/info/RestaurantInfo.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Badge from "$lib/components/ui/badge/badge.svelte";
+
+	let { tags } = $props();
+
+	const TAGS = ["cuisine", "indoor_seating", "outdoor_seating", "takeaway", "drive_through"];
+
+	const matchingTags = TAGS.filter(tag => tag in tags);
+</script>
+
+{#if matchingTags.length > 0}
+	<h3 class="text-lg font-bold mt-2">Restaurant</h3>
+	<ul class="flex gap-2 flex-wrap">
+		{#each matchingTags as tag}
+			{#if tag != "no"}
+				<Badge>
+					{tag}{tags[tag] == "yes" ? "" : ": " + tags[tag]}
+				</Badge>
+			{/if}
+		{/each}
+	</ul>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/lnv/sidebar/InfoSidebar.svelte b/src/lib/components/lnv/sidebar/InfoSidebar.svelte
index fc42ae4..9c00e58 100644
--- a/src/lib/components/lnv/sidebar/InfoSidebar.svelte
+++ b/src/lib/components/lnv/sidebar/InfoSidebar.svelte
@@ -23,12 +23,16 @@
 	import MapAi from "../info/MapAI.svelte";
 	import RequiresCapability from "../RequiresCapability.svelte";
 	import { saved, saveLocations } from "$lib/saved.svelte";
+	import { getDeveloperToggle } from "./settings/developer.svelte";
+	import InternetAccess from "../info/InternetAccess.svelte";
+	import RestaurantInfo from "../info/RestaurantInfo.svelte";
 
 	// let { feature }: { feature: Feature } = $props();
 
 	// let Icon = $derived(POIIcons[feature.properties.osm_key + "=" + feature.properties.osm_value]);
 
 	let { lat, lng }: { lat: number; lng: number } = $props();
+	const dev = getDeveloperToggle();
 
 	function getIcon(
 		tags: Record<string, string>,
@@ -207,6 +211,16 @@
 							<BriefcaseIcon />
 							Set as Work
 						</Button>
+						{#if dev.current}
+							<Button
+								variant="outline"
+								onclick={() => {
+									alert(JSON.stringify(elements, null, 3))
+									console.log(elements);
+								}}>
+								Show raw data
+							</Button>
+						{/if}
 					</div>
 				</Popover.Content>
 			</Popover.Root>
@@ -228,10 +242,14 @@
 			<OpeningHours hours={tags.opening_hours} {lat} lon={lng} />
 		{/if}
 
+		{#if tags.internet_access}
+			<InternetAccess {tags} />
+		{/if}
+
+		<RestaurantInfo {tags} />
+
 		{#if tags.amenity == "fuel"}
-			<RequiresCapability capability="fuel">
-				<FuelStation {tags} {lat} {lng} />
-			</RequiresCapability>
+			<FuelStation {tags} {lat} {lng} />
 		{/if}
 
 		<!-- any payment:* tag -->
@@ -239,7 +257,7 @@
 			<h3 class="text-lg font-bold mt-2">Payment Methods</h3>
 			<ul style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
 				{#each Object.entries(tags).filter( ([key]) => key.startsWith("payment:"), ) as [key, value] (key)}
-					<Badge>{key.replace("payment:", "")}: {value}</Badge>
+					<Badge>{key.replace("payment:", "")}{value == "yes" ? "" : ": " + value}</Badge>
 				{/each}
 			</ul>
 		{/if}
@@ -249,8 +267,6 @@
 		</RequiresCapability>
 
 		<span style="color: #acacac;">&copy; OpenStreetMap</span>
-
-		<pre>{JSON.stringify(elements, null, 2)}</pre>
 	{/if}
 {:catch err}
 	<SidebarHeader