theopenbar/interface

<div ng-show="storedDrink">
    <div class="page-header">
        <h1>Currently Selected Drink</h1>
    </div>
    <h2>
        {{storedDrink}}
    </h2>
</div>

<!-- Display some information for first time users -->
<div ng-hide="storedDrink">
    <br>
    <div class="alert alert-info" role="alert">
        <h4>Select a drink to be stored to your wristband. Then scan your wristband at the bar to pour your drink.</h4>
    </div>
</div>

<div class="page-header stored">
    <h1>Choose a <span ng-show="storedDrink">new </span>drink</h1>
</div>

<!-- http://stackoverflow.com/a/32358013 -->
<div class="row">
    <div ng-repeat="drink in drinks">
        <div class="col-lg-2 col-md-3 col-xs-6">
            <button type="button" class="btn padding btn-default btn-block"
                ng-class="{active : isDrinkSelected(drink)}"
                ng-click="selectDrink(drink)">
                {{drink.name}}
            </button>
        </div>
    </div>
</div>

</br>

<div class="panel panel-primary" id="recipe" ng-show="drinkSelected">
    <div class="panel-heading">{{drinkSelected.name}}</div>

    <ul class="list-group">
        <li class="list-group-item" ng-repeat='(ingredient, amount) in drinkSelected.recipe'>
            {{amount/100}} oz of {{ingredient}}
        </li>
        <li class="list-group-item">
            <button type="button" class="btn btn-primary" ng-click="queueDrink(drinkSelected, station)">Store drink</button>
        </li>
    </ul>
</div>