Zmiana w wyglądzie elementów listy pociągów, poprawki kosmetyczne

src/components/StationsView/StationCard.vue

@@ -132,6 +132,14 @@
         </div>
       </div>
     </div>
+
+    <!-- <div class="card-timetables">
+      <div class="title">AKTYWNE ROZKŁADY JAZDY</div>
+      <div class="content">
+        <ul>
+        </ul>
+      </div>
+    </div>-->
   </section>
 </template>
 
@@ -356,4 +364,24 @@ export default class StationCard extends styleMixin {
     }
   }
 }
+
+.card-timetables {
+  position: absolute;
+  width: 100%;
+
+  height: 90%;
+
+  background: #333;
+
+  overflow: hidden;
+
+  bottom: 0;
+  left: 0;
+
+  .content {
+    position: absolute;
+  }
+
+  // transform: translateY(80%);
+}
 </style>

src/components/StationsView/StationTable.vue

@@ -1,145 +1,140 @@
 <template>
   <section class="station-table">
-    <div class="table-wrapper">
-      <table class="table">
-        <thead class="table-head">
-          <tr>
-            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
-              <span>
-                <div>
-                  <div>{{head[0]}}</div>
-                  <div v-if="head.length > 1">{{head[1]}}</div>
-                </div>
+    <table class="table" v-if="stations.length != 0">
+      <thead class="table-head">
+        <tr>
+          <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+            <span>
+              <div>
+                <div>{{head[0]}}</div>
+                <div v-if="head.length > 1">{{head[1]}}</div>
+              </div>
 
