Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: popups -> tooltips

Browse Source
This commit is contained in:
Spythere
2024-05-06 16:37:56 +02:00
parent 405aab96bd
commit d366a877a4
25 changed files with 186 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Global/StockList.vue
+12 -12
View File
@@ -27,8 +27,8 @@
<span>
<img
:data-mouseover="stockName"
data-popup-key="VehiclePreviewPopUp"
:data-popup-content="stockName.split(':')[0]"
data-tooltip-type="VehiclePreviewTooltip"
:data-tooltip-content="stockName.split(':')[0]"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
/^EN/.test(stockName) ? 'rb' : ''
}.png`"
@@ -41,8 +41,8 @@
<!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
<img
:data-mouseover="stockName"
data-popup-key="VehiclePreviewPopUp"
:data-popup-content="stockName.split(':')[0]"
data-tooltip-type="VehiclePreviewTooltip"
:data-tooltip-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="
@@ -53,8 +53,8 @@
<img
:data-mouseover="stockName"
data-popup-key="VehiclePreviewPopUp"
:data-popup-content="stockName.split(':')[0]"
data-tooltip-type="VehiclePreviewTooltip"
:data-tooltip-content="stockName.split(':')[0]"
v-if="/^EN71/.test(stockName)"
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
@error="
@@ -65,8 +65,8 @@
<img
:data-mouseover="stockName"
data-popup-key="VehiclePreviewPopUp"
:data-popup-content="stockName.split(':')[0]"
data-tooltip-type="VehiclePreviewTooltip"
:data-tooltip-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="
@@ -120,10 +120,10 @@ export default defineComponent({
fallbackName += /^\d?EN\d{2}/.test(stockName)
? 'ezt'
: /^SN\d{2}/.test(stockName)
? 'szt'
: /^\d?E/.test(stockName)
? 'e'
: 's';
? 'szt'
: /^\d?E/.test(stockName)
? 'e'
: 's';
} else {
const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+4 -3
View File
@@ -43,7 +43,7 @@
:to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
>
<b
v-if="isDonator(historyItem.dispatcherName)"
v-if="apiStore.donatorsData.includes(historyItem.dispatcherName)"
class="text--donator"
:title="$t('donations.dispatcher-message')"
>
@@ -128,13 +128,13 @@ import { Status } from '../../../typings/common';
import Loading from '../../Global/Loading.vue';
import AddDataButton from '../../Global/AddDataButton.vue';
import dateMixin from '../../../mixins/dateMixin';
import donatorMixin from '../../../mixins/donatorMixin';
import styleMixin from '../../../mixins/styleMixin';
import { useApiStore } from '../../../store/apiStore';
export default defineComponent({
components: { Loading, AddDataButton },
mixins: [dateMixin, styleMixin, donatorMixin],
mixins: [dateMixin, styleMixin],
props: {
dispatcherHistory: {
@@ -159,6 +159,7 @@ export default defineComponent({
return {
Status,
store: useMainStore(),
apiStore: useApiStore(),
regions
};
},
src/components/JournalView/JournalTimetables/TimetableGeneral.vue
+11 -5
View File
@@ -24,7 +24,7 @@
</strong>
<strong
v-if="isDonator(timetable.driverName)"
v-if="apiStore.donatorsData.includes(timetable.driverName)"
class="text--donator"
:title="$t('donations.driver-message')"
>
@@ -57,8 +57,8 @@
!timetable.terminated
? $t('journal.timetable-active')
: timetable.fulfilled
? $t('journal.timetable-fulfilled')
: `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
? $t('journal.timetable-fulfilled')
: `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
}}
</b>
@@ -81,10 +81,16 @@ import { API } from '../../../typings/api';
import dateMixin from '../../../mixins/dateMixin';
import modalTrainMixin from '../../../mixins/modalTrainMixin';
import styleMixin from '../../../mixins/styleMixin';
import donatorMixin from '../../../mixins/donatorMixin';
import { useApiStore } from '../../../store/apiStore';
export default defineComponent({
mixins: [dateMixin, modalTrainMixin, styleMixin, donatorMixin],
mixins: [dateMixin, modalTrainMixin, styleMixin],
data() {
return {
apiStore: useApiStore()
};
},
props: {
timetable: {
src/components/SceneryView/SceneryDispatchersHistory.vue
+1 -2
View File
@@ -74,14 +74,13 @@ import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin';
import Loading from '../Global/Loading.vue';
import styleMixin from '../../mixins/styleMixin';
import listObserverMixin from '../../mixins/listObserverMixin';
import { API } from '../../typings/api';
import { ActiveScenery, Station, Status } from '../../typings/common';
import { useApiStore } from '../../store/apiStore';
export default defineComponent({
name: 'SceneryDispatchersHistory',
mixins: [dateMixin, styleMixin, listObserverMixin],
mixins: [dateMixin, styleMixin],
components: { Loading },
props: {
station: {
src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue
+10 -3
View File
@@ -14,7 +14,7 @@
>
<span
class="text--donator"
v-if="isDonator(onlineScenery.dispatcherName)"
v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
:title="$t('donations.dispatcher-message')"
>
{{ onlineScenery.dispatcherName }}
@@ -49,11 +49,18 @@ import dateMixin from '../../../mixins/dateMixin';
import routerMixin from '../../../mixins/routerMixin';
import styleMixin from '../../../mixins/styleMixin';
import StationStatusBadge from '../../Global/StationStatusBadge.vue';
import donatorMixin from '../../../mixins/donatorMixin';
import { ActiveScenery } from '../../../typings/common';
import { useApiStore } from '../../../store/apiStore';
export default defineComponent({
mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
mixins: [styleMixin, dateMixin, routerMixin],
data() {
return {
apiStore: useApiStore()
};
},
props: {
onlineScenery: {
type: Object as PropType<ActiveScenery>,
src/components/SceneryView/SceneryTimetablesHistory.vue
+1 -2
View File
@@ -72,14 +72,13 @@ import { defineComponent, PropType } from 'vue';
import dateMixin from '../../mixins/dateMixin';
import Loading from '../Global/Loading.vue';
import listObserverMixin from '../../mixins/listObserverMixin';
import { API } from '../../typings/api';
import { ActiveScenery, Station, Status } from '../../typings/common';
import { useApiStore } from '../../store/apiStore';
export default defineComponent({
name: 'SceneryTimetablesHistory',
mixins: [dateMixin, listObserverMixin],
mixins: [dateMixin],
props: {
station: {
type: Object as PropType<Station>
src/components/StationsView/StationTable.vue
+14 -7
View File
@@ -123,8 +123,8 @@
<b
v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
@click.stop="openDonationModal"
data-popup-key="DonatorPopUp"
:data-popup-content="$t('donations.dispatcher-message')"
data-tooltip-type="DonatorTooltip"
:data-tooltip-content="$t('donations.dispatcher-message')"
>
<img src="/images/icon-diamond.svg" alt="" />
{{ station.onlineInfo.dispatcherName }}
@@ -257,7 +257,12 @@
<span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
</td>
<td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
<td
class="station-spawns"
:class="{ inactive: !station.onlineInfo }"
data-tooltip-type="TestTooltip"
data-tooltip-content="test123"
>
<span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
</td>
@@ -307,12 +312,12 @@ import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationH
import StationStatusBadge from '../Global/StationStatusBadge.vue';
import { Station, Status } from '../../typings/common';
import { useApiStore } from '../../store/apiStore';
import popupMixin from '../../mixins/popupMixin';
import { useTooltipStore } from '../../store/tooltipStore';
export default defineComponent({
emits: ['toggleDonationModal'],
components: { Loading, StationStatusBadge },
mixins: [styleMixin, dateMixin, popupMixin],
mixins: [styleMixin, dateMixin],
data: () => ({
headIconsIds,
@@ -333,6 +338,7 @@ export default defineComponent({
setup() {
const mainStore = useMainStore();
const apiStore = useApiStore();
const tooltipStore = useTooltipStore();
const stationFiltersStore = useStationFiltersStore();
@@ -340,7 +346,8 @@ export default defineComponent({
Status: Status.Data,
stationFiltersStore,
mainStore,
apiStore
apiStore,
tooltipStore
};
},
@@ -364,7 +371,7 @@ export default defineComponent({
openDonationModal(e: Event) {
this.$emit('toggleDonationModal', true);
this.mainStore.modalLastClickedTarget = e.target;
this.hidePopUp();
this.tooltipStore.hide();
},
openForumSite(e: Event, url: string | undefined) {
src/components/PopUp/TrainCommentsPopUp.vue → src/components/Tooltip/BaseTooltip.vue
+5 -5
View File
@@ -1,24 +1,24 @@
<template>
<div class="popup-content">
<span>{{ store.popUpData.content }}</span>
<div class="tooltip-content">
<span>{{ tooltipStore.content }}</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useMainStore } from '../../store/mainStore';
import { useTooltipStore } from '../../store/tooltipStore';
export default defineComponent({
data() {
return {
store: useMainStore()
tooltipStore: useTooltipStore()
};
}
});
</script>
<style lang="scss" scoped>
.popup-content {
.tooltip-content {
display: flex;
justify-content: center;
align-items: center;
src/components/PopUp/DonatorPopUp.vue → src/components/Tooltip/DonatorTooltip.vue
+5 -5
View File
@@ -1,25 +1,25 @@
<template>
<div class="popup-content">
<div class="tooltip-content">
<img src="/images/icon-diamond.svg" alt="" />
<span>{{ store.popUpData.content }}</span>
<span>{{ tooltipStore.content }}</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useMainStore } from '../../store/mainStore';
import { useTooltipStore } from '../../store/tooltipStore';
export default defineComponent({
data() {
return {
store: useMainStore()
tooltipStore: useTooltipStore()
};
}
});
</script>
<style lang="scss" scoped>
.popup-content {
.tooltip-content {
gap: 0.5em;
padding: 0.5em;
src/components/PopUp/PopUp.vue → src/components/Tooltip/Tooltip.vue
+17 -16
View File
@@ -1,29 +1,30 @@
<template>
<div class="popup" v-show="store.popUpData.key" ref="preview">
<component v-if="store.popUpData.key" :is="store.popUpData.key" />
<div class="tooltip" v-show="tooltipStore.type" ref="preview">
<component v-if="tooltipStore.type" :is="tooltipStore.type" />
</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 { useMainStore } from '../../store/mainStore';
import { useTooltipStore } from '../../store/tooltipStore';
import DonatorTooltip from './DonatorTooltip.vue';
import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
import BaseTooltip from './BaseTooltip.vue';
export default defineComponent({
components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip },
data() {
return {
store: useMainStore()
tooltipStore: useTooltipStore()
};
},
watch: {
'store.mousePos': {
'tooltipStore.mousePos': {
deep: true,
handler(val: typeof this.store.mousePos) {
// [x, y]
handler(val: [number, number]) {
this.$nextTick(() => {
const previewEl = this.$refs['preview'] as HTMLElement;
const clientWidth = document.body.clientWidth;
@@ -35,21 +36,21 @@ export default defineComponent({
if (clientWidth < 500) {
previewEl.style.left = '50%';
translateX = '-50%';
} else if (val.x <= boxWidth / 2) {
} else if (val[0] <= boxWidth / 2) {
previewEl.style.left = '0';
translateX = '0px';
} else if (val.x >= clientWidth - boxWidth / 2) {
} else if (val[0] >= clientWidth - boxWidth / 2) {
previewEl.style.left = '100%';
translateX = '-100%';
} else {
previewEl.style.left = `${val.x}px`;
previewEl.style.left = `${val[0]}px`;
translateX = '-50%';
}
previewEl.style.top = `${val.y}px`;
previewEl.style.top = `${val[1]}px`;
const isOutside =
val.y + previewEl.getBoundingClientRect().height + 30 >=
val[1] + previewEl.getBoundingClientRect().height + 30 >=
window.innerHeight + window.scrollY;
if (isOutside) translateY = 'calc(-100% - 30px)';
@@ -62,7 +63,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.popup {
.tooltip {
position: absolute;
z-index: 250;
max-width: 400px;
src/components/PopUp/VehiclePreviewPopUp.vue → src/components/Tooltip/VehiclePreviewTooltip.vue
+7 -9
View File
@@ -1,5 +1,5 @@
<template>
<div class="popup-content">
<div class="tooltip-content">
<div v-if="imageState == 'loading'" class="loading-info">
{{ $t('vehicle-preview.loading') }}
</div>
@@ -7,29 +7,29 @@
<div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
<img
v-if="store.popUpData.key"
v-if="tooltipStore.type"
@load="onImageLoad"
@error="onImageError"
width="300"
height="176"
class="rounded-md w-full h-auto"
:src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
:src="`https://static.spythere.eu/images/${tooltipStore.content}--300px.jpg`"
/>
<div class="vehicle-name" v-if="imageState != 'error'">
{{ store.popUpData.content.replace(/_/g, ' ') }}
{{ tooltipStore.content.replace(/_/g, ' ') }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useMainStore } from '../../store/mainStore';
import { useTooltipStore } from '../../store/tooltipStore';
export default defineComponent({
data() {
return {
store: useMainStore(),
tooltipStore: useTooltipStore(),
imageState: 'loading'
};
},
@@ -53,9 +53,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.popup-content {
// min-w-[300px] min-h-[200px] p-2 bg-slate-800 rounded-md
.tooltip-content {
width: 300px;
min-height: 200px;
background-color: #333;
src/components/TrainsView/TrainInfo.vue
+4 -4
View File
@@ -45,8 +45,8 @@
<div class="train-driver">
<b
v-if="apiStore.donatorsData.includes(train.driverName)"
data-popup-key="DonatorPopUp"
:data-popup-content="$t('donations.driver-message')"
data-tooltip-type="DonatorTooltip"
:data-tooltip-content="$t('donations.driver-message')"
>
{{ train.driverName }}
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
@@ -74,8 +74,8 @@
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
<span
v-if="getSceneriesWithComments(train.timetableData).length > 0"
data-popup-key="TrainCommentsPopUp"
:data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
data-tooltip-type="BaseTooltip"
:data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
train.timetableData
)})`"
>