poprawki do popupów

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()
     };
   },
 

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;

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) {

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;
 }