scenerie: remake filtrów

src/assets/icon-historyczna.svg

@@ -1,18 +1,20 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="60" height="60" fill="#898989"/>
-<path d="M30.5 6.04878H35.2195" stroke="#BFBFBF"/>
-<path d="M27.9024 4.00303C25.2115 4.10008 24.2403 6.24494 24 7.41767H32.0488C31.8486 6.16406 30.5934 3.90598 27.9024 4.00303Z" fill="black"/>
-<path d="M33.0244 29.6688V5.47793V4.68292H34.4878V5.47793V56.5854H33.0244V32.5H27.5V28.5V28.0163L28.5 28V31.5L31.9268 31.5447H33.0244V29.6688Z" fill="#BFBFBF"/>
-<path d="M28.1463 29.2683C30.8373 29.1712 31.8085 27.0264 32.0488 25.8537H24C24.2002 27.1073 25.4554 29.3654 28.1463 29.2683Z" fill="black"/>
-<path d="M32.0488 25.8537V7.86993V7.41464H24V25.8537H32.0488Z" fill="black"/>
-<path d="M25 26V29.5L33.8781 44.9756" stroke="black"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="25.0407" fill="white"/>
-<rect x="33.0244" y="31.5447" width="1.46341" height="5.69106" fill="#FF0000"/>
-<rect x="33.0244" y="42.9268" width="1.46341" height="5.69106" fill="#FF0000"/>
-<rect x="33.0244" y="54.3089" width="1.46341" height="5.69106" fill="#FF0000"/>
-<ellipse cx="27.9024" cy="7.40022" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="11.8343" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="16.2683" rx="1.46341" ry="1.40022" fill="#FF0000"/>
-<ellipse cx="27.9024" cy="20.7023" rx="1.46341" ry="1.40022" fill="#212121"/>
-<ellipse cx="27.9024" cy="25.1364" rx="1.46341" ry="1.40022" fill="#212121"/>
-</svg>
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="-0.00012207" width="60" height="60" fill="#898989"/>
+<path d="M29.0126 32.4897V10.2511V9.52028H30.4337V10.2511V57.234H29.0126V32.4897Z" fill="#BFBFBF"/>
+<path d="M26.955 29.3992V32.9949L29.7672 36.9105" stroke="black" stroke-width="0.61183"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="22.8196" fill="white"/>
+<rect x="29.0051" y="34.0686" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="29.0051" y="54.8137" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="29.0051" y="44.4412" width="1.42857" height="5.18627" fill="#FF0000"/>
+<rect x="27.8749" y="31.8649" width="3.75" height="2.17823" fill="white"/>
+<path d="M33.5 28.5111V8.61545V8.11176H26V28.5111H33.5Z" fill="black"/>
+<path d="M29.6364 5.00276C27.1289 5.09112 26.2239 7.044 26 8.11176H33.5C33.3134 6.97036 32.1438 4.91439 29.6364 5.00276Z" fill="black"/>
+<path d="M29.8636 31.6201C32.3711 31.5317 33.2761 29.5789 33.5 28.5111H26C26.1865 29.6525 27.3561 31.7085 29.8636 31.6201Z" fill="black"/>
+<ellipse cx="29.887" cy="11.8168" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="8.0135" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="15.6151" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="19.6834" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="23.7518" rx="1.38696" ry="1.28474" fill="#212121"/>
+<ellipse cx="29.887" cy="27.8201" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
+<ellipse cx="29.887" cy="19.769" rx="1.38696" ry="1.28474" fill="#00FF0A"/>
+</svg>

src/components/StationsView/FilterOption.vue

@@ -1,5 +1,11 @@
 <template>
-  <button class="btn--action" :class="option.section" :data-selected="option.value" @click="handleChange">
+  <button
+    class="btn--action"
+    :class="option.section"
+    :data-selected="option.value"
+    @click="handleLeftClick"
+    @dblclick="handleDbClick"
+  >
     {{ $t(`filters.${option.id}`) }}
   </button>
 </template>
@@ -29,20 +35,51 @@ export default defineComponent({
       filterStore: useStationFiltersStore(),
     };
   },
