|
|
@ -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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
|
|
|
attribution: '© <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"> |
|
|
|