Zmiany w wyglądzie listy pociągów

src/App.vue

@@ -39,9 +39,7 @@
         </transition>
       </main>
 
-      <footer class="app-footer flex">
-        <span>&copy; Spythere 2020</span>
-      </footer>
+      <footer class="app-footer flex">&copy; Spythere 2020</footer>
 
       <transition name="message-anim" mode="out-in">
         <span :key="data.dataConnectionStatus">

src/components/StationsView/FilterCard.vue

@@ -21,7 +21,8 @@
           <span
             class="option-content"
             :class="option.section + (option.value ? ' checked' : '')"
-          >{{option.content}}</span>
+            >{{ option.content }}</span
+          >
         </label>
       </div>
     </div>
@@ -39,17 +40,24 @@
           @change="handleInput"
         />
 
-        <span class="slider-value">{{slider.value}}</span>
+        <span class="slider-value">{{ slider.value }}</span>
 
-        <div class="slider-content">{{slider.content}}</div>
+        <div class="slider-content">{{ slider.content }}</div>
       </div>
     </div>
 
     <div class="card-save">
-      <div class="option">
+      <div class="option save">
         <label class="option-label">
-          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="option-content save" :class="{'checked': saveOptions}">ZAPISZ FILTRY</span>
+          <input
+            class="option-input"
+            type="checkbox"
+            v-model="saveOptions"
+            @change="saveFilters"
+          />
+          <span class="option-content save" :class="{ checked: saveOptions }"
+            >ZAPISZ FILTRY</span
+          >
         </label>
       </div>
     </div>
