theopenbar/interface

<div class="page-header">
    <h1>Station Configuration</h1>
</div>

<div class="form-group row">
    <label for="name" class="col-xs-2 col-md-1 col-form-label">Station Name</label>
    <div class="col-xs-10">
        <input class="form-control" type="text" ng-model="station.name">
    </div>
</div>

<div class="form-group row">
    <label for="name" class="col-xs-2 col-md-1 col-form-label">Station ID</label>
    <div class="col-xs-10">
        <input type="text" class="form-control" ng-value="station._id" readonly>
        <button class="btn btn-danger" ng-click="removeStationID()">Remove from local storage</button>
    </div>
</div>


<div ng-show="!stationIPEdit">
    <div class="form-group row">
        <label for="address" class="col-xs-2 col-md-1 col-form-label">Station Address</label>
        <div class="col-xs-10">
            <input type="text" class="form-control" ng-value="station.host+':'+station.port" readonly>
            <button class="btn btn-default" ng-click="editIPAddress()">Edit</button>
            <button class="btn btn-primary" ng-click="sendIDtoController()">Send ID to controller</button>
        </div>
    </div>
</div>

<div ng-show="stationIPEdit">
    <div class="form-group row">
        <label for="name" class="col-xs-2 col-md-1 col-form-label">IP/Host :Port</label>
        <div class="col-xs-10">
            <div class="input-group">
                <input type="text" class="form-control" ng-model="station.host"></input>
                <span class="input-group-addon">:</span>
                <input type="number" class="form-control" ng-model="station.port"></input>
            </div>
        </div>
    </div>
</div>

<div class="form-group row">
    <label for="name" class="col-xs-2 col-md-1 col-form-label">Number of Valves</label>
    <div class="col-xs-10">
        <input type="number" class="form-control" ng-model="station.numValves"></input>
    </div>
</div>

<div class="form-group row">
    <div class="col-md-1">
        <button class="btn btn-success" ng-click="saveStation()">Save Station</button>
    </div>
</div>

