zmiana wyglądu listy dzienników

src/components/JournalView/JournalDispatchersList.vue

@@ -1,5 +1,80 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
+  <div>
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
+
+        <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="dispatcherHistory.length == 0">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <table class="scenery-history-table">
+            <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"
@@ -36,12 +111,16 @@
                 </span>
 
                 <span class="item-time">
-          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
+                  <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.currentDuration && item.isOnline">
+                    ({{ calculateDuration(item.currentDuration) }})
+                  </span>
 
                   <span v-if="item.timestampTo">
                     &gt;
@@ -51,7 +130,27 @@
                 </span>
               </div>
             </li>
-  </transition-group>
+          </transition-group> -->
+
+          <button
+            class="btn btn--option btn--load-data"
+            v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.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>
 </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 {
+  width: 100%;
+  background-color: #111;
+  border-collapse: collapse;
+  /* border-spacing: 0 0.5em; */
+  text-align: center;
+
+  thead {
     position: sticky;
     top: 0;
+    background-color: #222222;
   }
 
-.journal_item {
+  th {
-  display: flex;
+    padding: 0.5em;
-  justify-content: space-between;
+  }
-  align-items: center;
-  flex-wrap: wrap;
-  text-align: left;
 
-  gap: 0.5em 1em;
+  tr {
+    background-color: #353535;
+    border: none;
+  }
 
-  line-height: 1.7em;
+  td {
     padding: 0.75em;
+    border-bottom: solid 5px #1a1a1a;
 
-  &.online {
+    .level-badge {
-    cursor: pointer;
+      margin: 0 auto;
+    }
+  }
 }
 
-  span[data-status='true'] {
+.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,5 +1,23 @@
 <template>
-  <transition-group class="journal-list" tag="ul" name="list-anim">
+  <div class="journal-list">
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
+
+        <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>
+          <transition-group tag="ul" name="list-anim">
             <li
               v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
               class="journal_item"
@@ -77,7 +95,9 @@
                 <!-- 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))"
+                    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"
@@ -101,12 +121,12 @@
                     :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
                   />
 
-          <span :style="{ color: timetable.terminated && timetable.fulfilled ? 'lightgreen' : '' }">
                   <span>
+                    <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
                       {{ timetable.currentDistance + ' km' }}
                     </span>
                     <span> / </span>
-            <span>{{ timetable.routeDistance }} km</span>
+                    <span class="text--primary">{{ timetable.routeDistance }} km</span>
                   </span>
 
                   <span class="text--grayed" v-if="timetable.currentSceneryName">
@@ -169,7 +189,8 @@
                           Math.floor(
                             (item.currentHistoryIndex.value == 0
                               ? timetable.stockMass!
-                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
+                              : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) /
+                              1000
                           )
                         }}t
                       </span>
@@ -208,6 +229,21 @@
               </div>
             </li>
           </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>
+    </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>
 </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,
     },
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Object as PropType<DataStatus>,
+    },
+  },
+
+  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 {