Added POST to create container

bjmckenz · Mar 13, 2024 · d6e69d5 · d6e69d5
1 parent d599c3d
commit d6e69d5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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}