the-blender/public/view/setting.html

An automatic and connected cocktail dispenser

<div class="panel panel-primary" ng-hide="manageBlender">
	<div class="panel-heading">Community</div>
	<div class="panel-body">
		<ul class="list-unstyled">
			<li>Connected to : <span class="label label-default">{{ connectedServer }}</span></li>
		</ul>
	</div>
</div>

<div class="panel panel-primary vrap-manage-blender" ng-show="manageBlender" ng-controller="manageBlenderController">
	<div class="panel-heading">
        <h3>Manage the blender</h3>
    </div>
	<ul class="list-group">
		<li class="list-group-item" ng-repeat="module in modules">
			<div class="clearfix">
				<h3 class="pull-left">{{ module.order }}</h3>
				<button class="btn btn-default pull-right" ng-click="toggleEditModule(module)">
					<i class="glyphicon glyphicon-pencil" title="Edit the module"></i>
				</button>
			</div>

			<ul class="list-unstyled" ng-hide="module.edit">
				<li>Pins : {{ module.pins }}</li>
				<li>Type : {{ module.type }}</li>
				<li>Content : <span vrap-Ingredient-Name uuid="module.content"></span></li>
			</ul>
            <form role="form" name="moduleEditForm" ng-submit="editModule(moduleEditForm.$valid, module)" ng-show="module.edit" novalidate>
                <div class="form-group">
                    <input name="Pin" type="text" class="form-control" placeholder="Pin" ng-model="module.pins" required >
                </div>
                <div class="form-group">
                    <select name="action" class="form-control" ng-model="module.type" required >
                        <option value="" disabled selected>Type</option>
                        <option value="{{ type }}" ng-repeat="type in types">{{ type }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <select name="" class="form-control" ng-model="module.content">
                        <option value="" disabled>Ingredient</option>
                        <option value="{{ module.content }}" vrap-Ingredient-Name uuid="module.content" selected></option>
                        <option value="{{ ingredient.uuid }}" ng-repeat="ingredient in ingredients">{{ ingredient.name }}</option>
                    </select>
                </div>
                <div class="form-group" ng-show="noValid">
                    <div class="alert alert-danger">{{errorMessage}}</div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">
                        <i class="glyphicon glyphicon-plus vrap-margin-right-sm"></i>
                        Save
                    </button>
                    <a ng-click="deleteModule(module)" class="btn btn-default">
                        <i class="glyphicon glyphicon-remove vrap-margin-right-sm"></i>
                        Delete
                    </a>
                </div>
            </form>
		</li>
		<li class="list-group-item panel-footer clearfix">
			<form role="form" name="moduleForm" ng-submit="addNewModule(moduleForm.$valid)" novalidate>
				<div class="form-group">
					<input name="Pin" type="text" class="form-control" placeholder="Pin" ng-model="blender.pin" required >
				</div>
				<div class="form-group">
					<select name="action" class="form-control" ng-model="blender.action" required >
                        <option value="" disabled selected>Type</option>
                        <option value="{{ type }}" ng-repeat="type in types">{{ type }}</option>
                    </select>
				</div>
				<div class="form-group">
					<select name="" id="" class="form-control" ng-model="blender.ingredient">
                        <option value="" disabled selected>Ingredient</option>
						<option value="{{ ingredient.uuid }}" ng-repeat="ingredient in ingredients">{{ ingredient.name }}</option>
					</select>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary">
						<i class="glyphicon glyphicon-plus vrap-margin-right-sm"></i>
						Add
					</button>
                    <button type="reset" class="btn btn-default">
                        <i class="glyphicon glyphicon-remove vrap-margin-right-sm"></i>
                        Reset
                    </button>
				</div>
			</form>
		</li>
	</ul>
</div>

<div class="panel panel-primary" ng-hide="manageBlender">
	<div class="panel-heading">The blender</div>
	<div class="panel-body">
		<ul class="list-unstyled">
			<li><span class="badge vrap-margin-right">{{ nbModules }}</span>Modules connected</li>
			<li><span class="badge vrap-margin-right">78</span>Cocktails blended</li>
		</ul>		
	</div>
	<div class="panel-footer">
		<button class="btn btn-primary" ng-click="manage()">Manage it !</button>
	</div>
</div>