From 5d4089cc1c2ff3395e40d5b7f482abb2d30034e3 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 10 Jan 2022 03:30:14 +0100
Subject: [PATCH] Dodano przycisk powrotu do listy scenerii w widoku scenerii

---
 src/assets/icon-back.svg                      |  3 ++
 src/components/SceneryView/SceneryHistory.vue |  2 +-
 src/views/SceneryView.vue                     | 48 ++++++++++++-------
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/icon-back.svg

diff --git a/src/assets/icon-back.svg b/src/assets/icon-back.svg
new file mode 100644
index 0000000..027a350
--- /dev/null
+++ b/src/assets/icon-back.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 5L8 20L32 35" stroke="white" stroke-width="4.64516"/>
+</svg>
diff --git a/src/components/SceneryView/SceneryHistory.vue b/src/components/SceneryView/SceneryHistory.vue
index 2b0e9f6..09a1f21 100644
--- a/src/components/SceneryView/SceneryHistory.vue
+++ b/src/components/SceneryView/SceneryHistory.vue
@@ -10,7 +10,7 @@
           @keydown.space="toggleTimeline(i)"
           tabindex="0"
         >
-          {{ timeline.date }} <img :src="icons.descArrow" alt="" />
+          {{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" />
         </h3>
 
         <span v-if="timeline.showTimeline">
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index d4c94ac..5b830b1 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -10,26 +10,29 @@
 
     <div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
       <!-- <scenery-info-header :station="stationInfo" /> -->
+      <button v-if="!timetableOnly" class="back-btn btn btn--image" title="Powrót do scenerii" @click="navigateTo('/')">
+        <img :src="icons.back" alt="Back to scenery" />
+      </button>
+
+      <button
+        v-if="!timetableOnly"
+        class="history-btn btn btn--image"
+        @click="setCardViewMode(viewMode == 'history' ? 'info' : 'history')"
+        :title="viewMode == 'history' ? 'Powrót do widoku scenerii' : 'Widok historii dyżurnych ruchu'"
+      >
+        <img :src="viewMode == 'history' ? icons.history : icons.user" alt="icon" />
+      </button>
+
       <SceneryHeader :station="stationInfo" />
 
-
       <div v-if="viewMode == 'info'">
-        <button v-if="!timetableOnly" class="history-btn btn btn--image" @click="setCardViewMode('history')" title="Widok historii dyżurnych ruchu">
-          <img :src="icons.history" alt="History icon" />
-        </button>
-
         <SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
         <SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
       </div>
-      
-      <div v-else-if="viewMode == 'history'">
-        <button class="history-btn btn btn--image" @click="setCardViewMode('info')">
-          <img :src="icons.user" alt="History icon" />
-        </button>
 
+      <div v-else-if="viewMode == 'history'">
         <SceneryHistory :name="stationInfo.name" />
       </div>
-
     </div>
   </div>
 </template>
@@ -41,7 +44,7 @@ import { DataStatus } from '@/scripts/enums/DataStatus';
 import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
 import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
 import SceneryHistory from '@/components/SceneryView/SceneryHistory.vue';
-import SceneryHeader from "@/components/SceneryView/SceneryHeader.vue";
+import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
 
 import ActionButton from '@/components/Global/ActionButton.vue';
 
@@ -57,6 +60,7 @@ export default defineComponent({
     icons: {
       history: require('@/assets/icon-history.svg'),
       user: require('@/assets/icon-user.svg'),
+      back: require('@/assets/icon-back.svg'),
     },
 
     cardHeight: 0,
@@ -93,11 +97,15 @@ export default defineComponent({
     setCardViewMode(mode: string) {
       this.viewMode = mode;
     },
+
+    navigateTo(path: string) {
+      this.$router.push(path);
+    }
   },
 
   mounted() {
     this.cardHeight = (this.$refs['card-wrapper'] as HTMLElement).getBoundingClientRect().height;
-  }
+  },
 });
 </script>
 
@@ -151,15 +159,21 @@ $sceneryBgCol: #333;
   }
 }
 
-button.history-btn {
+button.btn {
   position: absolute;
-  top: 0.5em;
-  right: 0.5em;
-
   padding: 0.25em;
 
+  top: 0.5em;
   img {
     width: 2em;
   }
 }
+
+button.history-btn {
+  right: 0.5em;
+}
+
+button.back-btn {
+  left: 0.5em;
+}
 </style>