Merge pull request #187 from starboardcoop/issue/185

Issue/185
starboardcoop · Jul 28, 2021 · e39249c · e39249c
2 parents 9354e7b + c78855b
commit e39249c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/src/components/Scroller.svelte b/src/components/Scroller.svelte
@@ -13,7 +13,7 @@
             <Card style="h-24 w-24 lg:h-48 lg:w-48">
                 <Image height="full" src={thing.image} alt={thing.name} />
             </Card>
-            <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 space-between">
+            <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 justify-between flex-grow">
                 <Text bold smallauto>{thing.name}</Text>
                 <div class="flex flex-col lg:flex-row gap-2">
                     {#if thing.location}

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -10,13 +10,15 @@
     let shownThings;
     let shownLocation;
     let searchText = "";
+    let showWantedItems = false;
 
     onMount(async () => {
         data = await things.getAll();
         shownThings = data.things;
     });
 
     function showAll() {
+        showWantedItems = false;
         shownLocation = null;
         shownThings = filtered();
     }
@@ -31,14 +33,23 @@
             filtered = filtered.filter(thing => thing.location === shownLocation);
         if (searchText.length > 0)
             filtered = filtered.filter(thing => thing.name.toLowerCase().includes(searchText.toLowerCase()));
-        
+        if (showWantedItems)
+            filtered = filtered.filter(thing => thing.stock < 1);
+
         return filtered;
     }
 
     function filterByLocation(location) {
+        showWantedItems = false;
         shownLocation = location;
         shownThings = filtered();
     }
+
+    function filterByWanted() {
+        showWantedItems = true;
+        shownLocation = null;
+        shownThings = filtered();
+    }
 </script>
 
 <Header />
@@ -53,10 +64,11 @@
                 placeholder="Search..."
             />
             <div class="flex flex-row flex-wrap gap-4">
-                <button on:click={showAll} class:selected={shownLocation == null} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">All</button>
+                <button on:click={showAll} class:selected={shownLocation == null && !showWantedItems} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">All</button>
                 {#each data.locations as location}
                     <button on:click={() => filterByLocation(location)} class:selected={shownLocation === location} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">{location}</button>
                 {/each}
+                <button on:click={filterByWanted} class:toggled={showWantedItems} class="bg-red-100 px-2 py-1 rounded brutal hovers font-bold outline-none">Wanted</button>
             </div>
         </div>
         {#key shownThings}
@@ -76,4 +88,8 @@
     button.selected {
         @apply bg-green-200;
     }
+
+    button.toggled {
+        @apply bg-red-300;
+    }
 </style>