Skip to content

Commit

Permalink
feat: display heater applied power
Browse files Browse the repository at this point in the history
  • Loading branch information
@cadriel
cadriel committed Jan 21, 2021
1 parent e68d4c1 commit 4259e18
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 109 deletions.
3 changes: 1 addition & 2 deletions src/components/inputs/InputTemperature.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@
:rules="[rules.max, rules.min]"
@keyup.enter="emitChange"
@focus="$event.target.select()"
type="number"
suffix="°C"
class="mr-1">
class="mr-1 v-input--width-small">
</v-text-field>
<v-btn
:min-width="40"
Expand Down
229 changes: 122 additions & 107 deletions src/components/widgets/TemperatureTargetsWidget.vue
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,140 @@
<template>
<v-container fluid class="py-2 px-6">
<v-row v-if="klippyConnected">
<v-col sm="4" offset-sm="4" class="px-2 text-subtitle-1 grey--text text--darken-1">
<span class="d-none d-sm-inline">Actual</span>
</v-col>
<v-col sm="4" class="px-2 text-subtitle-1 grey--text text--darken-1">
<v-layout>
<span class="">Target</span>
<v-spacer></v-spacer>
<v-menu bottom left :min-width="150">
<template v-slot:activator="{ on, attrs }">
<v-btn
:min-width="40"
v-bind="attrs" v-on="on"
color="secondary"
small
class="pa-0">
<v-icon>$menuAlt</v-icon>
</v-btn>
</template>
<v-list
<v-card-text>
<v-row>
<v-col class="text-subtitle-1 grey--text text--darken-1 d-none d-sm-flex">
Item
</v-col>
<v-col cols="2" class="text-subtitle-1 grey--text text--darken-1 d-none d-sm-flex">
Power
</v-col>
<v-col cols="6" sm="3" class="text-subtitle-1 grey--text text--darken-1">
Current
</v-col>
<v-col sm="4" class="text-subtitle-1 grey--text text--darken-1">
<v-layout>
<span class="">Target</span>
<v-spacer></v-spacer>
<v-menu bottom left offset-y :min-width="150">
<template v-slot:activator="{ on, attrs }">
<v-btn
:min-width="40"
v-bind="attrs" v-on="on"
color="secondary"
small
class="pa-0">
<v-icon>$menuAlt</v-icon>
</v-btn>
</template>
<v-list
dense
color="secondary">
<v-list-item
@click="setAllOff"
link>
<v-list-item-title>
<v-icon small left color="cyan">$snowflakeAlert</v-icon>
All off
</v-list-item-title>
</v-list-item>
<v-list-item
link
dense
color="secondary">
<v-list-item
@click="setAllOff"
link>
<v-list-item-title>
<v-icon small left color="cyan">$snowflakeAlert</v-icon>
All off
</v-list-item-title>
</v-list-item>
<v-list-item
link
dense
@click="applyPreset(preset)"
v-for="(preset, i) of presets"
:key="i">
<v-list-item-title>
<v-icon small left color="warning">$fire</v-icon>
{{ preset.name }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-layout>
</v-col>
</v-row>
@click="applyPreset(preset)"
v-for="(preset, i) of presets"
:key="i">
<v-list-item-title>
<v-icon small left color="warning">$fire</v-icon>
{{ preset.name }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-layout>
</v-col>
</v-row>

<v-row v-for="item in heaters" :key="item.name" align="center">
<v-col cols="6" sm="auto" class="pr-0 d-none d-sm-flex">
<v-icon small color="secondary">$fire</v-icon>
</v-col>
<v-col cols="6" sm="" class="text-subtitle-1 grey--text text--darken-1 pb-0 pb-md-2">
{{ item.prettyName }}
</v-col>
<v-col cols="6" sm="2" class="grey--text pb-0 pb-md-2">
<span v-if="item.power <= 0 && item.target <= 0">off</span>
<span v-if="item.target > 0">
{{ (item.power * 100).toFixed() }}<small>%</small>
</span>
</v-col>
<v-col cols="6" sm="3" class="grey--text focus--text pt-0 pt-md-2">
{{ item.temperature.toFixed(1) }}<small>°C</small>
</v-col>
<v-col cols="6" sm="4" class="pt-0 pt-md-2">
<input-temperature
:value="item.target"
@input="setHeaterTargetTemp(item.name, $event)"
:max="item.maxTemp"
:min="item.minTemp"
></input-temperature>
</v-col>
</v-row>

<v-row v-for="item in heaters" :key="item.name">
<v-col cols="12" sm="4" class="py-2 px-2 text-subtitle-1 grey--text text--darken-1">
<v-icon small left color="secondary">$fire</v-icon>
<template v-for="item in fans">
<v-row :key="item.name" v-if="item.type === 'temperature_fan'" align="center">
<v-col cols="6" sm="auto" class="pr-0 d-none d-md-flex">
<v-icon
small
:class="{ 'spin': item.speed > 0 && item.target > 0 }"
color="secondary">
$fan
</v-icon>
</v-col>
<v-col cols="6" sm="" class="text-subtitle-1 grey--text text--darken-1 pb-0 pb-md-2">
{{ item.prettyName }}
<small class="ml-3" v-if="item.target === 0">off</small>
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2 grey--text focus--text">
<v-col cols="5" sm="2" class="grey--text pb-0 pb-md-2">
<span v-if="item.speed > 0 && item.target > 0">
{{ (item.speed * 100).toFixed(0) }}<small>%</small>
</span>
<span v-if="item.speed <= 0 && item.target > 0">
standby
</span>
<span v-if="item.speed <=0 && item.target <= 0">off</span>
</v-col>
<v-col cols="6" sm="3" class="grey--text focus--text pt-0 pt-md-2">
{{ item.temperature.toFixed(1) }}<small>°C</small>
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2">
<v-col cols="6" sm="4" class="pt-0 pt-md-2">
<input-temperature
:value="item.target"
@input="setHeaterTargetTemp(item.name, $event)"
@input="setFanTargetTemp(item.name, $event)"
:max="item.maxTemp"
:min="item.minTemp"
></input-temperature>
</v-col>
</v-row>
</template>

<template v-for="item in fans">
<v-row :key="item.name" v-if="item.type === 'temperature_fan'">
<v-col cols="12" sm="4" class="py-2 px-2 text-subtitle-1 grey--text text--darken-1">
<v-icon
small
left
:class="{ 'spin': item.speed > 0 && item.target > 0 }"
color="secondary">
$fan
</v-icon>
{{ item.prettyName }}
<small v-if="item.speed > 0 && item.target > 0">
{{ (item.speed * 100).toFixed(0) }}%
</small>

<small class="ml-2" v-if="item.speed <= 0 && item.target > 0">
standby
</small>
<small class="ml-2" v-if="item.speed <=0 && item.target <= 0">off</small>
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2 grey--text focus--text">
{{ item.temperature.toFixed(1) }}<small>°C</small>
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2 grey--text focus--text">
<input-temperature
:value="item.target"
@input="setFanTargetTemp(item.name, $event)"
:max="item.maxTemp"
:min="item.minTemp"
></input-temperature>
</v-col>
</v-row>
</template>

<v-row v-for="item in sensors" :key="item.name">
<v-col cols="12" sm="4" class="py-2 px-2 text-subtitle-1 grey--text text--darken-1">
<v-icon small left color="secondary">$thermometer</v-icon>{{ item.prettyName }}
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2 grey--text focus--text">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">{{ item.temperature.toFixed(1) }}<small>°C</small></span>
</template>
<span>
<span class="amber--text text--lighten-1">high {{ item.measured_max_temp.toFixed(1) }}°C</span><br />
<span class="cyan--text">low {{ item.measured_min_temp.toFixed(1) }}°C</span>
</span>
</v-tooltip>
</v-col>
<v-col cols="6" sm="4" class="py-2 px-2 grey--text focus--text">
</v-col>
</v-row>

</v-container>
<v-row v-for="item in sensors" :key="item.name" align="center">
<v-col cols="auto" class="pr-0 d-none d-sm-flex">
<v-icon small color="secondary">$thermometer</v-icon>
</v-col>
<v-col class="text-subtitle-1 grey--text text--darken-1">
{{ item.prettyName }}
</v-col>
<v-col cols="6" sm="7" class="grey--text focus--text">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">{{ item.temperature.toFixed(1) }}<small>°C</small></span>
</template>
<span>
<span class="amber--text text--lighten-1">high {{ item.measured_max_temp.toFixed(1) }}°C</span><br />
<span class="cyan--text">low {{ item.measured_min_temp.toFixed(1) }}°C</span>
</span>
</v-tooltip>
</v-col>
</v-row>
</v-card-text>
</template>

<script lang="ts">
Expand Down
1 change: 1 addition & 0 deletions src/store/socket/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export interface Heater {
prettyName: string;
temperature: number;
target: number;
power: number;
minTemp?: number;
maxTemp?: number;
}
Expand Down

0 comments on commit 4259e18

Please sign in to comment.