filter shenanigans

2026-05-12 06:26:56 +00:00 · 2024-07-15 18:14:02 +02:00
parent be9cffef4f
commit 3aec40658f
5 changed files with 277 additions and 10 deletions
@@ -0,0 +1,181 @@
+<template>
+  <section>
+    <details open>
+      <summary>Level of items</summary>
+      <section>
+        <label>
+          <span>Minimum level</span>
+          <input
+            type="number"
+            placeholder="1"
+            :min="1"
+            :max="filters.maxLevel"
+            v-model="filters.minLevel"
+            @focusout="(e: FocusEvent) => {
+              const target = e.target as HTMLInputElement;
+              const numberValue = parseInt(target.value);
+              if (filters.maxLevel && numberValue > filters.maxLevel) {
+                filters.maxLevel = filters.minLevel;
+              }
+            }"
+          >
+        </label>
+        <label>
+          <span>Maximum level</span>
+          <input
+            type="number"
+            placeholder="100"
+            :min="filters.minLevel"
+            :max="100"
+            v-model="filters.maxLevel"
+            @focusout="(e: FocusEvent) => {
+              const target = e.target as HTMLInputElement;
+              const numberValue = parseInt(target.value);
+              if (filters.minLevel && numberValue < filters.minLevel) {
+                filters.minLevel = filters.maxLevel;
+              }
+            }"
+          >
+        </label>
+      </section>
+    </details>
+    <details open>
+      <summary>Jobs</summary>
+      <section>
+        <label class="horizontal">
+          <span>Botanist</span>
+          <input
+            type="checkbox"
+            :checked="filters.jobs.includes(Job.BOTANIST)"
+            @change="(e: Event) => {
+              const target = e.target as HTMLInputElement;
+              if (target.checked) {
+                filters.jobs.push(Job.BOTANIST);
+              } else {
+                filters.jobs = filters.jobs.filter((job) => job !== Job.BOTANIST);
+              }
+            }"
+          >
+        </label>
+        <label class="horizontal">
+          <span>Miner</span>
+          <input
+            type="checkbox"
+            :checked="filters.jobs.includes(Job.MINER)"
+            @change="(e: Event) => {
+              const target = e.target as HTMLInputElement;
+              if (target.checked) {
+                filters.jobs.push(Job.MINER);
+              } else {
+                filters.jobs = filters.jobs.filter((job) => job !== Job.MINER);
+              }
+            }"
+          >
+        </label>
+      </section>
+    </details>
+  </section>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import Filters from "@/util/Filters";
+import {Job} from "@/enums/Job";
+
+export default defineComponent({
+  name: "FiltersMenu",
+  computed: {
+    Job() {
+      return Job
+    }
+  },
+  emits: ['update:filters'],
+  data: () => ({
+    filters: {
+      minLevel: undefined,
+      maxLevel: undefined,
+      jobs: [] as Job[],
+    },
+  }),
+  watch: {
+    filters: {
+      handler(newFilters) {
+        const filters = new Filters(newFilters);
+        window.localStorage.setItem("filters", JSON.stringify(filters));
+      },
+      deep: true,
+    },
+    minLevel(newValue: string) {
+      const numberValue = parseInt(newValue);
+      return isNaN(numberValue) ? 1 : numberValue;
+    },
+    maxLevel(newValue: string) {
+      const numberValue = parseInt(newValue);
+      return isNaN(numberValue) ? 100 : numberValue;
+    },
+  },
+  mounted() {
+    const filters = window.localStorage.getItem("filters");
+    if (filters) {
+      this.filters = JSON.parse(filters);
+    }
+
+  },
+});
+</script>
+
+<style scoped lang="scss">
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+
+  details {
+    background-color: #1f1f1f;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 0.5rem;
+
+    summary {
+      cursor: pointer;
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 1.25rem;
+    }
+
+    section {
+      display: flex;
+      flex-direction: row;
+      gap: 2rem;
+      flex-wrap: wrap;
+
+      label {
+        display: flex;
+        gap: 0.5rem;
+        flex-direction: column;
+
+        &.horizontal {
+          flex-direction: row;
+          gap: 0.2rem;
+        }
+
+        input[type="number"] {
+          padding: 0.5rem;
+          border: 1px solid #fff;
+          background-color: transparent;
+          color: white;
+          border-radius: 0.25rem;
+          width: 5rem;
+          text-align: start;
+        }
+      }
+    }
+  }
+}
+</style>