Sample Config Settings AngularJS App

dg-config-setter-input.html

<div>

    <div ng-switch="controller.field_type">
        
        <!-- bool -->
        <div ng-switch-when="bool">
            <button class="btn btn-default btn-block" 
                    ng-class="controller.config_value ? 'btn-info' : 'btn-warning'"
                    ng-model="controller.config_value" 
                    ng-click="updateBool()">
                {{controller.config_value}}
            </button>
        </div>
        
        <!-- enum -->
        <div ng-switch-when="enum">
            <select class="form-control"
                    ng-class="log_indicator" 
                    ng-model="controller.config_value" 
                    ng-options="o as o for o in controller.field_values" 
                    ng-change="update()">
            </select>
        </div>
        
        <!-- text -->
        <div ng-switch-when="text">
            <input class="form-control" ng-model="controller.config_value" ng-blur="update()" />
        </div>
    </div>
</div>

dg-config-setter.html

<div class="rounded box">
    <h4>
        {{controller.config_key | unSnakeCase }}<br />
        <small>{{controller.config_group | unSnakeCase }}</small>        
    </h4>
    <div dg-config-setter-input="controller"></div>
    <br />
    <small>notes</small>
    <textarea class="form-control" readonly>{{controller.notes}}</textarea>
    <div class="text-right">
        <small>updated at: <b>{{controller.updated_at}}</b></small>
    </div>
</div>

index.js

var ConfigValuesApp;

ConfigValuesApp = angular.module('ConfigValuesApp', [])
ConfigValuesApp.controller('ConfigValuesController', ConfigValuesController);

/**
 * Data Validation Controller
 */
function ConfigValuesController($scope, $http, $parse, $log)
{	
    $http.get( "config_values.php" ).then(function(response){
        $scope.controllers = response.data
    })
}

/**
 * template for configuration display with notes and labels
 */
ConfigValuesApp.directive("dgConfigSetter", function($http){
    return{
        scope: true,
        templateUrl: 'dg-config-setter.html'
    }
});

/**
 * a variety of inputs with some formatting based on the value.
 * boolean, enum, and textfield are currently available.
 */
ConfigValuesApp.directive("dgConfigSetterInput", function($http){ 

    var updateValue = function(controller){
        controller.domain = "shopkeeper";
        return $http.get("update-config.php", { params: controller });
    }
 
    var logIndicator = function(value){
        switch(value){
            case 0:   return 'btn-primary'; break;
            case 100: return 'btn-info';    break;
            case 200: return '';            break; 
            case 250: return '';            break; 
            case 300: return 'btn-success'; break;
            case 400: return 'btn-warning'; break;
            case 500: return 'btn-danger';  break;
            case 550: return 'btn-danger';  break;
            case 600: return 'btn-danger';  break;
            default:  return 'btn-danger';  break;
        }
    }

    return{
        templateUrl: 'dg-config-setter-input.html',
        scope: true,
        link: function(scope, element, attrs) 
        {
            var promise;
            scope.controller.config_value = angular.fromJson(scope.controller.config_value);
            scope.controller.field_values = angular.fromJson(scope.controller.field_values);
            scope.updateBool = function(){
                scope.controller.config_value = !angular.fromJson(scope.controller.config_value);
                scope.update();
            }
            scope.update = function(){
                element.addClass('working');
                promise = updateValue(scope.controller);
                promise.then(function(response){
                    if(response.data.result == 'success'){
                        element.removeClass('working');
                        scope.log_indicator = logIndicator(scope.controller.config_value);
                    } 
                });
            }
            scope.log_indicator = logIndicator(scope.controller.config_value);
        }
    }
});

/**
 * unSnakeCase filter
 * 'hello_world' becomes 'Hello World'
 */
ConfigValuesApp.filter('unSnakeCase', function() {
	return function(input) {
		input = input.replace(/_/g, ' ');
		return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
	};
})

index.php

<?php
require("common.php");
$auth = new Auth(893);
?><html>
<head>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		a:link   { color:black; }
		a:visited{ color:black; }
		a:hover  { color:black; text-decoration:none; text-shadow:1px 1px 0px #CCC; }
		.rounded { border-radius: 10px;  }
		.box     { border:3px solid #CCC; padding:10px; margin-bottom:30px; }
		.working { outline: 2px solid orange; }
	</style>
	<script src="node_modules/jquery/dist/jquery.min.js"></script>
	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
	<?=$auth->addLogInOutScript()?>
</head>
<body>

<div class="container" ng-app="ConfigValuesApp">

	<div class="row">
		<?=$auth->getLogInOutDisplay()?>
	</div>

	<div class="row" ng-controller="ConfigValuesController">

		<h1>Configuration Settings</h1>
		<div id="dvContainer">
			<div class="col-md-3" ng-repeat="controller in controllers">
				<div dg-config-setter></div>
			</div>
		</div>
		<!-- #dvContainer --> 

	</div>
	<!-- ng-controller="ConfigValuesController" -->

</div>
<!-- ng-app="ConfigValuesApp" -->

<script src="index.js"></script>
</body>