From c7162dbd148ea7c03edc28bf2f5f15d1b746f4e4 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 22 Mar 2024 23:41:43 +0100
Subject: [PATCH 1/6] =?UTF-8?q?dodano=20dymki=20kontekstowe=20oraz=20podgl?=
 =?UTF-8?q?=C4=85d=20pojazdu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  | 11 ++-
 src/components/Global/StockList.vue          | 20 ++++-
 src/components/PopUp/DonatorPopUp.vue        | 39 +++++++++
 src/components/PopUp/PopUp.vue               | 54 +++++++++++++
 src/components/PopUp/TrainCommentsPopUp.vue  | 38 +++++++++
 src/components/PopUp/VehiclePreviewPopUp.vue | 85 ++++++++++++++++++++
 src/components/StationsView/StationTable.vue | 16 +++-
 src/components/TrainsView/TrainInfo.vue      | 32 +++++---
 src/locales/en.json                          |  4 +
 src/locales/pl.json                          |  4 +
 src/store/popupStore.ts                      | 34 ++++++++
 src/store/typings.ts                         |  6 --
 12 files changed, 319 insertions(+), 24 deletions(-)
 create mode 100644 src/components/PopUp/DonatorPopUp.vue
 create mode 100644 src/components/PopUp/PopUp.vue
 create mode 100644 src/components/PopUp/TrainCommentsPopUp.vue
 create mode 100644 src/components/PopUp/VehiclePreviewPopUp.vue
 create mode 100644 src/store/popupStore.ts

diff --git a/src/App.vue b/src/App.vue
index e038a36..69d85ca 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="app_container" v-cloak>
+    <PopUp />
+
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
@@ -36,15 +38,14 @@ import { defineComponent, watch } from 'vue';
 import axios from 'axios';
 import { version } from '.././package.json';
 
-import Clock from './components/App/Clock.vue';
-
 import { useMainStore } from './store/mainStore';
 
+import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
 import TrainModal from './components/TrainsView/TrainModal.vue';
-
 import StorageManager from './managers/storageManager';
+import PopUp from './components/PopUp/PopUp.vue';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
 
