${order.orderId}
`\n })\n } else {\n content += `${this.$t('drivers.noAssignedOrder')}
`\n }\n orderElm.innerHTML = content\n orders.map((order: Order) => {\n const item = document.getElementById(order.orderId)\n if (item) {\n item.addEventListener('click', function () {\n router.push({ path: '/orders/all', query: { id: order.orderId } })\n })\n }\n })\n })\n }\n this.$store.dispatch(`drivers/${DriverActions.FETCH_SINGLE_DRIVER}`, driverLocation.id).then((driver: Driver) => {\n if (nameElm) {\n nameElm.innerText = `${driver.driverInfo.userName} - ${driver.driverInfo.firstName} ${driver.driverInfo.lastName}`\n }\n if (vehicleElm) {\n vehicleElm.innerText = `${driver.vehicleId.name}`\n }\n if (modelElm) {\n modelElm.innerText = `${driver.vehicleId.model}`\n }\n if (phoneElm) {\n phoneElm.innerText = `${driver.driverInfo.userPhone}`\n }\n })\n }, 0)\n })\n driverMarkers.push(marker)\n },\n */\n getMarker (driverLocation: any) {\n if (this.markers[driverLocation.id]) {\n const latestIcon = getMarkerIconByStatus(driverLocation.driver_status.name, driverLocation.vehicle_id.vehicle_type.id)\n this.markers[driverLocation.id].setIcon(latestIcon)\n return this.markers[driverLocation.id]\n }\n this.createMarker(driverLocation)\n return this.markers[driverLocation.id]\n },\n createMarker (driverLocation: any): void {\n if (!driverLocation.last_location.latitude && !driverLocation.last_location.longitude) return\n let isBusy = false\n if (driverLocation.driver_status) {\n isBusy = ['occupied_outward', 'occupied_inward', 'occupied_inward_assigned'].includes(driverLocation.driver_status.name)\n }\n const position = new wdw.google.maps.LatLng(driverLocation.last_location.latitude, driverLocation.last_location.longitude)\n const vehicleType = driverLocation.vehicle_id.vehicle_type.id\n const statusName = driverLocation.driver_status.name\n const marker = new wdw.google.maps.Marker({\n position,\n map: this.map,\n icon: getMarkerIconByStatus(statusName, vehicleType),\n label: driverLocation.driver_orders_count ? {\n text: `${driverLocation.driver_orders_count} ${driverLocation.driver_orders_count > 1 ? 'orders' : 'order'}`,\n className: 'order-map-drivers-order-count',\n color: '#fff',\n fontWeight: 'semibold',\n fontSize: '12px'\n } : null\n })\n const infowindow = new wdw.google.maps.InfoWindow({\n content: this.getContentData(driverLocation.id)\n })\n marker.addListener('click', (event: any) => {\n if (this.activeInfoWindow) {\n this.activeInfoWindow.close()\n }\n this.activeInfoWindow = infowindow\n infowindow.open({\n anchor: marker,\n map: this.map,\n shouldFocus: false\n })\n this.selectedDriverId = this.selectedDriverId === driverLocation.id ? null : driverLocation.id\n setTimeout(() => {\n const orderElm = document.getElementById(`order-${driverLocation.id}`)\n const nameElm = document.getElementById(`name-${driverLocation.id}`)\n const vehicleElm = document.getElementById(`vehicle-${driverLocation.id}`)\n const modelElm = document.getElementById(`model-${driverLocation.id}`)\n const phoneElm = document.getElementById(`phone-${driverLocation.id}`)\n if (orderElm) {\n let content: any = ''\n this.$store.dispatch(`drivers/${DriverActions.FETCH_CURRENT_ORDER}`, { driverId: driverLocation.id }).then((orders: Order[]) => {\n if (orders.length) {\n orders.map((order: Order) => {\n content += `${order.orderId}
`\n })\n } else {\n content += `${this.$t('drivers.noAssignedOrder')}
`\n }\n orderElm.innerHTML = content\n orders.map((order: Order) => {\n const item = document.getElementById(order.orderId)\n if (item) {\n item.addEventListener('click', function () {\n router.push({ path: '/orders/all', query: { id: order.orderId } })\n })\n }\n })\n })\n }\n this.$store.dispatch(`drivers/${DriverActions.FETCH_SINGLE_DRIVER}`, driverLocation.id).then((driver: Driver) => {\n if (nameElm) {\n nameElm.innerText = `${driver.driverInfo.userName} - ${driver.driverInfo.firstName} ${driver.driverInfo.lastName}`\n }\n if (vehicleElm) {\n vehicleElm.innerText = `${driver.vehicleId.name}`\n }\n if (modelElm) {\n modelElm.innerText = `${driver.vehicleId.model}`\n }\n if (phoneElm) {\n phoneElm.innerText = `${driver.driverInfo.userPhone}`\n }\n })\n }, 0)\n })\n const lastLocationTime = this.driverMarkers[driverLocation.id]\n ? moment(this.driverMarkers[driverLocation.id].lastLocationTime) : moment()\n this.driverMarkers = {\n ...this.driverMarkers,\n [driverLocation.id]: {\n data: driverLocation,\n lastLocationTime,\n hasSpecialIcon: false,\n icon: getMarkerIconByStatus(statusName, vehicleType),\n warnIcon: markerIcons.warningIcon\n }\n }\n this.markers[driverLocation.id] = marker\n this.routePaths[driverLocation.id] = [] // empty route\n },\n updateMarkers (driverLocations: any) {\n driverLocations.forEach((driver:any) => {\n const lat = driver.last_location.latitude\n const lng = driver.last_location.longitude\n // const tripItem = this.testTrip.shift()\n // const { lat, lng } = tripItem as any\n if (this.driverMarkers[driver.id]) {\n // const marker = this.driverMarkers[driver.id].marker\n const marker = this.getMarker(driver)\n if (lat === 0 && lng === 0) {\n // remove existing on the map\n toRaw(marker).setMap(null)\n delete this.driverMarkers[driver.id]\n delete this.routePaths[driver.id]\n delete this.markers[driver.id]\n } else {\n const oldData = this.driverMarkers[driver.id].data\n if (oldData.driver_orders_count !== driver.driver_orders_count) {\n // Update label\n this.getMarker(driver).setLabel(driver.driver_orders_count ? {\n text: `${driver.driver_orders_count} Items`,\n className: 'order-map-drivers-order-count',\n color: '#fff',\n fontWeight: 'semibold',\n fontSize: '12px'\n } : '')\n }\n this.driverMarkers[driver.id].data = driver\n\n // if driver waiting at the same location for 3 mins add special icon\n const hasWarnIcon = oldData.hasSpecialIcon\n if (lat === oldData.last_location.latitude && lng === oldData.last_location.longitude) {\n const lastLocation = this.driverMarkers[driver.id].lastLocationTime\n const diff = moment().diff(lastLocation, 'minutes')\n if (diff >= 3 && !hasWarnIcon) {\n // add special icon\n this.driverMarkers[driver.id].hasSpecialIcon = true\n // this.getMarker(driver).setIcon(this.driverMarkers[driver.id].warnIcon)\n this.getMarker(driver).setLabel({\n text: `${diff} mins`,\n className: 'order-map-driver-waiting-time',\n color: '#fff',\n fontWeight: 'semibold',\n fontSize: '12px'\n })\n }\n } else {\n // add normal icon\n // this.getMarker(driver).setIcon(this.driverMarkers[driver.id].icon)\n this.getMarker(driver).setLabel(null)\n this.driverMarkers[driver.id].hasSpecialIcon = false\n this.driverMarkers[driver.id].lastLocationTime = moment()\n }\n // animate existing\n const newPosition = new wdw.google.maps.LatLng(lat, lng)\n this.animateMarker(marker, newPosition, driver.id)\n }\n } else if (lat !== 0 && lng !== 0) {\n this.createMarker(driver)\n }\n })\n // marker cluster\n if (markerCluster) {\n markerCluster.setMap(null)\n }\n markerCluster = new MarkerClusterer({\n map: toRaw(this.map),\n markers: Object.keys(this.markers).map((id: any) => (toRaw(this.markers[id])))\n })\n },\n animateMarker (marker:any, newPosition:any, driverId:any) {\n const animationDuration = 15000\n const startPosition = marker.getPosition()\n let startTime = 0\n\n const animateStep = (timestamp:any) => {\n if (!startTime) startTime = timestamp\n const elapsedTime = timestamp - startTime\n\n if (elapsedTime >= animationDuration) {\n marker.setPosition(newPosition)\n return\n }\n\n const fraction = elapsedTime / animationDuration\n const interpolatedPosition = wdw.google.maps.geometry.spherical.interpolate(\n startPosition,\n newPosition,\n fraction\n )\n\n marker.setPosition(interpolatedPosition)\n // this.drawRoute(driverId, startPosition, interpolatedPosition)\n this.updateRoutePath(driverId, interpolatedPosition)\n requestAnimationFrame(animateStep)\n }\n\n requestAnimationFrame(animateStep)\n },\n /*\n drawRoute (driverId:any, startPosition:any, endPosition:any) {\n if (!this.routePaths[driverId]) {\n this.routePaths[driverId] = []\n }\n this.routePaths[driverId].push(endPosition)\n\n const route = new wdw.google.maps.Polyline({\n path: this.routePaths[driverId],\n geodesic: true,\n strokeColor: '#3d3c3c',\n strokeOpacity: 1.0,\n strokeWeight: 2\n })\n\n route.setMap(this.map)\n },\n */\n updateRoutePath (driverId:any, position:any) {\n if (!this.routePaths[driverId]) {\n this.routePaths[driverId] = []\n }\n this.routePaths[driverId].push(position)\n\n if (this.selectedDriverId === driverId) {\n this.updateSelectedRoute(driverId, driverId)\n }\n },\n updateSelectedRoute (newDriverId:any, oldDriverId:any) {\n if (oldDriverId && this.routePaths[oldDriverId] && (!newDriverId || newDriverId !== oldDriverId)) {\n const oldPolyline = this.polylines[oldDriverId]\n toRaw(oldPolyline).setMap(null)\n delete this.polylines[oldDriverId]\n }\n\n if (newDriverId && this.routePaths[newDriverId]) {\n const poly = this.polylines[newDriverId]\n if (!poly) {\n const newPolyline = new wdw.google.maps.Polyline({\n path: this.routePaths[newDriverId],\n strokeColor: '#3d3c3c',\n strokeOpacity: 1.0,\n strokeWeight: 2\n })\n newPolyline.setMap(this.map)\n this.polylines = {\n ...this.polylines,\n [newDriverId]: newPolyline\n }\n } else {\n poly.setPath(this.routePaths[newDriverId])\n }\n }\n },\n addDarkStoreMarker (lat: number, lng: number): any {\n const position = new wdw.google.maps.LatLng((lat || 0), (lng || 0))\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n const markerImg = require('../../../../assets/markers/darkstore-dark-marker.png')\n const image = {\n url: markerImg,\n size: new wdw.google.maps.Size(55, 70),\n origin: new wdw.google.maps.Point(0, 0),\n anchor: new wdw.google.maps.Point(22, 67)\n }\n const marker = new wdw.google.maps.Marker({\n position,\n map: this.map,\n icon: image\n })\n // marker.setLabel({ text: 'DS', color: 'white' })\n return marker\n },\n getContentData (driverId: number): any {\n return `| ${this.$t('drivers.driver')} | \n\n |
|---|---|
| ${this.$t('drivers.vehicleType')} | \n\n |
| ${this.$t('drivers.vehicleModel')} | \n\n |
| ${this.$t('drivers.orders')} | \n\n |
| ${this.$t('drivers.phone')} | \n\n |