@@ -161,7 +169,8 @@ export default class FilterCard extends Vue {
 
   background: #262a2e;
 
-  font-size: calc(0.75rem + 0.4vw);
+  font-size: calc(0.75rem + 0.45vw);
+
   box-shadow: 0 0 15px 5px #474747;
 
   @include smallScreen() {
@@ -175,12 +184,6 @@ export default class FilterCard extends Vue {
 }
 
 .card {
-  &-exit {
-    img {
-      width: 1.2em;
-    }
-  }
-
   &-title {
     font-size: 2em;
     font-weight: 700;
@@ -217,6 +220,12 @@ export default class FilterCard extends Vue {
       font-size: 0.9em;
     }
   }
+
+  &-exit {
+    img {
+      width: 2em;
+    }
+  }
 }
 
 .option {
@@ -248,6 +257,10 @@ export default class FilterCard extends Vue {
 
     transition: all 0.2s;
 
+    &.save {
+      font-size: 0.8em;
+    }
+
     &:not(.checked) {
       background-color: #585858;
 

src/components/StationsView/StationCard.vue

@@ -137,7 +137,7 @@
         <h3 class="users-title title">GRACZE NA STACJI</h3>
         <div class="users-content">
           <div
-            class="user"
+            class="user-badge"
             :class="train.stopStatus"
             v-for="train in computedStationTrains"
             :key="train.trainNo + train.driverName"
@@ -168,7 +168,7 @@
 
     <StationTimetable
       :class="{ show: cardMode == 1 }"
-      :scheduledTrains="computedScheduledTrains"
+      :scheduledTrains="this.stationInfo.scheduledTrains"
       :stationName="stationInfo.stationName"
     />
   </section>
@@ -202,28 +202,9 @@ export default class StationCard extends styleMixin {
       : `${this.stationInfo.dispatcherExp}`;
   }
 
-  get computedScheduledTrains() {
-    return this.stationInfo.scheduledTrains.map(scheduledTrain => {
-      let stopStatus = "";
-      let stopLabel = "";
-
-      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 {
-        ...scheduledTrain,
-        stopStatus,
-        stopLabel
-      }
-    })
-  }
-
   get computedStationTrains() {
     return this.stationInfo.stationTrains.map(stationTrain => {
-      const scheduledData = this.computedScheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
+      const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
 
       return {
         ...stationTrain,
@@ -237,6 +218,7 @@ export default class StationCard extends styleMixin {
 <style lang="scss" scoped>
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
+@import "../../styles/user_badge.scss";
 
 .title {
   color: $accentCol;
@@ -425,44 +407,6 @@ export default class StationCard extends styleMixin {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-
-    & > .user {
-      padding: 0.3rem;
-      margin: 0.3rem;
-      border: 1px solid white;
-      border-radius: 0.4em;
-
-      &.borderless {
-        border: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      &.no-timetable {
-        border: 1px solid #aaa;
-
-        a {
-          color: #aaa;
-          pointer-events: none;
-        }
-      }
-
-      &.departed {
-        border: 1px solid lime;
-      }
-
-      &.stopped {
-        border: 1px solid #ffa600;
-      }
-
-      &.online {
-        border: 1px solid gold;
-      }
-
-      &.terminated {
-        border: 1px solid red;
-      }
-    }
   }
 }
 

src/components/StationsView/StationTimetable.vue

@@ -25,8 +25,9 @@
                 <span>
                   <strong>{{ scheduledTrain.category }}</strong>
                   {{ scheduledTrain.trainNo }}
-                </span> </router-link
-              >|
+                </span>
+              </router-link>
+              |
               <span>
                 <a
                   :href="

src/components/TrainsView/TrainSorter.vue

@@ -5,12 +5,12 @@
         <div class="title">Sortuj według</div>
 
         <div class="selected" @click="toggleOptionList">
-          <span>{{sorterName}}</span>
+          <span>{{ sorterName }}</span>
           <img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
         </div>
 
         <div class="options-container">
-          <ul class="options-list" :class="{'open': listOpen}">
+          <ul class="options-list" :class="{ open: listOpen }">
             <li
               class="option"
               v-for="(option, i) in sortOptionList"
@@ -18,7 +18,7 @@
               @click="() => chooseOption(option)"
             >
               <input type="radio" name="sort" :id="option.id" />
-              <label :for="option.id">{{option.content}}</label>
+              <label :for="option.id">{{ option.content }}</label>
             </li>
           </ul>
         </div>
@@ -137,7 +137,7 @@ export default class TrainSorter extends Vue {
   top: 0;
   left: 0;
 
-  z-index: 5;
+  z-index: 10;
 
   width: 100%;
   background-color: rgba(#222, 0.95);

src/components/TrainsView/TrainStats.vue

@@ -200,7 +200,7 @@ export default class TrainStats extends Vue {
 .train-stats {
   padding: 0.3em 0;
   font-size: 1.1em;
-  z-index: 2;
+  z-index: 5;
 
   position: relative;
 }

src/components/TrainsView/TrainTable.vue

@@ -6,47 +6,59 @@
 
     <ul class="train-list">
       <li
-        class="train-item"
+        class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
         :id="train.timetableData.timetableId"
-        @click="
-          () => {
-            changeFocusedTrain(train.trainNo);
-          }
-        "
       >
-        <span class="train-info">
-          <span class="info">
-            <div class="info-top">
+        <span class="wrapper">
+          <span
+            class="info"
+            @click="changeScheduleShowState(train.timetableData.timetableId)"
+          >
+            <div class="info-main">
               <div class="info-category">
                 <span>
                   <strong>{{ train.timetableData.category }}</strong>
                   {{ train.trainNo }} |
-                  <span style="color: gold"
-                    >{{ train.timetableData.routeDistance }} km</span
-                  >
+                  <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 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">
-                <strong>
-                  {{ train.timetableData.route.replace("|", " - ") }}
-                </strong>
+                <span class="info-route-text">
+                  <strong>
+                    {{ train.timetableData.route.replace("|", " - ") }}
+                  </strong>
+                </span>
+
+                <span class="info-route-arrow">
+                  <img
+                    :src="
+                      showedSchedule === train.timetableData.timetableId
+                        ? ascSVG
+                        : descSVG
+                    "
+                    alt="asc-arrow"
+                  />
+                </span>
               </div>
 
-              <div class="info-stations">
+              <div class="info-stops">
                 <span v-if="train.timetableData.followingStops.length > 2">
                   Przez:
+
                   <span
                     v-html="
                       generateStopList(train.timetableData.followingStops)
@@ -57,18 +69,16 @@
             </div>
 
             <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)
-                "
+              <span
+                class="info-label user-badge tooltip"
+                :class="train.stopStatus"
+                :style="!train.online ? 'color: gray' : ''"
+                v-if="train.stopStatus"
               >
-                ROZKŁAD JAZDY
-              </button>
+                {{ train.stopLabel }}
+
+                <span class="content" v-if="!train.online">Pociąg offline</span>
+              </span>
             </div>
           </span>
 
@@ -77,55 +87,58 @@
               <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>
+                {{ train.driverName }}
+              </a>
             </span>
+
+            <span class="driver-type">
+              {{ train.locoType }}
+            </span>
+
             <span class="driver-loco">
               <img :src="train.locoURL" @error="onImageError" />
             </span>
           </span>
 
           <span class="stats">
-            <div class="stats-general">
-              <span class="stat mass">
+            <div class="stats-main">
+              <span class="mass">
                 <img :src="massIcon" alt="icon-mass" />
                 {{ train.mass / 1000 }}t
               </span>
 
-              <span class="stat speed">
+              <span class="speed">
                 <img :src="speedIcon" alt="icon-speed" />
                 {{ train.speed }} km/h
               </span>
 
-              <span class="stat length">
+              <span class="length">
                 <img :src="lengthIcon" alt="icon-length" />
                 {{ train.length }}m
               </span>
             </div>
 
             <div class="stats-position">
-              <span class="stat station">
+              <span class="station">
                 <div class="stat-icon">
                   <img :src="sceneryIcon" alt="icon-scenery" />
                 </div>
                 {{ train.currentStationName || "---" }}
               </span>
-              <span class="stat track">
+              <span class="track">
                 <div class="stat-icon">
                   <img :src="routeIcon" alt="icon-scenery" />
                 </div>
                 {{ train.connectedTrack || "---" }}
               </span>
-              <span class="stat signal">
+              <span class="signal">
                 <div class="stat-icon">
                   <img :src="signalIcon" alt="icon-scenery" />
                 </div>
                 {{ train.signal || "---" }}
               </span>
-              <span class="stat distance">
+              <span class="distance">
                 <div class="stat-icon">
                   <img :src="distanceIcon" alt="icon-scenery" />
                 </div>
@@ -151,6 +164,9 @@ import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 
 const unknownTrainImage = require("@/assets/unknown.png");
 
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
+
 import Train from "@/scripts/interfaces/Train";
 import Station from "@/scripts/interfaces/Station";
 
@@ -164,6 +180,9 @@ export default class TrainTable extends Vue {
 
   showedSchedule = 0;
 
+  ascSVG = ascSVG;
+  descSVG = descSVG;
+
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
   lengthIcon: string = require("@/assets/icon-length.svg");
@@ -192,15 +211,14 @@ export default class TrainTable extends Vue {
     }, []).join(" * ");
   }
 
-  changeFocusedTrain(trainNo: number) {
-    // this.$emit('changeFocusedTrain', trainNo.toString());
-  }
+
 }
 </script>
 
 <style lang="scss" scoped>
 @import "../../styles/responsive.scss";
 @import "../../styles/variables.scss";
+@import "../../styles/user_badge.scss";
 
 .no-trains {
   text-align: center;
@@ -214,38 +232,36 @@ export default class TrainTable extends Vue {
 
 .train {
   &-list {
-    overflow: auto;
-
     @include smallScreen() {
       width: 100%;
     }
   }
 
-  &-item {
+  &-row {
     padding: 1rem;
     margin-bottom: 1rem;
 
     background-color: $primaryCol;
 
     cursor: pointer;
-  }
-}
 
-.train-info {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  font-size: calc(0.4rem + 0.5vw);
+    & > .wrapper {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      font-size: calc(0.4rem + 0.5vw);
 
-  @include smallScreen() {
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, minmax(100px, 1fr));
+      @include smallScreen() {
+        grid-template-columns: 1fr;
+        grid-template-rows: repeat(3, minmax(100px, 1fr));
 
-    font-size: 0.8rem;
-    gap: 0.4em 0;
-  }
+        font-size: 0.8rem;
+        gap: 0.4em 0;
+      }
 
-  @include bigScreen() {
-    font-size: 1.1rem;
+      @include bigScreen() {
+        font-size: 1.1rem;
+      }
+    }
   }
 }
 
@@ -265,9 +281,14 @@ export default class TrainTable extends Vue {
   &-route {
     width: 100%;
     font-size: 1.2em;
+
+    &-arrow img {
+      border: 2px solid white;
+      vertical-align: middle;
+    }
   }
 
-  &-stations {
+  &-stops {
     margin-top: 0.35em;
     margin-bottom: 1rem;
 
@@ -319,6 +340,12 @@ export default class TrainTable extends Vue {
 
   &-name {
     margin: 0 0.3em;
+    font-weight: bold;
+  }
+
+  &-type {
+    color: #bbb;
+    margin-left: 1em;
   }
 
   &-loco {
@@ -333,11 +360,11 @@ export default class TrainTable extends Vue {
 }
 
 .stats {
-  &-general {
+  &-main {
     display: flex;
     margin-bottom: 1.5em;
 
-    & > .stat {
+    & > span {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -363,7 +390,7 @@ export default class TrainTable extends Vue {
       color: #00cff3;
     }
 
-    & > .stat {
+    & > span {
       width: 100%;
 
       img {

src/scripts/interfaces/Station.ts

@@ -35,5 +35,8 @@ export default interface Station {
     currentStationName: string;
     category: string;
     stopInfo: TrainStop;
+
+    stopLabel: string;
+    stopStatus: string;
   }[];
 }

src/scripts/interfaces/Train.ts

@@ -24,4 +24,7 @@ export default interface Train {
     SKR: boolean;
     routeDistance: number;
   };
+
+  stopStatus: string;
+  stopLabel: string;
 }

src/store/store.ts

@@ -370,7 +370,7 @@ export default class Store extends VuexModule {
   @Mutation
   private updateTimetableData(timetableList: any[]) {
     this.stationList = this.stationList.map(station => {
-      const scheduledTrains = timetableList.reduce((acc, timetableData: any) => {
+      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: any) => {
         const scheduledIndex = timetableData
           ? timetableData.followingStops.findIndex((stop: any) => {
               const stationName = station.stationName.toLowerCase();
@@ -385,7 +385,16 @@ export default class Store extends VuexModule {
           : -1;
 
         if (scheduledIndex >= 0) {
-          const scheduledData = timetableData.followingStops[scheduledIndex];
+          const stopInfo = timetableData.followingStops[scheduledIndex];
+
+          let stopStatus = "";
+          let stopLabel = "";
+
+          if (stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "terminated"; stopLabel = "Skończył bieg" }
+          else if (!stopInfo.terminatesHere && stopInfo.confirmed) { stopStatus = "departed"; stopLabel = "Odprawiony" }
+          else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) { stopStatus = "online"; stopLabel = "Na stacji" }
+          else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) { stopStatus = "stopped"; stopLabel = "Postój" }
+          else if (timetableData.currentStationName != station.stationName) { stopStatus = "arriving"; stopLabel = "W drodze" }
 
           acc.push({
             trainNo: timetableData.trainNo,
@@ -393,7 +402,9 @@ export default class Store extends VuexModule {
             driverId: timetableData.driverId,
             currentStationName: timetableData.currentStationName,
             category: timetableData.category,
-            stopInfo: scheduledData,
+            stopInfo,
+            stopLabel,
+            stopStatus
           });
         }
 
@@ -406,7 +417,13 @@ export default class Store extends VuexModule {
     this.trainList = this.trainList.reduce((acc, train) => {
       const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
 
-      if (timetableData) acc.push({ ...train, timetableData });
+      if (timetableData) {
+        const trainData = this.stationList
+          .find(station => station.stationName === train.currentStationName)?.scheduledTrains
+          .find(stationTrain => stationTrain.trainNo === train.trainNo);
+        
+        acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || "", stopLabel: trainData?.stopLabel || "" });
+      }
 
       return acc;
     }, [] as Train[]);

src/styles/global.scss

@@ -16,6 +16,50 @@
   }
 }
 
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  z-index: 5;
+  
+  & > .content {
+    visibility: hidden;
+    width: 120px;
+    background-color: #830000;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    font-size: 1rem;
+
+    position: absolute;
+    bottom: 155%;
+    left: 50%;
+    margin-left: -60px;
+
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #aa0000 transparent transparent transparent;
+    }
+  }
+
+  &:hover > .content {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
 html {
   scroll-behavior: smooth;
 }

src/styles/user_badge.scss

@@ -0,0 +1,48 @@
+$no-timetable: #aaa;
+$departed: lime;
+$stopped: #ffa600;
+$online: gold;
+$terminated: red;
+
+.user-badge {
+    border: 1px solid white;
+    z-index: 4;
+
+    margin-top: 0.3rem;
+    margin-right: 0.3rem;
+
+    border-radius: 0.7em;
+    padding: 0.2em 0.5em;
+    font-size: 0.95em;
+
+    &.borderless {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &.no-timetable {
+        border: 1px solid $no-timetable;
+
+        a {
+            color: $no-timetable;
+            pointer-events: none;
+        }
+    }
+
+    &.departed {
+        border: 1px solid $departed;
+    }
+
+    &.stopped {
+        border: 1px solid $stopped;
+    }
+
+    &.online {
+        border: 1px solid $online;
+    }
+
+    &.terminated {
+        border: 1px solid $terminated;
+    }
+}

src/views/TrainsView.vue

@@ -12,7 +12,10 @@
       </div>
 
       <TrainStats :trains="trains" />
-      <TrainTable :computedTrains="computedTrains" @changeFocusedTrain="changeFocusedTrain" />
+      <TrainTable
+        :computedTrains="computedTrains"
+        @changeFocusedTrain="changeFocusedTrain"
+      />
     </div>
   </section>
 </template>