refactor: revamped vehicle manager adjusted for new API, improved file structure

2026-05-03 13:38:13 +00:00 · 2025-11-24 02:13:47 +01:00
parent a176e46eef
commit 8c7449a7e3
8 changed files with 396 additions and 271 deletions
@@ -0,0 +1,84 @@
+<template>
+  <div class="table-search-box">
+    <input type="text" placeholder="Wyszukaj grupę..." v-model="vehicleGroupSearchValue" />
+    <button @click="addVehicleGroupRow()">DODAJ NOWY POJAZD</button>
+  </div>
+
+  <div class="table-wrapper">
+    <table class="vehicle-manager-table">
+      <thead>
+        <tr>
+          <td style="width: 50px">#</td>
+          <td style="width: 200px">Nazwa</td>
+          <td style="width: 80px">Długość</td>
+          <td style="width: 80px">Masa</td>
+          <td style="width: 100px">Prędkość</td>
+          <td style="width: 100px">Prędkość lok.</td>
+          <td style="width: 100px">Prędkość ładown.</td>
+          <td style="width: 100px">Pojazdy</td>
+          <td style="width: 80px">Zimny start</td>
+          <td style="width: 80px">Podwójna obsada</td>
+          <td style="width: 200px">Prędkości wg masy</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="row in vehicleGroupsTableComp" :key="row.vehicleGroupRef.id">
+          <td>{{ row.vehicleGroupRef.id }}</td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.name }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.length }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.weight }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.speed }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.speedLoco }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.speedLoaded }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef._count.vehicles }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.locoProps?.coldStart ? '✅' : '❌' }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.locoProps?.doubleManned ? '✅' : '❌' }}
+          </td>
+          <td class="editable">
+            {{ row.vehicleGroupRef.massSpeeds ? 'WPISANE' : 'BRAK' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useVehiclesStore } from '../../stores/vehicles.store';
+
+const vehiclesStore = useVehiclesStore();
+const vehicleGroupSearchValue = ref('');
+
+const vehicleGroupsTableComp = computed(() => {
+  return vehiclesStore.vehicleGroupsTable
+    .filter((row) =>
+      row.vehicleGroupRef.name.toLowerCase().startsWith(vehicleGroupSearchValue.value.trim().toLowerCase()),
+    )
+    .sort((r1, r2) => {
+      return r1.vehicleGroupRef.id - r2.vehicleGroupRef.id;
+    });
+});
+
+function addVehicleGroupRow() {}
+</script>
+
+<style lang="scss" scoped></style>
@@ -0,0 +1,126 @@
+<template>
+  <div class="table-search-box">
+    <input type="text" placeholder="Wyszukaj pojazd..." v-model="vehicleSearchInput" />
+    <button @click="addVehicleRow()">DODAJ NOWY POJAZD</button>
+  </div>
+
+  <div class="table-wrapper">
+    <table class="vehicle-manager-table">
+      <thead>
+        <tr>
+          <td style="width: 50px">#</td>
+          <td style="width: 200px">Nazwa</td>
+          <td style="width: 150px">Typ</td>
+          <td style="width: 150px">Kabina (lok.)</td>
+          <td style="width: 100px">Grupa</td>
+          <td style="width: 100px">Tylko sponsorzy do</td>
+          <td style="width: 100px">Tylko zespół</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="row in vehiclesTableComp" :key="row.vehicleRef.id">
+          <td>{{ row.vehicleRef.id }}</td>
+          <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.NAME)">
+            {{ row.vehicleRef.name }}
+          </td>
+          <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.TYPE)">
+            {{ row.vehicleRef.type }}
+          </td>
+
+          <td class="editable" @click="editRowPrimitive(row, VehicleEditRowKey.CABIN)">
+            {{ row.vehicleRef.cabinName }}
+          </td>
+
+          <td class="editable">{{ row.vehicleRef.group.name }}</td>
+          <td class="editable" @click="editRowRestrictions(row, VehicleEditRestrictionKey.SPONSOR_ONLY)">
+            <span v-if="row.vehicleRef.restrictions?.sponsorOnly !== undefined">
+              {{ new Date(row.vehicleRef.restrictions.sponsorOnly).toLocaleString() }}
+            </span>
+
+            <span v-else>❌</span>
+          </td>
+          <td class="editable" @click="editRowRestrictions(row, VehicleEditRestrictionKey.TEAM_ONLY)">
+            <span v-if="row.vehicleRef.restrictions?.teamOnly !== undefined">
+              {{ row.vehicleRef.restrictions.teamOnly ? '✅' : '❌' }}
+            </span>
+
+            <span v-else>❌</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useVehiclesStore } from '../../stores/vehicles.store';
+import { IVehicleTableRow, VehicleEditRestrictionKey, VehicleEditRowKey } from '../../types/vehicles.types';
+
+const vehiclesStore = useVehiclesStore();
+const vehicleSearchInput = ref('');
+
+const vehiclesTableComp = computed(() => {
+  return vehiclesStore.vehiclesTable
+    .filter((row) => row.vehicleRef.name.toLowerCase().startsWith(vehicleSearchInput.value.trim().toLowerCase()))
+    .sort((r1, r2) => {
+      return r1.vehicleRef.id - r2.vehicleRef.id;
+    });
+});
+
+async function editRowPrimitive(row: IVehicleTableRow, editKey: VehicleEditRowKey) {
+  if (!(editKey in row.vehicleRef)) return;
+
+  const promptValue = prompt('Zmień wartość:', row.vehicleRef[editKey]);
+  if (promptValue == null) return;
+
+  const updatedData = await vehiclesStore.updateVehicle(row.vehicleRef.id, editKey, promptValue);
+
+  if (updatedData) {
+    row.vehicleRef[editKey] = updatedData[editKey]!;
+  }
+}
+
+async function editRowRestrictions(row: IVehicleTableRow, editKey: VehicleEditRestrictionKey) {
+  const restrictions: Record<VehicleEditRestrictionKey, any> = {
+    teamOnly: row.vehicleRef.restrictions?.teamOnly ?? undefined,
+    sponsorOnly: row.vehicleRef.restrictions?.sponsorOnly ?? undefined,
+  };
+
+  if (editKey == VehicleEditRestrictionKey.TEAM_ONLY) {
+    restrictions[editKey] = row.vehicleRef.restrictions ? !row.vehicleRef.restrictions[editKey] : true;
+
+    const updatedData = await vehiclesStore.updateVehicle(row.vehicleRef.id, 'restrictions', restrictions);
+
+    if (updatedData) {
+      if (!row.vehicleRef.restrictions) row.vehicleRef.restrictions = {};
+
+      row.vehicleRef.restrictions[editKey] = updatedData.restrictions![editKey];
+    }
+  }
+
+  if (editKey == VehicleEditRestrictionKey.SPONSOR_ONLY) {
+    const promptValue = prompt(
+      'Zmień wartość (timestamp):',
+      row.vehicleRef.restrictions?.sponsorOnly?.toString() ?? Date.now().toString(),
+    );
+
+    if (promptValue == null) return;
+
+    restrictions[editKey] = promptValue.trim() != '' ? parseInt(promptValue) : undefined;
+
+    const updatedData = await vehiclesStore.updateVehicle(row.vehicleRef.id, 'restrictions', restrictions);
+
+    if (updatedData) {
+      if (!row.vehicleRef.restrictions) row.vehicleRef.restrictions = {};
+
+      row.vehicleRef.restrictions[editKey] = updatedData.restrictions![editKey];
+    }
+  }
+}
+
+function addVehicleRow() {}
+</script>
+
+<style></style>