From d6e69d515639d33ebb804a4a377ed0ea0672efa4 Mon Sep 17 00:00:00 2001
From: bruce mckenzie <bjmckenz@gmail.com>
Date: Wed, 13 Mar 2024 00:07:00 -0700
Subject: [PATCH] Added POST to create container

---
 src/routes/+page.svelte                 |  3 ++
 src/routes/createContainer/+page.svelte | 49 +++++++++++++++++++++++++
 src/routes/fromapi/+page.svelte         |  2 +-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/createContainer/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 52b711e..459e099 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,6 +21,9 @@
 <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>
 
+<p>Step 6: See how to collect data and make a POST request</p>
+<button on:click={() => {goto('/createContainer')}}>Create A Container</button>
+
 
 <style>
     .note {
diff --git a/src/routes/createContainer/+page.svelte b/src/routes/createContainer/+page.svelte
new file mode 100644
index 0000000..b0323e7
--- /dev/null
+++ b/src/routes/createContainer/+page.svelte
@@ -0,0 +1,49 @@
+<script>
+	import Button, { Label } from '@smui/button';
+	import Textfield from '@smui/textfield';
+	import HelperText from '@smui/textfield/helper-text';
+
+	let newContainerNumber = '';
+	let newDateContainerShipped = '';
+	let newContainerSize = '';
+	let newNameOfShip = '';
+
+	const createContainer = async (newContainer) => {
+		const res = await fetch('http://localhost:3000/container', {
+			method: 'POST',
+			body: JSON.stringify(newContainer),
+			headers: {
+				'content-type': 'application/json'
+			}
+		});
+		const data = await res.json();
+		return data.containers[0];
+	};
+</script>
+
+<h1>Create a Container</h1>
+
+<Textfield variant="filled" bind:value={newContainerNumber} label="Container Number">
+	<HelperText slot="helper">May include letters</HelperText>
+</Textfield><br />
+<Textfield variant="filled" bind:value={newContainerSize} label="Size">
+	<HelperText slot="helper">Tons</HelperText>
+</Textfield>
+<br />
+<Textfield variant="filled" bind:value={newDateContainerShipped} label="Date Shipped"></Textfield>
+<br /><Textfield variant="filled" bind:value={newNameOfShip} label="Name of Ship"></Textfield>
+<br />
+<Button
+	variant="raised"
+	on:click={async () => {
+		const newContainer = {
+			containerNumber: newContainerNumber,
+			dateContainerShipped: newDateContainerShipped,
+			containerSize: newContainerSize,
+			nameOfShip: newNameOfShip
+		};
+		const container = await createContainer(newContainer);
+		console.log(container['containerNumber']);
+	}}
+	><Label>Add Container</Label></Button
+>
diff --git a/src/routes/fromapi/+page.svelte b/src/routes/fromapi/+page.svelte
index 054a307..d69332f 100644
--- a/src/routes/fromapi/+page.svelte
+++ b/src/routes/fromapi/+page.svelte
@@ -7,7 +7,7 @@
 
 {#each data.containers as container}
 	<div>
-		<span class="id">{container.id}</span>
+		<span class="id">{container.containerNumber}</span>
 		<span class="name">{container.nameOfShip}</span>
 	</div>
 {/each}