Files
ha-bridge/src/main/resources/public/views/editdevice.html
2019-06-28 10:05:19 -05:00

783 lines
39 KiB
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 ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonyactivities">Harmony Activities</a></li>
<li ng-if="bridge.showHarmony" role="presentation"><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.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard 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 ng-if="bridge.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard Devices</a></li>
<li ng-if="bridge.showOpenHAB" role="presentation"><a href="#!/openhabdevices">OpenHAB Devices</a></li>
<li ng-if="bridge.showFHEM" role="presentation"><a href="#!/fhemdevices">FHEM Devices</a></li>
<li ng-if="bridge.showMozIot" role="presentation"><a href="#!/moziotdevices">Mozilla IOT Devices</a></li>
<li ng-if="bridge.showBroadlink" role="presentation"><a href="#!/broadlinkdevices">Broadlink Devices</a></li>
<li ng-if="bridge.showHomeGenie" role="presentation"><a href="#!/homegeniedevices">HomeGenie Devices</a></li>
<li role="presentation" class="active"><a href="#!/editdevice">Add/Edit</a></li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Edit/Copy a device</h2>
</div>
<div class="panel-body">
<p class="text-muted">This screen allows the modification of many
fields the bridge uses. Please use care when updating these fields as
you may break the settings used by the bridge to call a specific end
point device.</p>
<p class="text-muted">This area allows you to create any http, tcp or
udp call to an endpoint. You can use the default GET or select the
http verb type below and configure a payload for either on, dim or
off methods. For Execution of a
script or program, please fill in the path. All manually entered calls
can use Json notation of array with [{&quot;item&quot;:&quot;the
payload&quot;},{&quot;item&quot;:&quot;another payload&quot;}] to
execute multiple entries. Adding the value replacements
(${intensity.byte},${intensity.percent},${intensity.decimal_percent},${intensity.math(X*1)}) will
also work. Also, you can go back to any helper tab and click a build
action button to add another item for a multi-command.</p>
<p class="text-muted">When copying, update the name and select the "Add Bridge
Device" Button.</p>
<form name="form">
<p>
<button class="btn btn-primary" ng-click="editDevice(true)">Add
Bridge Device</button>
<button type="submit" class="col-xs-4 col-sm-2 btn btn-success"
ng-click="editDevice(false)">Update Bridge Device</button>
<button class="btn btn-danger" ng-click="clearDevice()">Clear</button>
<button class="btn" ng-click="changeEditmode()">Change Edit Mode</button>
</p>
<table class="table table-bordered table-striped table-hover">
<tr>
<td><label>Name</label></td>
<td><input type="text" class="form-control" id="device-name"
ng-model="device.name" placeholder="Device Name"></td>
</tr>
<tr>
<td><label>Description</label></td>
<td><input type="text" class="form-control" id="device-description"
ng-model="device.description" placeholder="Device Description"></td>
</tr>
<tr>
<td><label>Comments</label></td>
<td><input type="text" class="form-control" id="device-comments"
ng-model="device.comments" placeholder="Device Comments"></td>
</tr>
<tr>
<td><label>Lock Device ID</label></td>
<td><input type="checkbox"
ng-model="device.lockDeviceId" ng-true-value=true
ng-false-value=false> {{device.lockDeviceId}}</td>
</tr>
<tr>
<td><label>Inactive</label></td>
<td><input type="checkbox"
ng-model="device.inactive" ng-true-value=true
ng-false-value=false> {{device.inactive}}</td>
</tr>
<tr>
<td><label>No State (Do not update state for device)</label></td>
<td><input type="checkbox"
ng-model="device.noState" ng-true-value=true
ng-false-value=false> {{device.noState}}</td>
</tr>
<tr>
<td><label>Off State Resets Bri</label></td>
<td><input type="checkbox"
ng-model="device.offState" ng-true-value=true
ng-false-value=false> {{device.offState}}</td>
</tr>
<tr>
<td><label>On when Dim is present (Always uses on with a dim request otherwise it will ignore a given on was well. This is overidden by onFirstDim.)</label></td>
<td><input type="checkbox"
ng-model="device.onWhenDimPresent" ng-true-value=true
ng-false-value=false> {{device.onWhenDimPresent}}</td>
</tr>
<tr>
<td><label>On with First Dim (If the device is not on in the ha-bridge state, it will send on instead of the dim.)</label></td>
<td><input type="checkbox"
ng-model="device.onFirstDim" ng-true-value=true
ng-false-value=false> {{device.onFirstDim}}</td>
</tr>
<tr>
<td><label>Filter Address (comma separated list)</label></td>
<td><input type="text" class="form-control" id="device-requester-addr"
ng-model="device.requesterAddress" placeholder="Only use if you want to restrict this device to a specific caller(s)"></td>
</tr>
<tr>
<td><label>Target</label></td>
<td><input type="text" class="form-control" id="device-target"
ng-model="device.targetDevice" placeholder="default"></td>
</tr>
<tr>
<td><label>Device Type (Informational)</label></td>
<td><select name="device-type" id="device-type"
ng-model="device.deviceType">
<option value="">---Types if needed---</option>
<!-- not selected / blank option -->
<option value="custom">Custom</option>
<option value="UDP">UDP</option>
<option value="TCP">TCP</option>
<option value="exec">Execute Script/Program</option>
<option value="switch">Switch</option>
<option value="scene">Scene</option>
<option value="macro">Macro</option>
<option value="group">Group</option>
<option value="activity">Activity</option>
<option value="button">Button</option>
<option value="thermo">Thermo</option>
<option value="passthru">Pass Thru</option>
<option value="home">Home</option>
</select></td>
</tr>
<tr>
<td><label>Map Type (Legacy)</label></td>
<td><select
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="mapTypeSelected"></select></td>
</tr>
<tr>
<td><label>Unique Id (used for Hue responses)</label></td>
<td><input type="text" class="form-control"
id="device-unique-id" ng-model="device.uniqueid"
placeholder="AA:BB:CC:DD:EE:FF-XX" readonly></td>
</tr>
<tr>
<td><label>Map ID</label></td>
<td><input type="text" class="form-control" id="device-map-id"
ng-model="device.mapId" placeholder="1111"></td>
</tr>
<tr ng-hide="!showUrls">
<td><label>OnUrl</label></td>
<td><textarea class="form-control" id="device-on-url" style="min-height: 250px; min-width: 1300px"
ng-model="onUrl" placeholder="default"></textarea></td>
</tr>
<tr ng-hide="showUrls">
<td><label>On Items</label></td>
<td><scrollable-table watch="onDevices">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<div class="col-xs-12 col-md-4">
<th>Type</th>
<th>Target Item</th>
<th>Delay</th>
<th>Count</th>
<th>Filter IPs</th>
<th>Http Verb</th>
<th>Http Body</th>
<th>Http Headers</th>
<th>Content Type</th>
<th>Manage</th>
</div>
</tr>
</thead>
<tr ng-repeat="onItem in onDevices">
<div class="col-xs-12 col-md-4">
<td><select
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]" style="max-width: 150px"
ng-model="onItem.type"></select></td>
<td><textarea rows="1" class="form-control"
id="item-target" ng-model="onItem.item" style="min-width: 600px" placeholder="The Call"></textarea></td>
<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="onItem.delay" placeholder="millis"></textarea></td>
<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="onItem.count" placeholder="number"></textarea></td>
<td><textarea rows="1" class="form-control"
id="item-filterIPs" ng-model="onItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="onItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" class="form-control"
id="item-httpBody" ng-model="onItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="onItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="onItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-danger" type="submit"
ng-click="removeItemOn(onItem)">Del</button></td>
</div>
</tr>
<tr>
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="newOnItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" style="min-width: 600px" ng-model="newOnItem.item"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="newOnItem.delay"
placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="newOnItem.count"
placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="newOnItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="newOnItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="newOnItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="newOnItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="newOnItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-success" type="submit"
ng-click="addItemOn(newOnItem)">Add</button></td>
</div>
</tr>
</table>
</scrollable-table></td>
</tr>
<tr ng-hide="!showUrls">
<td><label>DimUrl</label></td>
<td><textarea class="form-control" id="device-dim-url" style="min-height: 250px; min-width: 1300px"
ng-model="dimUrl" placeholder="default"></textarea></td>
</tr>
<tr ng-hide="showUrls">
<td><label>Dim Items</label></td>
<td><scrollable-table watch="dimDevices">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<div class="col-xs-12 col-md-4">
<th>Type</th>
<th>Target Item</th>
<th>Delay</th>
<th>Count</th>
<th>Filter IPs</th>
<th>Http Verb</th>
<th>Http Body</th>
<th>Http Headers</th>
<th>Content Type</th>
<th>Manage</th>
</div>
</tr>
</thead>
<tr ng-repeat="dimItem in dimDevices">
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="dimItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="dimItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="dimItem.delay" placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="dimItem.count" placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="dimItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="dimItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="dimItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="dimItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="dimItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-danger" type="submit"
ng-click="removeItemDim(dimItem)">Del</button></td>
</div>
</tr>
<tr>
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="newDimItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="newDimItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="newDimItem.delay"
placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="newDimItem.count"
placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="newDimItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="newDimItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="newDimItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="newDimItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="newDimItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-success" type="submit"
ng-click="addItemDim(newDimItem)">Add</button></td>
</div>
</tr>
</table>
</scrollable-table></td>
</tr>
<tr ng-hide="!showUrls">
<td><label>OffUrl</label></td>
<td><textarea class="form-control" id="device-off-url" style="min-height: 250px; min-width: 1300px"
ng-model="offUrl" placeholder="default"></textarea></td>
</tr>
<tr ng-hide="showUrls">
<td><label>Off Items</label></td>
<td><scrollable-table watch="offDevices">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<div class="col-xs-12 col-md-4">
<th>Type</th>
<th>Target Item</th>
<th>Delay</th>
<th>Count</th>
<th>Filter IPs</th>
<th>Http Verb</th>
<th>Http Body</th>
<th>Http Headers</th>
<th>Content Type</th>
<th>Manage</th>
</div>
</tr>
</thead>
<tr ng-repeat="offItem in offDevices">
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="offItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="offItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="offItem.delay" placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="offItem.count" placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="offItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="offItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="offItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="offItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="offItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-danger" type="submit"
ng-click="removeItemOff(offItem)">Del</button></td>
</div>
</tr>
<tr>
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="newOffItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="newOffItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="newOffItem.delay"
placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="newOffItem.count"
placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="newOffItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="newOffItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="newOffItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="newOffItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="newOffItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-success" type="submit"
ng-click="addItemOff(newOffItem)">Add</button></td>
</div>
</tr>
</table>
</scrollable-table></td>
</tr>
<tr ng-hide="!showUrls">
<td><label>ColorUrl</label></td>
<td><textarea class="form-control" id="device-color-url" style="min-height: 250px; min-width: 1300px"
ng-model="colorUrl" placeholder="default"></textarea></td>
</tr>
<tr ng-hide="showUrls">
<td><label>Color Items</label></td>
<td><scrollable-table watch="colorDevices">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<div class="col-xs-12 col-md-4">
<th>Type</th>
<th>Target Item</th>
<th>Delay</th>
<th>Count</th>
<th>Filter IPs</th>
<th>Http Verb</th>
<th>Http Body</th>
<th>Http Headers</th>
<th>Content Type</th>
<th>Manage</th>
</div>
</tr>
</thead>
<tr ng-repeat="colorItem in colorDevices">
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="colorItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="colorItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="colorItem.delay" placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="colorItem.count" placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="colorItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="colorItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="colorItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="colorItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="colorItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-danger" type="submit"
ng-click="removeItemColor(colorItem)">Del</button></td>
</div>
</tr>
<tr>
<div class="col-xs-12 col-md-4">
<td><select style="max-width: 150px"
ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
ng-model="newColorItem.type"></select></td>
<td><textarea rows="1" cols="20" class="form-control"
id="item-target" ng-model="newColorItem.item" style="min-width: 600px"
placeholder="The Call"></textarea></td>
<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-delay" ng-model="newColorItem.delay"
placeholder="millis"></textarea></td>
<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
id="item-count" ng-model="newColorItem.count"
placeholder="number"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-filterIPs" ng-model="newColorItem.filterIPs"
placeholder="restrict IPs"></textarea></td>
<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
ng-model="newColorItem.httpVerb">
<option value="">---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpBody" ng-model="newColorItem.httpBody"
placeholder="body args"></textarea></td>
<td><textarea rows="1" cols="16" class="form-control"
id="item-httpHeaders" ng-model="newColorItem.httpHeaders"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
ng-model="newColorItem.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
<td><button class="btn btn-success" type="submit"
ng-click="addItemColor(newColorItem)">Add</button></td>
</div>
</tr>
</table>
</scrollable-table></td>
</tr>
<tr>
<td><label>Legacy Fields <a ng-click="toggleButtons()"><span class={{imgButtonsUrl}} aria-hidden="true"></span></a></label>
</td>
<td>
</td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>HTTP Headers</label></td>
<td><textarea rows="3" class="form-control"
id="device-headers" ng-model="device.headers"
placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea>
</td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>Http Verb</label></td>
<td><select name="device-http-verb" id="device-http-verb"
ng-model="device.httpVerb">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="GET">GET</option>
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select></td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>Content Type</label></td>
<td><select name="device-content-type"
id="device-content-type" ng-model="device.contentType">
<option value="">---Please select---</option>
<!-- not selected / blank option -->
<option value="application/atom+xml">application/atom+xml</option>
<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
<option value="application/json">application/json</option>
<option value="application/octet-stream">application/octet-stream</option>
<option value="application/svg+xml">application/svg+xml</option>
<option value="application/xhtml+xml">application/xhtml+xml</option>
<option value="application/xml">application/xml</option>
<option value="*">*</option>
<option value="multipart/form-data">multipart/form-data</option>
<option value="text/html">text/html</option>
<option value="text/plain">text/plain</option>
<option value="text/xml">text/xml</option>
<option value="*/*">*/*</option>
</select></td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>Content Body On</label></td>
<td><textarea rows="3" class="form-control"
id="device-content-body" ng-model="device.contentBody"
placeholder="Content Body On for specific GET/PUT/POST type"></textarea>
</td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>Content Body Dim</label></td>
<td><textarea rows="3" class="form-control"
id="device-content-body-dim" ng-model="device.contentBodyDim"
placeholder="Content Body Dim for specific GET/PUT/POST type"></textarea>
</td>
</tr>
<tr ng-if="buttonsVisible">
<td><label>Content Body Off</label></td>
<td><textarea rows="3" class="form-control"
id="device-content-body-off" ng-model="device.contentBodyOff"
placeholder="Content Body Off for specific GET/PUT/POST type"></textarea>
</td>
</tr>
</table>
</form>
</div>
</div>