Design changes and item upload to database 🤞

BaselHack-2023 · Oct 29, 2023 · 36ca984 · 36ca984
1 parent 152806f
commit 36ca984
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 34 deletions.
diff --git a/src/routes/lost-and-found/Lost.svelte b/src/routes/lost-and-found/Lost.svelte
@@ -1,20 +1,19 @@
 <script lang="ts">
    // logic
    import { navigate } from 'svelte-routing';
+   import { get } from 'svelte/store';
+   import { userStore } from '../../model/user.store';
    let size = '';
-   let SelectionItem = 'Sock';
+   let SelectionItem = '';
 	let OptionItem = [
 		'Sock',
 		'Underwear',
 		'T-shirt', 'Shirt', 'Trousers', 'Jacket'
 	]
 
-   let SelectionColor = 'Sock';
-	let OptionColor = [
-		'White',
-		'Black',
-		'Yellow', 'Orange', 'Red', 'Blue', 'Green','Grey'
-	]
+   let group = 1;
+   let SelectionColor = [];
+	let OptionColor = ['white','black','red','blue','green','yellow','orange','purple']
 
    $: if(!!size && !!SelectionItem && !!SelectionColor)
       console.log('filled out')
@@ -26,39 +25,130 @@
    $: console.log('Changed selected:', SelectionColor)
 	$: console.log('Updated options:', OptionColor)
 
-   const redirectToUploaded = () => {
-      navigate('/lost-and-found/LostUploaded.svelte');
+   const redirectToUploaded = async () => {
+      const data = {
+         name: SelectionItem,
+         colors: SelectionColor.join(','),
+         size: size,
+         owner: get(userStore).id
+      };
+      const response = await fetch('https://api.iperka.com/items', {
+         method: 'POST',
+         headers: {
+            'Content-Type': 'application/json'
+         },
+         body: JSON.stringify(data)
+      });
+      if (response.ok) {
+         navigate('/lost-and-found/LostUploaded.svelte');
+      } else {
+         console.error('Failed to upload lost item');
+      }
    };
 
  </script>
 
-<div class="boxes">
-   <div>Define your lost item</div>
+<div class="mainContainer">
+   <h1>Define your lost item</h1>
    <div></div>
 </div>
 
-<div>
-Item: <select bind:value={SelectionItem}>
-	{#each OptionItem as value}<option {value}>{value}</option>{/each}
-</select></div>
+<div class="itemSection">
+   <p class="sectionTitle">Item</p> 
+   <select bind:value={SelectionItem}>
+      {#each OptionItem as value}<option {value}>{value}</option>{/each}
+   </select>
+</div>
+
+<div class="colorSection">
+   <p class="sectionTitle">Color</p>
+   <div class="colorboxes">
+
+      {#each OptionColor as color}
+         <label class="colorboxLabel">
+            {color}
+            <input type="checkbox" bind:group={SelectionColor} value={color} class="colorboxInput"/>
+         </label>
+      {/each}
+   </div>
+</div>
 
-<div>
-Color: <select bind:value={SelectionColor}>
-	{#each OptionColor as value}<option {value}>{value}</option>{/each}
-</select></div>
 
-<div>
-Size: <input bind:value={size} placeholder="enter the size" /></div>
+<div class="sizeSection">
+   <p class="sectionTitle">Size</p>
+   <input bind:value={size} placeholder="enter the size" />
+</div>
 
 <button on:click={redirectToUploaded}>Upload my lost item.</button>
 
 
 <style>
-   .boxes {
+   .mainContainer {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+   }
+
+   .itemSection {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 50px;
+   }
+
+   .colorSection {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 50px;
+   }
+
+   .sizeSection {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 50px;
+   }
+
+   .sectionTitle {
+      font-size: 20px;
+      font-weight: bold;
+      margin-bottom: 10px;
+   }
+
+   .colorboxes {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+   }
+
+   .colorboxLabel {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      width: 100px;
+   }
+
+   .colorboxInput {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background-color: white;
+      margin-left: 5px;
+   }
+
+   .colorboxInput:checked {
+      background-color: var(--color);
    }
 </style>
 

diff --git a/src/routes/lost-and-found/LostAndFound.svelte b/src/routes/lost-and-found/LostAndFound.svelte
@@ -14,11 +14,18 @@
    };
 </script>
 
-<h1>Have you lost or found the item?</h1>
-<button on:click={redirectToLost}>LOST</button>
-<button on:click={redirectToFound}>FOUND</button>
-
-
-
-
-
+<div class="mainContainer">
+   <h1>Have you lost or found the item?</h1>
+   <button on:click={redirectToLost}>LOST</button>
+   <button on:click={redirectToFound}>FOUND</button>   
+</div>
+
+<style>
+   .mainContainer {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+   }
+</style>
diff --git a/src/routes/lost-and-found/LostUploaded.svelte b/src/routes/lost-and-found/LostUploaded.svelte
@@ -6,7 +6,11 @@
    };
  </script>
 
-<h1>Your item is uploaded into the LOST-Database.</h1>
+
+<div class="mainContainer">
+   <h1>Your item is uploaded into the LOST-Database.</h1>
+   <div></div>
+</div>
 
 <div class="boxes">
    <div></div>
@@ -18,12 +22,18 @@
 
 
 <style>
-   .boxes {
+   .mainContainer {
+      margin-top: 20px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
    }
-</style>
-
 
+   .boxes {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+   }
+</style>