ha-bridge/src/main/resources/public/views/harmonydevice.html

      <ul class="nav nav-pills" role="tablist">
        <li role="presentation"><a href="#">Configuration</a></li>
        <li ng-if="bridge.showVera" role="presentation"><a href="#/veradevices">Vera Devices</a></li>
        <li ng-if="bridge.showVera" role="presentation"><a href="#/verascenes">Vera Scenes</a></li>
        <li role="presentation"><a href="#/harmonyactivities">Harmony Activities</a></li>
        <li role="presentation" class="active"><a href="#/harmonydevices">Harmony Devices</a></li>
        <li ng-if="bridge.showNest" role="presentation"><a href="#/nest">Nest</a></li>
        <li role="presentation"><a href="#/editor">Manual Add</a></li>
      </ul>

<div class="panel panel-default bridgeServer" ng-if="!bridge.error">
	<div class="panel-heading">
		<h2 class="panel-title">Harmony Device List</h2>
	</div>
	<ul class="list-group">
		<li class="list-group-item">
			<p class="text-muted">For any Harmony Device and Buttons, use the build button to generate the configuration for this bridge device. You can add button presses by
			selecting yoru devic and buttons and then selecting the Build Button. This will allow multiple button presses to be built for a given device. 
			Then you can modify the name to anything you want that will be the keyword for Alexa. Click the 'Add Bridge Device' to finish that selection setup.
			The 'Already Configured Harmony Buttons' list below will show what is already setup for your Harmony Hubs.</p>

			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<th>Row</th>
						<th>
							<a href="" ng-click="order('label')">Name</a>
        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>
							<a href="" ng-click="order('id')">Id</a>
        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>
							<a href="" ng-click="order('hub')">Hub</a>
        					<span class="sortorder" ng-show="predicate === 'hub'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>On Button</th>
						<th>Off Button</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tr ng-repeat="harmonydevice in bridge.harmonydevices | orderBy:predicate:reverse">
					<td>{{$index+1}}</td>
					<td>{{harmonydevice.device.label}}</td>
					<td>{{harmonydevice.device.id}}</td>
					<td>{{harmonydevice.hub}}</td>
					<td>
						<select name="device-ctrlon" id="device-ctrlon" ng-model="devicectrlon">
							<optgroup ng-repeat="ctrlon in harmonydevice.device.controlGroup" label="{{ctrlon.name}}">
								<option ng-repeat="funcon in ctrlon.function" value="{{funcon.label}}">{{funcon.name}}</option>
							</optgroup >
						</select>
					</td>
					<td>
						<select name="device-ctrloff" id="device-ctrloff" ng-model="devicectrloff">
							<optgroup ng-repeat="ctrloff in harmonydevice.device.controlGroup" label="{{ctrloff.name}}">
								<option ng-repeat="funcoff in ctrloff.function" value="{{funcoff.label}}">{{funcoff.name}}</option>
							</optgroup >
						</select>
					</td>
					<td>
						<button class="btn btn-success" type="submit"
							ng-click="buildButtonUrls(harmonydevice, devicectrlon, devicectrloff)">Build
							A Button</button>
					</td>
				</tr>
			</table>
		</li>
	</ul>
	<div class="panel-heading">
		<h2 class="panel-title">Already Configured Harmony Buttons <a ng-click="toggleButtons()"><span class={{imgButtonsUrl}} aria-hidden="true"></span></a></h2>
	</div>
	<ul ng-if="buttonsVisible" class="list-group">
		<li class="list-group-item">
			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<th>Row</th>
						<th>
							<a href="" ng-click="order('name')">Name</a>
        					<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>
							<a href="" ng-click="order('id')">Device Id</a>
        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>
							<a href="" ng-click="order('targetDevice')">Hub</a>
        					<span class="sortorder" ng-show="predicate === 'targetDevice'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>
							<a href="" ng-click="order('mapId')">Harmony Device-Button On-Button Off</a>
        					<span class="sortorder" ng-show="predicate === 'id'" ng-class="{reverse:reverse}"></span>
        				</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tr ng-repeat="device in bridge.devices | configuredButtons | orderBy:predicate:reverse">
					<td>{{$index+1}}</td>
					<td>{{device.name}}</td>
					<td>{{device.id}}</td>
					<td>{{device.targetDevice}}</td>
					<td>{{device.mapId}}</td>
					<td>
						<button class="btn btn-danger" type="submit"
						ng-click="deleteDeviceByMapId(device.mapId, device.mapType)">Delete</button>
					</td>
				</tr>
			</table>
		</li>
	</ul>
</div>
<div class="panel panel-default bridgeServer" ng-if="!bridge.error">
	<div class="panel-heading">
		<h2 class="panel-title">Add a Bridge Device for Harmony Buttons</h2>
	</div>
	<ul class="list-group">
		<li class="list-group-item">
			<form class="form-horizontal">
				<div class="form-group">
					<label class="col-xs-12 col-sm-2 control-label" for="device-name">Name
					</label>

					<div class="col-xs-8 col-sm-7">
						<input type="text" class="form-control" id="device-name"
							ng-model="device.name" placeholder="Device Name">
					</div>
					<button type="submit" class="col-xs-4 col-sm-2 btn btn-primary" ng-click="addDevice()">
						Add Bridge Device</button>
				</div>
				<div class="form-group">
					<div class="row">
					<label class="col-xs-12 col-sm-2 control-label" for="device-on-url">On
						URL </label>

					<div class="col-xs-8 col-sm-7">
						<textarea rows="3" class="form-control" id="device-on-url"
							ng-model="device.onUrl" placeholder="URL to turn device on"></textarea>
					</div>
					<button class="btn btn-danger" ng-click="clearDevice()">
						Clear Device</button>
					</div>
				</div>
				<div class="form-group">
					<div class="row">
					<label class="col-xs-12 col-sm-2 control-label"
						for="device-off-url">Off URL </label>

					<div class="col-xs-8 col-sm-7">
						<textarea rows="3" class="form-control" id="device-off-url"
							ng-model="device.offUrl" placeholder="URL to turn device off"></textarea>
					</div>
					</div>
				</div>
			</form>
		</li>
	</ul>
</div>