filtering by click on "Top 6 levels" item

devforth · Nov 8, 2023 · d436453 · d436453
1 parent 654889c
commit d436453
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/application/frontend/src/lib/Stats/Stats.scss b/application/frontend/src/lib/Stats/Stats.scss
@@ -2,6 +2,10 @@
   padding: 0;
   margin: 0 0 6px 0;
   font-size: $main-font-s;
+  cursor: pointer;
+  & :hover {
+    transform: scale(1.02);
+  }
 }
 
 .statsTittle {

diff --git a/application/frontend/src/lib/Stats/Stats.svelte b/application/frontend/src/lib/Stats/Stats.svelte
@@ -3,6 +3,7 @@
     lastChosenHost,
     lastChosenService,
     lastStatsPeriod,
+    chosenStatus
   } from "../../Stores/stores.js";
   import fetchApi from "../../utils/fetch";
   import { navigate } from "svelte-routing";
@@ -90,7 +91,14 @@
         return 1;
       }
     }) as [key, name]}
-      <li class="flex spaceBetween statsItem">
+      <li class="flex spaceBetween statsItem"
+        on:click={async () => {
+            if ($chosenStatus !== key) {
+            chosenStatus.set(key);
+            } else {
+            chosenStatus.set("");
+            }
+        }}>
         <p class={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</p>
         <p>{name}</p>
       </li>