Remake Options view with angular. Uses API.
This commit is contained in:
Kyle Johnson
parent
ad65fa1820
commit
4364c73143
|
|
@ -36,9 +36,30 @@ ZoneMinder.factory('Console', function($http) {
|
||||||
|
|
||||||
ZoneMinder.factory('Config', function($http) {
|
ZoneMinder.factory('Config', function($http) {
|
||||||
return {
|
return {
|
||||||
|
getCategories: function() {
|
||||||
|
return $http.get('/api/configs/categories.json');
|
||||||
|
},
|
||||||
|
getCategory: function(category) {
|
||||||
|
return $http.get('/api/configs/categories/' + category + '.json')
|
||||||
|
},
|
||||||
setConfigModel: function() {
|
setConfigModel: function() {
|
||||||
return $http.get('/api/configs/keyValue.json')
|
return $http.get('/api/configs/keyValue.json')
|
||||||
},
|
},
|
||||||
|
updateOption: function(configId, newValue) {
|
||||||
|
var putData = "Config[Value]=" + newValue;
|
||||||
|
//var postData = {Config[Value]: configValue};
|
||||||
|
|
||||||
|
|
||||||
|
return $http({
|
||||||
|
method: 'POST',
|
||||||
|
url: '/api/configs/' + configId + '.json',
|
||||||
|
data: putData,
|
||||||
|
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//return $http.post ('/api/configs/' + configId + '.json', postData)
|
||||||
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,4 +53,40 @@ ZoneMinder.controller('ConfigController', function($scope, $http, Config) {
|
||||||
$scope.myModel = {configData: results.data.keyValues};
|
$scope.myModel = {configData: results.data.keyValues};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Config.getCategories().then(function(results) {
|
||||||
|
// List of category names for the tabs
|
||||||
|
$scope.categories = results.data.categories;
|
||||||
|
|
||||||
|
// For each category, add all config options belonging to it to the categories array
|
||||||
|
angular.forEach(results['data']['categories'], function(value, key) {
|
||||||
|
console.log(key);
|
||||||
|
var cat = results.data.categories[key].Config.Category;
|
||||||
|
catman(cat);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function catman(category) {
|
||||||
|
Config.getCategory(category).then(function(results) {
|
||||||
|
$scope[category] = results.data.config;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.updateConfig = function(configId, configName) {
|
||||||
|
var newValue = $scope.myModel.configData[configName];
|
||||||
|
var i = document.getElementById(configName).parentNode.parentNode;
|
||||||
|
var s = i.getElementsByTagName("span");
|
||||||
|
s = s[0];
|
||||||
|
|
||||||
|
Config.updateOption(configId, newValue).then(function(results) {
|
||||||
|
if (results.statusText == 'OK') {
|
||||||
|
i.className = i.className + " has-success has-feedback";
|
||||||
|
s.className = s.className + " glyphicon glyphicon-ok";
|
||||||
|
} else {
|
||||||
|
i.className = i.className + " has-failure has-feedback";
|
||||||
|
s.className = s.className + " glyphicon glyphicon-ok";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,323 +1,24 @@
|
||||||
<?php
|
<?php xhtmlHeaders(__FILE__, $SLANG['Options'] ); ?>
|
||||||
//
|
|
||||||
// ZoneMinder web options view file, $Date$, $Revision$
|
|
||||||
// Copyright (C) 2001-2008 Philip Coombes
|
|
||||||
//
|
|
||||||
// This program is free software; you can redistribute it and/or
|
|
||||||
// modify it under the terms of the GNU General Public License
|
|
||||||
// as published by the Free Software Foundation; either version 2
|
|
||||||
// of the License, or (at your option) any later version.
|
|
||||||
//
|
|
||||||
// This program is distributed in the hope that it will be useful,
|
|
||||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
// GNU General Public License for more details.
|
|
||||||
//
|
|
||||||
// You should have received a copy of the GNU General Public License
|
|
||||||
// along with this program; if not, write to the Free Software
|
|
||||||
// Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
|
|
||||||
//
|
|
||||||
|
|
||||||
if ( !canView( 'System' ) )
|
|
||||||
{
|
|
||||||
$view = "error";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$canEdit = canEdit( 'System' );
|
|
||||||
|
|
||||||
$tabs = array();
|
|
||||||
$tabs['skins'] = $SLANG['Display']; // change me to be supported by SLANG...
|
|
||||||
$tabs['system'] = $SLANG['System'];
|
|
||||||
$tabs['config'] = $SLANG['Config'];
|
|
||||||
$tabs['paths'] = $SLANG['Paths'];
|
|
||||||
$tabs['web'] = $SLANG['Web'];
|
|
||||||
$tabs['images'] = $SLANG['Images'];
|
|
||||||
$tabs['logging'] = $SLANG['Logging'];
|
|
||||||
$tabs['network'] = $SLANG['Network'];
|
|
||||||
$tabs['mail'] = $SLANG['Email'];
|
|
||||||
$tabs['upload'] = $SLANG['Upload'];
|
|
||||||
$tabs['x10'] = $SLANG['X10'];
|
|
||||||
$tabs['highband'] = $SLANG['HighBW'];
|
|
||||||
$tabs['medband'] = $SLANG['MediumBW'];
|
|
||||||
$tabs['lowband'] = $SLANG['LowBW'];
|
|
||||||
$tabs['phoneband'] = $SLANG['PhoneBW'];
|
|
||||||
$tabs['eyeZm'] = "eyeZm";
|
|
||||||
$tabs['users'] = $SLANG['Users'];
|
|
||||||
|
|
||||||
if ( isset($_REQUEST['tab']) )
|
|
||||||
$tab = validHtmlStr($_REQUEST['tab']);
|
|
||||||
else
|
|
||||||
$tab = "system";
|
|
||||||
|
|
||||||
$focusWindow = true;
|
|
||||||
|
|
||||||
xhtmlHeaders( __FILE__, $SLANG['Options'] );
|
|
||||||
?>
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<?php include("header.php"); ?>
|
<?php include("header.php"); ?>
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div id="content">
|
|
||||||
<ul class="tabList">
|
|
||||||
<?php
|
|
||||||
foreach ( $tabs as $name=>$value )
|
|
||||||
{
|
|
||||||
if ( $tab == $name )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<li class="active"><?= $value ?></li>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<li><a href="?view=<?= $view ?>&tab=<?= $name ?>"><?= $value ?></a></li>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</ul>
|
|
||||||
<div class="clear"></div>
|
|
||||||
<?php
|
|
||||||
if($tab == 'skins') {
|
|
||||||
$current_skin = $_COOKIE['zmSkin'];
|
|
||||||
if (isset($_GET['skin-choice'])) {
|
|
||||||
setcookie('zmSkin',$_GET['skin-choice'], time()+3600*24*30*12*10 );
|
|
||||||
//header("Location: index.php?view=options&tab=skins&reset_parent=1");
|
|
||||||
echo "<script type=\"text/javascript\">window.opener.location.reload();window.location.href=\"{$_SERVER['PHP_SELF']}?view={$view}&tab={$tab}\"</script>";
|
|
||||||
}
|
|
||||||
|
|
||||||
?>
|
<div class="container-fluid">
|
||||||
<form name="optionsForm" method="get" action="<?= $_SERVER['PHP_SELF'] ?>">
|
<div class="container" ng-controller="ConfigController">
|
||||||
<input type="hidden" name="view" value="<?= $view ?>"/>
|
<ul class="nav nav-tabs" role="tablist" id="myTab">
|
||||||
<input type="hidden" name="tab" value="<?= $tab ?>"/>
|
<li role="presentation" ng-repeat="category in categories">
|
||||||
<table class="contentTable major optionTable" cellspacing="0">
|
<a href="#{{category.Config.Category}}" aria-controls="{{category.Config.Category}}" role="tab" data-toggle="tab">{{category.Config.Category}}</a>
|
||||||
<thead><tr><th><?= $SLANG['Name'] ?></th><th><?= $SLANG['Description'] ?></th> <th><?= $SLANG['Value'] ?></th></tr></thead>
|
</li>
|
||||||
<tbody>
|
</ul>
|
||||||
<td>ZM_SKIN</td>
|
|
||||||
<td><?php echo $SLANG['SkinDescription']; ?></td>
|
|
||||||
<td><select name="skin-choice">
|
|
||||||
<?php
|
|
||||||
foreach(glob('skins/*',GLOB_ONLYDIR) as $dir) {
|
|
||||||
$dir = basename($dir);
|
|
||||||
echo '<option value="'.$dir.'" '.($current_skin==$dir ? 'SELECTED' : '').'>'.$dir.'</option>';
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</table>
|
|
||||||
<div id="contentButtons">
|
|
||||||
<input type="submit" value="<?= $SLANG['Save'] ?>"<?= $canEdit?'':' disabled="disabled"' ?>/>
|
|
||||||
<input type="button" value="<?= $SLANG['Cancel'] ?>" onclick="closeWindow();"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<?php
|
<div class="tab-content">
|
||||||
}
|
<div role="tabpanel" class="form-horizontal tab-pane" id="{{category.Config.Category}}" ng-repeat="category in categories" angular-html-bind="{{ category.Config.Category }}"></div>
|
||||||
elseif ( $tab == "users" )
|
</div>
|
||||||
{
|
</div> <!-- End ConfigController -->
|
||||||
?>
|
</div>
|
||||||
<form name="userForm" method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
|
|
||||||
<input type="hidden" name="view" value="<?= $view ?>"/>
|
<?php include("footer.php"); ?>
|
||||||
<input type="hidden" name="tab" value="<?= $tab ?>"/>
|
|
||||||
<input type="hidden" name="action" value="delete"/>
|
|
||||||
<table id="contentTable" class="major userTable" cellspacing="0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="colUsername"><?= $SLANG['Username'] ?></th>
|
|
||||||
<th class="colLanguage"><?= $SLANG['Language'] ?></th>
|
|
||||||
<th class="colEnabled"><?= $SLANG['Enabled'] ?></th>
|
|
||||||
<th class="colStream"><?= $SLANG['Stream'] ?></th>
|
|
||||||
<th class="colEvents"><?= $SLANG['Events'] ?></th>
|
|
||||||
<th class="colControl"><?= $SLANG['Control'] ?></th>
|
|
||||||
<th class="colMonitors"><?= $SLANG['Monitors'] ?></th>
|
|
||||||
<th class="colSystem"><?= $SLANG['System'] ?></th>
|
|
||||||
<th class="colBandwidth"><?= $SLANG['Bandwidth'] ?></th>
|
|
||||||
<th class="colMonitor"><?= $SLANG['Monitor'] ?></th>
|
|
||||||
<th class="colMark"><?= $SLANG['Mark'] ?></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<?php
|
|
||||||
$sql = "select * from Monitors order by Sequence asc";
|
|
||||||
$monitors = array();
|
|
||||||
foreach( dbFetchAll( $sql ) as $monitor )
|
|
||||||
{
|
|
||||||
$monitors[$monitor['Id']] = $monitor;
|
|
||||||
}
|
|
||||||
|
|
||||||
$sql = "select * from Users";
|
|
||||||
foreach( dbFetchAll( $sql ) as $row )
|
|
||||||
{
|
|
||||||
$userMonitors = array();
|
|
||||||
if ( !empty($row['MonitorIds']) )
|
|
||||||
{
|
|
||||||
foreach ( explode( ",", $row['MonitorIds'] ) as $monitorId )
|
|
||||||
{
|
|
||||||
$userMonitors[] = $monitors[$monitorId]['Name'];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<tr>
|
|
||||||
<td class="colUsername"><?= makePopupLink( '?view=user&uid='.$row['Id'], 'zmUser', 'user', validHtmlStr($row['Username']).($user['Username']==$row['Username']?"*":""), $canEdit ) ?></td>
|
|
||||||
<td class="colLanguage"><?= $row['Language']?validHtmlStr($row['Language']):'default' ?></td>
|
|
||||||
<td class="colEnabled"><?= $row['Enabled']?$SLANG['Yes']:$SLANG['No'] ?></td>
|
|
||||||
<td class="colStream"><?= validHtmlStr($row['Stream']) ?></td>
|
|
||||||
<td class="colEvents"><?= validHtmlStr($row['Events']) ?></td>
|
|
||||||
<td class="colControl"><?= validHtmlStr($row['Control']) ?></td>
|
|
||||||
<td class="colMonitors"><?= validHtmlStr($row['Monitors']) ?></td>
|
|
||||||
<td class="colSystem"><?= validHtmlStr($row['System']) ?></td>
|
|
||||||
<td class="colBandwidth"><?= $row['MaxBandwidth']?$bwArray[$row['MaxBandwidth']]:' ' ?></td>
|
|
||||||
<td class="colMonitor"><?= $row['MonitorIds']?(join( ", ", $userMonitors )):" " ?></td>
|
|
||||||
<td class="colMark"><input type="checkbox" name="markUids[]" value="<?= $row['Id'] ?>" onclick="configureDeleteButton( this );"<?php if ( !$canEdit ) { ?> disabled="disabled"<?php } ?>/></td>
|
|
||||||
</tr>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div id="contentButtons">
|
|
||||||
<input type="button" value="<?= $SLANG['AddNewUser'] ?>" onclick="createPopup( '?view=user&uid=0', 'zmUser', 'user' );"<?php if ( !canEdit( 'System' ) ) { ?> disabled="disabled"<?php } ?>/><input type="submit" name="deleteBtn" value="<?= $SLANG['Delete'] ?>" disabled="disabled"/><input type="button" value="<?= $SLANG['Cancel'] ?>" onclick="closeWindow();"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
if ( $tab == "system" )
|
|
||||||
{
|
|
||||||
$configCats[$tab]['ZM_LANG_DEFAULT']['Hint'] = join( '|', getLanguages() );
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<form name="optionsForm" method="post" action="<?= $_SERVER['PHP_SELF'] ?>">
|
|
||||||
<input type="hidden" name="view" value="<?= $view ?>"/>
|
|
||||||
<input type="hidden" name="tab" value="<?= $tab ?>"/>
|
|
||||||
<input type="hidden" name="action" value="options"/>
|
|
||||||
<table id="contentTable" class="major optionTable" cellspacing="0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th><?= $SLANG['Name'] ?></th>
|
|
||||||
<th><?= $SLANG['Description'] ?></th>
|
|
||||||
<th><?= $SLANG['Value'] ?></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<?php
|
|
||||||
$configCat = $configCats[$tab];
|
|
||||||
foreach ( $configCat as $name=>$value )
|
|
||||||
{
|
|
||||||
$shortName = preg_replace( '/^ZM_/', '', $name );
|
|
||||||
$optionPromptText = !empty($OLANG[$shortName])?$OLANG[$shortName]['Prompt']:$value['Prompt'];
|
|
||||||
?>
|
|
||||||
<tr>
|
|
||||||
<td><?= $shortName ?></td>
|
|
||||||
<td><?= validHtmlStr($optionPromptText) ?> (<?= makePopupLink( '?view=optionhelp&option='.$name, 'zmOptionHelp', 'optionhelp', '?' ) ?>)</td>
|
|
||||||
<?php
|
|
||||||
if ( $value['Type'] == "boolean" )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><input type="checkbox" id="<?= $name ?>" name="newConfig[<?= $name ?>]" value="1"<?php if ( $value['Value'] ) { ?> checked="checked"<?php } ?><?= $canEdit?'':' disabled="disabled"' ?>/></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
elseif ( preg_match( "/\|/", $value['Hint'] ) )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td class="nowrap">
|
|
||||||
<?php
|
|
||||||
$options = explode( '|', $value['Hint'] );
|
|
||||||
if ( count( $options ) > 3 )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<select name="newConfig[<?= $name ?>]"<?= $canEdit?'':' disabled="disabled"' ?>>
|
|
||||||
<?php
|
|
||||||
foreach ( $options as $option )
|
|
||||||
{
|
|
||||||
if ( preg_match( '/^([^=]+)=(.+)$/', $option, $matches ) )
|
|
||||||
{
|
|
||||||
$optionLabel = $matches[1];
|
|
||||||
$optionValue = $matches[2];
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
$optionLabel = $optionValue = $option;
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<option value="<?= $optionValue ?>"<?php if ( $value['Value'] == $optionValue ) { echo ' selected="selected"'; } ?>><?= htmlspecialchars($optionLabel) ?></option>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</select>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
foreach ( $options as $option )
|
|
||||||
{
|
|
||||||
if ( preg_match( '/^([^=]+)=(.+)$/', $option ) )
|
|
||||||
{
|
|
||||||
$optionLabel = $matches[1];
|
|
||||||
$optionValue = $matches[2];
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
$optionLabel = $optionValue = $option;
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
<span><input type="radio" id="<?= $name.'_'.preg_replace( '/[^a-zA-Z0-9]/', '', $optionValue ) ?>" name="newConfig[<?= $name ?>]" value="<?= $optionValue ?>"<?php if ( $value['Value'] == $optionValue ) { ?> checked="checked"<?php } ?><?= $canEdit?'':' disabled="disabled"' ?>/> <?= htmlspecialchars($optionLabel) ?></span>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
elseif ( $value['Type'] == "text" )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><textarea id="<?= $name ?>" name="newConfig[<?= $name ?>]" rows="5" cols="40"<?= $canEdit?'':' disabled="disabled"' ?>><?= validHtmlStr($value['Value']) ?></textarea></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
elseif ( $value['Type'] == "integer" )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><input type="text" id="<?= $name ?>" name="newConfig[<?= $name ?>]" value="<?= validHtmlStr($value['Value']) ?>" class="small"<?= $canEdit?'':' disabled="disabled"' ?>/></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
elseif ( $value['Type'] == "hexadecimal" )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><input type="text" id="<?= $name ?>" name="newConfig[<?= $name ?>]" value="<?= validHtmlStr($value['Value']) ?>" class="medium"<?= $canEdit?'':' disabled="disabled"' ?>/></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
elseif ( $value['Type'] == "decimal" )
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><input type="text" id="<?= $name ?>" name="newConfig[<?= $name ?>]" value="<?= validHtmlStr($value['Value']) ?>" class="small"<?= $canEdit?'':' disabled="disabled"' ?>/></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
?>
|
|
||||||
<td><input type="text" id="<?= $name ?>" name="newConfig[<?= $name ?>]" value="<?= validHtmlStr($value['Value']) ?>" class="large"<?= $canEdit?'':' disabled="disabled"' ?>/></td>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</tr>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div id="contentButtons">
|
|
||||||
<input type="submit" value="<?= $SLANG['Save'] ?>"<?= $canEdit?'':' disabled="disabled"' ?>/><input type="button" value="<?= $SLANG['Cancel'] ?>" onclick="closeWindow();"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue