community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes to geo-fencing ui

Browse Source
This commit is contained in:
Rasika Perera 2017-06-01 05:00:00 +05:30
parent ddfecba1a6
commit 5cb0f9bb94
9 changed files with 65 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,7 @@
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>
@ -58,75 +59,7 @@ data-device-location="{{lastLocation}}"></span>
</li>
</ul>
</div>
<div id="left_side_pannel" class="col-lg-2">
<ul class="nav nav-sidebar">
<li>
<a href="#" data-toggle="collapse" data-target="#toggleDemo" data-parent="#sidenav01" class="collapsed">
<span class="fw fw-notification"></span> Set alerts <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDemo" style="height: 0px;">
<ul class="nav nav-list">
<li><a data-target="#commonModal" data-toggle="modal" href="{{@unit.publicUri}}/assets/html_templates/modal/speed_alert.html"><i class="glyphicon glyphicon-dashboard"></i> Speed Alert</a></li>
<li><a data-target="#commonModal" data-toggle="modal" href="{{@unit.publicUri}}/assets/html_templates/modal/stationery_alert.html"><i class="glyphicon glyphicon-link"></i> Stationary Alert</a></li>
</ul>
</div>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#toggleGeoFencing" data-parent="#sidenav01" class="collapsed">
<span class="fw fw-map-location"></span> Geo Fencing <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleGeoFencing" style="height: 0px;">
<ul class="nav nav-list">
<li><a data-target="#commonModal" data-toggle="modal"
href="{{@unit.publicUri}}/assets/html_templates/modal/within_alert.html">
<i class="glyphicon glyphicon-edit"></i> Within Alert</a></li>
</ul>
</div>
</li>
</ul>
<!--<div class="uk-offcanvas-bar" style="box-shadow: 3px 14px 13px -2px #211404;">-->
<!--<ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>-->
<!--<li class="uk-parent" style="box-shadow: 0 2px 12px 1px #2D1600;min-height: 50px;line-height: 25px;">-->
<!--<a style="min-height: 50px;">-->
<!--<span style="color: #d58512">WSO<sub style="font-size: medium;">2</sub></span> Geo Dashboard-->
<!--</a>-->
<!--</li>-->
<!--<li class="uk-nav-header">Alerts</li>-->
<!--<li class="uk-parent">-->
<!--<a href="#"><i class="fa fa-pencil-square-o"></i> Set alerts</a>-->
<!--<ul class="uk-nav-sub">-->
<!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/speed_alert.jag"-->
<!--data-target="#commonModal"><i class="fa fa-tachometer"></i> Speed alert</a></li>-->
<!--<li id = "proximity_alert"><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/proximity_alert.jag"-->
<!--data-target="#commonModal"><i class="fa fa-link"></i> Proximity alert</a></li>-->
<!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/stationery_alert.jag"-->
<!--data-target="#commonModal"><i class="fa fa-chain-broken"></i> Stationary alert</a></li>-->
<!--&lt;!&ndash;<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/traffic_point.jag"&ndash;&gt;-->
<!--&lt;!&ndash;data-target="#commonModal"><i class="fa fa-square-o"></i> Congestion Alert</a></li>&ndash;&gt;-->
<!--</ul>-->
<!--</li>-->
<!--<li class="uk-parent">-->
<!--<a href="#"><i class="fa fa-filter"></i> Geo-fencing</a>-->
<!--<ul class="uk-nav-sub">-->
<!--<li><a style="margin-left: 20%;" data-toggle="modal" href="/portal/store/carbon.super/fs/gadget/geo-dashboard/controllers/modals/within_alert.jag"-->
<!--data-target="#commonModal"><i class="fa fa-square-o"></i> Within</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--<li class="uk-sub">-->
<!--<a onclick="-->
<!--$('.removeGeoFence').tooltip(); openTools('Prediction')"><i class="fa fa-paper-plane"></i> Traffic-->
<!--Prediction</a>-->
<!--</li>-->
<!--</ul>
</div>-->
</div>
{{/unless}}
<div id="" style="height: 100vh;">
<!-- Sidebar -->
@ -187,13 +120,6 @@ data-device-location="{{lastLocation}}"></span>
</div>
</div>
<div id="loading">
<div class="loading-indicator">
<div class="progress progress-striped active">
@ -202,7 +128,6 @@ data-device-location="{{lastLocation}}"></span>
</div>
</div>
<div class="modal" id="aboutModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@ -769,6 +694,28 @@ data-device-location="{{lastLocation}}"></span>
{{js "js/app.js" }}
{{js "js/websocket.js" }}
{{js "js/geo_fencing.js" }}
<script type="text/javascript">
$(document).ready(function () {
var geoLocationLink = $(".initGeoLocationLink");
if (geoLocationLink) {
geoLocationLink.on('click', function () {
initializeGeoLocation()
});
{{#if showGeoFencingTools}}
var locationItems = geoLocationLink.closest('li');
var geoToolsMenu = $("<ul/>", {class: 'collapse list-group geo-tools'}).appendTo(locationItems);
geoPublicUri = $("#geo-charts").data("geo-public-uri");
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',
'Add Stationary Alert', 'glyphicon glyphicon-link', geoToolsMenu);
createGeoToolListItem(geoPublicUri + '/assets/html_templates/modal/within_alert.html',
'Add Geo Fence Alert', 'glyphicon glyphicon-edit', geoToolsMenu);
{{/if}}
}
});
</script>
{{/zone}}

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

@ -54,5 +54,6 @@ function onRequest(context) {
} else {
viewModel.lastLocation = stringify({});
}
viewModel.showGeoFencingTools = true;
return viewModel;
}

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

