From eea4fad2bd2da648bde7f53885b01cea5a495449 Mon Sep 17 00:00:00 2001
From: lauchmelder <robert.altner@einweckglas.com>
Date: Wed, 5 Mar 2025 18:09:51 +0100
Subject: [PATCH] add basiv webview for font results

---
 client/src/components/glyphview.svelte | 37 +++++++++++++++++++
 client/src/routes/+page.svelte         | 50 ++++++++++++++++++++++++--
 server/src/webview/main.rs             | 24 +++++++++++--
 3 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/glyphview.svelte

diff --git a/client/src/components/glyphview.svelte b/client/src/components/glyphview.svelte
new file mode 100644
index 0000000..48ead6d
--- /dev/null
+++ b/client/src/components/glyphview.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	let glyphSVG = $state("");
+
+	let { selectedChar = "", loading = $bindable() } = $props();
+
+	$effect(() => {
+		if (selectedChar === "") {
+			return;
+		}
+
+		loading = true;
+		const response = fetch(`http://localhost:8000/glyph/${selectedChar}`)
+		.then((data) => {
+			data.text().then((result) => { glyphSVG = result });
+		})
+		.catch((err) => {
+			console.log(err);
+		})
+		.finally(() => {
+			loading = false;
+		});
+	});
+
+	export { selectedChar }
+	export { loading }
+</script>
+
+<div class="glyph">
+{@html glyphSVG }
+</div>
+
+<style>
+	:global(.glyph > svg) {
+		max-height: 50vh;
+		max-width: 50vw;
+	}
+</style>
diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index cc88df0..3f1eb60 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -1,2 +1,48 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import Glyphview from "../components/glyphview.svelte";
+
+	let charInput = $state("");
+	let glyphLoading = $state(false);
+</script>
+
+<h1>Font Explorer</h1>
+
+<div class="content">
+	<div class="char-input">
+		<input type="text" maxlength="1" bind:value={ charInput } disabled={ glyphLoading } />
+	</div>
+	<div>
+		<p>{ glyphLoading }</p>
+		<Glyphview selectedChar={charInput} bind:loading={glyphLoading} />
+	</div>
+</div>
+	
+
+<style>
+	.content {
+		display: grid;
+		grid-template-columns: 20% auto;
+		width: auto;
+		padding: 1em 2em;
+	}
+
+	.content > div {
+		border: solid 1px black;
+	}
+
+	.char-input {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		gap: 0.1em;
+		padding: 0.2em;
+	}
+
+	.char-input > input {
+		width: 1.3em;
+		height: 1.3em;
+		font-size: 3em;
+		text-align: center;
+	}
+</style>
diff --git a/server/src/webview/main.rs b/server/src/webview/main.rs
index 90f3aa1..10bfe09 100644
--- a/server/src/webview/main.rs
+++ b/server/src/webview/main.rs
@@ -1,9 +1,28 @@
 #[macro_use] extern crate rocket;
 
-use std::{fs::File, net::{IpAddr, Ipv4Addr}, sync::Mutex};
+use std::{fs::File, future::Future, net::{IpAddr, Ipv4Addr}, sync::Mutex};
 
 use fontloader::{writer::Visitor, Font, SvgWriter};
-use rocket::{response::{content, status}, Config, State};
+use rocket::{fairing::{Fairing, Info, Kind}, http::Header, response::{content, status}, Config, State};
+
+struct CORS;
+
+#[rocket::async_trait]
+impl Fairing for CORS {
+	fn info(&self) -> Info {
+		Info {
+			name: "Adding CORS headers to responses",
+			kind: Kind::Response
+		}
+	}
+
+	async fn on_response<'r>(&self, _req: &'r rocket::Request<'_>, response: &mut rocket::Response<'r>) {
+		response.set_header(Header::new("Access-Control-Allow-Origin", "*"));
+        response.set_header(Header::new("Access-Control-Allow-Methods", "POST, GET, PATCH, OPTIONS"));
+        response.set_header(Header::new("Access-Control-Allow-Headers", "*"));
+        response.set_header(Header::new("Access-Control-Allow-Credentials", "true"));
+	}
+}
 
 struct SharedFont {
 	font: Mutex<Font>
@@ -43,4 +62,5 @@ fn rocket() -> _ {
 	rocket::custom(config)
 		.manage(SharedFont { font: Mutex::from(font) })
 		.mount("/", routes![get_glyph])
+		.attach(CORS)
 }