Add style

WebmasterCamp · Jul 16, 2023 · e2ec3be · e2ec3be
1 parent 7013b1c
commit e2ec3be
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 33 deletions.
diff --git a/src/lib/components/ItemBox.svelte b/src/lib/components/ItemBox.svelte
@@ -8,10 +8,8 @@
 
 </script>
 
-<div class="flex flex-col w-[110px] rounded-xl border-2 overflow-hidden mb-2 mr-2" >
-  <div class="w-full">
-    <img src={image} alt="item-img" />
-  </div>
+<div class="flex flex-col w-[110px] rounded-xl border-2 overflow-hidden mb-2 mr-2 itemboxs" >
+  <img src={image} alt="item-img" />
   <div class="flex flex-col space-y-1 p-2">
     <h1>{name} ({amount})</h1>
     <p class=" text-sm">Expired in {exp} days</p>

diff --git a/src/lib/store/ingredient.ts b/src/lib/store/ingredient.ts
@@ -1,3 +1,4 @@
+import type { ItemProp } from "$lib/model/model";
 import { writable  } from "svelte/store";
 
-export const ingredients = writable([])
+export const ingredients = writable<ItemProp[]>([])
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
-	import '../app.postcss';
+    import { onMount } from 'svelte';
 	import '../app.postcss';
 
+	onMount(() => {
+		Notification.requestPermission();
+	});
 </script>
 
 <slot />
diff --git a/src/routes/fridge/+page.svelte b/src/routes/fridge/+page.svelte
@@ -7,13 +7,16 @@
   import { Drawer } from "flowbite-svelte";
   import ItemBoxEdit from "$lib/components/ItemBoxEdit.svelte";
 
-  const addToStore = (obj: any) => {
+  const addToStore = (obj: any, e: MouseEvent) => {
+    const box = (e.target as Element).closest(".itemboxs");
     if ($ingredients.find((e: any) => e.name === obj.name)) {
       console.log("found");
       $ingredients = $ingredients.filter((e: any) => e.name != obj.name);
+      box?.classList.remove("!bg-gray-200");
     } else {
       if ($ingredients.length < 3) {
         $ingredients = $ingredients.concat(obj);
+        box?.classList.add("!bg-gray-200");
       }
     }
   };
@@ -28,8 +31,6 @@
 
   $: hidden8 = $ingredients.length <= 0;
 
-  
-
   export let data: PageData;
 </script>
 
@@ -49,7 +50,7 @@
     </div>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each data.result.meat as item}
-        <button on:click={() => addToStore(item)}>
+        <button on:click|stopPropagation={(e) => addToStore(item, e)}>
           <ItemBox
             name={item.name}
             exp={item.exp}
@@ -66,14 +67,14 @@
     </div>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each data.result.veg as item}
-      <button on:click={() => addToStore(item)}>
-        <ItemBox
-          name={item.name}
-          exp={item.exp}
-          amount={item.amount}
-          image={item.imgID}
-        />
-      </button>
+        <button on:click|stopPropagation={(e) => addToStore(item, this.Element)}>
+          <ItemBox
+            name={item.name}
+            exp={item.exp}
+            amount={item.amount}
+            image={item.imgID}
+          />
+        </button>
       {/each}
     </div>
   </div>
@@ -83,32 +84,26 @@
     </div>
     <div class="flex flex-wrap px-4 w-screen mb-2">
       {#each data.result.dairy as item}
-        <button on:click={() => addToStore(item)}>
-        <ItemBox
-          name={item.name}
-          exp={item.exp}
-          amount={item.amount}
-          image={item.imgID}
-        />
+        <button on:click|stopPropagation={(e) => addToStore(item, e)}>
+          <ItemBox
+            name={item.name}
+            exp={item.exp}
+            amount={item.amount}
+            image={item.imgID}
+          />
         </button>
       {/each}
     </div>
   </div>
   {#if !hidden8}
-  <div class="h-80" />
+    <div class="h-80" />
   {/if}
   <div
     class="rounded-full w-10 h-10 bg-black fixed bottom-14 right-0 flex justify-center items-center"
   >
     <a class="text-white" href="/fridge/add">+</a>
   </div>
   <nav class="fixed bottom-0 w-screen border-t-2 border-" />
-  <button on:click={()=>{
-    new Notification("Hello", {
-      body: "Hello, world!",
-    });
-  }}>
-  </button>
 </div>
 <Drawer
   placement="bottom"
@@ -133,6 +128,6 @@
     {/each}
   </div>
   <button class="w-full bg-black text-white my-1 py-2 rounded-lg">
-   <a href="/menulist">Let's Cook</a> 
+    <a href="/menulist">Let's Cook</a>
   </button>
 </Drawer>