refactor: code organization

src/views/LoginView.vue

@@ -1,73 +1,77 @@
 <template>
-  <div class="login">
-    <div class="login-header">
-      <img src="/icon-logo.svg" alt="logo" />
-      <h1>Stacjownik Station Manager</h1>
-    </div>
+  <div class="login-view">
+    <div class="login-wrapper">
+      <div class="login-header">
+        <img src="/icon-logo.svg" alt="logo" />
+        <h1>
+          Stacjownik Station <br />
+          Manager <sup>v{{ version }}</sup>
+        </h1>
+      </div>
 
-    <form @submit.prevent="signIn">
-      <label for="name">Nick</label>
-      <br />
-      <input type="text" id="name" v-model="name" />
-      <br />
-      <label for="password">Hasło</label>
-      <br />
-      <input type="password" id="password" v-model="password" />
-      <br />
-      <button>{{ isLoading ? 'Logowanie...' : 'Zaloguj się' }}</button>
-    </form>
-    <p style="color: yellow; height: 25px">{{ errorMessage }}</p>
+      <form class="login-form" @submit.prevent="signIn">
+        <div class="login-input-box">
+          <label for="name">Nick</label>
+          <input type="text" id="name" v-model="name" />
+        </div>
+
+        <div class="login-input-box">
+          <label for="password">Hasło</label>
+          <input type="password" id="password" v-model="password" />
+        </div>
+
+        <button class="login-button" :disabled="loginState == LoadingState.LOADING" :data-disabled="loginState == LoadingState.LOADING">
+          {{ loginState == LoadingState.LOADING ? 'Logowanie...' : loginState == LoadingState.SUCCESS ? 'Zalogowano!' : 'Zaloguj się' }}
+        </button>
+      </form>
+
+      <div class="login-warning-box" v-if="errorMessage">{{ errorMessage }}</div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store';
-import { AuthState, IUser } from '../types/types';
 import client from '../common/http';
