mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
UI fixes for geo fencing
This commit is contained in:
parent
ce6ab9b354
commit
c970167299
@ -557,10 +557,6 @@
|
|||||||
<div id="setWithinAlert">
|
<div id="setWithinAlert">
|
||||||
<form role="form" style="width: auto;">
|
<form role="form" style="width: auto;">
|
||||||
<div class="form-group">
|
<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>
|
<label class="text-primary" for="areaName">Fence name</label>
|
||||||
<input class="form-control" id="areaName" placeholder="Fence name" type="text">
|
<input class="form-control" id="areaName" placeholder="Fence name" type="text">
|
||||||
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
||||||
@ -581,7 +577,38 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a id="exportGeoJson" download="geoJson.json" href="#"
|
<a id="exportGeoJson" download="geoJson.json" href="#"
|
||||||
onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
|
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="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"
|
class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
|
||||||
title="Export selected area as a geoJson file">Export</a>
|
title="Export selected area as a geoJson file">Export</a>
|
||||||
</div>
|
</div>
|
||||||
@ -593,10 +620,6 @@
|
|||||||
<div id="setStationeryAlert">
|
<div id="setStationeryAlert">
|
||||||
<form role="form" style="width: auto;">
|
<form role="form" style="width: auto;">
|
||||||
<div class="form-group">
|
<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>
|
<label class="text-primary" for="areaName">Fence name</label>
|
||||||
<input class="form-control" id="areaName" placeholder="Stationery name" type="text">
|
<input class="form-control" id="areaName" placeholder="Stationery name" type="text">
|
||||||
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
||||||
@ -623,7 +646,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a id="exportGeoJson" download="geoJson.json" href="#"
|
<a id="exportGeoJson" download="geoJson.json" href="#"
|
||||||
onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
|
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"
|
class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
|
||||||
title="Export selected area as a geoJson file">Export</a>
|
title="Export selected area as a geoJson file">Export</a>
|
||||||
</div>
|
</div>
|
||||||
@ -634,10 +657,6 @@
|
|||||||
<div id="setTrafficAlert">
|
<div id="setTrafficAlert">
|
||||||
<form role="form" style="width: auto;">
|
<form role="form" style="width: auto;">
|
||||||
<div class="form-group">
|
<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>
|
<label class="text-primary" for="areaName">Fence name</label>
|
||||||
<input class="form-control" id="areaName" placeholder="Area Name" type="text">
|
<input class="form-control" id="areaName" placeholder="Area Name" type="text">
|
||||||
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
<span class="help-block">Name of the selected area(i.e colombo)</span>
|
||||||
@ -658,7 +677,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<a id="exportGeoJson" download="geoJson.json" href="#"
|
<a id="exportGeoJson" download="geoJson.json" href="#"
|
||||||
onclick="exportToGeoJSON(this,JSON.stringify(map._layers[$(this).attr('leaflet_id')].toGeoJSON(),null, '\t'))"
|
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"
|
class="btn btn-default btn-xs" data-toggle="tooltip" data-placement="left"
|
||||||
title="Export selected area as a geoJson file">Export</a>
|
title="Export selected area as a geoJson file">Export</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -45,8 +45,6 @@ function onRequest(context) {
|
|||||||
viewModel.device = device;
|
viewModel.device = device;
|
||||||
viewModel.wsToken = token;
|
viewModel.wsToken = token;
|
||||||
viewModel.wsEndpoint = wsEndpoint;
|
viewModel.wsEndpoint = wsEndpoint;
|
||||||
log.error("----error-----");
|
|
||||||
log.error(device);
|
|
||||||
if (device.latestDeviceInfo) {
|
if (device.latestDeviceInfo) {
|
||||||
viewModel.lastLocation = stringify(device.latestDeviceInfo.location);
|
viewModel.lastLocation = stringify(device.latestDeviceInfo.location);
|
||||||
} else if (device.location) {
|
} else if (device.location) {
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<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.
|
<strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<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.
|
<strong>Oh snap!</strong> Can't find any geo-fence areas,please draw a new area or try again.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -20,50 +20,36 @@
|
|||||||
<title></title>
|
<title></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="viewExitAlert" >
|
||||||
|
<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="viewWithinAlert" >
|
<div id="viewWithinAlert" >
|
||||||
<form role="form" style="width: auto">
|
<div class="popover-content">
|
||||||
<div class="form-group">
|
<form role="form" style="width: auto">
|
||||||
<label class="text-info">Query name</label>
|
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
|
||||||
<div id="viewQueryName" class="well well-sm"></div>
|
<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>
|
||||||
<label class="text-info">Area name</label>
|
<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>
|
||||||
<div id="viewAreaName" class="well well-sm"></div>
|
</form>
|
||||||
</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>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="viewStationeryAlert" >
|
<div id="viewStationeryAlert" >
|
||||||
<form role="form" style="width: auto">
|
<div class="popover-content">
|
||||||
<div class="form-group">
|
<form role="form" style="width: auto">
|
||||||
<label class="text-info">Query name</label>
|
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6>
|
||||||
<div id="viewQueryName" class="well well-sm"></div>
|
<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>
|
||||||
<label class="text-info">Stationery name</label>
|
<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>
|
||||||
<div id="viewAreaName" class="well well-sm"></div>
|
<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>
|
||||||
<label class="text-info">Stationery time(Seconds)</label>
|
</div>
|
||||||
<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>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -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;
|
||||||
@ -138,6 +138,33 @@ function openTools(id) {
|
|||||||
featureGroup: drawnItems
|
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"){
|
} else if(id=="Stationery"){
|
||||||
// Initialise the draw control and pass it the FeatureGroup of editable layers
|
// Initialise the draw control and pass it the FeatureGroup of editable layers
|
||||||
|
|
||||||
@ -235,6 +262,9 @@ function createPopup(layer,id) {
|
|||||||
if(id=="WithIn"){
|
if(id=="WithIn"){
|
||||||
var popupTemplate = $('#setWithinAlert');
|
var popupTemplate = $('#setWithinAlert');
|
||||||
popupTemplate.find('#addWithinAlert').attr('leaflet_id', layer._leaflet_id);
|
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"){
|
} else if(id=="Stationery"){
|
||||||
var popupTemplate = $('#setStationeryAlert');
|
var popupTemplate = $('#setStationeryAlert');
|
||||||
popupTemplate.find('#addStationeryAlert').attr('leaflet_id', layer._leaflet_id);
|
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 ;) */
|
/* 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
|
// HTML5 features has been used here
|
||||||
var geoJsonData = 'data:application/json;charset=utf-8,' + encodeURIComponent(content);
|
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)
|
// 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';
|
var fileName = $(element).closest('form').find('#areaName').val() || 'geoJson';
|
||||||
$(link).attr({
|
var link = document.createElement("a");
|
||||||
'href': geoJsonData,
|
link.download = fileName + '.json'; // Use the fence name given by the user as the file name of the JSON file;
|
||||||
'target': '_blank',
|
link.href = geoJsonData;
|
||||||
'download': fileName + '.json' // Use the fence name given by the user as the file name of the JSON file
|
document.body.appendChild(link);
|
||||||
});
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
delete link;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
@ -349,7 +381,7 @@ function viewFence(geoFenceElement,id) {
|
|||||||
popupTemplate.find('#viewAreaName').html(areaName);
|
popupTemplate.find('#viewAreaName').html(areaName);
|
||||||
popupTemplate.find('#viewQueryName').html(queryName);
|
popupTemplate.find('#viewQueryName').html(queryName);
|
||||||
popupTemplate.find('#viewAreaTime').html(stationeryTime);
|
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
|
// transparent the layer .leaflet-popup-content-wrapper
|
||||||
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
|
$(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('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
|
||||||
popupTemplate.find('#viewAreaName').html(areaName);
|
popupTemplate.find('#viewAreaName').html(areaName);
|
||||||
popupTemplate.find('#viewQueryName').html(queryName);
|
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
|
// transparent the layer .leaflet-popup-content-wrapper
|
||||||
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
|
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
|
||||||
});
|
});
|
||||||
} else if(id=="Exit"){
|
} else if(id=="Exit"){
|
||||||
|
|
||||||
$('#templateLoader').load(geoPublicUri + "/assets/html_templates/view_fence_popup.html #viewExitAlert", function () {
|
$('#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('#exportGeoJson').attr('leaflet_id', geometryShape._leaflet_id);
|
||||||
popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
|
popupTemplate.find('#hideViewFence').attr('leaflet_id', geometryShape._leaflet_id);
|
||||||
popupTemplate.find('#viewAreaName').html(areaName);
|
popupTemplate.find('#viewAreaName').html(areaName);
|
||||||
popupTemplate.find('#viewQueryName').html(queryName);
|
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
|
// transparent the layer .leaflet-popup-content-wrapper
|
||||||
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
|
$(geometryShape._popup._container.childNodes[0]).css("background", "rgba(255,255,255,0.8)");
|
||||||
});
|
});
|
||||||
|
|||||||
@ -238,14 +238,11 @@ function setWithinAlert(leafletId) {
|
|||||||
* (look in get_alerts for .replace() method)
|
* (look in get_alerts for .replace() method)
|
||||||
* */
|
* */
|
||||||
var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
|
var selectedAreaGeoJson = JSON.stringify(map._layers[leafletId].toGeoJSON().geometry).replace(/"/g, "'");
|
||||||
var queryName = $("#queryName").val();
|
|
||||||
var areaName = $("#areaName").val();
|
var areaName = $("#areaName").val();
|
||||||
|
var queryName = areaName;
|
||||||
|
|
||||||
|
|
||||||
if (queryName == null || queryName === undefined || queryName == "") {
|
if (areaName == null || areaName === undefined || areaName == "") {
|
||||||
var message = "Query Name cannot be empty.";
|
|
||||||
noty({text: message, type : 'error' });
|
|
||||||
} else if (areaName == null || areaName === undefined || areaName == "") {
|
|
||||||
var message = "Area Name cannot be empty.";
|
var message = "Area Name cannot be empty.";
|
||||||
noty({text: message, type : 'error' });
|
noty({text: message, type : 'error' });
|
||||||
} else {
|
} 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) {
|
function setStationeryAlert(leafletId) {
|
||||||
|
|
||||||
var selectedAreaGeoJson = map._layers[leafletId].toGeoJSON().geometry;
|
var selectedAreaGeoJson = map._layers[leafletId].toGeoJSON().geometry;
|
||||||
@ -300,15 +350,12 @@ function setStationeryAlert(leafletId) {
|
|||||||
|
|
||||||
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
|
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
|
||||||
|
|
||||||
var queryName = $("#queryName").val();
|
|
||||||
var stationeryName = $("#areaName").val();
|
var stationeryName = $("#areaName").val();
|
||||||
|
var queryName = stationeryName;
|
||||||
var fluctuationRadius = $("#fRadius").val();
|
var fluctuationRadius = $("#fRadius").val();
|
||||||
var time = $("#time").val();
|
var time = $("#time").val();
|
||||||
|
|
||||||
if (queryName == null || queryName === undefined || queryName == "") {
|
if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
|
||||||
var message = "Query Name cannot be empty.";
|
|
||||||
noty({text: message, type : 'error' });
|
|
||||||
} else if (stationeryName == null || stationeryName === undefined || stationeryName == "") {
|
|
||||||
var message = "Stationery Name cannot be empty.";
|
var message = "Stationery Name cannot be empty.";
|
||||||
noty({text: message, type : 'error' });
|
noty({text: message, type : 'error' });
|
||||||
} else if (fluctuationRadius == null || fluctuationRadius === undefined || fluctuationRadius == "") {
|
} else if (fluctuationRadius == null || fluctuationRadius === undefined || fluctuationRadius == "") {
|
||||||
@ -418,14 +465,11 @@ function setTrafficAlert(leafletId) {
|
|||||||
|
|
||||||
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
|
var selectedProcessedAreaGeoJson = JSON.stringify(selectedAreaGeoJson).replace(/"/g, "'");
|
||||||
|
|
||||||
var queryName = $("#queryName").val();
|
|
||||||
var areaName = $("#areaName").val();
|
var areaName = $("#areaName").val();
|
||||||
|
var queryName = areaName;
|
||||||
//var time = $("#time").val();
|
//var time = $("#time").val();
|
||||||
|
|
||||||
if (queryName == null || queryName === undefined || queryName == "") {
|
if (areaName == null || areaName === undefined || areaName == "") {
|
||||||
var message = "Query Name cannot be empty.";
|
|
||||||
noty({text: message, type : 'error' });
|
|
||||||
} else if (areaName == null || areaName === undefined || areaName == "") {
|
|
||||||
var message = "Area Name cannot be empty.";
|
var message = "Area Name cannot be empty.";
|
||||||
noty({text: message, type : 'error' });
|
noty({text: message, type : 'error' });
|
||||||
} else {
|
} else {
|
||||||
@ -587,11 +631,11 @@ function createExecutionPlanName(queryName, id, deviceId) {
|
|||||||
|
|
||||||
if (id == "WithIn") {
|
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)
|
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 == "Exit"){
|
||||||
else if (id == "Stationery") {
|
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)
|
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)
|
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user