3 files changed, 183 insertions, 0 deletions
diff --git a/api/WhatApi/Templates/TemplateFulfiller.cs b/api/WhatApi/Templates/TemplateFulfiller.cs
new file mode 100644
index 0000000..19d3bde
--- /dev/null
+++ b/api/WhatApi/Templates/TemplateFulfiller.cs
@@ -0,0 +1,23 @@
+using Fluid;
+
+namespace WhatApi.Templates;
+
+public class TemplateFulfiller
+{
+    private static readonly FluidParser Parser = new();
+    private static readonly string TemplateDirectory = Path.Combine(Directory.GetCurrentDirectory(), "Templates");
+    private static string WebMapTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_map.liquid"));
+    private static string WebUploadTemplate => File.ReadAllText(Path.Combine(TemplateDirectory, "web_upload.liquid"));
+
+    public static string WebMapPage(object? data = null) {
+        Parser.TryParse(WebMapTemplate, out var template);
+        var context = data is null ? new TemplateContext() : new TemplateContext(data);
+        return template.Render(context);
+    }
+
+    public static string WebUploadPage(object? data = null) {
+        Parser.TryParse(WebUploadTemplate, out var template);
+        var context = data is null ? new TemplateContext() : new TemplateContext(data);
+        return template.Render(context);
+    }
+}
+\ No newline at end of file
diff --git a/api/WhatApi/Templates/web_map.liquid b/api/WhatApi/Templates/web_map.liquid
new file mode 100644
index 0000000..d0a70e7
--- /dev/null
+++ b/api/WhatApi/Templates/web_map.liquid
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link href="https://unpkg.com/maplibre-gl@^5.7.2/dist/maplibre-gl.css"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body, #map {
+            height: 90%;
+        }
+    </style>
+    <title></title>
+</head>
+<body>
+<div id="map"></div>
+<script src="https://unpkg.com/maplibre-gl@^5.7.2/dist/maplibre-gl.js"></script>
+<script>
+	const map = new maplibregl.Map({
+		container: "map",
+		style: "https://tiles.openfreemap.org/styles/bright",
+		center: [10.253494570441944, 59.937419399772125],
+		zoom: 7
+	});
+
+	const markers = new Map();
+
+	let t = null;
+
+	map.on("moveend", () => {
+		clearTimeout(t);
+		t = setTimeout(updateData, 150);
+	});
+
+	map.on("load", () => {
+		map.loadImage("/pin.png").then(image => map.addImage("custom-marker", image.data));
+		map.addSource("places", {
+			type: "geojson",
+			data: {type: "FeatureCollection", features: []},
+			// cluster: true,
+			// clusterRadius: 40,
+			// clusterMaxZoom: 14
+		});
+
+		map.addLayer({
+			id: "places-layer",
+			type: "symbol",
+			source: "places",
+			layout: {
+				"icon-image": "custom-marker"
+			}
+		});
+
+		updateData();
+	});
+
+	let aborter = new AbortController();
+
+	async function updateData() {
+		const b = map.getBounds();
+		const south = b.getSouth(), west = b.getWest(), north = b.getNorth(), east = b.getEast();
+
+		if (aborter) {
+			aborter.abort();
+		}
+
+		aborter = new AbortController();
+
+		const res = await fetch(`/places?w=${west}&s=${south}&e=${east}&n=${north}`, {
+			signal: aborter.signal
+		});
+
+		if (!res.ok) {
+			return;
+		}
+
+		const data = await res.json().finally(() => aborter = null);
+		map.getSource("places").setData(data);
+	}
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/api/WhatApi/Templates/web_upload.liquid b/api/WhatApi/Templates/web_upload.liquid
new file mode 100644
index 0000000..5688a01
--- /dev/null
+++ b/api/WhatApi/Templates/web_upload.liquid
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <link href="https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.css"
+          rel="stylesheet"/>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body, #map {
+            height: 100%;
+        }
+
+        .coordinates {
+            background: rgba(0, 0, 0, 0.5);
+            color: #fff;
+            position: absolute;
+            bottom: 40px;
+            left: 10px;
+            padding: 5px 10px;
+            margin: 0;
+            font-size: 11px;
+            line-height: 18px;
+            border-radius: 3px;
+            display: none;
+        }
+    </style>
+    <title></title>
+</head>
+<body>
+<div style="display: flex; flex-direction: row; align-items: center; z-index: 10; position: absolute; background: white">
+    <form action="/upload"
+          enctype="multipart/form-data"
+          method="post">
+        <input type="hidden"
+               name="LatLong">
+        <input type="file"
+               required="required"
+               accept="image/png, image/jpeg"
+               name="File">
+        <input type="submit">
+    </form>
+</div>
+<div id="map"></div>
+<pre id="coordinates"
+     class="coordinates"></pre>
+<script src='https://unpkg.com/maplibre-gl@5.9.0/dist/maplibre-gl.js'></script>
+<script>
+	const latlongInput = document.querySelector("[name=LatLong]");
+	const coordinates = document.getElementById("coordinates");
+	const map = new maplibregl.Map({
+		container: "map",
+		style: "https://tiles.openfreemap.org/styles/bright",
+		center: [10.253494, 59.937419],
+		zoom: 7
+	});
+
+	const center = map.getCenter();
+	const marker = new maplibregl.Marker({draggable: true}).setLngLat([center.lng, center.lat]).addTo(map);
+
+	function onDragEnd() {
+		const {lat: lat, lng: lng} = marker.getLngLat();
+		coordinates.style.display = "block";
+		latlongInput.value = lat + "," + lng;
+		coordinates.innerHTML =
+			`Longitude: ${lng}<br />Latitude: ${lat}`;
+	}
+
+	marker.on("dragend", onDragEnd);
+</script>
+</body>
+</html>
+\ No newline at end of file