SergiuToporjinschi/node-red-contrib-heater-controller

<div class='heater-slider wrapper' layout="column" flex layout-align="center stretch" ng-init='init()'>
    <p ng-if="config.title" class="title">{{config.title}}</p>
    <div ng-show='typeof(config) === "undefined"' layout="row" layout-sm="column" layout-align="space-around">
        <md-progress-circular md-mode="indeterminate"></md-progress-circular>
    </div>
    <div ng-show='typeof(config) !== "undefined"' class="content">
        <div layout="row" layout-align="end center" class="warning-icon">
            <span class="info" title="Current calendar temp" ng-show="status.currentSchedule != undefined"><i class="fa fa-calendar-o" aria-hidden="true"></i>{{status.currentSchedule.temp}}&deg;{{config.unit}}
                ({{status.currentSchedule.time}})</span>
            <span class="info" title="Next calendar temp" ng-show="status.nextSchedule != undefined"><i class="fa fa-calendar-plus-o" aria-hidden="true"></i>{{status.nextSchedule.temp}}&deg;{{config.unit}}
                ({{status.nextSchedule.time}})</span>
            <span class="info" title="Logs" ng-show="status.logs.length > 0" ng-click="showLogs()"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
            <div flex></div>
            <i title="Calendar is missing" class="fa fa-calendar" style="color:red" aria-hidden="true" ng-if="!config.calendar"></i>
            <i title="Current temperature is missing" class="fa fa-thermometer-empty" style="color:red" aria-hidden="true" ng-if="!status.currentTemp"></i>
        </div>
        <div class="control-container">
            <div class="icon-contr-container">
                <div class="side-icon-container">
                    <i ng-click='isLocked($event)' ng-class="status.isLocked ? 'fa-lock' : 'fa-unlock-alt'" class="fa no-select link-pointer" style="font-size: 2em; color:#0094ce" title="Locking on current target (isLocked)"></i>
                    <i ng-click='toSchedule($event)' class="fa fa-rotate-left no-select link-pointer" style="font-size: 1.5em; color:#0094ce" title="Reset target value to current schedule (isUserCustomFalse)"></i>
                </div>

                <div title="Current target (user value or calendar). Double-click for reset." ng-class="{'user-mode': status.isUserCustom}" class="target-temp temp no-select link-pointer"
                    md-swipe-left="toSchedule($event)" md-swipe-right="toSchedule($event)" ng-dblclick="toSchedule($event)">{{status.targetValue ? (status.targetValue | number:1) : "--.-"}}&deg;{{config.unit}}</div>
                <div class='side-icon-container'>
                    <div class="current-cal-temp" title="Current temperature (currentTemp)">{{status.currentTemp ? (status.currentTemp | number:1) : "--.-"}}</div>
                    <i title="Heater status" style="font-size: 1.5em;" class="fa fa-fire icon" ng-class="status.currentHeaterStatus == 'on' ? 'iconTrue' : 'iconFalse'" aria-hidden="true"></i>
                </div>
            </div>
            <div>
                <md-slider md-discrete ng-disabled='!status || !status.targetValue || !status.currentTemp' ng-change="userTargetChanged($event)" class="md-primary" ng-model="status.userTargetValue"
                    step="{{config.sliderStep}}" min="{{config.sliderMinValue}}" max="{{config.sliderMaxValue}}" title="Current user target temperature (userTargetValue)">
            </div>
        </div>
    </div>
</div>