common.min.js

var _mapBoxPublicToken="pk.eyJ1IjoiZGV2LXB0ZGkiLCJhIjoiY2tmZHBnZWM5MDlqejJ6bmVxbWJndWowNCJ9.HdpiDmcwWSzPba_OrX3Rxw",_map=null,_realtime=null,_deviceList=$("#device-list"),_vins=[],_markerPos=[],_markers=[],_markerGroup=null,_latLngBounds=[],_selectedVin=null,_selectedIndex=-1,_carIcon=null,_truckIcon=null,_vanIcon=null,_carIconSelected=null,_truckIconSelected=null,_vanIconSelected=null,_reloadInterval=null,_btnRecenterMap=$("#btn-recenter-map");function refresh(){for(let i=0;i<_markers.length;i++){const prevTooltip=_markers[i].getTooltip();prevTooltip.options.offset=[0,-64],_markers[i].unbindTooltip(),_markers[i].setIcon(_carIcon).bindTooltip(prevTooltip)}$.each(_vins,(function(i,e){$("#collapse-"+e.DeviceId).collapse("hide")})),_selectedIndex=-1,_map.fitBounds(_latLngBounds)}function getLocations(){const params={token:getUrlVars().token};ajaxCallPost("data.php",params,(function(result){if(result.result){const payload=result.payload;_markerPos=[],_markers=[],_deviceList.empty(),_latLngBounds=L.latLngBounds(),_map.removeLayer(_markerGroup),_markerGroup=L.layerGroup().addTo(_map),payload.is_expired?showError("Token expired"):(_vins=payload.vins).length>0&&(_btnRecenterMap.show(),$.each(_vins,(function(i,e){const coords=e.coords;let html='<div class="card mb-3">';html+='<div class="card-header" id="heading-'+e.vin+'">',html+='<h5 class="mb-0">',html+='<button class="btn btn-link btn-select-vin" data-toggle="collapse" data-name="'+e.name+'" data-device-id="'+e.DeviceId+'" data-index="'+i+'" data-target="#collapse-'+e.DeviceId+'" aria-expanded="true" aria-controls="collapse-'+e.DeviceId+'">'+e.name+"</button>",html+="</h5>",html+="</div>",html+='<div id="collapse-'+e.DeviceId+'" class="collapse '+(i==_selectedIndex?"show":"")+'" aria-labelledby="heading-'+e.vin+'" data-parent="#device-list">',html+='<div class="card-body">',html+='<div class="form-group">',html+='<label class="small mb-1">Share Location URL</label>',html+='<div class="mb-3">',html+='<div class="input-group">',html+='<input type="text" class="form-control form-control-sm" id="input-share-location-'+e.DeviceId+'" value="'+generateShareLocationUrl(coords.lat,coords.lon)+'" readonly />',html+='<div class="input-group-append">',html+='<button type="button" class="btn btn-outline-secondary btn-sm" onclick="copyLocation('+e.DeviceId+');">Copy</button>',html+="</div>",html+="</div>",html+="</div>",html+="</div>",html+='<table class="table table-bordered table-hover table-sm mb-0 small">',html+='<tr><td>Server Time</td><td class="text-right vin-server-time" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.server_time)+"</td></tr>",html+='<tr><td style="width: 25%;">Plate Number</td><td class="text-right font-weight-bold vin-name" data-device-id="'+e.DeviceId+'">'+e.name+"</td></tr>",html+='<tr><td style="width: 25%;">Category</td><td class="text-right vin-category" data-device-id="'+e.DeviceId+'">'+e.category+"</td></tr>",html+='<tr><td>VIN</td><td class="text-right vin-vin" data-device-id="'+e.DeviceId+'">'+e.vin+"</td></tr>",html+='<tr><td>Status</td><td class="text-right vin-status '+("offline"===e.status?"text-danger":"online"===e.status?"text-success":"text-warning")+'" data-device-id="'+e.DeviceId+'">'+e.status+"</td></tr>",html+='<tr><td>Ignition</td><td class="text-right vin-ignition" data-device-id="'+e.DeviceId+'">'+(e.ignition?"On":"Off")+"</td></tr>",html+='<tr><td>Signal Strength</td><td class="text-right vin-rssi" data-device-id="'+e.DeviceId+'">'+e.rssi/5*100+"%</td></tr>",html+='<tr><td>Battery Level</td><td class="text-right vin-battery" data-device-id="'+e.DeviceId+'">'+e.battery+"%</td></tr>",html+='<tr><td>Speed</td><td class="text-right vin-speed" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":$.number(coords.speed,2)+"KM/H")+"</td></tr>",html+='<tr><td>Odometer</td><td class="text-right vin-odometer" data-device-id="'+e.DeviceId+'">'+$.number(e.total_distance/1e3)+"KM</td></tr>",html+='<tr><td>Latitude</td><td class="text-right vin-lat" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.lat)+"</td></tr>",html+='<tr><td>Longitude</td><td class="text-right vin-lon" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.lon)+"</td></tr>",html+='<tr><td>Accuracy</td><td class="text-right vin-accuracy" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.accuracy)+"</td></tr>",html+='<tr><td>Address</td><td class="text-right vin-address" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.address)+"</td></tr>",html+='<tr><td>Last Alarm</td><td class="text-right text-danger font-weight-bold vin-alarm" data-device-id="'+e.DeviceId+'">'+e.alarm+"</td></tr>",html+='<tr><td>Geofence</td><td class="text-right vin-geofence" data-device-id="'+e.DeviceId+'">'+(null==coords?"NA":coords.geofence.length>0?"Yes":"No")+"</td></tr>",html+="</table>",html+="</div>",html+="</div>",html+="</div>",_deviceList.append(html);let activeIcon=_carIcon;"truck"==e.category?activeIcon=_truckIcon:"van"==e.category&&(activeIcon=_vanIcon);const marker=L.marker([coords.lat,coords.lon],{icon:activeIcon}).addTo(_markerGroup).bindTooltip("<strong>"+e.name+"</strong>",{offset:[0,-64],direction:"top",permanent:!0}).openTooltip();_markers.push(marker),_latLngBounds.extend([coords.lat,coords.lon])})),$(".btn-select-vin").on("click",(function(){selectVin($(this).data("index"))})),-1==_selectedIndex?_map.fitBounds(_latLngBounds):selectVin(_selectedIndex),_reloadInterval=setInterval(updatePosition,_loadInverval))}else showError(result.msg)}))}function generateShareLocationUrl(lat,lon,deviceId){const url="https://maps.google.com/?q="+lat+","+lon;if(null==deviceId)return url;$("#input-share-location-"+deviceId).val(url)}function copyLocation(deviceId){const copyText=document.getElementById("input-share-location-"+deviceId);""!==copyText.value.trim()&&(copyText.select(),copyText.setSelectionRange(0,99999),document.execCommand("copy"),showSuccess("Location copied to clipboard"))}function selectVin(index){for(let i=0;i<_markers.length;i++){const prevTooltip=_markers[i].getTooltip();prevTooltip.options.offset=[0,-64],_markers[i].unbindTooltip(),_markers[i].setIcon(_carIcon).bindTooltip(prevTooltip)}const category=_vins[_selectedIndex=index].category;let selectedIcon=_carIconSelected;"truck"==category?selectedIcon=_truckIconSelected:"van"==category&&(selectedIcon=_vanIconSelected);const marker=_markers[index],tooltip=marker.getTooltip();tooltip.options.offset=[0,-64],marker.unbindTooltip(),marker.setIcon(selectedIcon).bindTooltip(tooltip),_map.setView(marker.getLatLng())}function recenterCar(index){const marker=_markers[index];_map.setView(marker.getLatLng())}function updatePosition(){const params={token:getUrlVars().token};ajaxCallPost("data.php",params,(function(result){if(result.result){const payload=result.payload;_latLngBounds=L.latLngBounds(),payload.is_expired?showError("Token expired"):(_vins=payload.vins).length>0&&($.each(_vins,(function(i,e){const coords=e.coords;if(null!=coords){$('.vin-server-time[data-device-id="'+e.DeviceId+'"]').html(coords.server_time),$('.vin-name[data-device-id="'+e.DeviceId+'"]').html(e.name),$('.vin-category[data-device-id="'+e.DeviceId+'"]').html(e.category);let statusClass="text-success";"offline"==e.status&&(statusClass="text-danger"),$('.vin-status[data-device-id="'+e.DeviceId+'"]').removeClass("text-danger").removeClass("text-success"),$('.vin-status[data-device-id="'+e.DeviceId+'"]').html(e.status).addClass(statusClass),$('.vin-vin[data-device-id="'+e.DeviceId+'"]').html(e.vin),$('.vin-ignition[data-device-id="'+e.DeviceId+'"]').html(e.ignition?"On":"Off"),$('.vin-rssi[data-device-id="'+e.DeviceId+'"]').html(e.rssi/5*100),$('.vin-battery[data-device-id="'+e.DeviceId+'"]').html(e.battery+"%"),$('.vin-speed[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":$.number(coords.speed,2)+"KM/H"),$('.vin-odometer[data-device-id="'+e.DeviceId+'"]').html($.number(e.total_distance/1e3)+"KM"),$('.vin-lat[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":coords.lat),$('.vin-lon[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":coords.lon),$('.vin-accuracy[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":coords.accuracy),$('.vin-address[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":coords.address),$('.vin-alarm[data-device-id="'+e.DeviceId+'"]').html(e.alarm),$('.vin-geofence[data-device-id="'+e.DeviceId+'"]').html(null==coords?"NA":coords.geofence.length>0?"Yes":"No");const index=_.findIndex(_vins,{vin:e.vin});_markers[index].setLatLng([coords.lat,coords.lon]),_latLngBounds.extend([coords.lat,coords.lon]),generateShareLocationUrl(coords.lat,coords.lon,e.DeviceId)}})),-1==_selectedIndex||selectVin(_selectedIndex))}else showError(result.message)}))}function getUrlVars(){for(var vars=[],hash,hashes=window.location.href.slice(window.location.href.indexOf("?")+1).split("&"),i=0;i<hashes.length;i++)hash=hashes[i].split("="),vars.push(hash[0]),vars[hash[0]]=hash[1];return vars}function ajaxCallPost(url,data,callback){$.ajax({url:url,data:data,type:"post",dataType:"json",success:function(result){callback(result)}})}function showError(message){$.notifyClose(),$.notify({message:message},{type:"danger",delay:0,newest_on_top:!1,placement:{from:"top",align:"right"},animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},z_index:9999})}function showSuccess(message){$.notifyClose(),$.notify({message:message},{type:"success",delay:3e3,newest_on_top:!1,placement:{from:"top",align:"right"},animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},z_index:9999})}$((function(){_carIcon=L.icon({iconUrl:"images/car_off.png",iconSize:[64,64],iconAnchor:[32,64]}),_carIconSelected=L.icon({iconUrl:"images/car_on.png",iconSize:[64,64],iconAnchor:[32,64]}),_truckIcon=L.icon({iconUrl:"images/truck_off.png",iconSize:[64,64],iconAnchor:[32,64]}),_truckIconSelected=L.icon({iconUrl:"images/truck_on.png",iconSize:[64,64],iconAnchor:[32,64]}),_vanIcon=L.icon({iconUrl:"images/van_off.png",iconSize:[64,64],iconAnchor:[32,64]}),_vanIconSelected=L.icon({iconUrl:"images/van_on.png",iconSize:[64,64],iconAnchor:[32,64]}),_map=L.map("map").setView([0,0],13),L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",{attribution:'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',maxZoom:18,id:"mapbox/streets-v11",tileSize:512,zoomOffset:-1,accessToken:_mapBoxPublicToken}).addTo(_map),_markerGroup=L.layerGroup().addTo(_map),getLocations()}));