diff --git a/src/components/App/StatusIndicator.vue b/src/components/App/StatusIndicator.vue index 4de73a9..0e4fdaf 100644 --- a/src/components/App/StatusIndicator.vue +++ b/src/components/App/StatusIndicator.vue @@ -164,7 +164,7 @@ import { defineComponent } from 'vue'; import { DataStatus } from '../../scripts/enums/DataStatus'; import { useStore } from '../../store/store'; -import { StoreState } from '../../store/storeTypes'; +import { StoreState } from '../../scripts/interfaces/store/storeTypes'; export default defineComponent({ data() { diff --git a/src/components/StationsView/FilterOption.vue b/src/components/StationsView/FilterOption.vue index fe175fc..2dc6af9 100644 --- a/src/components/StationsView/FilterOption.vue +++ b/src/components/StationsView/FilterOption.vue @@ -50,9 +50,6 @@ export default defineComponent({ 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; @@ -96,51 +93,8 @@ button { } &[data-selected='true'] { - // &.reality { - // background-color: $realityCol; - // box-shadow: 0 0 6px 1px $realityCol; - // } - - // &.access { - // background-color: $accessCol; - // box-shadow: 0 0 6px 1px $accessCol; - // } - - // &.control { - // background-color: $controlCol; - // box-shadow: 0 0 6px 1px $controlCol; - // } - - // &.signals { - // background-color: $signalCol; - // box-shadow: 0 0 6px 1px $signalCol; - // } - - // &.routes { - // background-color: $routesCol; - // box-shadow: 0 0 6px 1px $routesCol; - // } - - // &.status { - // background-color: $statusCol; - // box-shadow: 0 0 6px 1px $statusCol; - // } - - // &.save { - // background-color: $saveCol; - // box-shadow: 0 0 6px 1px $saveCol; - // } - - // &.troll { - // background-color: firebrick; - // box-shadow: 0 0 6px 1px firebrick; - // } - - // & { background-color: forestgreen; - font-weight: bold; - // } } } diff --git a/src/components/StationsView/StationFilterCard.vue b/src/components/StationsView/StationFilterCard.vue index 50b6a60..5504862 100644 --- a/src/components/StationsView/StationFilterCard.vue +++ b/src/components/StationsView/StationFilterCard.vue @@ -128,7 +128,6 @@ import { useStore } from '../../store/store'; import ActionButton from '../Global/ActionButton.vue'; import FilterOption from './FilterOption.vue'; -import { filterInitStates } from '../../store/constants/initFilterStates'; export default defineComponent({ components: { ActionButton, FilterOption }, diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index 63ff97e..629dccf 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -8,26 +8,26 @@ - - +
+ -
+
sort icon 		+ - + sort icon @@ -53,6 +53,12 @@ {{ station.name }} + + + {{ station.generalInfo?.abbr }} + + ({ - headIds: ['station', 'min-lvl', 'status', 'dispatcher', 'dispatcher-lvl', 'routes', 'general'], - headIconsIds: ['user', 'spawn', 'timetable'], + headIconsIds, + headIds, lastSelectedStationName: '', }), @@ -291,8 +298,10 @@ export default defineComponent({ window.open(url, '_blank'); }, - changeSorter(i: number) { - this.stationFiltersStore.changeSorter(i); + changeSorter(headerName: HeadIdsTypes) { + if (headerName == 'general' || headerName == 'routes') return; + + this.stationFiltersStore.changeSorter(headerName); }, }, }); @@ -349,7 +358,7 @@ table { position: sticky; top: 0; - min-width: 75px; + min-width: 80px; padding: 0.5em; background-color: $bgCol; diff --git a/src/locales/en.json b/src/locales/en.json index d4a83f7..3392333 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -202,6 +202,7 @@ }, "sceneries": { "station": "Station", + "abbr": "Station\nabbrev.", "min-lvl": "Min. dispatcher\nlevel", "status": "Status", "dispatcher": "Dispatcher", diff --git a/src/locales/pl.json b/src/locales/pl.json index 9a24678..d7d78c0 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -207,6 +207,7 @@ }, "sceneries": { "station": "Stacja", + "abbr": "Skrót\nposterunku", "min-lvl": "Min. poziom\ndyżurnego", "status": "Status", "dispatcher": "Dyżurny", diff --git a/src/scripts/data/stationHeaderNames.ts b/src/scripts/data/stationHeaderNames.ts new file mode 100644 index 0000000..6ebd0a2 --- /dev/null +++ b/src/scripts/data/stationHeaderNames.ts @@ -0,0 +1,14 @@ +export const headIds = [ + 'station', + 'abbr', + 'min-lvl', + 'status', + 'dispatcher', + 'dispatcher-lvl', + 'routes', + 'general', +] as const; + +export const headIconsIds = ['user', 'spawn', 'timetable'] as const; + +export type HeadIdsTypes = typeof headIds[number] | typeof headIconsIds[number]; diff --git a/src/scripts/interfaces/Station.ts b/src/scripts/interfaces/Station.ts index ac1f07f..4f39b89 100644 --- a/src/scripts/interfaces/Station.ts +++ b/src/scripts/interfaces/Station.ts @@ -1,4 +1,4 @@ -import { Availability } from '../../store/storeTypes'; +import { Availability } from './store/storeTypes'; import ScheduledTrain from './ScheduledTrain'; import StationRoutes from './StationRoutes'; @@ -8,9 +8,11 @@ export default interface Station { generalInfo?: { name: string; url: string; - + abbr: string; + reqLevel: number; // supportersOnly: boolean; + lines: string; project: string; diff --git a/src/store/storeTypes.ts b/src/scripts/interfaces/store/storeTypes.ts similarity index 71% rename from src/store/storeTypes.ts rename to src/scripts/interfaces/store/storeTypes.ts index f874743..41cdd87 100644 --- a/src/store/storeTypes.ts +++ b/src/scripts/interfaces/store/storeTypes.ts @@ -1,78 +1,79 @@ -import { Socket } from 'socket.io-client'; -import { DataStatus } from '../scripts/enums/DataStatus'; -import StationAPIData from '../scripts/interfaces/api/StationAPIData'; -import { TrainAPIData } from '../scripts/interfaces/api/TrainAPIData'; -import Station from '../scripts/interfaces/Station'; -import Train from '../scripts/interfaces/Train'; -import { DispatcherStatsAPIData } from '../scripts/interfaces/api/DispatcherStatsAPIData'; -import { DriverStatsAPIData } from '../scripts/interfaces/api/DriverStatsAPIData'; - -export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; - -export interface StoreState { - stationList: Station[]; - trainList: Train[]; - apiData: APIData; - - lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[]; - - sceneryData: any[][]; - - region: { id: string; value: string }; - trainCount: number; - stationCount: number; - - webSocket?: Socket; - isOffline: boolean; - - dispatcherStatsName: string; - dispatcherStatsData?: DispatcherStatsAPIData; - - driverStatsName: string; - driverStatsData?: DriverStatsAPIData; - driverStatsStatus: DataStatus; - - chosenModalTrainId?: string; - - currentStatsTab: 'daily' | 'driver'; - - dataStatuses: { - connection: DataStatus; - sceneries: DataStatus; - timetables: DataStatus; - dispatchers: DataStatus; - trains: DataStatus; - }; - - listenerLaunched: boolean; - blockScroll: boolean; -} - -export interface APIData { - stations?: StationAPIData[]; - dispatchers?: string[][]; - trains?: TrainAPIData[]; - connectedSocketCount: number; -} - -export interface StationJSONData { - name: string; - url: string; - lines: string; - project: string; - projectUrl: string; - - reqLevel: number; - - signalType: string; - controlType: string; - - SUP: boolean; - - routes: string; - - checkpoints: string | null; - authors?: string; - - availability: Availability; -} +import { Socket } from 'socket.io-client'; +import { DataStatus } from '../../enums/DataStatus'; +import StationAPIData from '../api/StationAPIData'; +import { TrainAPIData } from '../api/TrainAPIData'; +import Station from '../Station'; +import Train from '../Train'; +import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData'; +import { DriverStatsAPIData } from '../api/DriverStatsAPIData'; + +export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault'; + +export interface StoreState { + stationList: Station[]; + trainList: Train[]; + apiData: APIData; + + lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[]; + + sceneryData: any[][]; + + region: { id: string; value: string }; + trainCount: number; + stationCount: number; + + webSocket?: Socket; + isOffline: boolean; + + dispatcherStatsName: string; + dispatcherStatsData?: DispatcherStatsAPIData; + + driverStatsName: string; + driverStatsData?: DriverStatsAPIData; + driverStatsStatus: DataStatus; + + chosenModalTrainId?: string; + + currentStatsTab: 'daily' | 'driver'; + + dataStatuses: { + connection: DataStatus; + sceneries: DataStatus; + timetables: DataStatus; + dispatchers: DataStatus; + trains: DataStatus; + }; + + listenerLaunched: boolean; + blockScroll: boolean; +} + +export interface APIData { + stations?: StationAPIData[]; + dispatchers?: string[][]; + trains?: TrainAPIData[]; + connectedSocketCount: number; +} + +export interface StationJSONData { + name: string; + abbr: string; + url: string; + lines: string; + project: string; + projectUrl: string; + + reqLevel: number; + + signalType: string; + controlType: string; + + SUP: boolean; + + routes: string; + + checkpoints: string | null; + authors?: string; + + availability: Availability; +} diff --git a/src/store/stationFiltersStore.ts b/src/store/stationFiltersStore.ts index ca48eb9..9deda5c 100644 --- a/src/store/stationFiltersStore.ts +++ b/src/store/stationFiltersStore.ts @@ -1,18 +1,18 @@ import { defineStore } from 'pinia'; import inputData from '../data/options.json'; -import Filter from '../scripts/interfaces/Filter'; import Station from '../scripts/interfaces/Station'; import StorageManager from '../scripts/managers/storageManager'; import { useStore } from './store'; import { filterInitStates } from './constants/initFilterStates'; import { filterStations, sortStations } from './utils/filterUtils'; +import { HeadIdsTypes } from '../scripts/data/stationHeaderNames'; export const useStationFiltersStore = defineStore('stationFiltersStore', { state() { return { inputs: inputData, filters: { ...filterInitStates }, - sorterActive: { index: 0, dir: 1 }, + sorterActive: { headerName: 'station' as HeadIdsTypes, dir: 1 }, store: useStore(), lastClickedFilterId: '', }; @@ -89,13 +89,11 @@ export const useStationFiltersStore = defineStore('stationFiltersStore', { }); }, - changeSorter(index: number) { - if (index > 4 && index < 7) return; - - if (index == this.sorterActive.index) this.sorterActive.dir = -1 * this.sorterActive.dir; + changeSorter(headerName: HeadIdsTypes) { + if (headerName == this.sorterActive.headerName) this.sorterActive.dir = -1 * this.sorterActive.dir; else this.sorterActive.dir = 1; - this.sorterActive.index = index; + this.sorterActive.headerName = headerName; }, }, }); diff --git a/src/store/store.ts b/src/store/store.ts index 7af3b94..b43e0cd 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -15,7 +15,7 @@ import { getScheduledTrain, parseSpawns, } from '../scripts/utils/storeUtils'; -import { APIData, StationJSONData, StoreState } from './storeTypes'; +import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes'; export const useStore = defineStore('store', { state: () => diff --git a/src/store/utils/filterUtils.ts b/src/store/utils/filterUtils.ts index 02a3c7b..8755bfe 100644 --- a/src/store/utils/filterUtils.ts +++ b/src/store/utils/filterUtils.ts @@ -1,34 +1,40 @@ +import { HeadIdsTypes } from '../../scripts/data/stationHeaderNames'; import Filter from '../../scripts/interfaces/Filter'; import Station from '../../scripts/interfaces/Station'; -export const sortStations = (a: Station, b: Station, sorter: { index: number; dir: number }) => { - switch (sorter.index) { - case 0: +export const sortStations = (a: Station, b: Station, sorter: { headerName: HeadIdsTypes; dir: number }) => { + switch (sorter.headerName) { + case 'station': return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name); - case 1: + case 'abbr': + if ((a.generalInfo?.abbr || '') > (b.generalInfo?.abbr || '')) return sorter.dir; + if ((a.generalInfo?.abbr || '') < (b.generalInfo?.abbr || '')) return -sorter.dir; + break; + + case 'min-lvl': 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: + case 'status': 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: + case 'dispatcher': 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: + case 'dispatcher-lvl': 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: + case 'user': if ((a.onlineInfo?.currentUsers || 0) > (b.onlineInfo?.currentUsers || 0)) return sorter.dir; if ((a.onlineInfo?.currentUsers || 0) < (b.onlineInfo?.currentUsers || 0)) return -sorter.dir; @@ -36,13 +42,13 @@ export const sortStations = (a: Station, b: Station, sorter: { index: number; di if ((a.onlineInfo?.maxUsers || 0) < (b.onlineInfo?.maxUsers || 0)) return -sorter.dir; break; - case 8: + case 'spawn': 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: + case 'timetable': 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)) diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index 0a257c0..b9d2f73 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -52,17 +52,6 @@ export default defineComponent({ mounted() { this.filterStore.setupFilters(); - // this.filterStore.inputs.options.forEach((option) => { - // const value = StorageManager.getBooleanValue(option.name); - // option.value = value; - // this.filterStore.changeFilterValue({ name: option.name, value: value }); - // }); - - // this.filterStore.inputs.sliders.forEach((slider) => { - // const value = StorageManager.getNumericValue(slider.name); - // slider.value = value; - // this.filterStore.changeFilterValue({ name: slider.name, value: value }); - // }); }, });