Inital Commit

src/routes/simulation/[id]/+page.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import MediaItem from "$lib/MediaItem.svelte";
+
+    let { data } = $props();
+    let id = $derived(data.id);
+
+    let simulation: {
+        id: number;
+        name: string;
+        created_at: string;
+        resources: string[];
+        config: string | null;
+        search_time: number | null;
+        total_time: number | null;
+    } | null = $state(null);
+    let error = $state("");
+
+    onMount(async () => {
+        try {
+            const res = await fetch(`/api/simulations/${id}`);
+            if (!res.ok) throw new Error("Failed to fetch simulation details");
+            simulation = await res.json();
+        } catch (e: any) {
+            error = e.message;
+        }
+    });
+</script>
+
+<a href="/" class="back-link">&lt;&lt; Back to Index</a>
+
+{#if error}
+    <p class="error">Error: {error}</p>
+{:else if !simulation}
+    <p>Loading...</p>
+{:else}
+    <h1>Simulation Detail: {simulation.name}</h1>
+    <p><strong>ID:</strong> {simulation.id}</p>
+    <p><strong>Date Code:</strong> {simulation.created_at}</p>
+
+    {#if simulation.search_time !== null && simulation.total_time !== null}
+        <p>
+            <strong>Search Time:</strong>
+            {simulation.search_time}s | <strong>Total Time:</strong>
+            {simulation.total_time}s
+        </p>
+    {/if}
+
+    {#if simulation.config}
+        <div class="config-box">
+            <strong>Configuration:</strong>
+            <pre>{simulation.config}</pre>
+        </div>
+    {/if}
+
+    <hr />
+
+    <h2>Media & Results</h2>
+    {#if simulation.resources && simulation.resources.length > 0}
+        <div class="media-container">
+            {#each simulation.resources as res}
+                <MediaItem simName={simulation.name} resourceName={res} />
+            {/each}
+        </div>
+    {:else}
+        <p>No resources found for this simulation.</p>
+    {/if}
+{/if}
+
+<style>
+    :global(body) {
+        font-family: "JetBrains Mono", Courier, monospace;
+        background-color: #ffffff;
+        color: #000000;
+    }
+    h1 {
+        font-size: 24px;
+    }
+    h2 {
+        font-size: 20px;
+        margin-top: 30px;
+        border-bottom: 1px solid #000;
+    }
+    a {
+        color: #0000ff;
+        text-decoration: underline;
+    }
+    a:visited {
+        color: #800080;
+    }
+    .back-link {
+        display: inline-block;
+        margin-bottom: 20px;
+    }
+    .error {
+        color: red;
+        font-weight: bold;
+    }
+    hr {
+        border: 0;
+        border-top: 1px solid #000;
+        margin: 20px 0;
+    }
+    .config-box {
+        margin-top: 20px;
+        border: 1px solid #000;
+        padding: 10px;
+        background-color: #f8f8f8;
+        max-width: 800px;
+    }
+    pre {
+        margin: 10px 0 0 0;
+        white-space: pre-wrap;
+    }
+</style>