From 6d4d6077af369d08e38e2efd66e2cb9845e3919d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 29 Nov 2023 14:22:58 +0100
Subject: [PATCH] =?UTF-8?q?zmiana=20endpoint=C3=B3w;=20poprawki=20designu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                            |  4 +--
 src/App.vue                     | 17 +++--------
 src/common/http.ts              |  8 ++++++
 src/components/TableActions.vue | 46 ++++++++----------------------
 src/store.ts                    | 50 +++++++++++++--------------------
 src/views/LoginView.vue         | 21 ++++++--------
 src/views/ManagerView.vue       | 19 ++++++-------
 7 files changed, 62 insertions(+), 103 deletions(-)
 create mode 100644 src/common/http.ts

diff --git a/.env b/.env
index 8e63cd4..1ea1c62 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-VITE_API_URL="https://stacjownik.spythere.pl"
+VITE_API_URL="https://stacjownik.spythere.eu"
 VITE_API_URL_DEV="http://localhost:3001"
-VITE_API_DEV="0"
\ No newline at end of file
+VITE_API_DEV=0
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7631ad5..196ab80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,11 +8,10 @@
 import { defineComponent } from 'vue';
 import PopUpCard from './components/PopUpCard.vue';
 import { RouterView } from 'vue-router';
-import { AuthState } from './types/types';
-import { baseURL, useStore } from './store';
+import { useStore } from './store';
 import useLocalStorage from './mixins/useLocalStorage';
-import axios from 'axios';
 import { IUser } from './types/types';
