waruni
/
device-mgt-core
forked from community/device-mgt-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI fixes for geo fencing

Browse Source
revert-70aa11f8
Rasika Perera 7 years ago
parent ce6ab9b354
commit c970167299
8 changed files with 189 additions and 90 deletions
Show Stats Download Patch File Download Diff File

43
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs
Unescape View File

@ -557,10 +557,6 @@
<div id="setWithinAlert">
<form role="form" style="width: auto;">
<div class="form-group">
<label class="text-primary" for="queryName">Query name</label>
<input class="form-control" id="queryName" placeholder="Query name" type="text">
<span class="help-block">Can use this name to locate the execution plan</span>
<label class="text-primary" for="areaName">Fence name</label>
<input class="form-control" id="areaName" placeholder="Fence name" type="text">
<span class="help-block">Name of the selected area(i.e colombo)</span>
@ -589,14 +585,41 @@
</div>
</form>
</div>
<div id="setExitAlert">
<form role="form" style="width: auto;">
<div class="form-group">
<label class="text-primary" for="areaName">Fence name</label>
<input class="form-control" id="areaName" placeholder="Fence name" type="text">
<span class="help-block">Name of the selected area(i.e colombo)</span>
</div>
<div>
<div class="btn-group btn-group-sm btn-group-justified">
<div class="btn-group">
<button id="addExitAlert" onclick="setExitAlert($(this).attr('leaflet_id'))" type="button"
class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left"
title="Save selected area for alerts">Save
</button>
</div>
<div class="btn-group">
<button id="editGeoJson"
onclick="$('#editExitGeoJSON #updateGeoJson').attr('leaflet_id',$(this).attr('leaflet_id'));$('#editExitGeoJSON textarea').text(JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'));$('#editExitGeoJSON').modal('toggle')"
type="button" class="btn btn-default btn-xs">Edit
</button>
</div>
<div class="btn-group">
<a id="exportGeoJson" download="geoJson.json" href="#"
onclick="exportToGeoJSON(this, JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
title="Export selected area as a geoJson file">Export</a>
</div>
</div>
</div>
</form>
</div>
<div id="templateLoader"></div>
<div id="setStationeryAlert">
<form role="form" style="width: auto;">
<div class="form-group">
<label class="text-primary" for="queryName">Query name</label>
<input class="form-control" id="queryName" placeholder="Query name" type="text">
<span class="help-block">Can use this name to locate the execution plan</span>
<label class="text-primary" for="areaName">Fence name</label>
<input class="form-control" id="areaName" placeholder="Stationery name" type="text">
<span class="help-block">Name of the selected area(i.e colombo)</span>
@ -634,10 +657,6 @@
<div id="setTrafficAlert">
<form role="form" style="width: auto;">
<div class="form-group">
<label class="text-primary" for="queryName">Query name</label>
<input class="form-control" id="queryName" placeholder="Query name" type="text">
<span class="help-block">Can use this name to locate the execution plan</span>
<label class="text-primary" for="areaName">Fence name</label>
<input class="form-control" id="areaName" placeholder="Area Name" type="text">
<span class="help-block">Name of the selected area(i.e colombo)</span>

2
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js
Unescape View File

