From 6ceae3f161bb176987de781feebe661a641a3c7e Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 23 Jun 2023 14:19:28 +0200
Subject: [PATCH] =?UTF-8?q?revamp=20tabeli=20historii=20dy=C5=BCur=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SceneryView/SceneryDispatchersHistory.vue | 102 +++++++++---------
 .../SceneryView/SceneryTimetablesHistory.vue  |  47 +-------
 src/styles/SceneryView/styles.scss            |  11 --
 src/styles/badge.scss                         |   1 -
 src/styles/sceneryViewTables.scss             |  31 ++++++
 src/views/SceneryView.vue                     |   8 +-
 6 files changed, 94 insertions(+), 106 deletions(-)
 delete mode 100644 src/styles/SceneryView/styles.scss
 create mode 100644 src/styles/sceneryViewTables.scss

diff --git a/src/components/SceneryView/SceneryDispatchersHistory.vue b/src/components/SceneryView/SceneryDispatchersHistory.vue
index ca07009..fb2d058 100644
--- a/src/components/SceneryView/SceneryDispatchersHistory.vue
+++ b/src/components/SceneryView/SceneryDispatchersHistory.vue
@@ -2,37 +2,61 @@
   <section class="scenery-dispatchers-history scenery-section">
     <Loading v-if="dataStatus != 2" />
 
-    <div class="list-warning" v-else-if="dispatcherHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <table class="scenery-history-table" v-else-if="dispatcherHistoryList.length">
+      <thead>
+        <!-- <th>{{ $t('scenery.timetables-history-id') }}</th>
+        <th>{{ $t('scenery.timetables-history-number') }}</th>
+        <th>{{ $t('scenery.timetables-history-route') }}</th>
+        <th>{{ $t('scenery.timetables-history-driver') }}</th>
+        <th>{{ $t('scenery.timetables-history-author') }}</th>
+        <th>{{ $t('scenery.timetables-history-date') }}</th> -->
 
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="item in dispatcherHistoryList">
-        <router-link class="item-general" :to="`/journal/dispatchers?dispatcherName=${item.dispatcherName}`">
-          <span class="text--grayed">#{{ item.stationHash }}&nbsp;</span>
-          <b
-            v-if="item.dispatcherLevel !== null"
-            class="level-badge dispatcher"
-            :style="calculateExpStyle(item.dispatcherLevel, item.dispatcherIsSupporter)"
-          >
-            {{ item.dispatcherLevel >= 2 ? item.dispatcherLevel : 'L' }}
-          </b>
+        <th>Hash</th>
+        <th>Dyżurny</th>
+        <th>Poziom</th>
+        <th>Ocena</th>
+        <th>Data</th>
+      </thead>
 
-          <b>{{ item.dispatcherName }}</b>
-        </router-link>
+      <tbody>
+        <tr v-for="historyItem in dispatcherHistoryList">
+          <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: 300px">
+            <div v-if="historyItem.timestampTo">
+              <b>{{ $d(historyItem.timestampFrom) }}</b>
 
-        <div v-if="item.timestampTo">
-          <b>{{ $d(item.timestampFrom) }}</b>
+              {{ timestampToString(historyItem.timestampFrom) }}
+              - {{ timestampToString(historyItem.timestampTo) }} ({{ calculateDuration(historyItem.currentDuration) }})
+            </div>
 
-          {{ timestampToString(item.timestampFrom) }}
-          - {{ timestampToString(item.timestampTo) }} ({{ calculateDuration(item.currentDuration) }})
-        </div>
+            <div class="dispatcher-online" v-else>
+              {{ $t('journal.online-since') }}
+              <b>{{ timestampToString(historyItem.timestampFrom) }}</b>
+              ({{ calculateDuration(historyItem.currentDuration) }})
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-        <div class="dispatcher-online" v-else>
-          {{ $t('journal.online-since') }}
-          <b>{{ timestampToString(item.timestampFrom) }}</b>
-          ({{ calculateDuration(item.currentDuration) }})
-        </div>
-      </li>
-    </ul>
+    <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
   </section>
 </template>
 
@@ -84,30 +108,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
+@import '../../styles/sceneryViewTables.scss';
 
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  text-align: left;
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-.item-general {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25em;
+.level-badge {
+  margin: 0 auto;
 }
 
 .dispatcher-online {
diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue
index fdc11b6..ab5297e 100644
--- a/src/components/SceneryView/SceneryTimetablesHistory.vue
+++ b/src/components/SceneryView/SceneryTimetablesHistory.vue
@@ -2,7 +2,7 @@
   <section class="scenery-timetables-history scenery-section">
     <Loading v-if="dataStatus != 2" />
 
-    <table v-else-if="sceneryHistoryList.length">
+    <table class="scenery-history-table" v-else-if="sceneryHistoryList.length">
       <thead>
         <th>{{ $t('scenery.timetables-history-id') }}</th>
         <th>{{ $t('scenery.timetables-history-number') }}</th>
@@ -39,7 +39,7 @@
       </tbody>
     </table>
 
-    <div class="list-warning" v-else>{{ $t('scenery.history-list-empty') }}</div>
+    <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
   </section>
 </template>
 
@@ -90,46 +90,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    position: sticky;
-    top: 0;
-    background-color: #222222;
-  }
-
-  th {
-    padding: 0.5em;
-  }
-
-  tr {
-    background-color: #353535;
-    border: none;
-  }
-
-  td {
-    padding: 0.75em;
-    border-bottom: solid 5px #111;
-  }
-}
-
-@include smallScreen {
-  .list-item {
-    grid-template-columns: 1fr 1fr;
-  }
-}
+@import '../../styles/sceneryViewTables.scss';
 </style>
diff --git a/src/styles/SceneryView/styles.scss b/src/styles/SceneryView/styles.scss
deleted file mode 100644
index 379a32e..0000000
--- a/src/styles/SceneryView/styles.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.scenery-section {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
-}
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 3148bbf..65b6598 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -30,7 +30,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 0.9em;
 
   &.driver {
     border-radius: 50%;
diff --git a/src/styles/sceneryViewTables.scss b/src/styles/sceneryViewTables.scss
new file mode 100644
index 0000000..83d9d30
--- /dev/null
+++ b/src/styles/sceneryViewTables.scss
@@ -0,0 +1,31 @@
+table.scenery-history-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    position: sticky;
+    top: 0;
+    background-color: #222222;
+  }
+
+  th {
+    padding: 0.5em;
+  }
+
+  tr {
+    background-color: #353535;
+    border: none;
+  }
+
+  td {
+    padding: 0.75em;
+    border-bottom: solid 5px #111;
+  }
+}
+
+.no-history {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+  color: #ccc;
+}
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index ea4833b..1656dfe 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -1,4 +1,4 @@
-  <template>
+<template>
   <div class="scenery-view">
     <div class="scenery-offline" v-if="!stationInfo && isComponentVisible && store.dataStatuses.sceneries == 2">
       <div>{{ $t('scenery.no-scenery') }}</div>
@@ -172,6 +172,12 @@ button.back-btn {
   }
 }
 
+.scenery-section {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
 .scenery-wrapper {
   display: grid;
   grid-template-columns: 4fr 5fr;