From c160868f897d59a0456d63bd228df45a304b8cd0 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 10 Aug 2021 20:27:25 +0200
Subject: [PATCH] Aktualizacja widoku historii

---
 src/components/Global/SearchBox.vue |  2 +-
 src/locales/en.json                 |  4 +-
 src/styles/global.scss              |  4 ++
 src/views/HistoryView.vue           | 58 ++++++++++++++++++++++-------
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/components/Global/SearchBox.vue b/src/components/Global/SearchBox.vue
index a5c9768..1da71b1 100644
--- a/src/components/Global/SearchBox.vue
+++ b/src/components/Global/SearchBox.vue
@@ -82,7 +82,7 @@ export default defineComponent({
 
     background: #333;
     border-radius: 0.5em;
-    min-width: 200px;
+    min-width: 220px;
 
     margin: 0.5em 0 0.5em 0.5em;
 
diff --git a/src/locales/en.json b/src/locales/en.json
index d0ad15e..f00ddd0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -146,7 +146,7 @@
     "terminates": "TERMINATES\nHERE"
   },
   "history": {
-    "search-train": "Search by train number",
-    "search-driver": "Search by driver name"
+    "search-train": "Search for train no.",
+    "search-driver": "Search for driver name..."
   }
 }
\ No newline at end of file
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 4ab5974..6266360 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -194,4 +194,8 @@ ul {
   &--primary {
     color: var(--clr-primary);
   }
+
+  &--grayed {
+    color: #ccc;
+  }
 }
\ No newline at end of file
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index d6fcee4..b13df0b 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -2,14 +2,7 @@
   <section class="history-view">
     <h2>Historia rozkładów jazdy</h2>
 
-    <div
-      style="
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-      "
-    >
+    <div class="history_search">
       <search-box
         v-model:searchedValue="searchedDriver"
         titleToTranslate="history.search-driver"
@@ -24,7 +17,7 @@
         @keypress="keyPressed"
       ></search-box>
 
-      <action-button @click="search" style="margin-left: 0.5em">
+      <action-button class="search-button" @click="search">
         Szukaj
       </action-button>
     </div>
@@ -70,6 +63,10 @@
                     <div>
                       <b>{{ item.route.replace("|", " - ") }}</b>
                     </div>
+
+                    <div class="text--grayed">
+                      {{ item.sceneriesString.replaceAll("%", " - ") }}
+                    </div>
                   </span>
 
                   <span
@@ -113,7 +110,12 @@
                   </div>
 
                   <div>
-                    <b>Zakończenie:</b>
+                    <b>Zakończenie (planowe):</b>
+                    {{ localeDate(item.scheduledEndDate) }}
+                  </div>
+
+                  <div v-if="item.terminated">
+                    <b>Zakończenie (rzeczywiste):</b>
                     {{ localeDate(item.endDate) }}
                   </div>
                 </div>
@@ -135,8 +137,11 @@ import SearchBox from "@/components/Global/SearchBox.vue";
 import dateMixin from "@/mixins/dateMixin";
 import { DataStatus } from "@/scripts/enums/DataStatus";
 
-const API_URL =
-  "https://stacjownik-api-n5re2.ondigitalocean.app/api/getTimetables";
+const PROD_MODE = false;
+
+const API_URL = PROD_MODE
+  ? "https://stacjownik-api-n5re2.ondigitalocean.app/api/getTimetables"
+  : "http://localhost:3001/api/getTimetables";
 
 interface APIResponse {
   errorMessage: string | null;
@@ -152,7 +157,7 @@ interface TimetableHistory {
   route: string;
   twr: number;
   skr: number;
-  sceneries: string[];
+  sceneriesString: string;
 
   routeDistance: number;
   currentDistance: number;
@@ -163,6 +168,9 @@ interface TimetableHistory {
   beginDate: string;
   endDate: string;
 
+  scheduledBeginDate: string;
+  scheduledEndDate: string;
+
   terminated: boolean;
   fulfilled: boolean;
 }
@@ -280,6 +288,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/responsive.scss";
+
 .warning {
   &-enter-from,
   &-leave-to {
@@ -334,6 +344,17 @@ h2 {
   }
 }
 
+.history_search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-button {
+  margin-left: 0.5em;
+}
+
 .history_warning {
   text-align: center;
   font-size: 1.3em;
@@ -353,4 +374,15 @@ li,
   padding: 1em;
   margin: 1em 0;
 }
+
+@include smallScreen() {
+  .history_search {
+    flex-direction: column;
+  }
+
+  .search-button {
+    margin-left: 0;
+    margin-top: 0.5em;
+  }
+}
 </style>
\ No newline at end of file