From 2ecf13b6f4ecee82990cb2f6be66e341dc8719bf Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Mon, 18 Nov 2024 16:54:16 +0100 Subject: [PATCH] feat(feature-info): migrate getFeatureInfoById to handle links (WIP) --- src/App.vue | 2 + .../info/feature-info.composable.ts | 16 ++ src/components/info/feature-info.service.ts | 141 ++++++++++-------- .../info/templates/default-template.vue | 7 + src/composables/themes/themes.composable.ts | 2 +- .../state-persistor-featureinfo.service.ts | 28 ++++ src/stores/feature-info.store.ts | 7 + 7 files changed, 142 insertions(+), 61 deletions(-) create mode 100644 src/services/state-persistor/state-persistor-featureinfo.service.ts diff --git a/src/App.vue b/src/App.vue index 889345a8..92aa677c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,6 +24,7 @@ import { statePersistorMyMapService } from '@/services/state-persistor/state-per import { useAppStore } from '@/stores/app.store' import useMap from '@/composables/map/map.composable' import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable' +import { statePersistorFeatureInfoService } from '@/services/state-persistor/state-persistor-featureinfo.service' const appStore = useAppStore() const mvtStyleService = useMvtStyles() @@ -37,6 +38,7 @@ statePersistorAppService.bootstrap() statePersistorStyleService.bootstrap() statePersistorBgLayerService.bootstrap() mvtStyleService.initBackgroundsConfigs() +statePersistorFeatureInfoService.bootstrap() const { embedded, diff --git a/src/components/info/feature-info.composable.ts b/src/components/info/feature-info.composable.ts index 620a7424..fd43d258 100644 --- a/src/components/info/feature-info.composable.ts +++ b/src/components/info/feature-info.composable.ts @@ -5,11 +5,14 @@ import { FeatureInfoService } from './feature-info.service' import { useFeatureInfoStore } from '@/stores/feature-info.store' import { FeatureInfo } from './feature-info.model' import { MapBrowserEvent } from 'ol' +import { watchEffect } from 'vue' +import { storeToRefs } from 'pinia' export default function useFeatureInfo() { const map = useMap().getOlMap() const { toggleInfoOpen } = useAppStore() const { setContent } = useFeatureInfoStore() + const { fid } = storeToRefs(useFeatureInfoStore()) function init() { const featureInfoService = new FeatureInfoService(map) @@ -25,6 +28,19 @@ export default function useFeatureInfo() { } })() }) + + watchEffect(() => { + if (fid.value) { + ;(async () => { + const content: FeatureInfo[] | undefined = + await featureInfoService.getFeatureInfoById(fid.value as string) + if (content) { + setContent(content) + toggleInfoOpen(true) + } + })() + } + }) } return { init } diff --git a/src/components/info/feature-info.service.ts b/src/components/info/feature-info.service.ts index 3440dfd0..931fede9 100644 --- a/src/components/info/feature-info.service.ts +++ b/src/components/info/feature-info.service.ts @@ -9,6 +9,8 @@ import Style from 'ol/style/Style.js' import { FeatureInfo } from './feature-info.model' import { Geometry } from 'ol/geom' import { FeatureLike } from 'ol/Feature' +import useThemes from '@/composables/themes/themes.composable' +import useLayers from '@/composables/layers/layers.composable' const INFO_SERVICE_URL = import.meta.env.VITE_GET_INFO_SERVICE_URL @@ -95,66 +97,85 @@ export class FeatureInfoService { this.map.addLayer(this.featureLayer) } - // getFeatureInfoById(fid) { - // const fids = fid.split(',') - // fids.forEach(async curFid => { - // const splittedFid = curFid.split('_') - // const layersList = [splittedFid[0]] - // const layerLabel = {} - - // try { - // const flatCatalogue = await this.appThemes_.getFlatCatalog() - - // if (layersList.length > 0) { - // this.isQuerying_ = true - // this.map_.getViewport().style.cursor = 'wait' - // this.content = [] - - // try { - // const resp = await this.http_.get(this.getInfoServiceUrl_, { - // params: { fid: curFid }, - // }) - - // this.appSelector = this.QUERYPANEL_ - // let showInfo = false - // if (!this.appGetDevice_.testEnv('xs')) { - // showInfo = true - // this.hiddenContent = false - // } else { - // this.hiddenContent = true - // } - - // const node = flatCatalogue.find( - // catItem => catItem.id == splittedFid[0] - // ) - // if (node !== undefined && node !== null) { - // const layer = this.getLayerFunc_(node) - // const foundLayer = this.map_ - // .getLayers() - // .getArray() - // .find( - // curLayer => - // curLayer.get('queryable_id') === layer.get('queryable_id') - // ) - // const idx = this.map_.getLayers().getArray().indexOf(foundLayer) - // if (idx === -1) { - // this.map_.addLayer(layer) - // } - // layerLabel[splittedFid[0]] = layer.get('label') - // } - // this.showInfo(true, resp, layerLabel, showInfo, true) - // } catch (error) { - // this.clearQueryResult(this.QUERYPANEL_) - // this.infoOpen = false - // this.map_.getViewport().style.cursor = '' - // this.isQuerying_ = false - // } - // } - // } catch (error) { - // console.error('Error fetching flat catalog:', error) - // } - // }) - // } + async getFeatureInfoById(fid: string): Promise { + const fids = fid.split(',') + for (const curFid of fids) { + const splittedFid = curFid.split('_') + const layersList = [splittedFid[0]] + const layerLabel: { [key: string]: string } = {} + + try { + // const flatCatalogue: FlatCatalogueItem[] = + // await this.appThemes_.getFlatCatalog() + + if (layersList.length > 0) { + // this.isQuerying_ = true + this.map.getViewport().style.cursor = 'wait' + this.content = [] + + const url = new URL(INFO_SERVICE_URL) + url.searchParams.append('fid', curFid) + try { + const resp = await fetch(url.toString()) + + // this.appSelector = this.QUERYPANEL_ + // let showInfo = false + // if (!this.appGetDevice_.testEnv('xs')) { + // showInfo = true + // this.hiddenContent = false + // } else { + // this.hiddenContent = true + // } + + // const node = flatCatalogue.find( + // catItem => catItem.id === splittedFid[0] + // ) + + const { findById } = useThemes() + const node = findById(splittedFid[0]) + + const { toggleLayer } = useLayers() + + if (node !== undefined && node !== null) { + // const layer = this.getLayerFunc_(node) + // const foundLayer = this.map_ + // .getLayers() + // .getArray() + // .find( + // (curLayer: Layer) => + // curLayer.get('queryable_id') === layer.get('queryable_id') + // ) + // const idx = this.map_.getLayers().getArray().indexOf(foundLayer) + // if (idx === -1) { + // this.map_.addLayer(layer) + // } + // layerLabel[splittedFid[0]] = layer.get('label') + layerLabel[splittedFid[0]] = node.layers as string + toggleLayer(node.id, true, false) + } + + if (resp.ok) { + const data = await resp.json() + if (data.length > 0) { + return this.showInfo( + true, + data, + layerLabel /*, showInfo, true*/ + ) + } + } + } catch (error) { + // this.clearQueryResult(this.QUERYPANEL_) + // this.infoOpen = false + this.map.getViewport().style.cursor = '' + // this.isQuerying_ = false + } + } + } catch (error) { + // console.error('Error fetching flat catalog:', error) + } + } + } async singleclickEvent( evt: MapBrowserEvent, diff --git a/src/components/info/templates/default-template.vue b/src/components/info/templates/default-template.vue index d90db520..2ca7e57f 100644 --- a/src/components/info/templates/default-template.vue +++ b/src/components/info/templates/default-template.vue @@ -18,6 +18,7 @@ defineProps({ }, }) const { t } = useTranslation() +// const currentUrl = window.location.href