From 07b98d2490a71777c405f37734b6c121eebe9fc6 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 4 Mar 2021 12:47:57 +0100
Subject: [PATCH] =?UTF-8?q?Poprawki=20wygl=C4=85du=20zak=C5=82adki=20poci?=
 =?UTF-8?q?=C4=85g=C3=B3w=20i=20scenerii?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                 |   2 +-
 src/components/SceneryView/SceneryInfo.vue  |   5 +-
 src/components/StationsView/StationCard.vue | 426 --------------------
 src/components/TrainsView/TrainSchedule.vue |  37 +-
 src/components/TrainsView/TrainTable.vue    |  42 +-
 src/views/SceneryView.vue                   |   1 -
 src/views/StationsView.vue                  |  10 -
 src/views/TrainsView.vue                    |  13 +-
 8 files changed, 50 insertions(+), 486 deletions(-)
 delete mode 100644 src/components/StationsView/StationCard.vue

diff --git a/src/App.vue b/src/App.vue
index e26bd83..3dd26e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { Vue, Component } from "vue-property-decorator";
 import { Action, Getter } from "vuex-class";
 
 import UpdateModal from "@/components/Global/UpdateModal.vue";
diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue
index f2c8779..9e84dd0 100644
--- a/src/components/SceneryView/SceneryInfo.vue
+++ b/src/components/SceneryView/SceneryInfo.vue
@@ -177,10 +177,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Prop } from "vue-property-decorator";
 
 import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
 
 import styleMixin from "@/mixins/styleMixin";
 
@@ -212,7 +211,7 @@ export default class SceneryInfo extends styleMixin {
   navigateToTrain(trainNo: number) {
     this.$router.push({
       name: "TrainsView",
-      params: { passedSearchedTrain: trainNo.toString() },
+      params: { queryTrain: trainNo.toString() },
     });
   }
 }
