Skip to content

Commit bdd5620

Browse files
schtibeschtibe
committed
Typescriptify src/views
1 parent f221029 commit bdd5620

File tree

5 files changed

+84
-54
lines changed

5 files changed

+84
-54
lines changed

‎packages/viewer/src/config/print.config.js‎ renamed to ‎packages/viewer/src/config/print.config.ts‎

File renamed without changes.

‎packages/viewer/src/views/EmbedView.vue‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<script setup lang="js">
1+
<script setup lang="ts">
22
import log from '@swissgeo/log'
33
import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
44
import { useI18n } from 'vue-i18n'
55
import { useRoute } from 'vue-router'
6-
import { useStore } from 'vuex'
76
87
import { sendChangeEventToParent } from '@/api/iframePostMessageEvent.api.js'
98
import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
@@ -14,38 +13,46 @@ import MapToolbox from '@/modules/map/components/toolbox/MapToolbox.vue'
1413
import MapModule from '@/modules/map/MapModule.vue'
1514
import BlackBackdrop from '@/utils/components/BlackBackdrop.vue'
1615
import OpenFullAppLink from '@/utils/components/OpenFullAppLink.vue'
16+
import useUIStore from '@/store/modules/ui.store'
17+
import useCesiumStore from '@/store/modules/cesium.store'
1718
18-
const dispatcher = { dispatcher: 'EmbedView.vue' }
19+
const dispatcher = { name: 'EmbedView.vue' }
1920
20-
const store = useStore()
2121
const route = useRoute()
2222
23-
const is3DActive = computed(() => store.state.cesium.active)
23+
const cesiumStore = useCesiumStore()
24+
const uiStore = useUIStore()
25+
26+
const is3DActive = computed(() => cesiumStore.active)
2427
2528
const { t } = useI18n()
2629
27-
const noSimpleZoomEmbed = computed(() => store.getters.hasNoSimpleZoomEmbedEnabled)
28-
const hideEmbedUI = computed(() => store.getters.hideEmbedUI)
30+
const noSimpleZoomEmbed = computed(() => uiStore.hasNoSimpleZoomEmbedEnabled)
31+
const hideEmbedUI = computed(() => uiStore.hideEmbedUI)
32+
2933
const showSimpleZoomHint = ref(false)
30-
let simpleZoomHintTimeout = null
3134
32-
function onWheel(event) {
35+
let simpleZoomHintTimeout: ReturnType<typeof setTimeout> | null = null
36+
37+
function onWheel(event: MouseEvent) {
3338
const isZoomModifierPressed = event.ctrlKey || event.metaKey //needed for macOS
3439
3540
if (noSimpleZoomEmbed.value && !isZoomModifierPressed) {
3641
event.preventDefault()
3742
event.stopImmediatePropagation()
3843
3944
showSimpleZoomHint.value = true
40-
clearTimeout(simpleZoomHintTimeout)
45+
if (simpleZoomHintTimeout) {
46+
clearTimeout(simpleZoomHintTimeout)
47+
}
4148
simpleZoomHintTimeout = setTimeout(() => {
4249
showSimpleZoomHint.value = false
4350
}, 3000)
4451
}
4552
}
4653
4754
onBeforeMount(() => {
48-
store.dispatch('setEmbed', { embed: true, ...dispatcher })
55+
uiStore.setEmbed(true, dispatcher)
4956
})
5057
5158
onMounted(() => {
@@ -78,7 +85,7 @@ watch(() => route.query, sendChangeEventToParent)
7885
<template v-if="showSimpleZoomHint">
7986
<BlackBackdrop />
8087
<div
81-
class="ctrl-scroll-hint position-absolute start-50 top-50 translate-middle bg-light border-dark mt-3 rounded border p-2 shadow"
88+
class="ctrl-scroll-hint position-absolute translate-middle bg-light border-dark start-50 top-50 mt-3 rounded border p-2 shadow"
8289
>
8390
{{ t('zooming_mode_warning') }}
8491
</div>

‎packages/viewer/src/views/LegacyParamsView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<script setup lang="js">
1+
<script setup lang="ts">
22
import { computed } from 'vue'
3-
import { useStore } from 'vuex'
43
54
import HeaderWithSearch from '@/modules/menu/components/header/HeaderWithSearch.vue'
65
import LoadingBar from '@/utils/components/LoadingBar.vue'
6+
import useUIStore from '@/store/modules/ui.store'
77
8-
const store = useStore()
8+
const uiStore = useUIStore()
99
1010
const { embed } = defineProps({
1111
embed: {
@@ -14,7 +14,7 @@ const { embed } = defineProps({
1414
},
1515
})
1616
17-
const showLoadingBar = computed(() => store.getters.showLoadingBar)
17+
const showLoadingBar = computed(() => uiStore.showLoadingBar)
1818
</script>
1919

2020
<template>

‎packages/viewer/src/views/MapView.vue‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<script setup lang="js">
1+
<script setup lang="ts">
22
import { computed, defineAsyncComponent } from 'vue'
3-
import { useStore } from 'vuex'
43
54
import { IS_TESTING_WITH_CYPRESS } from '@/config/staging.config.js'
65
import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
@@ -15,21 +14,25 @@ import MapToolbox from '@/modules/map/components/toolbox/MapToolbox.vue'
1514
import TimeSliderButton from '@/modules/map/components/toolbox/TimeSliderButton.vue'
1615
import MapModule from '@/modules/map/MapModule.vue'
1716
import MenuModule from '@/modules/menu/MenuModule.vue'
18-
import { UIModes } from '@/store/modules/ui.store'
17+
import useUIStore, { UIModes } from '@/store/modules/ui.store'
1918
import AppVersion from '@/utils/components/AppVersion.vue'
2019
import DragDropOverlay from '@/utils/components/DragDropOverlay.vue'
2120
import LoadingBar from '@/utils/components/LoadingBar.vue'
2221
import OfflineReadinessStatus from '@/utils/offline/OfflineReadinessStatus.vue'
22+
import useCesiumStore from '@/store/modules/cesium.store'
23+
import useDrawingStore from '@/store/modules/drawing.store'
2324
2425
const DrawingModule = defineAsyncComponent(() => import('@/modules/drawing/DrawingModule.vue'))
2526
26-
const store = useStore()
27+
const cesiumStore = useCesiumStore()
28+
const uiStore = useUIStore()
29+
const drawingStore = useDrawingStore()
2730
28-
const is3DActive = computed(() => store.state.cesium.active)
29-
const isDrawingMode = computed(() => store.state.drawing.drawingOverlay.show)
30-
const isPhoneMode = computed(() => store.state.ui.mode === UIModes.PHONE)
31-
const showLoadingBar = computed(() => store.getters.showLoadingBar)
32-
const showDragAndDropOverlay = computed(() => store.state.ui.showDragAndDropOverlay)
31+
const is3DActive = computed(() => cesiumStore.active)
32+
const isDrawingMode = computed(() => drawingStore.drawingOverlay.show)
33+
const isPhoneMode = computed(() => uiStore.mode === UIModes.PHONE)
34+
const showLoadingBar = computed(() => uiStore.showLoadingBar)
35+
const showDragAndDropOverlay = computed(() => uiStore.showDragAndDropOverlay)
3336
const loadDrawingModule = computed(() => {
3437
return isDrawingMode.value && !is3DActive.value
3538
})

‎packages/viewer/src/views/PrintView.vue‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,76 @@
1-
<script setup lang="js">
1+
<script setup lang="ts">
22
import log from '@swissgeo/log'
33
import { getPointResolution } from 'ol/proj'
4-
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
4+
import { computed, onBeforeUnmount, onMounted, ref, watch, type ComputedRef } from 'vue'
55
import { useI18n } from 'vue-i18n'
66
import { useRoute } from 'vue-router'
7-
import { useStore } from 'vuex'
87
98
import { getGenerateQRCodeUrl } from '@/api/qrcode.api'
109
import { createShortLink } from '@/api/shortlink.api'
10+
1111
import {
1212
PRINT_DEFAULT_DPI,
1313
PRINT_DIMENSIONS,
1414
PRINT_MARGIN_IN_MILLIMETERS,
1515
} from '@/config/print.config'
16+
1617
import InfoboxModule from '@/modules/infobox/InfoboxModule.vue'
1718
import MapFooter from '@/modules/map/components/footer/MapFooter.vue'
1819
import OpenLayersPrintResolutionEnforcer from '@/modules/map/components/openlayers/OpenLayersPrintResolutionEnforcer.vue'
1920
import OpenLayersScale from '@/modules/map/components/openlayers/OpenLayersScale.vue'
2021
import MapModule from '@/modules/map/MapModule.vue'
2122
import ConfederationFullLogo from '@/modules/menu/components/header/ConfederationFullLogo.vue'
2223
import { stringifyQuery } from '@/utils/url-router.js'
24+
import usePositionStore from '@/store/modules/position.store'
25+
import { useI18nStore } from '@/store/modules/i18n.store'
26+
import usePrintStore from '@/store/modules/print.store'
27+
import useMapStore from '@/store/modules/map.store'
2328
24-
const dispatcher = { dispatcher: 'PrintView.vue' }
29+
const dispatcher = { name: 'PrintView.vue' }
2530
2631
const route = useRoute()
27-
const store = useStore()
2832
const { t } = useI18n()
2933
34+
const printStore = usePrintStore()
35+
const positionStore = usePositionStore()
36+
const i18nStore = useI18nStore()
37+
const mapStore = useMapStore()
38+
3039
const inchToMillimeter = 25.4
3140
32-
const shortLink = ref(null)
33-
const qrCodeUrl = computed(() => getGenerateQRCodeUrl(shortLink.value))
41+
const shortLink = ref<string>()
42+
const qrCodeUrl = computed(() => shortLink.value && getGenerateQRCodeUrl(shortLink.value))
3443
3544
const now = new Date()
3645
37-
const printLayout = computed(() => store.state.print.config.layout ?? 'A4_L')
46+
const printLayout = computed(() => printStore.config.layout ?? 'A4_L')
47+
3848
const isLayerLandscape = computed(() => printLayout.value.endsWith('_L'))
39-
const printDPI = computed(() => store.state.print.config.dpi ?? PRINT_DEFAULT_DPI)
40-
const layoutIdentifier = computed(() => printLayout.value.replace('_L', '').replace('_P', ''))
41-
const layoutDimensions = computed(() => {
49+
const printDPI = computed(() => printStore.config.dpi ?? PRINT_DEFAULT_DPI)
50+
51+
const layoutIdentifier: ComputedRef<keyof typeof PRINT_DIMENSIONS> = computed(
52+
() => printLayout.value.replace('_L', '').replace('_P', '') as keyof typeof PRINT_DIMENSIONS
53+
)
54+
55+
const layoutDimensions: ComputedRef<typeof PRINT_DIMENSIONS.A0 | null> = computed(() => {
56+
if (!layoutIdentifier.value) {
57+
return null
58+
}
4259
const dimensions = PRINT_DIMENSIONS[layoutIdentifier.value]
60+
4361
if (!isLayerLandscape.value) {
4462
return dimensions.toReversed()
4563
}
4664
return dimensions
4765
})
48-
const mapResolution = computed(() => store.getters.resolution)
49-
const mapRotation = computed(() => store.state.position.rotation)
50-
const currentProjection = computed(() => store.state.position.projection)
51-
const mapCenter = computed(() => store.state.position.center)
52-
const currentLang = computed(() => store.state.i18n.lang)
66+
67+
const mapResolution = computed(() => positionStore.resolution)
68+
const mapRotation = computed(() => positionStore.rotation)
69+
const currentProjection = computed(() => positionStore.projection)
70+
const mapCenter = computed(() => positionStore.center)
71+
const currentLang = computed(() => i18nStore.lang)
5372
const printContainerSize = computed(() => {
54-
if (!layoutDimensions.value) {
73+
if (!layoutDimensions.value || layoutDimensions.value.length == 0) {
5574
return null
5675
}
5776
return {
@@ -71,14 +90,14 @@ const printContainerStyle = computed(() => {
7190
})
7291
const mapScaleWidth = computed(() => {
7392
if (!printContainerSize.value) {
74-
return null
93+
return undefined
7594
}
7695
// max 10% of screen width or 200px
7796
return Math.min(printContainerSize.value.width * 0.1, 200)
7897
})
7998
const northArrowStyle = computed(() => {
8099
if (mapRotation.value === 0) {
81-
return 0
100+
return {}
82101
}
83102
return {
84103
transform: `rotate(${mapRotation.value}rad)`,
@@ -95,10 +114,12 @@ const matchingResolutionStepWithLabel = computed(() =>
95114
}
96115
// checking if map resolution is between the two steps
97116
const previousStep = otherResolution[index - 1]
98-
return (
99-
previousStep.resolution > mapResolution.value &&
100-
mapResolution.value > res.resolution
101-
)
117+
if (previousStep) {
118+
return (
119+
previousStep.resolution > mapResolution.value &&
120+
mapResolution.value > res.resolution
121+
)
122+
}
102123
})
103124
)
104125
@@ -114,13 +135,13 @@ const printResolution = computed(
114135
115136
onMounted(() => {
116137
log.info(`Print map view mounted`)
117-
store.dispatch('setPrintMode', { mode: true, ...dispatcher })
138+
mapStore.setPrintMode(true, dispatcher)
118139
119-
generateShareLink()
140+
generateShareLink().catch((_) => {})
120141
})
121142
122143
onBeforeUnmount(() => {
123-
store.dispatch('setPrintMode', { mode: false, ...dispatcher })
144+
mapStore.setPrintMode(false, dispatcher)
124145
})
125146
126147
watch(() => route.query, generateShareLink)
@@ -131,8 +152,7 @@ async function generateShareLink() {
131152
`${location.origin}/#/map?${stringifyQuery(route.query)}`
132153
)
133154
} catch (error) {
134-
log.error(`Failed to create shortlink`, error)
135-
shortLink.value = null
155+
log.error({ messages: `Failed to create shortlink`, error })
136156
}
137157
}
138158
</script>
@@ -160,7 +180,7 @@ async function generateShareLink() {
160180
>
161181
<div class="scale d-flex justify-content-center m-1 mb-3">
162182
<OpenLayersScale
163-
v-if="mapScaleWidth > 0"
183+
v-if="mapScaleWidth && mapScaleWidth > 0"
164184
scale-type="bar"
165185
:min-width="mapScaleWidth"
166186
with-relative-size

0 commit comments

Comments
 (0)