mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Spythere
|
063d5283e4 | ||
 Spythere
|
29de1b3c4b | ||
|
Spythere
|
f0c02bf12e | ||
|
Spythere
|
8aa23468b3 | ||
|
Spythere
|
4c1fcf710b | ||
|
Spythere
|
a529d6e9eb | ||
|
Spythere
|
9fc602e08f | ||
|
Spythere
|
56e40bd84b | ||
|
Spythere
|
a5b5df7452 | ||
|
Spythere
|
1a8da02ced | ||
|
Spythere
|
7e75fa2516 | ||
|
Spythere
|
3ed2c09184 | ||
|
Spythere
|
6901c3d2b4 | ||
|
Spythere
|
8417754403 | ||
|
Spythere
|
de5c57181a | ||
|
Spythere
|
d91d4cc6a8 | ||
|
Spythere
|
9a5fd4d670 | ||
|
Spythere
|
4202a55673 | ||
|
Spythere
|
5181e8f4af | ||
|
Spythere
|
e117f62fcb | ||
|
Spythere
|
e0036bf969 |
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "stacjownik",
|
||||
"version": "1.24.0",
|
||||
"version": "1.24.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
+8
-8
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="app_container">
|
||||
<UpdateModal
|
||||
:update-modal-open="isUpdateModalOpen"
|
||||
@toggle-modal="() => (isUpdateModalOpen = false)"
|
||||
<UpdateCard
|
||||
:is-update-card-open="isUpdateCardOpen"
|
||||
@toggle-card="() => (isUpdateCardOpen = false)"
|
||||
/>
|
||||
|
||||
<Tooltip />
|
||||
@@ -27,7 +27,7 @@
|
||||
©
|
||||
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
|
||||
{{ new Date().getUTCFullYear() }} |
|
||||
<button class="btn--text" @click="() => (isUpdateModalOpen = true)">
|
||||
<button class="btn--text" @click="() => (isUpdateCardOpen = true)">
|
||||
v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
|
||||
</button>
|
||||
|
||||
@@ -56,7 +56,7 @@ import StatusIndicator from './components/App/StatusIndicator.vue';
|
||||
import AppHeader from './components/App/AppHeader.vue';
|
||||
import TrainModal from './components/TrainsView/TrainModal.vue';
|
||||
import Tooltip from './components/Tooltip/Tooltip.vue';
|
||||
import UpdateModal from './components/App/UpdateModal.vue';
|
||||
import UpdateCard from './components/App/UpdateCard.vue';
|
||||
|
||||
import StorageManager from './managers/storageManager';
|
||||
|
||||
@@ -68,7 +68,7 @@ export default defineComponent({
|
||||
StatusIndicator,
|
||||
AppHeader,
|
||||
TrainModal,
|
||||
UpdateModal,
|
||||
UpdateCard,
|
||||
Tooltip
|
||||
},
|
||||
|
||||
@@ -78,7 +78,7 @@ export default defineComponent({
|
||||
apiStore: useApiStore(),
|
||||
tooltipStore: useTooltipStore(),
|
||||
|
||||
isUpdateModalOpen: false,
|
||||
isUpdateCardOpen: false,
|
||||
|
||||
currentLang: 'pl',
|
||||
isOnProductionHost: location.hostname == 'stacjownik-td2.web.app',
|
||||
@@ -130,7 +130,7 @@ export default defineComponent({
|
||||
releaseURL: releaseData.html_url
|
||||
};
|
||||
|
||||
this.isUpdateModalOpen =
|
||||
this.isUpdateCardOpen =
|
||||
storageVersion != version || import.meta.env.VITE_UPDATE_TEST === 'test';
|
||||
} catch (error) {
|
||||
console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<AnimatedModal :is-open="updateModalOpen" @toggle-modal="toggleModal(false)">
|
||||
<div class="modal-content">
|
||||
<Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
|
||||
<div class="content">
|
||||
<h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
|
||||
|
||||
<div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
|
||||
<div class="no-features" v-else>{{ $t('update.no-data') }}</div>
|
||||
|
||||
<button class="btn btn--action" ref="confirm-btn" @click="toggleModal(false)">
|
||||
<button class="btn btn--action" ref="confirm-btn" @click="toggleCard(false)">
|
||||
{{ $t('update.confirm') }}
|
||||
</button>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<span v-html="$t('update.info-2')"></span>
|
||||
</p>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -25,21 +25,21 @@ import { useMainStore } from '../../store/mainStore';
|
||||
import { version } from '../../../package.json';
|
||||
import { Converter } from 'showdown';
|
||||
|
||||
import AnimatedModal from '../Global/AnimatedModal.vue';
|
||||
import Card from '../Global/Card.vue';
|
||||
|
||||
const converter = new Converter();
|
||||
|
||||
export default defineComponent({
|
||||
components: { AnimatedModal },
|
||||
components: { Card },
|
||||
|
||||
props: {
|
||||
updateModalOpen: {
|
||||
isUpdateCardOpen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['toggleModal'],
|
||||
emits: ['toggleCard'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
@@ -49,7 +49,7 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
watch: {
|
||||
updateModalOpen(val: boolean) {
|
||||
isUpdateCardOpen(val: boolean) {
|
||||
this.$nextTick(() => {
|
||||
if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
|
||||
});
|
||||
@@ -60,37 +60,38 @@ export default defineComponent({
|
||||
htmlChangelog() {
|
||||
if (this.mainStore.appUpdate == null) return '';
|
||||
|
||||
const x = converter.makeHtml(this.mainStore.appUpdate.changelog);
|
||||
console.log(x);
|
||||
|
||||
return x;
|
||||
return converter.makeHtml(this.mainStore.appUpdate.changelog);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleModal(value: boolean) {
|
||||
this.$emit('toggleModal', value);
|
||||
toggleCard(value: boolean) {
|
||||
this.$emit('toggleCard', value);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/variables';
|
||||
|
||||
::v-deep(h1) {
|
||||
text-align: center;
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
::v-deep(h2) {
|
||||
padding: 0.25em 0;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
::v-deep(ul) {
|
||||
list-style: inside;
|
||||
padding: 0.5em;
|
||||
list-style: initial;
|
||||
padding: 1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 0.5em;
|
||||
@@ -98,6 +99,7 @@ export default defineComponent({
|
||||
min-height: 700px;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.no-features {
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<transition name="modal-anim" tag="div">
|
||||
<div class="modal" v-if="isOpen">
|
||||
<div class="modal-background" @click="toggleModal(false)"></div>
|
||||
<div class="modal-wrapper" ref="wrapper" tabindex="0">
|
||||
<div class="card" v-if="isOpen">
|
||||
<div class="card-background" @click="toggleCard(false)"></div>
|
||||
<div class="card-body" ref="wrapper" tabindex="0">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
|
||||
<div class="tab-exit" ref="exit" tabindex="0" @focus="toggleCard(false)"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@@ -15,7 +15,7 @@ import { defineComponent } from 'vue';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['toggleModal'],
|
||||
emits: ['toggleCard'],
|
||||
|
||||
props: {
|
||||
isOpen: Boolean
|
||||
@@ -36,8 +36,8 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleModal(value: boolean) {
|
||||
this.$emit('toggleModal', value);
|
||||
toggleCard(value: boolean) {
|
||||
this.$emit('toggleCard', value);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -46,7 +46,7 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
|
||||
.modal {
|
||||
.card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -56,7 +56,7 @@ export default defineComponent({
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
.card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -68,7 +68,7 @@ export default defineComponent({
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
.card-body {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -77,12 +77,11 @@ export default defineComponent({
|
||||
overflow: auto;
|
||||
max-height: 95vh;
|
||||
|
||||
box-shadow: 0 0 15px 10px #0e0e0e;
|
||||
|
||||
& > :slotted(div) {
|
||||
background-color: #1a1a1a;
|
||||
box-shadow: 0 0 15px 10px #0e0e0e;
|
||||
|
||||
width: 95vw;
|
||||
max-width: 850px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<AnimatedModal
|
||||
class="donation-modal"
|
||||
:isOpen="isModalOpen"
|
||||
@toggleModal="toggleModal"
|
||||
@keydown.esc="toggleModal(false)"
|
||||
>
|
||||
<div class="modal_content">
|
||||
<div class="modal_main">
|
||||
<Card :isOpen="isCardOpen" @toggleCard="toggleCard" @keydown.esc="toggleCard(false)">
|
||||
<div class="body">
|
||||
<div class="content">
|
||||
<h1 v-html="$t('donations.header')"></h1>
|
||||
<div class="donators-slider" v-if="donatorList.length != 0">
|
||||
<span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
|
||||
@@ -61,9 +56,9 @@
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div class="modal_actions">
|
||||
<div class="actions">
|
||||
<a
|
||||
class="modal-action a-button btn--image coffee"
|
||||
class="action a-button btn--image coffee"
|
||||
href="https://buycoffee.to/spythere"
|
||||
target="_blank"
|
||||
ref="action"
|
||||
@@ -73,7 +68,7 @@
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="modal-action a-button btn--image paypal"
|
||||
class="action a-button btn--image paypal"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
|
||||
target="_blank"
|
||||
>
|
||||
@@ -81,30 +76,30 @@
|
||||
{{ $t('donations.action-paypal') }}
|
||||
</a>
|
||||
|
||||
<button class="modal-action btn--image exit" @click="toggleModal(false)">
|
||||
<button class="action btn--image exit" @click="toggleCard(false)">
|
||||
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
|
||||
{{ $t('donations.action-exit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import AnimatedModal from './AnimatedModal.vue';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
import Card from './Card.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { AnimatedModal },
|
||||
components: { Card },
|
||||
props: {
|
||||
isModalOpen: Boolean
|
||||
isCardOpen: Boolean
|
||||
},
|
||||
|
||||
emits: ['toggleModal'],
|
||||
emits: ['toggleCard'],
|
||||
|
||||
watch: {
|
||||
isModalOpen(val: boolean) {
|
||||
isCardOpen(val: boolean) {
|
||||
this.running = val;
|
||||
this.lastUpdate = Date.now();
|
||||
|
||||
@@ -138,8 +133,8 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleModal(value: boolean) {
|
||||
this.$emit('toggleModal', value);
|
||||
toggleCard(value: boolean) {
|
||||
this.$emit('toggleCard', value);
|
||||
},
|
||||
|
||||
runUpdate() {
|
||||
@@ -157,53 +152,53 @@ export default defineComponent({
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
|
||||
.modal_content {
|
||||
.body {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 1em;
|
||||
|
||||
font-size: 1.1em;
|
||||
|
||||
& > div {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.95em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
a.discord {
|
||||
text-decoration: underline;
|
||||
}
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.modal_main {
|
||||
.content {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
img {
|
||||
max-height: 20px;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.modal_actions {
|
||||
img {
|
||||
max-height: 20px;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.95em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
a.discord {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 0.5em;
|
||||
padding: 1em;
|
||||
|
||||
form button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal_actions > .modal-action {
|
||||
.actions > .action {
|
||||
&.paypal {
|
||||
$btnColor: #254069;
|
||||
|
||||
@@ -8,9 +8,12 @@
|
||||
|
||||
<img
|
||||
class="traction-only"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${computedStockList[0].split(':')[0]}${
|
||||
/^EN/.test(computedStockList[0]) ? 'rb' : ''
|
||||
}.png`"
|
||||
:src="
|
||||
getVehicleThumbnailURL(
|
||||
computedStockList[0].split(':')[0],
|
||||
/^EN/.test(computedStockList[0]) ? 'rb' : ''
|
||||
)
|
||||
"
|
||||
@error="onImageError($event, computedStockList[0])"
|
||||
width="300"
|
||||
height="60"
|
||||
@@ -29,9 +32,9 @@
|
||||
:data-mouseover="stockName"
|
||||
data-tooltip-type="VehiclePreviewTooltip"
|
||||
:data-tooltip-content="stockName.split(':')[0]"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
|
||||
/^EN/.test(stockName) ? 'rb' : ''
|
||||
}.png`"
|
||||
:src="
|
||||
getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
|
||||
"
|
||||
@error="onImageError($event, stockName)"
|
||||
@click.stop="() => {}"
|
||||
width="400"
|
||||
@@ -44,7 +47,7 @@
|
||||
data-tooltip-type="VehiclePreviewTooltip"
|
||||
:data-tooltip-content="stockName.split(':')[0]"
|
||||
v-if="/^(EN|2EN)/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
|
||||
:src="getVehicleThumbnailURL(stockName, 's')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
|
||||
"
|
||||
@@ -56,7 +59,7 @@
|
||||
data-tooltip-type="VehiclePreviewTooltip"
|
||||
:data-tooltip-content="stockName.split(':')[0]"
|
||||
v-if="/^EN71/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
|
||||
:src="getVehicleThumbnailURL(stockName, 's')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
|
||||
"
|
||||
@@ -68,7 +71,7 @@
|
||||
data-tooltip-type="VehiclePreviewTooltip"
|
||||
:data-tooltip-content="stockName.split(':')[0]"
|
||||
v-if="/^(EN|2EN)/.test(stockName)"
|
||||
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
|
||||
:src="getVehicleThumbnailURL(stockName, 'ra')"
|
||||
@error="
|
||||
(event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
|
||||
"
|
||||
@@ -110,6 +113,10 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
methods: {
|
||||
getVehicleThumbnailURL(locoType: string, suffix?: string) {
|
||||
return `https://static.spythere.eu/thumbnails/${locoType}${suffix}.png`;
|
||||
},
|
||||
|
||||
onImageError(event: Event, stockName: string) {
|
||||
let fallbackName = '';
|
||||
|
||||
|
||||
@@ -301,6 +301,6 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/dropdown.scss';
|
||||
@import '../../styles/dropdown_filters.scss';
|
||||
@import '../../styles/dropdown';
|
||||
@import '../../styles/dropdown_filters';
|
||||
</style>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<div class="info-lists">
|
||||
<!-- user list -->
|
||||
<SceneryInfoUserList :onlineScenery="onlineScenery" />
|
||||
<SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
|
||||
|
||||
<!-- spawn list -->
|
||||
<SceneryInfoSpawnList :onlineScenery="onlineScenery" />
|
||||
|
||||
@@ -13,13 +13,13 @@
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-for="train in onlineScenery?.stationTrains"
|
||||
v-for="{ train, status } in stationTrains"
|
||||
class="badge user"
|
||||
:class="train.stopStatus"
|
||||
:key="train.trainId"
|
||||
tabindex="0"
|
||||
@click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
:key="train.id"
|
||||
:data-status="status"
|
||||
@click.prevent="selectModalTrain(train.id, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
|
||||
>
|
||||
<span class="user_train">{{ train.trainNo }}</span>
|
||||
<span class="user_name">{{ train.driverName }}</span>
|
||||
@@ -32,7 +32,9 @@
|
||||
import { PropType, defineComponent } from 'vue';
|
||||
import modalTrainMixin from '../../../mixins/modalTrainMixin';
|
||||
import routerMixin from '../../../mixins/routerMixin';
|
||||
import { ActiveScenery } from '../../../typings/common';
|
||||
import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
|
||||
import { getTrainStopStatus } from '../utils';
|
||||
import { useMainStore } from '../../../store/mainStore';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [routerMixin, modalTrainMixin],
|
||||
@@ -41,6 +43,38 @@ export default defineComponent({
|
||||
onlineScenery: {
|
||||
type: Object as PropType<ActiveScenery>,
|
||||
required: false
|
||||
},
|
||||
station: {
|
||||
type: Object as PropType<Station>
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mainStore: useMainStore()
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
stationTrains() {
|
||||
if (!this.onlineScenery) return;
|
||||
|
||||
const name = this.station?.generalInfo?.checkpoints[0] ?? this.onlineScenery.name;
|
||||
|
||||
return this.onlineScenery.stationTrains.map((train) => {
|
||||
const stop = train.timetableData?.followingStops.find(
|
||||
(stop) => stop.stopNameRAW.toLowerCase() == name.toLowerCase()
|
||||
);
|
||||
|
||||
const status = stop
|
||||
? getTrainStopStatus(stop, train.currentStationName, this.onlineScenery!.name)
|
||||
: 'no-timetable';
|
||||
|
||||
return {
|
||||
train,
|
||||
status
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -74,31 +108,31 @@ ul {
|
||||
-webkit-transition: background-color 200ms;
|
||||
}
|
||||
|
||||
&.no-timetable .user_train {
|
||||
&[data-status='no-timetable'] .user_train {
|
||||
background-color: $no-timetable;
|
||||
}
|
||||
|
||||
&.departed > &_train {
|
||||
&[data-status='departed'] > &_train {
|
||||
background-color: $departed;
|
||||
}
|
||||
|
||||
&.stopped > &_train {
|
||||
&[data-status='stopped'] > &_train {
|
||||
background-color: $stopped;
|
||||
}
|
||||
|
||||
&.online > &_train {
|
||||
&[data-status='online'] > &_train {
|
||||
background-color: $online;
|
||||
}
|
||||
|
||||
&.terminated > &_train {
|
||||
&[data-status='terminated'] > &_train {
|
||||
background-color: $terminated;
|
||||
}
|
||||
|
||||
&.disconnected > &_train {
|
||||
&[data-status='disconnected'] > &_train {
|
||||
background-color: $disconnected;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
&[data-status='offline'] {
|
||||
background: firebrick;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<transition-group name="list-anim">
|
||||
<div
|
||||
style="padding-bottom: 5em"
|
||||
v-if="apiStore.dataStatuses.connection == 0 && computedScheduledTrains.length == 0"
|
||||
v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
|
||||
key="list-loading"
|
||||
>
|
||||
<Loading />
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
<span
|
||||
class="timetable-item empty"
|
||||
v-else-if="computedScheduledTrains.length == 0 && !onlineScenery"
|
||||
v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
|
||||
key="list-offline"
|
||||
>
|
||||
{{ $t('scenery.offline') }}
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<div
|
||||
class="timetable-item empty"
|
||||
v-else-if="computedScheduledTrains.length == 0"
|
||||
v-else-if="sceneryTimetables.length == 0"
|
||||
key="list-no-timetables"
|
||||
>
|
||||
{{ $t('scenery.no-timetables') }}
|
||||
@@ -65,59 +65,56 @@
|
||||
<div
|
||||
class="timetable-item"
|
||||
v-else
|
||||
v-for="scheduledTrain in computedScheduledTrains"
|
||||
:key="scheduledTrain.trainId + scheduledTrain.stopInfo.arrivalTimestamp"
|
||||
v-for="row in sceneryTimetables"
|
||||
:key="row.train.id + row.checkpointStop.arrivalTimestamp"
|
||||
tabindex="0"
|
||||
@click.prevent.stop="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
|
||||
@keydown.enter.prevent="selectModalTrain(scheduledTrain.trainId, $event.currentTarget)"
|
||||
@click.prevent.stop="selectModalTrain(row.train.id, $event.currentTarget)"
|
||||
@keydown.enter.prevent="selectModalTrain(row.train.id, $event.currentTarget)"
|
||||
>
|
||||
<span class="timetable-general">
|
||||
<span class="general-info">
|
||||
<span class="info-number">
|
||||
<strong>{{ scheduledTrain.category }}</strong>
|
||||
{{ scheduledTrain.trainNo }}
|
||||
<strong>{{ row.train.timetableData!.category }}</strong>
|
||||
{{ row.train.trainNo }}
|
||||
|
||||
<span
|
||||
v-if="scheduledTrain.stopInfo.comments"
|
||||
:title="scheduledTrain.stopInfo.comments"
|
||||
>
|
||||
<span v-if="row.checkpointStop.comments" :title="row.checkpointStop.comments">
|
||||
<img src="/images/icon-warning.svg" />
|
||||
</span>
|
||||
</span>
|
||||
|
|
||||
<span>
|
||||
{{ scheduledTrain.driverName }}
|
||||
{{ row.train.driverName }}
|
||||
</span>
|
||||
|
||||
<div class="info-route">
|
||||
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
|
||||
<strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
|
||||
</div>
|
||||
|
||||
<ScheduledTrainStatus :scheduledTrain="scheduledTrain" />
|
||||
<ScheduledTrainStatus :sceneryTimetableRow="row" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="timetable-schedule">
|
||||
<span class="schedule-arrival">
|
||||
<span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
|
||||
<span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
|
||||
{{ $t('timetables.begins') }}
|
||||
</span>
|
||||
|
||||
<span class="arrival-time" v-else>
|
||||
<div v-if="scheduledTrain.stopInfo.arrivalDelay == 0">
|
||||
<span>{{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}</span>
|
||||
<div v-if="row.checkpointStop.arrivalDelay == 0">
|
||||
<span>{{ timestampToString(row.checkpointStop.arrivalTimestamp) }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<s style="margin-right: 0.2em" class="text--grayed">{{
|
||||
timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
|
||||
timestampToString(row.checkpointStop.arrivalTimestamp)
|
||||
}}</s>
|
||||
</div>
|
||||
|
||||
<span>
|
||||
{{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
|
||||
({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : ''
|
||||
}}{{ scheduledTrain.stopInfo.arrivalDelay }})
|
||||
{{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
|
||||
({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
|
||||
}}{{ row.checkpointStop.arrivalDelay }})
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
@@ -125,41 +122,39 @@
|
||||
|
||||
<span class="schedule-stop">
|
||||
<span class="stop-connection">
|
||||
{{ scheduledTrain.arrivingLine }}
|
||||
{{ row.arrivingLine }}
|
||||
</span>
|
||||
|
||||
<span class="stop-time">
|
||||
{{ scheduledTrain.stopInfo.stopTime || '' }}
|
||||
{{
|
||||
scheduledTrain.stopInfo.stopTime ? scheduledTrain.stopInfo.stopType || 'pt' : ''
|
||||
}}
|
||||
{{ row.checkpointStop.stopTime || '' }}
|
||||
{{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
|
||||
</span>
|
||||
|
||||
<span class="stop-connection">
|
||||
{{ scheduledTrain.departureLine }}
|
||||
{{ row.departureLine }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="schedule-departure">
|
||||
<span class="departure-time terminates" v-if="scheduledTrain.stopInfo.terminatesHere">
|
||||
<span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
|
||||
{{ $t('timetables.terminates') }}
|
||||
</span>
|
||||
|
||||
<span class="departure-time" v-else>
|
||||
<div v-if="scheduledTrain.stopInfo.departureDelay == 0">
|
||||
<span>{{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}</span>
|
||||
<div v-if="row.checkpointStop.departureDelay == 0">
|
||||
<span>{{ timestampToString(row.checkpointStop.departureTimestamp) }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<s style="margin-right: 0.2em" class="text--grayed">{{
|
||||
timestampToString(scheduledTrain.stopInfo.departureTimestamp)
|
||||
timestampToString(row.checkpointStop.departureTimestamp)
|
||||
}}</s>
|
||||
</div>
|
||||
|
||||
<span>
|
||||
{{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
|
||||
({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
|
||||
}}{{ scheduledTrain.stopInfo.departureDelay }})
|
||||
{{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
|
||||
({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
|
||||
}}{{ row.checkpointStop.departureDelay }})
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
@@ -183,6 +178,8 @@ import modalTrainMixin from '../../mixins/modalTrainMixin';
|
||||
import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
import { ActiveScenery, Station } from '../../typings/common';
|
||||
import { SceneryTimetableRow } from './typings';
|
||||
import { getTrainStopStatus, stopStatusPriority } from './utils';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SceneryTimetable',
|
||||
@@ -204,10 +201,6 @@ export default defineComponent({
|
||||
listOpen: false
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.loadSelectedOption();
|
||||
},
|
||||
|
||||
activated() {
|
||||
this.loadSelectedOption();
|
||||
},
|
||||
@@ -220,9 +213,7 @@ export default defineComponent({
|
||||
const mainStore = useMainStore();
|
||||
|
||||
const chosenCheckpoint = ref(
|
||||
props.station?.generalInfo?.checkpoints?.length == 0
|
||||
? ''
|
||||
: props.station?.generalInfo?.checkpoints[0] ?? null
|
||||
props.station?.generalInfo?.checkpoints[0] ?? props.station?.name ?? ''
|
||||
);
|
||||
|
||||
return {
|
||||
@@ -241,27 +232,107 @@ export default defineComponent({
|
||||
return url;
|
||||
},
|
||||
|
||||
computedScheduledTrains() {
|
||||
sceneryTimetables(): SceneryTimetableRow[] {
|
||||
if (!this.station) return [];
|
||||
if (!this.onlineScenery) return [];
|
||||
|
||||
return (
|
||||
this.onlineScenery?.scheduledTrains
|
||||
?.filter(
|
||||
(train) =>
|
||||
train.checkpointName.toLocaleLowerCase() ==
|
||||
(this.chosenCheckpoint || this.station!.name).toLocaleLowerCase() &&
|
||||
train.region == this.mainStore.region.id
|
||||
)
|
||||
.sort((a, b) => {
|
||||
if (a.stopStatusID > b.stopStatusID) return 1;
|
||||
if (a.stopStatusID < b.stopStatusID) return -1;
|
||||
console.log(this.onlineScenery.scheduledTrains, this.chosenCheckpoint);
|
||||
|
||||
if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
|
||||
if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
|
||||
return this.onlineScenery.scheduledTrains
|
||||
.filter(
|
||||
(ct) =>
|
||||
ct.train.region == this.mainStore.region.id &&
|
||||
this.chosenCheckpoint &&
|
||||
ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
|
||||
)
|
||||
.map((ct) => {
|
||||
const trainStopStatus = getTrainStopStatus(
|
||||
ct.checkpointStop,
|
||||
ct.train.currentStationName,
|
||||
this.station!.name
|
||||
);
|
||||
|
||||
return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
|
||||
}) || []
|
||||
);
|
||||
const trainStopIndex =
|
||||
ct.train.timetableData?.followingStops.findIndex(
|
||||
(stop) => stop.stopName == ct.checkpointStop.stopName
|
||||
) ?? -1;
|
||||
|
||||
let prevStationName = '',
|
||||
nextStationName = '';
|
||||
|
||||
let departureLine: string | null = null;
|
||||
let arrivingLine: string | null = null;
|
||||
|
||||
let prevDepartureLine: string | null = null,
|
||||
nextArrivalLine: string | null = null;
|
||||
|
||||
if (trainStopIndex > -1 && ct.train.timetableData?.followingStops !== undefined) {
|
||||
for (let i = trainStopIndex; i >= 0; i--) {
|
||||
const stop = ct.train.timetableData.followingStops[i];
|
||||
|
||||
if (
|
||||
/strong|podg\.|pe\./g.test(stop.stopName) &&
|
||||
!prevStationName &&
|
||||
i <= trainStopIndex - 1
|
||||
)
|
||||
prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
|
||||
|
||||
if (
|
||||
stop.arrivalLine != null &&
|
||||
!arrivingLine &&
|
||||
!/-|_|it|sbl/gi.test(stop.arrivalLine)
|
||||
) {
|
||||
arrivingLine = stop.arrivalLine;
|
||||
prevDepartureLine =
|
||||
ct.train.timetableData.followingStops[i - 1]?.departureLine || null;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = trainStopIndex; i < ct.train.timetableData.followingStops.length; i++) {
|
||||
const stop = ct.train.timetableData.followingStops[i];
|
||||
|
||||
if (
|
||||
/strong|podg\.|pe\./g.test(stop.stopName) &&
|
||||
!nextStationName &&
|
||||
i > trainStopIndex
|
||||
)
|
||||
nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
|
||||
|
||||
if (
|
||||
stop.departureLine &&
|
||||
!departureLine &&
|
||||
!/-|_|it|sbl/gi.test(stop.departureLine)
|
||||
) {
|
||||
departureLine = stop.departureLine;
|
||||
nextArrivalLine = ct.train.timetableData.followingStops[i + 1]?.arrivalLine || null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
checkpointStop: ct.checkpointStop,
|
||||
train: ct.train,
|
||||
prevDepartureLine,
|
||||
nextArrivalLine,
|
||||
departureLine,
|
||||
arrivingLine,
|
||||
prevStationName,
|
||||
nextStationName,
|
||||
status: trainStopStatus
|
||||
};
|
||||
})
|
||||
.sort((a, b) => {
|
||||
if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) < 0)
|
||||
return -1;
|
||||
|
||||
if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) > 0)
|
||||
return 1;
|
||||
|
||||
if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
|
||||
if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
|
||||
|
||||
return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="general-status">
|
||||
<span
|
||||
:class="computedScheduledTrain.stopStatus"
|
||||
:class="computedScheduledTrain.status"
|
||||
:title="computedScheduledTrain.stopStatusDescription"
|
||||
>
|
||||
{{ computedScheduledTrain.stopStatusIndicator }}
|
||||
@@ -11,25 +11,21 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
import { ScheduledTrain, StopStatus } from '../../typings/common';
|
||||
|
||||
interface ScheduledTrainComp extends ScheduledTrain {
|
||||
stopStatusIndicator: string;
|
||||
stopStatusDescription: string;
|
||||
}
|
||||
import { StopStatus } from '../../typings/common';
|
||||
import { SceneryTimetableRow } from './typings';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
scheduledTrain: {
|
||||
type: Object as PropType<ScheduledTrain>,
|
||||
sceneryTimetableRow: {
|
||||
type: Object as PropType<SceneryTimetableRow>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedScheduledTrain(): ScheduledTrainComp {
|
||||
const { prevDepartureLine, prevStationName, stopStatus, nextArrivalLine, nextStationName } =
|
||||
this.scheduledTrain;
|
||||
computedScheduledTrain() {
|
||||
const { prevDepartureLine, prevStationName, nextArrivalLine, nextStationName, status } =
|
||||
this.sceneryTimetableRow;
|
||||
|
||||
const prevDepartureIndicator = prevDepartureLine
|
||||
? `(${prevDepartureLine}) ${prevStationName}`
|
||||
@@ -41,7 +37,7 @@ export default defineComponent({
|
||||
let stopStatusDescription = '',
|
||||
stopStatusIndicator = '';
|
||||
|
||||
switch (stopStatus) {
|
||||
switch (status) {
|
||||
case StopStatus.ARRIVING:
|
||||
stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
|
||||
stopStatusDescription = this.$t('timetables.desc-arriving', {
|
||||
@@ -56,7 +52,7 @@ export default defineComponent({
|
||||
? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
|
||||
: `${this.$t('timetables.desc-end')}`;
|
||||
stopStatusDescription = nextArrivalLine
|
||||
? this.$t(`timetables.desc-${stopStatus}`, { nextStationName, nextArrivalLine })
|
||||
? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
|
||||
: '';
|
||||
break;
|
||||
|
||||
@@ -85,7 +81,7 @@ export default defineComponent({
|
||||
break;
|
||||
}
|
||||
return {
|
||||
...this.scheduledTrain,
|
||||
...this.sceneryTimetableRow,
|
||||
stopStatusDescription,
|
||||
stopStatusIndicator
|
||||
};
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import { StopStatus, Train, TrainStop } from '../../typings/common';
|
||||
|
||||
export interface SceneryTimetableRow {
|
||||
checkpointStop: TrainStop;
|
||||
train: Train;
|
||||
prevDepartureLine: string | null;
|
||||
nextArrivalLine: string | null;
|
||||
departureLine: string | null;
|
||||
arrivingLine: string | null;
|
||||
prevStationName: string | null;
|
||||
nextStationName: string | null;
|
||||
status: StopStatus;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { StopStatus, TrainStop } from '../../typings/common';
|
||||
|
||||
export const stopStatusPriority = [
|
||||
StopStatus.ONLINE,
|
||||
StopStatus.STOPPED,
|
||||
StopStatus.DEPARTED,
|
||||
StopStatus.ARRIVING,
|
||||
StopStatus.DEPARTED_AWAY,
|
||||
StopStatus.TERMINATED
|
||||
];
|
||||
|
||||
export function getTrainStopStatus(
|
||||
stopInfo: TrainStop,
|
||||
currentStationName: string,
|
||||
sceneryName: string
|
||||
) {
|
||||
if (stopInfo.terminatesHere && stopInfo.confirmed) {
|
||||
return StopStatus.TERMINATED;
|
||||
}
|
||||
|
||||
if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
|
||||
return StopStatus.DEPARTED;
|
||||
}
|
||||
|
||||
if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
|
||||
return StopStatus.DEPARTED_AWAY;
|
||||
}
|
||||
|
||||
if (currentStationName == sceneryName && !stopInfo.stopped) {
|
||||
return StopStatus.ONLINE;
|
||||
}
|
||||
|
||||
if (currentStationName == sceneryName && stopInfo.stopped) {
|
||||
return StopStatus.STOPPED;
|
||||
}
|
||||
|
||||
if (currentStationName != sceneryName) {
|
||||
return StopStatus.ARRIVING;
|
||||
}
|
||||
|
||||
return StopStatus.ONLINE;
|
||||
}
|
||||
@@ -15,7 +15,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStationFiltersStore } from '../../store/stationFiltersStore';
|
||||
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
@@ -40,15 +39,9 @@ export default defineComponent({
|
||||
|
||||
emits: ['update:optionValue'],
|
||||
|
||||
setup() {
|
||||
return {
|
||||
filterStore: useStationFiltersStore()
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'option.value'() {
|
||||
this.filterStore.changeFilterValue(this.option.name, !this.option.value);
|
||||
// this.filterStore.changeFilterValue(this.option.name, !this.option.value);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -56,17 +49,17 @@ export default defineComponent({
|
||||
handleDbClick(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
this.filterStore.lastClickedFilterId = this.option.id;
|
||||
// this.filterStore.lastClickedFilterId = this.option.id;
|
||||
// this.option.value = true;
|
||||
this.$emit('update:optionValue', true);
|
||||
|
||||
this.filterStore.inputs.options
|
||||
.filter((option) => {
|
||||
return option.section == this.option.section && option.id != this.option.id;
|
||||
})
|
||||
.forEach((option) => {
|
||||
option.value = !this.option.value;
|
||||
});
|
||||
// this.filterStore.inputs.options
|
||||
// .filter((option) => {
|
||||
// return option.section == this.option.section && option.id != this.option.id;
|
||||
// })
|
||||
// .forEach((option) => {
|
||||
// option.value = !this.option.value;
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
|
||||
<div class="card_controls">
|
||||
<button class="btn--filled btn--image" @click="toggleCard">
|
||||
<button class="card-button btn--filled btn--image" @click="toggleCard">
|
||||
<img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
|
||||
[F] {{ $t('options.filters') }}
|
||||
<span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
|
||||
<p>[F] {{ $t('options.filters') }}</p>
|
||||
<span class="active-indicator" v-if="changedFilters.length != 0"></span>
|
||||
</button>
|
||||
|
||||
<label for="scenery-search">
|
||||
@@ -33,29 +33,44 @@
|
||||
<div class="card_title flex">{{ $t('filters.title') }}</div>
|
||||
<p class="card_info" v-html="$t('filters.desc')"></p>
|
||||
|
||||
<div class="changed-filters" v-if="changedFilters.length > 0">
|
||||
{{ $t('filters.changed-filters-count') }} <b>{{ changedFilters.length }}</b>
|
||||
</div>
|
||||
|
||||
<div class="changed-filters" v-else>{{ $t('filters.no-changed-filters') }}</div>
|
||||
|
||||
<section class="card_options">
|
||||
<div
|
||||
class="option-section"
|
||||
v-for="section in filterStore.inputs.optionSections"
|
||||
:key="section"
|
||||
v-for="(sectionFilters, sectionKey) in filtersSections"
|
||||
:key="sectionKey"
|
||||
>
|
||||
<h3 class="text--primary">
|
||||
{{ $t(`filters.sections.${section}`) }}
|
||||
|
||||
<button @click="filterStore.resetSectionOptions(section)">RESET</button>
|
||||
<span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
|
||||
{{ $t(`filters.sections.${sectionKey}`) }}
|
||||
<button @click="resetSectionFilters(sectionKey)">RESET</button>
|
||||
</h3>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="section-inputs">
|
||||
<FilterOption
|
||||
v-for="(option, i) in filterStore.inputs.options.filter(
|
||||
(o) => o.section == section
|
||||
)"
|
||||
v-model:optionValue="option.value"
|
||||
:option="option"
|
||||
:key="i"
|
||||
/>
|
||||
<div class="section-filters">
|
||||
<label
|
||||
v-for="filterKey in sectionFilters"
|
||||
@click="() => (filters[filterKey] = !filters[filterKey])"
|
||||
@dblclick="setSingleSectionFilter(sectionKey, filterKey)"
|
||||
:for="filterKey"
|
||||
>
|
||||
<input
|
||||
:checked="filters[filterKey]"
|
||||
v-model="filters[filterKey]"
|
||||
type="checkbox"
|
||||
:class="sectionKey"
|
||||
:name="filterKey"
|
||||
/>
|
||||
<span>
|
||||
{{ $t(`filters.${filterKey}`) }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -68,7 +83,7 @@
|
||||
<span>{{
|
||||
minimumHours == 0
|
||||
? $t('filters.now')
|
||||
: minimumHours < 8
|
||||
: minimumHours < 7
|
||||
? minimumHours + $t('filters.hour')
|
||||
: $t('filters.no-limit')
|
||||
}}</span>
|
||||
@@ -76,21 +91,21 @@
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<datalist id="authors">
|
||||
<option v-for="(author, i) in authors" :key="i" :value="author"></option>
|
||||
</datalist>
|
||||
|
||||
<section class="card_authors-search">
|
||||
<h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
|
||||
|
||||
<datalist id="authors" name="authors">
|
||||
<option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
|
||||
</datalist>
|
||||
|
||||
<form action="javascript:void(0);" @submit="handleAuthorsInput">
|
||||
<input
|
||||
type="text"
|
||||
id="author"
|
||||
list="authors"
|
||||
name="authors"
|
||||
v-model="authors"
|
||||
:placeholder="$t('filters.authors-placeholder')"
|
||||
v-model="authorsInputValue"
|
||||
@focus="preventKeyDown = true"
|
||||
@blur="preventKeyDown = false"
|
||||
/>
|
||||
@@ -100,19 +115,18 @@
|
||||
</section>
|
||||
|
||||
<section class="card_sliders">
|
||||
<div class="slider" v-for="(slider, i) in filterStore.inputs.sliders" :key="i">
|
||||
<div class="slider" v-for="(slider, i) in initSliders" :key="i">
|
||||
<input
|
||||
class="slider-input"
|
||||
type="range"
|
||||
:name="slider.name"
|
||||
:name="slider.id"
|
||||
:id="slider.id"
|
||||
:min="slider.minRange"
|
||||
:max="slider.maxRange"
|
||||
:step="slider.step"
|
||||
v-model="slider.value"
|
||||
@change="handleInput"
|
||||
v-model="filters[slider.id]"
|
||||
/>
|
||||
<span class="slider-value">{{ slider.value }}</span>
|
||||
<span class="slider-value">{{ filters[slider.id] }}</span>
|
||||
<div class="slider-content">
|
||||
{{ $t(`filters.sliders.${slider.id}`) }}
|
||||
</div>
|
||||
@@ -133,9 +147,9 @@
|
||||
|
||||
<button
|
||||
class="btn--action"
|
||||
:disabled="changedFilters.length == 0"
|
||||
:data-disabled="changedFilters.length == 0"
|
||||
@click="resetFilters"
|
||||
:disabled="filterStore.areFiltersAtDefault"
|
||||
:data-disabled="filterStore.areFiltersAtDefault"
|
||||
>
|
||||
[R] {{ $t('filters.reset') }}
|
||||
</button>
|
||||
@@ -151,22 +165,36 @@
|
||||
import { defineComponent, inject } from 'vue';
|
||||
import keyMixin from '../../mixins/keyMixin';
|
||||
import routerMixin from '../../mixins/routerMixin';
|
||||
import { useStationFiltersStore } from '../../store/stationFiltersStore';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
|
||||
import FilterOption from './FilterOption.vue';
|
||||
import StorageManager from '../../managers/storageManager';
|
||||
|
||||
import {
|
||||
filtersSections,
|
||||
initSliders,
|
||||
initFilters,
|
||||
getChangedFilters
|
||||
} from '../../managers/stationFilterManager';
|
||||
|
||||
import { StationFilterSection } from '../../managers/stationFilterManager';
|
||||
import { computed } from 'vue';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const STORAGE_KEY = 'options_saved';
|
||||
|
||||
export default defineComponent({
|
||||
components: { FilterOption },
|
||||
mixins: [keyMixin, routerMixin],
|
||||
|
||||
data: () => ({
|
||||
saveOptions: false,
|
||||
STORAGE_KEY: 'options_saved',
|
||||
|
||||
authorsInputValue: '',
|
||||
filtersSections,
|
||||
initSliders,
|
||||
|
||||
minimumHours: 0,
|
||||
authors: '',
|
||||
|
||||
currentRegion: { id: '', value: '' },
|
||||
|
||||
@@ -180,22 +208,33 @@ export default defineComponent({
|
||||
setup() {
|
||||
const isVisible = inject('isFilterCardVisible');
|
||||
const store = useMainStore();
|
||||
const filterStore = useStationFiltersStore();
|
||||
|
||||
const filters = inject('StationsView_filters') as Record<string, any>;
|
||||
|
||||
const changedFilters = computed(() => getChangedFilters(filters));
|
||||
|
||||
// Save filters to persistent storage
|
||||
watch(filters, (value) => {
|
||||
if (!StorageManager.isRegistered(STORAGE_KEY)) return;
|
||||
|
||||
Object.keys(value).forEach((filterKey) => {
|
||||
StorageManager.setValue(filterKey, filters[filterKey]);
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
isVisible,
|
||||
store,
|
||||
filterStore
|
||||
filters,
|
||||
changedFilters
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.saveOptions = StorageManager.isRegistered(this.STORAGE_KEY);
|
||||
this.saveOptions = StorageManager.isRegistered(STORAGE_KEY);
|
||||
|
||||
if (StorageManager.isRegistered('onlineFromHours') && this.saveOptions) {
|
||||
this.minimumHours = StorageManager.getNumericValue('onlineFromHours');
|
||||
|
||||
this.changeNumericFilterValue('onlineFromHours', this.minimumHours);
|
||||
}
|
||||
|
||||
this.currentRegion = this.store.region;
|
||||
@@ -214,7 +253,7 @@ export default defineComponent({
|
||||
return true;
|
||||
},
|
||||
|
||||
authors() {
|
||||
authorsHint() {
|
||||
return this.store.stationList
|
||||
.reduce((acc, station) => {
|
||||
station.generalInfo?.authors?.forEach((author) => {
|
||||
@@ -258,61 +297,63 @@ export default defineComponent({
|
||||
this.scrollTop = (e.target as HTMLElement).scrollTop;
|
||||
},
|
||||
|
||||
handleInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
|
||||
this.filterStore.changeFilterValue(target.name, target.value);
|
||||
|
||||
if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
|
||||
},
|
||||
|
||||
handleAuthorsInput() {
|
||||
this.filterStore.changeFilterValue('authors', this.authorsInputValue);
|
||||
|
||||
if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
|
||||
},
|
||||
|
||||
changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
|
||||
this.filterStore.changeFilterValue(name, value);
|
||||
if (this.saveOptions && saveToStorage) StorageManager.setNumericValue(name, value);
|
||||
this.filters['authors'] = this.authors;
|
||||
// if (this.saveOptions) StorageManager.setStringValue('authors', target.value);
|
||||
},
|
||||
|
||||
subHour() {
|
||||
this.minimumHours = this.minimumHours < 1 ? 8 : this.minimumHours - 1;
|
||||
|
||||
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
|
||||
this.minimumHours = this.minimumHours < 1 ? 7 : this.minimumHours - 1;
|
||||
this.filters['onlineFromHours'] = this.minimumHours;
|
||||
},
|
||||
|
||||
addHour() {
|
||||
this.minimumHours = this.minimumHours > 7 ? 0 : this.minimumHours + 1;
|
||||
|
||||
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
|
||||
this.minimumHours = this.minimumHours > 6 ? 0 : this.minimumHours + 1;
|
||||
this.filters['onlineFromHours'] = this.minimumHours;
|
||||
},
|
||||
|
||||
saveFilters() {
|
||||
this.saveOptions = !this.saveOptions;
|
||||
|
||||
if (!this.saveOptions) {
|
||||
StorageManager.unregisterStorage(this.STORAGE_KEY);
|
||||
StorageManager.unregisterStorage(STORAGE_KEY);
|
||||
return;
|
||||
}
|
||||
|
||||
StorageManager.registerStorage(this.STORAGE_KEY);
|
||||
StorageManager.registerStorage(STORAGE_KEY);
|
||||
|
||||
this.filterStore.inputs.options.forEach((option) =>
|
||||
StorageManager.setBooleanValue(option.name, !option.value)
|
||||
);
|
||||
this.filterStore.inputs.sliders.forEach((slider) =>
|
||||
StorageManager.setNumericValue(slider.name, slider.value)
|
||||
);
|
||||
Object.keys(this.filters).forEach((filterKey) => {
|
||||
StorageManager.setValue(filterKey, this.filters[filterKey]);
|
||||
});
|
||||
},
|
||||
|
||||
resetFilters() {
|
||||
this.authorsInputValue = '';
|
||||
|
||||
// Reset local model values
|
||||
this.minimumHours = 0;
|
||||
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);
|
||||
this.filterStore.resetFilters();
|
||||
this.authors = '';
|
||||
|
||||
// Reset global filters
|
||||
Object.keys(this.filters).forEach((filterKey) => {
|
||||
this.filters[filterKey] = (initFilters as any)[filterKey];
|
||||
});
|
||||
},
|
||||
|
||||
areSectionFiltersDefault(sectionKey: StationFilterSection) {
|
||||
return filtersSections[sectionKey].every((filterKey) => {
|
||||
return this.filters[filterKey] == initFilters[filterKey];
|
||||
});
|
||||
},
|
||||
|
||||
resetSectionFilters(sectionKey: StationFilterSection) {
|
||||
filtersSections[sectionKey].forEach((filterKey) => {
|
||||
this.filters[filterKey] = initFilters[filterKey];
|
||||
});
|
||||
},
|
||||
|
||||
setSingleSectionFilter(sectionKey: StationFilterSection, chosenKey: string) {
|
||||
filtersSections[sectionKey].forEach((filterKey) => {
|
||||
if (filterKey != chosenKey) this.filters[filterKey] = initFilters[filterKey];
|
||||
});
|
||||
},
|
||||
|
||||
closeCard() {
|
||||
@@ -327,9 +368,9 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/card.scss';
|
||||
@import '../../styles/animations.scss';
|
||||
@import '../../styles/responsive';
|
||||
@import '../../styles/card';
|
||||
@import '../../styles/animations';
|
||||
|
||||
h3.section-header {
|
||||
text-align: center;
|
||||
@@ -346,6 +387,11 @@ h3.section-header {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.changed-filters {
|
||||
background-color: #111;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.card_controls {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
@@ -374,28 +420,6 @@ h3.section-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card_regions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
label > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label > span {
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0 0.25em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background-color: gray;
|
||||
|
||||
&.checked {
|
||||
background-color: seagreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_timestamp {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -441,6 +465,52 @@ h3.section-header {
|
||||
}
|
||||
}
|
||||
|
||||
.section-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.section-filters > label {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0.25em;
|
||||
font-weight: bold;
|
||||
background-color: forestgreen;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background-color: #22aa22;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
&:checked + span {
|
||||
background-color: #444;
|
||||
|
||||
&:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible + span {
|
||||
outline: 1px solid $accentCol;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card_actions {
|
||||
padding: 0.5em;
|
||||
|
||||
@@ -475,35 +545,18 @@ h3.section-header {
|
||||
}
|
||||
}
|
||||
|
||||
.section-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.quick-actions div {
|
||||
display: flex;
|
||||
margin: 1em 0;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
|
||||
margin-bottom: 1em;
|
||||
|
||||
&-value {
|
||||
color: $accentCol;
|
||||
margin-right: 0.5em;
|
||||
padding: 0.1em 0.2em;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
&-input {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@@ -512,7 +565,6 @@ h3.section-header {
|
||||
outline: none;
|
||||
|
||||
min-width: 25%;
|
||||
max-width: 120px;
|
||||
|
||||
&:focus-visible ~ * {
|
||||
color: gold;
|
||||
@@ -582,4 +634,19 @@ h3.section-header {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
.card_controls > button.card-button > p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.slider {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
&-input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,55 @@
|
||||
<template>
|
||||
<div class="station-stats">
|
||||
<div class="separator" />
|
||||
<div>
|
||||
{{ $t('station-stats.u-factor') }}
|
||||
<a
|
||||
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
|
||||
target="_blank"
|
||||
:data-tooltip="$t('station-stats.u-factor-tooltip')"
|
||||
>(?)</a
|
||||
>:
|
||||
<b :style="calculateFactorStyle()">
|
||||
{{ uFactor.toFixed(2) }}
|
||||
</b>
|
||||
| {{ $t('station-stats.avg-timetable-count') }}
|
||||
<b>{{ avgTimetableCount.toFixed(2) }}</b>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('station-stats.single-track-count') }}
|
||||
<b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
|
||||
<b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }} |
|
||||
{{ $t('station-stats.double-track-count') }} <b>{{ trackCount.twoWayElectric }}</b>
|
||||
{{ $t('station-stats.electrified') }} / <b>{{ trackCount.twoWayOther }}</b>
|
||||
{{ $t('station-stats.not-electrified') }} | {{ $t('station-stats.open-spawns') }}
|
||||
<b>{{ spawnCount.passenger }}</b> - PAS / <b>{{ spawnCount.freight }}</b> - TOW /
|
||||
<b>{{ spawnCount.loco }}</b> - LUZ / <b>{{ spawnCount.all }}</b> - ALL
|
||||
|
||||
<div class="stats-row">
|
||||
<div>
|
||||
<span
|
||||
>{{ $t('station-stats.u-factor') }}
|
||||
<a
|
||||
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
|
||||
target="_blank"
|
||||
:data-tooltip="$t('station-stats.u-factor-tooltip')"
|
||||
>(?)</a
|
||||
>:
|
||||
</span>
|
||||
|
||||
<b class="u-factor" :style="calculateFactorStyle()">
|
||||
{{ uFactor.toFixed(2) }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
•
|
||||
{{ $t('station-stats.avg-timetable-count') }}
|
||||
<b>{{ avgTimetableCount.toFixed(2) }}</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
•
|
||||
{{ $t('station-stats.single-track-count') }}
|
||||
<b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
|
||||
</div>
|
||||
|
||||
<div>
|
||||
•
|
||||
{{ $t('station-stats.double-track-count') }}
|
||||
<b>{{ trackCount.twoWay }}</b>
|
||||
(<b>{{ trackCount.twoWayElectric }} ⚡</b>)
|
||||
</div>
|
||||
|
||||
<div>
|
||||
• {{ $t('station-stats.cross-sceneries') }} <b>{{ trackCount.crossTrack }}</b> (<b
|
||||
>{{ trackCount.crossTrackElectric }} ⚡</b
|
||||
>)
|
||||
</div>
|
||||
|
||||
<div>
|
||||
•
|
||||
{{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
|
||||
<b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
|
||||
<b>{{ spawnCount.all }}</b> - ALL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -64,17 +90,18 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
avgTimetableCount() {
|
||||
const scheduledTrainsTotal = this.mainStore.activeSceneryList.reduce<number>((acc, sc) => {
|
||||
if (sc.region != this.mainStore.region.id) return acc;
|
||||
const regionSceneries = this.mainStore.activeSceneryList.filter((sc) => {
|
||||
return sc.region == this.mainStore.region.id;
|
||||
});
|
||||
|
||||
const timetableCountSum = regionSceneries.reduce((acc, sc) => {
|
||||
acc += sc.scheduledTrainCount.all;
|
||||
|
||||
return acc;
|
||||
}, 0);
|
||||
|
||||
return this.mainStore.activeSceneryList.length != 0
|
||||
? scheduledTrainsTotal / this.mainStore.activeSceneryList.length
|
||||
: 0;
|
||||
if (regionSceneries.length == 0) return 0;
|
||||
|
||||
return timetableCountSum / regionSceneries.length;
|
||||
},
|
||||
|
||||
trackCount() {
|
||||
@@ -87,23 +114,46 @@ export default defineComponent({
|
||||
)
|
||||
.reduce(
|
||||
(acc, st) => {
|
||||
[...st.generalInfo!.routes.single, ...st.generalInfo!.routes.double].forEach((r) => {
|
||||
const { routes } = st.generalInfo!;
|
||||
|
||||
if (
|
||||
routes.single.filter((r) => !r.isInternal).length > 0 &&
|
||||
routes.double.filter((r) => !r.isInternal).length > 0
|
||||
) {
|
||||
acc.crossTrack++;
|
||||
|
||||
if (
|
||||
routes.single.some((r) => r.isElectric) &&
|
||||
routes.double.some((r) => r.isElectric)
|
||||
)
|
||||
acc.crossTrackElectric++;
|
||||
}
|
||||
|
||||
[...routes.single, ...routes.double].forEach((r) => {
|
||||
if (r.isInternal) return;
|
||||
|
||||
const keyName: keyof typeof acc = `${r.routeTracks == 2 ? 'twoWay' : 'oneWay'}${r.isElectric ? 'Electric' : 'Other'}`;
|
||||
|
||||
acc[keyName] += 1;
|
||||
acc[r.routeTracks == 2 ? 'twoWay' : 'oneWay'] += 1;
|
||||
if (r.isElectric) acc[r.routeTracks == 2 ? 'twoWayElectric' : 'oneWayElectric'] += 1;
|
||||
});
|
||||
|
||||
return acc;
|
||||
},
|
||||
{ oneWayElectric: 0, oneWayOther: 0, twoWayElectric: 0, twoWayOther: 0 }
|
||||
{
|
||||
oneWay: 0,
|
||||
oneWayElectric: 0,
|
||||
twoWay: 0,
|
||||
twoWayElectric: 0,
|
||||
crossTrack: 0,
|
||||
crossTrackElectric: 0
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
spawnCount() {
|
||||
return this.mainStore.activeSceneryList.reduce(
|
||||
(acc, scenery) => {
|
||||
if (scenery.region != this.mainStore.region.id) return acc;
|
||||
|
||||
scenery.spawns.forEach((spawn) => {
|
||||
if (/EZT|POS|OSOB/i.test(spawn.spawnName)) acc['passenger'] += 1;
|
||||
if (/TOW/i.test(spawn.spawnName)) acc['freight'] += 1;
|
||||
@@ -133,19 +183,30 @@ export default defineComponent({
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
[data-factor-low='true'] {
|
||||
color: #ddd;
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
text-wrap: pretty;
|
||||
gap: 0.25em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
[data-factor-mediocre='true'] {
|
||||
color: lightgreen;
|
||||
}
|
||||
.u-factor {
|
||||
[data-factor-low='true'] {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
[data-factor-high='true'] {
|
||||
color: greenyellow;
|
||||
}
|
||||
[data-factor-mediocre='true'] {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
[data-factor-highest='true'] {
|
||||
color: rgb(22, 245, 22);
|
||||
[data-factor-high='true'] {
|
||||
color: greenyellow;
|
||||
}
|
||||
|
||||
[data-factor-highest='true'] {
|
||||
color: rgb(22, 245, 22);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<section class="station_table">
|
||||
<Loading
|
||||
v-if="apiStore.dataStatuses.connection == Status.Loading && displayedStations.length == 0"
|
||||
v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
|
||||
/>
|
||||
|
||||
<div class="table_wrapper" v-else-if="displayedStations.length > 0">
|
||||
<div class="table_wrapper" v-else-if="filteredStationList.length > 0">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -20,8 +20,8 @@
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.headerName == headerName"
|
||||
:src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
|
||||
v-if="activeSorter.headerName == headerName"
|
||||
:src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
|
||||
alt="sort icon"
|
||||
/>
|
||||
</span>
|
||||
@@ -43,8 +43,8 @@
|
||||
|
||||
<img
|
||||
class="sort-icon"
|
||||
v-if="sorterActive.headerName == headerName"
|
||||
:src="`/images/icon-arrow-${sorterActive.dir == 1 ? 'asc' : 'desc'}.svg`"
|
||||
v-if="activeSorter.headerName == headerName"
|
||||
:src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
|
||||
alt="sort icon"
|
||||
/>
|
||||
</span>
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="station in displayedStations"
|
||||
v-for="station in filteredStationList"
|
||||
:class="{ 'last-selected': lastSelectedStationName == station.name }"
|
||||
:key="station.name"
|
||||
@click.left="setScenery(station.name)"
|
||||
@@ -122,7 +122,7 @@
|
||||
<span v-if="station.onlineInfo?.dispatcherName">
|
||||
<b
|
||||
v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
|
||||
@click.stop="openDonationModal"
|
||||
@click.stop="openDonationCard"
|
||||
data-tooltip-type="DonatorTooltip"
|
||||
:data-tooltip-content="$t('donations.dispatcher-message')"
|
||||
>
|
||||
@@ -302,65 +302,73 @@
|
||||
</div>
|
||||
|
||||
<div class="no-stations" v-else>
|
||||
{{ $t('sceneries.no-stations') }} (region: <b>{{ mainStore.region.name }}</b
|
||||
>)
|
||||
<div>
|
||||
{{ $t('sceneries.no-stations') }} (region: <b>{{ mainStore.region.name }}</b
|
||||
>)
|
||||
</div>
|
||||
|
||||
<div class="text--primary" v-if="getChangedFilters(filters).length != 0">
|
||||
⚠ {{ $t('sceneries.active-filters') }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, inject, computed } from 'vue';
|
||||
import StationStatusBadge from '../Global/StationStatusBadge.vue';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
import styleMixin from '../../mixins/styleMixin';
|
||||
import { useStationFiltersStore } from '../../store/stationFiltersStore';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationHeaderNames';
|
||||
import StationStatusBadge from '../Global/StationStatusBadge.vue';
|
||||
import { Station, Status } from '../../typings/common';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
import { useMainStore } from '../../store/mainStore';
|
||||
import { Status } from '../../typings/common';
|
||||
import { useTooltipStore } from '../../store/tooltipStore';
|
||||
import { getChangedFilters } from '../../managers/stationFilterManager';
|
||||
import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
|
||||
import { filterStations, sortStations } from './utils';
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['toggleDonationModal'],
|
||||
emits: ['toggleDonationCard'],
|
||||
|
||||
components: { Loading, StationStatusBadge },
|
||||
mixins: [styleMixin, dateMixin],
|
||||
|
||||
data: () => ({
|
||||
headIconsIds,
|
||||
headIds,
|
||||
lastSelectedStationName: ''
|
||||
lastSelectedStationName: '',
|
||||
getChangedFilters
|
||||
}),
|
||||
|
||||
computed: {
|
||||
sorterActive() {
|
||||
return this.stationFiltersStore.sorterActive;
|
||||
},
|
||||
|
||||
displayedStations() {
|
||||
return this.stationFiltersStore.filteredStationList;
|
||||
}
|
||||
},
|
||||
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const apiStore = useApiStore();
|
||||
const tooltipStore = useTooltipStore();
|
||||
|
||||
const stationFiltersStore = useStationFiltersStore();
|
||||
const filters = inject('StationsView_filters') as Record<string, any>;
|
||||
const activeSorter = inject('StationsView_activeSorter') as ActiveSorter;
|
||||
|
||||
const filteredStationList = computed(() =>
|
||||
mainStore.allStationInfo
|
||||
.filter((station) => filterStations(station, filters))
|
||||
.sort((a, b) => sortStations(a, b, activeSorter))
|
||||
);
|
||||
|
||||
return {
|
||||
Status: Status.Data,
|
||||
stationFiltersStore,
|
||||
mainStore,
|
||||
apiStore,
|
||||
tooltipStore
|
||||
tooltipStore,
|
||||
filters,
|
||||
filteredStationList,
|
||||
activeSorter
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setScenery(name: string) {
|
||||
const station = this.displayedStations.find((station) => station.name === name);
|
||||
const station = this.filteredStationList.find((station) => station.name === name);
|
||||
|
||||
if (!station) return;
|
||||
|
||||
@@ -376,8 +384,8 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
|
||||
openDonationModal(e: Event) {
|
||||
this.$emit('toggleDonationModal', true);
|
||||
openDonationCard(e: Event) {
|
||||
this.$emit('toggleDonationCard', true);
|
||||
this.mainStore.modalLastClickedTarget = e.target;
|
||||
this.tooltipStore.hide();
|
||||
},
|
||||
@@ -388,10 +396,14 @@ export default defineComponent({
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
|
||||
changeSorter(headerName: HeadIdsTypes) {
|
||||
changeSorter(headerName: HeadIdsType) {
|
||||
if (headerName == 'general') return;
|
||||
|
||||
this.stationFiltersStore.changeSorter(headerName);
|
||||
if (headerName == this.activeSorter.headerName)
|
||||
this.activeSorter.dir = -1 * this.activeSorter.dir;
|
||||
else this.activeSorter.dir = 1;
|
||||
|
||||
this.activeSorter.headerName = headerName;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -406,18 +418,17 @@ $rowCol: #424242;
|
||||
|
||||
.station_table {
|
||||
height: 80vh;
|
||||
min-height: 550px;
|
||||
min-height: 700px;
|
||||
overflow: auto;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.no-stations {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
|
||||
font-size: 1.25em;
|
||||
padding: 1em;
|
||||
|
||||
background: #1a1a1a;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
|
||||
@@ -5,54 +5,29 @@ export interface FilterOption {
|
||||
defaultValue: boolean;
|
||||
}
|
||||
|
||||
export interface Filter {
|
||||
[key: string]: boolean | number | string;
|
||||
default: boolean;
|
||||
notDefault: boolean;
|
||||
real: boolean;
|
||||
fictional: boolean;
|
||||
SPK: boolean;
|
||||
SCS: boolean;
|
||||
SPE: boolean;
|
||||
SUP: boolean;
|
||||
noSUP: boolean;
|
||||
ASDEK: boolean;
|
||||
noASDEK: boolean;
|
||||
ręczne: boolean;
|
||||
'ręczne+SPK': boolean;
|
||||
'ręczne+SCS': boolean;
|
||||
mechaniczne: boolean;
|
||||
'mechaniczne+SPK': boolean;
|
||||
'mechaniczne+SCS': boolean;
|
||||
SBL: boolean;
|
||||
PBL: boolean;
|
||||
współczesna: boolean;
|
||||
kształtowa: boolean;
|
||||
historyczna: boolean;
|
||||
mieszana: boolean;
|
||||
minLevel: number;
|
||||
maxLevel: number;
|
||||
minOneWayCatenary: number;
|
||||
minOneWay: number;
|
||||
minTwoWayCatenary: number;
|
||||
minTwoWay: number;
|
||||
minVmax: number;
|
||||
maxVmax: number;
|
||||
'no-1track': boolean;
|
||||
'no-2track': boolean;
|
||||
'include-selected': boolean;
|
||||
free: boolean;
|
||||
occupied: boolean;
|
||||
nonPublic: boolean;
|
||||
unavailable: boolean;
|
||||
abandoned: boolean;
|
||||
endingStatus: boolean;
|
||||
afkStatus: boolean;
|
||||
noSpaceStatus: boolean;
|
||||
unavailableStatus: boolean;
|
||||
unsignedStatus: boolean;
|
||||
authors: string;
|
||||
onlineFromHours: number;
|
||||
withActiveTimetables: boolean;
|
||||
withoutActiveTimetables: boolean;
|
||||
export const headIds = [
|
||||
'station',
|
||||
'min-lvl',
|
||||
'status',
|
||||
'dispatcher',
|
||||
'dispatcher-lvl',
|
||||
'routes-single',
|
||||
'routes-double',
|
||||
'general'
|
||||
] as const;
|
||||
|
||||
export const headIconsIds = [
|
||||
'user',
|
||||
'like',
|
||||
'spawn',
|
||||
'timetableAll',
|
||||
'timetableUnconfirmed',
|
||||
'timetableConfirmed'
|
||||
] as const;
|
||||
|
||||
export type HeadIdsType = (typeof headIds)[number] | (typeof headIconsIds)[number];
|
||||
|
||||
export interface ActiveSorter {
|
||||
headerName: HeadIdsType;
|
||||
dir: number;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,275 @@
|
||||
import { ActiveSorter } from '../../components/StationsView/typings';
|
||||
import { ActiveScenery, StationGeneralInfo, Status } from '../../typings/common';
|
||||
import { Station } from '../../typings/common';
|
||||
|
||||
const dispatcherStatusPriority = [
|
||||
Status.ActiveDispatcher.UNKNOWN,
|
||||
Status.ActiveDispatcher.INVALID,
|
||||
Status.ActiveDispatcher.NOT_LOGGED_IN,
|
||||
Status.ActiveDispatcher.UNAVAILABLE,
|
||||
Status.ActiveDispatcher.AFK,
|
||||
Status.ActiveDispatcher.ENDING,
|
||||
Status.ActiveDispatcher.NO_SPACE,
|
||||
undefined
|
||||
];
|
||||
|
||||
const filtersAssociations: Record<string, string> = {
|
||||
mechaniczne: 'mechanical',
|
||||
ręczne: 'manual',
|
||||
'mechaniczne+SPK': 'SPK-M',
|
||||
'ręczne+SPK': 'SPK-R',
|
||||
'mechaniczne+SCS': 'SCS-M',
|
||||
'ręczne+SCS': 'SCS-R',
|
||||
współczesna: 'modern',
|
||||
historyczna: 'historical',
|
||||
kształtowa: 'semaphores',
|
||||
mieszana: 'mixed'
|
||||
};
|
||||
|
||||
function filterStatusSection(
|
||||
filters: Record<string, any>,
|
||||
{ dispatcherStatus, dispatcherTimestamp }: ActiveScenery
|
||||
) {
|
||||
return (
|
||||
(filters['endingStatus'] && dispatcherStatus == Status.ActiveDispatcher.ENDING) ||
|
||||
(filters['unavailableStatus'] &&
|
||||
(dispatcherStatus == Status.ActiveDispatcher.UNAVAILABLE ||
|
||||
dispatcherStatus == Status.ActiveDispatcher.NOT_LOGGED_IN)) ||
|
||||
(filters['afkStatus'] && dispatcherStatus == Status.ActiveDispatcher.AFK) ||
|
||||
(filters['noSpaceStatus'] && dispatcherStatus == Status.ActiveDispatcher.NO_SPACE) ||
|
||||
(filters['occupied'] && dispatcherStatus != Status.ActiveDispatcher.FREE) ||
|
||||
(filters['onlineFromHours'] > 0 &&
|
||||
(dispatcherTimestamp ?? 0) <= Date.now() + filters['onlineFromHours'] * 3600000)
|
||||
);
|
||||
}
|
||||
|
||||
function filterTimetablesSection(filters: Record<string, any>, station: Station) {
|
||||
return (
|
||||
(filters['withoutActiveTimetables'] &&
|
||||
(!station.onlineInfo || station.onlineInfo.scheduledTrainCount.all == 0)) ||
|
||||
(filters['withActiveTimetables'] &&
|
||||
station.onlineInfo &&
|
||||
(station.onlineInfo.scheduledTrainCount.all != 0 ||
|
||||
station.onlineInfo.dispatcherStatus == Status.ActiveDispatcher.FREE))
|
||||
);
|
||||
}
|
||||
|
||||
function filterAccessibilitySection(filters: Record<string, any>, station: Station) {
|
||||
if (
|
||||
filters['nonPublic'] &&
|
||||
(!station.generalInfo || station.generalInfo.availability == 'nonPublic')
|
||||
)
|
||||
return true;
|
||||
|
||||
if (!station.generalInfo) return false;
|
||||
|
||||
const { availability } = station.generalInfo;
|
||||
|
||||
return (
|
||||
(filters['unavailable'] && availability == 'unavailable' && !station.onlineInfo) ||
|
||||
(filters['abandoned'] && availability == 'abandoned' && !station.onlineInfo) ||
|
||||
(filters['default'] && availability == 'default') ||
|
||||
(filters['notDefault'] &&
|
||||
availability != 'default' &&
|
||||
availability != 'abandoned' &&
|
||||
availability != 'unavailable')
|
||||
);
|
||||
}
|
||||
|
||||
function filterRealitySection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
return (filters['real'] && generalInfo.lines) || (filters['fictional'] && !generalInfo.lines);
|
||||
}
|
||||
|
||||
function filterProgramsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
return (
|
||||
(filters['SUP'] && generalInfo.SUP) ||
|
||||
(filters['noSUP'] && !generalInfo.SUP) ||
|
||||
(filters['ASDEK'] && generalInfo.ASDEK) ||
|
||||
(filters['noASDEK'] && !generalInfo.ASDEK)
|
||||
);
|
||||
}
|
||||
|
||||
function filterControlsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
return (
|
||||
filters[generalInfo.controlType] == true ||
|
||||
filters[filtersAssociations[generalInfo.controlType]] == true
|
||||
);
|
||||
}
|
||||
|
||||
function filterSignalsSection(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
return (
|
||||
filters[generalInfo.signalType] == true ||
|
||||
filters[filtersAssociations[generalInfo.signalType]] == true ||
|
||||
(filters['SBL'] && generalInfo.routes.sblNames.length > 0) ||
|
||||
(filters['PBL'] && generalInfo.routes.sblNames.length == 0)
|
||||
);
|
||||
}
|
||||
|
||||
function filterStationType(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
const singleTracks = generalInfo.routes.single.filter((r) => !r.isInternal);
|
||||
const doubleTracks = generalInfo.routes.double.filter((r) => !r.isInternal);
|
||||
|
||||
let isJunction = singleTracks.length > 0 && doubleTracks.length > 0;
|
||||
|
||||
return (filters['junction'] && isJunction) || (filters['nonJunction'] && !isJunction);
|
||||
}
|
||||
|
||||
function filterSliderValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
const { availability, reqLevel, routes } = generalInfo;
|
||||
|
||||
const otherAvailability =
|
||||
availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
|
||||
|
||||
return (
|
||||
filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
|
||||
filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
|
||||
filters['minVmax'] > routes.maxRouteSpeed ||
|
||||
filters['maxVmax'] < routes.minRouteSpeed ||
|
||||
(filters['no-1track'] && routes.single.length != 0) ||
|
||||
(filters['no-2track'] && routes.double.length != 0) ||
|
||||
filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
|
||||
filters['minOneWay'] > routes.singleOtherNames.length ||
|
||||
filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
|
||||
filters['minTwoWay'] > routes.doubleOtherNames.length
|
||||
);
|
||||
}
|
||||
|
||||
function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
|
||||
return (
|
||||
filters['authors'].length > 3 &&
|
||||
!generalInfo.authors
|
||||
?.map((a) => a.toLocaleLowerCase())
|
||||
.includes(filters['authors'].toLocaleLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
|
||||
let diff = 0;
|
||||
|
||||
switch (sorter.headerName) {
|
||||
case 'station':
|
||||
return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
|
||||
|
||||
case 'min-lvl':
|
||||
diff = (a.generalInfo?.reqLevel || 0) - (b.generalInfo?.reqLevel || 0);
|
||||
break;
|
||||
|
||||
case 'status':
|
||||
diff =
|
||||
(a.onlineInfo?.dispatcherTimestamp ??
|
||||
dispatcherStatusPriority.indexOf(a.onlineInfo?.dispatcherStatus)) -
|
||||
(b.onlineInfo?.dispatcherTimestamp ??
|
||||
dispatcherStatusPriority.indexOf(b.onlineInfo?.dispatcherStatus));
|
||||
break;
|
||||
|
||||
case 'dispatcher':
|
||||
if (
|
||||
(a.onlineInfo?.dispatcherName.toLowerCase() || '') >
|
||||
(b.onlineInfo?.dispatcherName.toLowerCase() || '')
|
||||
)
|
||||
return sorter.dir;
|
||||
if (
|
||||
(a.onlineInfo?.dispatcherName.toLowerCase() || '') <
|
||||
(b.onlineInfo?.dispatcherName.toLowerCase() || '')
|
||||
)
|
||||
return -sorter.dir;
|
||||
break;
|
||||
|
||||
case 'dispatcher-lvl':
|
||||
diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
|
||||
break;
|
||||
|
||||
case 'routes-single':
|
||||
diff =
|
||||
(a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
|
||||
(b.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
|
||||
break;
|
||||
|
||||
case 'routes-double':
|
||||
diff =
|
||||
(a.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
|
||||
(b.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
|
||||
break;
|
||||
|
||||
case 'user':
|
||||
diff =
|
||||
(b.onlineInfo?.stationTrains ? b.onlineInfo.stationTrains.length : -1) -
|
||||
(a.onlineInfo?.stationTrains ? a.onlineInfo.stationTrains.length : -1);
|
||||
break;
|
||||
|
||||
case 'like':
|
||||
diff =
|
||||
(a.onlineInfo ? a.onlineInfo.dispatcherRate : -Infinity) -
|
||||
(b.onlineInfo ? b.onlineInfo.dispatcherRate : -Infinity);
|
||||
break;
|
||||
|
||||
case 'spawn':
|
||||
diff =
|
||||
(a.onlineInfo ? a.onlineInfo.spawns.length : -1) -
|
||||
(b.onlineInfo ? b.onlineInfo.spawns.length : -1);
|
||||
break;
|
||||
|
||||
case 'timetableConfirmed':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.confirmed ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.confirmed ?? -1);
|
||||
break;
|
||||
|
||||
case 'timetableUnconfirmed':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1);
|
||||
break;
|
||||
|
||||
case 'timetableAll':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.all ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.all ?? -1);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (diff != 0) return Math.sign(diff) * sorter.dir;
|
||||
return a.name.localeCompare(b.name);
|
||||
};
|
||||
|
||||
export const filterStations = (station: Station, filters: Record<string, any>) => {
|
||||
if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
|
||||
return false;
|
||||
|
||||
// Scenery Timetables section
|
||||
if (filterTimetablesSection(filters, station)) return false;
|
||||
|
||||
// Scenery Accessibility section
|
||||
if (filterAccessibilitySection(filters, station)) return false;
|
||||
|
||||
// Scenery Status section
|
||||
if (station.onlineInfo && filterStatusSection(filters, station.onlineInfo)) return false;
|
||||
|
||||
if (station.generalInfo) {
|
||||
// Scenery Reality section
|
||||
if (filterRealitySection(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery Additional Programs section
|
||||
if (filterProgramsSection(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery Controls section
|
||||
if (filterControlsSection(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery Signalling section(s)
|
||||
if (filterSignalsSection(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery Station Type section
|
||||
if (filterStationType(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery sliders
|
||||
if (filterSliderValues(filters, station.generalInfo)) return false;
|
||||
|
||||
// Scenery Authors section
|
||||
if (filterInputValues(filters, station.generalInfo)) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
@@ -10,7 +10,7 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useTooltipStore } from '../../store/tooltipStore';
|
||||
import { StationTrain } from '../../typings/common';
|
||||
import { Train } from '../../typings/common';
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
@@ -23,7 +23,7 @@ export default defineComponent({
|
||||
trains() {
|
||||
if (this.tooltipStore.content == '') return [];
|
||||
|
||||
const parsedTrains = JSON.parse(this.tooltipStore.content) as StationTrain[];
|
||||
const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
|
||||
return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default defineComponent({
|
||||
|
||||
computed: {
|
||||
chosenTrain() {
|
||||
return this.store.trainList.find((train) => train.trainId == this.store.chosenModalTrainId);
|
||||
return this.store.trainList.find((train) => train.id == this.store.chosenModalTrainId);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -40,20 +40,6 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/card.scss';
|
||||
|
||||
.top-info-bar-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.train-modal {
|
||||
position: fixed;
|
||||
|
||||
@@ -81,7 +81,6 @@
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<div></div>
|
||||
<button class="btn--action" @click="resetAllFilters">
|
||||
{{ $t('options.filter-reset') }}
|
||||
</button>
|
||||
@@ -223,9 +222,6 @@ export default defineComponent({
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
> * {
|
||||
|
||||
@@ -8,17 +8,18 @@
|
||||
<Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
|
||||
|
||||
<div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
|
||||
{{ $t('trains.no-trains') }}
|
||||
{{ $t('trains.no-trains') }} (region: <b>{{ store.region.name }}</b
|
||||
>)
|
||||
</div>
|
||||
|
||||
<transition-group name="list-anim" tag="ul">
|
||||
<li
|
||||
class="train-row"
|
||||
v-for="train in trains"
|
||||
:key="train.trainId"
|
||||
:key="train.id"
|
||||
tabindex="0"
|
||||
@click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
@click.stop="selectModalTrain(train.id, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.id, $event.currentTarget)"
|
||||
>
|
||||
<TrainInfo :train="train" :extended="false" />
|
||||
</li>
|
||||
@@ -108,8 +109,7 @@ export default defineComponent({
|
||||
text-align: center;
|
||||
|
||||
padding: 1em 0;
|
||||
|
||||
font-size: 1.5em;
|
||||
font-size: 1.25em;
|
||||
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
"timetables",
|
||||
"reality",
|
||||
"package-access",
|
||||
"station-type",
|
||||
"access",
|
||||
"control",
|
||||
"blockades",
|
||||
@@ -61,6 +62,20 @@
|
||||
"value": false,
|
||||
"defaultValue": false
|
||||
},
|
||||
{
|
||||
"id": "junction",
|
||||
"name": "junction",
|
||||
"section": "station-type",
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"id": "nonJunction",
|
||||
"name": "nonJunction",
|
||||
"section": "station-type",
|
||||
"value": true,
|
||||
"defaultValue": true
|
||||
},
|
||||
{
|
||||
"id": "SPK",
|
||||
"name": "SPK",
|
||||
|
||||
+24
-18
@@ -174,8 +174,9 @@
|
||||
|
||||
"sections": {
|
||||
"quick": "QUICK FILTERS",
|
||||
"stationType": "STATION TYPE",
|
||||
"reality": "SCENERY REALITY",
|
||||
"package-access": "IN-GAME AVAILABILITY",
|
||||
"packageAccess": "IN-GAME AVAILABILITY",
|
||||
"access": "GENERAL AVAILABILITY",
|
||||
"control": "CONTROLS",
|
||||
"signals": "SIGNALLING",
|
||||
@@ -186,6 +187,9 @@
|
||||
"spawns": "OPEN SPAWNS"
|
||||
},
|
||||
|
||||
"changed-filters-count": "Changed filters:",
|
||||
"no-changed-filters": "No changed filters",
|
||||
|
||||
"all-available": "ALL AVAILABLE",
|
||||
"all-free": "CURRENTLY FREE",
|
||||
|
||||
@@ -196,11 +200,11 @@
|
||||
|
||||
"title": "STATION FILTERS",
|
||||
"default": "IN-GAME",
|
||||
"not-default": "ADDITIONAL",
|
||||
"notDefault": "ADDITIONAL",
|
||||
"real": "REAL",
|
||||
"fictional": "FICTIONAL",
|
||||
"unavailable": "UNSUPPORTED",
|
||||
"non-public": "NON-PUBLIC",
|
||||
"nonPublic": "NON-PUBLIC",
|
||||
"abandoned": "ABANDONED",
|
||||
|
||||
"SPK": "SPK",
|
||||
@@ -210,7 +214,6 @@
|
||||
"SCS-R": "SCS + MANUAL",
|
||||
"SCS-M": "SCS + MECH.",
|
||||
"SPE": "SPE",
|
||||
|
||||
"manual": "MANUAL",
|
||||
"mechanical": "MECHANICAL",
|
||||
|
||||
@@ -233,15 +236,18 @@
|
||||
"withActiveTimetables": "ACTIVE",
|
||||
"withoutActiveTimetables": "NO ACTIVE",
|
||||
|
||||
"junction": "JUNCTIONS",
|
||||
"nonJunction": "OTHER",
|
||||
|
||||
"sliders": {
|
||||
"min-lvl": "MIN. REQUIRED DISPATCHER LEVEL",
|
||||
"max-lvl": "MAX. REQUIRED DISPATCHER LEVEL",
|
||||
"min-vmax": "MIN. SCENERY ROUTE SPEED",
|
||||
"max-vmax": "MAX. SCENERY ROUTE SPEED",
|
||||
"routes-1t-cat": "MIN. CATENARY SINGLE TRACK ROUTES",
|
||||
"routes-1t-other": "MIN. OTHER SINGLE TRACK ROUTES",
|
||||
"routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
|
||||
"routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
|
||||
"minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
|
||||
"maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
|
||||
"minVmax": "MIN. SCENERY ROUTE SPEED",
|
||||
"maxVmax": "MAX. SCENERY ROUTE SPEED",
|
||||
"minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
|
||||
"minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
|
||||
"minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
|
||||
"minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES"
|
||||
},
|
||||
|
||||
"authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
|
||||
@@ -294,16 +300,16 @@
|
||||
"single-track-routes-other": "Not electrified single-track routes count: "
|
||||
},
|
||||
"no-stations": "No stations to show here!",
|
||||
"scenery-search": "Search for scenery..."
|
||||
"scenery-search": "Search for scenery...",
|
||||
"active-filters": "Attention! You got active filters!"
|
||||
},
|
||||
"station-stats": {
|
||||
"u-factor": "U-factor",
|
||||
"u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
|
||||
"avg-timetable-count": "Average timetable count for one dispatcher:",
|
||||
"single-track-count": "Available single track routes:",
|
||||
"double-track-count": "Available double track routes:",
|
||||
"electrified": "(electrified)",
|
||||
"not-electrified": "(not electr.)",
|
||||
"avg-timetable-count": "Average count of scenery timetables:",
|
||||
"single-track-count": "Single track routes:",
|
||||
"double-track-count": "Double track routes:",
|
||||
"cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
|
||||
"open-spawns": "Open spawns:"
|
||||
},
|
||||
"trains": {
|
||||
|
||||
+26
-19
@@ -108,8 +108,8 @@
|
||||
"filters": "FILTRY",
|
||||
"donate": "WESPRZYJ",
|
||||
|
||||
"search-button": "Szukaj",
|
||||
"reset-button": "Zresetuj",
|
||||
"search-button": "SZUKAJ",
|
||||
"reset-button": "ZRESETUJ",
|
||||
|
||||
"sort-title": "SORTUJ WG:",
|
||||
"filter-title": "FILTRUJ WG:",
|
||||
@@ -171,8 +171,9 @@
|
||||
|
||||
"sections": {
|
||||
"quick": "SZYBKIE FILTRY",
|
||||
"stationType": "RODZAJ STACJI",
|
||||
"reality": "FIKCYJNOŚĆ SCENERII",
|
||||
"package-access": "DOSTĘPNOŚĆ W PACZCE",
|
||||
"packageAccess": "DOSTĘPNOŚĆ W PACZCE",
|
||||
"access": "DOSTĘPNOŚĆ OGÓLNA",
|
||||
"control": "TYP STEROWANIA",
|
||||
"signals": "TYP SYGNALIZACJI",
|
||||
@@ -183,6 +184,9 @@
|
||||
"spawns": "OTWARTE SPAWNY"
|
||||
},
|
||||
|
||||
"changed-filters-count": "Zmienione filtry:",
|
||||
"no-changed-filters": "Brak zmienionych filtrów",
|
||||
|
||||
"all-available": "WSZYSTKIE DOSTĘPNE",
|
||||
"all-free": "WSZYSTKIE WOLNE",
|
||||
|
||||
@@ -193,11 +197,11 @@
|
||||
|
||||
"title": "FILTRUJ STACJE",
|
||||
"default": "DOMYŚLNA",
|
||||
"not-default": "POZA PACZKĄ",
|
||||
"notDefault": "POZA PACZKĄ",
|
||||
"real": "REALNA",
|
||||
"fictional": "FIKCYJNA",
|
||||
"unavailable": "NIEDOSTĘPNA",
|
||||
"non-public": "NIEPUBLICZNA",
|
||||
"nonPublic": "NIEPUBLICZNA",
|
||||
"abandoned": "WYCOFANA",
|
||||
|
||||
"SPK": "SPK",
|
||||
@@ -229,15 +233,18 @@
|
||||
"withActiveTimetables": "AKTYWNE",
|
||||
"withoutActiveTimetables": "BEZ AKTYWNYCH",
|
||||
|
||||
"junction": "WĘZŁOWE",
|
||||
"nonJunction": "INNE",
|
||||
|
||||
"sliders": {
|
||||
"min-lvl": "MIN. WYMAGANY POZIOM DYŻURNEGO",
|
||||
"max-lvl": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
|
||||
"min-vmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
|
||||
"max-vmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
|
||||
"routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
|
||||
"routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
|
||||
"routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
|
||||
"routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
"minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
|
||||
"maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
|
||||
"minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
|
||||
"maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
|
||||
"minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
|
||||
"minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
|
||||
"minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
|
||||
"minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
|
||||
},
|
||||
|
||||
"authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):",
|
||||
@@ -287,16 +294,16 @@
|
||||
"single-track-routes-other": "Liczba niezelektryfikowanych szlaków jednotorowych: "
|
||||
},
|
||||
"no-stations": "Brak stacji do wyświetlenia!",
|
||||
"scenery-search": "Wyszukaj scenerię..."
|
||||
"scenery-search": "Wyszukaj scenerię...",
|
||||
"active-filters": "Uwaga! Masz obecnie aktywne filtry!"
|
||||
},
|
||||
"station-stats": {
|
||||
"u-factor": "Współczynnik Ugla",
|
||||
"u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
|
||||
"avg-timetable-count": "Średnia liczba rozkładów jazdy na dyżurnego:",
|
||||
"single-track-count": "Dostępne szlaki jednotorowe:",
|
||||
"double-track-count": "Dostępne szlaki dwutorowe:",
|
||||
"electrified": "(zelektr.)",
|
||||
"not-electrified": "(niezelektr.)",
|
||||
"avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
|
||||
"single-track-count": "Szlaki jednotorowe:",
|
||||
"double-track-count": "Szlaki dwutorowe:",
|
||||
"cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
|
||||
"open-spawns": "Otwarte spawny:"
|
||||
},
|
||||
"trains": {
|
||||
|
||||
+7
-2
@@ -5,10 +5,15 @@ import router from './router';
|
||||
import i18n from './i18n';
|
||||
|
||||
import { createPinia } from 'pinia';
|
||||
import useCustomSW from './mixins/useCustomSW';
|
||||
import { registerSW } from 'virtual:pwa-register';
|
||||
|
||||
// Service worker
|
||||
useCustomSW();
|
||||
registerSW({
|
||||
immediate: true,
|
||||
onNeedRefresh() {
|
||||
console.log('Needs refresh!');
|
||||
}
|
||||
});
|
||||
|
||||
const clickOutsideDirective: Directive = {
|
||||
mounted(el, binding) {
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import StorageManager from './storageManager';
|
||||
|
||||
export const sections = [
|
||||
'status',
|
||||
'timetables',
|
||||
'reality',
|
||||
'packageAccess',
|
||||
'stationType',
|
||||
'access',
|
||||
'control',
|
||||
'blockades',
|
||||
'signals',
|
||||
'addons'
|
||||
] as const;
|
||||
|
||||
export const initFilters = {
|
||||
default: false,
|
||||
notDefault: false,
|
||||
real: false,
|
||||
fictional: false,
|
||||
SPK: false,
|
||||
SCS: false,
|
||||
SPE: false,
|
||||
SUP: false,
|
||||
noSUP: false,
|
||||
ASDEK: false,
|
||||
noASDEK: false,
|
||||
manual: false,
|
||||
'SPK-R': false,
|
||||
'SCS-R': false,
|
||||
mechanical: false,
|
||||
'SPK-M': false,
|
||||
'SCS-M': false,
|
||||
modern: false,
|
||||
semaphores: false,
|
||||
historical: false,
|
||||
mixed: false,
|
||||
SBL: false,
|
||||
PBL: false,
|
||||
'include-selected': false,
|
||||
'no-1track': false,
|
||||
'no-2track': false,
|
||||
free: true,
|
||||
occupied: false,
|
||||
nonPublic: false,
|
||||
unavailable: true,
|
||||
abandoned: true,
|
||||
afkStatus: false,
|
||||
endingStatus: false,
|
||||
noSpaceStatus: false,
|
||||
unavailableStatus: false,
|
||||
unsignedStatus: false,
|
||||
withActiveTimetables: false,
|
||||
withoutActiveTimetables: false,
|
||||
junction: false,
|
||||
nonJunction: false,
|
||||
maxVmax: 200,
|
||||
minVmax: 0,
|
||||
onlineFromHours: 0,
|
||||
minLevel: 0,
|
||||
maxLevel: 20,
|
||||
minOneWayCatenary: 0,
|
||||
minOneWay: 0,
|
||||
minTwoWayCatenary: 0,
|
||||
minTwoWay: 0,
|
||||
authors: ''
|
||||
};
|
||||
|
||||
export const initSliders = [
|
||||
{ id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
|
||||
{ id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
|
||||
{ id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
|
||||
{ id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
|
||||
{ id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
|
||||
{ id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
|
||||
{ id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
|
||||
{ id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }
|
||||
];
|
||||
|
||||
export type StationFilter = keyof typeof initFilters;
|
||||
export type StationFilterSection = (typeof sections)[number];
|
||||
|
||||
export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
|
||||
status: ['free', 'occupied', 'endingStatus', 'afkStatus', 'noSpaceStatus', 'unavailableStatus'],
|
||||
timetables: ['withActiveTimetables', 'withoutActiveTimetables'],
|
||||
reality: ['real', 'fictional'],
|
||||
packageAccess: ['default', 'notDefault'],
|
||||
stationType: ['junction', 'nonJunction'],
|
||||
access: ['nonPublic', 'unavailable', 'abandoned'],
|
||||
addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
|
||||
control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
|
||||
blockades: ['SBL', 'PBL'],
|
||||
signals: ['modern', 'semaphores', 'mixed', 'historical']
|
||||
};
|
||||
|
||||
export function setupFilters(currentFilters: Record<string, any>) {
|
||||
if (!StorageManager.isRegistered('options_saved')) return;
|
||||
|
||||
Object.keys(currentFilters).forEach((filterKey) => {
|
||||
const savedValue = StorageManager.getValue(filterKey);
|
||||
|
||||
if (savedValue != null) {
|
||||
if (typeof currentFilters[filterKey] == 'boolean')
|
||||
currentFilters[filterKey] = savedValue === 'true';
|
||||
else if (typeof currentFilters[filterKey] == 'number')
|
||||
currentFilters[filterKey] = Number(savedValue);
|
||||
else currentFilters[filterKey] = savedValue.toString();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getChangedFilters(currentFilters: Record<string, any>): string[] {
|
||||
return (
|
||||
Object.keys(currentFilters).filter(
|
||||
(filterKey) =>
|
||||
currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
|
||||
) ?? []
|
||||
);
|
||||
}
|
||||
@@ -34,6 +34,10 @@ export default class StorageManager {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
static getValue(key: string) {
|
||||
return window.localStorage.getItem(key);
|
||||
}
|
||||
|
||||
static getBooleanValue(key: string): boolean {
|
||||
return window.localStorage.getItem(key) === 'true' ? true : false;
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import { useRegisterSW } from 'virtual:pwa-register/vue';
|
||||
|
||||
export default () => {
|
||||
const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
|
||||
immediate: true
|
||||
});
|
||||
|
||||
return {
|
||||
needRefresh,
|
||||
updateServiceWorker,
|
||||
offlineReady
|
||||
};
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
export const headIds = [
|
||||
'station',
|
||||
'min-lvl',
|
||||
'status',
|
||||
'dispatcher',
|
||||
'dispatcher-lvl',
|
||||
'routes-single',
|
||||
'routes-double',
|
||||
'general'
|
||||
] as const;
|
||||
|
||||
export const headIconsIds = [
|
||||
'user',
|
||||
'like',
|
||||
'spawn',
|
||||
'timetableAll',
|
||||
'timetableUnconfirmed',
|
||||
'timetableConfirmed'
|
||||
] as const;
|
||||
|
||||
export type HeadIdsTypes = (typeof headIds)[number] | (typeof headIconsIds)[number];
|
||||
@@ -1,235 +0,0 @@
|
||||
import { Filter } from '../../components/StationsView/typings';
|
||||
import { Status } from '../../typings/common';
|
||||
import { HeadIdsTypes } from '../data/stationHeaderNames';
|
||||
import { Station } from '../../typings/common';
|
||||
|
||||
const dispatcherStatusPriority = [
|
||||
Status.ActiveDispatcher.UNKNOWN,
|
||||
Status.ActiveDispatcher.INVALID,
|
||||
Status.ActiveDispatcher.NOT_LOGGED_IN,
|
||||
Status.ActiveDispatcher.UNAVAILABLE,
|
||||
Status.ActiveDispatcher.AFK,
|
||||
Status.ActiveDispatcher.ENDING,
|
||||
Status.ActiveDispatcher.NO_SPACE,
|
||||
undefined
|
||||
];
|
||||
|
||||
export const sortStations = (
|
||||
a: Station,
|
||||
b: Station,
|
||||
sorter: { headerName: HeadIdsTypes; dir: number }
|
||||
) => {
|
||||
let diff = 0;
|
||||
|
||||
switch (sorter.headerName) {
|
||||
case 'station':
|
||||
return sorter.dir == 1 ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
|
||||
|
||||
case 'min-lvl':
|
||||
diff = (a.generalInfo?.reqLevel || 0) - (b.generalInfo?.reqLevel || 0);
|
||||
break;
|
||||
|
||||
case 'status':
|
||||
diff =
|
||||
(a.onlineInfo?.dispatcherTimestamp ??
|
||||
dispatcherStatusPriority.indexOf(a.onlineInfo?.dispatcherStatus)) -
|
||||
(b.onlineInfo?.dispatcherTimestamp ??
|
||||
dispatcherStatusPriority.indexOf(b.onlineInfo?.dispatcherStatus));
|
||||
break;
|
||||
|
||||
case 'dispatcher':
|
||||
if (
|
||||
(a.onlineInfo?.dispatcherName.toLowerCase() || '') >
|
||||
(b.onlineInfo?.dispatcherName.toLowerCase() || '')
|
||||
)
|
||||
return sorter.dir;
|
||||
if (
|
||||
(a.onlineInfo?.dispatcherName.toLowerCase() || '') <
|
||||
(b.onlineInfo?.dispatcherName.toLowerCase() || '')
|
||||
)
|
||||
return -sorter.dir;
|
||||
break;
|
||||
|
||||
case 'dispatcher-lvl':
|
||||
diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
|
||||
break;
|
||||
|
||||
case 'routes-single':
|
||||
diff =
|
||||
(a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
|
||||
(b.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
|
||||
break;
|
||||
|
||||
case 'routes-double':
|
||||
diff =
|
||||
(a.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
|
||||
(b.generalInfo?.routes.double.filter((r) => !r.hidden && !r.isInternal).length ?? -1);
|
||||
break;
|
||||
|
||||
case 'user':
|
||||
diff =
|
||||
(b.onlineInfo?.stationTrains ? b.onlineInfo.stationTrains.length : -1) -
|
||||
(a.onlineInfo?.stationTrains ? a.onlineInfo.stationTrains.length : -1);
|
||||
break;
|
||||
|
||||
case 'like':
|
||||
diff =
|
||||
(a.onlineInfo ? a.onlineInfo.dispatcherRate : -Infinity) -
|
||||
(b.onlineInfo ? b.onlineInfo.dispatcherRate : -Infinity);
|
||||
break;
|
||||
|
||||
case 'spawn':
|
||||
diff =
|
||||
(a.onlineInfo ? a.onlineInfo.spawns.length : -1) -
|
||||
(b.onlineInfo ? b.onlineInfo.spawns.length : -1);
|
||||
break;
|
||||
|
||||
case 'timetableConfirmed':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.confirmed ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.confirmed ?? -1);
|
||||
break;
|
||||
|
||||
case 'timetableUnconfirmed':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.unconfirmed ?? -1);
|
||||
break;
|
||||
|
||||
case 'timetableAll':
|
||||
diff =
|
||||
(a.onlineInfo?.scheduledTrainCount.all ?? -1) -
|
||||
(b.onlineInfo?.scheduledTrainCount.all ?? -1);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (diff != 0) return Math.sign(diff) * sorter.dir;
|
||||
return a.name.localeCompare(b.name);
|
||||
};
|
||||
|
||||
export const filterStations = (station: Station, filters: Filter) => {
|
||||
if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
|
||||
return false;
|
||||
|
||||
if (station.onlineInfo) {
|
||||
const { dispatcherStatus } = station.onlineInfo;
|
||||
|
||||
const excludeEnding =
|
||||
dispatcherStatus == Status.ActiveDispatcher.ENDING && filters['endingStatus'];
|
||||
|
||||
const excludeNotSigned =
|
||||
(dispatcherStatus == Status.ActiveDispatcher.NOT_LOGGED_IN ||
|
||||
dispatcherStatus == Status.ActiveDispatcher.UNAVAILABLE) &&
|
||||
filters['unavailableStatus'];
|
||||
|
||||
const excludeAFK = dispatcherStatus == Status.ActiveDispatcher.AFK && filters['afkStatus'];
|
||||
|
||||
const excludeNoSpace =
|
||||
dispatcherStatus == Status.ActiveDispatcher.NO_SPACE && filters['noSpaceStatus'];
|
||||
|
||||
const excludeOccupied = filters['occupied'] && dispatcherStatus != Status.ActiveDispatcher.FREE;
|
||||
|
||||
const excludeActiveTTs =
|
||||
(dispatcherStatus == Status.ActiveDispatcher.FREE ||
|
||||
station.onlineInfo.scheduledTrainCount.all != 0) &&
|
||||
filters['withActiveTimetables'];
|
||||
|
||||
if (
|
||||
excludeEnding ||
|
||||
excludeAFK ||
|
||||
excludeNoSpace ||
|
||||
excludeNotSigned ||
|
||||
excludeOccupied ||
|
||||
excludeActiveTTs
|
||||
)
|
||||
return false;
|
||||
|
||||
if (
|
||||
filters['onlineFromHours'] > 0 &&
|
||||
dispatcherStatus <= Date.now() + filters['onlineFromHours'] * 3600000
|
||||
)
|
||||
return false;
|
||||
}
|
||||
|
||||
const excludeNoActiveTTs =
|
||||
filters['withoutActiveTimetables'] &&
|
||||
(!station.onlineInfo || station.onlineInfo.scheduledTrainCount.all == 0);
|
||||
|
||||
if (excludeNoActiveTTs) return false;
|
||||
|
||||
if (
|
||||
(station.generalInfo?.availability == 'nonPublic' || !station.generalInfo) &&
|
||||
filters['nonPublic']
|
||||
)
|
||||
return false;
|
||||
|
||||
if (station.generalInfo) {
|
||||
const { routes, availability, controlType, lines, reqLevel, signalType, SUP, ASDEK, authors } =
|
||||
station.generalInfo;
|
||||
|
||||
if (availability == 'unavailable' && filters['unavailable'] && !station.onlineInfo)
|
||||
return false;
|
||||
if (availability == 'abandoned' && filters['abandoned'] && !station.onlineInfo) return false;
|
||||
if (availability == 'default' && filters['default']) return false;
|
||||
|
||||
if (
|
||||
availability != 'default' &&
|
||||
filters['notDefault'] &&
|
||||
!(availability == 'abandoned' || availability == 'unavailable')
|
||||
)
|
||||
return false;
|
||||
|
||||
if (filters['real'] && lines) return false;
|
||||
if (filters['fictional'] && !lines) return false;
|
||||
|
||||
const otherAvailability =
|
||||
availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';
|
||||
|
||||
if (reqLevel + (otherAvailability ? 1 : 0) < filters['minLevel']) return false;
|
||||
if (reqLevel + (otherAvailability ? 1 : 0) > filters['maxLevel']) return false;
|
||||
|
||||
if (filters['minVmax'] > station.generalInfo.routes.maxRouteSpeed) return false;
|
||||
if (filters['maxVmax'] < station.generalInfo.routes.minRouteSpeed) return false;
|
||||
|
||||
if (
|
||||
filters['no-1track'] &&
|
||||
(routes.singleElectrifiedNames.length != 0 || routes.singleOtherNames.length != 0)
|
||||
)
|
||||
return false;
|
||||
|
||||
if (
|
||||
filters['no-2track'] &&
|
||||
(routes.doubleElectrifiedNames.length != 0 || routes.doubleOtherNames.length != 0)
|
||||
)
|
||||
return false;
|
||||
|
||||
if (routes.singleElectrifiedNames.length < filters['minOneWayCatenary']) return false;
|
||||
if (routes.singleOtherNames.length < filters['minOneWay']) return false;
|
||||
|
||||
if (routes.doubleElectrifiedNames.length < filters['minTwoWayCatenary']) return false;
|
||||
if (routes.doubleOtherNames.length < filters['minTwoWay']) return false;
|
||||
|
||||
if (filters[controlType]) return false;
|
||||
if (filters[signalType]) return false;
|
||||
|
||||
if (filters['SUP'] && SUP) return false;
|
||||
if (filters['noSUP'] && !SUP) return false;
|
||||
|
||||
if (filters['ASDEK'] && ASDEK) return false;
|
||||
if (filters['noASDEK'] && !ASDEK) return false;
|
||||
|
||||
if (filters['SBL'] && routes.sblNames.length > 0) return false;
|
||||
if (filters['PBL'] && routes.sblNames.length == 0) return false;
|
||||
|
||||
if (
|
||||
filters['authors'].length > 3 &&
|
||||
!authors?.map((a) => a.toLocaleLowerCase()).includes(filters['authors'].toLocaleLowerCase())
|
||||
)
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
+78
-36
@@ -1,9 +1,9 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { parseSpawns, getScheduledTrains, getStationTrains } from './utils';
|
||||
import { parseSpawns } from './utils';
|
||||
|
||||
import {
|
||||
ActiveScenery,
|
||||
ScheduledTrain,
|
||||
CheckpointTrain,
|
||||
Station,
|
||||
StationRoutes,
|
||||
Status,
|
||||
@@ -12,6 +12,9 @@ import {
|
||||
import { useApiStore } from './apiStore';
|
||||
import { MainStoreState } from './typings';
|
||||
|
||||
const checkpointsTrains: Map<string, CheckpointTrain[]> = new Map();
|
||||
const sceneriesTrains: Map<string, Train[]> = new Map();
|
||||
|
||||
export const useMainStore = defineStore('mainStore', {
|
||||
state: () =>
|
||||
({
|
||||
@@ -33,10 +36,17 @@ export const useMainStore = defineStore('mainStore', {
|
||||
}) as MainStoreState,
|
||||
|
||||
getters: {
|
||||
checkpointsTrains() {
|
||||
return checkpointsTrains;
|
||||
},
|
||||
|
||||
trainList(): Train[] {
|
||||
const apiStore = useApiStore();
|
||||
|
||||
return (apiStore.activeData?.trains ?? [])
|
||||
checkpointsTrains.clear();
|
||||
sceneriesTrains.clear();
|
||||
|
||||
const x = (apiStore.activeData?.trains ?? [])
|
||||
.filter((train) => train.timetable || train.online)
|
||||
.map((train) => {
|
||||
const stock = train.stockString.split(';');
|
||||
@@ -53,8 +63,8 @@ export const useMainStore = defineStore('mainStore', {
|
||||
sceneryHash
|
||||
) ?? [];
|
||||
|
||||
return {
|
||||
trainId: train.driverName + train.trainNo.toString(),
|
||||
const trainObj = {
|
||||
id: train.id,
|
||||
|
||||
trainNo: train.trainNo,
|
||||
mass: train.mass,
|
||||
@@ -93,7 +103,36 @@ export const useMainStore = defineStore('mainStore', {
|
||||
}
|
||||
: undefined
|
||||
} as Train;
|
||||
|
||||
// Sceneries trains map
|
||||
if (sceneriesTrains.has(train.currentStationName)) {
|
||||
sceneriesTrains.set(train.currentStationName, [
|
||||
...sceneriesTrains.get(train.currentStationName)!,
|
||||
trainObj
|
||||
]);
|
||||
} else sceneriesTrains.set(train.currentStationName, [trainObj]);
|
||||
|
||||
// Checkpoints trains map
|
||||
timetable?.stopList.forEach((stop, i) => {
|
||||
if (/strong|podg\.|pe\./.test(stop.stopName)) {
|
||||
const checkpointTrain: CheckpointTrain = {
|
||||
train: trainObj,
|
||||
checkpointStop: stop
|
||||
};
|
||||
|
||||
if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
|
||||
checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
|
||||
...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
|
||||
checkpointTrain
|
||||
]);
|
||||
} else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
|
||||
}
|
||||
});
|
||||
|
||||
return trainObj;
|
||||
});
|
||||
|
||||
return x;
|
||||
},
|
||||
|
||||
// computed active sceneries
|
||||
@@ -104,6 +143,7 @@ export const useMainStore = defineStore('mainStore', {
|
||||
|
||||
if (!apiStore.activeData?.activeSceneries) return [];
|
||||
|
||||
console.time('activeSceneryList');
|
||||
const offlineActiveSceneries = this.trainList.reduce((acc, train) => {
|
||||
if (!train.timetableData) return acc;
|
||||
|
||||
@@ -131,13 +171,14 @@ export const useMainStore = defineStore('mainStore', {
|
||||
dispatcherId: -1,
|
||||
dispatcherExp: -1,
|
||||
dispatcherIsSupporter: false,
|
||||
scheduledTrains: [],
|
||||
stationTrains: [],
|
||||
dispatcherStatus: Status.ActiveDispatcher.FREE,
|
||||
dispatcherTimestamp: -1,
|
||||
|
||||
isOnline: false,
|
||||
|
||||
stationTrains: [],
|
||||
scheduledTrains: [],
|
||||
|
||||
scheduledTrainCount: {
|
||||
all: 0,
|
||||
confirmed: 0,
|
||||
@@ -177,8 +218,9 @@ export const useMainStore = defineStore('mainStore', {
|
||||
|
||||
isOnline: scenery.isOnline == 1,
|
||||
|
||||
scheduledTrains: [],
|
||||
stationTrains: [],
|
||||
scheduledTrains: [],
|
||||
|
||||
scheduledTrainCount: {
|
||||
all: 0,
|
||||
confirmed: 0,
|
||||
@@ -196,39 +238,36 @@ export const useMainStore = defineStore('mainStore', {
|
||||
|
||||
const station = this.stationList.find((s) => s.name === scenery.name);
|
||||
|
||||
const scheduledTrains = getScheduledTrains(
|
||||
this.trainList,
|
||||
station?.generalInfo,
|
||||
scenery.name,
|
||||
scenery.region
|
||||
);
|
||||
const checkpoints = [scenery.name];
|
||||
if (station?.generalInfo?.checkpoints && station.generalInfo.checkpoints.length > 0)
|
||||
checkpoints.push(...station.generalInfo.checkpoints.filter((cp) => cp !== station.name));
|
||||
|
||||
const stationTrains = getStationTrains(
|
||||
this.trainList,
|
||||
scheduledTrains,
|
||||
this.region.id,
|
||||
scenery.name
|
||||
);
|
||||
scenery.stationTrains =
|
||||
sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];
|
||||
|
||||
// Remove checkpoint duplicates
|
||||
const uniqueScheduledTrains = scheduledTrains.reduce(
|
||||
(uniqueList, sTrain) =>
|
||||
uniqueList.find((v) => v.trainId === sTrain.trainId)
|
||||
? uniqueList
|
||||
: [...uniqueList, sTrain],
|
||||
[] as ScheduledTrain[]
|
||||
);
|
||||
const uniqueTrainIds: string[] = [];
|
||||
checkpoints.forEach((cp) => {
|
||||
const scheduledTrains = checkpointsTrains.get(cp.toLowerCase());
|
||||
|
||||
scenery.scheduledTrains = scheduledTrains;
|
||||
scenery.stationTrains = stationTrains;
|
||||
if (!scheduledTrains) return;
|
||||
|
||||
scenery.scheduledTrainCount = {
|
||||
all: uniqueScheduledTrains.length,
|
||||
confirmed: uniqueScheduledTrains.filter((train) => train.stopInfo.confirmed).length,
|
||||
unconfirmed: uniqueScheduledTrains.filter((train) => !train.stopInfo.confirmed).length
|
||||
};
|
||||
scheduledTrains.forEach(({ train, checkpointStop }) => {
|
||||
scenery.scheduledTrains.push({ train, checkpointStop });
|
||||
|
||||
if (uniqueTrainIds.includes(train.id) || train.region != this.region.id) return;
|
||||
|
||||
scenery.scheduledTrainCount.all += 1;
|
||||
|
||||
if (checkpointStop.confirmed) scenery.scheduledTrainCount.confirmed++;
|
||||
else scenery.scheduledTrainCount.unconfirmed++;
|
||||
|
||||
uniqueTrainIds.push(train.id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.timeEnd('activeSceneryList');
|
||||
|
||||
return allActiveSceneries;
|
||||
},
|
||||
|
||||
@@ -281,7 +320,10 @@ export const useMainStore = defineStore('mainStore', {
|
||||
...scenery,
|
||||
authors: scenery.authors?.split(',').map((a) => a.trim()),
|
||||
routes: routes,
|
||||
checkpoints: scenery.checkpoints?.split(';') ?? []
|
||||
checkpoints:
|
||||
scenery.checkpoints && scenery.checkpoints.trim().length > 0
|
||||
? scenery.checkpoints.split(';')
|
||||
: []
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import inputData from '../data/options.json';
|
||||
import { useMainStore } from './mainStore';
|
||||
import { filterStations, sortStations } from '../scripts/utils/stationFilterUtils';
|
||||
import { HeadIdsTypes } from '../scripts/data/stationHeaderNames';
|
||||
import StorageManager from '../managers/storageManager';
|
||||
import { Filter } from '../components/StationsView/typings';
|
||||
|
||||
const filterInitStates: Filter = {
|
||||
default: false,
|
||||
notDefault: false,
|
||||
real: false,
|
||||
fictional: false,
|
||||
SPK: false,
|
||||
SCS: false,
|
||||
SPE: false,
|
||||
SUP: false,
|
||||
noSUP: false,
|
||||
ASDEK: false,
|
||||
noASDEK: false,
|
||||
ręczne: false,
|
||||
'ręczne+SPK': false,
|
||||
'ręczne+SCS': false,
|
||||
mechaniczne: false,
|
||||
'mechaniczne+SPK': false,
|
||||
'mechaniczne+SCS': false,
|
||||
współczesna: false,
|
||||
kształtowa: false,
|
||||
historyczna: false,
|
||||
mieszana: false,
|
||||
SBL: false,
|
||||
PBL: false,
|
||||
minLevel: 0,
|
||||
maxLevel: 20,
|
||||
minOneWayCatenary: 0,
|
||||
minOneWay: 0,
|
||||
minTwoWayCatenary: 0,
|
||||
minTwoWay: 0,
|
||||
'include-selected': false,
|
||||
'no-1track': false,
|
||||
'no-2track': false,
|
||||
free: true,
|
||||
occupied: false,
|
||||
ending: false,
|
||||
nonPublic: false,
|
||||
unavailable: true,
|
||||
abandoned: true,
|
||||
afkStatus: false,
|
||||
endingStatus: false,
|
||||
noSpaceStatus: false,
|
||||
unavailableStatus: false,
|
||||
unsignedStatus: false,
|
||||
withActiveTimetables: false,
|
||||
withoutActiveTimetables: false,
|
||||
maxVmax: 200,
|
||||
minVmax: 0,
|
||||
authors: '',
|
||||
onlineFromHours: 0
|
||||
};
|
||||
|
||||
export const useStationFiltersStore = defineStore('stationFiltersStore', {
|
||||
state() {
|
||||
return {
|
||||
inputs: inputData,
|
||||
filters: { ...filterInitStates },
|
||||
sorterActive: { headerName: 'station' as HeadIdsTypes, dir: 1 },
|
||||
lastClickedFilterId: ''
|
||||
};
|
||||
},
|
||||
|
||||
getters: {
|
||||
areFiltersAtDefault: (state) => {
|
||||
return Object.keys(state.filters).every((f) => state.filters[f] === filterInitStates[f]);
|
||||
},
|
||||
|
||||
filteredStationList: (state) => {
|
||||
const store = useMainStore();
|
||||
|
||||
return store.allStationInfo
|
||||
.filter((station) => filterStations(station, state.filters))
|
||||
.sort((a, b) => sortStations(a, b, state.sorterActive));
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
setupFilters() {
|
||||
if (!StorageManager.isRegistered('options_saved')) return;
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
if (!StorageManager.isRegistered(option.name)) return;
|
||||
const savedValue = StorageManager.getBooleanValue(option.name);
|
||||
|
||||
this.filters[option.name] = savedValue;
|
||||
option.value = !savedValue;
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
if (!StorageManager.isRegistered(slider.name)) return;
|
||||
const savedValue = StorageManager.getNumericValue(slider.name);
|
||||
|
||||
this.filters[slider.name] = savedValue;
|
||||
slider.value = savedValue;
|
||||
});
|
||||
},
|
||||
|
||||
changeFilterValue(name: string, value: any) {
|
||||
this.filters[name] = value;
|
||||
if (StorageManager.isRegistered('options_saved')) StorageManager.setValue(name, value);
|
||||
},
|
||||
|
||||
resetFilters() {
|
||||
this.filters = { ...filterInitStates };
|
||||
|
||||
this.inputs.options.forEach((option) => {
|
||||
option.value = option.defaultValue;
|
||||
StorageManager.setBooleanValue(option.name, !option.defaultValue);
|
||||
});
|
||||
|
||||
this.inputs.sliders.forEach((slider) => {
|
||||
slider.value = slider.defaultValue;
|
||||
StorageManager.setNumericValue(slider.name, slider.defaultValue);
|
||||
});
|
||||
},
|
||||
|
||||
resetSectionOptions(section: string) {
|
||||
this.inputs.options
|
||||
.filter((option) => option.section == section)
|
||||
.forEach((option) => {
|
||||
option.value = option.defaultValue;
|
||||
StorageManager.setBooleanValue(option.name, !option.defaultValue);
|
||||
});
|
||||
},
|
||||
|
||||
changeSorter(headerName: HeadIdsTypes) {
|
||||
if (headerName == this.sorterActive.headerName)
|
||||
this.sorterActive.dir = -1 * this.sorterActive.dir;
|
||||
else this.sorterActive.dir = 1;
|
||||
|
||||
this.sorterActive.headerName = headerName;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
import { API } from '../typings/api';
|
||||
import { Availability, StationRoutesInfo, Status } from '../typings/common';
|
||||
import { Availability, CheckpointTrain, StationRoutesInfo, Status } from '../typings/common';
|
||||
|
||||
export interface MainStoreState {
|
||||
region: { id: string; value: string; name: string };
|
||||
|
||||
+1
-189
@@ -1,19 +1,4 @@
|
||||
import {
|
||||
TrainStop,
|
||||
StopStatus,
|
||||
Train,
|
||||
ScheduledTrain,
|
||||
Station,
|
||||
StationTrain,
|
||||
ScenerySpawn,
|
||||
ScenerySpawnType
|
||||
} from '../typings/common';
|
||||
|
||||
export function getLocoURL(locoType: string): string {
|
||||
return `https://rj.td2.info.pl/dist/img/thumbnails/${
|
||||
locoType.includes('EN') ? locoType + 'rb' : locoType
|
||||
}.png`;
|
||||
}
|
||||
import { ScenerySpawn, ScenerySpawnType } from '../typings/common';
|
||||
|
||||
export function getStatusTimestamp(stationStatus: any): number {
|
||||
if (!stationStatus) return -2;
|
||||
@@ -63,176 +48,3 @@ export function parseSpawns(spawnString: string | null): ScenerySpawn[] {
|
||||
export function getTimestamp(date: string | null): number {
|
||||
return date ? new Date(date).getTime() : 0;
|
||||
}
|
||||
|
||||
export function getTrainStopStatus(
|
||||
stopInfo: TrainStop,
|
||||
currentStationName: string,
|
||||
sceneryName: string
|
||||
) {
|
||||
let stopStatus = StopStatus.ARRIVING,
|
||||
stopLabel = '',
|
||||
stopStatusID = -1;
|
||||
|
||||
if (stopInfo.terminatesHere && stopInfo.confirmed) {
|
||||
stopStatus = StopStatus.TERMINATED;
|
||||
stopLabel = 'Skończył bieg';
|
||||
stopStatusID = 5;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
|
||||
stopStatus = StopStatus.DEPARTED;
|
||||
stopLabel = 'Odprawiony';
|
||||
stopStatusID = 2;
|
||||
} else if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
|
||||
stopStatus = StopStatus.DEPARTED_AWAY;
|
||||
stopLabel = 'Odjechał';
|
||||
stopStatusID = 4;
|
||||
} else if (currentStationName == sceneryName && !stopInfo.stopped) {
|
||||
stopStatus = StopStatus.ONLINE;
|
||||
stopLabel = 'Na stacji';
|
||||
stopStatusID = 0;
|
||||
} else if (currentStationName == sceneryName && stopInfo.stopped) {
|
||||
stopStatus = StopStatus.STOPPED;
|
||||
stopLabel = 'Postój';
|
||||
stopStatusID = 1;
|
||||
} else if (currentStationName != sceneryName) {
|
||||
stopStatus = StopStatus.ARRIVING;
|
||||
stopLabel = 'W drodze';
|
||||
stopStatusID = 3;
|
||||
}
|
||||
|
||||
return { stopStatus, stopLabel, stopStatusID };
|
||||
}
|
||||
|
||||
export function getCheckpointTrain(
|
||||
train: Train,
|
||||
trainStopIndex: number,
|
||||
sceneryName: string
|
||||
): ScheduledTrain {
|
||||
const timetable = train.timetableData!;
|
||||
const followingStops = timetable.followingStops;
|
||||
const trainStop = followingStops[trainStopIndex];
|
||||
|
||||
const trainStopStatus = getTrainStopStatus(trainStop, train.currentStationName, sceneryName);
|
||||
|
||||
let prevStationName = '',
|
||||
nextStationName = '';
|
||||
|
||||
let departureLine: string | null = null;
|
||||
let arrivingLine: string | null = null;
|
||||
|
||||
let prevDepartureLine: string | null = null,
|
||||
nextArrivalLine: string | null = null;
|
||||
|
||||
for (let i = trainStopIndex; i >= 0; i--) {
|
||||
const stop = followingStops[i];
|
||||
|
||||
if (/strong|podg\.|pe\./g.test(stop.stopName) && !prevStationName && i <= trainStopIndex - 1)
|
||||
prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
|
||||
|
||||
if (stop.arrivalLine != null && !arrivingLine && !/-|_|it|sbl/gi.test(stop.arrivalLine)) {
|
||||
arrivingLine = stop.arrivalLine;
|
||||
prevDepartureLine = followingStops[i - 1]?.departureLine || null;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = trainStopIndex; i < followingStops.length; i++) {
|
||||
const stop = followingStops[i];
|
||||
|
||||
if (/strong|podg\.|pe\./g.test(stop.stopName) && !nextStationName && i > trainStopIndex)
|
||||
nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
|
||||
|
||||
if (stop.departureLine && !departureLine && !/-|_|it|sbl/gi.test(stop.departureLine)) {
|
||||
departureLine = stop.departureLine;
|
||||
nextArrivalLine = followingStops[i + 1]?.arrivalLine || null;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
checkpointName: trainStop.stopNameRAW,
|
||||
|
||||
trainNo: train.trainNo,
|
||||
trainId: train.trainId,
|
||||
|
||||
signal: train.signal,
|
||||
connectedTrack: train.connectedTrack,
|
||||
|
||||
driverName: train.driverName,
|
||||
driverId: train.driverId,
|
||||
currentStationName: train.currentStationName,
|
||||
currentStationHash: train.currentStationHash,
|
||||
category: timetable.category,
|
||||
beginsAt: timetable.followingStops[0].stopNameRAW,
|
||||
terminatesAt: timetable.followingStops[timetable.followingStops.length - 1].stopNameRAW,
|
||||
|
||||
nextStationName,
|
||||
prevStationName,
|
||||
|
||||
stopInfo: trainStop,
|
||||
stopLabel: trainStopStatus.stopLabel,
|
||||
stopStatus: trainStopStatus.stopStatus,
|
||||
stopStatusID: trainStopStatus.stopStatusID,
|
||||
|
||||
region: train.region,
|
||||
|
||||
arrivingLine: arrivingLine,
|
||||
departureLine: departureLine,
|
||||
|
||||
nextArrivalLine,
|
||||
prevDepartureLine
|
||||
};
|
||||
}
|
||||
|
||||
export function getScheduledTrains(
|
||||
trainList: Train[],
|
||||
stationGeneralInfo: Station['generalInfo'],
|
||||
stationName: string,
|
||||
region: string
|
||||
// sceneryData: API.ActiveSceneries.Data,
|
||||
): ScheduledTrain[] {
|
||||
// stationGeneralInfo?.checkpoints.forEach((cp) => (cp.scheduledTrains.length = 0));
|
||||
|
||||
return trainList.reduce((acc: ScheduledTrain[], train) => {
|
||||
if (!train.timetableData) return acc;
|
||||
if (train.region != region) return acc;
|
||||
|
||||
const timetable = train.timetableData;
|
||||
if (!timetable.sceneryNames.includes(stationName)) return acc;
|
||||
|
||||
const checkpoints = [stationName];
|
||||
if (stationGeneralInfo?.checkpoints) checkpoints.push(...stationGeneralInfo.checkpoints);
|
||||
|
||||
const checkpointScheduledTrains: ScheduledTrain[] = [];
|
||||
for (let i = 0; i < timetable.followingStops.length; i++) {
|
||||
if (
|
||||
new RegExp(`^(${checkpoints.join('|')})$`, 'i').test(
|
||||
timetable.followingStops[i].stopNameRAW
|
||||
)
|
||||
) {
|
||||
checkpointScheduledTrains.push(getCheckpointTrain(train, i, stationName));
|
||||
}
|
||||
}
|
||||
|
||||
acc.push(...checkpointScheduledTrains);
|
||||
return acc;
|
||||
}, []) as ScheduledTrain[];
|
||||
}
|
||||
|
||||
export function getStationTrains(
|
||||
trainList: Train[],
|
||||
scheduledTrainList: ScheduledTrain[],
|
||||
region: string,
|
||||
stationName: string
|
||||
): StationTrain[] {
|
||||
return trainList
|
||||
.filter(
|
||||
(train) =>
|
||||
train?.region === region && train.online && train.currentStationName === stationName
|
||||
)
|
||||
.map((train) => ({
|
||||
driverName: train.driverName,
|
||||
driverId: train.driverId,
|
||||
trainNo: train.trainNo,
|
||||
trainId: train.trainId,
|
||||
stopStatus:
|
||||
scheduledTrainList.find((st) => st.trainNo === train.trainNo)?.stopStatus || 'no-timetable'
|
||||
}));
|
||||
}
|
||||
|
||||
@@ -121,8 +121,6 @@ input {
|
||||
height: 7px;
|
||||
background-color: lightgreen;
|
||||
border-radius: 50%;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@@ -161,7 +161,6 @@ export namespace API {
|
||||
stopNameRAW: string;
|
||||
stopType: string;
|
||||
stopDistance: number;
|
||||
pointId: string;
|
||||
|
||||
mainStop: boolean;
|
||||
|
||||
|
||||
+29
-74
@@ -41,7 +41,6 @@ export interface RegionCounters {
|
||||
|
||||
export interface Train {
|
||||
id: string;
|
||||
trainId: string;
|
||||
mass: number;
|
||||
length: number;
|
||||
speed: number;
|
||||
@@ -79,35 +78,30 @@ export interface Train {
|
||||
export interface Station {
|
||||
name: string;
|
||||
|
||||
generalInfo?: {
|
||||
name: string;
|
||||
url: string;
|
||||
abbr: string;
|
||||
hash?: string;
|
||||
|
||||
reqLevel: number;
|
||||
// supportersOnly: boolean;
|
||||
|
||||
lines: string;
|
||||
project: string;
|
||||
projectUrl?: string;
|
||||
|
||||
signalType: string;
|
||||
controlType: string;
|
||||
|
||||
SUP: boolean;
|
||||
ASDEK: boolean;
|
||||
authors?: string[];
|
||||
|
||||
availability: Availability;
|
||||
routes: StationRoutes;
|
||||
|
||||
checkpoints: string[];
|
||||
};
|
||||
generalInfo?: StationGeneralInfo;
|
||||
|
||||
onlineInfo?: ActiveScenery;
|
||||
}
|
||||
|
||||
export interface StationGeneralInfo {
|
||||
name: string;
|
||||
url: string;
|
||||
abbr: string;
|
||||
hash?: string;
|
||||
reqLevel: number;
|
||||
lines: string;
|
||||
project: string;
|
||||
projectUrl?: string;
|
||||
signalType: string;
|
||||
controlType: string;
|
||||
SUP: boolean;
|
||||
ASDEK: boolean;
|
||||
authors?: string[];
|
||||
availability: Availability;
|
||||
routes: StationRoutes;
|
||||
checkpoints: string[];
|
||||
}
|
||||
|
||||
export interface StationRoutes {
|
||||
single: StationRoutesInfo[];
|
||||
double: StationRoutesInfo[];
|
||||
@@ -148,8 +142,8 @@ export interface ActiveScenery {
|
||||
dispatcherStatus: Status.ActiveDispatcher | number;
|
||||
dispatcherTimestamp: number | null;
|
||||
isOnline: boolean;
|
||||
stationTrains?: StationTrain[];
|
||||
scheduledTrains?: ScheduledTrain[];
|
||||
stationTrains: Train[];
|
||||
scheduledTrains: CheckpointTrain[];
|
||||
scheduledTrainCount: {
|
||||
all: number;
|
||||
confirmed: number;
|
||||
@@ -164,49 +158,6 @@ export interface ScenerySpawn {
|
||||
spawnType: ScenerySpawnType;
|
||||
}
|
||||
|
||||
export interface StationTrain {
|
||||
driverName: string;
|
||||
driverId: number;
|
||||
trainNo: number;
|
||||
trainId: string;
|
||||
stopStatus: string;
|
||||
}
|
||||
|
||||
export interface ScheduledTrain {
|
||||
checkpointName: string;
|
||||
|
||||
trainId: string;
|
||||
trainNo: number;
|
||||
|
||||
driverName: string;
|
||||
driverId: number;
|
||||
currentStationName: string;
|
||||
currentStationHash: string;
|
||||
category: string;
|
||||
stopInfo: TrainStop;
|
||||
|
||||
terminatesAt: string;
|
||||
beginsAt: string;
|
||||
|
||||
prevStationName: string;
|
||||
nextStationName: string;
|
||||
|
||||
arrivingLine: string | null;
|
||||
departureLine: string | null;
|
||||
|
||||
prevDepartureLine: string | null;
|
||||
nextArrivalLine: string | null;
|
||||
|
||||
signal: string;
|
||||
connectedTrack: string;
|
||||
|
||||
stopLabel: string;
|
||||
stopStatus: StopStatus;
|
||||
stopStatusID: number;
|
||||
|
||||
region: string;
|
||||
}
|
||||
|
||||
export interface TrainStop {
|
||||
stopName: string;
|
||||
stopNameRAW: string;
|
||||
@@ -223,13 +174,17 @@ export interface TrainStop {
|
||||
departureTimestamp: number;
|
||||
departureRealTimestamp: number;
|
||||
departureDelay: number;
|
||||
pointId: number;
|
||||
|
||||
comments?: string;
|
||||
|
||||
beginsHere: boolean;
|
||||
terminatesHere: boolean;
|
||||
confirmed: boolean;
|
||||
stopped: boolean;
|
||||
confirmed: number;
|
||||
stopped: number;
|
||||
stopTime: number | null;
|
||||
}
|
||||
|
||||
export interface CheckpointTrain {
|
||||
checkpointStop: TrainStop;
|
||||
train: Train;
|
||||
}
|
||||
|
||||
@@ -17,8 +17,9 @@
|
||||
<JournalStats :statsButtons="statsButtons" />
|
||||
</div>
|
||||
|
||||
<div class="journal_refreshed-date" v-if="dataRefreshedAt">
|
||||
{{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
|
||||
<div class="journal_refreshed-date">
|
||||
{{ $t('journal.data-refreshed-at') }}:
|
||||
{{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
|
||||
</div>
|
||||
|
||||
<div class="list_wrapper" @scroll="handleScroll">
|
||||
|
||||
@@ -17,8 +17,9 @@
|
||||
<JournalStats :statsButtons="statsButtons" />
|
||||
</div>
|
||||
|
||||
<div class="journal_refreshed-date" v-if="dataRefreshedAt">
|
||||
{{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
|
||||
<div class="journal_refreshed-date">
|
||||
{{ $t('journal.data-refreshed-at') }}:
|
||||
{{ dataRefreshedAt?.toLocaleString($i18n.locale) ?? '---' }}
|
||||
</div>
|
||||
|
||||
<div class="list_wrapper" @scroll="handleScroll">
|
||||
|
||||
@@ -200,7 +200,7 @@ button.back-btn {
|
||||
|
||||
display: inline-block;
|
||||
|
||||
font-size: 1.5em;
|
||||
font-size: 1.25em;
|
||||
|
||||
button {
|
||||
margin: 1em auto;
|
||||
@@ -233,7 +233,7 @@ button.back-btn {
|
||||
background-color: #181818;
|
||||
padding: 1em 0.5em;
|
||||
|
||||
height: 95vh;
|
||||
height: 100vh;
|
||||
min-height: 750px;
|
||||
max-height: 1000px;
|
||||
overflow: auto;
|
||||
@@ -246,7 +246,7 @@ button.back-btn {
|
||||
background: #181818;
|
||||
padding: 1em 0.5em;
|
||||
|
||||
height: 95vh;
|
||||
height: 100vh;
|
||||
min-height: 750px;
|
||||
max-height: 1000px;
|
||||
|
||||
|
||||
+28
-14
@@ -11,16 +11,16 @@
|
||||
<button
|
||||
class="btn-donation btn--image"
|
||||
ref="btn"
|
||||
@click="isDonationModalOpen = true"
|
||||
@focus="isDonationModalOpen = false"
|
||||
@click="isDonationCardOpen = true"
|
||||
@focus="isDonationCardOpen = false"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
|
||||
<span>{{ $t('donations.button-title') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DonationModal :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
|
||||
<StationTable @toggleDonationModal="toggleDonationModal" />
|
||||
<DonationCard :is-card-open="isDonationCardOpen" @toggle-card="toggleDonationCard" />
|
||||
<StationTable @toggle-donation-card="toggleDonationCard" />
|
||||
<StationStats />
|
||||
</div>
|
||||
</section>
|
||||
@@ -30,34 +30,47 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import StationTable from '../components/StationsView/StationTable.vue';
|
||||
import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
|
||||
import { useStationFiltersStore } from '../store/stationFiltersStore';
|
||||
import { useMainStore } from '../store/mainStore';
|
||||
import DonationModal from '../components/Global/DonationModal.vue';
|
||||
import DonationCard from '../components/Global/DonationCard.vue';
|
||||
import StationStats from '../components/StationsView/StationStats.vue';
|
||||
import { initFilters, setupFilters } from '../managers/stationFilterManager';
|
||||
import { reactive } from 'vue';
|
||||
import { provide } from 'vue';
|
||||
import { ActiveSorter } from '../components/StationsView/typings';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
const filterInitStates = { ...initFilters };
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
StationTable,
|
||||
StationFilterCard,
|
||||
StationStats,
|
||||
DonationModal
|
||||
DonationCard
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
filterCardOpen: false,
|
||||
isDonationModalOpen: false,
|
||||
isDonationCardOpen: false,
|
||||
|
||||
filterStore: useStationFiltersStore(),
|
||||
store: useMainStore()
|
||||
mainStore: useMainStore()
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.filterStore.setupFilters();
|
||||
setup() {
|
||||
const filters = reactive(filterInitStates);
|
||||
const activeSorter = reactive({ headerName: 'station', dir: 1 }) as ActiveSorter;
|
||||
|
||||
provide('StationsView_filters', filters);
|
||||
provide('StationsView_activeSorter', activeSorter);
|
||||
|
||||
onMounted(() => {
|
||||
setupFilters(filters);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleDonationModal(value: boolean) {
|
||||
this.isDonationModalOpen = value;
|
||||
toggleDonationCard(value: boolean) {
|
||||
this.isDonationCardOpen = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -84,6 +97,7 @@ export default defineComponent({
|
||||
.stations-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
+12
-14
@@ -7,6 +7,10 @@ export default defineConfig({
|
||||
port: 5001,
|
||||
open: true
|
||||
},
|
||||
preview: {
|
||||
port: 4001,
|
||||
open: true
|
||||
},
|
||||
publicDir: 'public',
|
||||
plugins: [
|
||||
vue(),
|
||||
@@ -20,8 +24,8 @@ export default defineConfig({
|
||||
cleanupOutdatedCaches: true,
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: new RegExp('^https://stacjownik.spythere.eu/api/getSceneries', 'i'),
|
||||
handler: 'CacheFirst',
|
||||
urlPattern: /^https:\/\/stacjownik.spythere.eu\/api\/getSceneries/i,
|
||||
handler: 'StaleWhileRevalidate',
|
||||
options: {
|
||||
cacheName: 'spythere-sceneries-cache',
|
||||
cacheableResponse: {
|
||||
@@ -30,22 +34,16 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
{
|
||||
urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
|
||||
urlPattern: /^https:\/\/static.spythere.eu\/.*/i,
|
||||
handler: 'CacheFirst',
|
||||
options: {
|
||||
cacheName: 'swdr-images-cache',
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200, 404]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
urlPattern: new RegExp('^https://static.spythere.eu/images/*', 'i'),
|
||||
handler: 'CacheFirst',
|
||||
options: {
|
||||
cacheName: 'spythere-images-cache',
|
||||
cacheName: 'spythere-static-cache',
|
||||
cacheableResponse: {
|
||||
statuses: [0, 200]
|
||||
},
|
||||
expiration: {
|
||||
maxEntries: 100,
|
||||
maxAgeSeconds: 60 * 60 * 8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user