-                <img
-                  class="sort-icon"
-                  v-if="sorterActive.index == i"
-                  :src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
-                  alt
-                />
-              </span>
-            </th>
-          </tr>
-        </thead>
-
-        <tr
-          class="table-item"
-          v-for="(station, i) in computedStations"
-          :key="i + station.stationHash"
-          @click="() => {  setFocusedStation(station.stationName) }"
-        >
-          <td
-            class="item-station-name"
-            :class="{'default-station': station.default, 'online': station.online}"
-          >{{station.stationName}}</td>
-
-          <td class="item-station-level">
-            <span
-              v-if="station.reqLevel"
-              :style="calculateExpStyle(station.reqLevel)"
-            >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
-
-            <span v-else>?</span>
-          </td>
-
-          <td class="item-station-status">
-            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
-          </td>
-
-          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
-          <td class="item-dispatcher-exp">
-            <span
-              v-if="station.online"
-              :style="calculateExpStyle(station.dispatcherExp)"
-            >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
-          </td>
-          <td
-            class="item-users"
-          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-          <td class="item-info">
-            <img
-              class="icon-info"
-              v-if="station.controlType"
-              :src="require(`@/assets/icon-${station.controlType}.svg`)"
-              :alt="station.controlType"
-              :title="'Sterowanie ' + station.controlType"
-            />
-
-            <img
-              class="icon-info"
-              v-if="station.signalType"
-              :src="require(`@/assets/icon-${station.signalType}.svg`)"
-              :alt="station.signalType"
-              :title="'Sygnalizacja ' + station.signalType"
-            />
-
-            <img
-              class="icon-info"
-              v-if="station.SBL && station.SBL !== ''"
-              :src="require(`@/assets/icon-SBL.svg`)"
-              alt="SBL"
-              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-            />
-
-            <img
-              class="icon-info"
-              v-if="!station.reqLevel || station.nonPublic"
-              :src="require(`@/assets/icon-lock.svg`)"
-              alt="non-public"
-              title="Sceneria niepubliczna"
-            />
-          </td>
-
-          <td class="item-tracks twoway">
-            <span
-              v-if="station.routes && station.routes.twoWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
-            >{{station.routes.twoWay.catenary}}</span>
-
-            <span
-              v-if="station.routes && station.routes.twoWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
-            >{{station.routes.twoWay.noCatenary}}</span>
-
-            <span class="separator"></span>
-
-            <span
-              v-if="station.routes && station.routes.oneWay.catenary > 0"
-              class="track catenary"
-              :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
-            >{{station.routes.oneWay.catenary}}</span>
-
-            <span
-              v-if="station.routes && station.routes.oneWay.noCatenary > 0"
-              class="track no-catenary"
-              :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
-            >{{station.routes.oneWay.noCatenary}}</span>
-          </td>
-
-          <td class="active-timetables">
-            <transition name="change-anim" mode="out-in">
-              <span
-                :key="trainsDataState + station.scheduledTrains.length"
-                @click="() => getScheduledTrains(station.stationName)"
-              >
-                <span v-if="trainsDataState == 2">
-                  <span style="color:#eee">{{ station.scheduledTrains.length}}</span>
-                  /
-                  <span
-                    style="color:#bbb"
-                  >{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
-                </span>
-
-                <span v-else>...</span>
-              </span>
-            </transition>
-          </td>
+              <img
+                class="sort-icon"
+                v-if="sorterActive.index == i"
+                :src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
+                alt
+              />
+            </span>
+          </th>
         </tr>
-      </table>
-      <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
-    </div>
+      </thead>
+
+      <tr
+        class="table-item"
+        v-for="(station, i) in stations"
+        :key="i + station.stationHash"
+        @click="() => {  setFocusedStation(station.stationName) }"
+      >
+        <td
+          class="item-station-name"
+          :class="{'default-station': station.default, 'online': station.online}"
+        >{{station.stationName}}</td>
+
+        <td class="item-station-level">
+          <span
+            v-if="station.reqLevel"
+            :style="calculateExpStyle(station.reqLevel)"
+          >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+
+          <span v-else>?</span>
+        </td>
+
+        <td class="item-station-status">
+          <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+        </td>
+
+        <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+        <td class="item-dispatcher-exp">
+          <span
+            v-if="station.online"
+            :style="calculateExpStyle(station.dispatcherExp)"
+          >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
+        </td>
+        <td
+          class="item-users"
+        >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+        <td class="item-info">
+          <img
+            class="icon-info"
+            v-if="station.controlType"
+            :src="require(`@/assets/icon-${station.controlType}.svg`)"
+            :alt="station.controlType"
+            :title="'Sterowanie ' + station.controlType"
+          />
+
+          <img
+            class="icon-info"
+            v-if="station.signalType"
+            :src="require(`@/assets/icon-${station.signalType}.svg`)"
+            :alt="station.signalType"
+            :title="'Sygnalizacja ' + station.signalType"
+          />
+
+          <img
+            class="icon-info"
+            v-if="station.SBL && station.SBL !== ''"
+            :src="require(`@/assets/icon-SBL.svg`)"
+            alt="SBL"
+            title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+          />
+
+          <img
+            class="icon-info"
+            v-if="!station.reqLevel || station.nonPublic"
+            :src="require(`@/assets/icon-lock.svg`)"
+            alt="non-public"
+            title="Sceneria niepubliczna"
+          />
+        </td>
+
+        <td class="item-tracks twoway">
+          <span
+            v-if="station.routes && station.routes.twoWay.catenary > 0"
+            class="track catenary"
+            :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
+          >{{station.routes.twoWay.catenary}}</span>
+
+          <span
+            v-if="station.routes && station.routes.twoWay.noCatenary > 0"
+            class="track no-catenary"
+            :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
+          >{{station.routes.twoWay.noCatenary}}</span>
+
+          <span class="separator"></span>
+
+          <span
+            v-if="station.routes && station.routes.oneWay.catenary > 0"
+            class="track catenary"
+            :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
+          >{{station.routes.oneWay.catenary}}</span>
+
+          <span
+            v-if="station.routes && station.routes.oneWay.noCatenary > 0"
+            class="track no-catenary"
+            :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
+          >{{station.routes.oneWay.noCatenary}}</span>
+        </td>
+
+        <td class="active-timetables">
+          <transition name="change-anim" mode="out-in">
+            <span :key="station.scheduledTrains.length">
+              <span v-if="station.scheduledTrains">
+                <span style="color:#eee">{{ station.scheduledTrains.length}}</span>
+                /
+                <span
+                  style="color:#bbb"
+                >{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
+              </span>
+
+              <span v-else>...</span>
+            </span>
+          </transition>
+        </td>
+      </tr>
+    </table>
+    <div class="no-stations" v-else>Ups! Brak stacji do wyświetlenia!</div>
   </section>
 </template>
 
@@ -164,13 +159,12 @@ const descSVG = require("@/assets/icon-arrow-desc.svg");
 })
 export default class StationTable extends styleMixin {
   @Prop() readonly stations!: Station[];
-  @Prop() readonly setFocusedStation!: () => void;
+  @Prop() readonly sorterActive!: number;
 
-  @Getter("trainsDataList") trains!: Train[];
-  @Getter("trainsDataState") trainsDataState!: number;
+  @Prop() readonly setFocusedStation!: () => void;
+  @Prop() readonly changeSorter!: () => void;
 
   icons: { ascSVG; descSVG } = { ascSVG, descSVG };
-  sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
 
   headTitles: string[][] = [
     ["Stacja"],
@@ -183,108 +177,6 @@ export default class StationTable extends styleMixin {
     ["Szlaki", "2tor | 1tor"],
     ["Aktywne RJ"],
   ];
-
-  changeSorter(index: number) {
-    if (index > 5) return;
-
-    if (index == this.sorterActive.index)
-      this.sorterActive.dir = -1 * this.sorterActive.dir;
-    else this.sorterActive.dir = 1;
-
-    this.sorterActive.index = index;
-  }
-
-  getScheduledTrains(stationName: string) {
-    if (this.trainsDataState != 2) return null;
-    // console.log(
-    //   this.computedStations.find((s) => s.stationName === stationName)
-    //     ?.scheduledTrains
-    // );
-  }
-
-  get scheduledTrains() {
-    const reducedList = this.stations.reduce((acc, station) => {
-      if (!acc[station.stationName]) acc[station.stationName] = [];
-
-      this.trains
-        .filter((train) => !train.noTimetable)
-        .forEach((train) => {
-          const found = train.stopPoints!.find(
-            (sp) =>
-              (station.stationName
-                .toLowerCase()
-                .includes(sp.pointNameRAW.toLowerCase()) ||
-                station.stationName
-                  .toLowerCase()
-                  .includes(sp.pointNameRAW.toLowerCase().split(",")[0]) ||
-                station.stationName
-                  .toLowerCase()
-                  .includes(sp.pointNameRAW.toLowerCase().split(" ")[0])) &&
-              !acc[station.stationName].find((t) => t.trainNo === train.trainNo)
-          );
-
-          if (!found) return acc;
-
-          acc[station.stationName].push({
-            trainNo: train.trainNo,
-            driverName: train.driverName,
-            category: train.category,
-            ...found,
-          });
-        });
-
-      return acc;
-    }, {});
-
-    return reducedList;
-  }
-
-  get computedStations() {
-    const dir: number = this.sorterActive.dir;
-    const scheduledTrainList = this.scheduledTrains;
-
-    return this.stations
-      .sort((a, b) => {
-        switch (this.sorterActive.index) {
-          case 1:
-            if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
-            if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
-            break;
-
-          case 2:
-            if (a.statusTimestamp > b.statusTimestamp) return dir;
-            if (a.statusTimestamp < b.statusTimestamp) return -dir;
-            break;
-
-          case 3:
-            if (a.dispatcherName > b.dispatcherName) return dir;
-            if (a.dispatcherName < b.dispatcherName) return -dir;
-            break;
-
-          case 4:
-            if (a.dispatcherExp > b.dispatcherExp) return dir;
-            if (a.dispatcherExp < b.dispatcherExp) return -dir;
-            break;
-
-          case 5:
-            if (a.currentUsers > b.currentUsers) return dir;
-            if (a.currentUsers < b.currentUsers) return -dir;
-            if (a.maxUsers > b.maxUsers) return dir;
-            if (a.maxUsers < b.maxUsers) return -dir;
-            break;
-
-          default:
-            break;
-        }
-
-        if (a.stationName >= b.stationName) return dir;
-        return -dir;
-      })
-      .map((station) => ({
-        ...station,
-        scheduledTrains: scheduledTrainList[station.stationName],
-      }));
-  }
 }
 </script>
 
@@ -306,7 +198,9 @@ export default class StationTable extends styleMixin {
 }
 
 .station-table {
-  font-size: calc(0.6rem + 0.3vw);
+  font-size: calc(0.5rem + 0.3vw);
+  overflow: auto;
+  overflow-y: hidden;
 }
 
 .separator {
@@ -324,10 +218,6 @@ export default class StationTable extends styleMixin {
 }
 
 .table {
-  &-wrapper {
-    overflow: auto;
-  }
-
   white-space: nowrap;
   border-collapse: collapse;
 
@@ -335,15 +225,16 @@ export default class StationTable extends styleMixin {
     font-size: 0.6rem;
   }
 
+  thead th {
+    position: sticky;
+    top: 0;
+  }
+
   &-head th {
     padding: 0.3rem;
     background-color: #444;
     min-width: 120px;
 
-    position: sticky;
-    top: 0;
-    z-index: 2;
-
     cursor: pointer;
     user-select: none;
     -moz-user-select: none;

src/components/TrainsView/TrainSearch.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="train-search">
+    <span class="search train">
+      <div class="search-title title">Szukaj składu</div>
+      <div class="search-box">
+        <input class="search-input" v-model="searchedTrain" />
+        <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => searchedTrain = ''" />
+      </div>
+    </span>
+
+    <span class="search driver">
+      <div class="search-title title">Szukaj maszynisty</div>
+      <div class="search-box">
+        <input class="search-input" v-model="searchedDriver" />
+        <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => searchedDriver = ''" />
+      </div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+
+@Component
+export default class extends Vue {
+  exitIcon = require("@/assets/icon-exit.svg");
+  searchedTrain = "";
+  searchedDriver = "";
+
+  @Watch("searchedTrain")
+  onSearchedTrainChanged(val: string, oldVal: string) {
+    this.$emit("changeSearchedTrain", val);
+  }
+
+  @Watch("searchedDriver")
+  onSearchedDriverChanged(val: string, oldVal: string) {
+    this.$emit("changeSearchedDriver", val);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+
+.train-search {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  margin-bottom: 1rem;
+}
+
+.search {
+  padding-right: 1rem;
+
+  &-box {
+    position: relative;
+
+    background: #333;
+    border-radius: 0.5em;
+    min-width: 150px;
+  }
+
+  &-input {
+    border: none;
+
+    padding: 0.5rem 1rem;
+    margin: 0;
+
+    font-size: 1em;
+
+    min-width: 85%;
+  }
+
+  &-exit {
+    position: absolute;
+    cursor: pointer;
+
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+
+    width: 1em;
+  }
+}
+</style>

src/components/TrainsView/TrainTable.vue

@@ -3,9 +3,9 @@
     <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 in computedTrains" :key="train.timetableId">
-        <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
-          <span class="info">
+      <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.category }}</strong>
@@ -20,24 +20,37 @@
             </div>
 
             <div class="info-route">
-              <strong>
-                {{
-                train.route && train.route.replace("|", " - ")
-                }}
-              </strong>
+              <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
+                <strong>
+                  {{
+                  train.route && train.route.replace("|", " - ")
+                  }}
+                </strong>
+              </a>
             </div>
 
             <div class="info-stations">
-              <i
-                v-if="train.sceneries.length > 2"
-              >Przez: {{ mapTimetableSceneries(train.sceneries) }}</i>
+              <span v-if="train.sceneries.length > 2">
+                Przez:
+                <span v-html="mapTimetableSceneries(train.sceneries)"></span>
+              </span>
             </div>
-          </span>
-        </a>
+          </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">
-            {{ train.driverName }}
+            <a
+              :href="'https://td2.info.pl/profile/?u=' + train.driverId"
+              target="_blank"
+            >{{ train.driverName }}</a>
             <span style="color: #bbb; margin-left: 1em;">
               {{
               train.locoType
@@ -51,41 +64,47 @@
 
         <span class="stats">
           <div class="stats-general">
-            <span class="mass">
+            <span class="stat mass">
               <img :src="massIcon" alt="icon-mass" />
               {{ train.mass / 1000 }}t
             </span>
 
-            <span class="speed">
+            <span class="stat speed">
               <img :src="speedIcon" alt="icon-speed" />
               {{ train.speed }} km/h
             </span>
 
-            <span class="length">
+            <span class="stat length">
               <img :src="lengthIcon" alt="icon-length" />
               {{ train.length }}m
             </span>
           </div>
 
           <div class="stats-position">
-            <span class="station">
-              <p>
-                <strong>SCENERIA</strong>
-              </p>
-              {{ train.currentStationName }}
+            <span class="stat station">
+              <div class="stat-icon">
+                <img :src="sceneryIcon" alt="icon-scenery" />
+              </div>
+              {{ train.currentStationName || "---" }}
             </span>
-            <span class="track">
-              <p>
-                <strong>SZLAK</strong>
-              </p>
+            <span class="stat track">
+              <div class="stat-icon">
+                <img :src="routeIcon" alt="icon-scenery" />
+              </div>
               {{ train.connectedTrack || "---" }}
             </span>
-            <span class="signal">
-              <p>
-                <strong>SEMAFOR</strong>
-              </p>
+            <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>
       </li>
@@ -112,6 +131,11 @@ export default class TrainTable extends Vue {
   massIcon: string = require("@/assets/icon-mass.svg");
   lengthIcon: string = require("@/assets/icon-length.svg");
 
+  distanceIcon: string = require("@/assets/icon-distance.svg");
+  sceneryIcon: string = require("@/assets/icon-scenery.svg");
+  signalIcon: string = require("@/assets/icon-signal.svg");
+  routeIcon: string = require("@/assets/icon-route.svg");
+
   onImageError(e: Event) {
     (e.target as HTMLImageElement).src = unknownTrainImage;
   }
@@ -166,7 +190,7 @@ export default class TrainTable extends Vue {
 
   @include smallScreen() {
     grid-template-columns: 1fr;
-    grid-template-rows: repeat(3, 1fr);
+    grid-template-rows: repeat(3, minmax(100px, 1fr));
 
     font-size: 0.8rem;
     gap: 0.4em 0;
@@ -176,7 +200,8 @@ export default class TrainTable extends Vue {
 
 .info {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: space-between;
 
   &-category {
     flex-grow: 2;
@@ -192,6 +217,19 @@ export default class TrainTable extends Vue {
     margin-top: 0.35em;
     font-size: 0.75em;
   }
+
+  &-online {
+    background-color: #ce0000;
+
+    padding: 0.2em 0.7em;
+    font-size: 0.85em;
+
+    border-radius: 1em;
+
+    &.online {
+      background-color: #009700;
+    }
+  }
 }
 
 .driver {
@@ -225,23 +263,21 @@ export default class TrainTable extends Vue {
 }
 
 .stats {
-  width: 100%;
-
   &-general {
     display: flex;
+    margin-bottom: 1.5em;
 
-    span {
+    & > .stat {
       display: flex;
       justify-content: center;
+      align-items: center;
 
       width: 100%;
-
-      align-items: center;
     }
 
     img {
       margin: 0 0.3em;
-      width: 1.8em;
+      width: 2em;
     }
   }
 
@@ -251,14 +287,19 @@ export default class TrainTable extends Vue {
     margin-top: 1em;
     text-align: center;
 
-    span {
-      width: 100%;
-      font-size: 300;
-    }
+    font-size: 0.9em;
 
     p {
       color: #00cff3;
     }
+
+    & > .stat {
+      width: 100%;
+
+      img {
+        width: 2em;
+      }
+    }
   }
 }
 
@@ -285,4 +326,10 @@ export default class TrainTable extends Vue {
     font-size: 1rem;
   }
 }
+
+@include smallScreen() {
+  .info-bottom {
+    text-align: center;
+  }
+}
 </style>