@ -13,7 +13,6 @@ input[type="radio"], input[type="checkbox"] {
#map {
width: auto;
height: 100%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
#loading {
position: absolute;

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

@ -86,7 +86,7 @@
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
z-index: 999;
pointer-events: none;
}
.leaflet-top {

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

@ -31,6 +31,10 @@ $('body').on('hidden.bs.modal', '.modal', function () {
/*Map layer configurations*/
var map;
var zoomLevel = 15;
var tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
function initialLoad() {
if (document.getElementById('map') == null) {
setTimeout(initialLoad, 500); // give everything some time to render
@ -101,6 +105,8 @@ function initializeMap() {
maxZoom: 20,
maxNativeZoom: 18
});
L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
map.zoomControl.setPosition('bottomleft');
map.on('click', function (e) {
$.noty.closeAll();
@ -291,7 +297,7 @@ function focusOnSpatialObject(objectId) {
return true;
}
map.setView(spatialObject.marker.getLatLng(), 15, {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();
@ -315,15 +321,6 @@ var getProviderData = function (timeFrom, timeTo) {
deviceId = deviceDetails.data("deviceid");
deviceType = deviceDetails.data("type");
// $.ajax({
// url: context + '/api/geo-location/' + deviceType + '/' + deviceId + '?from=' + timeFrom + '&to=' + timeTo,
// method: "GET",
// contentType: "application/json",
// async: false,
// success: function (data) {
// tableData = data;
// }
// });
var serviceUrl = '/api/device-mgt/v1.0/geo-services/stats/' + deviceType + '/' + deviceId + '?from=' + timeFrom + '&to=' + timeTo;
invokerUtil.get(serviceUrl,
function (data) {
@ -445,7 +442,7 @@ function InitSpatialObject() {
return true;
}
map.setView(spatialObject.marker.getLatLng(), 15, {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();
@ -510,7 +507,7 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) {
return true;
}
map.setView(spatialObject.marker.getLatLng(), 15, {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();
@ -535,3 +532,11 @@ function clearFocus() {
selectedSpatialObject = null;
}
}
function createGeoToolListItem(link, text, icon, menuRoot) {
var listItem = $("<li/>", { class: 'list-group-item'}).appendTo(menuRoot);
var anchor = $("<a/>", {href: link, text: ' ' + text}).appendTo(listItem);
anchor.attr('data-toggle', 'modal');
anchor.attr('data-target', '#commonModal');
$("<i/>", {class: icon}).prependTo(anchor);
}

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

@ -308,7 +308,12 @@ function updateDrawing(updatedGeoJson) {
}
function viewFence(geoFenceElement,id) {
var geoJson = JSON.parse($(geoFenceElement).attr('data-geoJson').replace(/'/g, '"'));
var geoJson = $(geoFenceElement).attr('data-geoJson');
var matchResults = /(?:"geoFenceGeoJSON"):"{(.*)}"/g.exec(geoJson);
if (matchResults.length > 1) {
geoJson = "{" + matchResults[1] + "}";
}
geoJson = JSON.parse(geoJson.replace(/'/g, '"'));
var queryName = $(geoFenceElement).attr('data-queryName');
var areaName = $(geoFenceElement).attr('data-areaName');
var geometryShape;

1
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
View File

@ -24,7 +24,6 @@ function initStationaryAlert() {
invokerUtil.get(serverUrl, function (response) {
if (response) {
response = JSON.parse(response);
console.log(response);
$(".fence-not-exist").hide();
for (var index in response) {
var alert = response[index];

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

@ -638,7 +638,7 @@ function initializeOnAlertWebSocket() {
onAlertWebsocket.onopen = webSocketOnAlertOpen;
}
function initializeGeoFencing() {
function initializeGeoLocation() {
var deviceDetails = $(".device-id");
deviceId = deviceDetails.data("deviceid");
deviceType = deviceDetails.data("type");

15
components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.theme/public/css/custom-common.css
View File

@ -275,3 +275,18 @@ header .username {
ul#noty_topRight_layout_container li{
margin-bottom: 10px;
}
.list-group-item.active > .list-group{
display: block;
margin-bottom: 0px;
}
.list-group-item.active > .list-group > .list-group-item > a{
background: none;
}
.list-group-item.active > .list-group > .list-group-item > a:active,
.list-group-item.active > .list-group > .list-group-item > a:focus,
.list-group-item.active > .list-group > .list-group-item > a:hover{
color : whitesmoke;
}