Merge pull request #1538 from emanuelschuetze/config

Angular template for config app.
This commit is contained in:
Oskar Hahn 2015-06-27 09:46:15 +02:00
commit 370f2a2360
4 changed files with 101 additions and 1 deletions

View File

@ -239,10 +239,21 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
abstract: true,
template: "<ui-view/>",
})
// version
.state('version', {
url: '/version',
controller: 'VersionCtrl',
})
//config
.state('config', {
url: '/config',
controller: 'ConfigCtrl',
resolve: {
configOption: function($http) {
return $http({ 'method': 'OPTIONS', 'url': '/rest/config/config/' });
}
}
})
// customslide
.state('core.customslide', {
url: '/customslide',
@ -331,6 +342,35 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
editableOptions.theme = 'bs3';
})
// html-tag os-form-field to generate generic from fields
// TODO: make it possible to use other fields then config fields
.directive('osFormField', function($parse, Config) {
function getHtmlType(type) {
return {
string: 'text',
integer: 'number',
boolean: 'checkbox',
choice: 'radio',
}[type];
}
return {
restrict: 'E',
scope: true,
templateUrl: '/static/templates/config-form-field.html',
link: function ($scope, iElement, iAttrs, controller, transcludeFn) {
var field = $parse(iAttrs.field)($scope);
var config = Config.get(field.key);
$scope.type = getHtmlType(field.input_type);
$scope.label = field.label;
$scope.id = 'field-' + field.id;
$scope.value = config.value;
$scope.help_text = field.help_text;
}
}
})
.controller("LanguageCtrl", function ($scope, gettextCatalog) {
// controller to switch app language
// TODO: detect browser language for default language
@ -387,6 +427,23 @@ angular.module('OpenSlidesApp.core.site', ['OpenSlidesApp.core'])
});
})
// Config Controller
.controller('ConfigCtrl', function($scope, Config, configOption) {
Config.bindAll({}, $scope, 'configs');
$scope.configGroups = configOption.data.config_groups;
// save changed config value
$scope.save = function(key, value, type) {
// TODO: find a better way to check the type without using of
// the extra parameter 'type' from template
if (type == 'number') {
value = parseInt(value);
}
Config.get(key).value = value;
Config.save(key);
}
})
// Customslide Controller
.controller('CustomslideListCtrl', function($scope, Customslide) {
Customslide.bindAll({}, $scope, 'customslides');

View File

@ -0,0 +1,15 @@
<div class="form-group">
<label>{{ label }}</label>
<div class="input-group">
<input ng-model="value" ng-change="save(configOption.key, value, type)" id="{{ id }}" type="{{ type }}"
class="form-control">
<span class="input-group-btn">
<button ng-click="value=configOption.default_value; save(configOption.key, configOption.default_value, type)" class="btn btn-default" translate>
<i class="fa fa-undo"></i>
<translate>Reset</translate>
</button>
</span>
</div>
<p ng-if="help_text" class="help-block">{{ help_text }}</p>
</div>

View File

@ -0,0 +1,27 @@
<h1 translate>Settings</h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!-- generate config groups -->
<div ng-repeat="group in configGroups">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-{{ group.name }}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{ group.name }}"
aria-expanded="false" aria-controls="{{ group.name }}" translate>
{{ group.name }}
</a>
</h4>
</div>
<div id="{{ group.name }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{ group.name }}">
<div class="panel-body">
<div ng-repeat="subgroup in group.subgroups">
<h3>{{ subgroup.name }}</h3>
<div ng-repeat="configOption in subgroup.items">
<os-form-field field="configOption"></os-form-field>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -163,7 +163,7 @@
<span class="text" translate>Files</span>
</a>
<li>
<a href="#TODO">
<a ui-sref="config">
<span class="ico"><i class="fa fa-cog fa-lg"></i></span>
<span class="text" translate>Settings</span>
</a>
@ -191,6 +191,7 @@
<script src="static/js/app.js"></script>
<script src="static/js/core.js"></script>
<script src="static/js/config/config.js"></script>
<script src="static/js/agenda/agenda.js"></script>
<script src="static/js/motions/motions.js"></script>
<script src="static/js/assignments/assignments.js"></script>