mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 13:38:13 +00:00
update: auth & update modal
This commit is contained in:
+49
-8
@@ -5,16 +5,34 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { computed, defineComponent, watch } from 'vue';
|
||||||
import dataMixin from './mixins/dataMixin';
|
import dataMixin from './mixins/dataMixin';
|
||||||
import { useStore } from './store';
|
import { useStore } from './store';
|
||||||
import PopUpCard from './components/PopUpCard.vue';
|
import PopUpCard from './components/PopUpCard.vue';
|
||||||
|
import axios, { AxiosResponse } from 'axios';
|
||||||
|
import { RouterView, useRouter } from 'vue-router';
|
||||||
|
import { ILoginResponse, IUser, AuthState } from './types/types';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
mixins: [dataMixin],
|
mixins: [dataMixin],
|
||||||
components: { PopUpCard },
|
components: { PopUpCard },
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
if (store.authState != AuthState.AUTHORIZED && to.path != '/login') return next({ path: '/login' });
|
||||||
|
|
||||||
|
return next();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
computed(() => store.authState),
|
||||||
|
(state) => {
|
||||||
|
if (router.currentRoute.value.path == '/login' && state == AuthState.AUTHORIZED) router.push('/');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
};
|
};
|
||||||
@@ -22,15 +40,36 @@ export default defineComponent({
|
|||||||
methods: {
|
methods: {
|
||||||
async autoLogin() {
|
async autoLogin() {
|
||||||
const token = window.localStorage.getItem('auth-token');
|
const token = window.localStorage.getItem('auth-token');
|
||||||
if (token) {
|
if (!token) {
|
||||||
this.store.isAuthorized = true;
|
this.store.authState = AuthState.UNAUTHORIZED;
|
||||||
this.store.token = token;
|
return;
|
||||||
this.store.user = JSON.parse(window.localStorage.getItem('user')!);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.store.token = token;
|
||||||
|
|
||||||
|
const data = axios.post<{ user: IUser }>(`${this.API_URL}/auth/token`, { token: this.store.token });
|
||||||
|
|
||||||
|
data
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res.data);
|
||||||
|
|
||||||
|
this.store.user = res.data.user;
|
||||||
|
this.store.authState = AuthState.AUTHORIZED;
|
||||||
|
this.$router.push('/');
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.store.isAuthorized = false;
|
||||||
|
window.localStorage.removeItem('auth-token');
|
||||||
|
|
||||||
|
this.store.authState = AuthState.UNAUTHORIZED;
|
||||||
|
this.$router.push('/login');
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.autoLogin();
|
this.autoLogin();
|
||||||
|
|
||||||
if (window.localStorage.getItem('notifyDiscord') !== null) {
|
if (window.localStorage.getItem('notifyDiscord') !== null) {
|
||||||
this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
|
this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
|
||||||
}
|
}
|
||||||
@@ -97,13 +136,15 @@ button:focus-visible {
|
|||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
max-width: 350px;
|
max-width: 550px;
|
||||||
|
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
|
||||||
background-color: #2e2e2e;
|
border-radius: 1em;
|
||||||
box-shadow: 0 0 6px 1px #131313;
|
|
||||||
|
background-color: #1d1c33;
|
||||||
|
box-shadow: 0 0 6px 1px #414141;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Scrollbar
|
// Scrollbar
|
||||||
|
|||||||
+340
-341
@@ -1,341 +1,340 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="table-actions">
|
<div class="table-actions">
|
||||||
<div class="pane info-pane">
|
<div class="pane info-pane">
|
||||||
<div>
|
<div>
|
||||||
<span v-if="store.user">
|
<span v-if="store.user">
|
||||||
Zalogowany jako <b>{{ store.user.name }}</b>
|
Zalogowany jako <b>{{ store.user.name }}</b>
|
||||||
</span>
|
</span>
|
||||||
•
|
•
|
||||||
<span class="info-file" :class="store.dataState">
|
<span class="info-file" :class="store.dataState">
|
||||||
<span v-if="store.dataState == 'LOADING'">Ładowanie danych...</span>
|
<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 == 'LOADED'">Załadowano dane z bazy!</span>
|
||||||
<span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
|
<span v-if="store.dataState == 'ERROR'">Błąd podczas pobierania danych!</span>
|
||||||
</span>
|
</span>
|
||||||
//
|
//
|
||||||
<span class="file-changes" style="color: salmon" v-if="store.unsavedChanges">Niezapisane zmiany!</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>
|
<span class="file-changes" style="color: #aaa" v-else>Brak niezapisanych zmian</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pane actions-pane">
|
<div class="pane actions-pane">
|
||||||
<button @click="addNewStation">Dodaj nową stację</button>
|
<button @click="addNewStation">Dodaj nową stację</button>
|
||||||
<button @click="confirmLoadData">Odśwież dane</button>
|
<button @click="confirmLoadData">Odśwież dane</button>
|
||||||
|
|
||||||
<button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">
|
<button @click="confirmUpdateList" :data-disabled="!store.unsavedChanges" :disabled="!store.unsavedChanges">
|
||||||
Zapisz zmiany
|
Zapisz zmiany
|
||||||
</button>
|
</button>
|
||||||
<button @click="signOut">Wyloguj się</button>
|
<button @click="signOut">Wyloguj się</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pane notify-pane">
|
<div class="pane notify-pane">
|
||||||
<label id="notify">
|
<label id="notify">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
v-model="store.notifyDiscord"
|
v-model="store.notifyDiscord"
|
||||||
@input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)"
|
@input="onNotifyCheckboxChange(($event.target as HTMLInputElement)!.checked)"
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
|
Powiadom o zmianach: <b>{{ store.notifyDiscord ? 'TAK' : 'NIE' }}</b>
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pane search-pane">
|
<div class="pane search-pane">
|
||||||
<input
|
<input
|
||||||
class="search"
|
class="search"
|
||||||
ref="search"
|
ref="search"
|
||||||
type="text"
|
type="text"
|
||||||
v-model="store.searchedSceneryName"
|
v-model="store.searchedSceneryName"
|
||||||
placeholder="Wpisz nazwę scenerii..."
|
placeholder="Wpisz nazwę scenerii..."
|
||||||
width="350"
|
width="350"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
|
<button style="margin-left: 0.5em" @click="clearInput">Wyczyść</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pane">
|
<div class="pane">
|
||||||
<button @click="changelogVisible = !changelogVisible">
|
<button @click="changelogVisible = !changelogVisible">
|
||||||
{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
|
{{ changelogVisible ? 'Ukryj' : 'Pokaż' }} changelog
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="changelog" v-if="changelogVisible">
|
<div class="changelog" v-if="changelogVisible">
|
||||||
<div style="margin-bottom: 0.25em">Changelog:</div>
|
<div style="margin-bottom: 0.25em">Changelog:</div>
|
||||||
|
|
||||||
<div v-html="changelog || 'brak zmian'"></div>
|
<div v-html="changelog || 'brak zmian'"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import dataMixin from '../mixins/dataMixin';
|
import dataMixin from '../mixins/dataMixin';
|
||||||
import routesMixin from '../mixins/routesMixin';
|
import routesMixin from '../mixins/routesMixin';
|
||||||
import { useStore } from '../store';
|
import { useStore } from '../store';
|
||||||
import { Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
|
import { AuthState, Availability, ChangeProp, HeaderTypes, SceneryRowItem } from '../types/types';
|
||||||
import { getAvailabilityValue } from '../types/typeUitls';
|
import { getAvailabilityValue } from '../types/typeUitls';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
changelogVisible: false,
|
changelogVisible: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [dataMixin, routesMixin],
|
mixins: [dataMixin, routesMixin],
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
changelog() {
|
changelog() {
|
||||||
return this.store.changeList
|
return this.store.changeList
|
||||||
.map((changeItem) => {
|
.map((changeItem) => {
|
||||||
let itemChanges = [];
|
let itemChanges = [];
|
||||||
|
|
||||||
if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
|
if (changeItem.toRemove) return `<b class='text--accent'>${changeItem.name} -></b> do usunięcia`;
|
||||||
|
|
||||||
for (let change in changeItem) {
|
for (let change in changeItem) {
|
||||||
let propChange = change as ChangeProp;
|
let propChange = change as ChangeProp;
|
||||||
|
|
||||||
if (/id|name/.test(propChange)) continue;
|
if (/id|name/.test(propChange)) continue;
|
||||||
|
|
||||||
let value =
|
let value =
|
||||||
typeof changeItem[propChange] === 'boolean'
|
typeof changeItem[propChange] === 'boolean'
|
||||||
? changeItem[propChange]
|
? changeItem[propChange]
|
||||||
? 'TAK'
|
? 'TAK'
|
||||||
: 'NIE'
|
: 'NIE'
|
||||||
: changeItem[propChange];
|
: changeItem[propChange];
|
||||||
|
|
||||||
if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
|
if (propChange == 'availability') value = getAvailabilityValue(changeItem[propChange] as Availability);
|
||||||
if (propChange == 'routes') value = this.getRouteNames(changeItem[propChange] as string);
|
if (propChange == 'routes') value = this.getRouteNames(changeItem[propChange] as string);
|
||||||
|
|
||||||
itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
|
itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
|
return `<b class='text--accent'>${changeItem.name} -></b> ` + itemChanges.join('; ');
|
||||||
})
|
})
|
||||||
.join(' <br /> ');
|
.join(' <br /> ');
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
confirmLoadData() {
|
confirmLoadData() {
|
||||||
const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
|
const confirmed = confirm('Czy na pewno chcesz odświeżyć dane? Wszelkie niezapisane zmiany zostaną utracone!');
|
||||||
|
|
||||||
if (confirmed) this.loadData();
|
if (confirmed) this.loadData();
|
||||||
},
|
},
|
||||||
|
|
||||||
confirmRestoreList() {
|
confirmRestoreList() {
|
||||||
const confirmed = confirm(
|
const confirmed = confirm(
|
||||||
'Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!'
|
'Czy na pewno chcesz zresetować listę do ustawień z pliku? Wszelkie niezapisane zmiany zostaną utracone!'
|
||||||
);
|
);
|
||||||
|
|
||||||
if (confirmed) this.restoreList();
|
if (confirmed) this.restoreList();
|
||||||
},
|
},
|
||||||
|
|
||||||
confirmUpdateList() {
|
confirmUpdateList() {
|
||||||
const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');
|
const confirmed = confirm('Czy na pewno chcesz wprowadzić obecne zmiany?');
|
||||||
|
|
||||||
if (confirmed) this.updateListToDb();
|
if (confirmed) this.updateListToDb();
|
||||||
},
|
},
|
||||||
|
|
||||||
signOut() {
|
signOut() {
|
||||||
this.store.token = null;
|
this.store.token = null;
|
||||||
this.store.isAuthorized = false;
|
this.store.authState = AuthState.UNAUTHORIZED;
|
||||||
|
|
||||||
window.localStorage.removeItem('auth-token');
|
window.localStorage.removeItem('auth-token');
|
||||||
window.localStorage.removeItem('user');
|
window.localStorage.removeItem('user');
|
||||||
|
|
||||||
this.$router.push('/login');
|
this.$router.push('/login');
|
||||||
},
|
},
|
||||||
|
|
||||||
onNotifyCheckboxChange(value: boolean) {
|
onNotifyCheckboxChange(value: boolean) {
|
||||||
window.localStorage.setItem('notifyDiscord', Number(value).toString());
|
window.localStorage.setItem('notifyDiscord', Number(value).toString());
|
||||||
},
|
},
|
||||||
|
|
||||||
async updateListToDb() {
|
async updateListToDb() {
|
||||||
try {
|
try {
|
||||||
const mappedChangeList = this.store.changeList.map((v) => {
|
const mappedChangeList = this.store.changeList.map((v) => {
|
||||||
if (/^#/.test(v.id)) {
|
if (/^#/.test(v.id)) {
|
||||||
return { ...v, id: undefined };
|
return { ...v, id: undefined };
|
||||||
}
|
}
|
||||||
|
|
||||||
return { ...v };
|
return { ...v };
|
||||||
});
|
});
|
||||||
|
|
||||||
const response = await axios.post(
|
const response = await axios.post(
|
||||||
`${this.API_URL}/manager/updateSceneryList`,
|
`${this.API_URL}/manager/updateSceneryList`,
|
||||||
{
|
{
|
||||||
changeList: mappedChangeList,
|
changeList: mappedChangeList,
|
||||||
token: this.store.token,
|
token: this.store.token,
|
||||||
notify: this.store.notifyDiscord,
|
notify: this.store.notifyDiscord,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
Authorization: `Bearer ${this.store.token}`,
|
Authorization: `Bearer ${this.store.token}`,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
this.store.changesResponse = response.data;
|
this.store.changesResponse = response.data;
|
||||||
alert('Pomyślnie wprowadzono zmiany!');
|
|
||||||
|
this.loadData();
|
||||||
this.loadData();
|
} catch (error) {
|
||||||
} catch (error) {
|
this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
|
||||||
this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
|
addNewStation() {
|
||||||
addNewStation() {
|
const name = prompt('Nazwa nowej scenerii');
|
||||||
const name = prompt('Nazwa nowej scenerii');
|
if (!name) return;
|
||||||
if (!name) return;
|
|
||||||
|
if (
|
||||||
if (
|
this.store.stationList.some(
|
||||||
this.store.stationList.some(
|
(station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL')
|
||||||
(station) => station.name.toLocaleLowerCase('pl-PL') == name.toLocaleLowerCase('pl-PL')
|
)
|
||||||
)
|
) {
|
||||||
) {
|
this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
|
||||||
this.store.alertMessage = 'Sceneria o takiej nazwie już istnieje!';
|
return;
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
this.store.newStationsCount++;
|
||||||
this.store.newStationsCount++;
|
|
||||||
|
const newSt: SceneryRowItem = {
|
||||||
const newSt: SceneryRowItem = {
|
name,
|
||||||
name,
|
url: '',
|
||||||
url: '',
|
lines: '',
|
||||||
lines: '',
|
project: null,
|
||||||
project: null,
|
reqLevel: -1,
|
||||||
reqLevel: -1,
|
signalType: 'współczesna',
|
||||||
signalType: 'współczesna',
|
controlType: 'SCS',
|
||||||
controlType: 'SCS',
|
SUP: false,
|
||||||
SUP: false,
|
routes: 'Test_1EPB"',
|
||||||
routes: 'Test_1EPB"',
|
checkpoints: '',
|
||||||
checkpoints: '',
|
authors: '',
|
||||||
authors: '',
|
availability: 'default',
|
||||||
availability: 'default',
|
id: `#${Math.random().toString(32).substring(2)}`,
|
||||||
id: `#${Math.random().toString(32).substring(2)}`,
|
};
|
||||||
};
|
|
||||||
|
this.store.changeList.push({ ...newSt });
|
||||||
this.store.changeList.push({ ...newSt });
|
// this.store.changeBackupList[newSt.id] = null;
|
||||||
// this.store.changeBackupList[newSt.id] = null;
|
this.store.searchedSceneryName = name;
|
||||||
this.store.searchedSceneryName = name;
|
|
||||||
|
this.store.unsavedChanges = true;
|
||||||
this.store.unsavedChanges = true;
|
|
||||||
|
this.store.stationList.unshift(newSt);
|
||||||
this.store.stationList.unshift(newSt);
|
},
|
||||||
},
|
|
||||||
|
restoreList() {
|
||||||
restoreList() {
|
if (this.store.backupList.length == 0) return;
|
||||||
if (this.store.backupList.length == 0) return;
|
|
||||||
|
this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
|
||||||
this.store.stationList = JSON.parse(JSON.stringify(this.store.backupList));
|
this.store.changeList = [];
|
||||||
this.store.changeList = [];
|
this.store.stationsToRemove = [];
|
||||||
this.store.stationsToRemove = [];
|
this.store.unsavedChanges = false;
|
||||||
this.store.unsavedChanges = false;
|
this.store.searchedSceneryName = '';
|
||||||
this.store.searchedSceneryName = '';
|
},
|
||||||
},
|
|
||||||
|
clearInput() {
|
||||||
clearInput() {
|
this.store.searchedSceneryName = '';
|
||||||
this.store.searchedSceneryName = '';
|
},
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
});
|
</script>
|
||||||
</script>
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
<style lang="scss" scoped>
|
button {
|
||||||
button {
|
&[data-disabled='true'] {
|
||||||
&[data-disabled='true'] {
|
user-select: none;
|
||||||
user-select: none;
|
-moz-user-select: none;
|
||||||
-moz-user-select: none;
|
-webkit-user-select: none;
|
||||||
-webkit-user-select: none;
|
|
||||||
|
color: #999;
|
||||||
color: #999;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.info-file {
|
||||||
.info-file {
|
color: greenyellow;
|
||||||
color: greenyellow;
|
}
|
||||||
}
|
|
||||||
|
.info-file.LOADING {
|
||||||
.info-file.LOADING {
|
color: #aaa;
|
||||||
color: #aaa;
|
}
|
||||||
}
|
|
||||||
|
.info-file.ERROR {
|
||||||
.info-file.ERROR {
|
color: salmon;
|
||||||
color: salmon;
|
}
|
||||||
}
|
|
||||||
|
#notify-checkbox:checked + label {
|
||||||
#notify-checkbox:checked + label {
|
color: gold;
|
||||||
color: gold;
|
}
|
||||||
}
|
|
||||||
|
.search {
|
||||||
.search {
|
color: black;
|
||||||
color: black;
|
|
||||||
|
border: 1px solid white;
|
||||||
border: 1px solid white;
|
outline: none;
|
||||||
outline: none;
|
appearance: none;
|
||||||
appearance: none;
|
|
||||||
|
padding: 0.35em 0.4em;
|
||||||
padding: 0.35em 0.4em;
|
}
|
||||||
}
|
|
||||||
|
.pane {
|
||||||
.pane {
|
display: flex;
|
||||||
display: flex;
|
flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
.actions-pane {
|
||||||
.actions-pane {
|
margin-top: 1em;
|
||||||
margin-top: 1em;
|
|
||||||
|
button {
|
||||||
button {
|
margin: 0.5em 0.5em 0 0;
|
||||||
margin: 0.5em 0.5em 0 0;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.notify-pane {
|
||||||
.notify-pane {
|
margin: 1em 0;
|
||||||
margin: 1em 0;
|
}
|
||||||
}
|
|
||||||
|
.search-pane {
|
||||||
.search-pane {
|
margin-top: 0.5em;
|
||||||
margin-top: 0.5em;
|
}
|
||||||
}
|
|
||||||
|
label#notify {
|
||||||
label#notify {
|
cursor: pointer;
|
||||||
cursor: pointer;
|
text-align: center;
|
||||||
text-align: center;
|
|
||||||
|
color: #000;
|
||||||
color: #000;
|
|
||||||
|
span {
|
||||||
span {
|
padding: 0.3em 0.25em;
|
||||||
padding: 0.3em 0.25em;
|
background-color: salmon;
|
||||||
background-color: salmon;
|
}
|
||||||
}
|
|
||||||
|
input {
|
||||||
input {
|
display: none;
|
||||||
display: none;
|
|
||||||
|
&:checked + span {
|
||||||
&:checked + span {
|
background-color: lightblue;
|
||||||
background-color: lightblue;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.changelog {
|
||||||
.changelog {
|
height: 200px;
|
||||||
height: 200px;
|
overflow: auto;
|
||||||
overflow: auto;
|
}
|
||||||
}
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
@media screen and (max-width: 550px) {
|
.pane {
|
||||||
.pane {
|
justify-content: center;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
text-align: center;
|
}
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -0,0 +1,67 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bg-dimmer" @click="closeCard"></div>
|
||||||
|
<div class="g-card popup-card">
|
||||||
|
<div class="card_content">
|
||||||
|
<h1>Raport zmian</h1>
|
||||||
|
|
||||||
|
<p v-for="(ch, i) in changesResponseComp" :key="i" :style="{ color: ch.resolved ? 'lime' : 'crimson' }">
|
||||||
|
{{ ch.resolved ? `✅` : `❌` }} {{ ch.message }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card_actions">
|
||||||
|
<button @click="closeCard">OK!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../store';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
store: useStore(),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
changesResponseComp() {
|
||||||
|
return this.store.changesResponse.map((ch) => ({
|
||||||
|
resolved: ch.split(' ')[0] == 'v',
|
||||||
|
message: ch.replace(/^[v|x] /, ''),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
closeCard() {
|
||||||
|
this.store.changesResponse.length = 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bg-dimmer {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 998;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background-color: #0000004f;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
+22
-32
@@ -1,32 +1,22 @@
|
|||||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
|
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'ManagerView',
|
name: 'ManagerView',
|
||||||
component: () => import('./views/ManagerView.vue'),
|
component: () => import('./views/ManagerView.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'LoginView',
|
name: 'LoginView',
|
||||||
component: () => import('./views/LoginView.vue'),
|
component: () => import('./views/LoginView.vue'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
routes,
|
routes,
|
||||||
});
|
});
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
const token = window.localStorage.getItem('auth-token');
|
export default router;
|
||||||
|
|
||||||
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;
|
|
||||||
|
|||||||
+31
-28
@@ -1,28 +1,31 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
|
import { AuthState, Availability, ChangeProp, HeaderTypes, IStore } from './types/types';
|
||||||
import { getAvailabilityValue } from './types/typeUitls';
|
import { getAvailabilityValue } from './types/typeUitls';
|
||||||
|
|
||||||
export const useStore = defineStore('store', {
|
export const useStore = defineStore('store', {
|
||||||
state: () =>
|
state: () =>
|
||||||
({
|
({
|
||||||
dataState: 'LOADING',
|
dataState: 'LOADING',
|
||||||
unsavedChanges: false,
|
authState: AuthState.LOADING,
|
||||||
stationList: [],
|
|
||||||
backupList: [],
|
unsavedChanges: false,
|
||||||
stationsToRemove: [],
|
stationList: [],
|
||||||
searchedSceneryName: '',
|
backupList: [],
|
||||||
changeList: [],
|
stationsToRemove: [],
|
||||||
newStationsCount: 0,
|
searchedSceneryName: '',
|
||||||
routesModalVisible: true,
|
changeList: [],
|
||||||
currentStation: null,
|
newStationsCount: 0,
|
||||||
selectedStationName: '',
|
routesModalVisible: true,
|
||||||
token: null,
|
currentStation: null,
|
||||||
user: null,
|
selectedStationName: '',
|
||||||
isAuthorized: false,
|
token: null,
|
||||||
notifyDiscord: true,
|
user: null,
|
||||||
alertMessage: '',
|
isAuthorized: false,
|
||||||
confirmMessage: '',
|
notifyDiscord: true,
|
||||||
|
|
||||||
changesResponse: [],
|
alertMessage: '',
|
||||||
} as IStore),
|
confirmMessage: '',
|
||||||
});
|
|
||||||
|
changesResponse: [],
|
||||||
|
} as IStore),
|
||||||
|
});
|
||||||
|
|||||||
+103
-85
@@ -1,85 +1,103 @@
|
|||||||
export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
|
export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
|
||||||
export type ChangeProp =
|
export type ChangeProp =
|
||||||
| 'name'
|
| 'name'
|
||||||
| 'url'
|
| 'url'
|
||||||
| 'lines'
|
| 'lines'
|
||||||
| 'project'
|
| 'project'
|
||||||
| 'reqLevel'
|
| 'reqLevel'
|
||||||
| 'signalType'
|
| 'signalType'
|
||||||
| 'controlType'
|
| 'controlType'
|
||||||
| 'SUP'
|
| 'SUP'
|
||||||
| 'routes'
|
| 'routes'
|
||||||
| 'checkpoints'
|
| 'checkpoints'
|
||||||
| 'authors'
|
| 'authors'
|
||||||
| 'availability';
|
| 'availability';
|
||||||
|
|
||||||
export enum HeaderTypes {
|
export enum HeaderTypes {
|
||||||
name = 'Nazwa',
|
name = 'Nazwa',
|
||||||
url = 'URL',
|
url = 'URL',
|
||||||
lines = 'Linie',
|
lines = 'Linie',
|
||||||
project = 'Projekt',
|
project = 'Projekt',
|
||||||
reqLevel = 'Wym. poziom',
|
reqLevel = 'Wym. poziom',
|
||||||
signalType = 'Sygnalizacja',
|
signalType = 'Sygnalizacja',
|
||||||
controlType = 'Sterowanie',
|
controlType = 'Sterowanie',
|
||||||
SUP = 'SUP',
|
SUP = 'SUP',
|
||||||
authors = 'Autorzy',
|
authors = 'Autorzy',
|
||||||
routes = 'Szlaki',
|
routes = 'Szlaki',
|
||||||
checkpoints = 'Posterunki',
|
checkpoints = 'Posterunki',
|
||||||
availability = 'Dostępność',
|
availability = 'Dostępność',
|
||||||
toRemove = 'Usuń',
|
toRemove = 'Usuń',
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum AvailabilityTypes {
|
export enum AvailabilityTypes {
|
||||||
'default' = 'w paczce',
|
'default' = 'w paczce',
|
||||||
'nonDefault' = 'poza paczką',
|
'nonDefault' = 'poza paczką',
|
||||||
'nonPublic' = 'niepubliczna',
|
'nonPublic' = 'niepubliczna',
|
||||||
'abandoned' = 'wycofana',
|
'abandoned' = 'wycofana',
|
||||||
'unavailable' = 'niedostępna',
|
'unavailable' = 'niedostępna',
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SceneryRowItem {
|
export interface SceneryRowItem {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
url: string;
|
url: string;
|
||||||
lines: string;
|
lines: string;
|
||||||
project: string | null;
|
project: string | null;
|
||||||
reqLevel: number;
|
reqLevel: number;
|
||||||
signalType: string;
|
signalType: string;
|
||||||
controlType: string;
|
controlType: string;
|
||||||
SUP: boolean;
|
SUP: boolean;
|
||||||
routes: string;
|
routes: string;
|
||||||
checkpoints: string;
|
checkpoints: string;
|
||||||
authors: string;
|
authors: string;
|
||||||
availability: Availability;
|
availability: Availability;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ChangeItem = {
|
export type ChangeItem = {
|
||||||
[key in ChangeProp]?: string | number | boolean | null;
|
[key in ChangeProp]?: string | number | boolean | null;
|
||||||
} & {
|
} & {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
|
|
||||||
toRemove?: boolean;
|
toRemove?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface IStore {
|
export enum AuthState {
|
||||||
dataState: string;
|
'LOADING' = 0,
|
||||||
unsavedChanges: boolean;
|
'AUTHORIZED' = 1,
|
||||||
stationList: SceneryRowItem[];
|
'UNAUTHORIZED' = 2,
|
||||||
backupList: SceneryRowItem[];
|
}
|
||||||
stationsToRemove: string[];
|
|
||||||
searchedSceneryName: string;
|
export interface IStore {
|
||||||
changeList: ChangeItem[];
|
dataState: string;
|
||||||
newStationsCount: number;
|
authState: AuthState;
|
||||||
routesModalVisible: boolean;
|
|
||||||
currentStation: SceneryRowItem | null;
|
unsavedChanges: boolean;
|
||||||
selectedStationName: string;
|
stationList: SceneryRowItem[];
|
||||||
token: string | null;
|
backupList: SceneryRowItem[];
|
||||||
user: { name: string; id: string } | null;
|
stationsToRemove: string[];
|
||||||
isAuthorized: boolean;
|
searchedSceneryName: string;
|
||||||
notifyDiscord: boolean;
|
changeList: ChangeItem[];
|
||||||
alertMessage: string;
|
newStationsCount: number;
|
||||||
confirmMessage: string;
|
routesModalVisible: boolean;
|
||||||
|
currentStation: SceneryRowItem | null;
|
||||||
changesResponse: string[];
|
selectedStationName: string;
|
||||||
}
|
token: string | null;
|
||||||
|
user: { name: string; id: string } | null;
|
||||||
|
isAuthorized: boolean;
|
||||||
|
notifyDiscord: boolean;
|
||||||
|
alertMessage: string;
|
||||||
|
confirmMessage: string;
|
||||||
|
|
||||||
|
changesResponse: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ILoginResponse {
|
||||||
|
token: string;
|
||||||
|
user: IUser;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IUser {
|
||||||
|
name: string;
|
||||||
|
id: string;
|
||||||
|
}
|
||||||
|
|||||||
+18
-12
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<div class="login" v-if="store.authState == AuthState.UNAUTHORIZED">
|
||||||
<div class="login-header">
|
<div class="login-header">
|
||||||
<img src="/icon-logo.svg" alt="logo" />
|
<img src="/icon-logo.svg" alt="logo" />
|
||||||
<h1>Stacjownik Station Manager</h1>
|
<h1>Stacjownik Station Manager</h1>
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
<br />
|
<br />
|
||||||
<input type="password" id="password" v-model="password" />
|
<input type="password" id="password" v-model="password" />
|
||||||
<br />
|
<br />
|
||||||
<button>Zaloguj</button>
|
<button>{{ loginState == LoginState.LOADING ? 'Logowanie...' : 'Zaloguj się' }}</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -24,13 +24,12 @@ import axios from 'axios';
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import dataMixin from '../mixins/dataMixin';
|
import dataMixin from '../mixins/dataMixin';
|
||||||
import { useStore } from '../store';
|
import { useStore } from '../store';
|
||||||
|
import { AuthState, ILoginResponse } from '../types/types';
|
||||||
|
|
||||||
interface LoginResponse {
|
enum LoginState {
|
||||||
token: string;
|
INITIALIZED = 0,
|
||||||
user: {
|
LOADING = 1,
|
||||||
name: string;
|
LOADED = 2,
|
||||||
id: string;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@@ -40,18 +39,20 @@ export default defineComponent({
|
|||||||
return {
|
return {
|
||||||
name: '',
|
name: '',
|
||||||
password: '',
|
password: '',
|
||||||
|
loginState: LoginState.INITIALIZED,
|
||||||
|
LoginState,
|
||||||
store: useStore(),
|
store: useStore(),
|
||||||
|
AuthState,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
async signIn(e: Event) {
|
async signIn(e: Event) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
this.loginState = LoginState.LOADING;
|
||||||
console.log(import.meta.env.VITE_API_URL);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data: LoginResponse = (
|
const data: ILoginResponse = (
|
||||||
await axios.post(
|
await axios.post(
|
||||||
`${this.API_URL}/auth/login`,
|
`${this.API_URL}/auth/login`,
|
||||||
{ username: this.name, password: this.password },
|
{ username: this.name, password: this.password },
|
||||||
@@ -63,7 +64,9 @@ export default defineComponent({
|
|||||||
)
|
)
|
||||||
).data;
|
).data;
|
||||||
|
|
||||||
this.store.isAuthorized = true;
|
this.store.authState = AuthState.AUTHORIZED;
|
||||||
|
this.loginState = LoginState.LOADED;
|
||||||
|
|
||||||
this.store.token = data.token;
|
this.store.token = data.token;
|
||||||
this.store.user = data.user;
|
this.store.user = data.user;
|
||||||
|
|
||||||
@@ -73,6 +76,9 @@ export default defineComponent({
|
|||||||
this.loadData();
|
this.loadData();
|
||||||
this.$router.push('/');
|
this.$router.push('/');
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
|
this.store.authState = AuthState.UNAUTHORIZED;
|
||||||
|
this.loginState = LoginState.LOADED;
|
||||||
|
|
||||||
if (!e.response || e.response.status === undefined) {
|
if (!e.response || e.response.status === undefined) {
|
||||||
this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
|
this.store.alertMessage = 'Wystąpił błąd podczas łączenia z serwerem!';
|
||||||
return;
|
return;
|
||||||
|
|||||||
+250
-247
@@ -1,247 +1,250 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="manager">
|
<div class="manager" v-if="store.authState == AuthState.AUTHORIZED">
|
||||||
<RoutesModal v-if="store.currentStation" />
|
<RoutesModal v-if="store.currentStation" />
|
||||||
|
<UpdateCard v-if="store.changesResponse.length > 0" />
|
||||||
<hr color="white" />
|
|
||||||
<TableActions />
|
<hr color="white" />
|
||||||
<hr color="white" />
|
<TableActions />
|
||||||
|
<hr color="white" />
|
||||||
<div class="table_container">
|
|
||||||
<table>
|
<div class="table_container">
|
||||||
<thead>
|
<table>
|
||||||
<th v-for="header in headerNameList">{{ header }}</th>
|
<thead>
|
||||||
<th>Dostępność</th>
|
<th v-for="header in headerNameList">{{ header }}</th>
|
||||||
<th>Usuń</th>
|
<th>Dostępność</th>
|
||||||
</thead>
|
<th>Usuń</th>
|
||||||
|
</thead>
|
||||||
<tbody>
|
|
||||||
<tr v-for="(station, row) in sortedStationList" tabindex="0">
|
<tbody>
|
||||||
<td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)">
|
<tr v-for="(station, row) in sortedStationList" tabindex="0">
|
||||||
<span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
|
<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 === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
|
||||||
<span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routes)"></span>
|
|
||||||
|
<span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routes)"></span>
|
||||||
<span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>
|
|
||||||
|
<span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>
|
||||||
<span v-else-if="typeof (station as any)[propName] === 'boolean'">
|
|
||||||
{{ (station as any)[propName] ? '✅' : '❌' }}
|
<span v-else-if="typeof (station as any)[propName] === 'boolean'">
|
||||||
</span>
|
{{ (station as any)[propName] ? '✅' : '❌' }}
|
||||||
<span v-else>{{ (station as any)[propName] }}</span>
|
</span>
|
||||||
</td>
|
<span v-else>{{ (station as any)[propName] }}</span>
|
||||||
|
</td>
|
||||||
<td>
|
|
||||||
<select
|
<td>
|
||||||
name="availability"
|
<select
|
||||||
:id="`select-${row}`"
|
name="availability"
|
||||||
v-model="sortedStationList[row]['availability']"
|
:id="`select-${row}`"
|
||||||
@input="(e) => changeAvailability(station, sortedStationList[row]['availability'], e)"
|
v-model="sortedStationList[row]['availability']"
|
||||||
>
|
@input="(e) => changeAvailability(station, sortedStationList[row]['availability'], e)"
|
||||||
<option value="default">dostępna (w paczce)</option>
|
>
|
||||||
<option value="nonDefault">dostępna (poza paczką)</option>
|
<option value="default">dostępna (w paczce)</option>
|
||||||
<option value="unavailable">niedostępna</option>
|
<option value="nonDefault">dostępna (poza paczką)</option>
|
||||||
<option value="nonPublic">niepubliczna</option>
|
<option value="unavailable">niedostępna</option>
|
||||||
<option value="abandoned">wycofana</option>
|
<option value="nonPublic">niepubliczna</option>
|
||||||
</select>
|
<option value="abandoned">wycofana</option>
|
||||||
</td>
|
</select>
|
||||||
|
</td>
|
||||||
<td @click="removeStation(station)"><img src="/icon-trash.svg" alt="remove" /></td>
|
|
||||||
</tr>
|
<td @click="removeStation(station)"><img src="/icon-trash.svg" alt="remove" /></td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</template>
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue';
|
<script lang="ts">
|
||||||
import changeMixin from '../mixins/changeMixin';
|
import { defineComponent } from 'vue';
|
||||||
import dataMixin from '../mixins/dataMixin';
|
import changeMixin from '../mixins/changeMixin';
|
||||||
import { useStore } from '../store';
|
import dataMixin from '../mixins/dataMixin';
|
||||||
import { SceneryRowItem, Availability } from '../types/types';
|
import { useStore } from '../store';
|
||||||
import RoutesModal from '../components/RoutesModal.vue';
|
import { SceneryRowItem, Availability, AuthState } from '../types/types';
|
||||||
import TableActions from '../components/TableActions.vue';
|
import RoutesModal from '../components/RoutesModal.vue';
|
||||||
import routesMixin from '../mixins/routesMixin';
|
import TableActions from '../components/TableActions.vue';
|
||||||
|
import routesMixin from '../mixins/routesMixin';
|
||||||
export default defineComponent({
|
import UpdateCard from '../components/UpdateCard.vue';
|
||||||
components: { RoutesModal, TableActions },
|
|
||||||
mixins: [dataMixin, changeMixin, routesMixin],
|
export default defineComponent({
|
||||||
|
components: { RoutesModal, TableActions, UpdateCard },
|
||||||
data: () => ({
|
mixins: [dataMixin, changeMixin, routesMixin],
|
||||||
headerNameList: {
|
|
||||||
name: 'Nazwa',
|
data: () => ({
|
||||||
url: 'URL',
|
AuthState,
|
||||||
lines: 'Linie',
|
headerNameList: {
|
||||||
project: 'Projekt',
|
name: 'Nazwa',
|
||||||
reqLevel: 'Wym. poziom',
|
url: 'URL',
|
||||||
signalType: 'Sygnalizacja',
|
lines: 'Linie',
|
||||||
controlType: 'Sterowanie',
|
project: 'Projekt',
|
||||||
SUP: 'SUP',
|
reqLevel: 'Wym. poziom',
|
||||||
authors: 'Autorzy',
|
signalType: 'Sygnalizacja',
|
||||||
routes: 'Szlaki',
|
controlType: 'Sterowanie',
|
||||||
checkpoints: 'Posterunki',
|
SUP: 'SUP',
|
||||||
} as {
|
authors: 'Autorzy',
|
||||||
[key: string]: string;
|
routes: 'Szlaki',
|
||||||
},
|
checkpoints: 'Posterunki',
|
||||||
}),
|
} as {
|
||||||
|
[key: string]: string;
|
||||||
setup() {
|
},
|
||||||
const store = useStore();
|
}),
|
||||||
return {
|
|
||||||
store,
|
setup() {
|
||||||
};
|
const store = useStore();
|
||||||
},
|
return {
|
||||||
|
store,
|
||||||
mounted() {
|
};
|
||||||
this.loadData();
|
},
|
||||||
},
|
|
||||||
|
mounted() {
|
||||||
computed: {
|
this.loadData();
|
||||||
sortedStationList() {
|
},
|
||||||
const sortedList = this.store.stationList.sort((a, b) => (a.name > b.name ? 1 : -1));
|
|
||||||
if (!this.store.searchedSceneryName || this.store.searchedSceneryName == '') return sortedList;
|
computed: {
|
||||||
|
sortedStationList() {
|
||||||
return sortedList.filter((station) =>
|
const sortedList = this.store.stationList.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||||
station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase())
|
if (!this.store.searchedSceneryName || this.store.searchedSceneryName == '') return sortedList;
|
||||||
);
|
|
||||||
},
|
return sortedList.filter((station) =>
|
||||||
},
|
station.name.toLowerCase().startsWith(this.store.searchedSceneryName.toLowerCase())
|
||||||
|
);
|
||||||
methods: {
|
},
|
||||||
changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
|
},
|
||||||
this.store.selectedStationName = station.name;
|
|
||||||
|
methods: {
|
||||||
if (propertyName == 'checkpoints') {
|
changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
|
||||||
this.changeCheckpoints(row);
|
this.store.selectedStationName = station.name;
|
||||||
return;
|
|
||||||
}
|
if (propertyName == 'checkpoints') {
|
||||||
|
this.changeCheckpoints(row);
|
||||||
if (propertyName == 'routes') {
|
return;
|
||||||
this.showRoutesModal(station);
|
}
|
||||||
return;
|
|
||||||
}
|
if (propertyName == 'routes') {
|
||||||
|
this.showRoutesModal(station);
|
||||||
const stationListRow = this.store.stationList.findIndex(
|
return;
|
||||||
(station) => station.name == this.sortedStationList[row].name
|
}
|
||||||
);
|
|
||||||
|
const stationListRow = this.store.stationList.findIndex(
|
||||||
if (stationListRow == -1) return;
|
(station) => station.name == this.sortedStationList[row].name
|
||||||
const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
|
);
|
||||||
if (typeof oldValue === 'boolean') {
|
|
||||||
(this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
|
if (stationListRow == -1) return;
|
||||||
// this.$set(this.stationList[stationListRow], propertyName, !oldValue);
|
const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
|
||||||
this.addChange(station, propertyName, oldValue, !oldValue);
|
if (typeof oldValue === 'boolean') {
|
||||||
return;
|
(this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
|
||||||
}
|
// this.$set(this.stationList[stationListRow], propertyName, !oldValue);
|
||||||
|
this.addChange(station, propertyName, oldValue, !oldValue);
|
||||||
let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue);
|
return;
|
||||||
if (newValue == null) return;
|
}
|
||||||
(this.store.stationList[stationListRow] as any)[propertyName] =
|
|
||||||
typeof oldValue === 'number' ? parseInt(newValue) : newValue;
|
let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue);
|
||||||
// this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
|
if (newValue == null) return;
|
||||||
this.addChange(station, propertyName, oldValue, 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));
|
||||||
changeCheckpoints(row: number) {
|
this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue);
|
||||||
const stationListRow = this.store.stationList.findIndex(
|
},
|
||||||
(station) => station.name == this.sortedStationList[row].name
|
|
||||||
);
|
changeCheckpoints(row: number) {
|
||||||
|
const stationListRow = this.store.stationList.findIndex(
|
||||||
if (stationListRow == -1) return;
|
(station) => station.name == this.sortedStationList[row].name
|
||||||
const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
|
);
|
||||||
const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
|
|
||||||
if (newCheckpoints === null) return;
|
if (stationListRow == -1) return;
|
||||||
|
const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
|
||||||
this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
|
const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
|
||||||
this.addChange(this.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
|
if (newCheckpoints === null) return;
|
||||||
},
|
|
||||||
|
this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
|
||||||
changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
|
this.addChange(this.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
|
||||||
const selectedAvailability: Availability = (e.target as HTMLSelectElement).value as Availability;
|
},
|
||||||
this.addChange(scenery, 'availability', availability, selectedAvailability);
|
|
||||||
},
|
changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
|
||||||
|
const selectedAvailability: Availability = (e.target as HTMLSelectElement).value as Availability;
|
||||||
removeStation(scenery: SceneryRowItem) {
|
this.addChange(scenery, 'availability', availability, selectedAvailability);
|
||||||
const confirmRemove = confirm('Czy na pewno chcesz zaznaczyć tę scenerię do usunięcia?');
|
},
|
||||||
|
|
||||||
if (!confirmRemove) return;
|
removeStation(scenery: SceneryRowItem) {
|
||||||
|
const confirmRemove = confirm('Czy na pewno chcesz zaznaczyć tę scenerię do usunięcia?');
|
||||||
this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
|
|
||||||
this.addRemovalChange(scenery);
|
if (!confirmRemove) return;
|
||||||
},
|
|
||||||
|
this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
|
||||||
showRoutesModal(scenery: SceneryRowItem) {
|
this.addRemovalChange(scenery);
|
||||||
this.store.currentStation = scenery;
|
},
|
||||||
},
|
|
||||||
},
|
showRoutesModal(scenery: SceneryRowItem) {
|
||||||
});
|
this.store.currentStation = scenery;
|
||||||
</script>
|
},
|
||||||
|
},
|
||||||
<style lang="scss" scoped>
|
});
|
||||||
.table_container {
|
</script>
|
||||||
overflow: auto;
|
|
||||||
height: 100vh;
|
<style lang="scss" scoped>
|
||||||
margin: 0.5em 0;
|
.table_container {
|
||||||
}
|
overflow: auto;
|
||||||
|
height: 100vh;
|
||||||
table {
|
margin: 0.5em 0;
|
||||||
text-align: center;
|
}
|
||||||
color: white;
|
|
||||||
position: relative;
|
table {
|
||||||
border-collapse: collapse;
|
text-align: center;
|
||||||
|
color: white;
|
||||||
width: 100%;
|
position: relative;
|
||||||
max-width: 2000px;
|
border-collapse: collapse;
|
||||||
min-width: 1450px;
|
|
||||||
}
|
width: 100%;
|
||||||
|
max-width: 2000px;
|
||||||
table thead {
|
min-width: 1450px;
|
||||||
position: sticky;
|
}
|
||||||
top: 0;
|
|
||||||
}
|
table thead {
|
||||||
|
position: sticky;
|
||||||
table th {
|
top: 0;
|
||||||
padding: 0.4rem 0.45rem;
|
}
|
||||||
background-color: #151b24;
|
|
||||||
color: white;
|
table th {
|
||||||
|
padding: 0.4rem 0.45rem;
|
||||||
top: 0;
|
background-color: #151b24;
|
||||||
}
|
color: white;
|
||||||
|
|
||||||
table tr {
|
top: 0;
|
||||||
background-color: #2c394b;
|
}
|
||||||
transition: background-color 100ms;
|
|
||||||
}
|
table tr {
|
||||||
|
background-color: #2c394b;
|
||||||
table tr.current {
|
transition: background-color 100ms;
|
||||||
outline: 1px solid white;
|
}
|
||||||
}
|
|
||||||
|
table tr.current {
|
||||||
table tr:nth-child(even) {
|
outline: 1px solid white;
|
||||||
background-color: #334756;
|
}
|
||||||
}
|
|
||||||
|
table tr:nth-child(even) {
|
||||||
table tr:hover {
|
background-color: #334756;
|
||||||
background-color: #1a293b;
|
}
|
||||||
cursor: pointer;
|
|
||||||
}
|
table tr:hover {
|
||||||
|
background-color: #1a293b;
|
||||||
table tr td {
|
cursor: pointer;
|
||||||
padding: 0.3rem 0.5rem;
|
}
|
||||||
border: 1px solid #2c2c2c;
|
|
||||||
overflow: auto;
|
table tr td {
|
||||||
text-overflow: ellipsis;
|
padding: 0.3rem 0.5rem;
|
||||||
}
|
border: 1px solid #2c2c2c;
|
||||||
|
overflow: auto;
|
||||||
td img {
|
text-overflow: ellipsis;
|
||||||
height: 1.45em;
|
}
|
||||||
vertical-align: middle;
|
|
||||||
}
|
td img {
|
||||||
|
height: 1.45em;
|
||||||
@media screen and (max-width: 550px) {
|
vertical-align: middle;
|
||||||
table {
|
}
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
@media screen and (max-width: 550px) {
|
||||||
}
|
table {
|
||||||
</style>
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user