+import client from './common/http';
 
 export default defineComponent({
   components: { PopUpCard },
@@ -33,14 +32,7 @@ export default defineComponent({
       try {
         this.tokenLoading = true;
 
-        const response = await axios.post<IUser>(
-          '/auth/token',
-          {},
-          {
-            baseURL,
-            withCredentials: true,
-          }
-        );
+        const response = await client.post<IUser>('/auth/token');
 
         this.store.setUserData(response.data);
         this.$router.push('/');
@@ -96,7 +88,7 @@ button {
   outline: none;
   border: none;
 
-  background-color: #000000;
+  background-color: #0066ff;
   color: white;
 
   padding: 0.5rem 0.75rem;
@@ -164,4 +156,3 @@ button {
   background: #aaa;
 }
 </style>
-
diff --git a/src/common/http.ts b/src/common/http.ts
new file mode 100644
index 0000000..07b851b
--- /dev/null
+++ b/src/common/http.ts
@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: import.meta.env['VITE_API_URL'],
+  withCredentials: true,
+});
+
+export default client;
diff --git a/src/components/TableActions.vue b/src/components/TableActions.vue
index 878ad00..c996d57 100644
--- a/src/components/TableActions.vue
+++ b/src/components/TableActions.vue
@@ -21,19 +21,13 @@
       <button @click="addNewStation">Dodaj nową stację</button>
       <button @click="confirmLoadData">Odśwież dane</button>
       &nbsp;
-      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">
-        Zapisz zmiany
-      </button>
+      <button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">Zapisz zmiany</button>
       <button @click="signOut">Wyloguj się</button>
     </div>
 
     <div class="pane notify-pane">
       <label id="notify">
-        <input
-          type="checkbox"
-          v-model="store.notifyDiscord"
-          @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)"
-        />
+        <input type="checkbox" v-model="store.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
         <span>
           Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
         </span>
@@ -41,14 +35,7 @@
     </div>
 
     <div class="pane search-pane">
-      <input
-        class="search"
-        ref="search"
-        type="text"
-        v-model="store.searchedSceneryName"
-        placeholder="Wpisz nazwę scenerii..."
-        width="350"
-      />
+      <input class="search" ref="search" type="text" v-model="store.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />
 
       <button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
     </div>
@@ -66,9 +53,7 @@
     </div>
 
     <div class="pane">
-      <button @click="changelogVisible = !changelogVisible">
-        {{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
-      </button>
+      <button @click="changelogVisible = !changelogVisible">{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog</button>
     </div>
 
     <div class="changelog" v-if="changelogVisible">
@@ -82,10 +67,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import routesMixin from '../mixins/routesMixin';
-import { useStore, baseURL } from '../store';
+import { useStore } from '../store';
 import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRoutesInfo, SceneryRowItem } from '../types/types';
 import { getAvailabilityValue } from '../types/typeUitls';
 import axios from 'axios';
+import client from '../common/http';
 
 export default defineComponent({
   setup() {
@@ -115,12 +101,7 @@ export default defineComponent({
 
             if (/id|name/.test(propChange)) continue;
 
-            let value =
-              typeof changeItem[propChange] === 'boolean'
-                ? changeItem[propChange]
-                  ? 'TAK'
-                  : 'NIE'
-                : changeItem[propChange];
+            let value = typeof changeItem[propChange] === 'boolean' ? (changeItem[propChange] ? 'TAK' : 'NIE') : changeItem[propChange];
 
             if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
             if (propChange == 'routesInfo') value = this.getRouteNames(changeItem[propChange] as SceneryRoutesInfo[]);
@@ -142,9 +123,7 @@ export default defineComponent({
     },
 
     confirmRestoreList() {
-      const confirmed = confirm(
-        'Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!'
-      );
+      const confirmed = confirm('Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!');
 
       if (confirmed) this.restoreList();
     },
@@ -156,7 +135,7 @@ export default defineComponent({
     },
 
     async signOut() {
-      await axios.post('/auth/logout', {}, { baseURL, withCredentials: true });
+      await client.post('/auth/logout');
 
       this.$router.push('/login');
       this.store.removeUserData();
@@ -182,6 +161,7 @@ export default defineComponent({
         this.store.fetchSceneriesData();
       } catch (error) {
         this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
+        console.error(error);
       }
     },
 
@@ -189,11 +169,7 @@ export default defineComponent({
       const name = prompt('Nazwa nowej scenerii');
       if (!name) return;
 
-      if (
-        this.store.stationList.some(
-          (station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL')
-        )
-      ) {
+      if (this.store.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
         this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
         return;
       }
diff --git a/src/store.ts b/src/store.ts
index 7ed0101..1a71720 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,8 +1,7 @@
 import { defineStore } from 'pinia';
 import { AuthState, ILoginResponse, IStore, IUser, SceneryRowItem } from './types/types';
 import axios from 'axios';
-
-export const baseURL = import.meta.env['VITE_API_URL'];
+import client from './common/http';
 
 export const useStore = defineStore('store', {
   state: () =>
@@ -33,42 +32,33 @@ export const useStore = defineStore('store', {
     } as IStore),
 
   actions: {
-    fetchSceneriesData() {
+    async fetchSceneriesData() {
       this.dataState = 'LOADING';
 
-      const data = axios.get<SceneryRowItem[]>(`api/getSceneries`, {
-        baseURL,
-      });
-
-      data
-        .then((res) => {
-          this.dataState = 'LOADED';
-          this.backupList = JSON.parse(JSON.stringify(res.data));
-          this.stationList = res.data;
-          this.unsavedChanges = false;
-          this.changeList = [];
-        })
-        .catch(() => {
-          this.dataState = 'ERROR';
-        });
+      try {
+        const data = (await client.get<SceneryRowItem[]>(`api/getSceneries`)).data;
+        this.dataState = 'LOADED';
+        this.backupList = JSON.parse(JSON.stringify(data));
+        this.stationList = data;
+        this.unsavedChanges = false;
+        this.changeList = [];
+      } catch (error: any) {
+        this.dataState = 'ERROR';
+        console.error('Błąd podczas ładowania danych: ', error?.response || error);
+      }
     },
 
     async updateSceneriesData(mappedChangeList: any[]) {
-      console.log(mappedChangeList);
-
-      const response = await axios.post(
-        '/manager/updateSceneryList',
-        {
+      try {
+        const response = await client.post('manager/updateSceneryList', {
           changeList: mappedChangeList,
           notify: this.notifyDiscord,
-        },
-        {
-          baseURL,
-          withCredentials: true,
-        }
-      );
+        });
 
-      return response;
+        return response;
+      } catch (error) {
+        throw error;
+      }
     },
 
     setUserData(responseData: IUser) {
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index c2faa4d..0c72319 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -14,7 +14,7 @@
       <br />
       <input type="password" id="password" v-model="password" />
       <br />
-      <button>{{ loginState == LoginState.LOADING ? 'Logowanie...' : 'Zaloguj się' }}</button>
+      <button>{{ isLoading ? 'Logowanie...' : 'Zaloguj się' }}</button>
     </form>
     <p style="color: yellow; height: 25px">{{ errorMessage }}</p>
   </div>
@@ -22,9 +22,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore, baseURL } from '../store';
+import { useStore } from '../store';
 import { AuthState, IUser } from '../types/types';
-import axios from 'axios';
+import client from '../common/http';
 
 enum LoginState {
   INITIALIZED = 0,
@@ -38,6 +38,7 @@ export default defineComponent({
     return {
       errorMessage: '',
       loginState: LoginState.INITIALIZED,
+      isLoading: false,
     };
   },
 
@@ -55,21 +56,15 @@ export default defineComponent({
   methods: {
     async signIn(e: Event) {
       this.loginState = LoginState.LOADING;
+      this.isLoading = true;
 
       try {
-        const response = await axios.post<IUser>(
-          'auth/login',
-          { username: this.name, password: this.password },
-          {
-            baseURL,
-            withCredentials: true,
-          }
-        );
+        const response = await client.post<IUser>('auth/login', { username: this.name, password: this.password });
 
+        this.$router.push('/');
         this.store.setUserData(response.data);
 
         this.loginState = LoginState.LOADED;
-        this.$router.push('/');
       } catch (e: any) {
         this.loginState = LoginState.ERROR;
         this.store.removeUserData();
@@ -89,6 +84,8 @@ export default defineComponent({
 
         this.errorMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
         return false;
+      } finally {
+        this.isLoading = false;
       }
 
       return true;
diff --git a/src/views/ManagerView.vue b/src/views/ManagerView.vue
index ddf693b..27fa3f1 100644
--- a/src/views/ManagerView.vue
+++ b/src/views/ManagerView.vue
@@ -19,9 +19,7 @@
           <tr v-for="(station, row) in store.sortedStationList" tabindex="0">
             <td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)">
               <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>
 
@@ -119,9 +117,7 @@ export default defineComponent({
         return;
       }
 
-      const stationListRow = this.store.stationList.findIndex(
-        (station) => station.name == this.store.sortedStationList[row].name
-      );
+      const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
       const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
@@ -134,16 +130,13 @@ 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.store.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.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
 
       if (stationListRow == -1) return;
       const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
@@ -234,4 +227,8 @@ td img {
   height: 1.45em;
   vertical-align: middle;
 }
+
+button {
+  color: black;
+}
 </style>