Rasika Perera 7 years ago
parent 5d27e40e76
commit 389173f505

@ -64,6 +64,12 @@
<div id="" style="height: 63vh;"> <div id="" style="height: 63vh;">
<!-- Sidebar --> <!-- Sidebar -->
<div id="map"></div> <div id="map"></div>
{{#if geoServicesEnabled}}
<div id="ws-alerts">
<i id="ws-alert-stream" class="fw fw-circle text-muted"></i> Alerts Stream&nbsp;
<i id="ws-spatial-stream" class="fw fw-circle text-muted"></i> Spatial Stream
</div>
{{/if}}
</div> </div>
<div id="predictionResults" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0" <div id="predictionResults" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0"
@ -688,11 +694,11 @@
var geoLocationLink = $(".initGeoLocationLink"); var geoLocationLink = $(".initGeoLocationLink");
if (geoLocationLink) { if (geoLocationLink) {
geoLocationLink.on('click', function () { geoLocationLink.on('click', function () {
initializeGeoLocation() initializeGeoLocation({{geoServicesEnabled}});
}); });
{{#if showGeoFencingTools}} geoPublicUri = $("#geo-charts").data("geo-public-uri");
{{#if geoServicesEnabled}}
var geoToolsMenu = $('#location-action-bar'); var geoToolsMenu = $('#location-action-bar');
geoPublicUri = $("#geo-charts").data("geo-public-uri");
var realtTime = createGeoToolListItem('javascript:enableRealTime()', var realtTime = createGeoToolListItem('javascript:enableRealTime()',
'Return to Real Time View', 'fw fw-undo', geoToolsMenu); 'Return to Real Time View', 'fw fw-undo', geoToolsMenu);
realtTime.css("display", "none"); realtTime.css("display", "none");

@ -52,6 +52,6 @@ function onRequest(context) {
} else { } else {
viewModel.lastLocation = stringify({}); viewModel.lastLocation = stringify({});
} }
viewModel.showGeoFencingTools = devicemgtProps.serverConfig.geoLocationConfiguration.isEnabled; viewModel.geoServicesEnabled = devicemgtProps.serverConfig.geoLocationConfiguration.isEnabled;
return viewModel; return viewModel;
} }

@ -40,38 +40,11 @@ function initialLoad() {
setTimeout(initialLoad, 500); // give everything some time to render setTimeout(initialLoad, 500); // give everything some time to render
} else { } else {
initializeMap(); initializeMap();
// getTileServers();
// loadWms();
processAfterInitializationMap(); processAfterInitializationMap();
//Access gps and make zoom to server location as map center
//navigator.geolocation.getCurrentPosition(success, error);
$("#loading").hide(); $("#loading").hide();
} }
} }
//function success(position) {
// var browserLatitude = position.coords.latitude;
// var browserLongitude = position.coords.longitude;
// map.setView([browserLatitude, browserLongitude]);
// map.setZoom(14);
// $.UIkit.notify({
// message: "Map view set to browser's location",
// status: 'info',
// timeout: ApplicationOptions.constance.NOTIFY_INFO_TIMEOUT,
// pos: 'top-center'
// });
//}
//
//function error() {
// $.UIkit.notify({
// message: "Unable to find browser location!",
// status: 'warning',
// timeout: ApplicationOptions.constance.NOTIFY_WARNING_TIMEOUT,
// pos: 'top-center'
// });
//}
function initializeMap() { function initializeMap() {
if (typeof(map) !== 'undefined') { if (typeof(map) !== 'undefined') {
map.remove(); map.remove();
@ -83,7 +56,7 @@ function initializeMap() {
map = L.map("map", { map = L.map("map", {
zoom: 14, zoom: 14,
center: [6.927078, 79.861243], center: [6.927078, 79.861243],
layers: [defaultOSM, defaultTFL], layers: [defaultOSM],
zoomControl: true, zoomControl: true,
attributionControl: false, attributionControl: false,
maxZoom: 20, maxZoom: 20,
@ -147,28 +120,20 @@ function processAfterInitializationMap() {
div.innerHTML = "<a href='#' onclick='$(\"#attributionModal\").modal(\"show\"); return false;'>Attribution</a>"; div.innerHTML = "<a href='#' onclick='$(\"#attributionModal\").modal(\"show\"); return false;'>Attribution</a>";
return div; return div;
}; };
// map.addControl(attributionControl);
map.addControl(L.control.fullscreen({position: 'bottomright'})); map.addControl(L.control.fullscreen({position: 'bottomright'}));
geoAlertsBar = L.control.geoAlerts({position: 'topright'}); geoAlertsBar = L.control.geoAlerts({position: 'topright'});
map.addControl(geoAlertsBar); map.addControl(geoAlertsBar);
//L.control.fullscreen({
// position: 'bottomright'
//}).addTo(map);
// L.control.zoom({
// position: "bottomright"
// }).addTo(map);
groupedOverlays = { groupedOverlays = {
"Web Map Service layers": {} "Web Map Service layers": {}
}; };
layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, { layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, {
collapsed: true collapsed: true,
position: 'bottomleft'
}).addTo(map); }).addTo(map);
//L.control.layers(baseLayers).addTo(map);
//map.addLayer(defaultTFL);
} }
/* Highlight search box text on click */ /* Highlight search box text on click */
@ -313,30 +278,34 @@ var getProviderData = function (timeFrom, timeTo) {
function (data) { function (data) {
tableData = JSON.parse(data); tableData = JSON.parse(data);
if (tableData.length === 0) { if (tableData.length === 0) {
var geoCharts = $("#geo-charts"); showCurrentLocation(tableData);
var location = geoCharts.data("device-location");
location.heading = 0;
location.id = deviceId;
location.values = {};
location.values.id = deviceId;
location.values.information = "Last seen " + timeSince(new Date(location.updatedTime));
location.values.notify = false;
location.values.speed = 0;
location.values.state = "NORMAL";
location.values.longitude = location.longitude;
location.values.latitude = location.latitude;
location.timestamp = location.updatedTime;
location.values.timeStamp = location.updatedTime;
location.values.type = deviceType;
location._version = "1.0.0";
tableData.push(location);
} }
}, function (message) { }, function (message) {
console.log(message); showCurrentLocation(tableData);
}); });
return tableData; return tableData;
}; };
function showCurrentLocation(tableData){
var geoCharts = $("#geo-charts");
var location = geoCharts.data("device-location");
location.heading = 0;
location.id = deviceId;
location.values = {};
location.values.id = deviceId;
location.values.information = "Last seen " + timeSince(new Date(location.updatedTime));
location.values.notify = false;
location.values.speed = 0;
location.values.state = "NORMAL";
location.values.longitude = location.longitude;
location.values.latitude = location.latitude;
location.timestamp = location.updatedTime;
location.values.timeStamp = location.updatedTime;
location.values.type = deviceType;
location._version = "1.0.0";
tableData.push(location);
}
function timeSince(date) { function timeSince(date) {
if (!date) { if (!date) {
@ -401,10 +370,6 @@ function enableRealTime() {
function InitSpatialObject() { function InitSpatialObject() {
var spatialObject = drawSpatialObject(); var spatialObject = drawSpatialObject();
setTimeout(function () {
map.setView(spatialObject.marker.getLatLng(), spatialObject.marker.zoomLevel, {animate: true});
}, 1000
);
map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel})); map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
} }
@ -455,13 +420,17 @@ function drawSpatialObject() {
return true; return true;
} }
map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
var alertsFromDate = new Date(); var alertsFromDate = new Date();
alertsFromDate.setHours(alertsFromDate.getHours() - 24); //last 24 hours alertsFromDate.setHours(alertsFromDate.getHours() - 24); //last 24 hours
getAlertsHistory(deviceType, deviceId, alertsFromDate.valueOf(), toDate.valueOf()); getAlertsHistory(deviceType, deviceId, alertsFromDate.valueOf(), toDate.valueOf());
spatialObject.marker.openPopup();
spatialObject.drawPath(); setTimeout(function () {
map.invalidateSize();
map.setView(spatialObject.marker.getLatLng(), spatialObject.marker.zoomLevel, {animate: true});
spatialObject.marker.openPopup();
spatialObject.drawPath();
}, 500);
if (speedGraphControl) { if (speedGraphControl) {
setTimeout(function () { setTimeout(function () {
createChart(); createChart();

@ -65,17 +65,7 @@ var defaultOSM = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
maxZoom: 19 maxZoom: 19
}); });
//var defaultTFL = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
// maxZoom: 19,
// subdomains:['mt0','mt1','mt2','mt3']
//});
var defaultTFL = L.tileLayer("", {
maxZoom: 19,
attribution: '| London Traffic and London Buses data Powered by TfL Open Data'
});
var baseLayers = { var baseLayers = {
//"Google Maps": defaultTFL,
"Open Street Maps": defaultOSM "Open Street Maps": defaultOSM
}; };
@ -564,7 +554,6 @@ function getAlertsHistory(deviceType, deviceId, timeFrom, timeTo) {
} }
}); });
}, function (message) { }, function (message) {
console.log(message);
}); });
} }

