Dodano szczegółowy rozkład pociągów

2026-05-03 13:28:11 +00:00 · 2020-09-19 19:34:47 +02:00
parent e71a9e01f2
commit 0b4a32eeb2
14 changed files with 1064 additions and 683 deletions
@@ -186,10 +186,10 @@ export default class StationCard extends styleMixin {
      let stopStatus = "";
      let stopLabel = "";

-      if (scheduledTrain.terminatesHere && scheduledTrain.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
-      else if (!scheduledTrain.terminatesHere && scheduledTrain.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
-      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && !scheduledTrain.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
-      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && scheduledTrain.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+      if (scheduledTrain.stopInfo.terminatesHere && scheduledTrain.stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+      else if (!scheduledTrain.stopInfo.terminatesHere && scheduledTrain.stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && !scheduledTrain.stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+      else if (scheduledTrain.currentStationName == this.stationInfo.stationName && scheduledTrain.stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
      else if (scheduledTrain.currentStationName != this.stationInfo.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }

      return {
@@ -223,13 +223,11 @@ export default class StationCard extends styleMixin {
 }

 .station-card {
-  scroll-behavior: smooth;
-
-  font-size: calc(0.5rem + 0.4vw);
-  max-width: 850px;
+  font-size: calc(0.5rem + 0.35vw);
+  max-width: 800px;

  @include bigScreen {
-    font-size: 1.1rem;
+    font-size: 1rem;
  }

  @include smallScreen {
@@ -269,7 +267,7 @@ export default class StationCard extends styleMixin {
    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 200px;
-    max-height: 500px;
+    max-height: 600px;

    transform: translateY(0%);

@@ -126,7 +126,7 @@
                  /
                  <span
                    style="color:#bbb"
-                  >{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
+                  >{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
                </span>

                <span v-else>...</span>
@@ -33,29 +33,32 @@

          <span class="timetable-schedule">
            <span class="schedule-arrival">
-              <span class="arrival-time begins" v-if="scheduledTrain.beginsHere">ROZPOCZYNA BIEG</span>
+              <span
+                class="arrival-time begins"
+                v-if="scheduledTrain.stopInfo.beginsHere"
+              >ROZPOCZYNA BIEG</span>
              <span
                class="arrival-time"
                v-else
-              >{{timestampToTime(scheduledTrain.arrivalTime)}} ({{scheduledTrain.arrivalDelay}})</span>
+              >{{scheduledTrain.stopInfo.arrivalTimeString}} ({{scheduledTrain.stopInfo.arrivalDelay}})</span>
            </span>

            <span class="schedule-stop">
              <span
                class="stop-time"
-                v-if="scheduledTrain.stopTime"
-              >{{scheduledTrain.stopTime}} {{scheduledTrain.stopType}}</span>
+                v-if="scheduledTrain.stopInfo.stopTime"
+              >{{scheduledTrain.stopInfo.stopTime}} {{scheduledTrain.stopInfo.stopType}}</span>
              <span class="stop-arrow arrow"></span>
            </span>
            <span class="schedule-departure">
              <span
                class="departure-time terminates"
-                v-if="scheduledTrain.terminatesHere"
+                v-if="scheduledTrain.stopInfo.terminatesHere"
              >KOŃCZY BIEG</span>
              <span
                class="departure-time"
                v-else
-              >{{timestampToTime(scheduledTrain.departureTime)}} ({{scheduledTrain.departureDelay}})</span>
+              >{{scheduledTrain.stopInfo.departureTimeString}} ({{scheduledTrain.stopInfo.departureDelay}})</span>
            </span>
          </span>
        </div>
@@ -67,6 +70,8 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';

+import Station from "@/scripts/interfaces/Station";
+
@Component
 export default class StationTimetable extends Vue {
  @Prop() readonly scheduledTrains;
@@ -74,17 +79,10 @@ export default class StationTimetable extends Vue {

  get computedScheduledTrains() {
    return this.scheduledTrains.sort((a, b) => {
-      if (a.arrivalTime > b.arrivalTime) return 1;
-      else if ((a.arrivalTime < b.arrivalTime)) return -1;
+      if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
+      else if ((a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)) return -1;

-      return a.departureTime > b.departureTime ? 1 : -1;
-    })
-  }
-
-  timestampToTime(timestamp: number) {
-    return new Date(timestamp).toLocaleTimeString('pl-PL', {
-      hour: '2-digit',
-      minute: '2-digit',
+      return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
    })
  }
 }
@@ -0,0 +1,210 @@
+<template>
+  <div class="train-schedule">
+    <div class="schedule-wrapper">
+      <div class="schedule-bar"></div>
+
+      <ul class="schedule-list">
+        <li
+          class="schedule-item"
+          v-for="(stop, i) in followingStops"
+          :key="i"
+          :class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
+        >
+          <div class="progress-bar"></div>
+
+          <div
+            class="stop-line arrival"
+            v-if="i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine"
+          >{{ stop.arrivalLine }}</div>
+
+          <span class="stop-info">
+            <div class="info-indicator"></div>
+
+            <span class="info-name" v-html="stop.stopName"></span>
+            <span class="info-date">
+              <span
+                class="date-arrival"
+                v-if="!stop.beginsHere"
+                :class="{delayed: stop.arrivalDelay > 0, preponed: stop.arrivalDelay < 0}"
+              >p. {{stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay)}}</span>
+
+              <span
+                class="date-stop"
+                v-if="stop.stopTime"
+                :class="stop.stopType.replace(', ', '-')"
+              >{{ stop.stopTime }} {{ stop.stopType }}</span>
+
+              <span
+                class="date-departure"
+                v-if="!stop.terminatesHere && stop.stopTime != 0"
+                :class="{delayed: stop.departureDelay > 0, preponed: stop.departureDelay < 0}"
+              >o. {{ stylizeTime(stop.departureRealTimeString, stop.departureDelay) }}</span>
+            </span>
+          </span>
+
+          <div class="stop-line departure">{{ stop.departureLine }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+import TrainStop from "@/scripts/interfaces/TrainStop";
+
+@Component
+export default class TrainSchedule extends Vue {
+  @Prop() readonly followingStops!: TrainStop[];
+  @Prop() readonly currentStationName!: string;
+
+  stylizeTime(timeString: string, delay: number) {
+    return timeString + (delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "");
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.train-schedule {
+  max-height: 600px;
+  overflow: auto;
+  margin-top: 1rem;
+
+  font-size: 1em;
+
+  @include smallScreen() {
+    font-size: 0.8em;
+  }
+}
+
+.schedule-bar,
+.progress-bar {
+  position: absolute;
+  z-index: 1;
+
+  width: 2px;
+  height: 100%;
+
+  top: 0;
+  left: 0;
+
+  background: white;
+}
+
+.progress-bar {
+  height: 100%;
+
+  top: 0;
+  left: calc(-0.5rem - 2px);
+  width: 2px;
+}
+
+.schedule-wrapper {
+  position: relative;
+  margin-top: 1rem;
+  margin-left: 0.5rem;
+}
+
+ul.schedule-list {
+  margin-left: 10px;
+}
+
+ul.schedule-list > li.schedule-item {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: 0 0.5rem;
+
+  &.confirmed {
+    & > .progress-bar,
+    & > .stop-info > .info-indicator {
+      background: lime;
+    }
+  }
+
+  &.stopped {
+    & > .progress-bar {
+      background: lime;
+      height: 50%;
+    }
+
+    & > .stop-info > .info-indicator {
+      background: orangered;
+    }
+  }
+}
+
+li.schedule-item > .stop-info {
+  display: flex;
+
+  position: relative;
+
+  & > .info-indicator {
+    position: absolute;
+    z-index: 1;
+
+    top: 50%;
+    left: -1.5rem;
+
+    transform: translateY(-50%);
+
+    width: 15px;
+    height: 2px;
+
+    background: white;
+  }
+
+  & > .info-name {
+    background: rgb(0, 81, 187);
+    padding: 0.3rem 0.5rem;
+  }
+
+  & > .info-date {
+    display: flex;
+    align-items: center;
+
+    & > span {
+      background: #5c5c5c;
+      padding: 0.3rem 0.5rem;
+    }
+
+    & > .date-stop {
+      &.ph,
+      &.ph-pm {
+        background: #ce8d00;
+      }
+
+      &.pt,
+      &.pm {
+        background: #252525;
+      }
+    }
+
+    & > .date-arrival,
+    & > .date-departure {
+      &.delayed {
+        background: rgb(250, 0, 0);
+      }
+
+      &.preponed {
+        background: rgb(0, 139, 0);
+      }
+    }
+  }
+}
+
+li.schedule-item > .stop-line {
+  font-size: 0.8em;
+  color: #bbb;
+  padding: 0.3em 0;
+  margin: 0.2em 0;
+
+  transform: translateX(-0.8rem);
+}
+</style>
@@ -185,6 +185,7 @@ export default class TrainStats extends Vue {
 .train-stats {
  padding: 0.3em 0;
  font-size: 1.1em;
+  z-index: 2;

  position: relative;
 }
@@ -2,129 +2,152 @@
  <div class="train-table">
    <div class="no-trains" v-if="computedTrains.length == 0">Ups! Brak pociągów do wyświetlenia :/</div>

-    <ul class="list">
-      <li class="item" v-for="(train, i) in computedTrains" :key="i">
-        <span class="info">
-          <div class="info-top">
-            <div class="info-category">
-              <span>
-                <strong>{{ train.timetableData.category }}</strong>
-                {{ train.trainNo }} |
-                <span
-                  style=" color: gold;"
-                >{{ train.timetableData.routeDistance }} km</span>
-              </span>
+    <ul class="train-list">
+      <li
+        class="train-item"
+        v-for="(train, i) in computedTrains"
+        :key="i"
+        :id="train.timetableData.timetableId"
+      >
+        <span class="train-info">
+          <span class="info">
+            <div class="info-top">
+              <div class="info-category">
+                <span>
+                  <strong>{{ train.timetableData.category }}</strong>
+                  {{ train.trainNo }} |
+                  <span
+                    style=" color: gold;"
+                  >{{ train.timetableData.routeDistance }} km</span>
+                </span>

-              <span>
-                <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
-                <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
-              </span>
-            </div>
+                <span>
+                  <span class="warning twr" v-if="train.timetableData.TWR">TWR</span>
+                  <span class="warning skr" v-if="train.timetableData.SKR">SKR</span>
+                </span>
+              </div>

-            <div class="info-route">
-              <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
+              <div class="info-route">
                <strong>
                  {{
                  train.timetableData.route.replace("|", " - ")
                  }}
                </strong>
-              </a>
+              </div>
+
+              <div class="info-stations">
+                <span v-if="train.timetableData.followingStops.length > 2">
+                  Przez:
+                  <span v-html="generateStopList(train.timetableData.followingStops)"></span>
+                </span>
+              </div>
            </div>

-            <div class="info-stations">
-              <span v-if="train.timetableData.followingStops.length > 2">
-                Przez:
-                <span v-html="generateStopList(train.timetableData.followingStops)"></span>
+            <div class="info-bottom">
+              <span
+                class="info-online"
+                :class="{'online': train.online}"
+              >{{train.online ? "ONLINE" : "OFFLINE"}}</span>
+
+              <button
+                class="button"
+                @click="changeScheduleShowState(train.timetableData.timetableId)"
+              >SZCZEGÓŁOWY ROZKŁAD</button>
+            </div>
+          </span>
+
+          <span class="driver">
+            <span class="driver-name">
+              <a
+                :href="'https://td2.info.pl/profile/?u=' + train.driverId"
+                target="_blank"
+              >{{ train.driverName }}</a>
+              <span style="color: #bbb; margin-left: 1em;">
+                {{
+                train.locoType
+                }}
+              </span>
+            </span>
+            <span class="driver-loco">
+              <img :src="train.locoURL" @error="onImageError" />
+            </span>
+          </span>
+
+          <span class="stats">
+            <div class="stats-general">
+              <span class="stat mass">
+                <img :src="massIcon" alt="icon-mass" />
+                {{ train.mass / 1000 }}t
+              </span>
+
+              <span class="stat speed">
+                <img :src="speedIcon" alt="icon-speed" />
+                {{ train.speed }} km/h
+              </span>
+
+              <span class="stat length">
+                <img :src="lengthIcon" alt="icon-length" />
+                {{ train.length }}m
              </span>
            </div>
-          </div>

-          <div class="info-bottom">
-            <span
-              class="info-online"
-              :class="{'online': train.online}"
-            >{{train.online ? "ONLINE" : "OFFLINE"}}</span>
-          </div>
-        </span>
-
-        <span class="driver">
-          <span class="driver-name">
-            <a
-              :href="'https://td2.info.pl/profile/?u=' + train.driverId"
-              target="_blank"
-            >{{ train.driverName }}</a>
-            <span style="color: #bbb; margin-left: 1em;">
-              {{
-              train.locoType
-              }}
-            </span>
-          </span>
-          <span class="driver-loco">
-            <img :src="train.locoURL" @error="onImageError" />
+            <div class="stats-position">
+              <span class="stat station">
+                <div class="stat-icon">
+                  <img :src="sceneryIcon" alt="icon-scenery" />
+                </div>
+                {{ train.currentStationName || "---" }}
+              </span>
+              <span class="stat track">
+                <div class="stat-icon">
+                  <img :src="routeIcon" alt="icon-scenery" />
+                </div>
+                {{ train.connectedTrack || "---" }}
+              </span>
+              <span class="stat signal">
+                <div class="stat-icon">
+                  <img :src="signalIcon" alt="icon-scenery" />
+                </div>
+                {{ train.signal || "---" }}
+              </span>
+              <span class="stat distance">
+                <div class="stat-icon">
+                  <img :src="distanceIcon" alt="icon-scenery" />
+                </div>
+                {{ train.distance || "0" }}m
+              </span>
+            </div>
          </span>
        </span>

-        <span class="stats">
-          <div class="stats-general">
-            <span class="stat mass">
-              <img :src="massIcon" alt="icon-mass" />
-              {{ train.mass / 1000 }}t
-            </span>
-
-            <span class="stat speed">
-              <img :src="speedIcon" alt="icon-speed" />
-              {{ train.speed }} km/h
-            </span>
-
-            <span class="stat length">
-              <img :src="lengthIcon" alt="icon-length" />
-              {{ train.length }}m
-            </span>
-          </div>
-
-          <div class="stats-position">
-            <span class="stat station">
-              <div class="stat-icon">
-                <img :src="sceneryIcon" alt="icon-scenery" />
-              </div>
-              {{ train.currentStationName || "---" }}
-            </span>
-            <span class="stat track">
-              <div class="stat-icon">
-                <img :src="routeIcon" alt="icon-scenery" />
-              </div>
-              {{ train.connectedTrack || "---" }}
-            </span>
-            <span class="stat signal">
-              <div class="stat-icon">
-                <img :src="signalIcon" alt="icon-scenery" />
-              </div>
-              {{ train.signal || "---" }}
-            </span>
-            <span class="stat distance">
-              <div class="stat-icon">
-                <img :src="distanceIcon" alt="icon-scenery" />
-              </div>
-              {{ train.distance || "0" }}m
-            </span>
-          </div>
-        </span>
+        <TrainSchedule
+          :followingStops="train.timetableData.followingStops"
+          :currentStationName="train.currentStationName"
+          @click="changeScheduleShowState(train.timetableData.timetableId)"
+          v-if="showSchedules.includes(train.timetableData.timetableId)"
+        />
      </li>
    </ul>
  </div>
 </template>

 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";

 const unknownTrainImage = require("@/assets/unknown.png");

 import Train from "@/scripts/interfaces/Train";
 import Station from "@/scripts/interfaces/Station";

-@Component
+import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
+
+@Component({
+  components: { TrainSchedule }
+})
 export default class TrainTable extends Vue {
-  @Prop() readonly computedTrains!: Train[];
+  @Prop() computedTrains!: Train[];
+
+  showSchedules: number[] = [];

  speedIcon: string = require("@/assets/icon-speed.svg");
  massIcon: string = require("@/assets/icon-mass.svg");
@@ -135,6 +158,11 @@ export default class TrainTable extends Vue {
  signalIcon: string = require("@/assets/icon-signal.svg");
  routeIcon: string = require("@/assets/icon-route.svg");

+  changeScheduleShowState(timetableId: number) {
+    if (this.showSchedules.includes(timetableId)) this.showSchedules.splice(this.showSchedules.indexOf(timetableId), 1)
+    else this.showSchedules.push(timetableId);
+  }
+
  onImageError(e: Event) {
    (e.target as HTMLImageElement).src = unknownTrainImage;
  }
@@ -156,10 +184,6 @@ export default class TrainTable extends Vue {
@import "../../styles/responsive.scss";
@import "../../styles/variables.scss";

-.train-table {
-  font-size: calc(0.4rem + 0.5vw);
-}
-
 .no-trains {
  text-align: center;
  font-size: 1.5em;
@@ -170,26 +194,29 @@ export default class TrainTable extends Vue {
  background: #333;
 }

-.list {
-  overflow: auto;
+.train {
+  &-list {
+    overflow: auto;

-  @include smallScreen() {
-    width: 100%;
+    @include smallScreen() {
+      width: 100%;
+    }
+  }
+
+  &-item {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    background-color: #383838;
+
+    cursor: pointer;
  }
 }

-.item {
+.train-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-
-  background-color: #444;
-  padding: 1rem;
-
-  margin-bottom: 1em;
-
-  &:nth-child(even) {
-    background-color: #666;
-  }
+  font-size: calc(0.4rem + 0.5vw);

  @include smallScreen() {
    grid-template-columns: 1fr;
@@ -197,7 +224,10 @@ export default class TrainTable extends Vue {

    font-size: 0.8rem;
    gap: 0.4em 0;
-    // grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include bigScreen() {
+    font-size: 1.1rem;
  }
 }

@@ -238,6 +268,19 @@ export default class TrainTable extends Vue {
      background-color: #009700;
    }
  }
+
+  &-bottom {
+    display: flex;
+    align-items: center;
+
+    button {
+      margin-left: 10px;
+      background: #144e75;
+      border-radius: 1em;
+      padding: 0.2em 0.5em;
+      font-size: 0.85em;
+    }
+  }
 }

 .driver {