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

src/components/VehiclesManager/VehicleGroupsTable.vue

@@ -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>

src/components/VehiclesManager/VehiclesTable.vue

@@ -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>

src/stores/vehicles.store.ts

@@ -1,6 +1,13 @@
 import { defineStore } from 'pinia';
 import client from '../common/http';
-import { IVehicle, IVehicleTableRow, VehicleAPIResponse } from '../types/vehicles.types';
+import {
+  IVehicle,
+  IVehicleAPI,
+  IVehicleGroupTableRow,
+  IVehicleTableRow,
+  VehicleAPIResponse,
+  VehicleGroupAPIResponse,
+} from '../types/vehicles.types';
 import { LoadingState } from '../types/common.types';
 
 export const useVehiclesStore = defineStore('vehiclesStore', {
@@ -9,6 +16,7 @@ export const useVehiclesStore = defineStore('vehiclesStore', {
     dataState: LoadingState.INIT,
 
     vehiclesTable: [] as IVehicleTableRow[],
+    vehicleGroupsTable: [] as IVehicleGroupTableRow[],
   }),
 
   actions: {
@@ -16,9 +24,25 @@ export const useVehiclesStore = defineStore('vehiclesStore', {
       try {
         this.dataState = LoadingState.LOADING;
 
-        const vehiclesResponseData = (await client.get<VehicleAPIResponse>(`api/getVehicles`)).data;
-        this.vehicles = vehiclesResponseData;
-        this.vehiclesTable = vehiclesResponseData.map((v) => ({ vehicleRef: v, pendingChanges: {} }));
+        const [vehiclesData, vehicleGroupsData] = await Promise.all([
+          (await client.get<VehicleAPIResponse>(`manager/vehicles`)).data,
+          (await client.get<VehicleGroupAPIResponse>(`manager/vehicleGroups`)).data,
+        ]);
+
+        this.vehicles = vehiclesData.map((v) => {
+          return {
+            ...v,
+            group: vehicleGroupsData.find((g) => g.id == v.vehicleGroupsId)!,
+          };
+        });
+
+        this.vehiclesTable = this.vehicles.map((v) => ({
+          vehicleRef: v,
+        }));
+
+        this.vehicleGroupsTable = vehicleGroupsData.map((g) => ({
+          vehicleGroupRef: g,
+        }));
 
         this.dataState = LoadingState.SUCCESS;
       } catch (error) {
@@ -26,5 +50,19 @@ export const useVehiclesStore = defineStore('vehiclesStore', {
         this.dataState = LoadingState.ERROR;
       }
     },
+
+    async updateVehicle(vehicleId: number, propKey: string, propValue: any) {
+      try {
+        const response = await client.put<IVehicleAPI>(`/manager/vehicles/${vehicleId}`, {
+          [propKey]: propValue,
+        });
+
+        return response.data;
+      } catch (error) {
+        console.error(error);
+      }
+
+      return null;
+    },
   },
 });

src/styles/_global.scss

@@ -33,6 +33,56 @@ a:visited {
   box-sizing: inherit;
 }
 
+// Tables
+table {
+  table-layout: fixed;
+  text-align: center;
+  color: white;
+  position: relative;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table thead {
+  position: sticky;
+  top: 0;
+}
+
+table thead td {
+  padding: 0.4rem 0.45rem;
+  background-color: #151b24;
+  color: white;
+  top: 0;
+}
+
+table tbody tr {
+  background-color: #2c394b;
+  transition: background-color 100ms;
+  text-overflow: ellipsis;
+}
+
+table tr:nth-child(even) {
+  background-color: #334756;
+}
+
+table tr:hover {
+  background-color: #1a293b;
+  cursor: pointer;
+}
+
+table tbody tr td {
+  padding: 0.3rem 0.5rem;
+  border: 1px solid #2c2c2c;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td img {
+  height: 1.45em;
+  vertical-align: middle;
+}
+
+// Other 
 button,
 select,
 input {

src/types/vehicles.types.ts

@@ -1,4 +1,14 @@
-export type VehicleAPIResponse = IVehicle[];
+export type VehicleAPIResponse = IVehicleAPI[];
+export type VehicleGroupAPIResponse = IVehicleGroup[];
+
+export interface IVehicleAPI {
+  id: number;
+  name: string;
+  type: string;
+  cabinName?: string;
+  restrictions?: IVehicleRestrictions;
+  vehicleGroupsId: number;
+}
 
 export interface IVehicle {
   id: number;
@@ -6,7 +16,6 @@ export interface IVehicle {
   type: string;
   cabinName?: string;
   restrictions?: IVehicleRestrictions;
-  vehicleGroupsId: number;
   group: IVehicleGroup;
 }
 
@@ -15,14 +24,24 @@ export interface IVehicleRestrictions {
   teamOnly?: boolean;
 }
 
+export interface IVehicleGroupMassSpeeds {
+  none: number;
+  passenger: Record<number, number> | null;
+  cargo: Record<number, number> | null;
+}
+
 export interface IVehicleGroup {
   id: number;
   name: string;
   speed: number;
+  speedLoaded: number | null;
+  speedLoco: number | null;
   length: number;
   weight: number;
-  cargoTypes?: IVehicleCargoType[];
-  locoProps?: IVehicleLocoProps;
+  cargoTypes: IVehicleCargoType[] | null;
+  locoProps: IVehicleLocoProps | null;
+  massSpeeds: IVehicleGroupMassSpeeds | null;
+  _count: { vehicles: number };
 }
 
 export interface IVehicleCargoType {
@@ -37,17 +56,21 @@ export interface IVehicleLocoProps {
 
 export interface IVehicleTableRow {
   vehicleRef: IVehicle;
-  pendingChanges: Partial<IVehicle>;
+  // pendingChanges: Partial<IVehicle>;
+}
+
+export interface IVehicleGroupTableRow {
+  vehicleGroupRef: IVehicleGroup;
+  // pendingChanges: Partial<IVehicleGroup>;
 }
 
 export enum VehicleEditRowKey {
   NAME = 'name',
   TYPE = 'type',
   CABIN = 'cabinName',
-
 }
 
 export enum VehicleEditRestrictionKey {
-  SPONSOR_ONLY = "sponsorOnly",
-  TEAM_ONLY = "teamOnly"
-}
+  SPONSOR_ONLY = 'sponsorOnly',
+  TEAM_ONLY = 'teamOnly',
+}

src/views/ManagerView.vue

@@ -19,9 +19,15 @@
 
         <tbody>
           <tr v-for="(station, row) in sceneriesStore.sortedStationList" tabindex="0">
-            <td v-for="{ id: propName } in headers" @click="changeProperty(station, row, propName as string)" :class="propName">
+            <td
+              v-for="{ id: propName } in headers"
+              @click="changeProperty(station, row, propName as string)"
+              :class="propName"
+            >
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
-              <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>
+              <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'"
+                >URL</span
+              >
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
@@ -141,7 +147,9 @@ export default defineComponent({
         return;
       }
 
-      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex(
+        (station) => station.name == this.sceneriesStore.sortedStationList[row].name,
+      );
 
       if (stationListRow == -1) return;
       const oldValue = (this.sceneriesStore.stationList[stationListRow] as any)[propertyName];
@@ -152,15 +160,21 @@ export default defineComponent({
         return;
       }
 
-      let newValue = prompt(`Zmień wartość dla rubryki ${this.headers.find((h) => h.id === propertyName)?.value ?? ''}`, oldValue || '');
+      let newValue = prompt(
+        `Zmień wartość dla rubryki ${this.headers.find((h) => h.id === propertyName)?.value ?? ''}`,
+        oldValue || '',
+      );
       if (newValue == null) return;
-      (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
+      (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] =
+        typeof oldValue === 'number' ? parseInt(newValue) : newValue;
       // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
       this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue);
     },
 
     changeCheckpoints(row: number) {
-      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex(
+        (station) => station.name == this.sceneriesStore.sortedStationList[row].name,
+      );
 
       if (stationListRow == -1) return;
       const oldCheckpoints = this.sceneriesStore.stationList[stationListRow].checkpoints;
@@ -200,33 +214,6 @@ export default defineComponent({
   width: 100%;
 }
 
-table {
-  table-layout: fixed;
-  text-align: center;
-  color: white;
-  position: relative;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-table thead {
-  position: sticky;
-  top: 0;
-}
-
-table thead td {
-  padding: 0.4rem 0.45rem;
-  background-color: #151b24;
-  color: white;
-  top: 0;
-}
-
-table tbody tr {
-  background-color: #2c394b;
-  transition: background-color 100ms;
-  text-overflow: ellipsis;
-}
-
 table tr.current {
   outline: 1px solid white;
 }
@@ -235,25 +222,4 @@ table td.routes {
   font-size: 0.9em;
   min-width: 150px;
 }
-
-table tr:nth-child(even) {
-  background-color: #334756;
-}
-
-table tr:hover {
-  background-color: #1a293b;
-  cursor: pointer;
-}
-
-table tbody tr td {
-  padding: 0.3rem 0.5rem;
-  border: 1px solid #2c2c2c;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-td img {
-  height: 1.45em;
-  vertical-align: middle;
-}
 </style>

src/views/VehiclesManagerView.vue

@@ -6,188 +6,47 @@
           <img class="brand-image" src="/icon-logo.svg" alt="logo" />
           <h3>Edytor pojazdów</h3>
         </div>
-
-        <div class="search-box">
-          <input type="text" placeholder="Wyszukaj pojazd..." v-model="vehicleSearchValue" />
-        </div>
       </div>
 
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th style="width: 50px">#</th>
-              <th style="width: 300px">Nazwa</th>
-              <th style="width: 200px">Typ</th>
-              <th style="width: 150px">Kabina (lok.)</th>
-              <th style="width: 150px">Grupa</th>
-              <th style="width: 150px">Tylko sponsorzy do</th>
-              <th style="width: 150px">Tylko zespół</th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr v-for="row in vehiclesTableComp" :key="row.vehicleRef.id">
-              <td>{{ row.vehicleRef.id }}</td>
-              <td
-                class="editable"
-                :data-pending="row.pendingChanges.name !== undefined && row.pendingChanges.name !== row.vehicleRef.name"
-                @click="editRowPrimitive(row, VehicleEditRowKey.NAME)"
-              >
-                {{ row.pendingChanges.name ?? row.vehicleRef.name }}
-              </td>
-              <td
-                class="editable"
-                :data-pending="row.pendingChanges.type !== undefined && row.pendingChanges.type !== row.vehicleRef.type"
-                @click="editRowPrimitive(row, VehicleEditRowKey.TYPE)"
-              >
-                {{ row.pendingChanges.type ?? row.vehicleRef.type }}
-              </td>
-
-              <td
-                class="editable"
-                :data-pending="row.pendingChanges.cabinName !== undefined && row.pendingChanges.cabinName !== row.vehicleRef.cabinName"
-                @click="editRowPrimitive(row, VehicleEditRowKey.CABIN)"
-              >
-                {{ row.pendingChanges.cabinName ?? row.vehicleRef.cabinName }}
-              </td>
-
-              <td class="editable">{{ row.vehicleRef.group.name }}</td>
-              <td
-                class="editable"
-                :data-pending="
-                  row.pendingChanges.restrictions?.sponsorOnly !== undefined &&
-                  row.pendingChanges.restrictions.sponsorOnly !== row.vehicleRef.restrictions?.sponsorOnly
-                "
-                @click="editRowRestrictions(row, VehicleEditRestrictionKey.SPONSOR_ONLY)"
-              >
-                <span v-if="row.pendingChanges.restrictions?.sponsorOnly !== undefined">
-                  {{ new Date(row.pendingChanges.restrictions.sponsorOnly).toLocaleString() }}
-                </span>
-
-                <span v-else-if="row.vehicleRef.restrictions?.sponsorOnly !== undefined">
-                  {{ new Date(row.vehicleRef.restrictions.sponsorOnly).toLocaleString() }}
-                </span>
-
-                <span v-else>❌</span>
-              </td>
-              <td
-                class="editable"
-                :data-pending="
-                  row.pendingChanges.restrictions?.teamOnly !== undefined &&
-                  row.pendingChanges.restrictions.teamOnly !== row.vehicleRef.restrictions?.teamOnly
-                "
-                @click="editRowRestrictions(row, VehicleEditRestrictionKey.TEAM_ONLY)"
-              >
-                <span v-if="row.pendingChanges.restrictions?.teamOnly !== undefined">
-                  {{ row.pendingChanges.restrictions.teamOnly ? '✔️' : '❌' }}
-                </span>
-
-                <span v-else-if="row.vehicleRef.restrictions?.teamOnly !== undefined">
-                  {{ row.vehicleRef.restrictions.teamOnly ? '✔️' : '❌' }}
-                </span>
-
-                <span v-else>❌</span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <div class="mode-change-box">
+        <button @click="changeTab('vehicles')">POJAZDY</button>
+        <button @click="changeTab('vehicleGroups')">GRUPY</button>
       </div>
+
+      <keep-alive>
+        <component :is="tableTabs[currentTab]"></component>
+      </keep-alive>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import { useVehiclesStore } from '../stores/vehicles.store';
-import { VehicleEditRowKey, IVehicleTableRow, VehicleEditRestrictionKey } from '../types/vehicles.types';
-import { IVehicle } from '../types/vehicles.types';
 
-export default defineComponent({
-  data: () => ({
-    vehiclesStore: useVehiclesStore(),
-    vehicleSearchValue: '',
-    VehicleEditRowKey,
-    VehicleEditRestrictionKey,
-  }),
+import VehiclesTable from '../components/VehiclesManager/VehiclesTable.vue';
+import VehicleGroupsTable from '../components/VehiclesManager/VehicleGroupsTable.vue';
 
-  mounted() {
-    this.vehiclesStore.fetchVehicles();
-  },
+const tableTabs: Record<TableTabName, any> = {
+  vehicles: VehiclesTable,
+  vehicleGroups: VehicleGroupsTable,
+};
 
-  computed: {
-    vehiclesTableComp() {
-      return this.vehiclesStore.vehiclesTable
-        .filter((row) => row.vehicleRef.name.toLowerCase().startsWith(this.vehicleSearchValue.trim().toLowerCase()))
-        .sort((r1, r2) => {
-          //v1.name.localeCompare(v2.name, 'pl-PL')
+type TableTabName = 'vehicles' | 'vehicleGroups';
 
-          return r1.vehicleRef.id - r2.vehicleRef.id;
-        });
-    },
-  },
+const vehiclesStore = useVehiclesStore();
+const currentTab = ref<TableTabName>('vehicles');
 
-  methods: {
-    editRowPrimitive(row: IVehicleTableRow, editKey: VehicleEditRowKey) {
-      if (!(editKey in row.vehicleRef)) return;
-
-      const promptValue = prompt('Zmień wartość:', row.vehicleRef[editKey]);
-      if (promptValue == null) return;
-
-      let changedVehileObj: Partial<IVehicle> = {};
-
-      changedVehileObj[editKey] = promptValue;
-
-      if (row.vehicleRef[editKey] === promptValue) {
-        delete row.pendingChanges[editKey];
-      } else row.pendingChanges = { ...row.pendingChanges, ...changedVehileObj };
-    },
-
-    editRowRestrictions(row: IVehicleTableRow, editKey: VehicleEditRestrictionKey) {
-      let changedVehileObj: Partial<IVehicle> = {};
-
-      if (editKey == VehicleEditRestrictionKey.TEAM_ONLY) {
-        let nextTeamOnly = true;
-
-        if (row.pendingChanges.restrictions?.teamOnly !== undefined) nextTeamOnly = !row.pendingChanges.restrictions.teamOnly;
-        else if (row.vehicleRef.restrictions?.teamOnly !== undefined) nextTeamOnly = !row.vehicleRef.restrictions.teamOnly;
-
-        changedVehileObj['restrictions'] = {
-          teamOnly: nextTeamOnly,
-        };
-
-        if (row.vehicleRef.restrictions?.teamOnly === changedVehileObj.restrictions.teamOnly) delete changedVehileObj['restrictions']['teamOnly'];
-      }
-
-      if (editKey == VehicleEditRestrictionKey.SPONSOR_ONLY) {
-        const promptValue = prompt('Zmień wartość (timestamp):', row.vehicleRef.restrictions?.sponsorOnly?.toString() ?? Date.now().toString());
-
-        if (promptValue == null) return;
-
-        if (promptValue.trim() == '') {
-          changedVehileObj['restrictions'] = { sponsorOnly: undefined };
-        } else if (!isNaN(parseInt(promptValue))) {
-          const timestampPromptValue = parseInt(promptValue);
-
-          changedVehileObj['restrictions'] = { sponsorOnly: timestampPromptValue };
-        }
-      }
-
-      row.pendingChanges = { ...row.pendingChanges, ...changedVehileObj };
-
-      // console.log(this.vehiclesStore.vehiclesTable.filter((v) => Object.keys(v.pendingChanges).length > 0));
-    },
-
-    getTableValueHTML(pendingValue: any, originalValue: any) {
-      if (pendingValue === undefined) return `${originalValue ?? '-'}`;
-
-      return `<s>${originalValue ?? '-'}</s> ${pendingValue}`;
-    },
-  },
+onMounted(() => {
+  vehiclesStore.fetchVehicles();
 });
+
+function changeTab(tabName: TableTabName) {
+  currentTab.value = tabName;
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .view-wrapper {
   display: grid;
   grid-template-rows: auto 1fr;
@@ -204,49 +63,22 @@ img.brand-image {
   max-width: 4em;
 }
 
-.search-box {
+.mode-change-box {
+  display: flex;
+  gap: 0.5em;
   margin-top: 1em;
 }
 
+// For children tab elements
+.table-search-box {
+  display: flex;
+  gap: 0.5em;
+  margin-top: 0.5em;
+}
+
 .table-wrapper {
+  width: 100%;
   overflow: auto;
   margin-top: 1em;
 }
-
-table {
-  border-collapse: collapse;
-  text-align: center;
-  table-layout: fixed;
-
-  thead {
-    position: sticky;
-    top: 0;
-  }
-
-  th {
-    background-color: #2b2b2b;
-  }
-
-  tr:nth-child(odd) {
-    background-color: #3b3b3b;
-  }
-
-  tr:nth-child(even) {
-    background-color: #4c4c4c;
-  }
-
-  td.editable {
-    cursor: pointer;
-  }
-
-  td[data-pending='true'] {
-    background-color: lightgreen;
-    color: black;
-  }
-
-  th,
-  td {
-    padding: 0.5em;
-  }
-}
 </style>