github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

geodata: setting markers (still in hacky way) in map

pull/4140/head
flisowna 2 years ago
parent
df11ad896c
commit
5b28c5eb78
2 changed files with 109 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 116
      packages/nc-gui/components/smartsheet/Map.vue
  2. 63
      packages/nc-gui/composables/useMapViewDataStore.ts

116
packages/nc-gui/components/smartsheet/Map.vue
Unescape View File

@ -3,49 +3,44 @@ import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
// import { ViewTypes } from '~~/../nocodb-sdk/build/main'
// import { ViewTypes } from 'nocodb-sdk'
import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
// import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
import type { Row } from '~/lib'
const { isUIAllowed } = useUIPermission()
// const { isUIAllowed } = useUIPermission()
// provide(IsFormInj, ref(false))
provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(false))
provide(IsMapInj, ref(true))
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
// provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
// const meta = inject(MetaInj, ref())
// const view = inject(ActiveViewInj, ref())
const view = inject(ActiveViewInj, ref())
const meta = inject(MetaInj, ref())
// const view = inject(ActiveViewInj, ref())
// const meta = inject(MetaInj, ref())
const reloadViewDataHook = inject(ReloadViewDataHookInj)
// const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData } = useMapViewStoreOrThrow()
// const { loadData, formattedData: data } = useViewData(meta, view)
// const { sharedView, sorts, nestedFilters } = useSharedView()
const {
showSystemFields,
// sortedAndFilteredFields,
fields,
filteredFieldList,
// filterQuery,
showAll,
// hideAll,
// saveOrUpdate,
// metaColumnById,
} = useViewColumns(view, meta)
console.log('fields.value', fields.value)
console.log('showSystemFields.value', showSystemFields.value)
console.log('filteredFieldList.value', filteredFieldList.value)
console.log('showAll.value', showAll.value)
console.log('fields.value', fields.value)
const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
// const {
// showSystemFields,
// // sortedAndFilteredFields,
// fields,
// filteredFieldList,
// // filterQuery,
// showAll,
// // hideAll,
// // saveOrUpdate,
// // metaColumnById,
// } = useViewColumns(view, meta)
// console.log('fields.value', fields.value)
// console.log('showSystemFields.value', showSystemFields.value)
// console.log('filteredFieldList.value', filteredFieldList.value)
// console.log('showAll.value', showAll.value)
// console.log('fields.value', fields.value)
const markerRef = ref()
const myMapRef = ref()
@ -64,9 +59,11 @@ const markersRef = ref<L.MarkerClusterGroup | undefined>()
// const { isUIAllowed } = useUIPermission()
onBeforeMount(async () => {
await loadMapData()
// console.log('onBeforeMount')
await loadMapMeta()
console.log('on mapview mapMetaData', mapMetaData)
await loadMapData()
// console.log('IN BEFOREMOUNT: geoDataFieldColumn.value.title', geoDataFieldColumn?.value?.title)
// console.log('on mapview formatted', formattedData)
// const geodata = data.value[0].row.geo.split(';')
})
@ -82,25 +79,48 @@ const { fk_geo_data_col_id } = mapMetaData.value
console.log('fk_geo_data_col_id', fk_geo_data_col_id)
watch(formattedData, () => {
watch([formattedData, mapMetaData], () => {
// console.log('WATCH CALL FOR formattedData')
markersRef.value?.clearLayers()
console.log('mapMetaData', mapMetaData?.value?.fk_geo_data_col_id)
// formattedData.get()
// const rows = Array.from(formattedData.value.values())
// console.log('rows', rows)
// console.log('IN WATCHER: geoDataFieldColumn.value', geoDataFieldColumn?.value)
formattedData.value?.forEach((row) => {
console.log('fk_geo_data_col_id', fk_geo_data_col_id)
// const [lat, long] =
console.log('meta', meta?.value?.columns)
// console.log('meta', meta?.value?.columns)
console.log('row', row)
if (row?.geonew == null) return
const [lat, long] = row?.geonew.split(';').map(parseFloat)
if (lat == null || long == null) {
return
const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
if (primaryGeoDataColumnTitle == null) {
throw new Error('Cannot find primary geo data column title')
}
console.log('lat', lat)
console.log('primaryGeoDataColumnTitle', primaryGeoDataColumnTitle)
const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
console.log('primaryGeoDataValue', primaryGeoDataValue)
const [lat, long] = primaryGeoDataValue.split(';')
console.log('lat, long', lat, long)
addMarker(lat, long)
const selected = row?.rowMeta?.selected
console.log(selected)
// if (geoDataFieldColumn?.value?.title === null) return
// const [lat, long] = row?.split(';').map(parseFloat)
// if (lat == null || long == null) {
// return
// }
// console.log('lat', lat)
// addMarker(lat, long)
// const selected = row?.rowMeta?.selected
// console.log(selected)
})
})
@ -109,9 +129,8 @@ reloadViewDataHook?.on(async () => {
})
function addMarker(lat: number, long: number) {
// markersRef.value?.clearLayers()
const markerNew = markerRef?.value?.([lat, long])
console.log(markersRef.value)
// console.log(markersRef.value)
markersRef?.value?.addLayer(markerNew)
myMapRef?.value?.addLayer(markersRef.value)
@ -123,13 +142,15 @@ onMounted(async () => {
const myMap = map('map').setView([51.505, -0.09], 13)
markerRef.value = marker
myMapRef.value = myMap
console.log('markerClusterGroup', L.markerClusterGroup)
// console.log('markerClusterGroup', L.markerClusterGroup)
markersRef.value = L.markerClusterGroup()
tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(myMap)
// addMarker(52, 0)
})
// const geodata = data.value[0].row.geo.split(';')
@ -137,7 +158,8 @@ onMounted(async () => {
<template>
<div class="flex flex-col h-full w-full">
{{ JSON.stringify(mapMetaData) }}
{{ JSON.stringify(formattedData) }}
{{ JSON.stringify(geoDataFieldColumn?.title) }}
<!-- {{ JSON.stringify(selected) }} -->
<!-- {{ JSON.stringify(meta?.columns) }} -->
<!-- <div class="flex m-4 gap-4">

63
packages/nc-gui/composables/useMapViewDataStore.ts
Unescape View File

@ -1,5 +1,5 @@
import type { ComputedRef, Ref } from 'vue'
import type { MapType, TableType, ViewType } from 'nocodb-sdk'
import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
import { ref, useInjectionState } from '#imports'
import type { Row } from '~/lib'
@ -8,10 +8,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
meta: Ref<TableType | MapType | undefined>,
viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
) => {
const formattedData = ref<Row[]>()
const formattedData = ref<Row[]>([])
// const { api } = useApi()
// const { project } = useProject()
const { api } = useApi()
const { project } = useProject()
// const { $e, $api } = useNuxtApp()
const { $api } = useNuxtApp()
@ -19,43 +19,59 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
// const geoDataField = ref<string>('')
// const geoDataFieldColumn = ref<ColumnType | undefined>()
const geoDataFieldColumn = ref<ColumnType | undefined>()
async function loadMapMeta() {
if (!viewMeta?.value?.id || !meta?.value?.columns) return
mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id)
geoDataFieldColumn.value =
(meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
}
async function loadMapData() {
// if (!viewMeta?.value?.id || !meta?.value?.columns) return
if (!viewMeta?.value?.id || !meta?.value?.columns) return
// formattedData.value = []
const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
console.log('in useMapViewDataStore - res.list: ', res.list)
formattedData.value = res.list
// formattedData.value = []
// for (const data of res) {
// const key = data.key
// formattedData.value.set(key, data.value.list)
// }
// const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
// // geoDataFieldColumn.value =
// // (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
// // geoDataFieldColumn.value =
// // (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
// geoDataField.value = geoDataFieldColumn!.value!.title!
// geoDataField.value = geoDataFieldColumn!.value!.title!
// // const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
// // const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
// // const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
// // const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
// // console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
// // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
// // console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
// // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
// // reset formattedData & countByStack to avoid storing previous data after changing grouping field
// // reset formattedData & countByStack to avoid storing previous data after changing grouping field
// // alert('in loadMapData')
// // debugger
// // alert('in loadMapData')
// // debugger
// console.log('res in mapviewdatastore', res)
// console.log('res in mapviewdatastore', res)
// for (const data of res.list) {
// formattedData.value = data.value
// formattedData.value = res.list
// }
// // for (const data of res.list) {
// // formattedData.value = data.value
// // }
// formattedData.value = res.list
// for (const data of res) {
// const key = data.key
// formattedData.value.set(key, formatData(data.value.list))
// }
}
return {
@ -63,6 +79,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
loadMapData,
loadMapMeta,
mapMetaData,
geoDataFieldColumn,
}
},
)

Write Preview
Loading…
Cancel
Save