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

zmiana endpointów; poprawki designu

Browse Source
This commit is contained in:
Spythere
2023-11-29 14:22:58 +01:00
parent c5b639b068
commit 6d4d6077af
7 changed files with 62 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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"
VITE_API_DEV=0
src/App.vue
+4 -13
View File
@@ -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>
src/common/http.ts
+8
View File
@@ -0,0 +1,8 @@
import axios from 'axios';
const client = axios.create({
baseURL: import.meta.env['VITE_API_URL'],
withCredentials: true,
});
export default client;
src/components/TableActions.vue
+11 -35
View File
@@ -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;
}
src/store.ts
+20 -30
View File
@@ -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) {
src/views/LoginView.vue
+9 -12
View File
@@ -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;
src/views/ManagerView.vue
+8 -11
View File
@@ -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>