+ {{ $t('scenery.one-way-routes') }}
+
+
+
+ -
+
- + {{ route.name }} + SBL + +
+ {{ $t('scenery.two-way-routes') }}
+
+
+
+
+
+
+
-
+
- + {{ route.name }} SBL + +
-
-
-
-
- ![icon-timetable]()
- {{ $t('scenery.timetables') }}
-
-
-
-
- ![icon-view]()
-
-
-
-
+
-
-
-
@@ -51,7 +44,7 @@ import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
import ActionButton from '@/components/Global/ActionButton.vue';
-import { computed, defineComponent } from '@vue/runtime-core';
+import { computed, defineComponent, ref } from '@vue/runtime-core';
import { useRoute } from 'vue-router';
import { useStore } from '@/store/store';
@@ -69,12 +62,16 @@ export default defineComponent({
back: require('@/assets/icon-back.svg'),
},
+ selectedCheckpoint: '',
+
viewMode: 'info',
onlineFrom: -1,
}),
- activated() {},
+ activated() {
+ this.loadSelectedCheckpoint();
+ },
setup() {
const route = useRoute();
@@ -100,6 +97,17 @@ export default defineComponent({
setCardViewMode(mode: string) {
this.viewMode = mode;
},
+
+ loadSelectedCheckpoint() {
+ if (!this.stationInfo?.generalInfo?.checkpoints) return;
+ if (this.stationInfo.generalInfo.checkpoints.length == 0) return;
+
+ this.selectedCheckpoint = this.stationInfo.generalInfo.checkpoints[0].checkpointName;
+ },
+
+ selectCheckpoint(cp: { checkpointName: string }) {
+ this.selectedCheckpoint = cp.checkpointName;
+ },
},
});
@@ -108,20 +116,9 @@ export default defineComponent({
@import '../styles/responsive.scss';
@import '../styles/variables.scss';
-$sceneryBgCol: #333;
-
-.scenery-view-anim {
- &-enter-from,
- &-leave-to {
- opacity: 0;
- }
-
- &-enter-active {
- transition: all 100ms ease-out;
- }
-
- &-leave-active {
- transition: all 100ms ease-out 100ms;
+button.back-btn {
+ img {
+ width: 2em;
}
}
@@ -129,6 +126,8 @@ $sceneryBgCol: #333;
&-view {
display: flex;
justify-content: center;
+
+ min-height: 100vh;
}
&-offline {
@@ -156,30 +155,75 @@ $sceneryBgCol: #333;
position: relative;
width: 100%;
- max-width: 1500px;
+ max-width: 1700px;
- background: #292929;
- padding: 1.5em;
+ padding: 1em;
margin: 1rem 0;
- border-radius: 1.5em;
-
text-align: center;
}
.scenery-left {
- height: 80vh;
+ position: relative;
+ background-color: #181818;
+ padding: 1em 0.5em;
+
+ height: 95vh;
+ min-height: 550px;
max-height: 1000px;
+
+ overflow: auto;
+
+ display: flex;
+ flex-direction: column;
+}
+
+.scenery-right {
+ background: #181818;
+ padding: 2em 0.5em;
+
+ height: 95vh;
+ min-height: 550px;
+ max-height: 1000px;
+
+ display: grid;
+ grid-template-rows: 50px 1fr;
+ gap: 1em;
}
.scenery-actions {
display: flex;
- justify-content: space-between;
}
-button.btn {
- img {
- width: 2em;
+.info-actions {
+ display: flex;
+ justify-content: center;
+
+ .btn {
+ margin: 0.5em;
+ box-shadow: 0 0 10px 4px #242424;
+ }
+}
+
+.timetable-checkpoints {
+ display: flex;
+ justify-content: center;
+
+ flex-wrap: wrap;
+ font-size: 1.1em;
+ margin: 0.75em 0;
+
+ .checkpoint_item {
+ &.current {
+ font-weight: bold;
+ color: $accentCol;
+ }
+
+ &:not(:last-child)::after {
+ margin: 0 0.5em;
+ content: '•';
+ color: white;
+ }
}
}
@@ -189,7 +233,7 @@ button.btn {
gap: 0;
}
- .scenery-left {
+ .scenery-left {
height: auto;
margin-bottom: 2em;
}
-
+
+
+
+
@@ -271,58 +255,27 @@ export default defineComponent({
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
-h3.timetable-header {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
-
- font-size: 1.5em;
- margin: 1em 0;
-
- a {
- display: flex;
- }
-
- img {
- width: 1.2em;
- }
-}
-
-.timetable-only {
- margin-left: 0.5em;
-
- img {
- width: 1.1em;
- }
-
- &:focus {
- outline: 1px solid white;
- }
-}
-
-.scenery-timetable-list-anim {
- &-enter-from,
- &-leave-to {
- opacity: 0;
- }
-
- &-enter-active {
- transition: all 100ms ease-out;
- }
-
- &-leave-active {
- transition: all 100ms ease-out 100ms;
- }
-}
-
-.scenery-timetable-list {
- max-height: 75vh;
- overflow: auto;
+// .scenery-timetable {
+// height: 85vh;
+// max-height: 900px;
+// min-height: 450px;
+// }
+.scenery-timetable {
+ height: 100%;
+ overflow-y: scroll;
padding: 0 0.5em;
}
+.timetable-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: 1.3em;
+ margin-top: 1em;
+}
+
.timetable {
&-count {
margin-left: 0.5em;
@@ -366,13 +319,19 @@ h3.timetable-header {
}
}
-.checkpoints {
+.timetable-checkpoints {
display: flex;
justify-content: center;
flex-wrap: wrap;
font-size: 1.1em;
- margin: 0.75em 0;
+ padding: 0.75em 0;
+
+ position: sticky;
+ top: 0;
+ z-index: 555;
+
+ background-color: #181818;
.checkpoint_item {
&.current {
@@ -425,11 +384,14 @@ h3.timetable-header {
.info-route {
margin-top: 0.5em;
+ width: 100%;
}
.g-tooltip > .content {
z-index: 100;
color: white;
+
+ left: 110%;
}
img {
@@ -478,6 +440,7 @@ h3.timetable-header {
align-items: center;
margin: 0 0.3rem;
+ font-size: 1.1em;
}
&-stop {
@@ -503,6 +466,21 @@ h3.timetable-header {
font-size: 0.85em;
}
+.scenery-timetable-list-anim {
+ &-enter-from,
+ &-leave-to {
+ opacity: 0;
+ }
+
+ &-enter-active {
+ transition: all 100ms ease-out;
+ }
+
+ &-leave-active {
+ transition: all 100ms ease-out 100ms;
+ }
+}
+
@include smallScreen() {
.timetable {
&-item {
diff --git a/src/locales/en.json b/src/locales/en.json
index c4e9bde..208bbba 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -34,12 +34,14 @@
"real": "Scenery with real lines: "
},
"signals": {
+ "title": "Signal type",
"współczesna": "modern",
"mieszana": "mixed",
"kształtowa": "mechanical",
"historyczna": "historyczna"
},
"controls": {
+ "title": "Control type",
"SPK": "SPK",
"SCS": "SCS",
"SCS-SPK": "SCS/SPK",
@@ -241,7 +243,20 @@
"no-scenery": "Oops! This scenery doesn't exist!",
"return-btn": "Return to main site",
"history-btn": "View the dispatcher history",
- "info-btn": "Return to the scenery view"
+ "info-btn": "Return to the scenery view",
+ "authors-title": "Scenery author | Scenery authors",
+ "lines-title": "Real lines",
+ "project-title": "Project name",
+ "one-way-routes": "One way routes",
+ "two-way-routes": "Two way routes"
+ },
+ "availability": {
+ "title": "Availability",
+ "default": "in-game",
+ "nonDefault": "downloadable",
+ "unavailable": "unavailable",
+ "nonPublic": "private",
+ "abandoned": "abandoned"
},
"timetables": {
"timetable-only": "Switch to timetable-only view",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index f1e32cc..482a967 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -35,22 +35,24 @@
"abandoned": "Sceneria wycofana z rozgrywki"
},
"signals": {
+ "title": "Sygnalizacja",
"współczesna": "współczesna",
"mieszana": "mieszana",
"kształtowa": "kształtowa",
"historyczna": "historyczna"
},
"controls": {
+ "title": "Sterowanie",
"SPK": "SPK",
"SCS": "SCS",
"SCS-SPK": "SCS/SPK",
"SPE": "SPE",
"ręczne": "ręczne",
- "ręczne+SPK": "ręczne + SPK",
- "ręczne+SCS": "ręczne + SCS",
+ "ręczne+SPK": "ręczne z SPK",
+ "ręczne+SCS": "ręczne z SCS",
"mechaniczne": "mechaniczne",
- "mechaniczne+SPK": "mechaniczne + SPK",
- "mechaniczne+SCS": "mechaniczne + SCS"
+ "mechaniczne+SPK": "mechaniczne z SPK",
+ "mechaniczne+SCS": "mechaniczne z SCS"
},
"status": {
"online": "DO ",
@@ -242,7 +244,20 @@
"no-scenery": "Ups! Ta sceneria nie istnieje!",
"return-btn": "Wróć na stronę główną",
"history-btn": "Przejdź do widoku historii dyżurnych ruchu",
- "info-btn": "Wróc do widoku scenerii"
+ "info-btn": "Wróc do widoku scenerii",
+ "authors-title": "Autor scenerii | Autorzy scenerii",
+ "lines-title": "Rzeczywiste linie",
+ "project-title": "Projekt",
+ "one-way-routes": "Szlaki jednotorowe",
+ "two-way-routes": "Szlaki dwutorowe"
+ },
+ "availability": {
+ "title": "Dostępność",
+ "default": "w paczce",
+ "nonDefault": "poza paczką",
+ "unavailable": "niedostępna",
+ "nonPublic": "niepubliczna",
+ "abandoned": "wycofana"
},
"timetables": {
"timetable-only": "Wyodrębnij rozkłady jazdy",
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98a3edf..5186acd 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -25,7 +25,6 @@ body {
padding: 0;
font-family: 'Quicksand', sans-serif;
overflow-y: scroll;
-
}
*:focus-visible {
@@ -59,19 +58,16 @@ body {
.content {
position: absolute;
- left: 50%;
- top: 0;
+ left: 0;
z-index: 100;
- transform: translate(-50%, -120%);
-
visibility: hidden;
opacity: 0;
min-width: 250px;
- background-color: gray;
+ background-color: #202020;
text-align: center;
border-radius: 0.5em;
@@ -79,25 +75,14 @@ body {
transition: opacity 0.3s;
padding: 0.25em;
- &::after {
- content: '';
- position: absolute;
- top: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: gray transparent transparent transparent;
- }
+ // @include smallScreen() {
+ // right: 0;
+ // left: 0;
- @include smallScreen() {
- right: 0;
- left: 0;
-
- &::after {
- left: 75%;
- }
- }
+ // &::after {
+ // left: 75%;
+ // }
+ // }
}
&:hover > .content {
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 1ad9aad..9ce0e66 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -11,26 +11,9 @@
+
-
- {{ $t('scenery.no-timetables') }}
+
+
+
+
+
+
+ {{ scheduledTrain.category }}
+ {{ scheduledTrain.trainNo }}
+
+
+ ![]()
+
+
+
+ |
+
+ {{ scheduledTrain.driverName }}
+
+ |
+
+
+ {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
+ {{ scheduledTrain.prevStationName }}
+ {{
+ scheduledTrain.nextStationName
+ }}
+
+
+
+
+
+
+ {{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}
+
+
-
-
-
-
- {{ scheduledTrain.category }}
- {{ scheduledTrain.trainNo }}
+
+
+
+ {{ $t('timetables.begins') }}
+
-
- ![]()
-
-
-
- |
-
- {{ scheduledTrain.driverName }}
-
- |
-
-
- {{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
- {{ scheduledTrain.prevStationName }}
- {{
- scheduledTrain.nextStationName
- }}
-
-
+
+
-
+
+ {{ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp) }}
+
+
+
+
+
+
+ {{ $t('timetables.terminates') }}
+
+
+
+
+ {{
+ timestampToString(scheduledTrain.stopInfo.arrivalTimestamp)
+ }}
+
-
- {{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}
+
+ {{ timestampToString(scheduledTrain.stopInfo.arrivalRealTimestamp) }}
+ ({{ scheduledTrain.stopInfo.arrivalDelay > 0 ? '+' : '' }}{{ scheduledTrain.stopInfo.arrivalDelay }})
+
-
+ {{ timestampToString(scheduledTrain.stopInfo.departureTimestamp) }}
+
+
+
+
+
+
+ {{
+ timestampToString(scheduledTrain.stopInfo.departureTimestamp)
+ }}
+
+
+
+ {{ timestampToString(scheduledTrain.stopInfo.departureRealTimestamp) }}
+ ({{ scheduledTrain.stopInfo.departureDelay > 0 ? '+' : ''
+ }}{{ scheduledTrain.stopInfo.departureDelay }})
+
+
-
-
+
+
+
+
+
+