thing-it-device-radio-thermostat/web/radioThermostat.html

[thing-it-node] Device Plugin for Radio Thermostat WiFi Edition

<div style="display: flex;">
    <i class="mode icon sl-house-3"></i>
    <div class="btn-group" style="display: inline-block; margin-left: 0.5em; flex-grow: 1;">
        <a href class="btn btn-default" ui-turn-on='off' ui-state='hvac'
           ui-class="{'active': hvac=='off'}"
           ui-exclusion-group='hvacButtons'
           ng-click="panel.callDeviceService(component, 'changeMode', {mode: 'OFF'})">Off</a>
        <a href class="btn btn-default" ui-turn-on='heat' ui-state='hvac'
           ui-class="{'active': hvac=='heat'}"
           ui-exclusion-group='hvacButtons'
           ng-click="panel.callDeviceService(component, 'changeMode', {mode: 'HEAT'})">Heat</a>
        <a href class="btn btn-default" ui-turn-on='cool' ui-state='hvac'
           ui-class="{'active': hvac=='cool'}"
           ui-exclusion-group='hvacButtons'
           ng-click="panel.callDeviceService(component, 'changeMode', {mode: 'COOL'})">Cool</a>
        <a href class="btn btn-default" ui-turn-on='auto' ui-state='hvac'
           ui-class="{'active': hvac=='auto'}"
           ui-exclusion-group='hvacButtons'
           ng-click="panel.callDeviceService(component, 'changeMode', {mode: 'AUTO'})">Auto</a>
    </div>
</div>
<!--
<div style="display: table-row; vertical-align: middle;">
        <div style="display: table-cell; text-align: center; padding-left: 1em;">
            <a ng-click="panel.callActorService(component, 'toggleFanMode')"><i class="mode icon sl-nuclear-1"></i></a>
            {{component._state.fanMode}}
        </div>
            <span class="smallFont lightPrimaryColor">Mode:</span><br>
            <select ng-model="component._state.mode"
                    ng-change="panel.callDeviceService(component, 'changeMode', {mode: component._state.mode} )">
                <option value="OFF">Off</option>
                <option value="HEAT">Heat</option>
                <option value="COOL">Cool</option>
                <option value="AUTO">Auto</option>
            </select>
</div>
-->
<!--
<div style="display: table-cell; vertical-align: top; width: 50%">
    <span class="smallFont lightPrimaryColor">Fan Mode:</span><br>
    <select ng-model="component._state.fanMode"
            ng-change="panel.callDeviceService(component, 'changeFanMode', {mode: component._state.fanMode} )">
        <option value="AUTO">Auto</option>
        <option value="AUTO/CIRCULATE">Auto/Circulate</option>
        <option value="ON">On</option>
    </select>
</div>
-->
</div>
<div style="display: table-row; vertical-align: middle;">
    <div style="display: table-cell; text-align: center; width: 3em; padding-right: 1em;">
        <div class="circleButton" style="display: inline-block;"
             ng-click="panel.callDeviceService(component, 'decrementSetpoint')">
            <div><i class="icon sl-minus-1"></i></div>
        </div>
    </div>
    <table style="display: inline-block;">
        <tr>
            <td colspan="3" style="text-align: center;"><span class="lightPrimaryColor" style="font-size: 4em;">{{component._state.setpoint | number:1}}</span><span
                    class="smallFont lightPrimaryColor">&deg;F</span></td>
        </tr>
        <tr>
            <td style="width: 30%; text-align: center;"></td>
            <td style="width: 30%; text-align: center;"><span class="smallFont lightPrimaryColor">{{component._state.temperature | number:1}} &deg;F</span>
            </td>
            <td style="width: 30%; text-align: center;"><span ng-if="component._state.boilerActive"
                                                              class="lightPrimaryColor"><i
                    class="fa fa-fire"></i></span></td>
        </tr>
    </table>
    <div style="display: table-cell; text-align: center; width: 3em; padding-left: 1em;">
        <div class="circleButton" style="display: inline-block;"
             ng-click="panel.callDeviceService(component, 'incrementSetpoint')">
            <div><i class="icon sl-add-1"></i></div>
        </div>
    </div>
</div>
<div style="display: table">
    <div style="margin-top: 0.5em; display: table-row; vertical-align: middle;">
        <div style="display: table-cell;" class="smallFont lightPrimaryColor">Hold</div>
        <div style="display: table-cell;">
            <ti-switch ti-model="component._state.hold"
                       ti-change="panel.callDeviceService(component, 'holdToggle')"></ti-switch>
        </div>
    </div>
</div>
<!--
<div style="display: table-row; vertical-align: middle;">
    <div style="display: table-cell; text-align: center; width: 3em; padding-right: 1em;">
        <span class="smallFont lightPrimaryColor">Override</span><br>
        <ti-switch ti-model="component._state.override"></ti-switch>
    </div>
</div>
-->
<div style="margin-top: 0.5em; display: flex; width: 100%">
    <i class="mode icon sl-nuclear-1"></i>
    <div class="btn-group" style="display: inline-block; margin-left: 0.5em;">
        <a href class="btn btn-default" ui-turn-on='auto' ui-state='auto'
           ui-class="{'active': button1}"
           ui-exclusion-group='fanButtons'
           ng-click="panel.callDeviceService(component, 'changeFanMode', {fanMode: 'AUTO'})">Auto</a>
        <a href class="btn btn-default" ui-turn-on='autocirculate' ui-state='autocirculate'
           ui-class="{'active': button1}"
           ui-exclusion-group='fanButtons'
           ng-click="panel.callDeviceService(component, 'changeFanMode', {fanMode: 'AUTO/CIRCULATE'})">Auto/Circulate</a>
        <a href class="btn btn-default" ui-turn-on='on' ui-state='on'
           ui-class="{'active': button1}"
           ui-exclusion-group='fanButtons'
           ng-click="panel.callDeviceService(component, 'changeFanMode', {fanMode: 'ON'})">On</a>
    </div>
</div>