barebones docker | pocketbase | hono | svelte

frontend/src/routes/debug/+page.server.ts

@@ -0,0 +1,6 @@
+import { DEBUG_RECORD_ID } from '../../../../config';
+export async function load({ locals }) {
+	return {
+		recordId: DEBUG_RECORD_ID
+	};
+}

frontend/src/routes/debug/+page.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import { pb } from "$lib/pocketbase";
+	let { data } = $props();
+	let records = $state(null);
+	$effect(async () => {
+		records = await pb.collection('debug').getOne(data.recordId);
+		return await pb.collection('debug').subscribe(data.recordId, ({ action, record }) => {
+		  records = record
+        // if (action === 'create') {
+        // 		todos = [...todos, record];
+        //  	}
+
+        //  	if (action === 'update') {
+        // 		todos = todos.map((t) =>
+        //  			t.id === record.id ? record : t
+        // 		);
+        //  	}
+
+        //  	if (action === 'delete') {
+        // 		todos = todos.filter((t) =>
+        //  			t.id !== record.id
+        // 		);
+        //  	}
+        });
+	});
+
+	async function incrementHono() {
+	    try {
+  		const response = await fetch('/api/increment-hono', { method: 'POST' });
+  		const data = await response.json();
+  		console.log(data);
+		} catch (error) {
+		console.error(error);
+		}
+	}
+</script>
+
+<h1>Debug Dashboard</h1>
+
+<div class="counters">
+	<div class="card">
+		<h2>Hono</h2>
+		{#if records}
+		<p class="value">{records.hono_count}</p>
+		{/if}
+		<button onclick={incrementHono}>+1 Hono</button>
+	</div>
+
+
+</div>
+
+<style>
+	h1 {
+		text-align: center;
+		margin: 2rem 0;
+	}
+	.counters {
+		display: flex;
+		gap: 2rem;
+		justify-content: center;
+	}
+	.card {
+		border: 1px solid #ccc;
+		border-radius: 8px;
+		padding: 2rem;
+		text-align: center;
+		min-width: 200px;
+	}
+	.value {
+		font-size: 3rem;
+		font-weight: bold;
+		margin: 1rem 0;
+	}
+	button {
+		padding: 0.5rem 1.5rem;
+		font-size: 1rem;
+		cursor: pointer;
+	}
+</style>