From 76f4457462d252e35589cfa3fde3cda0825923bc Mon Sep 17 00:00:00 2001 From: Rasika Perera Date: Mon, 5 Jun 2017 10:08:34 +0530 Subject: [PATCH] Changes to geo dashboard ui in /devicemgt --- .../cdmf.unit.geo-dashboard/geo-dashboard.hbs | 68 +++++----- .../cdmf.unit.geo-dashboard/public/js/app.js | 13 +- .../public/js/application_options.js | 2 +- .../public/js/geo_remote.js | 124 ++++++++++-------- .../public/js/websocket.js | 2 +- 5 files changed, 113 insertions(+), 96 deletions(-) diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs index 5422d8e421..434cff50f0 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs @@ -40,25 +40,25 @@ {{/zone}} + data-device-location="{{lastLocation}}">
{{#unless @unit.params.hideSearch}} -
-
    -
  • - -
    • -
-
+
+
    +
  • + +
    • +
+
{{/unless}}
@@ -138,7 +138,7 @@ data-device-location="{{lastLocation}}">
@@ -187,8 +187,8 @@ data-device-location="{{lastLocation}}">

The data provided on this site is for informational and planning purposes only.

Absolutely no accuracy or completeness guarantee is implied or intended. All information on - this map is subject to such variations and corrections as might result from a complete title - search and/or accurate field survey.

+ this map is subject to such variations and corrections as might result from a complete title + search and/or accurate field survey.

@@ -237,7 +237,7 @@ data-device-location="{{lastLocation}}">

Theater data courtesy of NYC - Department of Information & Telecommunications (DoITT)

+ Department of Information & Telecommunications (DoITT)

Museum data courtesy of

A string of the following form:

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'

{s} means one of the available subdomains (used - sequentially to help with browser parallel requests per domain limitation; subdomain - values are specified in options; a, a, b or c by default, can - be omitted), {z} — zoom level, {x} - and {y} — tile coordinates.

+ be omitted), {z} — zoom level, {x} + and {y} — tile coordinates.

You can use custom keys in the template, which will be evaluated from TileLayer options, like this:

@@ -704,8 +704,12 @@ data-device-location="{{lastLocation}}"> }); {{#if showGeoFencingTools}} var locationItems = geoLocationLink.closest('li'); - var geoToolsMenu = $("
    ", {class: 'collapse list-group geo-tools'}).appendTo(locationItems); + var geoToolsMenu = $("
      ", {class: 'collapse list-group geo-tools active'}).appendTo(locationItems); geoPublicUri = $("#geo-charts").data("geo-public-uri"); + var realtTime = createGeoToolListItem('javascript:enableRealTime()', + 'Return to Real Time View', 'fw fw-undo', geoToolsMenu); + realtTime.css("display", "none"); + realtTime.attr("id", "realTimeShow"); createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/speed_alert.html', 'Set Speed Alert', 'glyphicon glyphicon-dashboard', geoToolsMenu); createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/stationery_alert.html', diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js index 3577ee5662..ee61bd3822 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js @@ -297,7 +297,8 @@ function focusOnSpatialObject(objectId) { return true; } - map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly + map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); + // TODO: check the map._layersMaxZoom and set the zoom level accordingly $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject); spatialObject.marker.openPopup(); @@ -305,7 +306,7 @@ function focusOnSpatialObject(objectId) { $('#objectInfo').animate({width: 'toggle'}, 100); toggled = true; } - getAlertsHistory(objectId); + getAlertsHistory(deviceType, deviceId, new Date($('#timeFrom').val()).getTime(), new Date($('#timeTo').val()).getTime()); spatialObject.drawPath(); setTimeout(function () { createChart(); @@ -470,7 +471,7 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) { clearMap(); var fromDate = new Date(timeFrom); var toDate = new Date(timeTo); - var tableData = getProviderData(fromDate.valueOf() / 1000, toDate.valueOf() / 1000); + var tableData = getProviderData(fromDate.valueOf(), toDate.valueOf()); for (var i = 0; i < tableData.length; i++) { var data = tableData[i]; var geoMessage = { @@ -507,7 +508,8 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) { return true; } - map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly + map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); + // TODO: check the map._layersMaxZoom and set the zoom level accordingly $('#objectInfo').find('#objectInfoId').html(selectedSpatialObject); spatialObject.marker.openPopup(); @@ -515,7 +517,7 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) { $('#objectInfo').animate({width: 'toggle'}, 100); toggled = true; } - getAlertsHistory(objectId); + getAlertsHistory(deviceType, deviceId, new Date($('#timeFrom').val()).getTime(), new Date($('#timeTo').val()).getTime()); spatialObject.drawPath(); setTimeout(function () { createChart(); @@ -539,4 +541,5 @@ function createGeoToolListItem(link, text, icon, menuRoot) { anchor.attr('data-toggle', 'modal'); anchor.attr('data-target', '#commonModal'); $("", {class: icon}).prependTo(anchor); + return listItem; } \ No newline at end of file diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/application_options.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/application_options.js index 5f6fcf6b04..cd1915e67a 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/application_options.js +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/application_options.js @@ -29,7 +29,7 @@ var ApplicationOptions = { } }, constance:{ - CEP_WEB_SOCKET_OUTPUT_ADAPTOR_NAME: 'org.wso2.geo.FusedSpatialEvent', + CEP_WEB_SOCKET_OUTPUT_ADAPTOR_NAME: 'iot.per.device.stream.geo.FusedSpatialEvent', CEP_ON_ALERT_WEB_SOCKET_OUTPUT_ADAPTOR_NAME: 'org.wso2.geo.AlertsNotifications', CEP_Traffic_STREAM_WEB_SOCKET_OUTPUT_ADAPTOR_NAME: 'DefaultWebsocketOutputAdaptorOnTrafficStream', CEP_WEB_SOCKET_OUTPUT_ADAPTOR_WEBAPP_NAME: 'secured-websocket', diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js index 77485e0ca3..2ee6393b53 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js @@ -81,9 +81,9 @@ var baseLayers = { function getTileServers() { /*var backendApiUrl = $("#arduino-div-chart").data("backend-api-url") + "?from=" + from + "&to=" + to; - invokerUtil.get(backendApiUrl, successCallback, function (message) { + invokerUtil.get(backendApiUrl, successCallback, function (message) { - });*/ + });*/ $.getJSON("/api/controllers/tile_servers?serverId=all", function (data) { console.log(JSON.stringify(data)); $.each(data, function (key, val) { @@ -221,8 +221,8 @@ function setSpeedAlert() { } }; invokerUtil.put(serviceUrl, - data, - responseHandler, function (xhr) { + data, + responseHandler, function (xhr) { responseHandler(xhr.responseText, xhr.statusText, xhr); }); } @@ -251,11 +251,11 @@ function setWithinAlert(leafletId) { } else { var data = { 'parseData': JSON.stringify({ - 'geoFenceGeoJSON': selectedAreaGeoJson, - 'executionPlanName': createExecutionPlanName(queryName, "WithIn", deviceId), - 'areaName': areaName, - 'deviceId' : deviceId - }), + 'geoFenceGeoJSON': selectedAreaGeoJson, + 'executionPlanName': createExecutionPlanName(queryName, "WithIn", deviceId), + 'areaName': areaName, + 'deviceId' : deviceId + }), 'executionPlan': 'Within', 'customName': areaName, // TODO: fix , When template copies there can be two queryName and areaName id elements in the DOM 'queryName': queryName, @@ -282,8 +282,8 @@ function setWithinAlert(leafletId) { invokerUtil.post(serviceUrl, data, responseHandler, function (xhr) { - responseHandler(xhr.responseText, xhr.statusText, xhr); - }); + responseHandler(xhr.responseText, xhr.statusText, xhr); + }); } } @@ -320,12 +320,12 @@ function setStationeryAlert(leafletId) { } else { var data = { 'parseData': JSON.stringify({ - 'geoFenceGeoJSON': selectedProcessedAreaGeoJson, - 'executionPlanName': createExecutionPlanName(queryName, "Stationery", deviceId), - 'stationeryName': stationeryName, - 'stationeryTime': time, - 'fluctuationRadius': fluctuationRadius - }), + 'geoFenceGeoJSON': selectedProcessedAreaGeoJson, + 'executionPlanName': createExecutionPlanName(queryName, "Stationery", deviceId), + 'stationeryName': stationeryName, + 'stationeryTime': time, + 'fluctuationRadius': fluctuationRadius + }), 'stationeryTime': time, 'fluctuationRadius': fluctuationRadius, 'executionPlan': 'Stationery', @@ -431,10 +431,10 @@ function setTrafficAlert(leafletId) { } else { var data = { 'parseData': JSON.stringify({ - 'geoFenceGeoJSON': selectedProcessedAreaGeoJson, - 'executionPlanName': createExecutionPlanName(queryName, "Traffic", deviceId), - 'areaName': areaName - }), + 'geoFenceGeoJSON': selectedProcessedAreaGeoJson, + 'executionPlanName': createExecutionPlanName(queryName, "Traffic", deviceId), + 'areaName': areaName + }), 'executionPlan': 'Traffic', 'customName': areaName, // TODO: fix , When template copies there can be two queryName and areaName id elements in the DOM 'queryName': queryName, @@ -487,41 +487,51 @@ function removeGeoFence(geoFenceElement, id) { }); } -function getAlertsHistory(objectId) { - - $.getJSON("/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/get_alerts_history.jag?objectId=" + objectId, function (data) { - var alertsContainer = $('#showAlertsArea').empty(); - $.each(data, function (key, val) { - var alertDOMElement = document.createElement('a'); // Reason for using document.createElement (performance issue) http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent - - switch (val.STATE) { - case "NORMAL": -// $(alertDOMElement).addClass("list-group-item list-group-item-info"); - return; - case "WARNING": - $(alertDOMElement).addClass("list-group-item list-group-item-warning"); - break; - case "ALERTED": - $(alertDOMElement).addClass("list-group-item list-group-item-danger"); - break; - case "OFFLINE": - $(alertDOMElement).addClass("list-group-item list-group-item-success"); - break; - } - $(alertDOMElement).html(val.INFORMATION); - $(alertDOMElement).css({marginTop: "5px"}); - $(alertDOMElement).attr('onClick', 'showAlertInMap(this)'); - - // Set HTML5 data attributes for later use - $(alertDOMElement).attr('data-id', val.ID); - $(alertDOMElement).attr('data-latitude', val.LATITUDE); - $(alertDOMElement).attr('data-longitude', val.LONGITUDE); - $(alertDOMElement).attr('data-state', val.STATE); - $(alertDOMElement).attr('data-information', val.INFORMATION); - - alertsContainer.append(alertDOMElement); +function getAlertsHistory(deviceType, deviceId, timeFrom, timeTo) { + var timeRange = ''; + if (timeFrom && timeTo) { + timeRange = '?from=' + timeFrom + '&to=' + timeTo; + } + var serviceUrl = '/api/device-mgt/v1.0/geo-services/alerts/history/' + deviceType + '/' + deviceId + timeRange; + invokerUtil.get(serviceUrl, + function (data) { + var alertsContainer = $('#showAlertsArea').empty(); + var alerts = JSON.parse(data); + $.each(alerts, function (key, val) { + var alertDOMElement = document.createElement('a'); // Reason for using + // document.createElement + // (performance issue) + // http://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent + switch (val.STATE) { + case "NORMAL": +// $(alertDOMElement).addClass("list-group-item list-group-item-info"); + return; + case "WARNING": + $(alertDOMElement).addClass("list-group-item list-group-item-warning"); + break; + case "ALERTED": + $(alertDOMElement).addClass("list-group-item list-group-item-danger"); + break; + case "OFFLINE": + $(alertDOMElement).addClass("list-group-item list-group-item-success"); + break; + } + $(alertDOMElement).html(val.INFORMATION); + $(alertDOMElement).css({marginTop: "5px"}); + $(alertDOMElement).attr('onClick', 'showAlertInMap(this)'); + + // Set HTML5 data attributes for later use + $(alertDOMElement).attr('data-id', val.ID); + $(alertDOMElement).attr('data-latitude', val.LATITUDE); + $(alertDOMElement).attr('data-longitude', val.LONGITUDE); + $(alertDOMElement).attr('data-state', val.STATE); + $(alertDOMElement).attr('data-information', val.INFORMATION); + + alertsContainer.append(alertDOMElement); + }); + }, function (message) { + console.log(message); }); - }); } @@ -564,8 +574,8 @@ function setProximityAlert() { } }; invokerUtil.put(serviceUrl, - data, - responseHandler, function (xhr) { + data, + responseHandler, function (xhr) { responseHandler(xhr.responseText, xhr.statusText, xhr); }); diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js index 593d721fad..bf161dbdd0 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js @@ -650,7 +650,7 @@ function initializeGeoLocation() { var wsEndPoint = geoCharts.data("ws-endpoint"); wsToken = geoCharts.data("ws-token"); geoPublicUri = geoCharts.data("geo-public-uri"); - webSocketURL = wsEndPoint + userDomain + "/org.wso2.geo.FusedSpatialEvent/1.0.0?" + webSocketURL = wsEndPoint + userDomain + "/iot.per.device.stream.geo.FusedSpatialEvent/1.0.0?" + "deviceId=" + deviceId + "&deviceType=" + deviceType + "&websocketToken=" + wsToken; alertWebSocketURL = wsEndPoint + userDomain + "/org.wso2.geo.AlertsNotifications/1.0.0?" + "deviceId=" + deviceId + "&deviceType=" + deviceType + "&websocketToken=" + wsToken;