Spythere/station-manager-2.0
1
0
Fork 0
mirror of https://github.com/Spythere/station-manager-2.0.git synced 2026-05-03 05:28:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: finished vehicle groups table filters, added default sorters dir on change

Browse Source
This commit is contained in:
Spythere
2025-12-02 02:09:04 +01:00
parent 6e5ace5361
commit cabb321262
1 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/VehiclesManager/VehicleGroupsTable.vue
+34 -27
View File
@@ -24,12 +24,7 @@
<table class="vehicle-manager-table">
<thead>
<tr>
<td
v-for="header in headers"
:style="`width: ${header.elementWidth}px`"
@click="sortTableBy(header.id)"
:data-sortable="header.sortable"
>
<td v-for="header in headers" :style="`width: ${header.elementWidth}px`" @click="sortTableBy(header.id)">
<div>
{{ header.title }}
@@ -65,15 +60,11 @@
</td>
<td>
{{ row.vehicleGroupRef.speedLoco }}
{{ row.vehicleGroupRef.speedLoco ?? '-' }}
</td>
<td>
{{ row.vehicleGroupRef.speedLoaded }}
</td>
<td>
{{ row.vehicleGroupRef._count.vehicles }}
{{ row.vehicleGroupRef.speedLoaded ?? '-' }}
</td>
<td>
@@ -85,7 +76,15 @@
</td>
<td>
{{ row.vehicleGroupRef.massSpeeds ? 'WPISANE' : 'BRAK' }}
{{ row.vehicleGroupRef.massSpeeds ? '✅' : '❌' }}
</td>
<td>
{{ row.vehicleGroupRef.cargoTypes?.length ?? '-' }}
</td>
<td>
{{ row.vehicleGroupRef._count.vehicles ?? '0' }}
</td>
</tr>
</tbody>
@@ -97,14 +96,14 @@
import { computed, onMounted, ref, watch } from 'vue';
import { useVehiclesStore } from '../../stores/vehicles.store';
import { LucideArrowDown, LucideArrowUp, LucidePlus, LucideX } from 'lucide-vue-next';
import { IVehicleGroup, IVehicleGroupTableRow, VehicleGroupEditRowKey } from '../../types/vehicles.types';
import { IVehicleGroup } from '../../types/vehicles.types';
import VehicleGroupEditModal from './VehicleGroupEditModal.vue';
interface TableHeader {
id: string;
elementWidth: number;
title: string;
sortable: boolean;
defaultSorterDir: number;
}
const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) => number> = {
@@ -115,20 +114,28 @@ const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) =>
speed: (v1, v2) => (v1.speed - v2.speed) * activeSortDir.value,
speedLoco: (v1, v2) => ((v1.speedLoco || 0) - (v2.speedLoco || 0)) * activeSortDir.value,
speedLoaded: (v1, v2) => ((v1.speedLoaded || 0) - (v2.speedLoaded || 0)) * activeSortDir.value,
coldStart: (v1, v2) =>
((v1.locoProps?.coldStart ? 1 : -1) - (v2.locoProps?.coldStart ? 1 : -1)) * activeSortDir.value,
doubleManned: (v1, v2) =>
((v1.locoProps?.doubleManned ? 1 : -1) - (v2.locoProps?.doubleManned ? 1 : -1)) * activeSortDir.value,
massSpeeds: (v1, v2) => ((v1.massSpeeds ? 1 : -1) - (v2.massSpeeds ? 1 : -1)) * activeSortDir.value,
cargoTypes: (v1, v2) => ((v1.cargoTypes?.length ?? 0) - (v2.cargoTypes?.length ?? 0)) * activeSortDir.value,
vehicles: (v1, v2) => (v1._count.vehicles - v2._count.vehicles) * activeSortDir.value,
};
const headers: TableHeader[] = [
{ id: 'id', elementWidth: 50, title: '#', sortable: true },
{ id: 'name', elementWidth: 150, title: 'Nazwa', sortable: true },
{ id: 'length', elementWidth: 100, title: 'Długość', sortable: true },
{ id: 'weight', elementWidth: 100, title: 'Masa', sortable: true },
{ id: 'speed', elementWidth: 100, title: 'Prędkość', sortable: true },
{ id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', sortable: true },
{ id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', sortable: true },
{ id: 'vehicles', elementWidth: 80, title: 'Pojazdy', sortable: true },
{ id: 'coldStart', elementWidth: 75, title: 'Zimny start', sortable: true },
{ id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', sortable: true },
{ id: 'massSpeeds', elementWidth: 100, title: 'Prędkości wg masy', sortable: false },
{ id: 'id', elementWidth: 50, title: '#', defaultSorterDir: 1 },
{ id: 'name', elementWidth: 150, title: 'Nazwa', defaultSorterDir: 1 },
{ id: 'length', elementWidth: 100, title: 'Długość', defaultSorterDir: -1 },
{ id: 'weight', elementWidth: 100, title: 'Masa', defaultSorterDir: -1 },
{ id: 'speed', elementWidth: 100, title: 'Prędkość', defaultSorterDir: -1 },
{ id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', defaultSorterDir: -1 },
{ id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', defaultSorterDir: -1 },
{ id: 'coldStart', elementWidth: 75, title: 'Zimny start', defaultSorterDir: -1 },
{ id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', defaultSorterDir: -1 },
{ id: 'massSpeeds', elementWidth: 80, title: 'Prędkości wg masy', defaultSorterDir: -1 },
{ id: 'cargoTypes', elementWidth: 80, title: 'Ładunki', defaultSorterDir: -1 },
{ id: 'vehicles', elementWidth: 80, title: 'Pojazdy', defaultSorterDir: -1 },
];
const vehiclesStore = useVehiclesStore();
@@ -164,7 +171,7 @@ function sortTableBy(id: string) {
if (!(id in sorterFunctions)) return;
if (activeSortKey.value == id) activeSortDir.value *= -1;
else activeSortDir.value = 1;
else activeSortDir.value = headers.find((h) => h.id == id)?.defaultSorterDir ?? 1;
activeSortKey.value = id;
}