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] }}
-
+
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 @@
-
+
#{{ timetable.id }}
@@ -39,6 +34,17 @@
{{ timetable.driverName }}
+
+
+ •
+
+
@@ -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 @@
{{ 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 @@
{{ train.driverName }}
+
{{ train.driverName }}
- •
-
+
+
+ •
+
+
@@ -58,17 +59,10 @@
{{ train.timetableData.route.replace('|', ' - ') }}
@@ -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();
+ }
}
});
@@ -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;
}
}