Nowe filtry scenerii

.gitignore

@@ -31,6 +31,7 @@ node_modules
 .firebaserc
 firebase.json
 
+
 .env
 
 .fake

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.4.93",
+  "version": "1.4.95",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/StationsView/StationFilterCard.vue

@@ -37,15 +37,21 @@
         <section class="card_options">
           <filter-option v-for="(option, i) in inputs.options" :option="option" :key="i" @optionChange="handleChange" />
         </section>
-        <!-- 
+
         <section class="card_timestamp" style="text-align: center">
-          <div>POKAZUJ SCENERIE DOSTĘPNE MINIMUM DO GODZINY:</div>
+          <div>{{ $t('filters.minimum-hours-title') }}</div>
           <span class="clock">
             <button @click="subHour">-</button>
-            <span>{{ minimumTimeString }}</span>
+            <span>{{
+              minimumHours == 0
+                ? $t('filters.now')
+                : minimumHours < 8
+                ? minimumHours + $t('filters.hour')
+                : $t('filters.no-limit')
+            }}</span>
             <button @click="addHour">+</button>
           </span>
-        </section> -->
+        </section>
 
         <section class="card_sliders">
           <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
@@ -102,46 +108,6 @@ import StorageManager from '@/scripts/managers/storageManager';
 import ActionButton from '../Global/ActionButton.vue';
 import FilterOption from './FilterOption.vue';
 
