szybkie filtry (wip)

src/components/StationsView/FilterOption.vue

@@ -5,6 +5,7 @@
     :data-selected="option.value"
     @click="handleLeftClick"
     @dblclick="handleDbClick"
+    :aria-disabled="option.value"
   >
     {{ $t(`filters.${option.id}`) }}
   </button>

src/components/StationsView/StationFilterCard.vue

@@ -30,6 +30,21 @@
           <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
+            <div class="quick-actions">
+              <h3 class="text--primary">{{ $t('filters.sections.quick') }}</h3>
+              <hr />
+
+              <div>
+                <button class="btn--action" style="width: 100%" @click="filterStore.handleQuickAction('all-available')">
+                  {{ $t('filters.all-available') }}
+                </button>
+
+                <button class="btn--action" style="width: 100%" @click="saveFilters">
+                  {{ $t('filters.all-free') }}
+                </button>
+              </div>
+            </div>
+
             <div class="option-section" v-for="section in filterStore.inputs.optionSections">
               <h3 class="text--primary">
                 {{ $t(`filters.sections.${section}`) }}
@@ -431,26 +446,30 @@ export default defineComponent({
   }
 }
 
-.card_options {
-  .option-section h3 {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.25em;
+.option-section h3 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
 
-    gap: 0.5em;
+  gap: 0.5em;
 
-    button {
-      padding: 0.15em;
-      color: coral;
-    }
+  button {
+    padding: 0.15em;
+    color: coral;
   }
+}
 
-  .section-inputs {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.5em;
-    margin: 1em 0;
-  }
+.section-inputs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5em;
+  margin: 1em 0;
+}
+
+.quick-actions div {
+  display: flex;
+  margin: 1em 0;
+  gap: 1em;
 }
 
 .slider {

src/locales/en.json

@@ -146,6 +146,7 @@
     "desc": " &bull; Left mouse click: select / unselect chosen filter <br /> &bull; Double left click: unselect all filters but chosen from a <b class='text--primary'>group</b> <br /> &bull; <span style='color: coral'>RESET</span>: reset all filters from a <b class='text--primary'>group</b>",
 
     "sections": {
+      "quick": "QUICK FILTERS",
       "reality": "SCENERY REALITY",
       "package-access": "IN-GAME AVAILABILITY",
       "access": "GENERAL AVAILABILITY",
@@ -156,6 +157,9 @@
       "status": "ONLINE STATUS"
     },
 
+    "all-available": "ALL AVAILABLE",
+    "all-free": "CURRENTLY FREE",
+
     "endingStatus": "ENDS SOON",
     "afkStatus": "AFK",
     "noSpaceStatus": "NO SPACE",

src/locales/pl.json

@@ -147,6 +147,7 @@
     "desc": " &bull; Kliknięcie: zaznaczenie / odznaczenie filtru <br /> &bull; Podwójne kliknięcie: odznaczenie reszty filtrów z <b class='text--primary'>grupy</b> <br /> &bull; <span style='color: coral'>RESET</span>: zresetowanie filtrów z <b class='text--primary'>grupy</b>",
 
     "sections": {
+      "quick": "SZYBKIE FILTRY",
       "reality": "FIKCYJNOŚĆ SCENERII",
       "package-access": "DOSTĘPNOŚĆ W PACZCE",
       "access": "DOSTĘPNOŚĆ OGÓLNA",
@@ -157,6 +158,9 @@
       "status": "STATUS ONLINE"
     },
 
+    "all-available": "WSZYSTKIE DOSTĘPNE",
+    "all-free": "WSZYSTKIE WOLNE",
+
     "endingStatus": "KOŃCZY",
     "afkStatus": "Z/W",
     "noSpaceStatus": "BRAK MIEJSCA",

src/store/stationFiltersStore.ts

@@ -58,6 +58,19 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
+    handleQuickAction(actionName: string) {
+      switch (actionName) {
+        case 'all-available':
+          this.resetFilters();
+
+          this.changeFilterValue({ name: 'non-public', value: false });
+          break;
+
+        default:
+          break;
+      }
+    },
+
     changeFilterValue(filter: { name: string; value: any }) {
       this.filters[filter.name] = filter.value;