mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 13:38:13 +00:00
Migracja projektu na Vite
This commit is contained in:
+88
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<PopUpCard v-if="store.alertMessage || store.confirmMessage" />
|
||||
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import dataMixin from './mixins/dataMixin';
|
||||
import { useStore } from './store';
|
||||
import PopUpCard from './components/PopUpCard.vue';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dataMixin],
|
||||
components: { PopUpCard },
|
||||
setup() {
|
||||
const store = useStore();
|
||||
return {
|
||||
store,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async autoLogin() {
|
||||
const token = window.localStorage.getItem('auth-token');
|
||||
if (token) {
|
||||
this.store.isAuthorized = true;
|
||||
this.store.token = token;
|
||||
this.store.user = JSON.parse(window.localStorage.getItem('user')!);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.autoLogin();
|
||||
if (window.localStorage.getItem('notifyDiscord') !== null) {
|
||||
this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(124, 164, 218);
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
padding: 0 0.25em;
|
||||
margin: 0;
|
||||
background-color: #1e263f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
outline: none;
|
||||
|
||||
background-color: #151515;
|
||||
color: white;
|
||||
border: 1px solid white;
|
||||
|
||||
padding: 0.35rem 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
cursor: pointer;
|
||||
transition: background-color 100ms;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
button:focus-within {
|
||||
border: 1px solid gold;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="bg-dimmer"></div>
|
||||
<div class="popup-card">
|
||||
<div class="card_content">
|
||||
<p>{{ store.alertMessage || store.confirmMessage }}</p>
|
||||
</div>
|
||||
|
||||
<div class="card_actions">
|
||||
<span v-if="store.alertMessage">
|
||||
<button @click="closeCard">OK!</button>
|
||||
</span>
|
||||
|
||||
<span v-else-if="store.confirmMessage">
|
||||
<button @click="confirm">OK!</button>
|
||||
<button @click="closeCard">Anuluj</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['confirm'],
|
||||
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeCard() {
|
||||
this.store.alertMessage = '';
|
||||
this.store.confirmMessage = '';
|
||||
},
|
||||
|
||||
confirm() {
|
||||
this.$emit('confirm');
|
||||
this.closeCard();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-dimmer {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: #0000004f;
|
||||
}
|
||||
.popup-card {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
width: 80%;
|
||||
max-width: 350px;
|
||||
|
||||
padding: 0.5em 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
font-size: 1.35em;
|
||||
|
||||
background-color: #2a2a2a;
|
||||
box-shadow: 2px 0 10px 2px #1f1f1f;
|
||||
}
|
||||
|
||||
.card_content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card_actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="routes-modal" v-if="store.currentStation">
|
||||
<div class="exit" @click="closeRoutesModal">
|
||||
<img src="/icon-exit.svg" alt="exit icon" />
|
||||
</div>
|
||||
|
||||
<div class="modal-wrapper">
|
||||
<h1>Szlaki na scenerii {{ store.currentStation.name }}</h1>
|
||||
|
||||
<ul class="route-list">
|
||||
<li class="route" v-for="(route, i) in computedRouteList" :key="route.routeName + i">
|
||||
<img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
|
||||
|
||||
<form>
|
||||
<div>Szlak: <input type="text" v-model="route.routeName" /></div>
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
:name="`${route.routeName}-internal`"
|
||||
:id="`${route.routeName}-internal`"
|
||||
v-model="route.routeIsInternal"
|
||||
/>
|
||||
<label :for="`${route.routeName}-internal`">Szlak wewnętrzny</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>Liczba torów: </span>
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-tracks`"
|
||||
:id="`${route.routeName}-track1`"
|
||||
:value="Number(1)"
|
||||
:checked="route.routeTracks == 1"
|
||||
v-model="route.routeTracks"
|
||||
/>
|
||||
<label :for="`${route.routeName}-track1`">1</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-tracks`"
|
||||
:id="`${route.routeName}-track2`"
|
||||
:value="Number(2)"
|
||||
:checked="route.routeTracks == 2"
|
||||
v-model="route.routeTracks"
|
||||
/>
|
||||
<label :for="`${route.routeName}-track2`">2</label>
|
||||
</div>
|
||||
<div>
|
||||
<span>Elektryfikacja: </span>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-electr`"
|
||||
:id="`${route.routeName}-E`"
|
||||
:checked="route.routeElectrification == 'E'"
|
||||
value="E"
|
||||
v-model="route.routeElectrification"
|
||||
/>
|
||||
<label :for="`${route.routeName}-E`">Tak</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-electr`"
|
||||
:id="`${route.routeName}-N`"
|
||||
:checked="route.routeElectrification == 'N'"
|
||||
value="N"
|
||||
v-model="route.routeElectrification"
|
||||
/>
|
||||
<label :for="`${route.routeName}-N`">Nie</label>
|
||||
</div>
|
||||
<div>
|
||||
<span>Typ blokady: </span>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-block`"
|
||||
:id="`${route.routeName}-PBL`"
|
||||
:checked="route.routeBlockType == 'P'"
|
||||
value="P"
|
||||
v-model="route.routeBlockType"
|
||||
/>
|
||||
<label :for="`${route.routeName}-PBL`">PBL</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-block`"
|
||||
:id="`${route.routeName}-SBL`"
|
||||
:checked="route.routeBlockType == 'S'"
|
||||
value="S"
|
||||
v-model="route.routeBlockType"
|
||||
/>
|
||||
<label :for="`${route.routeName}-SBL`">SBL</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>Blokada dwukierunkowa: </span>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-2twb`"
|
||||
:id="`${route.routeName}-twb`"
|
||||
:checked="route.routeHasTwoWayBlock"
|
||||
:value="true"
|
||||
v-model="route.routeHasTwoWayBlock"
|
||||
/>
|
||||
<label :for="`${route.routeName}-twb`">Tak</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
:name="`${route.routeName}-2twb`"
|
||||
:id="`${route.routeName}-notwb`"
|
||||
:checked="!route.routeHasTwoWayBlock"
|
||||
:value="false"
|
||||
v-model="route.routeHasTwoWayBlock"
|
||||
/>
|
||||
<label :for="`${route.routeName}-notwb`">Nie</label>
|
||||
</div>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="routes-actions">
|
||||
<button @click="saveRoutes">Zapisz</button>
|
||||
<button @click="addNewRoute">Dodaj szlak</button>
|
||||
<button @click="closeRoutesModal">Zamknij</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">import { defineComponent } from 'vue';
|
||||
import changeMixin from '../mixins/changeMixin';
|
||||
import { useStore } from '../store';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [changeMixin],
|
||||
|
||||
data: () => ({
|
||||
currentRoutes: '',
|
||||
routeBackup: '',
|
||||
}),
|
||||
|
||||
computed: {
|
||||
computedRouteList() {
|
||||
if (!this.store.currentStation) return [];
|
||||
|
||||
if (this.currentRoutes.length == 0) return [];
|
||||
|
||||
return this.currentRoutes.split(';').map((route) => {
|
||||
/*
|
||||
Route: !Oc_2EPB
|
||||
! - szlak wewnętrzny (! - tak, brak wykrzyknika - nie)
|
||||
Oc - nazwa scenerii
|
||||
2 - liczba torów (1 lub 2)
|
||||
E - elektryfikacja (E - tak, N - nie)
|
||||
P - rodzaj blokady (P - PBL, S - SBL)
|
||||
B - blokada dwukierunkowa (B - tak, brak litery - nie)
|
||||
*/
|
||||
const routeProps = route.split('_');
|
||||
const routeIsInternal = routeProps[0].startsWith('!');
|
||||
const routeName = routeIsInternal ? routeProps[0].replace('!', '') : routeProps[0];
|
||||
|
||||
const routeSpecs = routeProps[1];
|
||||
return {
|
||||
routeName,
|
||||
routeTracks: Number(routeSpecs[0]),
|
||||
routeElectrification: routeSpecs[1],
|
||||
routeBlockType: routeSpecs[2],
|
||||
routeHasTwoWayBlock: routeSpecs[3] ? true : false,
|
||||
routeIsInternal,
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.store.currentStation) {
|
||||
this.currentRoutes = this.store.currentStation.routes;
|
||||
this.routeBackup = this.currentRoutes;
|
||||
}
|
||||
// console.log(this.currentRoutes + " git");
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
closeRoutesModal() {
|
||||
this.store.currentStation = null;
|
||||
this.currentRoutes = '';
|
||||
},
|
||||
|
||||
addNewRoute() {
|
||||
this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP`;
|
||||
this.saveRoutes();
|
||||
},
|
||||
|
||||
removeRoute(index: number) {
|
||||
this.currentRoutes = this.currentRoutes
|
||||
.split(';')
|
||||
.filter((_, i) => i != index)
|
||||
.join(';');
|
||||
|
||||
this.saveRoutes();
|
||||
},
|
||||
|
||||
saveRoutes() {
|
||||
const index = this.store.stationList.findIndex((station) => station.name === this.store.currentStation?.name);
|
||||
|
||||
if (index == -1) return;
|
||||
|
||||
const routeString = this.computedRouteList
|
||||
.map(
|
||||
(route) =>
|
||||
`${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
|
||||
route.routeElectrification
|
||||
}${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}`
|
||||
)
|
||||
.join(';');
|
||||
|
||||
this.store.stationList[index]['routes'] = routeString;
|
||||
this.currentRoutes = routeString;
|
||||
|
||||
this.addChange(this.store.currentStation!.name, 'routes', this.routeBackup, routeString);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.routes-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
|
||||
height: 95%;
|
||||
overflow: hidden;
|
||||
padding: 0.5em 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 100;
|
||||
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
overflow: auto;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.routes-modal h1 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
background-color: #333;
|
||||
padding: 0.5em 2em;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.routes-modal label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.routes-modal .exit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0.5em 1.5em;
|
||||
}
|
||||
|
||||
.exit img {
|
||||
width: 2.5em;
|
||||
}
|
||||
|
||||
.routes-modal input {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0.5em 0;
|
||||
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul li {
|
||||
padding: 0.65em;
|
||||
margin: 0.5em 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.route-delete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0.5em;
|
||||
width: 1.15em;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.routes-actions {
|
||||
background-color: #333;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.routes-actions button {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div class="table-actions">
|
||||
<div class="pane info-pane">
|
||||
<div>
|
||||
<span v-if="store.user">
|
||||
Zalogowany jako <b>{{ store.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>
|
||||
//
|
||||
<span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</span>
|
||||
<span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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)"
|
||||
/>
|
||||
<span>
|
||||
Powiadom o zmianach: <b>{{ store.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"
|
||||
/>
|
||||
|
||||
<button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import axios from 'axios';
|
||||
import { defineComponent } from 'vue';
|
||||
import dataMixin from '../mixins/dataMixin';
|
||||
import { useStore } from '../store';
|
||||
import { SceneryRowItem } from '../types/types';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [dataMixin],
|
||||
|
||||
methods: {
|
||||
confirmLoadData() {
|
||||
const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
|
||||
|
||||
if (confirmed) this.loadData();
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
signOut() {
|
||||
this.store.token = null;
|
||||
this.store.isAuthorized = false;
|
||||
|
||||
window.localStorage.removeItem('auth-token');
|
||||
window.localStorage.removeItem('user');
|
||||
|
||||
this.$router.push('/login');
|
||||
},
|
||||
|
||||
onNotifyCheckboxChange(value: boolean) {
|
||||
window.localStorage.setItem('notifyDiscord', Number(value).toString());
|
||||
},
|
||||
|
||||
async updateListToDb() {
|
||||
try {
|
||||
const mappedChangeList = Object.entries(this.store.changeList).map(([k, v]) => {
|
||||
return { name: k, ...v };
|
||||
});
|
||||
|
||||
await axios.post(
|
||||
`${this.API_URL}/manager/updateSceneryList`,
|
||||
{
|
||||
changeList: mappedChangeList,
|
||||
token: this.store.token,
|
||||
notify: this.store.notifyDiscord,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${this.store.token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
alert('Zapisano do bazy!');
|
||||
this.loadData();
|
||||
} catch (error) {
|
||||
this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
|
||||
}
|
||||
},
|
||||
|
||||
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!';
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.newStationsCount++;
|
||||
|
||||
const newSt: SceneryRowItem = {
|
||||
name,
|
||||
url: '',
|
||||
lines: '',
|
||||
project: null,
|
||||
reqLevel: -1,
|
||||
signalType: 'współczesna',
|
||||
controlType: 'SCS',
|
||||
SUP: false,
|
||||
routes: 'Test_1EPB"',
|
||||
checkpoints: '',
|
||||
authors: '',
|
||||
availability: 'default',
|
||||
};
|
||||
|
||||
this.store.changeList[name] = { ...newSt };
|
||||
this.store.changeBackupList[name] = null;
|
||||
this.store.searchedSceneryName = name;
|
||||
|
||||
this.store.unsavedChanges = true;
|
||||
|
||||
this.store.stationList.unshift(newSt);
|
||||
},
|
||||
|
||||
restoreList() {
|
||||
if (this.store.backupList.length == 0) return;
|
||||
|
||||
this.store.stationList = JSON.parse(this.store.backupList);
|
||||
this.store.changeList = {};
|
||||
this.store.changeBackupList = {};
|
||||
this.store.stationsToRemove = [];
|
||||
this.store.unsavedChanges = false;
|
||||
this.store.searchedSceneryName = '';
|
||||
},
|
||||
|
||||
clearInput() {
|
||||
this.store.searchedSceneryName = '';
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
button {
|
||||
&[data-disabled='true'] {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.info-file {
|
||||
color: greenyellow;
|
||||
}
|
||||
|
||||
.info-file.LOADING {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.info-file.ERROR {
|
||||
color: salmon;
|
||||
}
|
||||
|
||||
#notify-checkbox:checked + label {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.search {
|
||||
color: black;
|
||||
|
||||
border: 1px solid white;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
|
||||
padding: 0.35em 0.4em;
|
||||
}
|
||||
|
||||
.pane {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actions-pane {
|
||||
margin-top: 1em;
|
||||
|
||||
button {
|
||||
margin: 0.5em 0.5em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notify-pane {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.search-pane {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
label#notify {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
color: #000;
|
||||
|
||||
span {
|
||||
padding: 0.3em 0.25em;
|
||||
background-color: salmon;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + span {
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.pane {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { createApp } from 'vue';
|
||||
import router from './router';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
createApp(App).use(router).use(createPinia()).mount('#app');
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
addChange(stationName: string, propName: string, oldValue: any, newValue: any) {
|
||||
if (oldValue === newValue) return;
|
||||
|
||||
if (this.store.changeList[stationName] === null || !(stationName in this.store.changeList))
|
||||
this.store.changeList[stationName] = {};
|
||||
|
||||
if (propName === 'name') {
|
||||
const station = this.store.stationList[this.store.stationList.findIndex((v) => v.name == newValue)];
|
||||
console.log(oldValue, newValue, station);
|
||||
|
||||
this.store.changeBackupList[oldValue] = { ...station, name: oldValue };
|
||||
this.store.changeBackupList[newValue] = null;
|
||||
|
||||
this.store.changeList[oldValue] = null;
|
||||
this.store.changeList[newValue] = { ...station };
|
||||
} else {
|
||||
this.store.changeList[stationName][propName] = newValue;
|
||||
|
||||
if (!this.store.changeBackupList[stationName]) this.store.changeBackupList[stationName] = {};
|
||||
|
||||
if (this.store.changeBackupList[stationName][propName] === undefined)
|
||||
this.store.changeBackupList[stationName][propName] = oldValue;
|
||||
}
|
||||
|
||||
if (this.store.changeList[stationName][propName] == this.store.changeBackupList[stationName][propName]) {
|
||||
delete this.store.changeList[stationName][propName];
|
||||
delete this.store.changeBackupList[stationName][propName];
|
||||
|
||||
if (Object.keys(this.store.changeList[stationName]).length == 0) delete this.store.changeList[stationName];
|
||||
|
||||
if (Object.keys(this.store.changeBackupList[stationName]).length == 0)
|
||||
delete this.store.changeBackupList[stationName];
|
||||
}
|
||||
|
||||
this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,46 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../store';
|
||||
import axios from 'axios';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
API_URL: import.meta.env.PROD ? 'https://stacjownik.eu-4.evennode.com' : import.meta.env.VITE_API_URL,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadData() {
|
||||
try {
|
||||
this.store.dataState = 'LOADING';
|
||||
|
||||
const data = (
|
||||
await axios.get(`${this.API_URL}/api/getSceneries?time=${Date.now()}`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${this.store.token}`,
|
||||
},
|
||||
})
|
||||
).data;
|
||||
|
||||
this.store.backupList = JSON.stringify(data);
|
||||
this.store.stationList = data;
|
||||
this.store.unsavedChanges = false;
|
||||
this.store.changeList = [];
|
||||
this.store.changeBackupList = [];
|
||||
|
||||
this.store.dataState = 'LOADED';
|
||||
} catch (error) {
|
||||
this.store.dataState = 'ERROR';
|
||||
this.store.token = '';
|
||||
this.store.isAuthorized = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'ManagerView',
|
||||
component: () => import('./views/ManagerView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'LoginView',
|
||||
component: () => import('./views/LoginView.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = window.localStorage.getItem('auth-token');
|
||||
|
||||
if (!token && to.path != '/login') return next({ path: '/login' });
|
||||
|
||||
if (token && to.path == '/login') return next({ path: '/' });
|
||||
// else if (to.path == '/login') return next({ path: '/' });
|
||||
|
||||
return next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { IStore } from './types/types';
|
||||
|
||||
export const useStore = defineStore('store', {
|
||||
state: () =>
|
||||
({
|
||||
dataState: 'LOADING',
|
||||
unsavedChanges: false,
|
||||
stationList: [],
|
||||
backupList: '',
|
||||
stationsToRemove: [],
|
||||
searchedSceneryName: '',
|
||||
changeList: {},
|
||||
changeBackupList: {},
|
||||
newStationsCount: 0,
|
||||
routesModalVisible: true,
|
||||
currentStation: null,
|
||||
selectedStationName: '',
|
||||
token: null,
|
||||
user: null,
|
||||
isAuthorized: false,
|
||||
notifyDiscord: true,
|
||||
alertMessage: '',
|
||||
confirmMessage: '',
|
||||
} as IStore),
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
|
||||
|
||||
export interface SceneryRowItem {
|
||||
name: string;
|
||||
url: string;
|
||||
lines: string;
|
||||
project: string | null;
|
||||
reqLevel: number;
|
||||
signalType: string;
|
||||
controlType: string;
|
||||
SUP: boolean;
|
||||
routes: string;
|
||||
checkpoints: string;
|
||||
authors: string;
|
||||
availability: Availability;
|
||||
}
|
||||
|
||||
export interface IStore {
|
||||
dataState: string;
|
||||
unsavedChanges: boolean;
|
||||
stationList: SceneryRowItem[];
|
||||
backupList: string;
|
||||
stationsToRemove: string[];
|
||||
searchedSceneryName: string;
|
||||
changeList: { [key: string]: any };
|
||||
changeBackupList: { [key: string]: any };
|
||||
newStationsCount: number;
|
||||
routesModalVisible: boolean;
|
||||
currentStation: SceneryRowItem | null;
|
||||
selectedStationName: string;
|
||||
token: string | null;
|
||||
user: { name: string; id: string } | null;
|
||||
isAuthorized: boolean;
|
||||
notifyDiscord: boolean;
|
||||
alertMessage: string;
|
||||
confirmMessage: string;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="login-header">
|
||||
<img src="/icon-logo.svg" alt="logo" />
|
||||
<h1>Stacjownik Station Manager</h1>
|
||||
</div>
|
||||
|
||||
<form @submit="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>Zaloguj</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import axios from 'axios';
|
||||
import { defineComponent } from 'vue';
|
||||
import dataMixin from '../mixins/dataMixin';
|
||||
import { useStore } from '../store';
|
||||
|
||||
interface LoginResponse {
|
||||
token: string;
|
||||
user: {
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [dataMixin],
|
||||
|
||||
setup() {
|
||||
return {
|
||||
name: '',
|
||||
password: '',
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
async signIn(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
console.log(import.meta.env.VITE_API_URL);
|
||||
|
||||
try {
|
||||
const data: LoginResponse = (
|
||||
await axios.post(
|
||||
`${this.API_URL}/auth/login`,
|
||||
{ username: this.name, password: this.password },
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
)
|
||||
).data;
|
||||
|
||||
this.store.isAuthorized = true;
|
||||
this.store.token = data.token;
|
||||
this.store.user = data.user;
|
||||
|
||||
window.localStorage.setItem('auth-token', this.store.token);
|
||||
window.localStorage.setItem('user', JSON.stringify(this.store.user));
|
||||
|
||||
this.loadData();
|
||||
this.$router.push('/');
|
||||
} catch (e: any) {
|
||||
const response = e.response;
|
||||
const status: number = response.status;
|
||||
|
||||
if (status == 401) {
|
||||
this.store.alertMessage = 'Nieprawidłowe dane!';
|
||||
return;
|
||||
}
|
||||
|
||||
this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
|
||||
return;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
||||
&-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 8em;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.2rem;
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.25em 0.3em;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="manager">
|
||||
<RoutesModal v-if="store.currentStation" />
|
||||
|
||||
<hr color="white" />
|
||||
<TableActions />
|
||||
<hr color="white" />
|
||||
|
||||
<div class="table_container">
|
||||
<table>
|
||||
<thead>
|
||||
<th v-for="header in headerNameList">{{ header }}</th>
|
||||
<th>Dostępność</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(station, row) in 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 === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
|
||||
<span v-else-if="propName === 'routes'" v-html="getRouteNames(station)"></span>
|
||||
<span v-else-if="typeof (station as any)[propName] === 'boolean' && propName !== 'supportersOnly'">
|
||||
{{ (station as any)[propName] ? '✅' : '❌' }}
|
||||
</span>
|
||||
<span v-else>{{ (station as any)[propName] }}</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<select
|
||||
name="availability"
|
||||
:id="`select-${row}`"
|
||||
v-model="sortedStationList[row]['availability']"
|
||||
@input="(e) => changeAvailability(station.name, sortedStationList[row]['availability'], e)"
|
||||
>
|
||||
<option value="default">dostępna (w paczce)</option>
|
||||
<option value="nonDefault">dostępna (poza paczką)</option>
|
||||
<option value="unavailable">niedostępna</option>
|
||||
<option value="nonPublic">niepubliczna</option>
|
||||
<option value="abandoned">wycofana</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import changeMixin from '../mixins/changeMixin';
|
||||
import dataMixin from '../mixins/dataMixin';
|
||||
import { useStore } from '../store';
|
||||
import { SceneryRowItem, Availability } from '../types/types';
|
||||
import RoutesModal from '../components/RoutesModal.vue';
|
||||
import TableActions from '../components/TableActions.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { RoutesModal, TableActions },
|
||||
mixins: [dataMixin, changeMixin],
|
||||
|
||||
data: () => ({
|
||||
headerNameList: {
|
||||
name: 'Nazwa',
|
||||
url: 'URL',
|
||||
lines: 'Linie',
|
||||
project: 'Projekt',
|
||||
reqLevel: 'Wym. poziom',
|
||||
signalType: 'Sygnalizacja',
|
||||
controlType: 'Sterowanie',
|
||||
SUP: 'SUP',
|
||||
authors: 'Autorzy',
|
||||
routes: 'Szlaki',
|
||||
checkpoints: 'Posterunki',
|
||||
} as {
|
||||
[key: string]: string;
|
||||
},
|
||||
}),
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
return {
|
||||
store,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
computed: {
|
||||
sortedStationList() {
|
||||
const sortedList = this.store.stationList.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
if (!this.store.searchedSceneryName || this.store.searchedSceneryName == '') return sortedList;
|
||||
|
||||
return sortedList.filter((station) =>
|
||||
station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase())
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
addNewStation() {
|
||||
this.store.newStationsCount++;
|
||||
const newSt: SceneryRowItem = {
|
||||
name: `${this.store.newStationsCount}_Sceneria`,
|
||||
url: '',
|
||||
lines: '',
|
||||
project: null,
|
||||
reqLevel: 0,
|
||||
signalType: '',
|
||||
controlType: '',
|
||||
SUP: false,
|
||||
routes: '',
|
||||
checkpoints: '',
|
||||
authors: '',
|
||||
availability: 'default',
|
||||
};
|
||||
this.store.stationList.unshift(newSt);
|
||||
},
|
||||
|
||||
getRouteNames(station: SceneryRowItem) {
|
||||
if (!station.routes) return '';
|
||||
return station.routes
|
||||
.split(';')
|
||||
.map((route) => {
|
||||
// !Oc_2EPB
|
||||
const props1 = route.split('_')[0];
|
||||
const props2 = route.split('_')[1];
|
||||
const isInternal = props1.startsWith('!');
|
||||
const name = isInternal ? props1.replace('!', '') : props1;
|
||||
return `${isInternal ? '<u>' + name + '</u>' : name} <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${
|
||||
props2[2]
|
||||
}${props2[3] ? '/B' : ''})</span>`;
|
||||
})
|
||||
.join(', ');
|
||||
},
|
||||
|
||||
changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
|
||||
this.store.selectedStationName = station.name;
|
||||
if (propertyName == 'name') return;
|
||||
if (propertyName == 'checkpoints') {
|
||||
this.changeCheckpoints(row);
|
||||
return;
|
||||
}
|
||||
if (propertyName == 'routes') {
|
||||
this.showRoutesModal(station);
|
||||
return;
|
||||
}
|
||||
const stationListRow = this.store.stationList.findIndex(
|
||||
(station) => station.name == this.sortedStationList[row].name
|
||||
);
|
||||
if (stationListRow == -1) return;
|
||||
const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
|
||||
if (typeof oldValue === 'boolean') {
|
||||
(this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
|
||||
// this.$set(this.stationList[stationListRow], propertyName, !oldValue);
|
||||
this.addChange(station.name, propertyName, oldValue, !oldValue);
|
||||
return;
|
||||
}
|
||||
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.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
|
||||
this.addChange(
|
||||
station.name,
|
||||
propertyName,
|
||||
oldValue,
|
||||
typeof oldValue === 'number' ? parseInt(newValue) : newValue
|
||||
);
|
||||
},
|
||||
|
||||
changeCheckpoints(row: number) {
|
||||
const stationListRow = this.store.stationList.findIndex(
|
||||
(station) => station.name == this.sortedStationList[row].name
|
||||
);
|
||||
if (stationListRow == -1) return;
|
||||
const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
|
||||
const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
|
||||
if (newCheckpoints === null) return;
|
||||
this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
|
||||
this.addChange(this.sortedStationList[row].name, 'checkpoints', oldCheckpoints, newCheckpoints);
|
||||
},
|
||||
|
||||
changeAvailability(stationName: string, availability: Availability, e: Event) {
|
||||
const selectedAvailability: Availability = (e.target as HTMLSelectElement).value as Availability;
|
||||
this.addChange(stationName, 'availability', availability, selectedAvailability);
|
||||
},
|
||||
|
||||
showRoutesModal(station: SceneryRowItem) {
|
||||
this.store.currentStation = station;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.table_container {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
table {
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
border-collapse: collapse;
|
||||
|
||||
width: 100%;
|
||||
max-width: 2000px;
|
||||
min-width: 1450px;
|
||||
}
|
||||
|
||||
table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: 0.4rem 0.45rem;
|
||||
background-color: #151b24;
|
||||
color: white;
|
||||
|
||||
top: 0;
|
||||
}
|
||||
|
||||
table tr {
|
||||
background-color: #2c394b;
|
||||
transition: background-color 100ms;
|
||||
}
|
||||
|
||||
table tr.current {
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: #334756;
|
||||
}
|
||||
|
||||
table tr:hover {
|
||||
background-color: #1a293b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding: 0.3rem 0.5rem;
|
||||
border: 1px solid #2c2c2c;
|
||||
overflow: auto;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
Reference in New Issue
Block a user