diff --git a/src/components/StationsView/StationCard.vue b/src/components/StationsView/StationCard.vue
deleted file mode 100644
index c05ef1c..0000000
--- a/src/components/StationsView/StationCard.vue
+++ /dev/null
@@ -1,426 +0,0 @@
-<template>
-  <section class="card station-card">
-    <div class="card-exit">
-      <img
-        class="schedule-icon"
-        :src="require('@/assets/icon-clock.svg')"
-        alt="schedule-icon"
-        @click="() => (cardMode = cardMode == 0 ? 1 : 0)"
-      />
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit-icon" @click="exit" />
-    </div>
-
-    <div class="card-content" :class="{ offline: !stationInfo.online }">
-      <div class="main">
-        <div class="main-content">
-          <span class="main-level flex" v-if="stationInfo.reqLevel > -1">
-            {{
-            2 > parseInt(stationInfo.reqLevel) ? "L" : stationInfo.reqLevel
-            }}
-          </span>
-          <span class="main-general">
-            <div class="main-name">
-              <a
-                v-if="stationInfo.stationURL"
-                :href="stationInfo.stationURL"
-                target="_blank"
-                rel="noopener noreferrer"
-              >{{ stationInfo.stationName }}</a>
-
-              <span v-else>{{ stationInfo.stationName }}</span>
-            </div>
-            <div class="main-hash">{{ stationInfo.stationHash }}</div>
-          </span>
-        </div>
-      </div>
-
-      <div class="icons">
-        <img
-          v-if="stationInfo.controlType"
-          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
-          :alt="stationInfo.controlType"
-          :title="'Sterowanie ' + stationInfo.controlType"
-        />
-
-        <img
-          v-if="stationInfo.signalType"
-          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
-          :alt="stationInfo.signalType"
-          :title="'Sygnalizacja ' + stationInfo.signalType"
-        />
-
-        <img
-          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-          :src="require(`@/assets/icon-SBL.svg`)"
-          alt="SBL"
-          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-        />
-
-        <img
-          v-if="stationInfo.default"
-          :src="require(`@/assets/icon-td2.svg`)"
-          alt="default-pack"
-          title="Sceneria domyślnie dostępna w grze"
-        />
-
-        <img
-          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-          :src="require(`@/assets/icon-lock.svg`)"
-          alt="non-public"
-          title="Sceneria niepubliczna"
-        />
-
-        <img
-          v-if="stationInfo.unavailable"
-          :src="require(`@/assets/icon-unavailable.svg`)"
-          alt="icon-unavailable"
-          title="Sceneria niedostępna"
-        />
-      </div>
-
-      <div class="dispatcher">
-        <div
-          class="dispatcher-level flex"
-          :style="
-            calculateExpStyle(
-              stationInfo.dispatcherExp,
-              stationInfo.dispatcherIsSupporter
-            )
-          "
-        >{{ stationInfo.online ? computedDispatcherExp : "" }}</div>
-        <div class="dispatcher-info">
-          <div class="dispatcher-name">
-            <a
-              :href="
-                'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId
-              "
-              target="_blank"
-              rel="noopener noreferrer"
-            >{{ stationInfo.dispatcherName || "---" }}</a>
-          </div>
-
-          <div class="dispatcher-rate">
-            <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
-            <span>{{ stationInfo.dispatcherRate }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="hours">
-        <div class="hours-title title">STATUS</div>
-        <span class="status" :class="statusClasses(stationInfo.occupiedTo)">
-          {{
-          stationInfo.occupiedTo
-          }}
-        </span>
-      </div>
-
-      <div class="spawns flex flex-column">
-        <h3 class="spawns-title title">OTWARTE SPAWNY</h3>
-        <div class="spawns-content">
-          <span
-            class="spawn"
-            v-for="(spawn, i) in stationInfo.spawnString"
-            :key="spawn + stationInfo.dispatcherName + i"
-          >{{ spawn }}</span>
-
-          <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
-        </div>
-      </div>
-
-      <div class="users flex flex-column">
-        <h3 class="users-title title">GRACZE NA STACJI</h3>
-        <div class="users-content">
-          <div
-            class="user-badge"
-            :class="train.stopStatus"
-            v-for="train in computedStationTrains"
-            :key="train.trainNo + train.driverName"
-          >
-            <router-link
-              :to="{
-                name: 'TrainsView',
-                params: { passedSearchedTrain: train.trainNo.toString() },
-              }"
-            >
-              <span>{{ train.trainNo }}</span>
-              |
-              <span>{{ train.driverName }}</span>
-            </router-link>
-          </div>
-
-          <span
-            class="user borderless"
-            v-if="
-              !stationInfo.stationTrains ||
-              stationInfo.stationTrains.length == 0
-            "
-          >BRAK</span>
-        </div>
-      </div>
-    </div>
-
-    <StationTimetable
-      :class="{ show: cardMode == 1 }"
-      :scheduledTrains="this.stationInfo.scheduledTrains"
-      :stationName="stationInfo.stationName"
-    />
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import { Getter } from "vuex-class";
-
-import styleMixin from "@/mixins/styleMixin";
-
-import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
-
-import StationTimetable from "@/components/StationsView/StationTimetable.vue";
-
-@Component({
-  components: {
-    StationTimetable
-  }
-})
-export default class StationCard extends styleMixin {
-  @Prop() stationInfo!: Station;
-  @Prop() exit!: void;
-
-  cardMode: number = 0;
-
-  get computedDispatcherExp(): string {
-    return this.stationInfo.dispatcherExp < 2
-      ? "L"
-      : `${this.stationInfo.dispatcherExp}`;
-  }
-
-  get computedStationTrains() {
-    return this.stationInfo.stationTrains.map(stationTrain => {
-      const scheduledData = this.stationInfo.scheduledTrains.find(scheduledTrain => scheduledTrain.trainNo === stationTrain.trainNo);
-
-      return {
-        ...stationTrain,
-        stopStatus: scheduledData?.stopStatus || "no-timetable"
-      }
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-@import "../../styles/user_badge.scss";
-
-.title {
-  color: $accentCol;
-  font-weight: 600;
-  margin: 0.5em 0;
-}
-
-.card {
-  padding: 2em;
-  text-align: center;
-
-  font-size: calc(0.5rem + 0.4vw);
-  max-width: 800px;
-
-  @include bigScreen {
-    font-size: 1rem;
-  }
-
-  @include smallScreen {
-    font-size: 0.8em;
-    width: 100%;
-  }
-
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-
-  &-exit {
-    z-index: 3;
-    display: flex;
-    align-items: center;
-
-    img {
-      font-size: 1.6em;
-      margin: 0.1em 0.1em;
-    }
-
-    .schedule-icon {
-      font-size: 1.4em;
-    }
-  }
-
-  &-content {
-    position: relative;
-    margin-top: 1rem;
-
-    display: grid;
-    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    min-width: 200px;
-    max-height: 600px;
-
-    transform: translateY(0%);
-
-    gap: 1.5em;
-
-    &.offline {
-      .users,
-      .spawns,
-      .dispatcher {
-        filter: grayscale(1);
-        opacity: 0.5;
-      }
-    }
-
-    @include smallScreen() {
-      grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users users" "spawns spawns";
-    }
-  }
-}
-
-.main {
-  grid-area: main;
-  text-align: center;
-
-  &-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @include smallScreen() {
-      flex-direction: column;
-    }
-  }
-
-  &-level {
-    background: $accentCol;
-    color: black;
-
-    font-size: 3em;
-    font-weight: 600;
-
-    border-radius: 50%;
-    width: 1.7em;
-    height: 1.7em;
-    margin: 0.3em 0.5em;
-  }
-
-  &-hash {
-    color: #9d9d9d;
-  }
-
-  &-name {
-    color: $accentCol;
-    font-weight: 600;
-    font-size: 2.3em;
-    text-transform: uppercase;
-  }
-}
-
-.icons {
-  grid-area: icons;
-
-  display: flex;
-  justify-content: center;
-
-  img {
-    max-width: 3em;
-    margin: 0 0.4em;
-  }
-}
-
-.dispatcher {
-  grid-area: dispatcher;
-
-  display: flex;
-  justify-content: center;
-
-  &-level {
-    font-size: 2.5em;
-    font-weight: bold;
-    margin-right: 0.3em;
-
-    max-width: 2em;
-
-    background: forestgreen;
-  }
-
-  &-info {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-
-    padding: 0.5em;
-  }
-
-  &-name {
-    font-size: 1.35em;
-    font-weight: bold;
-    padding-bottom: 0.5em;
-  }
-
-  &-rate {
-    display: flex;
-    font-size: 1.3em;
-
-    span {
-      margin: 0 0.3em;
-      color: $accentCol;
-    }
-
-    img {
-      width: 1.2em;
-    }
-  }
-}
-
-.hours {
-  grid-area: hours;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  flex-direction: column;
-
-  .status {
-    font-size: 1.1em;
-  }
-}
-
-.users {
-  grid-area: users;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-
-.spawns {
-  grid-area: spawns;
-
-  overflow: hidden;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    & > .spawn {
-      padding: 0.3em 0.4em;
-      margin: 0.3em;
-      background: #585858;
-
-      text-align: center;
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue
index f379818..31e7a28 100644
--- a/src/components/TrainsView/TrainSchedule.vue
+++ b/src/components/TrainsView/TrainSchedule.vue
@@ -8,7 +8,11 @@
           class="schedule-item"
           v-for="(stop, i) in followingStops"
           :key="i"
-          :class="{ confirmed: stop.confirmed, stopped: stop.stopped }"
+          :class="{
+            confirmed: stop.confirmed,
+            stopped: stop.stopped,
+            delayed: stop.departureDelay > 0,
+          }"
         >
           <div class="progress-bar"></div>
 
@@ -24,7 +28,7 @@
           <span class="stop-info">
             <div class="info-indicator"></div>
 
-            <span class="info-distance">
+            <span class="info-distance" v-if="stop.stopDistance">
               {{ Math.floor(stop.stopDistance) }}
             </span>
 
@@ -41,7 +45,9 @@
                 p.
                 {{
                   stylizeTime(
-                    stop.arrivalRealTimeString,
+                    stop.confirmed
+                      ? stop.arrivalRealTimeString
+                      : stop.arrivalTimeString,
                     stop.arrivalDelay,
                     stop.confirmed
                   )
@@ -52,8 +58,9 @@
                 class="date-stop"
                 v-if="stop.stopTime"
                 :class="stop.stopType.replace(', ', '-')"
-                >{{ stop.stopTime }} {{ stop.stopType }}</span
               >
+                {{ stop.stopTime }} {{ stop.stopType }}
+              </span>
 
               <span
                 class="date-departure"
@@ -66,7 +73,9 @@
                 o.
                 {{
                   stylizeTime(
-                    stop.departureRealTimeString,
+                    stop.confirmed
+                      ? stop.departureRealTimeString
+                      : stop.departureTimeString,
                     stop.departureDelay,
                     stop.confirmed
                   )
@@ -112,8 +121,9 @@ export default class TrainSchedule extends Vue {
 
 .train-schedule {
   max-height: 600px;
-  // overflow: auto;
   margin-top: 2em;
+
+  overflow-y: auto;
 }
 
 .schedule-bar,
@@ -140,7 +150,7 @@ export default class TrainSchedule extends Vue {
 
 .schedule-wrapper {
   position: relative;
-  margin-left: 1.5em;
+  margin-left: 2em;
 }
 
 ul.schedule-list {
@@ -178,14 +188,16 @@ li.schedule-item > .stop-info {
   display: flex;
 
   position: relative;
+  text-align: center;
 
   .info-distance {
     position: absolute;
 
     top: 50%;
-    left: -1.8rem;
     transform: translate(-100%, -50%);
 
+    margin-left: -1.7rem;
+
     font-size: 0.8em;
     color: #d6d6d6;
   }
@@ -210,6 +222,9 @@ li.schedule-item > .stop-info {
   .info-name {
     background: rgb(0, 81, 187);
     padding: 0.3rem 0.5rem;
+
+    display: flex;
+    align-items: center;
   }
 
   .info-date {
@@ -227,11 +242,7 @@ li.schedule-item > .stop-info {
         background: #ce8d00;
       }
 
-      &.pt,
-      &.pm,
-      &.pt-pm {
-        background: #252525;
-      }
+      background: #252525;
     }
 
     .date-arrival,
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index c0e2784..ad2d36a 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -76,7 +76,7 @@
               </div>
             </div>
 
-            <div class="info-bottom">
+            <!-- <div class="info-bottom">
               <span
                 class="info-label user-badge"
                 :class="train.stopStatus || 'disconnected'"
@@ -96,7 +96,7 @@
                   </span>
                 </span>
               </span>
-            </div>
+            </div> -->
           </span>
 
           <span class="driver">
@@ -114,7 +114,13 @@
             </span>
 
             <span class="driver-loco">
-              <img :src="train.locoURL" @error="onImageError" />
+              <img
+                v-if="!missingLocoImages.includes(train.locoURL)"
+                :src="train.locoURL"
+                @error="onImageError"
+              />
+
+              <img v-else :src="defaultLocoImage" alt="unknown-train" />
             </span>
           </span>
 
@@ -177,9 +183,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-
-const unknownTrainImage = require("@/assets/unknown.png");
+import { Vue, Component, Prop } from "vue-property-decorator";
 
 import Train from "@/scripts/interfaces/Train";
 
@@ -194,6 +198,10 @@ export default class TrainTable extends Vue {
 
   showedSchedule = 0;
 
+  missingLocoImages: string[] = [];
+
+  defaultLocoImage = require("@/assets/unknown.png");
+
   ascSVG = require("@/assets/icon-arrow-asc.svg");
   descSVG = require("@/assets/icon-arrow-desc.svg");
 
@@ -211,7 +219,8 @@ export default class TrainTable extends Vue {
   }
 
   onImageError(e: Event) {
-    (e.target as HTMLImageElement).src = unknownTrainImage;
+    const imageEl = e.target as HTMLImageElement;
+    this.missingLocoImages.push(imageEl.src);
   }
 
   generateStopList(stops: any): string | undefined {
@@ -266,7 +275,7 @@ export default class TrainTable extends Vue {
   }
 
   &-row {
-    padding: 1rem;
+    padding: 1em;
     margin-bottom: 1rem;
 
     background-color: $primaryCol;
@@ -281,7 +290,6 @@ export default class TrainTable extends Vue {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, minmax(100px, 1fr));
 
-        font-size: 1.25em;
         gap: 0.4em 0;
       }
 
@@ -298,8 +306,6 @@ export default class TrainTable extends Vue {
   justify-content: space-between;
 
   &-category {
-    font-size: 1.05em;
-
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -314,8 +320,6 @@ export default class TrainTable extends Vue {
       background: #1085b3;
       border-radius: 1em;
 
-      font-size: 0.85em;
-
       -moz-user-select: none;
       -webkit-user-select: none;
 
@@ -450,24 +454,22 @@ export default class TrainTable extends Vue {
 }
 
 .warning {
-  border-radius: 15px;
-  padding: 0.1em 1.2em;
+  padding: 0.1em 0.8em;
   margin-right: 0.5em;
 
   display: flex;
   align-items: center;
-
-  color: white;
+  color: black;
 
   font-weight: bold;
-  font-size: 0.7em;
+  font-size: 0.85em;
 
   &.twr {
-    border: 2px solid $twr;
+    background: $twr;
   }
 
   &.skr {
-    border: 2px solid $skr;
+    background: $twr;
   }
 }
 
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index dc83ec4..68c0e04 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -28,7 +28,6 @@ import { Vue, Component } from "vue-property-decorator";
 import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
-import Train from "@/scripts/interfaces/Train";
 
 import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
 import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 9e13440..c736d9d 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -59,14 +59,6 @@
       </div>
     </div>
 
-    <transition name="card-anim">
-      <StationCard
-        v-if="focusedStationInfo"
-        :stationInfo="focusedStationInfo"
-        :exit="closeCard"
-      />
-    </transition>
-
     <transition name="card-anim">
       <FilterCard
         v-if="filterCardOpen"
@@ -90,14 +82,12 @@ import StationFilterManager from "@/scripts/stationFilterManager";
 import inputData from "@/data/options.json";
 
 import StationTable from "@/components/StationsView/StationTable.vue";
-import StationCard from "@/components/StationsView/StationCard.vue";
 import FilterCard from "@/components/StationsView/FilterCard.vue";
 
 import DonationModal from "@/components/Global/DonationModal.vue";
 
 @Component({
   components: {
-    StationCard,
     StationTable,
     FilterCard,
     DonationModal,
diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue
index 0cd0c92..9728773 100644
--- a/src/views/TrainsView.vue
+++ b/src/views/TrainsView.vue
@@ -93,7 +93,6 @@ export default class TrainsView extends Vue {
           case "mass":
             if (a.mass > b.mass) return this.sorterActive.dir;
             else return -this.sorterActive.dir;
-            break;
 
           case "distance":
             if (!a.timetableData || !b.timetableData) return 0;
@@ -101,22 +100,18 @@ export default class TrainsView extends Vue {
             if (a.timetableData.routeDistance > b.timetableData.routeDistance)
               return this.sorterActive.dir;
             else return -this.sorterActive.dir;
-            break;
 
           case "speed":
             if (a.speed > b.speed) return this.sorterActive.dir;
             else return -this.sorterActive.dir;
-            break;
 
           case "timetable":
             if (a.trainNo > b.trainNo) return this.sorterActive.dir;
             else return -this.sorterActive.dir;
-            break;
 
           case "length":
             if (a.length > b.length) return this.sorterActive.dir;
             else return -this.sorterActive.dir;
-            break;
 
           default:
             break;
@@ -141,19 +136,13 @@ export default class TrainsView extends Vue {
   max-width: 1300px;
 
   padding: 0 0.5rem;
-}
 
-@include bigScreen() {
-  .body-wrapper {
+  @include bigScreen() {
     font-size: 0.9rem;
   }
 }
 
 @include smallScreen {
-  .body-wrapper {
-    // font-size: 0.8rem;
-  }
-
   .options-wrapper {
     justify-content: center;
   }