Poprawki w karcie pociągu

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -3,7 +3,7 @@
     <div class="dispatcher" v-if="station.onlineInfo">
       <span
         class="dispatcher_level"
-        :style="calculateExpStyle(station.onlineInfo.dispatcherExp, station.onlineInfo.dispatcherIsSupporter)"
+        :style="calculateExpStyle(station.onlineInfo.dispatcherExp)"
       >
         {{ station.onlineInfo.dispatcherExp > 1 ? station.onlineInfo.dispatcherExp : 'L' }}
       </span>

src/components/TrainsView/TrainInfoExtended.vue

@@ -24,37 +24,39 @@
             </span>
 
             <span class="timetable_driver-stats">
-              <div>
+              <span>
                 <b>{{ train.timetableData.category }}</b>
                 <b>{{ ' ' + train.trainNo }}</b> |
 
                 <span>{{ train.driverName }}</span>
-              </div>
+              </span>
+
+              <span class="hide-info" @click="toggleInfo">
+                <img :src="icons.ascArrow" :class="{ hidden: !isInfoShown }" />
+                <span>{{ isInfoShown ? 'Ukryj' : 'Pokaż' }} informacje</span>
+              </span>
             </span>
           </span>
         </div>
 
         <div class="timetable_route">
           {{ train.timetableData.route.replace('|', ' - ') }}
