Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: skrót posterunku w tabelce

Browse Source
This commit is contained in:
Spythere
2023-04-09 01:37:11 +02:00
parent 77f61d17fd
commit 4c41076519
13 changed files with 142 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/App/StatusIndicator.vue
+1 -1
View File
@@ -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() {
src/components/StationsView/FilterOption.vue
-46
View File
@@ -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;
// }
}
}
</style>
src/components/StationsView/StationFilterCard.vue
-1
View File
@@ -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 },
src/components/StationsView/StationTable.vue
+20 -11
View File
@@ -8,26 +8,26 @@
<table>
<thead>
<tr>
<th v-for="(id, i) in headIds" :key="id" @click="() => changeSorter(i)">
<th v-for="(headerName, i) in headIds" :key="headerName" @click="changeSorter(headerName)">
<span class="header_wrapper">
<div v-html="$t(`sceneries.${id}`)"></div>
<div v-html="$t(`sceneries.${headerName}`)"></div>
<img
class="sort-icon"
v-if="sorterActive.index == i"
v-if="sorterActive.headerName == headerName"
:src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
alt="sort icon"
/>
</span>
</th>
<th v-for="(id, i) in headIconsIds" :key="id" @click="() => changeSorter(i + 7)">
<th v-for="(headerName, i) in headIconsIds" :key="headerName" @click="changeSorter(headerName)">
<span class="header_wrapper">
<img :src="getIcon(id)" :alt="id" :title="$t(`sceneries.${id}s`)" />
<img :src="getIcon(headerName)" :alt="headerName" :title="$t(`sceneries.${headerName}s`)" />
<img
class="sort-icon"
v-if="sorterActive.index == i + 7"
v-if="sorterActive.headerName == headerName"
:src="sorterActive.dir == 1 ? getIcon('arrow-asc') : getIcon('arrow-desc')"
alt="sort icon"
/>
@@ -53,6 +53,12 @@
{{ station.name }}
</td>
<td>
<b>
{{ station.generalInfo?.abbr }}
</b>
</td>
<td class="station_level">
<span v-if="station.generalInfo">
<span
@@ -236,6 +242,7 @@ import Station from '../../scripts/interfaces/Station';
import { useStationFiltersStore } from '../../store/stationFiltersStore';
import { useStore } from '../../store/store';
import Loading from '../Global/Loading.vue';
import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
export default defineComponent({
props: {
@@ -249,8 +256,8 @@ export default defineComponent({
mixins: [styleMixin, dateMixin, stationInfoMixin, returnBtnMixin, imageMixin],
data: () => ({
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;
src/locales/en.json
+1
View File
@@ -202,6 +202,7 @@
},
"sceneries": {
"station": "Station",
"abbr": "Station\nabbrev.",
"min-lvl": "Min. dispatcher\nlevel",
"status": "Status",
"dispatcher": "Dispatcher",
src/locales/pl.json
+1
View File
@@ -207,6 +207,7 @@
},
"sceneries": {
"station": "Stacja",
"abbr": "Skrót\nposterunku",
"min-lvl": "Min. poziom\ndyżurnego",
"status": "Status",
"dispatcher": "Dyżurny",
src/scripts/data/stationHeaderNames.ts
+14
View File
@@ -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];
src/scripts/interfaces/Station.ts
+4 -2
View File
@@ -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;
src/store/storeTypes.ts → src/scripts/interfaces/store/storeTypes.ts
+79 -78
View File
@@ -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;
}
src/store/stationFiltersStore.ts
+5 -7
View File
@@ -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;
},
},
});
src/store/store.ts
+1 -1
View File
@@ -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: () =>
src/store/utils/filterUtils.ts
+16 -10
View File
@@ -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))
src/views/StationsView.vue
-11
View File
@@ -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 });
// });
},
});
</script>