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

src/components/TrainsView/TrainSchedule.vue

@@ -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>

src/components/TrainsView/TrainStats.vue

@@ -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;
 }

src/components/TrainsView/TrainTable.vue

@@ -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 {