-
-enum LoginState {
-  INITIALIZED = 0,
-  LOADING = 1,
-  LOADED = 2,
-  ERROR = 3,
-}
+import { LoadingState } from '../types/common.types';
+import { AuthState, IUser } from '../types/auth.types';
+import { useAuthStore } from '../stores/auth.store';
+import { version } from '../../package.json';
 
 export default defineComponent({
   data() {
     return {
       errorMessage: '',
-      loginState: LoginState.INITIALIZED,
-      isLoading: false,
+      loginState: LoadingState.INIT,
+      version,
     };
   },
 
   setup() {
     return {
-      LoginState,
+      LoadingState,
       AuthState,
 
       name: '',
       password: '',
-      store: useStore(),
+      authStore: useAuthStore(),
     };
   },
 
   methods: {
     async signIn(e: Event) {
-      this.loginState = LoginState.LOADING;
-      this.isLoading = true;
+      this.loginState = LoadingState.LOADING;
 
       try {
         const response = await client.post<IUser>('auth/login', { username: this.name, password: this.password });
 
         this.$router.push('/');
-        this.store.setUserData(response.data);
+        this.authStore.setUserData(response.data);
 
-        this.loginState = LoginState.LOADED;
+        this.loginState = LoadingState.SUCCESS;
       } catch (e: any) {
-        this.loginState = LoginState.ERROR;
-        this.store.removeUserData();
+        this.loginState = LoadingState.ERROR;
+        this.authStore.removeUserData();
 
         if (!e.response || e.response.status === undefined) {
           this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
@@ -84,8 +88,6 @@ export default defineComponent({
 
         this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
         return false;
-      } finally {
-        this.isLoading = false;
       }
 
       return true;
@@ -95,42 +97,59 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.login {
+.login-view {
+  padding: 0 1em;
+  min-height: 100vh;
+
   display: flex;
   align-items: center;
   justify-content: center;
-
-  flex-direction: column;
-  height: 100vh;
-
-  &-header {
-    text-align: center;
-  }
 }
 
-img {
-  width: 8em;
+.login-wrapper {
+  background-color: #2a304f;
+  border-radius: 0.5em;
+  padding: 2em 0.5em;
 }
 
-input {
-  font-size: 1.2rem;
-  margin: 0.5rem 0;
+.login-header {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  margin-bottom: 1em;
+}
+
+.login-header img {
+  width: 7em;
+}
+
+.login-header sup {
+  font-size: 0.5em;
+  color: #ccc;
+}
+
+.login-input-box input {
+  font-size: 1.2em;
+  margin: 0.5em 0;
   padding: 0.25em 0.3em;
   color: black;
+  width: 100%;
 }
 
-h2 {
-  text-align: center;
-}
-
-label {
+.login-input-box label {
   text-align: left;
 }
 
-button {
+.login-button {
   width: 100%;
-  margin: 1rem 0;
-  padding: 0.5rem 0;
-  font-size: 1rem;
+  padding: 0.5em 0;
+  font-size: 1em;
+  margin-top: 4em;
+}
+
+.login-warning-box {
+  text-align: center;
+  color: gold;
+  margin-top: 1em;
 }
 </style>

src/views/ManagerView.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="manager" v-if="store.user">
-    <RoutesModal v-if="store.currentStation" />
-    <UpdateCard v-if="store.changesResponse.length > 0" />
+  <div class="manager-view" v-if="authStore.user != null">
+    <RoutesModal v-if="sceneriesStore.currentStation" />
+    <UpdateCard v-if="sceneriesStore.changesResponse.length > 0" />
 
     <hr color="white" />
     <TableActions />
@@ -16,7 +16,7 @@
         </thead>
 
         <tbody>
-          <tr v-for="(station, row) in store.sortedStationList" tabindex="0">
+          <tr v-for="(station, row) in sceneriesStore.sortedStationList" tabindex="0">
             <td v-for="(_, propName) in headerNameList" @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>
@@ -39,8 +39,8 @@
               <select
                 name="availability"
                 :id="`select-${row}`"
-                v-model="store.sortedStationList[row]['availability']"
-                @input="(e) => changeAvailability(station, store.sortedStationList[row]['availability'], e)"
+                v-model="sceneriesStore.sortedStationList[row]['availability']"
+                @input="(e) => changeAvailability(station, sceneriesStore.sortedStationList[row]['availability'], e)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -61,18 +61,23 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import changeMixin from '../mixins/changeMixin';
-import { useStore } from '../store';
-import { SceneryRowItem, Availability, AuthState } from '../types/types';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
 import UpdateCard from '../components/UpdateCard.vue';
 import RouteList from '../components/RouteList.vue';
+import { AuthState } from '../types/auth.types';
+import { SceneryRowItem, Availability } from '../types/sceneries.types';
+import { useSceneriesStore } from '../stores/sceneries.store';
+import { useAuthStore } from '../stores/auth.store';
 
 export default defineComponent({
   components: { RoutesModal, TableActions, UpdateCard, RouteList },
   mixins: [changeMixin],
 
   data: () => ({
+    sceneriesStore: useSceneriesStore(),
+    authStore: useAuthStore(),
+
     AuthState,
     headerNameList: {
       name: 'Nazwa',
@@ -96,20 +101,13 @@ export default defineComponent({
     },
   }),
 
-  setup() {
-    const store = useStore();
-    return {
-      store,
-    };
-  },
-
   mounted() {
-    this.store.fetchSceneriesData();
+    this.sceneriesStore.fetchSceneriesData();
   },
 
   methods: {
     changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
-      this.store.selectedStationName = station.name;
+      this.sceneriesStore.selectedStationName = station.name;
 
       if (propertyName == 'checkpoints') {
         this.changeCheckpoints(row);
@@ -121,12 +119,12 @@ export default defineComponent({
         return;
       }
 
-      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
-      const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
+      const oldValue = (this.sceneriesStore.stationList[stationListRow] as any)[propertyName];
       if (typeof oldValue === 'boolean') {
-        (this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
+        (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = !oldValue;
         // this.$set(this.stationList[stationListRow], propertyName, !oldValue);
         this.addChange(station, propertyName, oldValue, !oldValue);
         return;
@@ -134,21 +132,21 @@ export default defineComponent({
 
       let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue || '');
       if (newValue == null) return;
-      (this.store.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.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
+      const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
-      const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
+      const oldCheckpoints = this.sceneriesStore.stationList[stationListRow].checkpoints;
       const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
       if (newCheckpoints === null) return;
 
-      this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
-      this.addChange(this.store.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
+      this.sceneriesStore.stationList[stationListRow]['checkpoints'] = newCheckpoints;
+      this.addChange(this.sceneriesStore.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
     },
 
     changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
@@ -161,12 +159,12 @@ export default defineComponent({
 
       if (!confirmRemove) return;
 
-      this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
+      this.sceneriesStore.stationList = this.sceneriesStore.stationList.filter(({ id }) => id != scenery.id);
       this.addRemovalChange(scenery);
     },
 
     showRoutesModal(scenery: SceneryRowItem) {
-      this.store.currentStation = scenery;
+      this.sceneriesStore.currentStation = scenery;
     },
   },
 });

src/views/VehiclesManagerView.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="manager-view">
+    <div class="view-wrapper">
+      <div class="top-bar">
+        <div class="brand">
+          <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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } 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,
+  }),
+
+  mounted() {
+    this.vehiclesStore.fetchVehicles();
+  },
+
+  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')
+
+          return r1.vehicleRef.id - r2.vehicleRef.id;
+        });
+    },
+  },
+
+  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}`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.view-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-height: 100vh;
+  padding: 0.5em;
+}
+
+.brand {
+  display: flex;
+  gap: 0.5em;
+}
+
+img.brand-image {
+  max-width: 4em;
+}
+
+.search-box {
+  margin-top: 1em;
+}
+
+.table-wrapper {
+  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>