mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 05:28:13 +00:00
refactor: code organization
This commit is contained in:
@@ -8,19 +8,19 @@
|
||||
<div>
|
||||
<div style="font-size: 0.75em; color: #ccc">v{{ packageVersion }}</div>
|
||||
<div>
|
||||
<span v-if="store.user">
|
||||
Zalogowany jako <b>{{ store.user.name }}</b>
|
||||
<span v-if="authStore.user != null">
|
||||
Zalogowany jako <b>{{ authStore.user.name }}</b>
|
||||
</span>
|
||||
•
|
||||
<span class="info-file" :class="store.dataState">
|
||||
<span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
|
||||
<span v-if="store.dataState == 'LOADED'">Załadowano dane z bazy!</span>
|
||||
<span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
|
||||
<span class="info-file" :class="sceneriesStore.dataState">
|
||||
<span v-if="sceneriesStore.dataState == LoadingState.LOADING">Ładowanie danych...</span>
|
||||
<span v-if="sceneriesStore.dataState == LoadingState.SUCCESS">Załadowano dane z bazy!</span>
|
||||
<span v-if="sceneriesStore.dataState == LoadingState.ERROR">Błąd podczas pobierania danych!</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
|
||||
<span class="file-changes" style="color: salmon" v-if="sceneriesStore.unsavedChanges">Niezapisane zmiany!</span>
|
||||
<span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,40 +29,42 @@
|
||||
<div class="pane actions-pane">
|
||||
<button @click="addNewStation">Dodaj nową stację</button>
|
||||
<button @click="confirmLoadData">Odśwież dane</button>
|
||||
<button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">Zapisz zmiany</button>
|
||||
<button @click="confirmUpdateList" :data-disabled="!sceneriesStore.unsavedChanges" :disabled="!sceneriesStore.unsavedChanges">
|
||||
Zapisz zmiany
|
||||
</button>
|
||||
<button @click="signOut">Wyloguj się</button>
|
||||
</div>
|
||||
|
||||
<div class="pane notify-pane">
|
||||
<label class="notify">
|
||||
<input type="checkbox" v-model="store.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
|
||||
<input type="checkbox" v-model="sceneriesStore.notifyDiscord" @input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)" />
|
||||
<span>
|
||||
Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
|
||||
Powiadom o zmianach: <b>{{ sceneriesStore.notifyDiscord ? 'TAK' : 'NIE' }}</b>
|
||||
</span>
|
||||
</label>
|
||||
</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="sceneriesStore.searchedSceneryName" placeholder="Wpisz nazwę scenerii..." width="350" />
|
||||
|
||||
<button @click="clearInput">Wyczyść</button>
|
||||
</div>
|
||||
|
||||
<div class="pane">
|
||||
Pokazuj maks.
|
||||
<input type="number" min="1" v-model="store.maxVisibleResults" style="width: 3em; margin: 0 0.5em" />
|
||||
<input type="number" min="1" v-model="sceneriesStore.maxVisibleResults" style="width: 3em; margin: 0 0.5em" />
|
||||
wyników
|
||||
</div>
|
||||
|
||||
<div class="pane">
|
||||
Obecnie pokazane scenerie:
|
||||
{{ Math.min(store.maxVisibleResults, store.stationList.length, store.sortedStationList.length) }} /
|
||||
{{ store.stationList.length }}
|
||||
{{ Math.min(sceneriesStore.maxVisibleResults, sceneriesStore.stationList.length, sceneriesStore.sortedStationList.length) }} /
|
||||
{{ sceneriesStore.stationList.length }}
|
||||
</div>
|
||||
|
||||
<div class="pane">
|
||||
<button @click="changelogVisible = !changelogVisible">
|
||||
{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ store.changeList.length }})
|
||||
{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog ({{ sceneriesStore.changeList.length }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -72,17 +74,24 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
import { SceneryRowItem } from '../types/types';
|
||||
import client from '../common/http';
|
||||
|
||||
import { version } from '../../package.json';
|
||||
import Changelog from './Changelog.vue';
|
||||
import { useSceneriesStore } from '../stores/sceneries.store';
|
||||
import { LoadingState } from '../types/common.types';
|
||||
import { SceneryRowItem } from '../types/sceneries.types';
|
||||
import { useGlobalStore } from '../stores/global.store';
|
||||
import { useAuthStore } from '../stores/auth.store';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
sceneriesStore: useSceneriesStore(),
|
||||
globalStore: useGlobalStore(),
|
||||
authStore: useAuthStore(),
|
||||
|
||||
LoadingState,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -94,48 +103,54 @@ export default defineComponent({
|
||||
methods: {
|
||||
confirmLoadData() {
|
||||
const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
|
||||
if (confirmed) this.store.fetchSceneriesData();
|
||||
if (confirmed) this.sceneriesStore.fetchSceneriesData();
|
||||
},
|
||||
|
||||
confirmRestoreList() {
|
||||
const confirmed = confirm('Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!');
|
||||
if (confirmed) this.restoreList();
|
||||
},
|
||||
|
||||
confirmUpdateList() {
|
||||
const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');
|
||||
if (confirmed) this.updateListToDb();
|
||||
},
|
||||
|
||||
async signOut() {
|
||||
await client.post('/auth/logout');
|
||||
this.$router.push('/login');
|
||||
this.store.removeUserData();
|
||||
this.authStore.removeUserData();
|
||||
},
|
||||
|
||||
onNotifyCheckboxChange(value: boolean) {
|
||||
window.localStorage.setItem('notifyDiscord', Number(value).toString());
|
||||
},
|
||||
|
||||
async updateListToDb() {
|
||||
try {
|
||||
const mappedChangeList = this.store.changeList.map((v) => {
|
||||
const mappedChangeList = this.sceneriesStore.changeList.map((v) => {
|
||||
if (/^#/.test(v.id.toString())) {
|
||||
return { ...v, id: undefined };
|
||||
}
|
||||
return { ...v };
|
||||
});
|
||||
const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
|
||||
this.store.changesResponse = updateResData;
|
||||
this.store.fetchSceneriesData();
|
||||
const updateResData = (await this.sceneriesStore.updateSceneriesData(mappedChangeList)).data;
|
||||
this.sceneriesStore.changesResponse = updateResData;
|
||||
this.sceneriesStore.fetchSceneriesData();
|
||||
} catch (error) {
|
||||
this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
|
||||
this.globalStore.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
||||
addNewStation() {
|
||||
const name = prompt('Nazwa nowej scenerii');
|
||||
if (!name) return;
|
||||
if (this.store.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
|
||||
this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
|
||||
if (this.sceneriesStore.stationList.some((station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL'))) {
|
||||
this.globalStore.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
|
||||
return;
|
||||
}
|
||||
this.store.newStationsCount++;
|
||||
this.sceneriesStore.newStationsCount++;
|
||||
const newSt: SceneryRowItem = {
|
||||
name,
|
||||
abbr: name.slice(0, 2),
|
||||
@@ -167,20 +182,20 @@ export default defineComponent({
|
||||
availability: 'default',
|
||||
id: `#${Math.random().toString(32).substring(2)}`,
|
||||
};
|
||||
this.store.changeList.push({ ...newSt });
|
||||
this.sceneriesStore.changeList.push({ ...newSt });
|
||||
// this.store.changeBackupList[newSt.id] = null;
|
||||
this.store.searchedSceneryName = name;
|
||||
this.store.stationList.unshift(newSt);
|
||||
this.sceneriesStore.searchedSceneryName = name;
|
||||
this.sceneriesStore.stationList.unshift(newSt);
|
||||
},
|
||||
restoreList() {
|
||||
if (this.store.backupList.length == 0) return;
|
||||
this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
|
||||
this.store.changeList = [];
|
||||
this.store.stationsToRemove = [];
|
||||
this.store.searchedSceneryName = '';
|
||||
if (this.sceneriesStore.backupList.length == 0) return;
|
||||
this.sceneriesStore.stationList = JSON.parse(JSON.stringify(this.sceneriesStore.backupList));
|
||||
this.sceneriesStore.changeList = [];
|
||||
this.sceneriesStore.stationsToRemove = [];
|
||||
this.sceneriesStore.searchedSceneryName = '';
|
||||
},
|
||||
clearInput() {
|
||||
this.store.searchedSceneryName = '';
|
||||
this.sceneriesStore.searchedSceneryName = '';
|
||||
},
|
||||
},
|
||||
components: { Changelog },
|
||||
|
||||
Reference in New Issue
Block a user