theopenbar/interface

<div class="page-header">
      <h1>{{station.name}}</h1>
      <h2>Choose a drink</h2>
</div>

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

</br>

<div class="panel panel-primary" id="recipe" ng-if="listIngredients">
    <div class="panel-heading">{{recipeSelected.name}}</div>

    <ul class="list-group">
        <li class="list-group-item" ng-repeat="i in recipeSelected.liquids track by $index">
            {{recipeSelected.liquids[$index].amount}} oz of
            {{recipeSelected.liquids[$index].id.brand}} Brand:
            {{recipeSelected.liquids[$index].id.description}}
            ({{recipeSelected.liquids[$index].id.type}},
            {{recipeSelected.liquids[$index].id.subtype}})
        </li>
        <li class="list-group-item">
            <button type="button" class="btn btn-primary" ng-click="pourDrink(recipeSelected)">Pour drink</button>
        </li>
    </ul>
</div>

<div class="panel panel-primary" ng-if="WebSocket.pourInProgress()">
    <div class="panel-heading">{{recipeSelected.name}}</div>

    <ul class="list-group">
        <li class="list-group-item" ng-repeat="message in WebSocket.messages track by $index">
            {{message}}
        </li>
        <li class="list-group-item" ng-if="WebSocket.pourComplete()">
            <button type="button" class="btn btn-primary" ng-click="WebSocket.dismissPourStatus()">Close</button>
        </li>
    </ul>
</div>