chore: redesigned scenery history tables

2026-05-03 05:18:11 +00:00 · 2024-06-07 16:44:09 +02:00
parent e9635eae06
commit fb56378f18
4 changed files with 170 additions and 109 deletions
@@ -3,64 +3,63 @@
    <div class="history-wrapper">
      <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />

-      <div class="no-history" v-else-if="historyList.length == 0">
+      <div v-else-if="historyList.length == 0" class="no-history">
        {{ $t('scenery.history-list-empty') }}
      </div>

-      <table class="scenery-history-table" v-else>
-        <thead>
-          <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 historyList" :key="historyItem.id">
-            <td>#{{ historyItem.stationHash }}</td>
-            <td>
+      <div v-else class="history-list">
+        <div v-for="historyItem in historyList" :key="historyItem.id">
+          <span>
+            <span class="text--grayed" style="margin-right: 10px">
+              #{{ historyItem.stationHash }}
+            </span>
+            <b
+              v-if="historyItem.dispatcherLevel !== null"
+              class="level-badge dispatcher"
+              :style="
+                calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
+              "
+            >
+              {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
+            </b>
+            <b style="margin-left: 5px">
              <router-link
                :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
              >
-                <b>{{ historyItem.dispatcherName }}</b>
+                {{ historyItem.dispatcherName }}
              </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>
+            </b>

-              <b v-else>-</b>
-            </td>
-            <td class="text--primary">
-              <b>{{ historyItem.dispatcherRate }}</b>
-            </td>
-            <td style="min-width: 300px">
-              <div v-if="historyItem.timestampTo">
-                <b>{{ $d(historyItem.timestampFrom) }}</b>
+            <div>
+              <span>
+                Ocena:
+                <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
+              </span>
+              |
+              <span>
+                Zmiany statusów: <b>{{ historyItem.statusHistory.length }}</b>
+              </span>
+            </div>
+          </span>

-                {{ timestampToString(historyItem.timestampFrom) }}
-                - {{ timestampToString(historyItem.timestampTo) }} ({{
-                  calculateDuration(historyItem.currentDuration)
-                }})
-              </div>
+          <span>
+            <span v-if="historyItem.timestampTo">
+              <b>{{ $d(historyItem.timestampFrom) }}</b>

-              <div class="dispatcher-online" v-else>
-                {{ $t('journal.online-since') }}
-                <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
-                ({{ calculateDuration(historyItem.currentDuration) }})
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              {{ timestampToString(historyItem.timestampFrom) }}
+              - {{ timestampToString(historyItem.timestampTo) }} ({{
+                calculateDuration(historyItem.currentDuration)
+              }})
+            </span>
+
+            <span class="dispatcher-online" v-else>
+              {{ $t('journal.online-since') }}
+              <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+              ({{ calculateDuration(historyItem.currentDuration) }})
+            </span>
+          </span>
+        </div>
+      </div>
    </div>

    <div class="bottom-info">
@@ -165,8 +164,29 @@ export default defineComponent({
  overflow: auto;
 }

+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+}
+
+.history-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.75em;
+}
+
 .level-badge {
-  margin: 0 auto;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
 }

 .dispatcher-online {
@@ -174,13 +194,10 @@ export default defineComponent({
 }

@include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
-  .list-item {
-    align-items: center;
+  .history-list > div {
    flex-direction: column;
+    justify-content: center;
+    text-align: center;
  }
 }
 </style>
-../../store/storeTypes
@@ -10,68 +10,80 @@
      >
        {{ $t(`scenery.timetable-${mode}`) }}
      </button>
-
-      <!-- <button class="btn btn--option checked">PRZEZ</button> -->
-
-      <!-- <button class="btn btn--option checked">KOŃCZY BIEG</button> -->
    </div>

    <div class="history-wrapper">
      <Loading v-if="dataStatus != DataStatus.Loaded" />

-      <div class="no-history" v-else-if="historyList.length == 0">
+      <div v-else-if="historyList.length == 0" class="no-history">
        {{ $t('scenery.history-list-empty') }}
      </div>

-      <table class="scenery-history-table" v-else>
-        <thead>
-          <th>{{ $t('scenery.timetables-history-id') }}</th>
-          <th style="width: 15%">{{ $t('scenery.timetables-history-number') }}</th>
-          <th style="width: 25%">{{ $t('scenery.timetables-history-route') }}</th>
-          <th>{{ $t('scenery.timetables-history-driver') }}</th>
-          <th>{{ $t('scenery.timetables-history-author') }}</th>
-          <th style="width: 20%">{{ $t('scenery.timetables-history-date') }}</th>
-        </thead>
+      <div v-else class="history-list">
+        <div v-for="timetableHistory in historyList" :key="timetableHistory.id">
+          <span>
+            <div>
+              <span
+                class="timetable-status-indicator"
+                :data-terminated="timetableHistory.terminated"
+                :data-fulfilled="timetableHistory.fulfilled"
+              >
+                {{
+                  timetableHistory.terminated
+                    ? timetableHistory.fulfilled
+                      ? '&ofcir;'
+                      : '&olcross;'
+                    : '&bigcirc;'
+                }}
+              </span>
+              #{{ timetableHistory.id }} |
+              <b class="text--primary">{{ timetableHistory.trainCategoryCode }}</b>
+              {{ timetableHistory.trainNo }}
+              {{ timetableHistory.route.replace('|', ' &Rightarrow; ') }}
+            </div>

-        <tbody>
-          <tr v-for="historyItem in historyList" :key="historyItem.id">
-            <td>
-              <router-link :to="`/journal/timetables?search-train=%23${historyItem.id}`">
-                #{{ historyItem.id }}
-              </router-link>
-            </td>
-            <td>
-              <b class="text--primary">{{ historyItem.trainCategoryCode }}</b>
-              {{ historyItem.trainNo }}
-            </td>
-            <td>{{ historyItem.route.replace('|', ' -> ') }}</td>
-            <td>
-              <router-link :to="`/journal/timetables?search-driver=${historyItem.driverName}`">
-                {{ historyItem.driverName }}
-              </router-link>
-            </td>
-
-            <td>
-              <router-link
-                v-if="historyItem.authorName"
-                :to="`/journal/timetables?search-dispatcher=${historyItem.authorName}`"
-                >{{ historyItem.authorName }}
-              </router-link>
-              <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-            </td>
-            <td>
+            <div class="text--grayed">
+              Wystawiony
              <b>{{
                localeDateTime(
-                  historyItem.createdAt > historyItem.beginDate
-                    ? historyItem.beginDate
-                    : historyItem.createdAt,
+                  timetableHistory.createdAt > timetableHistory.beginDate
+                    ? timetableHistory.beginDate
+                    : timetableHistory.createdAt,
                  $i18n.locale
                )
              }}</b>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <span v-if="timetableHistory.authorName">
+                przez:
+                <b>
+                  <router-link
+                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                  >
+                    {{ timetableHistory.authorName }}
+                  </router-link>
+                </b>
+              </span>
+              dla maszynisty:
+              <b>
+                <router-link
+                  :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                >
+                  {{ timetableHistory.driverName }}
+                </router-link>
+              </b>
+            </div>
+          </span>
+
+          <button
+            @click="
+              navigateTo(`/journal/timetables`, {
+                'search-train': `#${timetableHistory.id}`
+              })
+            "
+          >
+            <img src="/public/images/icon-back.svg" alt="icon navigate to timetable" />
+          </button>
+        </div>
+      </div>
    </div>

    <div class="bottom-info">
@@ -90,13 +102,15 @@ import Loading from '../Global/Loading.vue';
 import { API } from '../../typings/api';
 import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import routerMixin from '../../mixins/routerMixin';
+import { useMainStore } from '../../store/mainStore';

 const historyModeList = ['issuedFrom', 'terminatingAt', 'via'] as const;
 type HistoryMode = (typeof historyModeList)[number];

 export default defineComponent({
  name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
+  mixins: [dateMixin, routerMixin],
  props: {
    station: {
      type: Object as PropType<Station>
@@ -112,6 +126,7 @@ export default defineComponent({
      historyModeList,

      apiStore: useApiStore(),
+      mainStore: useMainStore(),
      dataStatus: Status.Data.Loading,
      DataStatus: Status.Data,

@@ -203,10 +218,37 @@ export default defineComponent({
  }
 }

-table td a {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
 }
+
+.history-list > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em;
+  background-color: #2b2b2b;
+  line-height: 1.5em;
+}
+
+.history-list > div > button > img {
+  width: 2em;
+  transform: rotate(180deg);
+}
+
+.timetable-status-indicator {
+  &[data-fulfilled='true'] {
+    color: limegreen;
+  }
+}
+
+// table td a {
+//   max-width: 100%;
+//   overflow: hidden;
+//   text-overflow: ellipsis;
+//   white-space: nowrap;
+// }
 </style>