-
-          <img
-            v-if="getSceneriesWithComments(train.timetableData).length > 0"
-            class="image-warning"
-            :src="icons.warning"
-            :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData).join(',')})`"
-          />
         </div>
 
-        <div class="timetable_stops">
+        <div class="timetable_stops" v-if="isInfoShown">
           <span v-if="train.timetableData.followingStops.length > 2">
             {{ $t('trains.via-title') }}
             <span v-html="displayStopList(train.timetableData.followingStops)"></span>
           </span>
         </div>
+
+        <div class="timetable_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0 && isInfoShown">
+          {{ $t('trains.comment') }} <b>{{ getSceneriesWithComments(train.timetableData).join(',') }}</b>
+        </div>
       </div>
     </section>
 
-    <section class="info-driver">
+    <section class="info-driver" v-show="isInfoShown">
       <div class="driver_cars">
         <!-- <span v-else>{{ displayLocoInfo(train.locoType) }}</span> -->
       </div>
@@ -130,14 +132,26 @@ export default defineComponent({
   data: () => ({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
+      ascArrow: require('@/assets/icon-arrow-asc.svg'),
     },
+
+    isInfoShown: true,
   }),
+
+  methods: {
+    toggleInfo() {
+      this.isInfoShown = !this.isInfoShown;
+    },
+  },
 });
 </script>
 
 <style lang="scss" scoped>
 .image-warning {
-  width: 1em;
+  width: 1.2em;
+  vertical-align: text-bottom;
+
+  margin-left: 0.2em;
 }
 
 .extended {
@@ -145,6 +159,21 @@ export default defineComponent({
   padding: 1em;
 }
 
+.hide-info {
+  margin-left: 1em;
+
+  img {
+    width: 1.3em;
+    vertical-align: text-bottom;
+
+    &.hidden {
+      transform: rotate(180deg);
+    }
+  }
+
+  cursor: pointer;
+}
+
 .info-timetable {
   display: flex;
 }
@@ -170,9 +199,6 @@ export default defineComponent({
   }
 
   &_route {
-    display: flex;
-    align-items: center;
-
     font-weight: bold;
 
     margin: 5px 0;
@@ -185,6 +211,10 @@ export default defineComponent({
     font-size: 0.8em;
   }
 
+  &_comments {
+    color: salmon;
+  }
+
   &_warnings {
     display: flex;
     color: black;

src/components/TrainsView/TrainSchedule.vue

@@ -14,14 +14,7 @@
               {{ Math.floor(stop.stopDistance) }}
             </span>
 
-            <span class="stop-name">
-              <span v-html="stop.stopName"></span>
-
-              <span class="g-tooltip" v-if="stop.comments">
-                <img :src="icons.warning" />
-                <span class="content" v-html="stop.comments"> </span>
-              </span>
-            </span>
+            <span class="stop-name" v-html="stop.stopName"> </span>
 
             <stop-date :stop="stop" />
           </span>
@@ -29,6 +22,10 @@
           <div class="stop_line" v-if="i < followingStops.length - 1">
             <div class="progress-bar"></div>
 
+            <div v-if="stop.comments" style="color: salmon;">
+              <b>{{ stop.stopNameRAW }}</b>: <span v-html="stop.comments"></span>
+            </div>
+
             <span v-if="stop.departureLine == followingStops[i + 1].arrivalLine">
               {{ stop.departureLine }}
             </span>
@@ -117,6 +114,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+
 $barClr: #b1b1b1;
 $confirmedClr: #18d818;
 $stoppedClr: #f55f31;
@@ -133,14 +132,16 @@ $stopNameClr: #22a8d1;
 }
 
 .train-schedule {
-  padding-top: 1em;
-  margin-top: 1em;
 
   min-height: 400px;
 
   overflow-y: auto;
 
   z-index: 5;
+
+  @include smallScreen() {
+    font-size: 1.2em;
+  }
 }
 
 .schedule-wrapper {
@@ -166,13 +167,31 @@ $stopNameClr: #22a8d1;
 
   display: flex;
   align-items: center;
+}
 
-  .g-tooltip {
-    margin-left: 0.5em;
+.stop-comment {
+  background: forestgreen;
+  padding: 0.3em 0.5em;
 
-    img {
-      width: 1em;
-    }
+  max-width: 250px;
+  overflow: hidden;
+  white-space: nowrap;
+
+  width: 2em;
+
+  cursor: pointer;
+
+  &:hover {
+    text-overflow: ellipsis;
+    width: 100%;
+  }
+
+  img {
+    width: 1em;
+  }
+
+  span {
+    font-size: 0.8em;
   }
 }
 
@@ -276,6 +295,8 @@ ul.stop_list > li.stop {
     position: relative;
     text-align: center;
 
+    flex-wrap: wrap;
+
     padding: 0.15em 0;
   }
 

src/locales/en.json

@@ -164,7 +164,7 @@
     "loco-electric": "Electric locomotive",
     "loco-diesel": "Diesel locomotive",
     "timetable-comments": "Exploitation comments available for this train",
-    "comment": "Exploitation comment",
+    "comment": "Exploitation comments for: ",
     "table-limit": "For performance reasons there's a limit of 10 trains shown at the same time." 
   },
   "journal": {

src/locales/pl.json

@@ -165,7 +165,7 @@
     "loco-electric": "Elektrowóz",
     "loco-diesel": "Spalinowóz",
     "timetable-comments": "Pociąg z uwagami eksploatacyjnymi",
-    "comment": "Uwaga eksploatacyjna",
+    "comment": "Uwagi eksploatacyjne dla: ",
     "table-limit": "Dla płynności działania strony pokazanych jest tylko 10 pociągów zgodnie z wybranymi filtrami." 
   },
   "journal": {

src/store/index.ts

@@ -20,6 +20,7 @@ import { getLocoURL, getScheduledTrain, getStatusID, getStatusTimestamp, parseSp
 import { URLs } from '@/scripts/utils/apiURLs';
 import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
 import StationRoutes from '@/scripts/interfaces/StationRoutes';
+import StorageManager from '@/scripts/managers/storageManager';
 
 export interface State {
   stationList: Station[],
@@ -116,16 +117,15 @@ export const store = createStore<State>({
   actions: {
     async synchronizeData({ commit, dispatch, state }) {
       if (state.listenerLaunched) return;
-      
+
       await dispatch(ACTIONS.loadStaticStationData);
-      await dispatch(ACTIONS.fetchOnlineData);
+      dispatch(ACTIONS.fetchOnlineData);
 
       setInterval(() => dispatch(ACTIONS.fetchOnlineData), Math.floor(Math.random() * 5000) + 25000);
     },
 
     async loadStaticStationData({ commit }) {
-      // Nowy parametr żądania co godzinę
-      const sceneryData: StationJSONData = await (await axios.get(`${URLs.sceneryData}?time=${Math.floor(Date.now() / 1800000)}`)).data;
+      const sceneryData: StationJSONData = await (await axios.get(`${URLs.sceneryData}?timestamp=${Math.floor(Date.now() / 1800000)}`)).data;
 
       if (!sceneryData)
         commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Error);
@@ -147,12 +147,8 @@ export const store = createStore<State>({
       }
 
       commit(MUTATIONS.SET_SCENERY_DATA_STATUS, DataStatus.Loaded);
-
-      if (!dispatchersAPIData || !dispatchersAPIData.success)
-        commit(MUTATIONS.SET_DISPATCHER_DATA_STATUS, DataStatus.Warning)
-
-      if (!trainsAPIData || !trainsAPIData.response)
-        commit(MUTATIONS.SET_TRAINS_DATA_STATUS, DataStatus.Warning);
+      commit(MUTATIONS.SET_DISPATCHER_DATA_STATUS, !dispatchersAPIData || !dispatchersAPIData.success ? DataStatus.Warning : DataStatus.Loaded)
+      commit(MUTATIONS.SET_TRAINS_DATA_STATUS, !trainsAPIData || !trainsAPIData.response ? DataStatus.Warning : DataStatus.Loaded);
 
 
       // Zaktualizuj listę pociągów
@@ -210,9 +206,9 @@ export const store = createStore<State>({
 
         const prevDispatcherStatus = this.state.lastDispatcherStatuses.find(dispatcher => dispatcher.hash === stationAPI.stationHash);
         const stationStatus = dispatchersAPIData.success ? dispatchersAPIData.message.find((status: string[]) => status[0] == stationAPI.stationHash && status[1] == this.state.region.id) : -1;
-        
+
         const statusTimestamp = getStatusTimestamp(stationStatus == -1 && prevDispatcherStatus ? prevDispatcherStatus.statusTimestamp : stationStatus);
-        const statusID = getStatusID(stationStatus == -1 && prevDispatcherStatus ? prevDispatcherStatus.statusTimestamp : stationStatus );
+        const statusID = getStatusID(stationStatus == -1 && prevDispatcherStatus ? prevDispatcherStatus.statusTimestamp : stationStatus);
 
         prevDispatcherStatuses.push({
           hash: stationAPI.stationHash,
@@ -309,10 +305,12 @@ export const store = createStore<State>({
         .forEach(offlineStation => {
           offlineStation.onlineInfo = undefined;
         });
-    
+
       this.state.trainList = updatedTrainList;
       this.state.trainsDataStatus = DataStatus.Loaded;
-      this.state.lastDispatcherStatuses = prevDispatcherStatuses;
+
+      if (dispatchersAPIData.success)
+        this.state.lastDispatcherStatuses = prevDispatcherStatuses;
     },
   },