@ -20,7 +20,7 @@ var debugObject; // assign object and debug from browser console, this is for de
var showPathFlag = false; // Flag to hold the status of draw objects path var showPathFlag = false; // Flag to hold the status of draw objects path
var currentSpatialObjects = {}; var currentSpatialObjects = {};
var selectedSpatialObject; // This is set when user search for an object from the search box var selectedSpatialObject; // This is set when user search for an object from the search box
var websocket; var spatialWebsocket;
var onAlertWebsocket; var onAlertWebsocket;
var onTrafficStreamWebsocket; var onTrafficStreamWebsocket;
var currentPredictions = {}; var currentPredictions = {};
@ -506,36 +506,11 @@ function LocalStorageArray(id) {
}; };
} }
var webSocketOnTrafficStreamOpen = function () { var initLoading = true;
onTrafficStreamWebsocket.set_opened();
noty({text: 'You Are Connected to Traffic Stream !!', type: 'success'});
};
var webSocketOnTrafficStreamMessage = function processMessage(message) {
var json = $.parseJSON(message.data);
if (json.messageType == "Traffic") {
processTrafficMessage(json);
} else {
console.log("Message type not supported.");
}
};
var webSocketOnTrafficStreamClose = function (e) {
if (onTrafficStreamWebsocket.get_opened()) {
noty({text: 'Connection lost with Traffic Stream Stream !!', type: 'error'});
}
waitForSocketConnection(onTrafficStreamWebsocket, initializeOnTrafficStreamWebSocket);
};
var webSocketOnTrafficStreamError = function (e) {
if (!onTrafficStreamWebsocket.get_opened()) return;
noty({text: 'Something went wrong when trying to connect to <b>' + trafficStreamWebSocketURL + '<b/>', type: 'error'});
};
var webSocketOnAlertOpen = function () { var webSocketOnAlertOpen = function () {
onAlertWebsocket.set_opened(); onAlertWebsocket.set_opened();
noty({text: 'You Are Connected to Alert Stream !!', type: 'success'}); $('#ws-alert-stream').removeClass('text-muted text-danger text-success').addClass('text-success');
}; };
var webSocketOnAlertMessage = function processMessage(message) { var webSocketOnAlertMessage = function processMessage(message) {
@ -551,7 +526,7 @@ var webSocketOnAlertMessage = function processMessage(message) {
var webSocketOnAlertClose = function (e) { var webSocketOnAlertClose = function (e) {
if (onAlertWebsocket.get_opened()) { if (onAlertWebsocket.get_opened()) {
noty({text: 'Connection lost with Alert Stream !!', type: 'error'}); $('#ws-alert-stream').removeClass('text-muted text-danger text-success').addClass('text-danger');
} }
waitForSocketConnection(onAlertWebsocket, initializeOnAlertWebSocket); waitForSocketConnection(onAlertWebsocket, initializeOnAlertWebSocket);
}; };
@ -561,18 +536,15 @@ var webSocketOnAlertError = function (e) {
noty({text: 'Something went wrong when trying to connect to <b>' + alertWebSocketURL + '<b/>', type: 'error'}); noty({text: 'Something went wrong when trying to connect to <b>' + alertWebSocketURL + '<b/>', type: 'error'});
}; };
var initLoading = true; var webSocketSpatialOnOpen = function () {
var webSocketOnOpen = function () { spatialWebsocket.set_opened();
websocket.set_opened();
if (initLoading) { if (initLoading) {
initialLoad();
InitSpatialObject();
initLoading = false; initLoading = false;
} }
noty({text: 'You Are Connected to Spatial Stream !!', type: 'success'}); $('#ws-spatial-stream').removeClass('text-muted text-danger text-success').addClass('text-success');
}; };
var webSocketOnMessage = function (message) { var webSocketSpatialOnMessage = function (message) {
if (!isBatchModeOn) { if (!isBatchModeOn) {
var json = $.parseJSON(message.data); var json = $.parseJSON(message.data);
if (json.messageType == "Point") { if (json.messageType == "Point") {
@ -585,15 +557,15 @@ var webSocketOnMessage = function (message) {
} }
}; };
var webSocketOnClose = function (e) { var webSocketSpatialOnClose = function (e) {
if (websocket.get_opened()) { if (spatialWebsocket.get_opened()) {
noty({text: 'Connection lost with server!!', type: 'error'}); $('#ws-spatial-stream').removeClass('text-muted text-danger text-success').addClass('text-danger');
} }
waitForSocketConnection(websocket, initializeWebSocket); waitForSocketConnection(spatialWebsocket, initializeSpatialStreamWebSocket);
}; };
var webSocketOnError = function (err) { var webSocketSpatialOnError = function (err) {
if (!websocket.get_opened()) return; if (!spatialWebsocket.get_opened()) return;
noty({text: 'Something went wrong when trying to connect to <b>' + webSocketURL + '<b/>', type: 'error'}); noty({text: 'Something went wrong when trying to connect to <b>' + webSocketURL + '<b/>', type: 'error'});
}; };
@ -622,13 +594,13 @@ function waitForSocketConnection(socket, callback) {
} }
function initializeWebSocket() { function initializeSpatialStreamWebSocket() {
if(websocket) websocket.close(); if(spatialWebsocket) spatialWebsocket.close();
websocket = new WebSocket(webSocketURL); spatialWebsocket = new WebSocket(webSocketURL);
websocket.onopen = webSocketOnOpen; spatialWebsocket.onopen = webSocketSpatialOnOpen;
websocket.onmessage = webSocketOnMessage; spatialWebsocket.onmessage = webSocketSpatialOnMessage;
websocket.onclose = webSocketOnClose; spatialWebsocket.onclose = webSocketSpatialOnClose;
websocket.onerror = webSocketOnError; spatialWebsocket.onerror = webSocketSpatialOnError;
} }
function initializeOnAlertWebSocket() { function initializeOnAlertWebSocket() {
@ -640,7 +612,7 @@ function initializeOnAlertWebSocket() {
onAlertWebsocket.onopen = webSocketOnAlertOpen; onAlertWebsocket.onopen = webSocketOnAlertOpen;
} }
function initializeGeoLocation() { function initializeGeoLocation(geoFencingEnabled) {
var deviceDetails = $(".device-id"); var deviceDetails = $(".device-id");
deviceId = deviceDetails.data("deviceid"); deviceId = deviceDetails.data("deviceid");
deviceType = deviceDetails.data("type"); deviceType = deviceDetails.data("type");
@ -657,11 +629,17 @@ function initializeGeoLocation() {
alertWebSocketURL = wsEndPoint + userDomain + "/org.wso2.geo.AlertsNotifications/1.0.0?" alertWebSocketURL = wsEndPoint + userDomain + "/org.wso2.geo.AlertsNotifications/1.0.0?"
+ "deviceId=" + deviceId + "&deviceType=" + deviceType + "&websocketToken=" + wsToken; + "deviceId=" + deviceId + "&deviceType=" + deviceType + "&websocketToken=" + wsToken;
$("#proximity_alert").hide(); $("#proximity_alert").hide();
initializeWebSocket();
initializeOnAlertWebSocket(); initialLoad();
window.onbeforeunload = function () { InitSpatialObject();
websocket.close();
onAlertWebsocket.close(); if (geoFencingEnabled) {
initializeSpatialStreamWebSocket();
initializeOnAlertWebSocket();
window.onbeforeunload = function () {
spatialWebsocket.close();
onAlertWebsocket.close();
}
} }
} else { } else {
noty({text: 'Invalid Access! No device information provided to track!', type: 'error'}); noty({text: 'Invalid Access! No device information provided to track!', type: 'error'});

Loading…
Cancel
Save