fetch a single container

bjmckenz · Mar 12, 2024 · d599c3d · d599c3d
1 parent 6124a21
commit d599c3d
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,9 @@
 		"smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
 	},
 	"devDependencies": {
+		"@smui/button": "^7.0.0-beta.16",
 		"@smui/data-table": "^7.0.0-beta.16",
+		"@smui/textfield": "^7.0.0-beta.16",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -18,6 +18,10 @@
 <p>Step 4: Use Svelte MUI to display data</p>
 <button on:click={() => {goto('/fromapi_mui')}}>Show Containers in nice table</button>
 
+<p>Step 5: Use a "form" to collect user data and make an API request</p>
+<button on:click={() => {goto('/fetchContainer')}}>Fetch A Container</button>
+
+
 <style>
     .note {
         font-style: italic;

diff --git a/src/routes/fetchContainer/+page.svelte b/src/routes/fetchContainer/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	import Button, { Label } from '@smui/button';
+	import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
+	import Textfield from '@smui/textfield';
+	import HelperText from '@smui/textfield/helper-text';
+
+	let container;
+	let containerNumber = '';
+
+	const fetchContainer = async (containerName) => {
+		const res = await fetch(`http://localhost:3000/container/${containerName}`);
+		const data = await res.json();
+		return data.containers[0];
+	};
+</script>
+
+<h1>View a Container</h1>
+
+<Textfield variant="filled" bind:value={containerNumber} label="Container Number to View">
+	<HelperText slot="helper">May include letters</HelperText>
+</Textfield>
+
+<Button
+	variant="raised"
+	on:click={async () => {
+		container = await fetchContainer(containerNumber);
+		console.log(container);
+	}}><Label>Fetch Container {containerNumber}</Label></Button
+>
+<br />
+{#if container}
+	<DataTable table$aria-label="Container Details" style="max-width: 100%;">
+		<Head>
+			<Row>
+				<Cell>Attribute</Cell>
+				<Cell>Value</Cell>
+			</Row>
+		</Head>
+		<Body>
+			<Row>
+				<Cell>Container Number</Cell>
+				<Cell>{container.containerNumber}</Cell>
+			</Row>
+			<Row>
+				<Cell>Container Size</Cell>
+				<Cell numeric>{container.containerSize}</Cell>
+			</Row>
+			<Row>
+				<Cell>Date of Shipment</Cell>
+				<Cell>{container.dateContainerShipped}</Cell>
+			</Row>
+			<Row>
+				<Cell>Name of Ship</Cell>
+				<Cell>{container.nameOfShip}</Cell>
+			</Row>
+		</Body>
+	</DataTable>
+{:else}
+	<p>No container fetched</p>
+{/if}
diff --git a/static/smui-dark.css b/static/smui-dark.css
diff --git a/static/smui.css b/static/smui.css