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
parent
43728aa6f8
commit
1c87dd00fd
|
|
@ -83,6 +83,38 @@ ZoneMinder.config(function($stateProvider, $urlRouterProvider) {
|
||||||
templateUrl: '/views/monitor.detail.misc.html'
|
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', {
|
.state('events', {
|
||||||
url: '/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) {
|
ZoneMinder.directive('angularHtmlBind', function($compile) {
|
||||||
return function(scope, elm, attrs) {
|
return function(scope, elm, attrs) {
|
||||||
scope.$watch(attrs.angularHtmlBind, function(newValue, oldValue) {
|
scope.$watch(attrs.angularHtmlBind, function(newValue, oldValue) {
|
||||||
|
|
|
||||||
|
|
@ -426,3 +426,6 @@ ZoneMinder.controller('HostController', function($scope, Host) {
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
ZoneMinder.controller('ZonesController', function($scope, Zones) {
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,8 @@
|
||||||
|
|
||||||
<div class="row" ng-hide="grid">
|
<div class="row" ng-hide="grid">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<table class="table table-striped">
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped table-condensed">
|
||||||
<tr>
|
<tr>
|
||||||
<th>Id</th>
|
<th>Id</th>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
|
|
@ -77,7 +78,9 @@
|
||||||
</td>
|
</td>
|
||||||
<td ng-bind="monitor.Type"></td>
|
<td ng-bind="monitor.Type"></td>
|
||||||
<td ng-bind="monitor.Enabled"></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>
|
<td><button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">{{ monitor.deleteText }}</button></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tfoot>
|
<tfoot>
|
||||||
|
|
@ -86,7 +89,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- end ng-hide fresh -->
|
</div> <!-- end ng-hide fresh -->
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue