zmiana wyglądu listy dzienników

src/components/JournalView/JournalDispatchersList.vue

@@ -1,57 +1,156 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
+  <div>
-    <li
+    <transition name="status-anim" mode="out-in">
-      v-for="item in computedDispatcherHistory"
+      <div :key="dataStatus">
-      :key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
+        <div class="journal_warning" v-if="store.isOffline">
-      :class="{ sticky: typeof item == 'string' }"
+          {{ $t('app.offline') }}
-    >
+        </div>
-      <div v-if="typeof item == 'string'" class="journal_day">
-        {{ item }}
-      </div>
 
-      <div
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
-        v-else
+
-        class="journal_item"
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-        :class="{ online: item.isOnline }"
+          {{ $t('app.error') }}
-        @click="navigateToScenery(item.stationName, item.isOnline)"
+        </div>
-        @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
+
-        tabindex="0"
+        <div class="journal_warning" v-else-if="dispatcherHistory.length == 0">
-      >
+          {{ $t('app.no-result') }}
-        <span class="item-general">
+        </div>
-          <b
+
-            v-if="item.dispatcherLevel !== null"
+        <div v-else>
-            class="level-badge dispatcher"
+          <table class="scenery-history-table">
-            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
+            <thead>
+              <th>Sceneria</th>
+              <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
+              <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
+              <th>{{ $t('scenery.dispatchers-history-level') }}</th>
+              <th>{{ $t('scenery.dispatchers-history-rate') }}</th>
+              <th>{{ $t('scenery.dispatchers-history-date') }}</th>
+            </thead>
+
+            <tbody>
+              <tr v-for="historyItem in dispatcherHistory">
+                <td>
+                  <router-link :to="`/journal/dispatchers?sceneryName=${historyItem.stationName}`">
+                    <b>{{ historyItem.stationName }}</b>
+                  </router-link>
+                </td>
+                <td>#{{ historyItem.stationHash }}</td>
+                <td>
+                  <router-link :to="`/journal/dispatchers?dispatcherName=${historyItem.dispatcherName}`">
+                    <b>{{ historyItem.dispatcherName }}</b>
+                  </router-link>
+                </td>
+                <td>
+                  <b
+                    v-if="historyItem.dispatcherLevel !== null"
+                    class="level-badge dispatcher"
+                    :style="calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)"
+                  >
+                    {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+                  </b>
+                </td>
+
+                <td class="text--primary">
+                  <b>{{ historyItem.dispatcherRate }}</b>
+                </td>
+
+                <td style="min-width: 250px" class="time">
+                  <span v-if="historyItem.timestampTo">
+                    <b>{{ $d(historyItem.timestampFrom) }}</b>
+
+                    {{ timestampToString(historyItem.timestampFrom) }}
+                    - {{ timestampToString(historyItem.timestampTo) }} ({{
+                      calculateDuration(historyItem.currentDuration)
+                    }})
+                  </span>
+
+                  <span class="dispatcher-online" v-else>
+                    <b class="text--online">
+                      {{ $t('journal.online-since') }} {{ timestampToString(historyItem.timestampFrom) }}
+                    </b>
+                    ({{ calculateDuration(historyItem.currentDuration) }})
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <!-- <transition-group class="journal-list" tag="ul" name="list-anim">
+            <li
+              v-for="item in computedDispatcherHistory"
+              :key="typeof item === 'string' ? item : item.timestampFrom + item.dispatcherId"
+              :class="{ sticky: typeof item == 'string' }"
+            >
+              <div v-if="typeof item == 'string'" class="journal_day">
+                {{ item }}
+              </div>
+
+              <div
+                v-else
+                class="journal_item"
+                :class="{ online: item.isOnline }"
+                @click="navigateToScenery(item.stationName, item.isOnline)"
+                @keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
+                tabindex="0"
+              >
+                <span class="item-general">
+                  <b
+                    v-if="item.dispatcherLevel !== null"
+                    class="level-badge dispatcher"
+                    :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
+                  >
+                    {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
+                  </b>
+
+                  <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
+                  <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
+                  <span class="region-badge" :class="item.region">PL1</span>
+                  <span class="like-count" v-if="item.dispatcherRate">
+                    <img :src="getIcon('like')" alt="like icon" />
+                    {{ item.dispatcherRate }}
+                  </span>
+                </span>
+
+                <span class="item-time">
+                  <span :data-status="item.isOnline">
+                    {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp;
+                  </span>
+                  <span>
+                    {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+                  </span>
+
+                  <span v-if="item.currentDuration && item.isOnline">
+                    ({{ calculateDuration(item.currentDuration) }})
+                  </span>
+
+                  <span v-if="item.timestampTo">
+                    &gt;
+                    {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
+                    ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
+                  </span>
+                </span>
+              </div>
+            </li>
+          </transition-group> -->
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.length > 15"
+            @click="addHistoryData"
           >
-            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
+            {{ $t('journal.load-data') }}
-          </b>
+          </button>
-
+        </div>
-          <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
-          <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
-          <span class="region-badge" :class="item.region">PL1</span>
-          <span class="like-count" v-if="item.dispatcherRate">
-            <img :src="getIcon('like')" alt="like icon" />
-            {{ item.dispatcherRate }}
-          </span>
-        </span>
-
-        <span class="item-time">
-          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
-          <span>
-            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-          </span>
-
-          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
-
-          <span v-if="item.timestampTo">
-            &gt;
-            {{ new Date(item.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-            ({{ $t('journal.duty-lasted') }} {{ calculateDuration(item.currentDuration!) }})
-          </span>
-        </span>
       </div>
-    </li>
+    </transition>
-  </transition-group>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">
+      {{ $t('journal.no-further-data') }}
+    </div>
+
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">
+      {{ $t('journal.loading-further-data') }}
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -60,16 +159,37 @@ import dateMixin from '../../mixins/dateMixin';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
 import styleMixin from '../../mixins/styleMixin';
 import imageMixin from '../../mixins/imageMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { useStore } from '../../store/store';
 
 export default defineComponent({
+  mixins: [dateMixin, styleMixin, imageMixin],
+
   props: {
     dispatcherHistory: {
       type: Array as PropType<DispatcherHistory[]>,
       required: true,
     },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Object as PropType<DataStatus>,
+    },
   },
 
-  mixins: [dateMixin, styleMixin, imageMixin],
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
 
   computed: {
     computedDispatcherHistory() {
@@ -105,79 +225,48 @@ export default defineComponent({
 @import '../../styles/animations.scss';
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
-@import '../../styles/JournalSection.scss';
 @import '../../styles/variables.scss';
+@import '../../styles/JournalSection.scss';
 
-li.sticky {
+table.scenery-history-table {
-  position: sticky;
+  width: 100%;
-  top: 0;
+  background-color: #111;
-}
+  border-collapse: collapse;
+  /* border-spacing: 0 0.5em; */
+  text-align: center;
 
-.journal_item {
+  thead {
-  display: flex;
+    position: sticky;
-  justify-content: space-between;
+    top: 0;
-  align-items: center;
+    background-color: #222222;
-  flex-wrap: wrap;
-  text-align: left;
-
-  gap: 0.5em 1em;
-
-  line-height: 1.7em;
-  padding: 0.75em;
-
-  &.online {
-    cursor: pointer;
   }
 
-  span[data-status='true'] {
+  th {
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #353535;
+    border: none;
+  }
+
+  td {
+    padding: 0.75em;
+    border-bottom: solid 5px #1a1a1a;
+
+    .level-badge {
+      margin: 0 auto;
+    }
+  }
+}
+
+.text {
+  &--online {
     color: springgreen;
   }
 
-  span[data-status='false'] {
+  &--offline {
     color: salmon;
   }
 }
-
-.item-general {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25em;
-  flex-wrap: wrap;
-
-  .level-badge {
-    margin-right: 0.25em;
-  }
-}
-
-.journal_day {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  font-weight: bold;
-
-  background-color: #333;
-
-  span {
-    position: relative;
-    background-color: inherit;
-    z-index: 10;
-    padding-right: 1em;
-
-    font-weight: bold;
-  }
-}
-
-.like-count {
-  display: flex;
-  align-items: center;
-  gap: 0.25em;
-  font-size: 1.2em;
-  color: $accentCol;
-}
-
-@include smallScreen {
-  .journal_item {
-    flex-direction: column;
-  }
-}
 </style>

src/components/JournalView/JournalTimetablesList.vue

@@ -1,213 +1,249 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
+  <div class="journal-list">
-    <li
+    <transition name="status-anim" mode="out-in">
-      v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
+      <div :key="dataStatus">
-      class="journal_item"
+        <div class="journal_warning" v-if="store.isOffline">
-      :key="timetable.id"
+          {{ $t('app.offline') }}
-      @click="showExtraInfo.value = !showExtraInfo.value"
-    >
-      <div class="journal_item-info">
-        <div class="info-general">
-          <span
-            class="general-train"
-            tabindex="0"
-            @click.stop="showTimetable(timetable)"
-            @keydown.enter="showTimetable(timetable)"
-            style="cursor: pointer"
-          >
-            <span class="text--grayed">#{{ timetable.id }}</span>
-
-            <span class="badges" v-if="timetable.skr || timetable.twr">
-              <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-              <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-            </span>
-
-            <span>
-              <strong class="text--primary">
-                {{ timetable.trainCategoryCode }}
-              </strong>
-              <strong>&nbsp;{{ timetable.trainNo }}</strong>
-            </span>
-            &bull;
-            <strong
-              v-if="timetable.driverLevel !== null"
-              class="level-badge driver"
-              :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
-            >
-              {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
-            </strong>
-
-            <strong>{{ timetable.driverName }}</strong>
-          </span>
-
-          <span class="general-time">
-            <b class="info-date"
-              >{{
-                new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
-                  ? localeDateTime(timetable.createdAt, $i18n.locale)
-                  : localeDateTime(timetable.beginDate, $i18n.locale)
-              }}
-            </b>
-
-            <b
-              class="info-badge"
-              :class="{
-                fulfilled: timetable.fulfilled,
-                terminated: timetable.terminated && !timetable.fulfilled,
-                active: !timetable.terminated,
-              }"
-            >
-              {{
-                !timetable.terminated
-                  ? $t('journal.timetable-active')
-                  : timetable.fulfilled
-                  ? $t('journal.timetable-fulfilled')
-                  : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
-              }}
-            </b>
-          </span>
         </div>
 
-        <div class="info-route">
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
-          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
         </div>
 
-        <hr />
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-
+          {{ $t('app.no-result') }}
-        <!-- Spis postojów -->
-        <div class="stop-list" v-if="showExtraInfo.value == true">
-          <span
-            v-for="(stop, i) in stops.filter((_, i) => (!showExtraInfo.value ? i == 0 || i == stops.length - 1 : true))"
-            class="stop-list-item"
-            :key="stop.stopName"
-            :data-confirmed="stop.confirmed"
-          >
-            <span v-if="i > 0">
-              &gt;
-              <span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
-                ... (+{{ stops.length - 2 }}) &gt;
-              </span>
-            </span>
-
-            <span class="stop-name">{{ stop.stopName }}</span>
-            <span v-html="stop.html"></span>
-          </span>
         </div>
 
-        <!-- Status RJ -->
+        <div v-else>
-        <div class="info-status" style="margin: 0.5em 0">
+          <transition-group tag="ul" name="list-anim">
-          <ProgressBar
-            :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
-            :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
-          />
-
-          <span :style="{ color: timetable.terminated && timetable.fulfilled ? 'lightgreen' : '' }">
-            <span>
-              {{ timetable.currentDistance + ' km' }}
-            </span>
-            <span> / </span>
-            <span>{{ timetable.routeDistance }} km</span>
-          </span>
-
-          <span class="text--grayed" v-if="timetable.currentSceneryName">
-            <b>
-              {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
-              {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
-
-              <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
-
-              <span v-if="timetable.currentLocation[1]">
-                {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
-              </span>
-
-              <span v-else-if="timetable.currentLocation[0]">
-                {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
-              </span>
-
-              <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
-            </b>
-          </span>
-        </div>
-
-        <button class="btn--option btn--show">
-          {{ $t('journal.stock-info') }}
-          <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-        </button>
-
-        <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
-          <hr />
-
-          <div class="stock-specs">
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.dispatcher-name') }}</span>
-              <span>{{ timetable.authorName }}</span>
-            </span>
-          </div>
-
-          <div class="stock-specs">
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-max-speed') }}</span>
-              <span>{{ timetable.maxSpeed }}km/h</span>
-            </span>
-
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-length') }}</span>
-              <span>
-                {{
-                  item.currentHistoryIndex.value == 0
-                    ? timetable.stockLength
-                    : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
-                }}m
-              </span>
-            </span>
-
-            <span class="badge specs-badge">
-              <span>{{ $t('journal.stock-mass') }}</span>
-              <span>
-                {{
-                  Math.floor(
-                    (item.currentHistoryIndex.value == 0
-                      ? timetable.stockMass!
-                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
-                  )
-                }}t
-              </span>
-            </span>
-          </div>
-
-          <!-- Historia zmian w składzie -->
-          <div class="stock-history" v-if="stockHistoryComp.length > 1">
-            <button
-              class="btn--action"
-              v-for="(sh, i) in stockHistoryComp"
-              :data-checked="i == item.currentHistoryIndex.value"
-              @click.stop="item.currentHistoryIndex.value = i"
-            >
-              {{ sh.updatedAt }}
-            </button>
-          </div>
-
-          <ul class="stock-list">
             <li
-              v-for="(car, i) in (item.currentHistoryIndex.value == 0
+              v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
-                ? timetable.stockString
+              class="journal_item"
-                : stockHistoryComp[item.currentHistoryIndex.value].stockString
+              :key="timetable.id"
-              ).split(';')"
+              @click="showExtraInfo.value = !showExtraInfo.value"
-              :key="i"
             >
-              <img
+              <div class="journal_item-info">
-                @error="onImageError"
+                <div class="info-general">
-                :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+                  <span
-                :alt="car"
+                    class="general-train"
-              />
+                    tabindex="0"
-              <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+                    @click.stop="showTimetable(timetable)"
+                    @keydown.enter="showTimetable(timetable)"
+                    style="cursor: pointer"
+                  >
+                    <span class="text--grayed">#{{ timetable.id }}</span>
+
+                    <span class="badges" v-if="timetable.skr || timetable.twr">
+                      <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+                      <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
+                    </span>
+
+                    <span>
+                      <strong class="text--primary">
+                        {{ timetable.trainCategoryCode }}
+                      </strong>
+                      <strong>&nbsp;{{ timetable.trainNo }}</strong>
+                    </span>
+                    &bull;
+                    <strong
+                      v-if="timetable.driverLevel !== null"
+                      class="level-badge driver"
+                      :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+                    >
+                      {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+                    </strong>
+
+                    <strong>{{ timetable.driverName }}</strong>
+                  </span>
+
+                  <span class="general-time">
+                    <b class="info-date"
+                      >{{
+                        new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
+                          ? localeDateTime(timetable.createdAt, $i18n.locale)
+                          : localeDateTime(timetable.beginDate, $i18n.locale)
+                      }}
+                    </b>
+
+                    <b
+                      class="info-badge"
+                      :class="{
+                        fulfilled: timetable.fulfilled,
+                        terminated: timetable.terminated && !timetable.fulfilled,
+                        active: !timetable.terminated,
+                      }"
+                    >
+                      {{
+                        !timetable.terminated
+                          ? $t('journal.timetable-active')
+                          : timetable.fulfilled
+                          ? $t('journal.timetable-fulfilled')
+                          : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+                      }}
+                    </b>
+                  </span>
+                </div>
+
+                <div class="info-route">
+                  <b>{{ timetable.route.replace('|', ' - ') }}</b>
+                </div>
+
+                <hr />
+
+                <!-- Spis postojów -->
+                <div class="stop-list" v-if="showExtraInfo.value == true">
+                  <span
+                    v-for="(stop, i) in stops.filter((_, i) =>
+                      !showExtraInfo.value ? i == 0 || i == stops.length - 1 : true
+                    )"
+                    class="stop-list-item"
+                    :key="stop.stopName"
+                    :data-confirmed="stop.confirmed"
+                  >
+                    <span v-if="i > 0">
+                      &gt;
+                      <span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
+                        ... (+{{ stops.length - 2 }}) &gt;
+                      </span>
+                    </span>
+
+                    <span class="stop-name">{{ stop.stopName }}</span>
+                    <span v-html="stop.html"></span>
+                  </span>
+                </div>
+
+                <!-- Status RJ -->
+                <div class="info-status" style="margin: 0.5em 0">
+                  <ProgressBar
+                    :progressPercent="(timetable.confirmedStopsCount / timetable.allStopsCount) * 100"
+                    :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
+                  />
+
+                  <span>
+                    <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
+                      {{ timetable.currentDistance + ' km' }}
+                    </span>
+                    <span> / </span>
+                    <span class="text--primary">{{ timetable.routeDistance }} km</span>
+                  </span>
+
+                  <span class="text--grayed" v-if="timetable.currentSceneryName">
+                    <b>
+                      {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
+                      {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+
+                      <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
+
+                      <span v-if="timetable.currentLocation[1]">
+                        {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
+                      </span>
+
+                      <span v-else-if="timetable.currentLocation[0]">
+                        {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
+                      </span>
+
+                      <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
+                    </b>
+                  </span>
+                </div>
+
+                <button class="btn--option btn--show">
+                  {{ $t('journal.stock-info') }}
+                  <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+                </button>
+
+                <!-- Dodatkowe informacje -->
+                <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
+                  <hr />
+
+                  <div class="stock-specs">
+                    <span class="badge specs-badge">
+                      <span>{{ $t('journal.dispatcher-name') }}</span>
+                      <span>{{ timetable.authorName }}</span>
+                    </span>
+                  </div>
+
+                  <div class="stock-specs">
+                    <span class="badge specs-badge">
+                      <span>{{ $t('journal.stock-max-speed') }}</span>
+                      <span>{{ timetable.maxSpeed }}km/h</span>
+                    </span>
+
+                    <span class="badge specs-badge">
+                      <span>{{ $t('journal.stock-length') }}</span>
+                      <span>
+                        {{
+                          item.currentHistoryIndex.value == 0
+                            ? timetable.stockLength
+                            : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
+                        }}m
+                      </span>
+                    </span>
+
+                    <span class="badge specs-badge">
+                      <span>{{ $t('journal.stock-mass') }}</span>
+                      <span>
+                        {{
+                          Math.floor(
+                            (item.currentHistoryIndex.value == 0
+                              ? timetable.stockMass!
+                              : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) /
+                              1000
+                          )
+                        }}t
+                      </span>
+                    </span>
+                  </div>
+
+                  <!-- Historia zmian w składzie -->
+                  <div class="stock-history" v-if="stockHistoryComp.length > 1">
+                    <button
+                      class="btn--action"
+                      v-for="(sh, i) in stockHistoryComp"
+                      :data-checked="i == item.currentHistoryIndex.value"
+                      @click.stop="item.currentHistoryIndex.value = i"
+                    >
+                      {{ sh.updatedAt }}
+                    </button>
+                  </div>
+
+                  <ul class="stock-list">
+                    <li
+                      v-for="(car, i) in (item.currentHistoryIndex.value == 0
+                        ? timetable.stockString
+                        : stockHistoryComp[item.currentHistoryIndex.value].stockString
+                      ).split(';')"
+                      :key="i"
+                    >
+                      <img
+                        @error="onImageError"
+                        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+                        :alt="car"
+                      />
+                      <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </li>
-          </ul>
+          </transition-group>
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            @click="addHistoryData"
+          >
+            {{ $t('journal.load-data') }}
+          </button>
         </div>
       </div>
-    </li>
+    </transition>
-  </transition-group>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -216,17 +252,39 @@ import dateMixin from '../../mixins/dateMixin';
 import imageMixin from '../../mixins/imageMixin';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 import styleMixin from '../../mixins/styleMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
 import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import { useStore } from '../../store/store';
 import ProgressBar from '../Global/ProgressBar.vue';
 
 export default defineComponent({
+  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
   props: {
     timetableHistory: {
       type: Array as PropType<TimetableHistory[]>,
       required: true,
     },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Object as PropType<DataStatus>,
+    },
   },
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
+
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
+
   computed: {
     computedTimetableHistory() {
       return this.timetableHistory.map((timetable) => ({
@@ -436,7 +494,7 @@ ul.stock-list {
 .stop-list {
   word-wrap: break-word;
   gap: 0.25em;
-  font-size: 0.9em;
+  font-size: 0.95em;
 
   color: #adadad;
 

src/views/JournalDispatchers.vue

@@ -18,43 +18,13 @@
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <transition name="status-anim" mode="out-in">
+        <JournalDispatchersList
-          <div :key="dataStatus">
+          :dispatcherHistory="computedHistoryList"
-            <div class="journal_warning" v-if="store.isOffline">
+          :addHistoryData="addHistoryData"
-              {{ $t('app.offline') }}
+          :dataStatus="dataStatus"
-            </div>
+          :scrollDataLoaded="scrollDataLoaded"
-
+          :scrollNoMoreData="scrollNoMoreData"
-            <Loading v-else-if="dataStatus == DataStatus.Loading" />
+        />
-
-            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-              {{ $t('app.error') }}
-            </div>
-
-            <div class="journal_warning" v-else-if="historyList.length == 0">
-              {{ $t('app.no-result') }}
-            </div>
-
-            <div v-else>
-              <JournalDispatchersList :dispatcherHistory="computedHistoryList" />
-
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded && computedHistoryList.length > 15"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
-
-        <div class="journal_warning" v-if="scrollNoMoreData">
-          {{ $t('journal.no-further-data') }}
-        </div>
-
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">
-          {{ $t('journal.loading-further-data') }}
-        </div>
       </div>
     </div>
   </section>

src/views/JournalTimetables.vue

@@ -21,38 +21,13 @@
       </div>
 
       <div class="list_wrapper" @scroll="handleScroll">
-        <transition name="status-anim" mode="out-in">
+        <JournalTimetablesList
-          <div :key="dataStatus">
+          :timetableHistory="timetableHistory"
-            <div class="journal_warning" v-if="store.isOffline">
+          :addHistoryData="addHistoryData"
-              {{ $t('app.offline') }}
+          :dataStatus="dataStatus"
-            </div>
+          :scrollDataLoaded="scrollDataLoaded"
-
+          :scrollNoMoreData="scrollNoMoreData"
-            <Loading v-else-if="dataStatus == DataStatus.Loading" />
+        />
-
-            <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
-              {{ $t('app.error') }}
-            </div>
-
-            <div v-else-if="timetableHistory.length == 0" class="journal_warning">
-              {{ $t('app.no-result') }}
-            </div>
-
-            <div v-else>
-              <JournalTimetablesList :timetableHistory="timetableHistory" />
-
-              <button
-                class="btn btn--option btn--load-data"
-                v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
-                @click="addHistoryData"
-              >
-                {{ $t('journal.load-data') }}
-              </button>
-            </div>
-          </div>
-        </transition>
-
-        <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
-        <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
       </div>
     </div>
   </section>

src/views/TrainsView.vue

@@ -77,7 +77,9 @@ export default defineComponent({
     watch([searchedTrain, searchedDriver, sorterActive, filterList], ([sT, sD, sA, fL]) => {
       const areFiltersActive = fL.some((f, i) => f.isActive !== initTrainFilters[i].isActive);
 
-      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'distance' || areFiltersActive;
+      
+      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'routeDistance' || areFiltersActive;
+      console.log(sA.id);
     });
 
     return {