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

Geo Fencing UI fixes

Browse Source
revert-70aa11f8
Rasika Perera 7 years ago
parent d3f24bb8ba
commit a5c18b3c26
6 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File

21
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

@ -21,32 +21,29 @@
</head> </head>
<body> <body>
<div id="viewExitAlert" > <div id="viewExitAlert" >
<h3 class="popover-title" id="viewAreaName"></h3>
<div class="popover-content"> <div class="popover-content">
<form role="form" style="width: auto"> <form role="form" style="width: auto" id="exitAlertForm">
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6> <button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON(this,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>
<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> <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> </form>
</div> </div>
</div> </div>
<div id="viewWithinAlert" > <div id="viewWithinAlert" >
<h3 class="popover-title" id="viewAreaName"></h3>
<div class="popover-content"> <div class="popover-content">
<form role="form" style="width: auto"> <form role="form" style="width: auto" class="" id="withinAlertForm">
<h6>Query name<span id="viewQueryName" class="label label-primary pull-right">N/A</span></h6> <button type="button" id="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON(this,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>
<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> <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> </form>
</div> </div>
</div> </div>
<div id="viewStationeryAlert" > <div id="viewStationeryAlert" >
<h3 class="popover-title" id="viewAreaName"></h3>
<div class="popover-content"> <div class="popover-content">
<form role="form" style="width: auto"> <form role="form" style="width: auto" id="stationaryAlertForm">
<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> <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="exportGeoJson" download="geoJson.json" onclick="exportToGeoJSON(this,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> <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> </form>
</div> </div>

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

@ -554,4 +554,15 @@ function createGeoToolListItem(link, text, icon, menuRoot) {
anchor.attr('data-target', '#commonModal'); anchor.attr('data-target', '#commonModal');
$("<i/>", {class: icon}).prependTo(anchor); $("<i/>", {class: icon}).prependTo(anchor);
return listItem; return listItem;
}
function formatDate(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return date.getDate() + "/" + date.getMonth()+1 + "/" + date.getFullYear() + " " + strTime;
} }

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

@ -28,7 +28,7 @@ function initializeExit() {
$("#exit-alert > tbody").append( $("#exit-alert > tbody").append(
"<tr class='viewGeoFenceRow' style='cursor: pointer' data-areaName='" + alertBean.areaName + "<tr class='viewGeoFenceRow' style='cursor: pointer' data-areaName='" + alertBean.areaName +
"' data-queryName='" + alertBean.queryName + "'data-geoJson="+ alertBean.geoJson +"><td>" + alertBean.areaName + "</td>" + "' data-queryName='" + alertBean.queryName + "'data-geoJson="+ alertBean.geoJson +"><td>" + alertBean.areaName + "</td>" +
"<td>" + alertBean.queryName + "</td><td>" + alertBean.createdTime + "</td>" + "<td>" + alertBean.queryName + "</td><td>" + formatDate(new Date(alertBean.createdTime)) + "</td>" +
"<td onClick=removeGeoFence(this.parentElement,'Exit') class='removeGeoFence'" + "<td onClick=removeGeoFence(this.parentElement,'Exit') class='removeGeoFence'" +
" data-toggle='tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>"); " data-toggle='tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>");
} }

11
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

@ -312,7 +312,7 @@ 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 = $(element).closest('form').find('#areaName').val() || 'geoJson'; var fileName = $(element).closest('form').attr('area-name') || 'geoJson';
var link = document.createElement("a"); 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.download = fileName + '.json'; // Use the fence name given by the user as the file name of the JSON file;
link.href = geoJsonData; link.href = geoJsonData;
@ -393,7 +393,8 @@ function viewFence(geoFenceElement,id) {
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('#stationaryAlertForm').attr('area-name', areaName);
popupTemplate.find('#stationaryAlertForm').attr('query-name', queryName);
popupTemplate.find('#viewAreaTime').html(stationeryTime); popupTemplate.find('#viewAreaTime').html(stationeryTime);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup(); geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).openPopup();
// transparent the layer .leaflet-popup-content-wrapper // transparent the layer .leaflet-popup-content-wrapper
@ -407,7 +408,8 @@ function viewFence(geoFenceElement,id) {
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('#withinAlertForm').attr('area-name', areaName);
popupTemplate.find('#withinAlertForm').attr('query-name', queryName);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).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)");
@ -419,7 +421,8 @@ function viewFence(geoFenceElement,id) {
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('#exitAlertForm').attr('area-name', areaName);
popupTemplate.find('#exitAlertForm').attr('query-name', queryName);
geometryShape.bindPopup(popupTemplate.html(), {closeButton: true}).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)");

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

@ -32,7 +32,7 @@ function initStationaryAlert() {
"'data-fluctuationRadius='" + alert.fluctuationRadius + "'data-areaName='" + alert.areaName + "'data-fluctuationRadius='" + alert.fluctuationRadius + "'data-areaName='" + alert.areaName +
"'data-queryName='" + alert.queryName + "'data-geoJson=" + alert.geoJson + ">" + "'data-queryName='" + alert.queryName + "'data-geoJson=" + alert.geoJson + ">" +
"<td>" + alert.areaName + "</td><td>" + alert.stationaryTime + "</td><td>" + alert.fluctuationRadius + "<td>" + alert.areaName + "</td><td>" + alert.stationaryTime + "</td><td>" + alert.fluctuationRadius +
"<td>" + alert.queryName + "</td><td>" + alert.createdTime + "</td><td" + "<td>" + alert.queryName + "</td><td>" + formatDate(new Date(alert.createdTime)) + "</td><td" +
" onClick=removeGeoFence(this.parentElement,'Stationery') data-toggle=" + " onClick=removeGeoFence(this.parentElement,'Stationery') data-toggle=" +
" 'tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>") " 'tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>")
} }

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

@ -28,7 +28,7 @@ function initializeWithin() {
$("#within-alert > tbody").append( $("#within-alert > tbody").append(
"<tr class='viewGeoFenceRow' style='cursor: pointer' data-areaName='" + alertBean.areaName + "<tr class='viewGeoFenceRow' style='cursor: pointer' data-areaName='" + alertBean.areaName +
"' data-queryName='" + alertBean.queryName + "'data-geoJson="+ alertBean.geoJson +"><td>" + alertBean.areaName + "</td>" + "' data-queryName='" + alertBean.queryName + "'data-geoJson="+ alertBean.geoJson +"><td>" + alertBean.areaName + "</td>" +
"<td>" + alertBean.queryName + "</td><td>" + alertBean.createdTime + "</td>" + "<td>" + alertBean.queryName + "</td><td>" + formatDate(new Date(alertBean.createdTime)) + "</td>" +
"<td onClick=removeGeoFence(this.parentElement,'Within') class='removeGeoFence'" + "<td onClick=removeGeoFence(this.parentElement,'Within') class='removeGeoFence'" +
" data-toggle='tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>"); " data-toggle='tooltip' title='Remove fence' ><i class='fa fa-trash-o'></i></td></tr>");
} }

Write Preview
Loading…
Cancel
Save