+
   methods: {
-    handleChange() {
+    handleLeftClick() {
       this.option.value = !this.option.value;
+      this.filterStore.lastClickedFilterId = '';
 
       this.filterStore.changeFilterValue({
         name: this.option.name,
         value: !this.option.value,
       });
     },
+
+    handleDbClick(e: Event) {
+      e.preventDefault();
+
+      
+      const lastClicked = this.filterStore.lastClickedFilterId == this.option.id;
+      console.log(this.filterStore.lastClickedFilterId);
+      this.filterStore.lastClickedFilterId = this.option.id;
+      this.option.value = true;
+
+      this.filterStore.changeFilterValue({
+        name: this.option.name,
+        value: !this.option.value,
+      });
+
+      this.filterStore.inputs.options
+        .filter((option) => {
+          return option.section == this.option.section && option.id != this.option.id;
+        })
+        .forEach((option) => {
+          this.filterStore.changeFilterValue({
+            name: option.name,
+            value: this.option.value,
+          });
+
+          option.value = !this.option.value;
+        });
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
+$realityCol: #e03b07;
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -51,56 +88,60 @@ $saveCol: #28a826;
 $routesCol: #9049c0;
 
 button {
-  width: 100%;
-  padding: 0.4em;
-  border-radius: 0.4em;
+  padding: 0.25em;
+  border-radius: 0;
 
   &:focus-visible {
     outline: 1px solid white;
   }
 
   &[data-selected='true'] {
-    &.access {
-      background-color: $accessCol;
-      box-shadow: 0 0 6px 1px $accessCol;
-    }
+    //  &.reality {
+    //   background-color: $realityCol;
+    //   box-shadow: 0 0 6px 1px $realityCol;
+    // }
 
-    &.control {
-      background-color: $controlCol;
-      box-shadow: 0 0 6px 1px $controlCol;
-    }
+    // &.access {
+    //   background-color: $accessCol;
+    //   box-shadow: 0 0 6px 1px $accessCol;
+    // }
 
-    &.signals {
-      background-color: $signalCol;
-      box-shadow: 0 0 6px 1px $signalCol;
-    }
+    // &.control {
+    //   background-color: $controlCol;
+    //   box-shadow: 0 0 6px 1px $controlCol;
+    // }
 
-    &.routes {
-      background-color: $routesCol;
-      box-shadow: 0 0 6px 1px $routesCol;
-    }
+    // &.signals {
+    //   background-color: $signalCol;
+    //   box-shadow: 0 0 6px 1px $signalCol;
+    // }
 
-    &.status {
-      background-color: $statusCol;
-      box-shadow: 0 0 6px 1px $statusCol;
-    }
+    // &.routes {
+    //   background-color: $routesCol;
+    //   box-shadow: 0 0 6px 1px $routesCol;
+    // }
 
-    &.save {
-      background-color: $saveCol;
-      box-shadow: 0 0 6px 1px $saveCol;
-    }
+    // &.status {
+    //   background-color: $statusCol;
+    //   box-shadow: 0 0 6px 1px $statusCol;
+    // }
 
-    &.troll {
-      background-color: firebrick;
-      box-shadow: 0 0 6px 1px firebrick;
-    }
+    // &.save {
+    //   background-color: $saveCol;
+    //   box-shadow: 0 0 6px 1px $saveCol;
+    // }
 
-    &.mode {
-      background-color: lightgreen;
-      color: black;
+    // &.troll {
+    //   background-color: firebrick;
+    //   box-shadow: 0 0 6px 1px firebrick;
+    // }
 
-      font-weight: 500;
-    }
+    // & {
+    background-color: forestgreen;
+
+    font-weight: bold;
+    // }
   }
 }
 </style>
+

src/components/StationsView/StationFilterCard.vue

@@ -26,15 +26,28 @@
       <div class="card" v-if="isVisible" tabindex="0" ref="cardEl">
         <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
+          <p class="card_info" v-html="$t('filters.desc')"></p>
 
           <section class="card_options">
-            <filter-option
-              v-for="(option, i) in filterStore.inputs.options"
-              :option="option"
-              :key="i"
-              @optionChange="handleChange"
-            />
+            <div class="option-section" v-for="section in filterStore.inputs.optionSections">
+              <h3 class="text--primary">
+                {{ $t(`filters.sections.${section}`) }}
+
+                <button @click="filterStore.resetSectionOptions(section)">RESET</button>
+              </h3>
+
+              <hr />
+
+              <div class="section-inputs">
+                <filter-option
+                  v-for="(option, i) in filterStore.inputs.options.filter((o) => o.section == section)"
+                  :option="option"
+                  :key="i"
+                />
+              </div>
+            </div>
           </section>
+
           <section class="card_timestamp" style="text-align: center">
             <div>{{ $t('filters.minimum-hours-title') }}</div>
             <span class="clock">
@@ -80,18 +93,18 @@
               </div>
             </div>
           </section>
-
-          <section class="card_actions">
-            <div class="action-buttons">
-              <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
-                {{ $t('filters.save') }}
-              </button>
-
-              <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
-              <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
-            </div>
-          </section>
         </div>
+
+        <section class="card_actions">
+          <div class="action-buttons">
+            <button class="btn--action" style="width: 100%" @click="saveFilters" :data-selected="saveOptions">
+              {{ $t('filters.save') }}
+            </button>
+
+            <button class="btn--action" @click="resetFilters">{{ $t('filters.reset') }}</button>
+            <button class="btn--action" @click="closeCard">{{ $t('filters.close') }}</button>
+          </div>
+        </section>
       </div>
     </transition>
   </section>
@@ -181,15 +194,6 @@ export default defineComponent({
       this.isVisible = !this.isVisible;
     },
 
-    handleChange(change: { name: string; value: boolean }) {
-      this.filterStore.changeFilterValue({
-        name: change.name,
-        value: !change.value,
-      });
-
-      if (this.saveOptions) StorageManager.setBooleanValue(change.name, change.value);
-    },
-
     handleInput(e: Event) {
       const target = e.target as HTMLInputElement;
 
@@ -281,6 +285,14 @@ export default defineComponent({
 }
 
 .card {
+  display: grid;
+  grid-template-rows: 1fr auto;
+
+  &_info {
+    background-color: #111;
+    padding: 0.5em;
+  }
+
   &_controls {
     display: flex;
     gap: 0.5em;
@@ -292,13 +304,13 @@ export default defineComponent({
   }
 
   &_content {
+    padding: 0.5em;
+
     display: flex;
     flex-direction: column;
+
     gap: 1em;
-
-    max-height: 90vh;
-
-    padding: 1em;
+    overflow: auto;
   }
 
   &_title {
@@ -309,18 +321,6 @@ export default defineComponent({
     text-align: center;
   }
 
-  &_options {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-template-rows: repeat(4, 1fr);
-    gap: 0.5em;
-
-    @include smallScreen() {
-      grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-      grid-template-rows: auto;
-    }
-  }
-
   &_regions {
     display: flex;
     justify-content: center;
@@ -391,6 +391,9 @@ export default defineComponent({
   }
 
   &_actions {
+    width: 100%;
+    padding: 0.25em;
+
     .filter-option {
       max-width: 50%;
       margin: 0 auto;
@@ -417,6 +420,35 @@ export default defineComponent({
   }
 }
 
+.card_options {
+  .option-section h3 {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25em;
+
+    gap: 0.5em;
+
+    button {
+      padding: 0.15em;
+      color: coral;
+    }
+  }
+
+  .section-inputs {
+    display: grid;
+    // flex-wrap: wrap;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    // grid-template-rows: repeat(3, 1fr);
+    gap: 0.5em;
+    margin: 1em 0;
+
+    // @include smallScreen() {
+    //   grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
+    //   grid-template-rows: auto;
+    // }
+  }
+}
+
 .slider {
   display: flex;
   align-items: center;

src/data/options.json

@@ -1,41 +1,38 @@
 {
+  "optionSections": ["reality", "package-access", "access", "control", "addons", "blockades", "signals", "status"],
+
   "options": [
-    {
-      "id": "default",
-      "name": "default",
-      "iconName": "td2",
-      "section": "access",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "not-default",
-      "name": "notDefault",
-      "iconName": "",
-      "section": "access",
-      "value": true,
-      "defaultValue": true
-    },
     {
       "id": "real",
       "name": "real",
-      "iconName": "lock",
-      "section": "access",
+      "section": "reality",
       "value": true,
       "defaultValue": true
     },
     {
       "id": "fictional",
       "name": "fictional",
-      "iconName": "user",
-      "section": "access",
+      "section": "reality",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "default",
+      "name": "default",
+      "section": "package-access",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "not-default",
+      "name": "notDefault",
+      "section": "package-access",
       "value": true,
       "defaultValue": true
     },
     {
       "id": "non-public",
       "name": "nonPublic",
-      "iconName": "user",
       "section": "access",
       "value": true,
       "defaultValue": true
@@ -43,7 +40,6 @@
     {
       "id": "unavailable",
       "name": "unavailable",
-      "iconName": "user",
       "section": "access",
       "value": false,
       "defaultValue": false
@@ -51,7 +47,6 @@
     {
       "id": "abandoned",
       "name": "abandoned",
-      "iconName": "user",
       "section": "access",
       "value": false,
       "defaultValue": false
@@ -59,7 +54,6 @@
     {
       "id": "SPK",
       "name": "SPK",
-      "iconName": "SPK",
       "section": "control",
       "value": true,
       "defaultValue": true
@@ -67,7 +61,6 @@
     {
       "id": "SCS",
       "name": "SCS",
-      "iconName": "SCS",
       "section": "control",
       "value": true,
       "defaultValue": true
@@ -75,15 +68,21 @@
     {
       "id": "SPE",
       "name": "SPE",
-      "iconName": "SPE",
+      "section": "control",
+      "value": true,
+      "defaultValue": true
+    },
+
+    {
+      "id": "SPK-M",
+      "name": "mechaniczne+SPK",
       "section": "control",
       "value": true,
       "defaultValue": true
     },
     {
-      "id": "manual",
-      "name": "ręczne",
-      "iconName": "ręczne",
+      "id": "SCS-M",
+      "name": "mechaniczne+SCS",
       "section": "control",
       "value": true,
       "defaultValue": true
@@ -91,7 +90,27 @@
     {
       "id": "mechanical",
       "name": "mechaniczne",
-      "iconName": "mechaniczne",
+      "section": "control",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "SPK-R",
+      "name": "ręczne+SPK",
+      "section": "control",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "SCS-R",
+      "name": "ręczne+SCS",
+      "section": "control",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "manual",
+      "name": "ręczne",
       "section": "control",
       "value": true,
       "defaultValue": true
@@ -99,23 +118,34 @@
     {
       "id": "SUP",
       "name": "SUP",
-      "iconName": "SUP",
-      "section": "control",
+      "section": "addons",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "noSUP",
+      "name": "noSUP",
+      "section": "addons",
       "value": true,
       "defaultValue": true
     },
     {
       "id": "SBL",
       "name": "SBL",
-      "iconName": "SBL",
-      "section": "routes",
+      "section": "blockades",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "PBL",
+      "name": "PBL",
+      "section": "blockades",
       "value": true,
       "defaultValue": true
     },
     {
       "id": "modern",
       "name": "współczesna",
-      "iconName": "współczesna",
       "section": "signals",
       "value": true,
       "defaultValue": true
@@ -123,7 +153,6 @@
     {
       "id": "semaphores",
       "name": "kształtowa",
-      "iconName": "kształtowa",
       "section": "signals",
       "value": true,
       "defaultValue": true
@@ -131,7 +160,6 @@
     {
       "id": "mixed",
       "name": "mieszana",
-      "iconName": "mieszana",
       "section": "signals",
       "value": true,
       "defaultValue": true
@@ -139,7 +167,6 @@
     {
       "id": "historical",
       "name": "historyczna",
-      "iconName": "historyczna",
       "section": "signals",
       "value": true,
       "defaultValue": true
@@ -148,7 +175,6 @@
     {
       "id": "free",
       "name": "free",
-      "iconName": "",
 
       "section": "status",
       "value": false,
@@ -157,7 +183,6 @@
     {
       "id": "occupied",
       "name": "occupied",
-      "iconName": "",
 
       "section": "status",
       "value": true,
@@ -166,7 +191,6 @@
     {
       "id": "endingStatus",
       "name": "endingStatus",
-      "iconName": "",
 
       "section": "status",
       "value": true,
@@ -175,7 +199,6 @@
     {
       "id": "afkStatus",
       "name": "afkStatus",
-      "iconName": "",
 
       "section": "status",
       "value": true,
@@ -184,7 +207,6 @@
     {
       "id": "noSpaceStatus",
       "name": "noSpaceStatus",
-      "iconName": "",
 
       "section": "status",
       "value": true,
@@ -193,7 +215,6 @@
     {
       "id": "unavailableStatus",
       "name": "unavailableStatus",
-      "iconName": "",
 
       "section": "status",
       "value": true,
@@ -254,7 +275,6 @@
     {
       "id": "include-selected",
       "name": "include-selected",
-      "iconName": "",
       "section": "mode",
       "value": true,
       "defaultValue": true
@@ -262,7 +282,6 @@
     {
       "id": "save",
       "name": "save",
-      "iconName": "",
       "section": "mode",
       "value": true,
       "defaultValue": true

src/locales/en.json

@@ -35,7 +35,7 @@
   "desc": {
     "control-type": "Control type: ",
     "signals-type": "Signals type:  ",
-    "SBL": "This scenery has automatic line blockade system on following routes: ",
+    "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
     "SUP": "Requires the SUP application (level crossing remote control simulator)",
     "TWB-all": "This scenery has two-way route blockade on all routes",
     "TWB-routes": "This scenery has two-way route blockade on following routes: ",
@@ -129,14 +129,27 @@
     "filter-active": "ACTIVE"
   },
   "filters": {
+    "desc": " &bull; Left mouse click: select / unselect chosen filter <br /> &bull; Double left click: unselect all filters but chosen from <b class='text--primary'>group</b> <br /> &bull; <span style='color: coral'>RESET</span>: reset all filters from <b class='text--primary'>group</b>",
+
+    "sections": {
+      "reality": "SCENERY REALITY",
+      "package-access": "IN-GAME AVAILABILITY",
+      "access": "GENERAL AVAILABILITY",
+      "control": "CONTROLS",
+      "signals": "SIGNALLING",
+      "addons": "ADDITIONAL PROGRAMS",
+      "blockades": "BLOCKADE TYPE",
+      "status": "ONLINE STATUS"
+    },
+
     "endingStatus": "ENDS SOON",
     "afkStatus": "AFK",
     "noSpaceStatus": "NO SPACE",
     "unavailableStatus": "UNAVAILABLE",
 
-    "title": "STATION FILTER",
-    "default": "DEFAULT",
-    "not-default": "OTHER",
+    "title": "STATION FILTERS",
+    "default": "IN-GAME",
+    "not-default": "ADDITIONAL",
     "real": "REAL",
     "fictional": "FICTIONAL",
     "unavailable": "UNSUPPORTED",
@@ -144,12 +157,22 @@
     "abandoned": "ABANDONED",
 
     "SPK": "SPK",
+    "SPK-R": "SPK + MANUAL",
+    "SPK-M": "SPK + MECH.",
     "SCS": "SCS",
+    "SCS-R": "SCS + MANUAL",
+    "SCS-M": "SCS + MECH.",
     "SPE": "SPE",
+
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
-    "SUP": "SUP",
-    "SBL": "SBL",
+
+    "SUP": "SUP (RASP-UZK)",
+    "noSUP": "NO SUP",
+
+    "SBL": "ABS (SBL)",
+    "PBL": "NO ABS (PBL)",
+
     "modern": "MODERN",
     "semaphores": "SEMAPHORES",
     "mixed": "MIXED",
@@ -170,7 +193,7 @@
     "hour": "h",
     "no-limit": "NO LIMIT",
     "include-selected": "INCLUDE SELECTED",
-    "save": "SAVE FILTERS",
+    "save": "REMEMBER FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
   },

src/locales/pl.json

@@ -132,6 +132,19 @@
     "filter-active": "AKTYWNE"
   },
   "filters": {
+    "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": {
+      "reality": "FIKCYJNOŚĆ SCENERII",
+      "package-access": "DOSTĘPNOŚĆ W PACZCE",
+      "access": "DOSTĘPNOŚĆ OGÓLNA",
+      "control": "TYP STEROWANIA",
+      "signals": "TYP SYGNALIZACJI",
+      "addons": "DODATKOWE PROGRAMY",
+      "blockades": "BLOKADY LINIOWE",
+      "status": "STATUS ONLINE"
+    },
+
     "endingStatus": "KOŃCZY",
     "afkStatus": "Z/W",
     "noSpaceStatus": "BRAK MIEJSCA",
@@ -147,18 +160,29 @@
     "abandoned": "WYCOFANA",
 
     "SPK": "SPK",
+    "SPK-R": "SPK + RĘCZNE",
+    "SPK-M": "SPK + MECH.",
     "SCS": "SCS",
+    "SCS-R": "SCS + RĘCZNE",
+    "SCS-M": "SCS + MECH.",
     "SPE": "SPE",
     "manual": "RĘCZNE",
-    "SUP": "SUP",
+
+    "SUP": "SUP (RASP-UZK)",
+    "noSUP": "BEZ SUP",
+
     "SBL": "SBL",
+    "PBL": "PBL",
+
     "mechanical": "MECHANICZNE",
     "modern": "WSPÓŁCZESNA",
     "semaphores": "KSZTAŁTOWA",
     "mixed": "MIESZANA",
     "historical": "HISTORYCZNA",
+
     "free": "WOLNA",
     "occupied": "ZAJĘTA",
+
     "sliders": {
       "min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
       "max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
@@ -167,13 +191,14 @@
       "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
       "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
+
     "authors-search": "Szukaj autora (uwzględnia inne filtry)",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
     "hour": " godz.",
     "no-limit": "BEZ LIMITU",
     "include-selected": "POKAŻ ZAZNACZONE",
-    "save": "ZAPISZ FILTRY",
+    "save": "ZAPAMIĘTAJ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
   },

src/scripts/interfaces/Filter.ts

@@ -1,16 +1,22 @@
 export default interface Filter {
-  [key: string]: (boolean | number | string),
+  [key: string]: boolean | number | string;
   default: boolean;
   notDefault: boolean;
   real: boolean;
   fictional: boolean;
-  "SPK": boolean;
-  "SCS": boolean;
-  "SPE": boolean;
-  "SUP": boolean;
+  SPK: boolean;
+  SCS: boolean;
+  SPE: boolean;
+  SUP: boolean;
+  noSUP: boolean;
   ręczne: boolean;
+  'ręczne+SPK': boolean;
+  'ręczne+SCS': boolean;
   mechaniczne: boolean;
-  "SBL": boolean;
+  'mechaniczne+SPK': boolean;
+  'mechaniczne+SCS': boolean;
+  SBL: boolean;
+  PBL: boolean;
   współczesna: boolean;
   kształtowa: boolean;
   historyczna: boolean;

src/store/stationFiltersStore.ts

@@ -94,12 +94,12 @@ const filterStations = (station: Station, filters: Filter, isOffline = false) =>
     return returnMode;
 
   if (station.generalInfo) {
-    const routes = station.generalInfo.routes;
-    const availability = station.generalInfo.availability;
+    const { routes, availability, controlType, lines, reqLevel, signalType, SUP, authors } = station.generalInfo;
 
-    if (filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) return returnMode;
+    if (availability == 'abandoned' && filters['abandoned'] && !station.onlineInfo) return returnMode;
 
     if (availability == 'default' && filters['default']) return returnMode;
+
     if (
       availability != 'default' &&
       filters['notDefault'] &&
@@ -107,24 +107,17 @@ const filterStations = (station: Station, filters: Filter, isOffline = false) =>
     )
       return returnMode;
 
-    if (filters['real'] && station.generalInfo.lines != '') return returnMode;
+    if (filters['real'] && lines) return returnMode;
+    if (filters['fictional'] && !lines) return returnMode;
+
     if (
-      filters['fictional'] &&
-      station.generalInfo.lines == '' &&
-      availability != 'abandoned' &&
-      availability != 'unavailable'
+      reqLevel + (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
+      filters['minLevel']
     )
       return returnMode;
 
     if (
-      station.generalInfo.reqLevel +
-        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
-      filters['minLevel']
-    )
-      return returnMode;
-    if (
-      station.generalInfo.reqLevel +
-        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
+      reqLevel + (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
       filters['maxLevel']
     )
       return returnMode;
@@ -146,42 +139,32 @@ const filterStations = (station: Station, filters: Filter, isOffline = false) =>
     if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return returnMode;
     if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return returnMode;
 
-    if (filters[station.generalInfo.controlType]) return returnMode;
-    if (filters[station.generalInfo.signalType]) return returnMode;
+    if (filters[controlType]) return returnMode;
+    if (filters[signalType]) return returnMode;
 
-    if (
-      filters['SPK'] &&
-      (station.generalInfo.controlType === 'SPK' || station.generalInfo.controlType.includes('+SPK'))
-    )
-      return returnMode;
-    if (
-      filters['SCS'] &&
-      (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))
-    )
-      return returnMode;
-    if (
-      filters['SPE'] &&
-      (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))
-    )
-      return returnMode;
-    if (filters['SUP'] && station.generalInfo.SUP) return returnMode;
+    if (filters['SPK'] && controlType === 'SPK') return returnMode;
+    if (filters['SCS'] && controlType === 'SCS') return returnMode;
+    if (filters['SPE'] && controlType === 'SPE') return returnMode;
+    if (filters['SUP'] && SUP) return returnMode;
+    if (filters['noSUP'] && !SUP) return returnMode;
 
-    if (
-      filters['SCS'] &&
-      filters['SPK'] &&
-      (station.generalInfo.controlType.includes('SPK') || station.generalInfo.controlType.includes('SCS'))
-    )
-      return returnMode;
+    // if (filters['SCS'] && filters['SPK'] && (controlType.includes('SPK') || controlType.includes('SCS')))
+    //   return returnMode;
 
-    if (filters['mechaniczne'] && station.generalInfo.controlType.includes('mechaniczne')) return returnMode;
+    if (filters['mechaniczne'] && controlType == 'mechaniczne') return returnMode;
+    if (filters['mechaniczne+SPK'] && controlType == 'mechaniczne+SPK') return returnMode;
+    if (filters['mechaniczne+SCS'] && controlType == 'mechaniczne+SCS') return returnMode;
 
-    if (filters['ręczne'] && station.generalInfo.controlType.includes('ręczne')) return returnMode;
+    if (filters['ręczne'] && controlType == 'ręczne') return returnMode;
+    if (filters['ręczne+SPK'] && controlType == 'ręczne+SPK') return returnMode;
+    if (filters['ręczne+SCS'] && controlType == 'ręczne+SCS') return returnMode;
 
     if (filters['SBL'] && routes.sblRouteNames.length > 0) return returnMode;
+    if (filters['PBL'] && routes.sblRouteNames.length == 0) return returnMode;
 
     if (
       filters['authors'].length > 3 &&
-      !station.generalInfo.authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
+      !authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
     )
       return returnMode;
   }
@@ -198,13 +181,19 @@ const filterInitStates: Filter = {
   SCS: false,
   SPE: false,
   SUP: false,
+  noSUP: false,
   ręczne: false,
+  'ręczne+SPK': false,
+  'ręczne+SCS': false,
   mechaniczne: false,
+  'mechaniczne+SPK': false,
+  'mechaniczne+SCS': false,
   współczesna: false,
   kształtowa: false,
   historyczna: false,
   mieszana: false,
   SBL: false,
+  PBL: false,
   minLevel: 0,
   maxLevel: 20,
   minOneWayCatenary: 0,
@@ -238,6 +227,7 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       filters: { ...filterInitStates },
       sorterActive: { index: 0, dir: 1 },
       store: useStore(),
+      lastClickedFilterId: '',
     };
   },
 
@@ -295,6 +285,17 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
       });
     },
 
+    resetSectionOptions(section: string) {
+      this.inputs.options.forEach((option) => {
+        if (option.section != section) return;
+
+        option.value = option.defaultValue;
+        this.filters[option.id] = !option.defaultValue;
+
+        StorageManager.setBooleanValue(option.name, !option.defaultValue);
+      });
+    },
+
     changeSorter(index: number) {
       if (index > 4 && index < 7) return;
 
@@ -305,4 +306,3 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', {
     },
   },
 });
-

src/store/utils/filterUtils.ts

@@ -0,0 +1,185 @@
+import Station from '../../scripts/interfaces/Station';
+
+export const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
+  switch (sorter.index) {
+    case 0:
+      return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+
+    case 1:
+      if ((a.generalInfo?.reqLevel || 0) > (b.generalInfo?.reqLevel || 0)) return sorter.dir;
+      if ((a.generalInfo?.reqLevel || 0) < (b.generalInfo?.reqLevel || 0)) return -sorter.dir;
+      break;
+
+    case 2:
+      if ((a.onlineInfo?.statusTimestamp || 0) > (b.onlineInfo?.statusTimestamp || 0)) return sorter.dir;
+      if ((a.onlineInfo?.statusTimestamp || 0) < (b.onlineInfo?.statusTimestamp || 0)) return -sorter.dir;
+      break;
+
+    case 3:
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
+        return sorter.dir;
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
+        return -sorter.dir;
+      break;
+
+    case 4:
+      if ((a.onlineInfo?.dispatcherExp || 0) > (b.onlineInfo?.dispatcherExp || 0)) return sorter.dir;
+      if ((a.onlineInfo?.dispatcherExp || 0) < (b.onlineInfo?.dispatcherExp || 0)) return -sorter.dir;
+      break;
+
+    case 7:
+      if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir;
+      if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir;
+
+      if ((a.onlineInfo?.maxUsers || 0) > (b.onlineInfo?.maxUsers || 0)) return sorter.dir;
+      if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir;
+      break;
+
+    case 8:
+      if ((a.onlineInfo?.spawns.length || 0) > (b.onlineInfo?.spawns.length || 0)) return sorter.dir;
+      if ((a.onlineInfo?.spawns.length || 0) < (b.onlineInfo?.spawns.length || 0)) return -sorter.dir;
+
+      break;
+
+    case 9:
+      if ((a.onlineInfo?.scheduledTrains?.length || 0) > (b.onlineInfo?.scheduledTrains?.length || 0))
+        return sorter.dir;
+      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
+        return -sorter.dir;
+
+    default:
+      break;
+  }
+
+  return a.name.localeCompare(b.name);
+};
+
+export const filterStations = (station: Station, filters: { [key: string]: any }, isOffline = false) => {
+  const returnMode = false;
+
+  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
+    return returnMode;
+
+  if (station.onlineInfo?.statusID == 'ending' && filters['ending']) return returnMode;
+
+  if (
+    station.onlineInfo &&
+    station.onlineInfo.statusTimestamp > 0 &&
+    filters['onlineFromHours'] < 8 &&
+    station.onlineInfo.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000
+  )
+    return returnMode;
+
+  if (filters['onlineFromHours'] > 0 && station.onlineInfo && station.onlineInfo.statusTimestamp <= 0)
+    return returnMode;
+  if (filters['onlineFromHours'] == 8 && station.onlineInfo?.statusID != 'no-limit') return returnMode;
+
+  if (station.onlineInfo?.statusID == 'ending' && filters['endingStatus']) return returnMode;
+  if (
+    (station.onlineInfo?.statusID == 'not-signed' || station.onlineInfo?.statusID == 'unavailable') &&
+    filters['unavailableStatus']
+  )
+    return returnMode;
+  if (station.onlineInfo?.statusID == 'brb' && filters['afkStatus']) return returnMode;
+  if (station.onlineInfo?.statusID == 'no-space' && filters['noSpaceStatus']) return returnMode;
+
+  if (station.onlineInfo && filters['occupied']) return returnMode;
+  if (!station.onlineInfo && filters['free']) return returnMode;
+  if (station.generalInfo?.availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
+    return returnMode;
+
+  if (station.generalInfo) {
+    const routes = station.generalInfo.routes;
+    const availability = station.generalInfo.availability;
+
+    if (filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) return returnMode;
+
+    if (availability == 'default' && filters['default']) return returnMode;
+    if (
+      availability != 'default' &&
+      filters['notDefault'] &&
+      !(availability == 'abandoned' || availability == 'unavailable')
+    )
+      return returnMode;
+
+    if (filters['real'] && station.generalInfo.lines != '') return returnMode;
+    if (
+      filters['fictional'] &&
+      station.generalInfo.lines == '' &&
+      availability != 'abandoned' &&
+      availability != 'unavailable'
+    )
+      return returnMode;
+
+    if (
+      station.generalInfo.reqLevel +
+        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) <
+      filters['minLevel']
+    )
+      return returnMode;
+    if (
+      station.generalInfo.reqLevel +
+        (availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned' ? 1 : 0) >
+      filters['maxLevel']
+    )
+      return returnMode;
+
+    if (
+      filters['no-1track'] &&
+      (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)
+    )
+      return returnMode;
+    if (
+      filters['no-2track'] &&
+      (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)
+    )
+      return returnMode;
+
+    if (routes.oneWayCatenaryRouteNames.length < filters['minOneWayCatenary']) return returnMode;
+    if (routes.oneWayNoCatenaryRouteNames.length < filters['minOneWay']) return returnMode;
+
+    if (routes.twoWayCatenaryRouteNames.length < filters['minTwoWayCatenary']) return returnMode;
+    if (routes.twoWayNoCatenaryRouteNames.length < filters['minTwoWay']) return returnMode;
+
+    if (filters[station.generalInfo.controlType]) return returnMode;
+    if (filters[station.generalInfo.signalType]) return returnMode;
+
+    if (
+      filters['SPK'] &&
+      (station.generalInfo.controlType === 'SPK' || station.generalInfo.controlType.includes('+SPK'))
+    )
+      return returnMode;
+    if (
+      filters['SCS'] &&
+      (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))
+    )
+      return returnMode;
+    if (
+      filters['SPE'] &&
+      (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))
+    )
+      return returnMode;
+    if (filters['SUP'] && station.generalInfo.SUP) return returnMode;
+
+    if (
+      filters['SCS'] &&
+      filters['SPK'] &&
+      (station.generalInfo.controlType.includes('SPK') || station.generalInfo.controlType.includes('SCS'))
+    )
+      return returnMode;
+
+    if (filters['mechaniczne'] && station.generalInfo.controlType.includes('mechaniczne')) return returnMode;
+
+    if (filters['ręczne'] && station.generalInfo.controlType.includes('ręczne')) return returnMode;
+
+    if (filters['SBL'] && routes.sblRouteNames.length > 0) return returnMode;
+
+    if (
+      filters['authors'].length > 3 &&
+      !station.generalInfo.authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
+    )
+      return returnMode;
+  }
+
+  return true;
+};

src/styles/card.scss

@@ -21,17 +21,15 @@
 
   transform: translate(-50%, -50%);
 
-  overflow-x: hidden;
-  background: #202020da;
+  overflow: hidden;
+  background: #202020e8;
 
   box-shadow: 0 0 15px 5px #303030;
 
-  width: 600px;
+  width: 95%;
+  max-width: 700px;
 
-  @include smallScreen {
-    width: 100%;
-    height: 80vh;
-  }
+  max-height: 95vh;
 
   &-exit {
     position: absolute;