Zmiana pozycji karty filtrów scenerii; dodano filtrowanie autorów

src/components/StationsView/FilterOption.vue

@@ -60,6 +60,7 @@ $saveCol: #28a826;
 $routesCol: #9049c0;
 
 .option span {
+  font-size: 0.9em;
   &.checked {
     &.access {
       background-color: $accessCol;

src/components/StationsView/StationFilterCard.vue

@@ -1,18 +1,18 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard">
     <div class="card_btn">
-      <action-button @click="toggleCard">
+      <button class="btn btn--option" @click="toggleCard">
         <img class="button_icon" :src="filterIcon" alt="icon-filter" />
-        <p>{{ $t('options.filters') }}</p>
+        {{ $t('options.filters') }}
-      </action-button>
+      </button>
     </div>
 
     <transition name="card-anim">
-      <div class="card_content card" v-if="isVisible">
+      <div class="card" v-if="isVisible">
-        <div class="card_exit" @click="closeCard"></div>
+        <!-- <div class="card_exit" @click="closeCard"></div> -->
 
+        <div class="card_content">
           <div class="card_title flex">{{ $t('filters.title') }}</div>
-
           <section class="card_regions">
             <div class="regions_content">
               <span v-for="region in inputs.regions" :key="region.id" :class="`region-${region.id}`">
@@ -25,7 +25,6 @@
                     v-model="currentRegion"
                     @change="handleChangeRegion"
                   />
-
                   <span :class="{ checked: currentRegion.id === region.id }">
                     {{ region.value }}
                   </span>
@@ -33,11 +32,14 @@
               </span>
             </div>
           </section>
-
           <section class="card_options">
-          <filter-option v-for="(option, i) in inputs.options" :option="option" :key="i" @optionChange="handleChange" />
+            <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>{{ $t('filters.minimum-hours-title') }}</div>
             <span class="clock">
@@ -53,6 +55,10 @@
             </span>
           </section>
 
+          <section class="card_authors-search">
+            <input type="text" :placeholder="$t('filters.authors-search')" name="authors" @input="handleAuthorsInput" />
+          </section>
+
           <section class="card_sliders">
             <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
               <input
@@ -65,16 +71,15 @@
                 v-model="slider.value"
                 @change="handleInput"
               />
-
               <span class="slider-value">{{ slider.value }}</span>
-
               <div class="slider-content">
                 {{ $t(`filters.sliders.${slider.id}`) }}
               </div>
             </div>
           </section>
 
-        <section class="card_save">
+          <section class="card_actions">
+            <div>
               <filter-option
                 @optionChange="saveFilters"
                 :option="{
@@ -85,15 +90,16 @@
                   defaultValue: true,
                 }"
               />
-        </section>
+            </div>
-
+            <div>
-        <section class="card_actions flex">
               <action-button class="outlined" @click="resetFilters">
                 {{ $t('filters.reset') }}
               </action-button>
               <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
+            </div>
           </section>
         </div>
+      </div>
     </transition>
   </section>
 </template>
@@ -101,7 +107,7 @@
 <script lang="ts">
 import { defineComponent, inject } from '@vue/runtime-core';
 
-import { ACTIONS, GETTERS, MUTATIONS } from '@/constants/storeConstants';
+import { GETTERS, MUTATIONS } from '@/constants/storeConstants';
 import inputData from '@/data/options.json';
 
 import StorageManager from '@/scripts/managers/storageManager';
@@ -122,6 +128,8 @@ export default defineComponent({
     minimumHours: 0,
 
     currentRegion: { id: '', value: '' },
+
+    delayInputTimer: -1,
   }),
 
   setup() {
@@ -165,6 +173,16 @@ export default defineComponent({
       if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
     },
 
+    handleAuthorsInput(e: Event) {
+      if ((e.target as HTMLInputElement).value.length < 3) return;
+
+      clearTimeout(this.delayInputTimer);
+
+      this.delayInputTimer = setTimeout(() => {
+        this.handleInput(e);
+      }, 400);
+    },
+
     handleChangeRegion() {
       this.$store.commit(MUTATIONS.SET_REGION, this.currentRegion);
       this.closeCard();
@@ -244,8 +262,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive';
+@import '../../styles/responsive.scss';
-@import '../../styles/card';
+@import '../../styles/card.scss';
 
 .card-anim {
   &-enter-active,
@@ -255,14 +273,41 @@ export default defineComponent({
 
   &-enter-from,
   &-leave-to {
-    transform: translate(-50%, -50%) scale(0.85);
+    transform: translate(-100%, -50%);
     opacity: 0;
   }
 }
 
+.filter-card {
+  font-size: 0.95em;
+
+  @include smallScreen() {
+    font-size: 1em;
+  }
+}
 .card {
-  > section {
+  &_btn {
-    margin: 0.5em 0;
+    button {
+      display: flex;
+      align-items: center;
+
+      padding: 0.5em;
+      border-radius: 1em 1em 0 0;
+
+      /* border-radius: 0 0.9em 0.9em 0; */
+      /* outline: 2px solid white; */
+    }
+
+    img {
+      width: 1.5em;
+    }
+  }
+
+  &_content {
+    display: grid;
+    grid-template-rows: 70px 35px 1fr 100px 50px auto;
+    min-height: 0;
+    max-height: 100vh;
   }
 
   &_title {
@@ -319,7 +364,6 @@ export default defineComponent({
       align-items: center;
       justify-content: center;
 
-      padding: 0.15em 0;
       font-size: 1.15em;
 
       color: $accentCol;
@@ -358,24 +402,33 @@ export default defineComponent({
     }
   }
 
-  &_actions button {
+  &_authors-search {
-    margin: 0 0.3em;
+    display: inline-block;
+    margin: 0 auto;
+    width: 60%;
+    min-width: 200px;
+
+    input {
+      width: 100%;
+      padding: 0.5em;
+    }
   }
 
-  &_save {
+  &_actions {
+    margin-top: 1em;
+
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+
+    button {
+      margin: 1em 0.25em;
+    }
 
     .option {
       font-size: 1.1em;
     }
   }
-
-  &_exit {
-    img {
-      width: 2em;
-    }
-  }
 }
 
 .slider {
@@ -416,16 +469,16 @@ export default defineComponent({
       border: 4px solid $accentCol;
 
       @include smallScreen() {
-        width: 15px;
+        width: 1em;
-        height: 15px;
+        height: 1em;
         margin-top: -5px;
         border: 3px solid $accentCol;
       }
     }
 
     &::-moz-range-thumb {
-      height: 15px;
+      height: 1em;
-      width: 15px;
+      width: 1em;
 
       border-radius: 50%;
 
@@ -435,8 +488,8 @@ export default defineComponent({
       cursor: pointer;
 
       @include smallScreen() {
-        width: 15px;
+        width: 1em;
-        height: 15px;
+        height: 1em;
         border: 3px solid $accentCol;
       }
     }

src/locales/en.json

@@ -102,12 +102,13 @@
       "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
       "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
+    "authors-search": "Search by author (other filters apply)",
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
     "hour": "h",
     "no-limit": "NO LIMIT",
     "include-selected": "INCLUDE SELECTED",
-    "save": "SAVE FILTERS",
+    "save": "🗸 SAVE FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
   },

src/locales/pl.json

@@ -103,12 +103,13 @@
       "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": "🗸 ZAPISZ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
   },

src/mixins/returnBtnMixin.ts

@@ -17,7 +17,7 @@ export default defineComponent({
         },
 
         handleScroll() {
-            this.showReturnButton = window.scrollY > window.innerHeight;            
+            this.showReturnButton = window.scrollY > window.innerHeight * 0.35;            
         }
     },
 

src/scripts/interfaces/Filter.ts

@@ -1,5 +1,5 @@
 export default interface Filter {
-  [key: string]: (boolean | number),
+  [key: string]: (boolean | number | string),
   default: boolean;
   notDefault: boolean;
   real: boolean;
@@ -36,5 +36,7 @@ export default interface Filter {
   unavailableStatus: boolean;
   unsignedStatus: boolean;
 
+  authors: string;
+
   onlineFromHours: number;
 }

src/scripts/interfaces/Station.ts

@@ -19,6 +19,7 @@ export default interface Station {
     controlType: string;
 
     SUP: boolean;
+    authors?: string[];
 
     availability: Availability;
     routes: StationRoutes;

src/scripts/managers/stationFilterManager.ts

@@ -15,8 +15,10 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
       break;
 
     case 3:
-      if ((a.onlineInfo?.dispatcherName.toLowerCase() || "") > (b.onlineInfo?.dispatcherName.toLowerCase() || "")) return sorter.dir;
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') > (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
-      if ((a.onlineInfo?.dispatcherName.toLowerCase() || "") < (b.onlineInfo?.dispatcherName.toLowerCase() || "")) return -sorter.dir;
+        return sorter.dir;
+      if ((a.onlineInfo?.dispatcherName.toLowerCase() || '') < (b.onlineInfo?.dispatcherName.toLowerCase() || ''))
+        return -sorter.dir;
       break;
 
     case 4:
@@ -39,8 +41,10 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
       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))
-      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0)) return -sorter.dir;
+        return sorter.dir;
+      if ((a.onlineInfo?.scheduledTrains?.length || 0) < (b.onlineInfo?.scheduledTrains?.length || 0))
+        return -sorter.dir;
 
     default:
       break;
@@ -49,32 +53,41 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
   if (a.name.toLowerCase() >= b.name.toLowerCase()) return sorter.dir;
 
   return -sorter.dir;
-}
+};
 
 const filterStations = (station: Station, filters: Filter) => {
   const returnMode = false;
 
-  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic']) return returnMode;
+  if ((station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) && filters['nonPublic'])
+    return returnMode;
 
   if (station.onlineInfo?.statusID == 'ending' && filters['ending']) return returnMode;
 
-  if (station.onlineInfo
+  if (
-    && station.onlineInfo.statusTimestamp > 0
+    station.onlineInfo &&
-    && filters['onlineFromHours'] < 8
+    station.onlineInfo.statusTimestamp > 0 &&
-    && station.onlineInfo.statusTimestamp <= Date.now() + filters['onlineFromHours'] * 3600000)
+    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'] > 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 == '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?.availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
+    return returnMode;
 
   if (station.generalInfo) {
     const routes = station.generalInfo.routes;
@@ -83,13 +96,28 @@ const filterStations = (station: Station, filters: Filter) => {
     if (filters['abandoned'] && availability == 'abandoned') return returnMode;
 
     if (availability == 'default' && filters['default']) return returnMode;
-    if (availability != 'default' && filters['notDefault'] && !(availability == 'abandoned' || availability == 'unavailable')) 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 (
+      filters['fictional'] &&
+      station.generalInfo.lines == '' &&
+      availability != 'abandoned' &&
+      availability != 'unavailable'
+    )
+      return returnMode;
 
-
+    if (
-    if (station.generalInfo.reqLevel + ((availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned') ? 1 : 0) < filters['minLevel']) return returnMode;
+      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) >
@@ -97,8 +125,16 @@ const filterStations = (station: Station, filters: Filter) => {
     )
       return returnMode;
 
-    if (filters['no-1track'] && (routes.oneWayCatenaryRouteNames.length != 0 || routes.oneWayNoCatenaryRouteNames.length != 0)) return returnMode;
+    if (
-    if (filters['no-2track'] && (routes.twoWayCatenaryRouteNames.length != 0 || routes.twoWayNoCatenaryRouteNames.length != 0)) return returnMode;
+      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;
@@ -109,22 +145,45 @@ const filterStations = (station: Station, filters: Filter) => {
     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 (
-    if (filters['SCS'] && (station.generalInfo.controlType === 'SCS' || station.generalInfo.controlType.includes('+SCS'))) return returnMode;
+      filters['SPK'] &&
-    if (filters['SPE'] && (station.generalInfo.controlType === 'SPE' || station.generalInfo.controlType.includes('+SPE'))) return returnMode;
+      (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['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;
-}
+};
 
 export default class StationFilterManager {
   private filterInitStates: Filter = {
@@ -164,7 +223,9 @@ export default class StationFilterManager {
     unavailableStatus: false,
     unsignedStatus: false,
 
-    onlineFromHours: 0
+    authors: '',
+
+    onlineFromHours: 0,
   };
 
   private filters: Filter = { ...this.filterInitStates };
@@ -172,29 +233,31 @@ export default class StationFilterManager {
   private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
 
   checkFilters() {
-    if (!StorageManager.isRegistered("options_saved")) return;
+    if (!StorageManager.isRegistered('options_saved')) return;
 
-    Object.keys(this.filterInitStates).forEach(filterKey => {
+    Object.keys(this.filterInitStates).forEach((filterKey) => {
       if (StorageManager.isRegistered(filterKey)) return;
 
       const filterType = typeof this.filterInitStates[filterKey];
 
-      if (filterType === "boolean")
+      if (filterType === 'boolean')
         StorageManager.setBooleanValue(filterKey, !this.filterInitStates[filterKey] as boolean);
 
-      if (filterType === "number")
+      if (filterType === 'number')
         StorageManager.setNumericValue(filterKey, this.filterInitStates[filterKey] as number);
     });
   }
 
   getFilteredStationList(stationList: Station[]): Station[] {
     return stationList
-      .filter(station => filterStations(station, this.filters))
+      .filter((station) => filterStations(station, this.filters))
       .sort((a, b) => sortStations(a, b, this.sorter));
   }
 
   changeFilterValue(filter: { name: string; value: number }) {
     this.filters[filter.name] = filter.value;
+
+    // if(filter.name == 'authors')
   }
 
   resetFilters() {
@@ -202,12 +265,11 @@ export default class StationFilterManager {
   }
 
   invertFilters() {
-    Object.keys(this.filters).forEach(prop => {
+    Object.keys(this.filters).forEach((prop) => {
-      if (typeof this.filters[prop] !== "boolean") return;
+      if (typeof this.filters[prop] !== 'boolean') return;
 
       this.filters[prop] = !this.filters[prop];
-
+    });
-    })
   }
 
   changeSorter(index: number) {

src/store/index.ts

@@ -103,8 +103,6 @@ export const store = createStore<State>({
         await axios.get(`${URLs.stacjownikAPI}/api/getSceneryData?timestamp=${Math.floor(Date.now() / 1800000)}`)
       ).data.response;
 
-      
-
       if (!sceneryData) commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Error);
       else commit(MUTATIONS.SET_SCENERY_DATA, sceneryData);
     },
@@ -323,6 +321,7 @@ export const store = createStore<State>({
 
         generalInfo: {
           ...stationData,
+          authors: stationData.authors?.split(',').map(a => a.trim()),
           routes:
             stationData.routes
               ?.split(';')

src/store/types.ts

@@ -55,6 +55,7 @@ export interface StationJSONData {
 
     routes: string;
     checkpoints: string | null;
+    authors?: string;
 
     availability: Availability;
 }

src/styles/card.scss

@@ -2,29 +2,25 @@
 @import './responsive.scss';
 
 .card {
-  display: flex;
-  flex-direction: column;
-
   position: fixed;
   top: 50%;
-  left: 50%;
+  left: 0;
-  transform: translate(-50%, -50%);
   z-index: 100;
 
-  overflow: auto;
+  transform: translateY(-50%);
-  background: $primaryCol;
 
-  outline: 2px solid white;
+  overflow-x: hidden;
+  background: #202020da;
 
-  box-shadow: 0 0 15px 5px #292929;
 
-  width: 650px;
+  box-shadow: 0 0 20px 10px #292929;
-  max-height: 95%;
+
+  width: 550px;
 
   padding: 0.5em 1em;
 
   @include smallScreen {
-    width: 95%;
+    width: 100%;
   }
 
   &-exit {

src/styles/global.scss

@@ -131,11 +131,10 @@ input {
 
   padding: 0.15em;
 
-  max-width: 55px;
   outline: none;
 
   &::placeholder {
-    color: #bebebe;
+    color: #cfcfcf;
   }
 }