popupy

src/components/PopUp/DonatorPopUp.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="popup-content">
     <img src="/images/icon-diamond.svg" alt="" />
-    <span>{{ popupStore.currentPopupContent }}</span>
+    <span>{{ store.popUpData.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   }
 });

src/components/PopUp/PopUp.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="popup" v-show="popupStore.currentPopupComponent" ref="preview">
-    <component v-if="popupStore.currentPopupComponent" :is="popupStore.currentPopupComponent" />
+  <div class="popup" v-show="store.popUpData.key" ref="preview">
+    <component v-if="store.popUpData.key" :is="store.popUpData.key" />
   </div>
 </template>
 
@@ -9,47 +9,48 @@ import { defineComponent } from 'vue';
 import DonatorPopUp from './DonatorPopUp.vue';
 import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
 import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
 
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   },
 
   watch: {
-    'popupStore.popupPosition': {
+    'store.mousePos': {
       deep: true,
-      handler(val: typeof this.popupStore.popupPosition) {
-        const previewEl = this.$refs['preview'] as HTMLElement;
-        const clientWidth = document.body.clientWidth;
-        const boxWidth = previewEl.getBoundingClientRect().width;
-
-        let translateX = '0px',
-          translateY = '30px';
-
-        if (clientWidth < 500) {
-          previewEl.style.left = '50%';
-          translateX = '-50%';
-        } else if (val.x <= boxWidth / 2) {
-          previewEl.style.left = '0';
-          translateX = '0px';
-        } else if (val.x >= clientWidth - boxWidth / 2) {
-          previewEl.style.left = '100%';
-          translateX = '-100%';
-        } else {
-          previewEl.style.left = `${val.x}px`;
-          translateX = '-50%';
-        }
-
-        previewEl.style.top = `${val.y}px`;
-
+      handler(val: typeof this.store.mousePos) {
         this.$nextTick(() => {
+          const previewEl = this.$refs['preview'] as HTMLElement;
+          const clientWidth = document.body.clientWidth;
+          const boxWidth = previewEl.getBoundingClientRect().width;
+
+          let translateX = '0px',
+            translateY = '30px';
+
+          if (clientWidth < 500) {
+            previewEl.style.left = '50%';
+            translateX = '-50%';
+          } else if (val.x <= boxWidth / 2) {
+            previewEl.style.left = '0';
+            translateX = '0px';
+          } else if (val.x >= clientWidth - boxWidth / 2) {
+            previewEl.style.left = '100%';
+            translateX = '-100%';
+          } else {
+            previewEl.style.left = `${val.x}px`;
+            translateX = '-50%';
+          }
+
+          previewEl.style.top = `${val.y}px`;
+
           const isOutside =
-            val.y + previewEl.getBoundingClientRect().height >= window.innerHeight + window.scrollY;
+            val.y + previewEl.getBoundingClientRect().height + 30 >=
+            window.innerHeight + window.scrollY;
 
           if (isOutside) translateY = 'calc(-100% - 30px)';
           previewEl.style.transform = `translate(${translateX}, ${translateY})`;

src/components/PopUp/TrainCommentsPopUp.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="popup-content">
-    <span>{{ popupStore.currentPopupContent }}</span>
+    <span>{{ store.popUpData.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   }
 });

src/components/PopUp/VehiclePreviewPopUp.vue

@@ -7,29 +7,29 @@
     <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
 
     <img
-      v-if="popupStore.currentPopupContent"
+      v-if="store.popUpData.key"
       @load="onImageLoad"
       @error="onImageError"
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${popupStore.currentPopupContent}--300px.jpg`"
+      :src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
     />
 
     <div class="vehicle-name" v-if="imageState != 'error'">
-      {{ popupStore.currentPopupContent.replace(/_/g, ' ') }}
+      {{ store.popUpData.content.replace(/_/g, ' ') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore(),
+      store: useMainStore(),
       imageState: 'loading'
     };
   },

src/components/StationsView/StationTable.vue

@@ -312,7 +312,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';
+import popupMixin from '../../mixins/popupMixin';
 
 export default defineComponent({
   props: {
@@ -324,7 +324,7 @@ export default defineComponent({
 
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin],
+  mixins: [styleMixin, dateMixin, stationInfoMixin, popupMixin],
 
   data: () => ({
     headIconsIds,
@@ -341,7 +341,6 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
-    const popupStore = usePopupStore();
 
     const stationFiltersStore = useStationFiltersStore();
 
@@ -349,8 +348,7 @@ export default defineComponent({
       Status: Status.Data,
       stationFiltersStore,
       mainStore,
-      apiStore,
-      popupStore
+      apiStore
     };
   },
 
@@ -373,7 +371,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
-      this.popupStore.currentPopupComponent = null;
+      this.hidePopUp();
     },
 
     openForumSite(e: Event, url: string | undefined) {

src/components/TrainsView/TrainInfo.vue

@@ -163,7 +163,6 @@ 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';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
@@ -183,8 +182,7 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore(),
-      popupStore: usePopupStore()
+      apiStore: useApiStore()
     };
   },