added container example

bjmckenz · Apr 6, 2024 · 970de5a · 970de5a
1 parent 317d333
commit 970de5a
Show file tree

Hide file tree

Showing 7 changed files with 453 additions and 313 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/ContainerSummaryRow.svelte b/src/lib/ContainerSummaryRow.svelte
@@ -0,0 +1,39 @@
+<script>
+	export let container;
+</script>
+
+<div class="row">
+	<div class="id">{container.containerNumber}</div>
+	<div class="shipname">{container.nameOfShip}</div>
+	<div class="date">{container.dateContainerShipped}</div>
+	<div class="size">{container.containerSize}</div>
+</div>
+
+<style>
+	.row {
+		display: flex;
+		background-color: #eee;
+	}
+	.id,
+	.shipname,
+	.size,
+	.date {
+		margin: 5px;
+	}
+	.id {
+		font-weight: bold;
+		flex: 1;
+	}
+	.size {
+		text-align: right;
+		flex: 0 0 50px;
+	}
+	.date {
+		flex: 0 0 100px;
+		text-align: center;
+	}
+	.shipname {
+		flex: 1;
+		color: #999;
+	}
+</style>
diff --git a/src/lib/ContainerTable.svelte b/src/lib/ContainerTable.svelte
@@ -0,0 +1,30 @@
+<script>
+    import ContainerSummaryRow from './ContainerSummaryRow.svelte';
+	export let containers = [];
+    export let onContainerClicked = () => {};
+</script>
+
+<h3>A PseudoTable Component</h3>
+
+<p>This is an example of Svelte containers, NOT the best way to create a simple table. It probably should be done in the ContainerTable component so that it it is easy to add callbacks for people clicking the shipname or id or...</p>
+
+<p>Notice that tab order is set correctly with the index into the container object.</p>
+{#each containers as container, ix}
+	<div
+        role="button"
+		tabindex={ix+1}
+		on:keydown={(e) => e.key === 'Enter' && onContainerClicked(container, e)}
+		on:click={(e) => onContainerClicked(container, e)}>
+
+        <div class=row>
+            <ContainerSummaryRow {container}/>
+        </div>
+	</div>
+{/each}
+
+<style>
+    .row {
+        margin: 5px;
+        border: 1px solid black;
+    }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,4 @@
-<h1>Svelte+API Starter Kit</h1>
+<h1>Svelte+API+??? Starter Kit</h1>
 <slot />
 
 <hr/>
@@ -9,13 +9,4 @@
         margin-top: 20px;
         margin-right: 10px;
     }
-    h1 {
-        color: #e70fca;
-    }
-    p {
-        color: #4be4a7c3;
-    }
-    button {
-        margin-right: 10px;
-    }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -31,6 +31,12 @@
 <button on:click={() => {goto('/fromDB')}}>Use Database</button>
 
 
+<p>Step 8: See how to create Svelte components</p>
+<span class=note>(uses db, so create the .env file as above)</span>
+<br/>
+<button on:click={() => {goto('/fromDBandComponents')}}>Use Components</button>
+
+
 <style>
     .note {
         font-style: italic;

diff --git a/src/routes/fromDBandComponents/+page.server.js b/src/routes/fromDBandComponents/+page.server.js
@@ -0,0 +1,24 @@
+
+import {database_handle} from '$lib/server/database';
+
+let db;
+
+export async function load() {
+    if (!db) {
+        db = database_handle();
+    }
+    const sql = `
+    SELECT 
+        containerNumber,
+        nameOfShip,
+        containerSize,
+        dateContainerShipped
+    FROM
+        containers`;
+    const stmt = db.prepare(sql);
+    const rows = stmt.all();
+
+    console.log({rows});
+
+    return { containers: rows };
+}
diff --git a/src/routes/fromDBandComponents/+page.svelte b/src/routes/fromDBandComponents/+page.svelte
@@ -0,0 +1,19 @@
+<script>
+	import ContainerTable from '$lib/ContainerTable.svelte';
+	export let data;
+
+	let clickedContainerNumber = "none"
+
+	function containerClicked(container) {
+		console.log('Container clicked:', container.containerNumber);
+		if (container) {
+			clickedContainerNumber = container.containerNumber
+		}
+	}
+</script>
+
+<h1>Leaning into Svelte's approach: Components for UI elements</h1>
+
+<ContainerTable containers={data.containers} onContainerClicked={containerClicked} />
+
+<span class=i>Last container clicked: {clickedContainerNumber}</span>