pimatic-angular-material-frontend/partials/devices/thermostat.html

Provides an AngularJS webinterface for Pimatic with material design.

<md-card ng-controller="ThermostatController">
    <div layout="row" class="device-header">
        <div class="device-icon-wrapper">
            <span class="device-icon">
                <i class="mdi mdi-thermometer-lines"></i>
            </span>
        </div>
        <div class="device-titles" layout="column" flex>
            <h1>{{device.name}}</h1>

            <h2>{{device.template}}</h2>
        </div>
        <div class="device-header-values" layout="row" layout-align="end center">
            <!-- Yes, I know, temperatue is spelled wrong. See https://github.com/pimatic/pimatic-mobile-frontend/blob/master/app/views/pages/index.jade#L75 -->
            <md-button class="md-icon-button" ng-hide="!getConfig('guiShowTemperatueInput')" ng-click="up()">
                <md-icon md-font-icon="mdi mdi-chevron-up"></md-icon>
            </md-button>
            <span class="device-header-value-large">{{getAttribute('temperatureSetpoint').value}}</span>
            <md-button class="md-icon-button" ng-hide="!getConfig('guiShowTemperatueInput')" ng-click="down()">
                <md-icon md-font-icon="mdi mdi-chevron-down"></md-icon>
            </md-button>
        </div>
    </div>
    <md-card-content ng-show="true || getAttribute('valve').value != null || getAttribute('battery').value == 'low' || getAttribute('synced').value == false">
        <div layout="column">
            <div ng-show="getAttribute('valve').value != null" attribute-value attribute="getAttribute('valve')"></div>
            <span ng-show="getAttribute('battery').value == 'low'" ng-style="{color: themeColors.warn['default']}"><md-icon md-font-icon="mdi mdi-battery-10"></md-icon> {{'LOW_BATTERY' | translate}}</span>
            <span ng-show="getAttribute('synced').value == false" ng-style="{color: themeColors.warn['default']}"><md-icon md-font-icon="mdi mdi-sync"></md-icon> {{'NOT_SYNCED' | translate}}</span>

            <div layout="row" ng-hide="!getConfig('guiShowPresetControl', true)">
                <div flex layout="row" layout-align="start center" class="md-body-1">
                    {{'PRESET' | translate}}
                </div>
                <div>
                    <div class="button-group md-raised">
                        <md-button class="md-raised" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('ecoTemp'))}" ng-click="preset('ecoTemp')">{{'ECO' | translate}}</md-button><!--
                        --><md-button class="md-raised" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('comfyTemp'))}"  ng-click="preset('comfyTemp')">{{'COMFY' | translate}}</md-button>
                    </div>
                </div>
            </div>

            <div layout="row" ng-hide="!getConfig('guiShowModeControl', true)">
                <div flex layout="row" layout-align="start center" class="md-body-1">
                    {{'MODE' | translate}}
                </div>
                <div>
                    <div class="button-group md-raised">
                        <md-button class="md-raised" ng-class="{'md-accent': (getAttribute('mode').value == 'auto')}" ng-click="setMode('auto')">{{'AUTO' | translate}}</md-button><!--
                        --><md-button class="md-raised" ng-class="{'md-accent': (getAttribute('mode').value == 'manu')}" ng-click="setMode('manu')">{{'MANUAL' | translate}}</md-button><!--
                        --><md-button class="md-raised" ng-class="{'md-accent': (getAttribute('mode').value == 'boost')}" ng-click="setMode('boost')">{{'BOOST' | translate}}</md-button>
                    </div>
                </div>
            </div>

        </div>
    </md-card-content>
    <!--div class="md-actions" layout="row">
        <div flex>
            <md-button ng-hide="!getConfig('guiShowPresetControl')" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('ecoTemp'))}" ng-click="preset('ecoTemp')">Eco</md-button>
            <md-button ng-hide="!getConfig('guiShowPresetControl')" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('comfyTemp'))}"  ng-click="preset('comfyTemp')">Comfy</md-button>
        </div>
        <div>
            <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'auto')}" ng-click="setMode('auto')">Auto</md-button>
            <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'manu')}" ng-click="setMode('manu')">Manual</md-button>
            <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'boost')}" ng-click="setMode('boost')">Boost</md-button>

        </div>

    </div>
    <div ng-hide="!getConfig('guiShowPresetControl')" class="md-actions" layout="row" layout-align="end center">
        <span>Preset</span>
        <md-button ng-hide="!getConfig('guiShowPresetControl')" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('ecoTemp'))}" ng-click="preset('ecoTemp')">Eco</md-button>
        <md-button ng-hide="!getConfig('guiShowPresetControl')" ng-class="{'md-accent': (getAttribute('temperatureSetpoint').value == getConfig('comfyTemp'))}"  ng-click="preset('comfyTemp')">Comfy</md-button>
    </div>
    <div ng-hide="!getConfig('guiShowModeControl')" class="md-actions" layout="row" layout-align="end center">
        <span>Mode</span>
        <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'auto')}" ng-click="setMode('auto')">Auto</md-button>
        <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'manu')}" ng-click="setMode('manu')">Manual</md-button>
        <md-button ng-hide="!getConfig('guiShowModeControl')" ng-class="{'md-accent': (getAttribute('mode').value == 'boost')}" ng-click="setMode('boost')">Boost</md-button>
    </div-->
</md-card>