Restructure bubble card modules folder
This commit is contained in:
32
bubble/Popup Temperature Button/code.js
Normal file
32
bubble/Popup Temperature Button/code.js
Normal file
@ -0,0 +1,32 @@
|
||||
${(() => {
|
||||
const hot = hass?.states[this.config?.popup_temperature_button?.hot_entity]?.state || '';
|
||||
const cold = hass?.states[this.config?.popup_temperature_button?.cold_entity]?.state || '';
|
||||
|
||||
let bg_color = 'var(--background-color-2)';
|
||||
let hot_color = 'var(--error-color)';
|
||||
let cold_color = 'var(--cyan-color)';
|
||||
|
||||
// Main button background
|
||||
const mainButton = card?.querySelector('.bubble-button-background');
|
||||
if (mainButton) {
|
||||
mainButton.style.opacity = '1';
|
||||
if (hot === 'on') {
|
||||
mainButton.style.backgroundColor = hot_color;
|
||||
} else if (cold === 'on') {
|
||||
mainButton.style.backgroundColor = cold_color;
|
||||
} else {
|
||||
mainButton.style.backgroundColor = bg_color;
|
||||
}
|
||||
mainButton.style.transition = 'background-color 1s';
|
||||
}
|
||||
|
||||
// Unavailable state
|
||||
if (mainButton && state === 'unavailable') {
|
||||
mainButton.classList.add('is-unavailable');
|
||||
} else if (mainButton) {
|
||||
mainButton.classList.remove('is-unavailable');
|
||||
}
|
||||
|
||||
// No CSS string needed
|
||||
return '';
|
||||
})()}
|
14
bubble/Popup Temperature Button/editor.yaml
Normal file
14
bubble/Popup Temperature Button/editor.yaml
Normal file
@ -0,0 +1,14 @@
|
||||
- type: expandable
|
||||
title: Entity Configuration
|
||||
icon: mdi:format-list-bulleted
|
||||
schema:
|
||||
- name: hot_entity
|
||||
label: Hot Entity
|
||||
selector:
|
||||
entity:
|
||||
device_class: heat
|
||||
- name: cold_entity
|
||||
label: Cold Entity
|
||||
selector:
|
||||
entity:
|
||||
device_class: cold
|
55
bubble/Popup Temperature Button/import.yaml
Normal file
55
bubble/Popup Temperature Button/import.yaml
Normal file
@ -0,0 +1,55 @@
|
||||
popup_temperature_button:
|
||||
name: Popup Temperature Button
|
||||
version: '1.0'
|
||||
creator: Tony Stork
|
||||
supported:
|
||||
- button
|
||||
description: Will turn the button red if the room is too hot, cyan if too cold, otherwise default style applies
|
||||
code: |-
|
||||
${(() => {
|
||||
const hot = hass?.states[this.config?.popup_temperature_button?.hot_entity]?.state || '';
|
||||
const cold = hass?.states[this.config?.popup_temperature_button?.cold_entity]?.state || '';
|
||||
|
||||
let bg_color = 'var(--background-color-2)';
|
||||
let hot_color = 'var(--error-color)';
|
||||
let cold_color = 'var(--cyan-color)';
|
||||
|
||||
// Main button background
|
||||
const mainButton = card?.querySelector('.bubble-button-background');
|
||||
if (mainButton) {
|
||||
mainButton.style.opacity = '1';
|
||||
if (hot === 'on') {
|
||||
mainButton.style.backgroundColor = hot_color;
|
||||
} else if (cold === 'on') {
|
||||
mainButton.style.backgroundColor = cold_color;
|
||||
} else {
|
||||
mainButton.style.backgroundColor = bg_color;
|
||||
}
|
||||
mainButton.style.transition = 'background-color 1s';
|
||||
}
|
||||
|
||||
// Unavailable state
|
||||
if (mainButton && state === 'unavailable') {
|
||||
mainButton.classList.add('is-unavailable');
|
||||
} else if (mainButton) {
|
||||
mainButton.classList.remove('is-unavailable');
|
||||
}
|
||||
|
||||
// No CSS string needed
|
||||
return '';
|
||||
})()}
|
||||
editor:
|
||||
- type: expandable
|
||||
title: Entity Configuration
|
||||
icon: mdi:format-list-bulleted
|
||||
schema:
|
||||
- name: hot_entity
|
||||
label: Hot Entity
|
||||
selector:
|
||||
entity:
|
||||
device_class: heat
|
||||
- name: cold_entity
|
||||
label: Cold Entity
|
||||
selector:
|
||||
entity:
|
||||
device_class: cold
|
Reference in New Issue
Block a user