partials/devices/thermostat.html
<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>