ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add zone view / edit functionality to new ui 

You should now be able to see a monitor's zones by clicking on the
respective 'Edit' link.  From there, you'll see a list view of that
monitor's Zones.

From there, you can click on the Zone name, which will bring up the
details for that zone.

You can not yet save zones, and not all of the values for that zone
are displayed.
This commit is contained in:
Kyle Johnson 2015-02-24 11:18:01 -05:00
parent 43728aa6f8
commit 1c87dd00fd
5 changed files with 201 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/js/app.js
View File

@ -83,6 +83,38 @@ ZoneMinder.config(function($stateProvider, $urlRouterProvider) {
templateUrl: '/views/monitor.detail.misc.html'
})
///////////////////////////
// Zones - Edit and List //
///////////////////////////
.state('zones', {
url: '/zones/{mid:[0-9]{1,4}}',
templateUrl: '/views/zones.html',
resolve: {
mid: function($stateParams) {
return { value: $stateParams.mid };
},
zones: function(Zones, $stateParams) {
return Zones.getZones($stateParams.mid);
}
},
controller: function($scope, mid, zones) {
$scope.mid = mid.value;
$scope.zones = zones.data.zones;
}
})
.state('zones.edit', {
url: '/edit/{zid:[0-9]{1,4}}',
templateUrl: '/views/zones.edit.html',
resolve: {
zone: function(Zones, $stateParams) {
return Zones.getZone($stateParams.zid);
}
},
controller: function($scope, zone) {
$scope.zone = zone.data.zone.Zone;
}
})
.state('events', {
url: '/events',
@ -242,6 +274,20 @@ ZoneMinder.factory('Config', function($http) {
};
});
ZoneMinder.factory('Zones', function($http) {
return {
getZones: function(mid) {
return $http.get('/api/zones/forMonitor/'+mid+'.json')
},
getZone: function(zid) {
return $http.get('/api/zones/'+zid+'.json')
},
createZoneImage: function(mid) {
return $http.post('/api/zones/createZoneImage/'+mid+'.json');
}
};
});
ZoneMinder.directive('angularHtmlBind', function($compile) {
return function(scope, elm, attrs) {
scope.$watch(attrs.angularHtmlBind, function(newValue, oldValue) {

3
web/js/controllers.js
View File

@ -426,3 +426,6 @@ ZoneMinder.controller('HostController', function($scope, Host) {
});
});
ZoneMinder.controller('ZonesController', function($scope, Zones) {
});

9
web/views/monitor.list.html
View File

@ -50,7 +50,8 @@
<div class="row" ng-hide="grid">
<div class="col-md-12">
<table class="table table-striped">
<div class="table-responsive">
<table class="table table-striped table-condensed">
<tr>
<th>Id</th>
<th>Name</th>
@ -77,7 +78,9 @@
</td>
<td ng-bind="monitor.Type"></td>
<td ng-bind="monitor.Enabled"></td>
<td ng-bind="monitor.Zones"></td>
<td>
<a ui-sref="zones({mid:monitor.Id})">Edit</a>
</td>
<td><button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">{{ monitor.deleteText }}</button></td>
</tr>
<tfoot>
@ -86,7 +89,7 @@
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div> <!-- end ng-hide fresh -->

127
web/views/zones.edit.html Normal file
View File

@ -0,0 +1,127 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label" for="Name">Name</label>
<div class="col-sm-8"> <input class="form-control" ng-model="zone.Name" id="Name" type="text" required> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="Type">Type</label>
<div class="col-sm-8">
<select class="form-control" ng-model="zone.Type" id="Type">
<option value="Active">Active</option>
<option value="Inclusive">Inclusive</option>
<option value="Exclusive">Exclusive</option>
<option value="Preclusive">Preclusive</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="presetSelector">Preset</label>
<div class="col-sm-8">
<select class="form-control" ng-model="zone.presetSelector" id="presetSelector">
<option value="1">Default</option>
<option value="2">Fast, low sensitivity</option>
<option value="3">Fast, medium sensitivity</option>
<option value="4">Fast, high sensitivity</option>
<option value="5">Best, low sensitivity</option>
<option value="6">Best, medium sensitivity</option>
<option value="7">Best, high sensitivity</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="Units">Units</label>
<div class="col-sm-8">
<select class="form-control" ng-model="zone.Units" id="Units">
<option value="Pixels">Pixels</option>
<option value="Percent">Percent</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Alarm Colour (Red/Green/Blue)</label>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbR" type="text"> </div>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbG" type="text"> </div>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.newAlarmRgbB" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="CheckMethod">Alarm Check Method</label>
<div class="col-sm-8">
<select class="form-control" ng-model="zone.CheckMethod" id="CheckMethod">
<option value="AlarmedPixels">AlarmedPixels</option>
<option value="FilteredPixels">FilteredPixels</option>
<option value="Blobs">Blobs</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Min/Max Pixel Threshold (0-255)</label>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.MinPixelThreshold" type="text"> </div>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.MaxPixelThreshold" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Filter Width/Height (pixels)</label>
<div class="col-sm-2"><input class="form-control" ng-model="zone.FilterX" type="text"> </div>
<div class="col-sm-2"><input class="form-control" ng-model="zone.FilterY" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Zone Area</label>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.TempArea" type="text" disabled> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Min/Max Alarmed Area</label>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MinAlarmPixels" type="text"> </div>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxAlarmPixels" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Min/Max Filtered Area</label>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MinFilterPixels" type="text"> </div>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxFilterPixels" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Min/Max Blob Area</label>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MinBlobPixels" type="text"> </div>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxBlobPixels" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Min/Max Blobs</label>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MinBlobs" type="text"> </div>
<div class="col-sm-2"><input class="form-control" ng-model="zone.MaxBlobs" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Overload Frame Ignore Count</label>
<div class="col-sm-2"> <input class="form-control" ng-model="zone.OverloadFrames" type="text"> </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Extend Alarm Frame Count</label>
<div class="col-sm-2"> <input class="form-control" disabled="" ng-model="zone.ExtendAlarmFrames" type="text"> </div>
</div>
</form>
</div> <!-- End .col-md-5 -->
<div class="col-md-7">
<div class="well center-block">
<img class="img-responsive" ng-src="/images/Zones{{ zone.MonitorId }}.jpg" alt="Zone Image" />
</div>
</div> <!-- End .col-md-6 -->
</div> <!-- End .row -->
</div> <!-- End .container-fluid -->

19
web/views/zones.html Normal file
View File

@ -0,0 +1,19 @@
<table class="table-responsive">
<table class="table table-striped table-condensed">
<tr>
<th>Name</th>
<th>Type</th>
<th>Area</th>
<th>Delete</th>
</tr>
<tr ng-repeat="zone in zones">
<td><a ui-sref="zones.edit({zid:zone.Zone.Id})">{{ zone.Zone.Name }}</a></td>
<td>{{ zone.Zone.Type }}</td>
<td>{{ zone.Zone.Area }}</td>
<td><button type="button" class="btn btn-sm btn-danger">Delete</button></td>
</tr>
</table>
</div>
<div ui-view></div>