Dodano uwagi eksploatacyjne na liście rozkładów scenerii; poprawki tooltipów

src/components/SceneryView/SceneryTimetable.vue

@@ -40,22 +40,30 @@
         >
           <span class="timetable-general">
             <span class="general-info">
-              <span>
+              <span class="info-number">
                 <strong>{{ scheduledTrain.category }}</strong>
                 {{ scheduledTrain.trainNo }}
+
+                <span class="g-tooltip" v-if="scheduledTrain.stopInfo.comments">
+                  <img :src="icons.warning" />
+                  <span class="content" v-html="scheduledTrain.stopInfo.comments"> </span>
+                </span>
               </span>
               |
               <span style="color: white">
                 {{ scheduledTrain.driverName }}
               </span>
+
               <div class="info-route">
                 <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
               </div>
             </span>
+
             <span class="general-status">
               <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
             </span>
           </span>
+
           <span class="timetable-schedule">
             <span class="schedule-arrival">
               <span
@@ -64,10 +72,12 @@
                 v-html="$t('timetables.begins')"
               >
               </span>
+
               <span class="arrival-time" v-else>
                 {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
               </span>
             </span>
+
             <span class="schedule-stop">
               <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
                 {{ scheduledTrain.stopInfo.stopTime }}
@@ -75,6 +85,7 @@
               </span>
               <span class="stop-arrow arrow"></span>
             </span>
+
             <span class="schedule-departure">
               <span
                 class="departure-time terminates"
@@ -82,6 +93,7 @@
                 v-html="$t('timetables.terminates')"
               >
               </span>
+
               <span class="departure-time" v-else>
                 {{ scheduledTrain.stopInfo.departureTimeString }} ({{ scheduledTrain.stopInfo.departureDelay }})
               </span>
@@ -118,6 +130,9 @@ export default defineComponent({
   data: () => ({
     viewIcon: require('@/assets/icon-view.svg'),
     listOpen: false,
+    icons: {
+      warning: require('@/assets/icon-warning.svg'),
+    },
   }),
 
   setup(props) {
@@ -128,7 +143,11 @@ export default defineComponent({
 
     const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>;
 
-    const selectedCheckpoint = ref('');
+    const selectedCheckpoint = ref(
+      props.station?.generalInfo?.checkpoints?.length == 0
+        ? ''
+        : props.station?.generalInfo?.checkpoints[0].checkpointName || ''
+    );
 
     const computedScheduledTrains = computed(() => {
       if (!props.station) return [];
@@ -236,82 +255,6 @@ h3 {
   }
 }
 
-.select-box {
-  font-size: 1.2em;
-}
-
-.option {
-  &-container {
-    position: relative;
-
-    input {
-      display: none;
-    }
-
-    label {
-      padding: 0.5em 0.35em;
-      cursor: pointer;
-    }
-  }
-
-  &-item {
-    display: flex;
-    justify-content: center;
-
-    &:hover {
-      background-color: rgba(#868686, 0.85);
-    }
-
-    transition: background 150ms ease-in;
-  }
-
-  &-selected,
-  &-list {
-    background: #444;
-    border-radius: 0.5em;
-  }
-
-  &-selected {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    padding: 0.35em 0.7em;
-    min-width: 10em;
-    cursor: pointer;
-
-    span {
-      margin-right: 2em;
-    }
-
-    img {
-      max-width: 0.75em;
-    }
-  }
-
-  &-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-
-    width: 100%;
-
-    z-index: 10;
-
-    background-color: rgba(#222, 0.95);
-    overflow: hidden;
-
-    max-height: 0;
-
-    &.open {
-      max-height: 250px;
-      opacity: 1;
-    }
-
-    transition: all 150ms ease-in;
-  }
-}
-
 .timetable {
   &-header {
     a {
@@ -335,6 +278,7 @@ h3 {
     background: $bgLigtherCol;
 
     cursor: pointer;
+    z-index: 10;
 
     @include smallScreen() {
       display: flex;
@@ -363,8 +307,6 @@ h3 {
 
     text-align: left;
 
-    overflow: hidden;
-
     @include smallScreen() {
       width: 95%;
       font-size: 1.3em;
@@ -433,13 +375,23 @@ h3 {
 }
 
 .general-info {
-  span {
+  .info-number {
     color: $accentCol;
+
   }
 
   .info-route {
     margin-top: 0.5em;
   }
+
+  .g-tooltip > .content {
+    z-index: 100;
+    color: white;
+  }
+
+  img {
+    width: 1.1em;
+  }
 }
 
 .general-status {

src/components/TrainsView/TrainSchedule.vue

@@ -87,7 +87,6 @@
 <script lang="ts">
 import TrainStop from '@/scripts/interfaces/TrainStop';
 import { computed, defineComponent } from '@vue/runtime-core';
-import decodedChars from '@/data/decodedChars.json';
 
 export default defineComponent({
   props: {
@@ -148,11 +147,6 @@ export default defineComponent({
         'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere,
       };
     },
-
-    decodeSWDRComment(comment: string) {
-      const test = 'kurw&#x119;a&#x119;';
-      const charsToDecode = test.split('&#x');
-    },
   },
 });
 </script>
@@ -214,13 +208,12 @@ $stopNameClr: #22a8d1;
   display: flex;
   align-items: center;
 
-  .g-tooltip > .content {
-    font-size: 0.9em;
-  }
-
-  img {
-    width: 1em;
+  .g-tooltip {
     margin-left: 0.5em;
+
+    img {
+      width: 1em;
+    }
   }
 }
 

src/data/decodedChars.json

@@ -1,20 +0,0 @@
-{
-    "&#x0D3": "Ó",
-    "&#x0F3": "ó",
-    "&#x104": "Ą",
-    "&#x105": "ą", 
-    "&#x106": "Ć",
-    "&#x107": "ć",
-    "&#x280": "Ę",
-    "&#x281": "ę",
-    "&#x141": "Ł",
-    "&#x142": "ł",
-    "&#x143": "Ń",
-    "&#x144": "ń",
-    "&#x15A": "Ś",
-    "&#x15B": "ś",
-    "&#x179": "Ź",
-    "&#x17A": "ź",
-    "&#x17B": "Ż",
-    "&#x17C": "ż"
-}

src/styles/global.scss

@@ -50,13 +50,16 @@ body {
 .g-tooltip {
   position: relative;
 
-  z-index: 11;
+  display: inline-block;
+  vertical-align: middle;
 
   .content {
     position: absolute;
     left: 50%;
     top: 0;
 
+    z-index: 100;
+
     transform: translate(-50%, -120%);
 
     visibility: hidden;
@@ -67,10 +70,10 @@ body {
     background-color: gray;
     text-align: center;
     
-    padding: 0.15em;
     border-radius: .5em;
 
     transition: opacity 0.3s;
+    padding: 0.25em;
 
     &::after {
       content: "";