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
Unified 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 * as L from 'leaflet'
// import { ViewTypes } from '~~/../nocodb-sdk/build/main' // import { ViewTypes } from '~~/../nocodb-sdk/build/main'
// import { ViewTypes } from 'nocodb-sdk' // 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(IsFormInj, ref(false))
provide(IsGalleryInj, ref(false)) provide(IsGalleryInj, ref(false))
provide(IsGridInj, ref(false)) provide(IsGridInj, ref(false))
provide(IsMapInj, ref(true)) provide(IsMapInj, ref(true))
provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable')) // provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
// const meta = inject(MetaInj, ref()) // const meta = inject(MetaInj, ref())
// const view = inject(ActiveViewInj, ref()) // const view = inject(ActiveViewInj, ref())
const view = inject(ActiveViewInj, ref()) // const view = inject(ActiveViewInj, ref())
const meta = inject(MetaInj, ref()) // const meta = inject(MetaInj, ref())
const reloadViewDataHook = inject(ReloadViewDataHookInj) const reloadViewDataHook = inject(ReloadViewDataHookInj)
// const reloadViewMetaHook = inject(ReloadViewMetaHookInj) // const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const { formattedData, loadMapData, loadMapMeta, mapMetaData } = useMapViewStoreOrThrow() const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
// const {
// const { loadData, formattedData: data } = useViewData(meta, view) // showSystemFields,
// const { sharedView, sorts, nestedFilters } = useSharedView() // // sortedAndFilteredFields,
// fields,
// filteredFieldList,
const { // // filterQuery,
showSystemFields, // showAll,
// sortedAndFilteredFields, // // hideAll,
fields, // // saveOrUpdate,
filteredFieldList, // // metaColumnById,
// filterQuery, // } = useViewColumns(view, meta)
showAll,
// hideAll, // console.log('fields.value', fields.value)
// saveOrUpdate, // console.log('showSystemFields.value', showSystemFields.value)
// metaColumnById, // console.log('filteredFieldList.value', filteredFieldList.value)
} = useViewColumns(view, meta) // console.log('showAll.value', showAll.value)
// console.log('fields.value', fields.value)
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 markerRef = ref()
const myMapRef = ref() const myMapRef = ref()
@ -64,9 +59,11 @@ const markersRef = ref<L.MarkerClusterGroup | undefined>()
// const { isUIAllowed } = useUIPermission() // const { isUIAllowed } = useUIPermission()
onBeforeMount(async () => { onBeforeMount(async () => {
await loadMapData() // console.log('onBeforeMount')
await loadMapMeta() 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(';') // 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) 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() 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) => { formattedData.value?.forEach((row) => {
console.log('fk_geo_data_col_id', fk_geo_data_col_id)
// const [lat, long] = // const [lat, long] =
console.log('meta', meta?.value?.columns) // console.log('meta', meta?.value?.columns)
console.log('row', row) console.log('row', row)
if (row?.geonew == null) return
const [lat, long] = row?.geonew.split(';').map(parseFloat) const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
if (lat == null || long == null) {
return 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) addMarker(lat, long)
const selected = row?.rowMeta?.selected // if (geoDataFieldColumn?.value?.title === null) return
console.log(selected)
// 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) { function addMarker(lat: number, long: number) {
// markersRef.value?.clearLayers()
const markerNew = markerRef?.value?.([lat, long]) const markerNew = markerRef?.value?.([lat, long])
console.log(markersRef.value) // console.log(markersRef.value)
markersRef?.value?.addLayer(markerNew) markersRef?.value?.addLayer(markerNew)
myMapRef?.value?.addLayer(markersRef.value) myMapRef?.value?.addLayer(markersRef.value)
@ -123,13 +142,15 @@ onMounted(async () => {
const myMap = map('map').setView([51.505, -0.09], 13) const myMap = map('map').setView([51.505, -0.09], 13)
markerRef.value = marker markerRef.value = marker
myMapRef.value = myMap myMapRef.value = myMap
console.log('markerClusterGroup', L.markerClusterGroup) // console.log('markerClusterGroup', L.markerClusterGroup)
markersRef.value = L.markerClusterGroup() markersRef.value = L.markerClusterGroup()
tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(myMap) }).addTo(myMap)
// addMarker(52, 0)
}) })
// const geodata = data.value[0].row.geo.split(';') // const geodata = data.value[0].row.geo.split(';')
@ -137,7 +158,8 @@ onMounted(async () => {
<template> <template>
<div class="flex flex-col h-full w-full"> <div class="flex flex-col h-full w-full">
{{ JSON.stringify(mapMetaData) }} {{ JSON.stringify(formattedData) }}
{{ JSON.stringify(geoDataFieldColumn?.title) }}
<!-- {{ JSON.stringify(selected) }} --> <!-- {{ JSON.stringify(selected) }} -->
<!-- {{ JSON.stringify(meta?.columns) }} --> <!-- {{ JSON.stringify(meta?.columns) }} -->
<!-- <div class="flex m-4 gap-4"> <!-- <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 { 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 { ref, useInjectionState } from '#imports'
import type { Row } from '~/lib' import type { Row } from '~/lib'
@ -8,10 +8,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
meta: Ref<TableType | MapType | undefined>, meta: Ref<TableType | MapType | undefined>,
viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>, viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
) => { ) => {
const formattedData = ref<Row[]>() const formattedData = ref<Row[]>([])
// const { api } = useApi() const { api } = useApi()
// const { project } = useProject() const { project } = useProject()
// const { $e, $api } = useNuxtApp() // const { $e, $api } = useNuxtApp()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
@ -19,43 +19,59 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
// const geoDataField = ref<string>('') // const geoDataField = ref<string>('')
// const geoDataFieldColumn = ref<ColumnType | undefined>() const geoDataFieldColumn = ref<ColumnType | undefined>()
async function loadMapMeta() { async function loadMapMeta() {
if (!viewMeta?.value?.id || !meta?.value?.columns) return if (!viewMeta?.value?.id || !meta?.value?.columns) return
mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id) 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() { 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 = // geoDataField.value = geoDataFieldColumn!.value!.title!
// // (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
// 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]) // // reset formattedData & countByStack to avoid storing previous data after changing grouping field
// // 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 // // alert('in loadMapData')
// // debugger
// // alert('in loadMapData') // console.log('res in mapviewdatastore', res)
// // debugger
// 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) { // for (const data of res) {
// // formattedData.value = data.value // const key = data.key
// // } // formattedData.value.set(key, formatData(data.value.list))
// formattedData.value = res.list // }
} }
return { return {
@ -63,6 +79,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
loadMapData, loadMapData,
loadMapMeta, loadMapMeta,
mapMetaData, mapMetaData,
geoDataFieldColumn,
} }
}, },
) )

Write Preview
Loading…
Cancel
Save