@@ -55,7 +56,8 @@ export default defineComponent({
     Clock,
     StatusIndicator,
     AppHeader,
-    TrainModal
+    TrainModal,
+    PopUp
   },
 
   data: () => ({
@@ -217,6 +219,7 @@ export default defineComponent({
   grid-template-columns: 100%;
 
   min-height: 100vh;
+  position: relative;
 }
 
 .app_main {
diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index 23b8e1a..6fc56f1 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -7,11 +7,12 @@
       </p>
 
       <img
+        class="traction-only"
         :src="`https://rj.td2.info.pl/dist/img/thumbnails/${computedStockList[0].split(':')[0]}${
           /^EN/.test(computedStockList[0]) ? 'rb' : ''
         }.png`"
         @error="onImageError($event, computedStockList[0])"
-        width="400"
+        width="300"
         height="60"
       />
     </div>
@@ -23,7 +24,13 @@
           {{ stockName.split(':')[1] }}
         </p>
 
-        <span>
+        <span
+          @mouseenter="
+            popupStore.onPopUpShow($event, 'VehiclePreviewPopUp', stockName.split(':')[0])
+          "
+          @mousemove="popupStore.onPopUpMove"
+          @mouseleave="popupStore.onPopUpHide"
+        >
           <img
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
               /^EN/.test(stockName) ? 'rb' : ''
@@ -69,6 +76,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import { usePopupStore } from '../../store/popupStore';
 
 export default defineComponent({
   props: {
@@ -84,7 +92,8 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      popupStore: usePopupStore()
     };
   },
 
@@ -139,6 +148,7 @@ export default defineComponent({
 ul > li > span {
   display: flex;
   align-items: flex-end;
+  cursor: crosshair;
 }
 
 img {
@@ -147,6 +157,10 @@ img {
   height: auto;
 }
 
+img.traction-only {
+  max-width: 100%;
+}
+
 p {
   text-align: center;
   color: #aaa;
diff --git a/src/components/PopUp/DonatorPopUp.vue b/src/components/PopUp/DonatorPopUp.vue
new file mode 100644
index 0000000..67c7f71
--- /dev/null
+++ b/src/components/PopUp/DonatorPopUp.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="popup-content">
+    <img src="/images/icon-diamond.svg" alt="" />
+    <span>{{ popupStore.currentPopupContent }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { usePopupStore } from '../../store/popupStore';
+
+export default defineComponent({
+  data() {
+    return {
+      popupStore: usePopupStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  gap: 0.5em;
+
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: middle;
+  height: 1em;
+  margin-right: 0.5em;
+}
+</style>
diff --git a/src/components/PopUp/PopUp.vue b/src/components/PopUp/PopUp.vue
new file mode 100644
index 0000000..3023551
--- /dev/null
+++ b/src/components/PopUp/PopUp.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="popup" v-show="popupStore.currentPopupComponent" ref="preview">
+    <component v-if="popupStore.currentPopupComponent" :is="popupStore.currentPopupComponent" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DonatorPopUp from './DonatorPopUp.vue';
+import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
+import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
+import { usePopupStore } from '../../store/popupStore';
+
+export default defineComponent({
+  components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
+
+  data() {
+    return {
+      popupStore: usePopupStore()
+    };
+  },
+
+  watch: {
+    'popupStore.popupPosition': {
+      deep: true,
+      handler(val: typeof this.popupStore.popupPosition) {
+        const previewEl = this.$refs['preview'] as HTMLElement;
+
+        previewEl.style.top = `${val.y}px`;
+        previewEl.style.left = `${val.x}px`;
+        previewEl.style.transform = 'translateY(1.5rem)';
+
+        this.$nextTick(() => {
+          const isOutside =
+            val.y + previewEl.getBoundingClientRect().height > window.innerHeight + window.scrollY;
+
+          previewEl.style.transform = `translate(-50%, calc(${
+            isOutside ? '-100% - 1.5rem' : '1.5rem'
+          }))`;
+        });
+      }
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: absolute;
+  z-index: 250;
+  max-width: 400px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/PopUp/TrainCommentsPopUp.vue b/src/components/PopUp/TrainCommentsPopUp.vue
new file mode 100644
index 0000000..9e5ed2f
--- /dev/null
+++ b/src/components/PopUp/TrainCommentsPopUp.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="popup-content">
+    <span>{{ popupStore.currentPopupContent }}</span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { usePopupStore } from '../../store/popupStore';
+
+export default defineComponent({
+  data() {
+    return {
+      popupStore: usePopupStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>
diff --git a/src/components/PopUp/VehiclePreviewPopUp.vue b/src/components/PopUp/VehiclePreviewPopUp.vue
new file mode 100644
index 0000000..4ceda97
--- /dev/null
+++ b/src/components/PopUp/VehiclePreviewPopUp.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="popup-content">
+    <div v-if="imageState == 'loading'" class="loading-info">
+      {{ $t('vehicle-preview.loading') }}
+    </div>
+
+    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
+
+    <img
+      v-if="popupStore.currentPopupContent"
+      @load="onImageLoad"
+      @error="onImageError"
+      width="300"
+      height="176"
+      class="rounded-md w-full h-auto"
+      :src="`https://spythere.github.io/api/td2/images/${popupStore.currentPopupContent}--300px.jpg`"
+    />
+
+    <div class="vehicle-name" v-if="imageState != 'error'">
+      {{ popupStore.currentPopupContent.replace(/_/g, ' ') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { usePopupStore } from '../../store/popupStore';
+
+export default defineComponent({
+  data() {
+    return {
+      popupStore: usePopupStore(),
+      imageState: 'loading'
+    };
+  },
+
+  mounted() {
+    this.imageState = 'loading';
+  },
+
+  methods: {
+    onImageLoad() {
+      this.imageState = 'loaded';
+    },
+
+    onImageError(e: Event) {
+      this.imageState = 'error';
+
+      (e.target as HTMLElement).style.display = 'none';
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  // min-w-[300px] min-h-[200px] p-2 bg-slate-800 rounded-md
+
+  width: 300px;
+  min-height: 200px;
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+
+  padding: 0.5em;
+  border-radius: 0.5em;
+}
+
+.loading-info {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+img {
+  width: 100%;
+  height: auto;
+}
+
+.vehicle-name {
+  text-align: center;
+  margin-top: 0.5em;
+  color: #ccc;
+  text-wrap: wrap;
+}
+</style>
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 727cec4..833a95a 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -119,8 +119,16 @@
                 <span v-if="station.onlineInfo?.dispatcherName">
                   <b
                     v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                    :title="$t('donations.dispatcher-message')"
                     @click.stop="openDonationModal"
+                    @mouseenter="
+                      popupStore.onPopUpShow(
+                        $event,
+                        'DonatorPopUp',
+                        $t('donations.dispatcher-message')
+                      )
+                    "
+                    @mousemove="popupStore.onPopUpMove"
+                    @mouseleave="popupStore.onPopUpHide"
                   >
                     <img src="/images/icon-diamond.svg" alt="" />
                     {{ station.onlineInfo.dispatcherName }}
@@ -311,6 +319,7 @@ import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationH
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { usePopupStore } from '../../store/popupStore';
 
 export default defineComponent({
   props: {
@@ -339,13 +348,16 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
+    const popupStore = usePopupStore();
+
     const stationFiltersStore = useStationFiltersStore();
 
     return {
       Status: Status.Data,
       stationFiltersStore,
       mainStore,
-      apiStore
+      apiStore,
+      popupStore
     };
   },
 
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 0e90e00..7841fdf 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -36,7 +36,11 @@
         <div class="train-driver">
           <b
             v-if="apiStore.donatorsData.includes(train.driverName)"
-            :title="$t('donations.driver-message')"
+            @mouseenter="
+              popupStore.onPopUpShow($event, 'DonatorPopUp', $t('donations.driver-message'))
+            "
+            @mousemove="popupStore.onPopUpMove"
+            @mouseleave="popupStore.onPopUpHide"
           >
             {{ train.driverName }}
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
@@ -47,14 +51,22 @@
 
       <div class="general-timetable" v-if="train.timetableData">
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
-        <img
+        <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          class="image-warning"
-          src="/images/icon-warning.svg"
-          :title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-            train.timetableData
-          )})`"
-        />
+          @mouseenter="
+            popupStore.onPopUpShow(
+              $event,
+              'TrainCommentsPopUp',
+              `${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+                train.timetableData
+              )})`
+            )
+          "
+          @mousemove="popupStore.onPopUpMove"
+          @mouseleave="popupStore.onPopUpHide"
+        >
+          <img class="image-warning" src="/images/icon-warning.svg" />
+        </span>
       </div>
 
       <hr style="margin: 0.25em 0" />
@@ -125,6 +137,7 @@ import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
+import { usePopupStore } from '../../store/popupStore';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin],
@@ -144,7 +157,8 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      popupStore: usePopupStore()
     };
   }
 });
diff --git a/src/locales/en.json b/src/locales/en.json
index 6c62edf..661cd60 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -48,6 +48,10 @@
     "confirm-button": "UPDATE NOW",
     "later-button": "LATER"
   },
+  "vehicle-preview": {
+    "loading": "Loading preview...",
+    "error": "Oops! The vehicle preview seems to be missing! :/"
+  },
   "data-status": {
     "S1-offline": "<b>S1 signal</b> <br> The app is working in offline mode!",
     "S1a-connection": "<b>S1a signal</b> <br> Cannot connect with Stacjownik API service!",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index be0b2c6..5b7b3c7 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -38,6 +38,10 @@
   "footer": {
     "discord": "Serwer Discord Stacjownika"
   },
+  "vehicle-preview": {
+    "loading": "Ładowanie podglądu...",
+    "error": "Ups! Nie znaleziono podglądu pojazdu! :/"
+  },
   "data-status": {
     "S1-offline": "<b>Sygnał S1</b> <br> Aplikacja działa w trybie offline!",
     "S1a-connection": "<b>Sygnał S1a</b> <br> Błąd podczas próby połączenia się z API Stacjownika!",
diff --git a/src/store/popupStore.ts b/src/store/popupStore.ts
new file mode 100644
index 0000000..b58b826
--- /dev/null
+++ b/src/store/popupStore.ts
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+
+export const usePopupStore = defineStore('popupStore', {
+  state: () => ({
+    popupPosition: { x: 0, y: 0 },
+    currentPopupComponent: null as
+      | null
+      | 'DonatorPopUp'
+      | 'TrainCommentsPopUp'
+      | 'VehiclePreviewPopUp',
+    currentPopupContent: '',
+    donatorPopupVisible: false
+  }),
+
+  actions: {
+    onPopUpShow(e: MouseEvent, componentKey: typeof this.currentPopupComponent, value?: string) {
+      this.popupPosition.x = e.pageX;
+      this.popupPosition.y = e.pageY;
+
+      this.currentPopupComponent = componentKey;
+      this.currentPopupContent = value ?? '';
+    },
+
+    onPopUpMove(e: MouseEvent) {
+      this.popupPosition.x = e.pageX;
+      this.popupPosition.y = e.pageY;
+    },
+
+    onPopUpHide() {
+      this.currentPopupComponent = null;
+      this.currentPopupContent = '';
+    }
+  }
+});
diff --git a/src/store/typings.ts b/src/store/typings.ts
index e1aeb73..d9ed6d1 100644
--- a/src/store/typings.ts
+++ b/src/store/typings.ts
@@ -11,20 +11,14 @@ export interface RegionCounters {
 
 export interface StoreState {
   region: { id: string; value: string };
-
   isOffline: boolean;
-
   isNewUpdate: boolean;
-
   dispatcherStatsName: string;
   dispatcherStatsData?: API.DispatcherStats.Response;
-
   driverStatsName: string;
   driverStatsData?: API.DriverStats.Response;
   driverStatsStatus: Status.Data;
-
   chosenModalTrainId?: string;
-
   blockScroll: boolean;
   modalLastClickedTarget: EventTarget | null;
 }

From 66a02d76bd2f0753aef3f53fbe79c09151f166fc Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Mar 2024 00:00:52 +0100
Subject: [PATCH 2/6] =?UTF-8?q?dodano=20odno=C5=9Bnik=20do=20dziennika=20R?=
 =?UTF-8?q?J=20maszynisty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopUp/VehiclePreviewPopUp.vue |  1 +
 src/components/TrainsView/TrainInfo.vue      | 13 +++++++++++--
 src/components/TrainsView/TrainModal.vue     |  2 +-
 src/components/TrainsView/TrainTable.vue     |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/PopUp/VehiclePreviewPopUp.vue b/src/components/PopUp/VehiclePreviewPopUp.vue
index 4ceda97..323fcd9 100644
--- a/src/components/PopUp/VehiclePreviewPopUp.vue
+++ b/src/components/PopUp/VehiclePreviewPopUp.vue
@@ -10,6 +10,7 @@
       v-if="popupStore.currentPopupContent"
       @load="onImageLoad"
       @error="onImageError"
+      @click="popupStore.onPopUpHide"
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 7841fdf..87fc1c2 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -46,6 +46,11 @@
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
           <span v-else>{{ train.driverName }}</span>
+          &bull;
+          <button class="btn--image btn--text btn-journal" v-if="extended">
+            <img src="/images/icon-train.svg" alt="" />
+            DZIENNIK
+          </button>
         </div>
       </div>
 
@@ -149,8 +154,7 @@ export default defineComponent({
       required: true
     },
     extended: {
-      type: Boolean,
-      default: true
+      type: Boolean
     }
   },
 
@@ -201,6 +205,11 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
+.btn-journal {
+  display: inline-block;
+  padding: 0;
+}
+
 .timetable-id {
   color: #d2d2d2;
 }
diff --git a/src/components/TrainsView/TrainModal.vue b/src/components/TrainsView/TrainModal.vue
index 89ced97..59b006b 100644
--- a/src/components/TrainsView/TrainModal.vue
+++ b/src/components/TrainsView/TrainModal.vue
@@ -6,7 +6,7 @@
         <img src="/images/icon-exit.svg" alt="close card" />
       </button>
 
-      <TrainInfo :train="chosenTrain" :extended="false" ref="trainInfo" />
+      <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
   </div>
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 3db7e5f..2e7e280 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -20,7 +20,7 @@
           @click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
           @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
         >
-          <TrainInfo :train="train" />
+          <TrainInfo :train="train" :extended="false" />
         </li>
       </transition-group>
     </div>

From 6b6b837ddeadb0fc328565aa91db74a0927e49e2 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Mar 2024 00:01:15 +0100
Subject: [PATCH 3/6] bump: v1.23.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4a5c839..670190a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.22.3",
+  "version": "1.23.0",
   "private": true,
   "scripts": {
     "dev": "vite",

From 1ec75bda70ee1a53bd8fb8f4228692744e8861c5 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Mar 2024 16:47:57 +0100
Subject: [PATCH 4/6] =?UTF-8?q?poprawki=20do=20popup=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   | 24 +++++++++
 src/components/Global/StockList.vue           | 26 ++++-----
 .../JournalTimetables/TimetableGeneral.vue    | 23 +++++---
 src/components/StationsView/StationTable.vue  | 12 ++---
 src/components/TrainsView/TrainInfo.vue       | 54 +++++++++++--------
 src/mixins/modalTrainMixin.ts                 |  5 +-
 src/store/popupStore.ts                       | 15 +++---
 src/styles/animations.scss                    |  3 +-
 src/styles/global.scss                        |  2 +-
 9 files changed, 104 insertions(+), 60 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 69d85ca..2b80633 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,6 +48,7 @@ import StorageManager from './managers/storageManager';
 import PopUp from './components/PopUp/PopUp.vue';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
+import { usePopupStore } from './store/popupStore';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -64,6 +65,7 @@ export default defineComponent({
     VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
+    popupStore: usePopupStore(),
 
     currentLang: 'pl',
     releaseURL: '',
@@ -81,6 +83,28 @@ export default defineComponent({
       this.apiStore.fetchActiveData();
     });
 
+    // popup handling
+    window.addEventListener('mousemove', (e: MouseEvent) => {
+      e.stopPropagation();
+
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
+
+        return;
+      }
+
+      const popupComponentKey = targetEl.getAttribute('data-popup-key');
+      const popupContent = targetEl.getAttribute('data-popup-content');
+
+      if (popupComponentKey && popupContent)
+        this.popupStore.onPopUpShow(e, popupComponentKey, popupContent);
+      else if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
+    });
+
     watch(
       () => this.store.blockScroll,
       (value) => {
diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index 6fc56f1..7c50a7b 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -24,14 +24,11 @@
           {{ stockName.split(':')[1] }}
         </p>
 
-        <span
-          @mouseenter="
-            popupStore.onPopUpShow($event, 'VehiclePreviewPopUp', stockName.split(':')[0])
-          "
-          @mousemove="popupStore.onPopUpMove"
-          @mouseleave="popupStore.onPopUpHide"
-        >
+        <span>
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
               /^EN/.test(stockName) ? 'rb' : ''
             }.png`"
@@ -42,6 +39,9 @@
 
           <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
           <img
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -50,7 +50,9 @@
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^EN71/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -59,7 +61,9 @@
           />
 
           <img
-            class="train-thumbnail"
+            :data-mouseover="stockName"
+            data-popup-key="VehiclePreviewPopUp"
+            :data-popup-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
             @error="
@@ -76,7 +80,6 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
-import { usePopupStore } from '../../store/popupStore';
 
 export default defineComponent({
   props: {
@@ -92,8 +95,7 @@ export default defineComponent({
 
   data() {
     return {
-      apiStore: useApiStore(),
-      popupStore: usePopupStore()
+      apiStore: useApiStore()
     };
   },
 
diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index b469d2c..885fd2a 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="item-general">
-    <span
-      class="general-train"
-      tabindex="0"
-      @click.stop="showTimetable(timetable, $event.currentTarget)"
-      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
-    >
+    <span class="general-train">
       <span class="text--grayed">#{{ timetable.id }}</span>
 
       <span class="badges" v-if="timetable.skr || timetable.twr">
@@ -39,6 +34,17 @@
       <strong v-else>
         {{ timetable.driverName }}
       </strong>
+
+      <span v-if="timetable.terminated == false">
+        &bull;
+        <button
+          class="btn--image btn-timetable"
+          @click.stop="showTimetable(timetable, $event.currentTarget)"
+        >
+          <img src="/images/icon-train.svg" alt="" />
+          RJ ONLINE
+        </button>
+      </span>
     </span>
 
     <span class="general-time">
@@ -148,6 +154,11 @@ export default defineComponent({
   gap: 0.25em;
 }
 
+.btn-timetable {
+  display: inline-block;
+  padding: 0;
+}
+
 @include smallScreen {
   .item-general {
     justify-content: center;
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index 833a95a..58fd8bb 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -120,15 +120,8 @@
                   <b
                     v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                     @click.stop="openDonationModal"
-                    @mouseenter="
-                      popupStore.onPopUpShow(
-                        $event,
-                        'DonatorPopUp',
-                        $t('donations.dispatcher-message')
-                      )
-                    "
-                    @mousemove="popupStore.onPopUpMove"
-                    @mouseleave="popupStore.onPopUpHide"
+                    data-popup-key="DonatorPopUp"
+                    :data-popup-content="$t('donations.dispatcher-message')"
                   >
                     <img src="/images/icon-diamond.svg" alt="" />
                     {{ station.onlineInfo.dispatcherName }}
@@ -380,6 +373,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
+      this.popupStore.currentPopupComponent = null;
     },
 
     openForumSite(e: Event, url: string | undefined) {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 87fc1c2..3a4bb3f 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -36,21 +36,22 @@
         <div class="train-driver">
           <b
             v-if="apiStore.donatorsData.includes(train.driverName)"
-            @mouseenter="
-              popupStore.onPopUpShow($event, 'DonatorPopUp', $t('donations.driver-message'))
-            "
-            @mousemove="popupStore.onPopUpMove"
-            @mouseleave="popupStore.onPopUpHide"
+            data-popup-key="DonatorPopUp"
+            :data-popup-content="$t('donations.driver-message')"
           >
             {{ train.driverName }}
             <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
           </b>
+
           <span v-else>{{ train.driverName }}</span>
-          &bull;
-          <button class="btn--image btn--text btn-journal" v-if="extended">
-            <img src="/images/icon-train.svg" alt="" />
-            DZIENNIK
-          </button>
+
+          <span v-if="extended">
+            &bull;
+            <button class="btn--image btn--text btn-timetable" @click="navigateToJournal">
+              <img src="/images/icon-train.svg" alt="" />
+              DZIENNIK
+            </button>
+          </span>
         </div>
       </div>
 
@@ -58,17 +59,10 @@
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
         <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          @mouseenter="
-            popupStore.onPopUpShow(
-              $event,
-              'TrainCommentsPopUp',
-              `${$t('trains.timetable-comments')} (${getSceneriesWithComments(
-                train.timetableData
-              )})`
-            )
-          "
-          @mousemove="popupStore.onPopUpMove"
-          @mouseleave="popupStore.onPopUpHide"
+          data-popup-key="TrainCommentsPopUp"
+          :data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+            train.timetableData
+          )})`"
         >
           <img class="image-warning" src="/images/icon-warning.svg" />
         </span>
@@ -143,9 +137,10 @@ import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
 import { usePopupStore } from '../../store/popupStore';
+import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
-  mixins: [trainInfoMixin, styleMixin],
+  mixins: [trainInfoMixin, styleMixin, modalTrainMixin],
   components: { ProgressBar, StockList },
 
   props: {
@@ -164,6 +159,19 @@ export default defineComponent({
       apiStore: useApiStore(),
       popupStore: usePopupStore()
     };
+  },
+
+  methods: {
+    navigateToJournal() {
+      this.$router.push({
+        path: '/journal/timetables',
+        query: {
+          'search-driver': this.train.driverName
+        }
+      });
+
+      this.closeModal();
+    }
   }
 });
 </script>
@@ -205,7 +213,7 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
-.btn-journal {
+.btn-timetable {
   display: inline-block;
   padding: 0;
 }
diff --git a/src/mixins/modalTrainMixin.ts b/src/mixins/modalTrainMixin.ts
index fe6ade1..8e704d4 100644
--- a/src/mixins/modalTrainMixin.ts
+++ b/src/mixins/modalTrainMixin.ts
@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
+import { usePopupStore } from '../store/popupStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      store: useMainStore(),
+      popupStore: usePopupStore()
     };
   },
 
@@ -23,6 +25,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
+      this.popupStore.currentPopupComponent = null;
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();
diff --git a/src/store/popupStore.ts b/src/store/popupStore.ts
index b58b826..5af0ae9 100644
--- a/src/store/popupStore.ts
+++ b/src/store/popupStore.ts
@@ -1,19 +1,22 @@
 import { defineStore } from 'pinia';
 
+export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
+export type PopUp = (typeof popupKeys)[number];
+
+const isPopUp = (v: any): v is PopUp => popupKeys.includes(v);
+
 export const usePopupStore = defineStore('popupStore', {
   state: () => ({
     popupPosition: { x: 0, y: 0 },
-    currentPopupComponent: null as
-      | null
-      | 'DonatorPopUp'
-      | 'TrainCommentsPopUp'
-      | 'VehiclePreviewPopUp',
+    currentPopupComponent: null as PopUp | null,
     currentPopupContent: '',
     donatorPopupVisible: false
   }),
 
   actions: {
-    onPopUpShow(e: MouseEvent, componentKey: typeof this.currentPopupComponent, value?: string) {
+    onPopUpShow(e: MouseEvent, componentKey: string, value?: string) {
+      if (!isPopUp(componentKey)) return;
+
       this.popupPosition.x = e.pageX;
       this.popupPosition.y = e.pageY;
 
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 0cc702e..d489d17 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,4 +1,4 @@
-$animDuration: 150ms;
+$animDuration: 95ms;
 $animType: ease-in-out;
 
 // List animation
@@ -72,7 +72,6 @@ $animType: ease-in-out;
 
   &-enter-from,
   &-leave-to {
-    transform: translateY(-25%);
     opacity: 0;
   }
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 405a62b..b6b873c 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -234,7 +234,7 @@ a.a-button {
     padding: 0.35em 0.75em;
 
     img {
-      width: 1.5em;
+      width: 1.35em;
       vertical-align: middle;
     }
   }

From fb2348e77484d06198f171f703a78d56a9c25174 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 23 Mar 2024 23:55:18 +0100
Subject: [PATCH 5/6] hotfixy designu

---
 .../JournalTimetables/TimetableGeneral.vue    | 25 +++++++++++--------
 .../TimetableHistoryList.vue                  |  2 +-
 src/components/PopUp/PopUp.vue                |  3 ++-
 src/components/TrainsView/TrainInfo.vue       | 22 ++++++++--------
 src/components/TrainsView/TrainTable.vue      |  6 ++---
 src/locales/en.json                           |  5 +++-
 src/locales/pl.json                           |  5 +++-
 7 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
index 885fd2a..00fa55a 100644
--- a/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableGeneral.vue
@@ -35,16 +35,14 @@
         {{ timetable.driverName }}
       </strong>
 
-      <span v-if="timetable.terminated == false">
-        &bull;
-        <button
-          class="btn--image btn-timetable"
-          @click.stop="showTimetable(timetable, $event.currentTarget)"
-        >
-          <img src="/images/icon-train.svg" alt="" />
-          RJ ONLINE
-        </button>
-      </span>
+      <button
+        v-if="timetable.terminated == false"
+        class="btn--image btn--action btn-timetable"
+        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      >
+        <img src="/images/icon-train.svg" alt="" />
+        {{ $t('journal.timetable-online-button') }}
+      </button>
     </span>
 
     <span class="general-time">
@@ -156,7 +154,12 @@ export default defineComponent({
 
 .btn-timetable {
   display: inline-block;
-  padding: 0;
+  padding: 0.1em 0.4em;
+  margin-left: 0.5em;
+
+  img {
+    vertical-align: top;
+  }
 }
 
 @include smallScreen {
diff --git a/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue b/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
index 01de44a..2671486 100644
--- a/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableHistoryList.vue
@@ -5,7 +5,7 @@
         v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
         class="journal_item"
         :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
+        @click.stop.prevent="showExtraInfo.value = !showExtraInfo.value"
       >
         <div class="journal_item-info">
           <!-- General -->
diff --git a/src/components/PopUp/PopUp.vue b/src/components/PopUp/PopUp.vue
index 3023551..69beef7 100644
--- a/src/components/PopUp/PopUp.vue
+++ b/src/components/PopUp/PopUp.vue
@@ -34,7 +34,8 @@ export default defineComponent({
           const isOutside =
             val.y + previewEl.getBoundingClientRect().height > window.innerHeight + window.scrollY;
 
-          previewEl.style.transform = `translate(-50%, calc(${
+          // previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${isOutside ? '-100% - 1.5rem' : '1.5rem'}))`;
+          previewEl.style.transform = `translate(-${~~((val.x / window.innerWidth) * 100)}%, calc(${
             isOutside ? '-100% - 1.5rem' : '1.5rem'
           }))`;
         });
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 3a4bb3f..3bf240f 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -45,13 +45,14 @@
 
           <span v-else>{{ train.driverName }}</span>
 
-          <span v-if="extended">
-            &bull;
-            <button class="btn--image btn--text btn-timetable" @click="navigateToJournal">
-              <img src="/images/icon-train.svg" alt="" />
-              DZIENNIK
-            </button>
-          </span>
+          <button
+            class="btn--image btn--action btn-timetable"
+            @click="navigateToJournal"
+            v-if="extended"
+          >
+            <img src="/images/icon-train.svg" alt="" />
+            {{ $t('trains.journal-button') }}
+          </button>
         </div>
       </div>
 
@@ -182,8 +183,8 @@ export default defineComponent({
 
 .image-warning {
   height: 1em;
-
   margin-left: 0.5em;
+  vertical-align: middle;
 }
 
 .train-stats {
@@ -215,7 +216,8 @@ export default defineComponent({
 
 .btn-timetable {
   display: inline-block;
-  padding: 0;
+  padding: 0.25em;
+  margin-left: 0.5em;
 }
 
 .timetable-id {
@@ -293,8 +295,6 @@ export default defineComponent({
     grid-template-columns: 1fr;
     gap: 1em 0;
     text-align: center;
-
-    font-size: 1.15em;
   }
 
   .general-info,
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 2e7e280..c6ac691 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -1,13 +1,13 @@
 <template>
   <transition name="status-anim" mode="out-in" tag="div" class="train-table">
     <div :key="apiStore.dataStatuses.connection">
-      <div class="table-info" key="offline" v-if="store.isOffline">
+      <div class="table-warning" key="offline" v-if="store.isOffline">
         {{ $t('app.offline') }}
       </div>
 
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Loading" key="loading" />
 
-      <div class="table-info" key="no-trains" v-else-if="trains.length == 0">
+      <div class="table-warning" key="no-trains" v-else-if="trains.length == 0">
         {{ $t('trains.no-trains') }}
       </div>
 
@@ -105,7 +105,7 @@ export default defineComponent({
   overflow-x: hidden;
 }
 
-.table-info {
+.table-warning {
   text-align: center;
 
   padding: 1em 0;
diff --git a/src/locales/en.json b/src/locales/en.json
index 661cd60..9e71137 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -319,7 +319,9 @@
     "last-seen-ago": "since {minutes} minutes",
 
     "scenery-offline": "Offline ride",
-    "timeout": "An error occured while trying to refresh SWDR timetable data!"
+    "timeout": "An error occured while trying to refresh SWDR timetable data!",
+
+    "journal-button": "DRIVER'S JOURNAL"
   },
   "train-stats": {
     "stats-button": "STATISTICS",
@@ -355,6 +357,7 @@
     "timetable-active": "ACTIVE",
     "timetable-fulfilled": "FULFILLED",
     "timetable-abandoned": "ABANDONED",
+    "timetable-online-button": "ONLINE TIMETABLE",
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 5b7b3c7..f0e0aff 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -299,7 +299,9 @@
 
     "scenery-offline": "Przejazd offline",
 
-    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR"
+    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
+
+    "journal-button": "DZIENNIK MASZYNISTY"
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",
@@ -341,6 +343,7 @@
     "timetable-active": "AKTYWNY",
     "timetable-fulfilled": "WYPEŁNIONY",
     "timetable-abandoned": "PORZUCONY",
+    "timetable-online-button": "RJ ONLINE",
 
     "stock-info": "DODATKOWE INFORMACJE",
     "stock-length": "Długość",

From 31e65c09d61d0a6a65b6bed191a21fc8710b5491 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 24 Mar 2024 00:05:39 +0100
Subject: [PATCH 6/6] =?UTF-8?q?hotfix:=20podgl=C4=85d=20pojazd=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Global/StockList.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index 7c50a7b..7535f35 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -33,6 +33,7 @@
               /^EN/.test(stockName) ? 'rb' : ''
             }.png`"
             @error="onImageError($event, stockName)"
+            @click.stop="() => {}"
             width="400"
             height="60"
           />
@@ -47,6 +48,7 @@
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
+            @click.stop="() => {}"
           />
 
           <img
@@ -58,6 +60,7 @@
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
             "
+            @click.stop="() => {}"
           />
 
           <img
@@ -69,6 +72,7 @@
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
             "
+            @click.stop="() => {}"
           />
           <!-- ///  -->
         </span>