hrms-bangkok/hrms-checkin
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

clean log

Browse source
This commit is contained in:
Warunee Tamkoo 2026-04-30 15:58:07 +07:00
parent e9d28197df
commit 365d55d310
2 changed files with 0 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/components/AscGISMap.vue
View file

@ -65,27 +65,10 @@ const zoomMap = ref<number>(18)
const textTooltip = ref<string>(
'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)'
)
const MAP_DEBUG = true
let attachRetryTimer: number | undefined
let mapInitVersion = 0
let isRecoveryReinitializing = false
function logMapDebug(event: string, payload?: Record<string, unknown>) {
if (!MAP_DEBUG) {
return
}
const mode = $q.screen.gt.xs ? 'desktop' : 'mobile'
console.log('[AscGISMap]', event, {
mode,
isMapInitialized: isMapInitialized.value,
isInitializing: isInitializing.value,
hasMapView: !!mapView.value,
mapDestroyed: !!mapView.value?.destroyed,
...payload,
})
}
function getActiveMapContainer() {
return $q.screen.gt.xs
? desktopMapContainerRef.value
@ -96,29 +79,14 @@ async function waitForActiveMapContainer(maxAttempts = 25, delayMs = 120) {
for (let i = 0; i < maxAttempts; i += 1) {
await nextTick()
const container = getActiveMapContainer()
if (i === 0 || i === maxAttempts - 1) {
logMapDebug('waitForContainer:attempt', {
attempt: i + 1,
maxAttempts,
width: container?.clientWidth || 0,
height: container?.clientHeight || 0,
})
}
if (container && container.clientWidth > 0 && container.clientHeight > 0) {
logMapDebug('waitForContainer:ready', {
attempt: i + 1,
width: container.clientWidth,
height: container.clientHeight,
})
return container
}
await new Promise((resolve) => setTimeout(resolve, delayMs))
}
logMapDebug('waitForContainer:failed')
return null
}
@ -131,12 +99,10 @@ function clearAttachRetryTimer() {
async function recoverMapByReinitialize() {
if (isRecoveryReinitializing) {
logMapDebug('recover:skipAlreadyRunning')
return
}
isRecoveryReinitializing = true
logMapDebug('recover:start', { mapInitVersion })
try {
mapInitVersion += 1
@ -151,16 +117,13 @@ async function recoverMapByReinitialize() {
isMapInitialized.value = false
await nextTick()
await initializeMap()
logMapDebug('recover:initializeMapCompleted', { mapInitVersion })
} finally {
isRecoveryReinitializing = false
logMapDebug('recover:end', { mapInitVersion })
}
}
function reattachAndResizeMap(retry = 0) {
if (!mapView.value || mapView.value.destroyed) {
logMapDebug('reattach:skipNoMapView', { retry })
return
}
@ -171,18 +134,12 @@ function reattachAndResizeMap(retry = 0) {
activeContainer.clientWidth === 0 ||
activeContainer.clientHeight === 0
) {
logMapDebug('reattach:containerNotReady', {
retry,
width: activeContainer?.clientWidth || 0,
height: activeContainer?.clientHeight || 0,
})
if (retry < 15) {
clearAttachRetryTimer()
attachRetryTimer = window.setTimeout(() => {
reattachAndResizeMap(retry + 1)
}, 140)
} else if (!isRecoveryReinitializing) {
logMapDebug('reattach:triggerRecovery')
void recoverMapByReinitialize()
}
return
@ -192,26 +149,14 @@ function reattachAndResizeMap(retry = 0) {
nextTick(() => {
if (!mapView.value || mapView.value.destroyed) {
logMapDebug('reattach:skipDestroyedAfterTick', { retry })
return
}
if (mapView.value.container !== activeContainer) {
logMapDebug('reattach:rebindContainer', {
width: activeContainer.clientWidth,
height: activeContainer.clientHeight,
})
mapView.value.container = null
mapView.value.container = activeContainer
}
logMapDebug('reattach:resize', {
retry,
width: activeContainer.clientWidth,
height: activeContainer.clientHeight,
center: mapView.value.center,
zoom: mapView.value.zoom,
})
mapView.value.resize()
mapView.value.requestRender?.()
mapView.value
@ -230,12 +175,10 @@ function reattachAndResizeMap(retry = 0) {
async function initializeMap() {
if (isInitializing.value || (mapView.value && !mapView.value.destroyed)) {
logMapDebug('initialize:skipAlreadyRunningOrReady')
return
}
const initVersion = ++mapInitVersion
logMapDebug('initialize:start', { initVersion })
isInitializing.value = true
@ -250,7 +193,6 @@ async function initializeMap() {
'esri/Graphic',
'esri/layers/TileLayer',
])
logMapDebug('initialize:modulesLoaded', { initVersion })
// Set apiKey
// esriConfig.apiKey =
// 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
@ -267,10 +209,6 @@ async function initializeMap() {
})
if (initVersion !== mapInitVersion) {
logMapDebug('initialize:cancelledAfterMapCreated', {
initVersion,
mapInitVersion,
})
return
}
@ -284,37 +222,18 @@ async function initializeMap() {
)
if (initVersion !== mapInitVersion) {
logMapDebug('initialize:cancelledAfterGeolocation', {
initVersion,
mapInitVersion,
})
return
}
const { latitude, longitude } = position.coords
logMapDebug('initialize:geolocationSuccess', {
initVersion,
latitude,
longitude,
})
const mapContainer = await waitForActiveMapContainer()
if (!mapContainer || initVersion !== mapInitVersion) {
logMapDebug('initialize:containerUnavailableOrCancelled', {
initVersion,
mapInitVersion,
})
isMapInitialized.value = false
return
}
logMapDebug('initialize:containerReady', {
initVersion,
width: mapContainer.clientWidth,
height: mapContainer.clientHeight,
})
mapView.value = new MapView({
container: mapContainer,
map: map,
@ -336,13 +255,8 @@ async function initializeMap() {
})
await mapView.value.when()
logMapDebug('initialize:mapViewReady', { initVersion })
if (initVersion !== mapInitVersion) {
logMapDebug('initialize:cancelledAfterMapViewReady', {
initVersion,
mapInitVersion,
})
if (mapView.value && !mapView.value.destroyed) {
mapView.value.destroy()
}
@ -438,10 +352,6 @@ async function initializeMap() {
)
.then((response) => {
if (initVersion !== mapInitVersion || !mapView.value) {
logMapDebug('initialize:poiIgnoredByVersionOrMap', {
initVersion,
mapInitVersion,
})
return
}
@ -473,25 +383,13 @@ async function initializeMap() {
})
updateLocation(latitude, longitude, poiPlaceName.value)
logMapDebug('initialize:poiSuccess', {
initVersion,
poiPlaceName: poiPlaceName.value,
})
})
.catch(() => {
if (initVersion !== mapInitVersion) {
logMapDebug('initialize:poiErrorIgnoredByVersion', {
initVersion,
mapInitVersion,
})
return
}
poiPlaceName.value = poiPlaceName.value || 'ไม่พบข้อมูล'
updateLocation(latitude, longitude, poiPlaceName.value)
logMapDebug('initialize:poiErrorFallback', {
initVersion,
poiPlaceName: poiPlaceName.value,
})
})
if (initVersion === mapInitVersion) {
@ -501,21 +399,11 @@ async function initializeMap() {
if (initVersion === mapInitVersion) {
isMapInitialized.value = false
}
logMapDebug('initialize:error', {
initVersion,
mapInitVersion,
error: error instanceof Error ? error.message : String(error),
})
console.error('Error loading the map', error)
} finally {
if (initVersion === mapInitVersion) {
isInitializing.value = false
}
logMapDebug('initialize:end', {
initVersion,
mapInitVersion,
isMapInitialized: isMapInitialized.value,
})
}
}
@ -609,7 +497,6 @@ const handleWindowResize = () => {
* Only call resize() if the map is fully initialized
*/
function handleMapResize() {
logMapDebug('handleMapResize:called')
if (mapView.value && !mapView.value.destroyed && isMapInitialized.value) {
// Use nextTick to ensure the DOM has finished updating before resizing
reattachAndResizeMap()
@ -626,14 +513,9 @@ watch(
async (newValue) => {
// Skip if no actual change (same layout)
if (newValue === currentScreenSize.value) {
logMapDebug('screenWatch:skipNoChange', { newValue })
return
}
logMapDebug('screenWatch:changed', {
oldValue: currentScreenSize.value,
newValue,
})
currentScreenSize.value = newValue
if (!newValue) {
mobileMapExpanded.value = true
@ -645,7 +527,6 @@ watch(
// Always destroy and re-initialize when screen size changes
// This ensures the map is attached to the correct container
if (mapView.value && !mapView.value.destroyed) {
logMapDebug('screenWatch:destroyMapView')
mapView.value.destroy()
mapView.value = null
}
@ -662,15 +543,10 @@ watch(
await initializeMap()
if (!mapView.value || mapView.value.destroyed) {
logMapDebug('screenWatch:missingMapAfterInitialize, triggerRecovery')
await recoverMapByReinitialize()
}
reattachAndResizeMap()
logMapDebug('screenWatch:reinitialized', {
hasMapViewAfterReinit: !!mapView.value,
mapDestroyedAfterReinit: !!mapView.value?.destroyed,
})
}
}
)
@ -687,28 +563,19 @@ watch(
// Set up resize event listener on mount
onMounted(async () => {
logMapDebug('lifecycle:mounted')
window.addEventListener('resize', handleWindowResize)
// Component can be remounted after orientation/layout switches.
// Recreate map automatically when consent is already granted.
if (privacyStore.isAccepted && (!mapView.value || mapView.value.destroyed)) {
logMapDebug('lifecycle:mounted:triggerInitialize')
await waitForActiveMapContainer(30, 100)
await initializeMap()
reattachAndResizeMap()
} else {
logMapDebug('lifecycle:mounted:skipInitialize', {
privacyAccepted: privacyStore.isAccepted,
hasMapView: !!mapView.value,
mapDestroyed: !!mapView.value?.destroyed,
})
}
})
// Cleanup map resources when component unmounts
onBeforeUnmount(() => {
logMapDebug('lifecycle:beforeUnmount')
clearAttachRetryTimer()
if (mapView.value) {

0
src/components/MapCheckin.vue → src/components/MapCheckin_Backup.vue
View file