Changes to geo dashboard ui in /devicemgt

4.x.x
Rasika Perera 7 years ago
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>&nbsp;About
the project</a></li>
the project</a></li>
<li><a href="#contact" data-toggle="tab"><i class="fa fa-envelope"></i>&nbsp;Contact us</a></li>
<li><a href="#disclaimer" data-toggle="tab"><i class="fa fa-exclamation-circle"></i>&nbsp;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) {
$.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);
});

@ -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…
Cancel
Save