Spythere/station-manager-2.0
1
0
Fork 0
mirror of https://github.com/Spythere/station-manager-2.0.git synced 2026-05-03 21:48:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: vmax i dł. szlaków

Browse Source
This commit is contained in:
Spythere
2023-02-11 17:38:57 +01:00
parent 817d48d17a
commit 14ec54d11d
5 changed files with 460 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+4
View File
@@ -87,6 +87,10 @@ html {
margin: 0; margin: 0;
background-color: #1e2341; background-color: #1e2341;
color: white; color: white;
@media screen and (max-width: 600px) {
font-size: calc(0.7vw + 0.7rem);
}
} }
button { button {
src/components/RoutesModal.vue
+424 -339
View File
@@ -1,339 +1,424 @@
<template> <template>
<div class="routes-modal" v-if="store.currentStation"> <div class="bg" @click="closeRoutesModal"></div>
<div class="exit" @click="closeRoutesModal"> <div class="routes-modal" v-if="store.currentStation">
<img src="/icon-exit.svg" alt="exit icon" /> <div class="modal-content">
</div> <div class="modal-wrapper">
<h1>
<div class="modal-wrapper"> Szlaki na scenerii {{ store.currentStation.name }}
<h1>Szlaki na scenerii {{ store.currentStation.name }}</h1> <div class="exit" @click="closeRoutesModal">
<img src="/icon-exit.svg" alt="exit icon" />
<ul class="route-list"> </div>
<li class="route" v-for="(route, i) in computedRouteList" :key="route.routeName + i"> </h1>
<img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
<ul class="route-list">
<form action="javascript:void(0);"> <li class="route" v-for="(route, i) in computedRouteList" :key="route.routeName + i">
<div>Szlak: <input type="text" v-model="route.routeName" /></div> <form action="javascript:void(0);">
<div> <div style="display: flex; justify-content: space-between; align-items: center; gap: 1em">
<input <span>
type="checkbox" Szlak: <input type="text" v-model="route.routeName" />
:name="`${route.routeName}-internal`" &nbsp;
:id="`${route.routeName}-internal`"
v-model="route.routeIsInternal" <label :for="`${route.routeName}-internal`" style="display: inline-block">
/> <input
<label :for="`${route.routeName}-internal`">Szlak wewnętrzny</label> type="checkbox"
</div> :name="`${route.routeName}-internal`"
:id="`${route.routeName}-internal`"
<div> v-model="route.routeIsInternal"
<span>Liczba torów: </span> />
<input WEWNĘTRZNY
type="radio" </label>
:name="`${route.routeName}-tracks`" </span>
:id="`${route.routeName}-track1`"
:value="Number(1)" <img @click="removeRoute(i)" class="route-delete" src="/icon-trash.svg" alt="icon trash" />
:checked="route.routeTracks == 1" </div>
v-model="route.routeTracks"
/> <div>
<label :for="`${route.routeName}-track1`">1</label> <b>Liczba torów:</b>
<label class="radio-choice">
<input <input
type="radio" type="radio"
:name="`${route.routeName}-tracks`" :name="`${route.routeName}-tracks`"
:id="`${route.routeName}-track2`" :id="`${route.routeName}-track1`"
:value="Number(2)" :value="1"
:checked="route.routeTracks == 2" :checked="route.routeTracks == 1"
v-model="route.routeTracks" v-model="route.routeTracks"
/> />
<label :for="`${route.routeName}-track2`">2</label> <span>1</span>
</div> </label>
<div>
<span>Elektryfikacja: </span> <label class="radio-choice">
<input
<input type="radio"
type="radio" :name="`${route.routeName}-tracks`"
:name="`${route.routeName}-electr`" :id="`${route.routeName}-track2`"
:id="`${route.routeName}-E`" :value="Number(2)"
:checked="route.routeElectrification == 'E'" :checked="route.routeTracks == 2"
value="E" v-model="route.routeTracks"
v-model="route.routeElectrification" />
/> <span>2</span>
<label :for="`${route.routeName}-E`">Tak</label> </label>
</div>
<input <div>
type="radio" <b>Elektryfikacja:</b>
:name="`${route.routeName}-electr`"
:id="`${route.routeName}-N`" <label class="radio-choice">
:checked="route.routeElectrification == 'N'" <input
value="N" type="radio"
v-model="route.routeElectrification" :name="`${route.routeName}-electr`"
/> :id="`${route.routeName}-E`"
<label :for="`${route.routeName}-N`">Nie</label> :checked="route.routeElectrification == 'E'"
</div> value="E"
<div> v-model="route.routeElectrification"
<span>Typ blokady: </span> />
<span>Tak</span>
<input </label>
type="radio"
:name="`${route.routeName}-block`" <label class="radio-choice" :for="`${route.routeName}-N`">
:id="`${route.routeName}-PBL`" <input
:checked="route.routeBlockType == 'P'" type="radio"
value="P" :name="`${route.routeName}-electr`"
v-model="route.routeBlockType" :id="`${route.routeName}-N`"
/> :checked="route.routeElectrification == 'N'"
<label :for="`${route.routeName}-PBL`">PBL</label> value="N"
v-model="route.routeElectrification"
<input />
type="radio" <span>Nie</span>
:name="`${route.routeName}-block`" </label>
:id="`${route.routeName}-SBL`" </div>
:checked="route.routeBlockType == 'S'" <div>
value="S" <b>Typ blokady:</b>
v-model="route.routeBlockType"
/> <label class="radio-choice">
<label :for="`${route.routeName}-SBL`">SBL</label> <input
</div> type="radio"
:name="`${route.routeName}-block`"
<div> :id="`${route.routeName}-PBL`"
<span>Blokada dwukierunkowa: </span> :checked="route.routeBlockType == 'P'"
value="P"
<input v-model="route.routeBlockType"
type="radio" /><span>PBL</span>
:name="`${route.routeName}-2twb`" </label>
:id="`${route.routeName}-twb`"
:checked="route.routeHasTwoWayBlock" <label class="radio-choice">
:value="true" <input
v-model="route.routeHasTwoWayBlock" type="radio"
/> :name="`${route.routeName}-block`"
<label :for="`${route.routeName}-twb`">Tak</label> :id="`${route.routeName}-SBL`"
:checked="route.routeBlockType == 'S'"
<input value="S"
type="radio" v-model="route.routeBlockType"
:name="`${route.routeName}-2twb`" /><span>SBL</span>
:id="`${route.routeName}-notwb`" </label>
:checked="!route.routeHasTwoWayBlock" </div>
:value="false"
v-model="route.routeHasTwoWayBlock" <div>
/> <b>Blokada dwukierunkowa:</b>
<label :for="`${route.routeName}-notwb`">Nie</label>
</div> <label class="radio-choice">
</form> <input
</li> type="radio"
</ul> :name="`${route.routeName}-2twb`"
</div> :id="`${route.routeName}-twb`"
:checked="route.routeHasTwoWayBlock"
<div class="routes-actions"> :value="true"
<button @click="saveRoutes">Zapisz</button> v-model="route.routeHasTwoWayBlock"
<button @click="addNewRoute">Dodaj szlak</button> /><span>Tak</span>
<button @click="closeRoutesModal">Zamknij</button> </label>
</div>
</div> <label class="radio-choice">
</template> <input
type="radio"
<script lang="ts"> :name="`${route.routeName}-2twb`"
import { defineComponent } from 'vue'; :id="`${route.routeName}-notwb`"
import changeMixin from '../mixins/changeMixin'; :checked="!route.routeHasTwoWayBlock"
import { useStore } from '../store'; :value="false"
v-model="route.routeHasTwoWayBlock"
export default defineComponent({ /><span>Nie</span>
setup() { </label>
return { </div>
store: useStore(),
}; <div>Prędkość: <input type="number" v-model="route.routeSpeed" /> km/h</div>
}, <div>Długość: <input type="number" v-model="route.routeLength" /> m</div>
</form>
mixins: [changeMixin], </li>
</ul>
data: () => ({ </div>
currentRoutes: '',
routeBackup: '', <div class="routes-actions">
}), <button @click="saveRoutes">Zapisz</button>
<button @click="addNewRoute">Dodaj szlak</button>
computed: { <button @click="closeRoutesModal">Zamknij</button>
computedRouteList() { </div>
if (!this.store.currentStation) return []; </div>
</div>
if (this.currentRoutes.length == 0) return []; </template>
return this.currentRoutes.split(';').map((route) => { <script lang="ts">
/* import { computed, defineComponent, ref } from 'vue';
Route: !Oc_2EPB import changeMixin from '../mixins/changeMixin';
! - szlak wewnętrzny (! - tak, brak wykrzyknika - nie) import { useStore } from '../store';
Oc - nazwa scenerii
2 - liczba torów (1 lub 2) export default defineComponent({
E - elektryfikacja (E - tak, N - nie) setup() {
P - rodzaj blokady (P - PBL, S - SBL) const store = useStore();
B - blokada dwukierunkowa (B - tak, brak litery - nie) const currentRoutes = ref('');
*/ const routeBackup = ref('');
const routeProps = route.split('_');
const routeIsInternal = routeProps[0].startsWith('!'); const computedRouteList = computed(() => {
const routeName = routeIsInternal ? routeProps[0].replace('!', '') : routeProps[0]; if (!store.currentStation) return [];
const routeSpecs = routeProps[1]; if (currentRoutes.value.length == 0) return [];
return {
routeName, return currentRoutes.value.split(';').map((route) => {
routeTracks: Number(routeSpecs[0]), /*
routeElectrification: routeSpecs[1], Route: !Oc_2EPB:100:3000
routeBlockType: routeSpecs[2], ! - szlak wewnętrzny (! - tak, brak wykrzyknika - nie)
routeHasTwoWayBlock: routeSpecs[3] ? true : false, Oc - nazwa scenerii
routeIsInternal, 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)
}, 100 - vmax szlaku
3000 - dł. szlaku
mounted() { */
if (this.store.currentStation) { const routeProps = route.split('_');
this.currentRoutes = this.store.currentStation.routes; const routeIsInternal = routeProps[0].startsWith('!');
this.routeBackup = this.currentRoutes; const routeName = routeIsInternal ? routeProps[0].replace('!', '') : routeProps[0];
} const routeSpeed = Number(route.split(':')[1]) || 0;
// console.log(this.currentRoutes + " git"); const routeLength = Number(route.split(':')[2]) || 0;
},
const routeSpecs = routeProps[1];
methods: {
closeRoutesModal() { return {
this.store.currentStation = null; routeName,
this.currentRoutes = ''; routeTracks: Number(routeSpecs[0]),
}, routeElectrification: routeSpecs[1],
routeBlockType: routeSpecs[2],
addNewRoute() { routeHasTwoWayBlock: routeSpecs[3] == 'B' ? true : false,
this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP`; routeIsInternal,
this.saveRoutes(); routeSpeed,
}, routeLength,
};
removeRoute(index: number) { });
this.currentRoutes = this.currentRoutes });
.split(';')
.filter((_, i) => i != index) return {
.join(';'); store,
computedRouteList,
this.saveRoutes(); currentRoutes,
}, routeBackup,
};
saveRoutes() { },
const index = this.store.stationList.findIndex((station) => station.name === this.store.currentStation?.name);
mixins: [changeMixin],
if (index == -1) return;
data: () => ({}),
const routeString = this.computedRouteList
.map( mounted() {
(route) => if (this.store.currentStation) {
`${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${ this.currentRoutes = this.store.currentStation.routes;
route.routeElectrification this.routeBackup = this.currentRoutes;
}${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}` }
) },
.join(';');
methods: {
this.store.stationList[index]['routes'] = routeString; closeRoutesModal() {
this.currentRoutes = routeString; this.store.currentStation = null;
this.currentRoutes = '';
this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString); },
},
}, addNewRoute() {
}); this.currentRoutes += (this.currentRoutes.length != 0 ? ';' : '') + `-_1EP:0:0`;
</script> // this.saveRoutes();
},
<style lang="scss" scoped>
.routes-modal { removeRoute(index: number) {
position: fixed; this.currentRoutes = this.currentRoutes
top: 50%; .split(';')
left: 50%; .filter((_, i) => i != index)
.join(';');
width: 90%;
max-width: 800px; // this.saveRoutes();
},
height: 95%;
overflow: hidden; parseRoutes() {
padding: 0.5em 0; const routeString = this.computedRouteList
.map(
display: flex; (route) =>
flex-direction: column; `${route.routeIsInternal ? '!' : ''}${route.routeName.trim()}_${route.routeTracks}${
route.routeElectrification
transform: translate(-50%, -50%); }${route.routeBlockType}${route.routeHasTwoWayBlock ? 'B' : ''}:${route.routeSpeed || 0}:${
z-index: 100; route.routeLength || 0
}`
background-color: #333; )
} .join(';');
.modal-wrapper { return routeString;
overflow: auto; },
flex-grow: 2;
} saveRoutes() {
const index = this.store.stationList.findIndex((station) => station.name === this.store.currentStation?.name);
.routes-modal h1 {
position: sticky; if (index == -1) return;
top: 0;
const routeString = this.parseRoutes();
z-index: 100;
this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString);
background-color: #333; this.store.stationList[index]['routes'] = routeString;
padding: 0.5em 2em; this.currentRoutes = routeString;
},
text-align: center; },
} });
</script>
.routes-modal label {
padding: 0; <style lang="scss" scoped>
} .bg {
position: fixed;
.routes-modal .exit { top: 0;
position: absolute; left: 0;
top: 0; width: 100vw;
right: 0; height: 100vh;
z-index: 101;
z-index: 100;
cursor: pointer;
margin: 0.5em 1.5em; background-color: #00000081;
} }
.exit img { .routes-modal {
width: 2.5em; position: fixed;
} top: 50%;
left: 50%;
.routes-modal input {
display: inline; width: 95%;
padding: 0; max-width: 800px;
margin: 0.5em 0;
height: 95vh;
color: black; max-height: 1000px;
font-size: 1em;
transform: translate(-50%, -50%);
max-width: 120px; z-index: 101;
} padding: 0.5em 0;
ul { background-color: #333;
list-style: none; border-radius: 1rem;
padding: 0 1em;
margin: 0; input {
} display: inline;
margin: 0.25em 0;
ul li {
padding: 0.65em; color: black;
margin: 0.5em 0; font-size: 1em;
position: relative; max-width: 120px;
}
background-color: #222; }
}
label.radio-choice {
.route-delete { display: inline-block;
position: absolute; position: relative;
top: 0;
right: 0; background-color: #333;
margin: 0.5em; margin: 0.25em;
width: 1.15em; cursor: pointer;
cursor: pointer; input {
} position: absolute;
opacity: 0;
.routes-actions { cursor: pointer;
background-color: #333; }
width: 100%;
span {
margin-top: 0.5em; display: flex;
padding: 0.5em 0; padding: 0.25em 0.75em;
text-align: center; }
}
input:checked + span {
.routes-actions button { color: gold;
font-size: 1.2em; font-weight: bold;
} }
</style>
input:focus-visible + span {
outline: 1px solid white;
}
}
.exit {
img {
vertical-align: text-bottom;
width: 1.4em;
}
cursor: pointer;
}
h1 {
display: flex;
justify-content: space-between;
gap: 0.5em;
position: sticky;
top: -1px;
z-index: 100;
background-color: #333;
border-radius: 1rem 1rem 0 0;
padding: 0.25em 0.5em;
margin: 0;
font-size: 2em;
text-align: center;
}
.modal-content {
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
}
.modal-wrapper {
overflow: auto;
}
.routes-modal ul {
list-style: none;
padding: 0 1em;
margin: 0;
overflow: auto;
}
ul li {
padding: 0.65em;
margin: 0.5em 0;
position: relative;
background-color: #222;
}
.route-delete {
margin: 0.5em;
width: 1.15em;
cursor: pointer;
}
.routes-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5em;
background-color: #333;
width: 100%;
padding: 0.5em 0;
text-align: center;
}
.routes-actions button {
font-size: 1.2em;
margin: 0;
}
</style>
src/components/TableActions.vue
+3 -3
View File
@@ -117,7 +117,7 @@ export default defineComponent({
: 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, true);
itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`); itemChanges.push(`<i>${(HeaderTypes as any)[propChange]}:</i> ${value || '-'}`);
} }
@@ -173,7 +173,7 @@ export default defineComponent({
return { ...v }; return { ...v };
}); });
const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data const updateResData = (await this.store.updateSceneriesData(mappedChangeList)).data;
this.store.changesResponse = updateResData; this.store.changesResponse = updateResData;
this.store.fetchSceneriesData(); this.store.fetchSceneriesData();
@@ -207,7 +207,7 @@ export default defineComponent({
signalType: 'współczesna', signalType: 'współczesna',
controlType: 'SCS', controlType: 'SCS',
SUP: false, SUP: false,
routes: 'Test_1EPB"', routes: 'Test_1EPB:0:0',
checkpoints: '', checkpoints: '',
authors: '', authors: '',
availability: 'default', availability: 'default',
src/mixins/routesMixin.ts
+26 -22
View File
@@ -1,22 +1,26 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { SceneryRowItem } from '../types/types'; import { SceneryRowItem } from '../types/types';
export default defineComponent({ export default defineComponent({
methods: { methods: {
getRouteNames(routes: SceneryRowItem['routes']) { getRouteNames(routes: SceneryRowItem['routes'], showAdditional = false) {
return routes return routes
.split(';') .split(';')
.map((route) => { .map((route) => {
// !Oc_2EPB // !Oc_2EPB
const props1 = route.split('_')[0]; const [_, speed, length] = route.split(':');
const props2 = route.split('_')[1];
const isInternal = props1.startsWith('!'); const props1 = route.split('_')[0];
const name = isInternal ? props1.replace('!', '') : props1; const props2 = route.split('_')[1];
return `${isInternal ? '<u>' + name + '</u>' : name} <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${ const isInternal = props1.startsWith('!');
props2[2] const name = isInternal ? props1.replace('!', '') : props1;
}${props2[3] ? '/B' : ''})</span>`; return `<span ${speed != '0' && length != '0' ? 'class="text--accent"' : ''}>${
}) isInternal ? '<u>' + name + '</u>' : name
.join(', '); }</span> <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${props2[2]}${props2[3] == 'B' ? '/B' : ''}${
}, speed && showAdditional ? '/' + speed : ''
}, }${length && showAdditional ? '/' + length : ''})</span>`;
}); })
.join(', ');
},
},
});
src/views/ManagerView.vue
+3 -7
View File
@@ -19,7 +19,9 @@
<tr v-for="(station, row) in sortedStationList" tabindex="0"> <tr v-for="(station, row) in sortedStationList" tabindex="0">
<td v-for="(value, propName) in headerNameList" @click="changeProperty(station, row, propName as string)"> <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-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
<span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span> <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'"
>URL</span
>
<span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span> <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
@@ -240,10 +242,4 @@ td img {
height: 1.45em; height: 1.45em;
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 550px) {
table {
font-size: 0.85em;
}
}
</style> </style>