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

<ul class="nav nav-pills" role="tablist">
	<li role="presentation"><a href="#!/">Bridge Devices</a></li>
	<li role="presentation"><a href="#!/system">Bridge Control</a></li>
	<li role="presentation"><a href="#!/logs">Logs</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 ng-if="bridge.showFibaro" role="presentation"><a
		href="#!/fibarodevices">Fibaro Devices</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a
		href="#!/fibaroscenes">Fibaro 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 ng-if="bridge.showHue" role="presentation"><a
		href="#!/huedevices">Hue Devices</a></li>
	<li ng-if="bridge.showHal" role="presentation"><a
		href="#!/haldevices">HAL Devices</a></li>
	<li ng-if="bridge.showMqtt" role="presentation"><a href="#!/mqttmessages">MQTT Messages</a></li>
	<li ng-if="bridge.showHass" role="presentation"><a href="#!/hassdevices">HomeAssistant Devices</a></li>
	<li ng-if="bridge.showDomoticz" role="presentation"><a href="#!/domoticzdevices">Domoticz Devices</a></li>
	<li ng-if="bridge.showSomfy" role="presentation"><a href="#!/somfydevices">Somfy Devices</a></li>
	<li ng-if="bridge.showLifx" role="presentation"><a href="#!/lifxdevices">LIFX Devices</a></li>
	<li role="presentation"><a href="#!/editdevice">Add/Edit</a></li>
</ul>

<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">Harmony Device List</h2>
	</div>
	<div class="panel-body">
		<p class="text-muted">For any Harmony Device and Buttons, use the
			build action buttons
			to generate the item addition information into the ha-bridge device and this will put you into the edit screen. Then you can modify the name
			to anything you want that will be the keyword for the Echo or Google Home. Also, you can go back to any helper tab and click a build 
			action button to add another item for a multi-command. After you are
			 done in the edit tab, 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>
		<p>Note: The press time areas are for adding a press time in milliseconds to handle various long press scenarios. If left alone it will default to the original 200ms.</p>

	<scrollable-table watch="bridge.harmonydevices">
	<table class="table table-bordered table-striped table-hover">
		<thead>
			<tr>
				<th>Row</th>
				<th sortable-header col="label" comparator-fn="comparatorLabel">Name</th>
				<th sortable-header col="id" comparator-fn="comparatorNumber">Id</th>
				<th sortable-header col="hub" comparator-fn="comparatorHub">Hub</th>
				<th>On Button</th>
				<th>On Press Time</th>
				<th>Off Button</th>
				<th>Off Press Time</th>
				<th>Build Actions</th>
			</tr>
		</thead>
		<tr ng-repeat="harmonydevice in bridge.harmonydevices">
			<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.action}}">{{funcon.label}}</option>
					</optgroup>
			</select></td>
			<td>
				<textarea class="form-control" id="onpresstime"
							ng-model="onpresstime" placeholder="On Press Time in ms"></textarea>
			</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.action}}">{{funcoff.label}}</option>
					</optgroup>
			</select></td>
			<td>
				<textarea class="form-control" id="offpresstime"
							ng-model="offpresstime" placeholder="Off Press Time in ms"></textarea>
			</td>
			<td>
				<button class="btn btn-success" type="submit"
					ng-click="buildButtonUrls(harmonydevice, devicectrlon, devicectrloff, onpresstime, offpresstime)">Build
					A Button</button>
			</td>
		</tr>
	</table>
	</scrollable-table>
	</div>
</div>
<div class="panel panel-default">
	<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>
	<div ng-if="buttonsVisible" class="panel-body">
	<scrollable-table watch="bridge.harmonydevices">
	<table class="table table-bordered table-striped table-hover">
		<thead>
			<tr>
				<th>Row</th>
				<th sortable-header col="name">Name</th>
				<th sortable-header col="targetDevice">Hub</th>
				<th>Harmony Device-Button On-Button Off</th>
				<th>Actions</th>
			</tr>
		</thead>
		<tr
			ng-repeat="device in bridge.devices | configuredHarmonyButtons | orderBy:predicate:reverse">
			<td>{{$index+1}}</td>
			<td>{{device.name}}</td>
			<td>{{device.targetDevice}}</td>
			<td>{{device.mapId}}</td>
			<td>
				<p>
					<button class="btn btn-warning" type="submit"
						ng-click="editDevice(device)">Edit</button>
					<button class="btn btn-danger" type="submit"
						ng-click="deleteDevice(device)">Delete</button>
				</p>
			</td>
		</tr>
	</table>
	</scrollable-table>
	</div>
</div>
<script type="text/ng-template" id="deleteMapandIdDialog">
		<div class="ngdialog-message">
			<h2>Device Map and Id?</h2>
				<p>{{mapandid.mapType}} with  {{mapandid.id}}</p>
				<p>Are you Sure?</p>
		</div>
		<div class="ngdialog-buttons mt">
			<button type="button" class="ngdialog-button ngdialog-button-error" ng-click="deleteMapandId(mapandid)">Delete</button>
		</div>
	</script>