@ -45,8 +45,6 @@ function onRequest(context) {
viewModel.device = device;
viewModel.wsToken = token;
viewModel.wsEndpoint = wsEndpoint;
log.error("----error-----");
log.error(device);
if (device.latestDeviceInfo) {
viewModel.lastLocation = stringify(device.latestDeviceInfo.location);
} else if (device.location) {

2
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/exit_alert.html
Unescape View File

@ -23,7 +23,7 @@
</tr>
</thead>
<tbody>
<div class="alert alert-danger fence-not-exist" role="alert">
<div class="alert alert-info fence-not-exist" role="alert">
<strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
</div>

2
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/modal/within_alert.html
Unescape View File

@ -23,7 +23,7 @@
</tr>
</thead>
<tbody>
<div class="alert alert-danger fence-not-exist" role="alert">
<div class="alert alert-info fence-not-exist" role="alert">
<strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
</div>

58
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/assets/html_templates/view_fence_popup.html
Unescape View File

@ -20,50 +20,36 @@
<title></title>
</head>
<body>
<div id="viewWithinAlert" >
<div id="viewExitAlert" >
<div class="popover-content">
<form role="form" style="width: auto">
<div class="form-group">
<label class="text-info">Query name</label>
<div id="viewQueryName" class="well well-sm"></div>
<label class="text-info">Area name</label>
<div id="viewAreaName" class="well well-sm"></div>
</div>
<div>
<div class="btn-group btn-group-sm btn-group-justified">
<div class="btn-group">
<a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
</div>
<div class="btn-group">
<a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
</div>
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
<h6>Area name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
<button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
<button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
</form>
</div>
</div>
<div id="viewWithinAlert" >
<div class="popover-content">
<form role="form" style="width: auto">
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
<h6>Area name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
<button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
<button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
</form>
</div>
</div>
<div id="viewStationeryAlert" >
<div class="popover-content">
<form role="form" style="width: auto">
<div class="form-group">
<label class="text-info">Query name</label>
<div id="viewQueryName" class="well well-sm"></div>
<label class="text-info">Stationery name</label>
<div id="viewAreaName" class="well well-sm"></div>
<label class="text-info">Stationery time(Seconds)</label>
<div id="viewAreaTime" class="well well-sm"></div>
</div>
<div>
<div class="btn-group btn-group-sm btn-group-justified">
<div class="btn-group">
<a id="exportGeoJson" download="geoJson.json" href="#" onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</a>
</div>
<div class="btn-group">
<a id="hideViewFence" class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</a>
</div>
</div>
</div>
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
<h6>Stationery name<span id="viewAreaName" class="label label-primary pull-right">N/A</span></h6>
<h6>Stationery time(Seconds)<span id="viewAreaTime" class="label label-primary pull-right">N/A</span></h6>
<button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON($('#downloadLinkFwrd'),JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Export selected area as a geoJson file">Export</button>
<button type="button" id="hideViewFence" class="btn btn-info btn-xs" data-toggle="tooltip" data-placement="left" title="Hide this fence" onclick="map.removeLayer(map._layers[$(this).attr('leaflet_id')])" >Hide</button>
</form>
</div>
</div>
</body>
</html>

20
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/conf/alerts/Geo-ExecutionPlan-Exit_alert.siddhiql
Unescape View File

@ -0,0 +1,20 @@
/* Enter a unique ExecutionPlan */
@Plan:name('$executionPlanName')
/* Enter a unique description for ExecutionPlan */
-- @Plan:description('ExecutionPlan')
/* define streams/tables and write queries here ... */
@Import('org.wso2.geo.StandardSpatialEvents:1.0.0')
define stream dataIn (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string);
@Export('org.wso2.geo.ProcessedSpatialEvents:1.0.0')
define stream dataOut (id string, latitude double, longitude double, timeStamp long, type string ,speed float, heading float, eventId string, state string, information string);
from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")==false and id == "$deviceId"]#geodashboard:subscribe()
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "ALERTED" as state, "This device is in $areaName restricted area!!!" as information
insert into dataOut;
from dataIn[geo:within(longitude,latitude,"$geoFenceGeoJSON")!=false and id == "$deviceId"]
select id , latitude, longitude,timeStamp, type, speed, heading ,eventId , "NORMAL" as state, "" as information
insert into dataOut;

54
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_fencing.js
Unescape View File

@ -138,6 +138,33 @@ function openTools(id) {
featureGroup: drawnItems
}
});
} else if(id=="Exit"){
// Initialise the draw control and pass it the FeatureGroup of editable layers
drawControl = new L.Control.Draw({
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#ff0043'
}
},
rectangle: {
shapeOptions: {
color: '#002bff'
}
},
polyline: false,
circle: false, // Turns off this drawing tool
marker: false // Markers are not applicable for within geo fencing
},
edit: {
featureGroup: drawnItems
}
});
} else if(id=="Stationery"){
// Initialise the draw control and pass it the FeatureGroup of editable layers
@ -235,6 +262,9 @@ function createPopup(layer,id) {
if(id=="WithIn"){
var popupTemplate = $('#setWithinAlert');
popupTemplate.find('#addWithinAlert').attr('leaflet_id', layer._leaflet_id);
} else if(id=="Exit"){
var popupTemplate = $('#setExitAlert');
popupTemplate.find('#addExitAlert').attr('leaflet_id', layer._leaflet_id);
} else if(id=="Stationery"){
var popupTemplate = $('#setStationeryAlert');
popupTemplate.find('#addStationeryAlert').attr('leaflet_id', layer._leaflet_id);
@ -263,16 +293,18 @@ function closeTools(leafletId) {
}
/* Export selected area on the map as a json encoded geoJson standard file, no back-end calls simple HTML5 trick ;) */
function exportToGeoJSON(link, content) {
function exportToGeoJSON(element, content) {
// HTML5 features has been used here
var geoJsonData = 'data:application/json;charset=utf-8,' + encodeURIComponent(content);
// TODO: replace closest() by using persistence id for templates, template id prefixed by unique id(i.e leaflet_id)
var fileName = $(link).closest('form').find('#areaName').val() || 'geoJson';
$(link).attr({
'href': geoJsonData,
'target': '_blank',
'download': fileName + '.json' // Use the fence name given by the user as the file name of the JSON file
});
var fileName = $(element).closest('form').find('#areaName').val() || 'geoJson';
var link = document.createElement("a");
link.download = fileName + '.json'; // Use the fence name given by the user as the file name of the JSON file;
link.href = geoJsonData;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
$(function () {
@ -349,7 +381,7 @@ function viewFence(geoFenceElement,id) {
popupTemplate.find('#viewAreaName').html(areaName);
popupTemplate.find('#viewQueryName').html(queryName);
popupTemplate.find('#viewAreaTime').html(stationeryTime);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
// transparent the layer .leaflet-popup-content-wrapper
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
@ -362,19 +394,19 @@ function viewFence(geoFenceElement,id) {
popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
popupTemplate.find('#viewAreaName').html(areaName);
popupTemplate.find('#viewQueryName').html(queryName);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
// transparent the layer .leaflet-popup-content-wrapper
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
});
} else if(id=="Exit"){
$('#templateLoader').load(geoPublicUri + "/assets/html_templates/view_fence_popup.html #viewExitAlert", function () {
var popupTemplate = $('#templateLoader').find('#viewWithinAlert');
var popupTemplate = $('#templateLoader').find('#viewExitAlert');
popupTemplate.find('#exportGeoJson').attr('leaflet_id', geometryShape._leaflet_id);
popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
popupTemplate.find('#viewAreaName').html(areaName);
popupTemplate.find('#viewQueryName').html(queryName);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: false}).openPopup();
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
// transparent the layer .leaflet-popup-content-wrapper
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
});

82
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
Unescape View File

@ -238,14 +238,11 @@ function setWithinAlert(leafletId) {
* (look in get_alerts for .replace() method)
* */
var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
var queryName = $("#queryName").val();
var areaName = $("#areaName").val();
var queryName = areaName;
if (queryName == null || queryName === undefined || queryName == "") {
var message = "Query Name cannot be empty.";
noty({text: message, type : 'error' });
} else if (areaName == null || areaName === undefined || areaName == "") {
if (areaName == null || areaName === undefined || areaName == "") {
var message = "Area Name cannot be empty.";
noty({text: message, type : 'error' });
} else {
@ -287,6 +284,59 @@ function setWithinAlert(leafletId) {
}
}
function setExitAlert(leafletId) {
/*
* TODO: replace double quote to single quote because of a conflict when deploying execution plan in CEP
* this is against JSON standards so has been re-replaced when getting the data from governance registry
* (look in get_alerts for .replace() method)
* */
var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
var areaName = $("#areaName").val();
var queryName = areaName;
if (areaName == null || areaName === undefined || areaName == "") {
var message = "Area Name cannot be empty.";
noty({text: message, type : 'error' });
} else {
var data = {
'parseData': JSON.stringify({
'geoFenceGeoJSON': selectedAreaGeoJson,
'executionPlanName': createExecutionPlanName(queryName, "Exit", deviceId),
'areaName': areaName,
'deviceId' : deviceId
}),
'executionPlan': 'Exit',
'customName': areaName, // TODO: fix , When template copies there can be two queryName and areaName id elements in the DOM
'queryName': queryName,
'cepAction': 'deploy',
'deviceId' : deviceId
};
var serviceUrl = '/api/device-mgt/v1.0/geo-services/alerts/Exit/' + deviceType + '/' + deviceId;
var responseHandler = function (data, textStatus, xhr) {
closeTools(leafletId);
if (xhr.status == 200) {
noty({text: 'Successfully added alert', type : 'success'});
} else {
var ptrn = /(?:<am\:description>)(.*)(?:<\/am\:description>)/g;
var errorTxt;
if (result) {
errorTxt = result.length > 1 ? result[1] : data;
} else {
errorTxt = data;
}
noty({text: textStatus + ' : ' + errorTxt, type : 'error'});
}
};
invokerUtil.post(serviceUrl,
data,
responseHandler, function (xhr) {
responseHandler(xhr.responseText, xhr.statusText, xhr);
});
}
}
function setStationeryAlert(leafletId) {
var selectedAreaGeoJson = map._layers[leafletId].toGeoJSON().geometry;
@ -300,15 +350,12 @@ function setStationeryAlert(leafletId) {
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
var queryName = $("#queryName").val();
var stationeryName = $("#areaName").val();
var queryName = stationeryName;
var fluctuationRadius = $("#fRadius").val();
var time = $("#time").val();
if (queryName == null || queryName === undefined || queryName == "") {
var message = "Query Name cannot be empty.";
noty({text: message, type : 'error' });
} else if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
var message = "Stationery Name cannot be empty.";
noty({text: message, type : 'error' });
} else if (fluctuationRadius == null || fluctuationRadius === undefined || fluctuationRadius == "") {
@ -418,14 +465,11 @@ function setTrafficAlert(leafletId) {
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
var queryName = $("#queryName").val();
var areaName = $("#areaName").val();
var queryName = areaName;
//var time = $("#time").val();
if (queryName == null || queryName === undefined || queryName == "") {
var message = "Query Name cannot be empty.";
noty({text: message, type : 'error' });
} else if (areaName == null || areaName === undefined || areaName == "") {
if (areaName == null || areaName === undefined || areaName == "") {
var message = "Area Name cannot be empty.";
noty({text: message, type : 'error' });
} else {
@ -587,11 +631,11 @@ function createExecutionPlanName(queryName, id, deviceId) {
if (id == "WithIn") {
return 'Geo-ExecutionPlan-Within' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
}
else if (id == "Stationery") {
} else if(id == "Exit"){
return 'Geo-ExecutionPlan-Exit' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
} else if (id == "Stationery") {
return 'Geo-ExecutionPlan-Stationery' + (queryName ? '_' + queryName : '') + "---" + (deviceId ? '_' + deviceId : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
}
else if (id == "Traffic") {
} else if (id == "Traffic") {
return 'Geo-ExecutionPlan-Traffic' + (queryName ? '_' + queryName : '') + '_alert'; // TODO: value of the `queryName` can't be empty, because it will cause name conflicts in CEP, have to do validation(check not empty String)
}

Write Preview
Loading…
Cancel
Save