From b9310ba2c4629e5b097f4d2fd47de443a2fcbdd9 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 17 May 2022 12:29:38 +0200
Subject: [PATCH] =?UTF-8?q?Lokalizacja=20napis=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/en.json       |  5 +++-
 src/locales/pl.json       |  5 +++-
 src/views/JournalView.vue | 50 +++++++++++++++++++++++++++++++++++++--
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index f2df87b..432ccec 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -198,7 +198,10 @@
     "filter-all": "ALL ENTRIES",
     "filter-abandoned": "ABANDONED",
     "filter-fulfilled": "FULFILLED",
-    "filter-active": "ACTIVE"
+    "filter-active": "ACTIVE",
+
+    "no-further-data": "No further data for current parameters",
+    "loading-further-data": "Loading..."
   },
   "scenery": {
     "users": "PLAYERS ONLINE",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 46fdfb0..522b47d 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -200,7 +200,10 @@
     "filter-all": "WSZYSTKIE",
     "filter-abandoned": "PORZUCONE",
     "filter-fulfilled": "WYPEŁNIONE",
-    "filter-active": "AKTYWNE"
+    "filter-active": "AKTYWNE",
+
+    "no-further-data": "Brak dalszych wyników dla podanych parametrów",
+    "loading-further-data": "Ładowanie..."
   },
   "scenery": {
     "users": "GRACZE ONLINE",
diff --git a/src/views/JournalView.vue b/src/views/JournalView.vue
index a40f417..16999db 100644
--- a/src/views/JournalView.vue
+++ b/src/views/JournalView.vue
@@ -3,6 +3,10 @@
     <div class="history-wrapper">
       <JournalOptions @changedOptions="search" @changedFilter="search" />
 
+      <button class="return-btn" @click="scrollToTop" v-if="showReturnButton">
+        <img :src="icons.arrow" alt="return arrow" />
+      </button>
+
       <div class="history_list">
         <div class="list_wrapper" ref="scrollElement">
           <transition name="warning" mode="out-in">
@@ -119,8 +123,8 @@
         </div>
       </div>
 
-      <div class="history_warning" v-if="scrollNoMoreData">Brak dalszych wyników dla podanych parametrów</div>
-      <div class="history_warning" v-else-if="!scrollDataLoaded">Pobieranie kolejnych wyników...</div>
+      <div class="history_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data' )}}</div>
+      <div class="history_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data' )}}</div>
     </div>
   </section>
 </template>
@@ -186,11 +190,14 @@ export default defineComponent({
   data: () => ({
     icons: {
       loading: require('@/assets/icon-loading.svg'),
+      arrow: require('@/assets/icon-arrow-asc.svg'),
     },
 
     currentQuery: '',
     scrollDataLoaded: true,
     scrollNoMoreData: false,
+
+    showReturnButton: false,
   }),
 
   setup() {
@@ -264,6 +271,8 @@ export default defineComponent({
     },
 
     handleScroll() {
+      this.showReturnButton = window.scrollY > window.innerHeight;      
+
       const element = this.$refs.scrollElement as HTMLElement;
 
       if (
@@ -274,6 +283,10 @@ export default defineComponent({
         this.addHistoryData();
     },
 
+    scrollToTop() {
+      window.scrollTo({ top: 0 });
+    },
+
     search() {
       this.fetchHistoryData({
         searchedDriver: this.searchedDriver,
@@ -415,6 +428,39 @@ export default defineComponent({
   }
 }
 
+// Style
+
+.return-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: fixed;
+  right: 0;
+  bottom: 0;
+
+  margin: 0 1em 1em 0;
+
+  width: 2em;
+  height: 2em;
+
+  font-size: 1.7em;
+
+  background-color: #333;
+  color: white;
+
+  border-radius: 50%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3c3c3c;
+  }
+
+  img {
+    width: 1.3em;
+  }
+}
+
 .history-view {
   height: 100%;