Skip to content

Commit 0a050e5

Browse files
aehmtaehmt
committed
onDeviceClick prop added
1 parent e502d96 commit 0a050e5

File tree

5 files changed

+176
-180
lines changed

5 files changed

+176
-180
lines changed

‎src/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,8 @@ if (process.env.REACT_APP_PUBLISHABLE_KEY) {
5555
}}
5656
>
5757
<LiveView
58-
publishableKey={
59-
process.env.REACT_APP_PUBLISHABLE_KEY
60-
}
58+
navigateOnClick={false}
59+
publishableKey={process.env.REACT_APP_PUBLISHABLE_KEY}
6160
showTooltips={false}
6261
showDeviceList={true}
6362
showDeviceCard={true}

‎src/pages/AccountLiveLocation/AccountLiveLocation.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ const AccountLiveLocation = ({
2121
accountId,
2222
assetsUrl,
2323
className,
24+
onDeviceClick,
25+
navigateOnClick,
2426
initialDeviceListOrder,
2527
initialDeviceListMap,
2628
isWidget,
@@ -46,7 +48,7 @@ const AccountLiveLocation = ({
4648
fetchPolicy="no-cache"
4749
>
4850
{({ error, data, loading }) => {
49-
const subscribeToMovementStatus =
51+
const subscribeToMovementStatus =
5052
error || loading ? {} : data.subscribeToMovementStatus
5153

5254
const devicesMap = mergeSubDataIntoInitialData(
@@ -97,6 +99,8 @@ const AccountLiveLocation = ({
9799
<Map
98100
assetsUrl={assetsUrl}
99101
subscriptionData={subscribeToMovementStatus}
102+
navigateOnClick={navigateOnClick}
103+
onDeviceClick={onDeviceClick}
100104
selectedDeviceId={selectedDeviceId}
101105
setSelectedDeviceId={setSelectedDeviceId}
102106
devicesMap={devicesMap}

‎src/pages/AccountLiveLocation/components/Map.js‎

Lines changed: 140 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ const Map = props => {
132132
selectedDeviceId,
133133
selectedMapLayerState,
134134
center,
135+
onDeviceClick,
136+
navigateOnClick,
135137
devices,
136138
zoom,
137139
setSelectedDeviceForSingleDeviceView,
@@ -154,8 +156,11 @@ const Map = props => {
154156
)
155157
})
156158
leafletMarker.on('click', e => {
159+
if (navigateOnClick) {
160+
setSelectedDeviceForSingleDeviceView(device_id)
161+
}
162+
onDeviceClick(device_id)
157163
e.target.closePopup()
158-
setSelectedDeviceForSingleDeviceView(device_id)
159164
})
160165
leafletMarker.on('mouseout', e => {
161166
popupTimeouts.forEach(timeout => {
@@ -182,7 +187,7 @@ const Map = props => {
182187
deviceData.name,
183188
deviceData.timezone,
184189
deviceData.location.geometry.coordinates,
185-
deviceData.inactive,
190+
deviceData.inactive
186191
)
187192
)
188193
)
@@ -239,12 +244,7 @@ const Map = props => {
239244
//generate marker to be added to relevant sublayer
240245
const getNewMarker = deviceData => {
241246
const { device_id, location } = deviceData
242-
if (
243-
!(
244-
location &&
245-
location.geometry &&
246-
location.geometry.coordinates )
247-
)
247+
if (!(location && location.geometry && location.geometry.coordinates))
248248
return null
249249
let reversedCoordinates = [...location.geometry.coordinates]
250250

@@ -378,8 +378,8 @@ const Map = props => {
378378
maxZoom: 21
379379
}
380380
)
381-
if (currentLayer){
382-
mapRef.current.removeLayer(currentLayer)
381+
if (currentLayer) {
382+
mapRef.current.removeLayer(currentLayer)
383383
mapRef.current.addLayer(newLayer)
384384
setCurrentLayer(newLayer)
385385
}
@@ -401,161 +401,154 @@ const Map = props => {
401401
}
402402
}, []) // eslint-disable-line
403403

404-
useLayoutEffect(
405-
() => {
406-
const device = devicesObj[selectedDeviceId]
407-
if (device) {
408-
const distance = mapRef.current.distance(
409-
mapRef.current.getCenter(),
410-
device._latlng
411-
) // calculate distance to adjust animation time and timeout for popup
412-
const duration = Math.floor(distance > 10000 ? 4 : 1)
413-
mapRef.current.flyTo([device._latlng.lat, device._latlng.lng], 18, {
414-
animate: true,
415-
duration: duration
416-
})
417-
popupTimeouts.push(
418-
setTimeout(function() {
419-
setFollow({ device_id: selectedDeviceId })
420-
device.openPopup()
421-
}, duration * 1000 + 500)
422-
)
423-
popupTimeouts.push()
424-
}
425-
return () => {
426-
popupTimeouts.forEach(timeout => {
427-
clearTimeout(timeout)
428-
})
429-
}
430-
},
431-
[selectedDeviceId]
432-
)
404+
useLayoutEffect(() => {
405+
const device = devicesObj[selectedDeviceId]
406+
if (device) {
407+
const distance = mapRef.current.distance(
408+
mapRef.current.getCenter(),
409+
device._latlng
410+
) // calculate distance to adjust animation time and timeout for popup
411+
const duration = Math.floor(distance > 10000 ? 4 : 1)
412+
mapRef.current.flyTo([device._latlng.lat, device._latlng.lng], 18, {
413+
animate: true,
414+
duration: duration
415+
})
416+
popupTimeouts.push(
417+
setTimeout(function() {
418+
setFollow({ device_id: selectedDeviceId })
419+
device.openPopup()
420+
}, duration * 1000 + 500)
421+
)
422+
popupTimeouts.push()
423+
}
424+
return () => {
425+
popupTimeouts.forEach(timeout => {
426+
clearTimeout(timeout)
427+
})
428+
}
429+
}, [selectedDeviceId])
433430

434431
useLayoutEffect(
435432
() => {
436-
if (subscriptionData && subscriptionData.device_id) {
437-
const subscriptionDevice = utils.parseMovementStatus(
438-
subscriptionData,
439-
devicesMap[subscriptionData.device_id]
440-
)
433+
if (subscriptionData && subscriptionData.device_id) {
434+
const subscriptionDevice = utils.parseMovementStatus(
435+
subscriptionData,
436+
devicesMap[subscriptionData.device_id]
437+
)
441438

442-
if (devicesObj[subscriptionDevice.device_id] && mapRef.current) {
443-
const existingDevice = devicesObj[subscriptionDevice.device_id]
444-
const location = subscriptionDevice.location
445-
if (
446-
location && location.geometry && location.geometry.coordinates
447-
) {
448-
//bindPopup
449-
bindPopup(existingDevice, subscriptionDevice)
450-
451-
//set new icon
452-
existingDevice.setIcon(getIcon(subscriptionDevice))
453-
//slide animation to new location
454-
activeClusterLayer.current.removeLayer(existingDevice)
455-
activeClusterLayer.current.addLayer(existingDevice)
456-
try {
457-
existingDevice.slideTo(
458-
// this errors out when device_name changed through mobile SDK? Why?
459-
[
460-
location.geometry.coordinates[0],
461-
location.geometry.coordinates[1]
462-
],
463-
{
464-
duration: 2000,
465-
keepAtCenter:
466-
follow.device_id &&
467-
follow.device_id === subscriptionDevice.device_id
468-
? true
469-
: false
470-
}
471-
)
472-
} catch (err) {
473-
console.log(err)
474-
}
475-
}
476-
} else if (
477-
subscriptionDevice &&
478-
subscriptionDevice.location &&
479-
subscriptionDevice.location.data
480-
) {
481-
const newMarker = getNewMarker(subscriptionDevice)
482-
devicesObj[subscriptionDevice.device_id] = newMarker
483-
if (
484-
subscriptionDevice.device_status === CONSTANTS.movementStatus.active
485-
) {
486-
try {
487-
if (
488-
activeClusterLayer &&
489-
activeClusterLayer.current &&
490-
activeClusterLayer.current.refreshClusters &&
491-
activeClusterLayer.current.addLayer
492-
) {
493-
activeClusterLayer.current.addLayer(newMarker)
494-
// activeClusterLayer.current.refreshClusters(newMarker)
495-
activeClusterLayer.current.refreshClusters()
439+
if (devicesObj[subscriptionDevice.device_id] && mapRef.current) {
440+
const existingDevice = devicesObj[subscriptionDevice.device_id]
441+
const location = subscriptionDevice.location
442+
if (location && location.geometry && location.geometry.coordinates) {
443+
//bindPopup
444+
bindPopup(existingDevice, subscriptionDevice)
445+
446+
//set new icon
447+
existingDevice.setIcon(getIcon(subscriptionDevice))
448+
//slide animation to new location
449+
activeClusterLayer.current.removeLayer(existingDevice)
450+
activeClusterLayer.current.addLayer(existingDevice)
451+
try {
452+
existingDevice.slideTo(
453+
// this errors out when device_name changed through mobile SDK? Why?
454+
[
455+
location.geometry.coordinates[0],
456+
location.geometry.coordinates[1]
457+
],
458+
{
459+
duration: 2000,
460+
keepAtCenter:
461+
follow.device_id &&
462+
follow.device_id === subscriptionDevice.device_id
463+
? true
464+
: false
465+
}
466+
)
467+
} catch (err) {
468+
console.log(err)
496469
}
497-
if (
498-
mainClusterLayer &&
499-
mainClusterLayer.current &&
500-
mainClusterLayer.current.refreshClusters
501-
)
502-
mainClusterLayer.current.refreshClusters()
503-
if (
504-
nonActiveClusterLayer &&
505-
nonActiveClusterLayer.current &&
506-
nonActiveClusterLayer.current.refreshClusters
507-
)
508-
nonActiveClusterLayer.current.refreshClusters()
509-
} catch (err) {
510-
console.log(err)
511470
}
512-
} else {
513-
if (newMarker) {
514-
if (nonActiveClusterLayer.current) {
515-
nonActiveClusterLayer.current.addLayer(newMarker)
516-
if (nonActiveClusterLayer.current.refreshClusters) {
517-
// nonActiveClusterLayer.current.refreshClusters(newMarker)
471+
} else if (
472+
subscriptionDevice &&
473+
subscriptionDevice.location &&
474+
subscriptionDevice.location.data
475+
) {
476+
const newMarker = getNewMarker(subscriptionDevice)
477+
devicesObj[subscriptionDevice.device_id] = newMarker
478+
if (
479+
subscriptionDevice.device_status === CONSTANTS.movementStatus.active
480+
) {
481+
try {
482+
if (
483+
activeClusterLayer &&
484+
activeClusterLayer.current &&
485+
activeClusterLayer.current.refreshClusters &&
486+
activeClusterLayer.current.addLayer
487+
) {
488+
activeClusterLayer.current.addLayer(newMarker)
489+
// activeClusterLayer.current.refreshClusters(newMarker)
490+
activeClusterLayer.current.refreshClusters()
491+
}
492+
if (
493+
mainClusterLayer &&
494+
mainClusterLayer.current &&
495+
mainClusterLayer.current.refreshClusters
496+
)
497+
mainClusterLayer.current.refreshClusters()
498+
if (
499+
nonActiveClusterLayer &&
500+
nonActiveClusterLayer.current &&
501+
nonActiveClusterLayer.current.refreshClusters
502+
)
518503
nonActiveClusterLayer.current.refreshClusters()
504+
} catch (err) {
505+
console.log(err)
506+
}
507+
} else {
508+
if (newMarker) {
509+
if (nonActiveClusterLayer.current) {
510+
nonActiveClusterLayer.current.addLayer(newMarker)
511+
if (nonActiveClusterLayer.current.refreshClusters) {
512+
// nonActiveClusterLayer.current.refreshClusters(newMarker)
513+
nonActiveClusterLayer.current.refreshClusters()
514+
}
519515
}
516+
if (mainClusterLayer.current)
517+
mainClusterLayer.current.refreshClusters()
520518
}
521-
if (mainClusterLayer.current)
522-
mainClusterLayer.current.refreshClusters()
523519
}
524520
}
525-
}
526-
return () => {}
521+
return () => {}
527522
}
528523
},
529524
[subscriptionData] // eslint-disable-line
530525
)
531526

532-
useEffect(
533-
() => {
534-
for (let x in devices) { // eslint-disable-line
535-
if (showTooltips) {
536-
// devicesObj[devices[x].device_id].getTooltip().options.className =
537-
// 'ht-tooltip-enable'
538-
devicesObj[devices[x].device_id].openTooltip()
539-
// .bindTooltip(
540-
// devices[x].name || devices[x].device_id,
541-
// {
542-
// offset: new Leaflet.point(5, 15),
543-
// direction: 'bottom',
544-
// className: 'ht-tooltip-enable'
545-
// }
546-
// )
547-
} else {
548-
// devicesObj[devices[x].device_id].getTooltip().options.className =
549-
// 'ht-tooltip-disable'
550-
devicesObj[devices[x].device_id].closeTooltip()
551-
}
552-
// else if (devices[x].name && !showTooltips) {
553-
// devicesObj[devices[x].device_id].unbindTooltip()
527+
useEffect(() => {
528+
// eslint-disable-line
529+
Object.keys(devices).forEach(x => {
530+
if (showTooltips) {
531+
// devicesObj[devices[x].device_id].getTooltip().options.className =
532+
// 'ht-tooltip-enable'
533+
devicesObj[devices[x].device_id].openTooltip()
534+
// .bindTooltip(
535+
// devices[x].name || devices[x].device_id,
536+
// {
537+
// offset: new Leaflet.point(5, 15),
538+
// direction: 'bottom',
539+
// className: 'ht-tooltip-enable'
554540
// }
541+
// )
542+
} else {
543+
// devicesObj[devices[x].device_id].getTooltip().options.className =
544+
// 'ht-tooltip-disable'
545+
devicesObj[devices[x].device_id].closeTooltip()
555546
}
556-
},
557-
[showTooltips, devices]
558-
)
547+
// else if (devices[x].name && !showTooltips) {
548+
// devicesObj[devices[x].device_id].unbindTooltip()
549+
// }
550+
})
551+
}, [showTooltips, devices])
559552

560553
return <div ref={mapRef} id="map" className="account-map-container" />
561554
}

0 commit comments

Comments
 (0)