API and static versions working

bjmckenz · Mar 11, 2024 · 975b178 · 975b178
1 parent cb1dde7
commit 975b178
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.history
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +1,34 @@
+<script>
+    export let containers = [];
+
+    function showContainers() {
+        containers = [
+            { id: 1, name: 'Container 1' },
+            { id: 2, name: 'Container 2' },
+        ] ;
+    }
+</script>
+
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<button on:click="{showContainers}">Show Containers</button>
+
+{#each containers as container}
+    <div>
+        <span class="id">{container.id}</span>
+        <span class="name">{container.name}</span></div>
+{/each}
+
+<a href="/fromapi">Fetch from API</a>
+
+<style>
+    .id {
+        margin-right: 10px;
+        font-weight: bold;
+    }
+    .name {
+        color: #999;
+    }
+</style>
diff --git a/src/routes/fromapi/+page.js b/src/routes/fromapi/+page.js
@@ -0,0 +1,7 @@
+
+export async function load({ fetch }) {
+    const res = await fetch(`http://localhost:3000/containers`);
+    const as_obj = await res.json();
+    //console.log({as_obj});
+    return as_obj;
+}
diff --git a/src/routes/fromapi/+page.svelte b/src/routes/fromapi/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let data;
+	//console.log({data});
+</script>
+
+<h1>Fetched from API</h1>
+
+{#each data.containers as container}
+	<div>
+		<span class="id">{container.id}</span>
+		<span class="name">{container.nameOfShip}</span>
+	</div>
+{/each}
+
+<style>
+	.id {
+		margin-right: 10px;
+		font-weight: bold;
+	}
+	.name {
+		color: #999;
+	}
+</style>