mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Changes to geo dashboard ui in /devicemgt
This commit is contained in:
Rasika Perera
parent
d37aafff48
commit
76f4457462
@ -40,25 +40,25 @@
|
||||
{{/zone}}
|
||||
|
||||
<span id="geo-charts" data-ws-endpoint="{{wsEndpoint}}" data-ws-token="{{wsToken}}" data-geo-public-uri="{{@unit.publicUri}}"
|
||||
data-device-location="{{lastLocation}}"></span>
|
||||
data-device-location="{{lastLocation}}"></span>
|
||||
|
||||
<div class="map-wrapper">
|
||||
{{#unless @unit.params.hideSearch}}
|
||||
<div class="navbar-collapse collapse" style="display:inline-block;">
|
||||
<ul class="nav navbar-nav-right">
|
||||
<li>
|
||||
<form id="mapSearch" class="navbar-form" role="search"
|
||||
onsubmit="focusOnSpatialObject($(this).find('#searchbox').val());return false;">
|
||||
<div class="form-group has-feedback">
|
||||
<input autofocus="true" id="searchbox" type="text" placeholder="Search"
|
||||
class="form-control typeahead">
|
||||
<span id="searchicon" class="fa fa-search form-control-feedback"></span>
|
||||
</div>
|
||||
<input style="visibility: hidden; position: fixed;" type="submit"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse" style="display:inline-block;">
|
||||
<ul class="nav navbar-nav-right">
|
||||
<li>
|
||||
<form id="mapSearch" class="navbar-form" role="search"
|
||||
onsubmit="focusOnSpatialObject($(this).find('#searchbox').val());return false;">
|
||||
<div class="form-group has-feedback">
|
||||
<input autofocus="true" id="searchbox" type="text" placeholder="Search"
|
||||
class="form-control typeahead">
|
||||
<span id="searchicon" class="fa fa-search form-control-feedback"></span>
|
||||
</div>
|
||||
<input style="visibility: hidden; position: fixed;" type="submit"/>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
||||
<div id="" style="height: 100vh;">
|
||||
@ -138,7 +138,7 @@ data-device-location="{{lastLocation}}"></span>
|
||||
<div class="modal-body">
|
||||
<ul class="nav nav-tabs" id="aboutTabs">
|
||||
<li class="active"><a href="#about" data-toggle="tab"><i class="fa fa-question-circle"></i> About
|
||||
the project</a></li>
|
||||
the project</a></li>
|
||||
<li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i> Contact us</a></li>
|
||||
<li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i> Disclaimer</a>
|
||||
</li>
|
||||
@ -159,27 +159,27 @@ data-device-location="{{lastLocation}}"></span>
|
||||
href="http://getbootstrap.com/">Bootstrap 3</a>, <a href="http://leafletjs.com/"
|
||||
target="_blank">Leaflet</a>, and <a
|
||||
href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>. Open
|
||||
source, MIT licensed, and available on <a href="https://github.com/bmcbride/bootleaf"
|
||||
target="_blank">GitHub</a>.</p>
|
||||
source, MIT licensed, and available on <a href="https://github.com/bmcbride/bootleaf"
|
||||
target="_blank">GitHub</a>.</p>
|
||||
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">Features</div>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Fullscreen mobile-friendly map template with responsive
|
||||
navbar and modal placeholders
|
||||
navbar and modal placeholders
|
||||
</li>
|
||||
<li class="list-group-item">jQuery loading of external GeoJSON files</li>
|
||||
<li class="list-group-item">Logical multiple layer marker clustering via the <a
|
||||
href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">leaflet
|
||||
marker cluster plugin</a></li>
|
||||
marker cluster plugin</a></li>
|
||||
<li class="list-group-item">Elegant client-side multi-layer feature search with
|
||||
autocomplete using <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>
|
||||
autocomplete using <a href="http://twitter.github.io/typeahead.js/" target="_blank">typeahead.js</a>
|
||||
</li>
|
||||
<li class="list-group-item">Responsive sidebar feature list with sorting and filtering
|
||||
via <a href="http://listjs.com/" target="_blank">list.js</a></li>
|
||||
via <a href="http://listjs.com/" target="_blank">list.js</a></li>
|
||||
<li class="list-group-item">Marker icons included in grouped layer control via the <a
|
||||
href="https://github.com/ismyrnow/Leaflet.groupedlayercontrol" target="_blank">grouped
|
||||
layer control plugin</a></li>
|
||||
layer control plugin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -187,8 +187,8 @@ data-device-location="{{lastLocation}}"></span>
|
||||
<p>The data provided on this site is for informational and planning purposes only.</p>
|
||||
|
||||
<p>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.</p>
|
||||
this map is subject to such variations and corrections as might result from a complete title
|
||||
search and/or accurate field survey.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact">
|
||||
<form id="contact-form">
|
||||
@ -237,7 +237,7 @@ data-device-location="{{lastLocation}}"></span>
|
||||
<div class="tab-pane fade" id="theaters-tab">
|
||||
<p>Theater data courtesy of <a
|
||||
href="https://data.cityofnewyork.us/Recreation/Theaters/kdu2-865w" target="_blank">NYC
|
||||
Department of Information & Telecommunications (DoITT)</a></p>
|
||||
Department of Information & Telecommunications (DoITT)</a></p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="museums-tab">
|
||||
<p>Museum data courtesy of <a
|
||||
@ -291,11 +291,11 @@ data-device-location="{{lastLocation}}"></span>
|
||||
<p>A string of the following form:</p>
|
||||
<pre><code class="javascript"><span class="string">'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'</span></code></pre>
|
||||
<p><code class="javascript">{s}</code> means one of the available subdomains (used
|
||||
sequentially to help with browser parallel requests per domain limitation; subdomain
|
||||
values are specified in options; <code class="javascript">a</code>, <code
|
||||
sequentially to help with browser parallel requests per domain limitation; subdomain
|
||||
values are specified in options; <code class="javascript">a</code>, <code
|
||||
class="javascript">b</code> or <code class="javascript">c</code> by default, can
|
||||
be omitted), <code class="javascript">{z}</code> — zoom level, <code class="javascript">{x}</code>
|
||||
and <code class="javascript">{y}</code> — tile coordinates.</p>
|
||||
be omitted), <code class="javascript">{z}</code> — zoom level, <code class="javascript">{x}</code>
|
||||
and <code class="javascript">{y}</code> — tile coordinates.</p>
|
||||
|
||||
<p>You can use custom keys in the template, which will be <a
|
||||
href="#util-template">evaluated</a> from TileLayer options, like this:</p>
|
||||
@ -704,8 +704,12 @@ data-device-location="{{lastLocation}}"></span>
|
||||
});
|
||||
{{#if showGeoFencingTools}}
|
||||
var locationItems = geoLocationLink.closest('li');
|
||||
var geoToolsMenu = $("<ul/>", {class: 'collapse list-group geo-tools'}).appendTo(locationItems);
|
||||
var geoToolsMenu = $("<ul/>", {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',
|
||||
|
||||
@ -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');
|
||||
$("<i/>", {class: icon}).prependTo(anchor);
|
||||
return listItem;
|
||||
}
|
||||
@ -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',
|
||||
|
||||
@ -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) {
|
||||
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)');
|
||||
|
||||
$.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
|
||||
// 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);
|
||||
|
||||
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);
|
||||
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);
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user