<div ng-show="messageSuccess">
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="messageSuccess=null">
            <span aria-hidden="true">&times;</span>
        </button>
        {{messageSuccess}}
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="page-header">
            <h3>Configured Liquids</h3>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">Connected Liquids</div>

            <table class="table">
                <tr>
                    <th>Valve</th>
                    <th>Type</th>
                    <th>Subtype</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th>Amount Left(oz)</th>
                    <th>Pressurized</th>
                    <th></th>
                </tr>
                <tr ng-repeat="liquid in liquidDisplay.connectedLiquids | orderBy: 'liquid.valve' track by $index">
                    <td>{{liquid.valve}}</td>
                    <td>{{liquid.id.type}}</td>
                    <td>{{liquid.id.subtype}}</td>
                    <td>{{liquid.id.brand}}</td>
                    <td>{{liquid.id.description}}</td>
                    <td>{{liquid.amount}}</td>
                    <td>{{liquid.pressurized}}</td>
                    <td>
                        <input type="button" class="btn btn-warning" value="Edit" ng-click="editConnectedLiquid($index)"></input>
                        <input type="button" class="btn btn-danger" value="Delete" ng-click="deleteConnectedLiquid($index)"></input>
                    </td>
                </tr>
            </table>
        </div>

        <div class="panel panel-primary">
            <div class="panel-heading">On-Hand Liquids</div>

            <table class="table">
                <tr>
                    <th>Type</th>
                    <th>Subtype</th>
                    <th>Brand</th>
                    <th>Description</th>
                    <th></th>
                </tr>
                <tr ng-repeat="liquid in liquidDisplay.onHandLiquids | orderBy: 'liquid.type' track by $index">
                    <td>{{liquid.type}}</td>
                    <td>{{liquid.subtype}}</td>
                    <td>{{liquid.brand}}</td>
                    <td>{{liquid.description}}</td>
                    <td>
                        <input type="button" class="btn btn-warning" value="Edit" ng-click="editOnHandLiquid($index)"></input>
                        <input type="button" class="btn btn-danger" value="Delete" ng-click="deleteOnHandLiquid($index)"></input>
                    </td>
                </tr>
            </table>
        </div>
        <div ng-show="selectedValve==null && editOnHandLiquidIndex == null">
            <input type="button" class="btn btn-primary" value="Add On-Hand Liquid" ng-click="addOnHandLiquid()"></input>
        </div>
    </div>
    <div class="col-md-6">
        <div ng-show="selectedValve!=null || editOnHandLiquidIndex!=null">
            <div class="page-header">
                <h3>Add Liquid</h3>
                <h4>Enter Barcode or Select Type</h4>
            </div>

            <div class="form-group row">
                <label for="barcode" class="col-xs-2 col-form-label">Barcode</label>
                <div class="col-xs-10">
                    <input class="form-control" type='text' ng-model="liquidSelection.barcode" ng-change="selectBarcode()"></input>
                </div>
            </div>

            <div class="form-group row">
                <label for="type" class="col-xs-2 col-form-label">Type</label>
                <div class="col-xs-10">
                    <select class="form-control" ng-model="liquidSelection.type" ng-change="selectType()"
                        ng-options="o.type as o.type for o in types">
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="subtype" class="col-xs-2 col-form-label">Subtype</label>
                <div class="col-xs-10">
                    <select class="form-control" ng-model="liquidSelection.subtype" ng-change="selectSubtype()"
                            ng-options="o.subtype as o.subtype for o in liquidSelection.subtypes">
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="brand" class="col-xs-2 col-form-label">Brand</label>
                <div class="col-xs-10">
                    <select class="form-control" ng-model="liquidSelection.brand" ng-change="selectBrand()"
                        ng-options="o.brand as o.brand for o in liquidSelection.brands">
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="description" class="col-xs-2 col-form-label">Description</label>
                <div class="col-xs-10">
                    <select class="form-control" ng-model="liquidSelection.description" ng-change="selectDescription()"
                        ng-options="o.description as o.description for o in liquidSelection.descriptions">
                    </select>
                </div>
            </div>

            <div class="form-group row" ng-show="selectedValve!=null">
                <label for="amount" class="col-xs-2 col-form-label">Amount (oz)</label>
                <div class="col-xs-10">
                    <select class="form-control" ng-model="liquidSelection.amount" ng-change="selectAmount()">
                        <option value="1.69">1.69oz / 50mL</option>
                        <option value="6.76">6.76oz / 200mL</option>
                        <option value="12.7">12.7oz / 375mL</option>
                        <option value="16.9">16.9oz / 500mL</option>
                        <option value="25.4">25.4oz / 750mL (fifth)</option>
                        <option value="33.8">33.8oz / 1000mL</option>
                        <option value="40.0">40.0oz / 1183mL</option>
                        <option value="59.2">59.2oz / 1750mL (handle)</option>
                        <option value="67.6">67.6oz / 2000mL</option>
                        <option value="101.4">101.4oz / 3000mL</option>
                    </select>
                </div>
            </div>

            <div class="form-check row" ng-show="selectedValve!=null">
                <label for="requirement" class="col-xs-2 col-form-label">Pressurized</label>
                <div class="col-xs-10">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" ng-model="liquidSelection.pressurized" ng-click="selectPressurized()">
                    </label>
                </div>
            </div>
        </div>

        <div ng-show="ingredientError">
            <br>
            <div class="alert alert-danger alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="ingredientError=null">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ingredientError}}
            </div>
        </div>
        <div class="form-check row">
            <div class="col-xs-12">
                <div ng-show="selectedValve != null || editOnHandLiquidIndex != null">
                    <input type="button" class="btn btn-primary" value="Save Liquid" ng-click="addLiquidToStation()"></input>
                    <input type="button" class="btn btn-danger" value="Cancel/Delete" ng-click="cancelLiquid()"></input>
                </div>
            </div>
        </div>
        <br>
    </div>
</div>