-/* 
-Do JSONa
-    {
-      "id": "endingStatus",
-      "name": "endingStatus",
-      "iconName": "",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-      "id": "afkStatus",
-      "name": "afkStatus",
-      "iconName": "",
-
-      "section": "status",
-      "value": true,
-      "defaultValue": true
-    },
-    {
-     "id": "noSpaceStatus",
-     "name": "noSpaceStatus",
-     "iconName": "",
-
-     "section": "status",
-     "value": true,
-     "defaultValue": true
-   },
-   {
-    "id": "unavailableStatus",
-    "name": "unavailableStatus",
-    "iconName": "",
-
-    "section": "status",
-    "value": true,
-    "defaultValue": true
-   }
-*/
-
 export default defineComponent({
   components: { ActionButton, FilterOption },
   emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
@@ -153,6 +119,8 @@ export default defineComponent({
     saveOptions: false,
     STORAGE_KEY: 'options_saved',
 
+    minimumHours: 0,
+
     currentRegion: { id: '', value: '' },
   }),
 
@@ -161,14 +129,18 @@ export default defineComponent({
 
     return {
       isVisible,
-
-      minimumTimeString: ref('BEZ LIMITU'),
     };
   },
 
   mounted() {
     this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
 
+    if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
+      this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
+
+      this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
+    }
+
     this.currentRegion = this.$store.getters[GETTERS.currentRegion];
   },
 
@@ -200,64 +172,25 @@ export default defineComponent({
       this.closeCard();
     },
 
+    changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
+      this.$emit('changeFilterValue', {
+        name,
+        value,
+      });
+
+      if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
+    },
+
     subHour() {
-      if (this.minimumTimeString == 'BEZ LIMITU') {
+      this.minimumHours = this.minimumHours < 1 ? 8 : this.minimumHours - 1;
-        const prevHour = new Date().getHours() + 7;
 
-        this.minimumTimeString = `${prevHour < 10 ? '0' : ''}${prevHour}:00`;
+      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-
-        const prevDate = new Date();
-        prevDate.setHours(prevHour, 0, 0);
-
-        this.$emit('changeFilterValue', {
-          name: 'onlineToTimestamp',
-          value: prevDate.getTime(),
-        });
-        return;
-      }
-
-      const prevHour = Number(this.minimumTimeString.split(':')[0]) - 1;
-
-      if (prevHour < new Date().getHours() + 1) return;
-
-      this.minimumTimeString = `${prevHour < 10 ? '0' : ''}${prevHour}:00`;
-
-      const prevDate = new Date();
-      prevDate.setHours(prevHour, 0, 0);
-
-      console.log(prevDate);
-
-      this.$emit('changeFilterValue', {
-        name: 'onlineToTimestamp',
-        value: prevDate.getTime(),
-      });
     },
 
     addHour() {
-      if (this.minimumTimeString == 'BEZ LIMITU') return;
+      this.minimumHours = this.minimumHours > 7 ? 0 : this.minimumHours + 1;
 
-      const nextHour = Number(this.minimumTimeString.split(':')[0]) + 1;
+      this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
-
-      if (nextHour > new Date().getHours() + 7) {
-        this.minimumTimeString = 'BEZ LIMITU';
-
-        this.$emit('changeFilterValue', {
-          name: 'onlineToTimestamp',
-          value: -1,
-        });
-
-        return;
-      }
-
-      this.minimumTimeString = `${nextHour < 10 ? '0' : ''}${nextHour}:00`;
-
-      const nextDate = new Date();
-      nextDate.setHours(nextHour, 0, 0);
-
-      this.$emit('changeFilterValue', {
-        name: 'onlineToTimestamp',
-        value: nextDate.getTime(),
-      });
     },
 
     invertFilters() {
@@ -295,6 +228,8 @@ export default defineComponent({
         StorageManager.setNumericValue(slider.name, slider.value);
       });
 
+      this.minimumHours = 0;
+
       this.$emit('resetFilters');
     },
 

src/data/options.json

@@ -31,6 +31,14 @@
       "value": true,
       "defaultValue": true
     },
+    {
+     "id": "non-public",
+     "name": "nonPublic",
+     "iconName": "user",
+     "section": "access",
+     "value": true,
+     "defaultValue": true
+    },
     {
       "id": "unavailable",
       "name": "unavailable",
@@ -135,6 +143,42 @@
       "name": "occupied",
       "iconName": "",
 
+      "section": "status",
+      "value": true,
+      "defaultValue": true
+    },
+     {
+      "id": "endingStatus",
+      "name": "endingStatus",
+      "iconName": "",
+
+      "section": "status",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+      "id": "afkStatus",
+      "name": "afkStatus",
+      "iconName": "",
+
+      "section": "status",
+      "value": true,
+      "defaultValue": true
+    },
+    {
+     "id": "noSpaceStatus",
+     "name": "noSpaceStatus",
+     "iconName": "",
+
+     "section": "status",
+     "value": true,
+     "defaultValue": true
+   },
+   {
+    "id": "unavailableStatus",
+    "name": "unavailableStatus",
+    "iconName": "",
+
     "section": "status",
     "value": true,
     "defaultValue": true

src/locales/en.json

@@ -61,6 +61,7 @@
     "real": "REAL",
     "fictional": "FICTIONAL",
     "unavailable": "UNSUPPORTED",
+    "non-public": "NON-PUBLIC",
 
     "SPK": "SPK",
     "SCS": "SCS",
@@ -82,6 +83,10 @@
       "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
       "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
+    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
+    "now": "NOW",
+    "hour": "h",
+    "no-limit": "NO LIMIT",
     "include-selected": "INCLUDE SELECTED",
     "save": "SAVE FILTERS",
     "reset": "RESET FILTERS",

src/locales/pl.json

@@ -61,6 +61,8 @@
     "real": "REALNA",
     "fictional": "FIKCYJNA",
     "unavailable": "NIEDOSTĘPNA",
+    "non-public": "NIEPUBLICZNA",
+
     "SPK": "SPK",
     "SCS": "SCS",
     "SPE": "SPE",
@@ -81,6 +83,10 @@
       "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
       "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
+    "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",
     "reset": "RESETUJ FILTRY",

src/scripts/interfaces/Filter.ts

@@ -34,5 +34,5 @@ export default interface Filter {
   unavailableStatus: boolean;
   unsignedStatus: boolean;
 
-  onlineToTimestamp: number;
+  onlineFromHours: number;
 }

src/scripts/managers/stationFilterManager.ts

@@ -1,5 +1,6 @@
 import Station from '@/scripts/interfaces/Station';
 import Filter from '@/scripts/interfaces/Filter';
+import StorageManager from './storageManager';
 
 const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => {
   switch (sorter.index) {
@@ -60,7 +61,14 @@ const filterStations = (station: Station, filters: Filter) => {
 
   if (station.online && station.statusID == 'ending' && filters['ending']) return returnMode;
 
-  if (filters['onlineToTimestamp'] != -1 && station.online && station.statusTimestamp <= filters['onlineToTimestamp']) return returnMode;
+  if (station.online
+    && station.statusTimestamp != 0
+    && filters['onlineFromHours'] < 8
+    && station.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000)
+    return returnMode;
+
+  if (filters['onlineFromHours'] > 0 && station.statusTimestamp == 0) return returnMode;
+  if (filters['onlineFromHours'] == 8 && station.statusID != 'no-limit') return returnMode;
 
   if (station.statusID == 'ending' && filters['endingStatus']) return returnMode;
   if ((station.statusID == 'not-signed' || station.statusID == 'unavailable') && filters['unavailableStatus']) return returnMode;
@@ -105,7 +113,6 @@ const filterStations = (station: Station, filters: Filter) => {
 
   if (filters['SBL'] && station.SBL) return returnMode;
 
-
   return true;
 }
 
@@ -145,13 +152,29 @@ export default class StationFilterManager {
     unavailableStatus: false,
     unsignedStatus: false,
 
-    onlineToTimestamp: -1
+    onlineFromHours: 0
   };
 
   private filters: Filter = { ...this.filterInitStates };
 
   private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
 
+  checkFilters() {
+    if (!StorageManager.isRegistered("options_saved")) return;
+
+    Object.keys(this.filterInitStates).forEach(filterKey => {
+      if (StorageManager.isRegistered(filterKey)) return;
+
+      const filterType = typeof this.filterInitStates[filterKey];
+
+      if (filterType === "boolean")
+        StorageManager.setBooleanValue(filterKey, !this.filterInitStates[filterKey] as boolean);
+
+      if (filterType === "number")
+        StorageManager.setNumericValue(filterKey, this.filterInitStates[filterKey] as number);
+    });
+  }
+
   getFilteredStationList(stationList: Station[]): Station[] {
     return stationList
       .filter(station => filterStations(station, this.filters))

src/views/StationsView.vue

@@ -35,22 +35,22 @@
 </template>
 
 <script lang="ts">
-import Station from "@/scripts/interfaces/Station";
+import Station from '@/scripts/interfaces/Station';
 
-import StorageManager from "@/scripts/managers/storageManager";
+import StorageManager from '@/scripts/managers/storageManager';
-import StationFilterManager from "@/scripts/managers/stationFilterManager";
+import StationFilterManager from '@/scripts/managers/stationFilterManager';
 
-import inputData from "@/data/options.json";
+import inputData from '@/data/options.json';
 
-import StationTable from "@/components/StationsView/StationTable.vue";
+import StationTable from '@/components/StationsView/StationTable.vue';
-import FilterCard from "@/components/StationsView/StationFilterCard.vue";
+import FilterCard from '@/components/StationsView/StationFilterCard.vue';
-import SelectBox from "@/components/Global/SelectBox.vue";
+import SelectBox from '@/components/Global/SelectBox.vue';
 
-import { StoreData } from "@/scripts/interfaces/StoreData";
+import { StoreData } from '@/scripts/interfaces/StoreData';
-import { DataStatus } from "@/scripts/enums/DataStatus";
+import { DataStatus } from '@/scripts/enums/DataStatus';
-import { computed, ComputedRef, defineComponent, reactive } from "vue";
+import { computed, ComputedRef, defineComponent, reactive } from 'vue';
-import { useStore } from "@/store";
+import { useStore } from '@/store';
-import { GETTERS } from "@/constants/storeConstants";
+import { GETTERS } from '@/constants/storeConstants';
 
 export default defineComponent({
   components: {
@@ -59,22 +59,22 @@ export default defineComponent({
     SelectBox,
   },
   data: () => ({
-    trainIcon: require("@/assets/icon-train.svg"),
+    trainIcon: require('@/assets/icon-train.svg'),
-    timetableIcon: require("@/assets/icon-timetable.svg"),
+    timetableIcon: require('@/assets/icon-timetable.svg'),
-    dolarIcon: require("@/assets/icon-dolar.svg"),
+    dolarIcon: require('@/assets/icon-dolar.svg'),
     filterCardOpen: false,
     modalHidden: true,
-    STORAGE_KEY: "options_saved",
+    STORAGE_KEY: 'options_saved',
     inputs: inputData,
 
     regions: [
       {
-        id: "eu",
+        id: 'eu',
-        value: "PL1",
+        value: 'PL1',
       },
       {
-        id: "ru",
+        id: 'ru',
-        value: "ENG",
+        value: 'ENG',
       },
     ],
   }),
@@ -82,36 +82,28 @@ export default defineComponent({
   setup() {
     const store = useStore();
     const filterManager = reactive(new StationFilterManager());
-    const focusedStationName = "";
+    const focusedStationName = '';
 
-    const data: ComputedRef<StoreData> = computed(
+    const data: ComputedRef<StoreData> = computed(() => store.getters[GETTERS.allData]);
-      () => store.getters[GETTERS.allData]
-    );
 
     const computedStations: ComputedRef<Station[]> = computed(() => {
-      return filterManager.getFilteredStationList(
+      return filterManager.getFilteredStationList(store.getters[GETTERS.stationList]);
-        store.getters[GETTERS.stationList]
-      );
     });
 
     const getStatusClass = computed(() => {
-      if (data.value.dataConnectionStatus == DataStatus.Loading)
+      if (data.value.dataConnectionStatus == DataStatus.Loading) return 'loading';
-        return "loading";
+      if (data.value.dataConnectionStatus == DataStatus.Error) return 'error';
-      if (data.value.dataConnectionStatus == DataStatus.Error) return "error";
+      return 'success';
-      return "success";
     });
 
     const timetableDataStatusClass = computed(() => {
-      if (data.value.timetableDataStatus == DataStatus.Loading)
+      if (data.value.timetableDataStatus == DataStatus.Loading) return 'loading';
-        return "loading";
+      if (data.value.timetableDataStatus == DataStatus.Error) return 'error';
-      if (data.value.timetableDataStatus == DataStatus.Error) return "error";
+      return 'success';
-      return "success";
     });
 
     const focusedStationInfo = computed(() =>
-      computedStations.value.find(
+      computedStations.value.find((station) => station.stationName === focusedStationName)
-        (station) => station.stationName === focusedStationName
-      )
     );
 
     return {
@@ -126,11 +118,15 @@ export default defineComponent({
   },
   mounted() {
     if (!StorageManager.isRegistered(this.STORAGE_KEY)) return;
+
+    this.filterManager.checkFilters();
+
     this.inputs.options.forEach((option) => {
       const value = StorageManager.getBooleanValue(option.name);
       this.changeFilterValue({ name: option.name, value: value ? 0 : 1 });
       option.value = value;
     });
+
     this.inputs.sliders.forEach((slider) => {
       const value = StorageManager.getNumericValue(slider.name);
       this.changeFilterValue({ name: slider.name, value });
@@ -139,7 +135,7 @@ export default defineComponent({
   },
   methods: {
     toggleCardsState(name: string): void {
-      if (name == "filter") {
+      if (name == 'filter') {
         this.filterCardOpen = !this.filterCardOpen;
       }
     },
@@ -159,15 +155,15 @@ export default defineComponent({
       this.filterCardOpen = false;
     },
     setFocusedStation(name: string) {
-      this.focusedStationName = this.focusedStationName == name ? "" : name;
+      this.focusedStationName = this.focusedStationName == name ? '' : name;
     },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/variables.scss";
+@import '../styles/variables.scss';
-@import "../styles/responsive.scss";
+@import '../styles/responsive.scss';
 
 @keyframes blinkAnim {
   0%,