Usprawniono działanie listy dziennika dyżurnych

src/components/JournalView/JournalDispatchers.vue

@@ -106,6 +106,7 @@ export default defineComponent({
     const searchersValues = reactive({
       'search-dispatcher': '',
       'search-station': '',
+      'search-date': '',
     } as JournalDispatcherSearcher);
 
     const countFromIndex = ref(0);
@@ -211,14 +212,15 @@ export default defineComponent({
 
       const queries: string[] = [];
 
-      // const dispatcher = props.searchers?.find((s) => s.id == 'search-dispatcher')?.value.trim();
-      // const station = props.searchers?.find((s) => s.id == 'search-station')?.value.trim();
-
       const dispatcher = props.searchers?.['search-dispatcher'].trim();
       const station = props.searchers?.['search-station'].trim();
+      const dateString = props.searchers?.['search-date'].trim();
+      const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) - 120 * 60 * 1000 : undefined;
+      const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       if (dispatcher) queries.push(`dispatcherName=${dispatcher}`);
       if (station) queries.push(`stationName=${station}`);
+      if (timestampFrom && timestampTo) queries.push(`timestampFrom=${timestampFrom}`, `timestampTo=${timestampTo}`);
 
       // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
       if (this.sorterActive.id == 'timestampFrom') queries.push('sortBy=timestampFrom');

src/components/JournalView/JournalDispatchersList.vue

@@ -1,41 +1,42 @@
 <template>
   <ul class="journal-list">
-    <transition-group name="journal-list-anim">
-      <li v-for="(doc, i) in dispatcherHistory" :key="doc.id">
-        <div class="journal_day" v-if="isAnotherDay(i - 1, i)">
-          <span>{{ new Date(doc.timestampFrom).toLocaleDateString('pl-PL') }}</span>
-        </div>
+    <!-- <transition-group name="journal-list-anim"> -->
+    <li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
+      <div v-if="typeof item == 'string'" class="journal_day">
+        {{ item }}
+      </div>
 
-        <div
-          class="journal_item"
-          :class="{ online: doc.isOnline }"
-          @click="navigateToScenery(doc.stationName, doc.isOnline)"
-          @keydown.enter="navigateToScenery(doc.stationName, doc.isOnline)"
-          tabindex="0"
-        >
+      <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>
+          <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>
+
+        <span>
+          <span :data-status="item.isOnline"> {{ item.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
           <span>
-            <b class="text--primary">{{ doc.dispatcherName }}</b> &bull; <b>{{ doc.stationName }}</b>
-            <span class="text--grayed">&nbsp;#{{ doc.stationHash }}&nbsp;</span>
-            <span class="region-badge" :class="doc.region">PL1</span>
+            {{ new Date(item.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
           </span>
 
-          <span>
-            <span :data-status="doc.isOnline"> {{ doc.isOnline ? $t('journal.online-since') : 'OFFLINE' }}&nbsp; </span>
-            <span>
-              {{ new Date(doc.timestampFrom).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-            </span>
+          <span v-if="item.currentDuration && item.isOnline"> ({{ calculateDuration(item.currentDuration) }}) </span>
 
-            <span v-if="doc.currentDuration && doc.isOnline"> ({{ calculateDuration(doc.currentDuration) }}) </span>
-
-            <span v-if="doc.timestampTo">
-              &gt;
-              {{ new Date(doc.timestampTo).toLocaleTimeString('pl-PL', { timeStyle: 'short' }) }}
-              ({{ $t('journal.duty-lasted') }} {{ calculateDuration(doc.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>
-        </div>
-      </li>
-    </transition-group>
+        </span>
+      </div>
+    </li>
+    <!-- </transition-group> -->
   </ul>
 </template>
 
@@ -54,6 +55,17 @@ export default defineComponent({
 
   mixins: [dateMixin],
 
+  computed: {
+    computedDispatcherHistory() {
+      return this.dispatcherHistory.reduce((acc, historyItem, i) => {
+        if (this.isAnotherDay(i - 1, i)) acc.push(new Date(historyItem.timestampFrom).toLocaleDateString('pl-PL'));
+        acc.push(historyItem);
+
+        return acc;
+      }, [] as (DispatcherHistory | string)[]);
+    },
+  },
+
   methods: {
     navigateToScenery(name: string, isOnline: boolean) {
       if (!isOnline) return;
@@ -87,6 +99,11 @@ export default defineComponent({
   }
 }
 
+li.sticky {
+  position: sticky;
+  top: 0;
+}
+
 .journal_item {
   display: flex;
   justify-content: space-between;
@@ -108,36 +125,19 @@ export default defineComponent({
 }
 
 .journal_day {
-  position: relative;
-  text-align: center;
-  background-color: #4d4d4d;
-
   margin: 1em 0;
+  padding: 0.5em;
+  font-weight: bold;
+
+  background-color: #333;
 
   span {
     position: relative;
-    background-color: #4d4d4d;
+    background-color: inherit;
     z-index: 10;
+    padding-right: 1em;
 
-    padding: 0 0.5em;
-  }
-
-  &::after {
-    position: absolute;
-    content: '';
-
-    z-index: 0;
-
-    left: 50%;
-    top: 50%;
-
-    transform: translate(-50%, -50%);
-
-    height: 3px;
-    width: 60%;
-    min-width: 200px;
-
-    background-color: white;
+    font-weight: bold;
   }
 }
 

src/components/JournalView/JournalOptions.vue

@@ -75,10 +75,10 @@
           </div>
         </div>
 
-        <div class="data-status">
+        <!-- <div class="data-status">
           <span v-if="dataStatus == DataStatus.Loading"> Pobieranie danych...</span>
           <span v-if="dataStatus == DataStatus.Loaded"> Pobrano dane </span>
-        </div>
+        </div> -->
       </div>
     </transition>
   </div>

src/components/TrainsView/TrainTable.vue

@@ -118,11 +118,10 @@ export default defineComponent({
   text-align: center;
 
   padding: 1em 0;
-  margin: 1em 0;
 
   font-size: 1.5em;
 
-  background: #333;
+  background: #1a1a1a;
 }
 
 img.train-image {
@@ -195,4 +194,4 @@ img.train-image {
     text-align: center;
   }
 }
-</style>
+</style>

src/types/Journal/JournalDispatcherTypes.ts

@@ -1,5 +1,5 @@
 export type JournalDispatcherSearcher = {
-  [key in 'search-dispatcher' | 'search-station']: string;
+  [key in 'search-dispatcher' | 'search-station' | 'search-date']: string;
 };
 
 export interface JournalDispatcherSorter {