diff --git a/config/lovelace/decluttering_templates/cards/brita_water_card.yaml b/config/lovelace/decluttering_templates/cards/brita_water_card.yaml new file mode 100644 index 0000000..d5b3500 --- /dev/null +++ b/config/lovelace/decluttering_templates/cards/brita_water_card.yaml @@ -0,0 +1,49 @@ +brita_water_card: + card: + type: custom:button-card + template: + - default + - with_state_indicator + name: Brita water + entity: script.brita_pour_water + custom_fields: + remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]" + tap_action: + action: toggle + styles: + card: + - background: > + [[[ + const remaining = states['input_number.brita_remaining_liters'].state; + const percent = 100 - (remaining / 150 * 100); + return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)' + ]]] + - color: white + name: + - color: > + [[[ + const remaining = states['input_number.brita_remaining_liters'].state; + const percent = 100 - (remaining / 150 * 100); + + return percent < 75 ? 'black' : 'white'; + ]]] + icon: + - color: > + [[[ + const remaining = states['input_number.brita_remaining_liters'].state; + const percent = 100 - (remaining / 150 * 100); + + return percent < 25 ? 'black' : 'white'; + ]]] + custom_fields: + remaining_liters: + - position: absolute + - top: 5px + - right: 5px + - font-size: 12px + variables: + state_indicator_id: binary_sensor.brita_should_change_filter + state_indicator_size: 5px + state_indicator_off_size: 0px + state_indicator_on_color: var(--color-red) + state_on_indicator_on_color: var(--color-red) diff --git a/config/lovelace/home_dashboard/kitchen_dashboard.yaml b/config/lovelace/home_dashboard/kitchen_dashboard.yaml index 8a0509c..e86c74a 100644 --- a/config/lovelace/home_dashboard/kitchen_dashboard.yaml +++ b/config/lovelace/home_dashboard/kitchen_dashboard.yaml @@ -48,31 +48,8 @@ - type: horizontal-stack title: Brita cards: - - type: custom:button-card - template: default - name: Pour water - entity: script.brita_pour_water - custom_fields: - remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]" - tap_action: - action: toggle - styles: - card: - - background: > - [[[ - const remaining = states['input_number.brita_remaining_liters'].state; - const percent = 100 - (remaining / 150 * 100); - return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)' - ]]] - - color: white - icon: - - color: white - custom_fields: - remaining_liters: - - position: absolute - - top: 5px - - right: 5px - - font-size: 12px + - type: custom:decluttering-card + template: brita_water_card - type: custom:button-card template: default name: New filter diff --git a/config/lovelace/home_dashboard/main_dashboard.yaml b/config/lovelace/home_dashboard/main_dashboard.yaml index 43cdacd..3d9b381 100644 --- a/config/lovelace/home_dashboard/main_dashboard.yaml +++ b/config/lovelace/home_dashboard/main_dashboard.yaml @@ -126,53 +126,8 @@ entity: binary_sensor.pi_hole_enabled name: Pi-Hole icon: mdi:pi-hole - - type: custom:button-card - template: - - default - - with_state_indicator - name: Brita water - entity: script.brita_pour_water - custom_fields: - remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]" - tap_action: - action: toggle - styles: - card: - - background: > - [[[ - const remaining = states['input_number.brita_remaining_liters'].state; - const percent = 100 - (remaining / 150 * 100); - return 'linear-gradient(180deg, var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + percent + '%, var(--primary-color) ' + percent + '%)' - ]]] - - color: white - name: - - color: > - [[[ - const remaining = states['input_number.brita_remaining_liters'].state; - const percent = 100 - (remaining / 150 * 100); - - return percent < 75 ? 'black' : 'white'; - ]]] - icon: - - color: > - [[[ - const remaining = states['input_number.brita_remaining_liters'].state; - const percent = 100 - (remaining / 150 * 100); - - return percent < 25 ? 'black' : 'white'; - ]]] - custom_fields: - remaining_liters: - - position: absolute - - top: 5px - - right: 5px - - font-size: 12px - variables: - state_indicator_id: binary_sensor.brita_should_change_filter - state_indicator_size: 5px - state_indicator_off_size: 0px - state_indicator_on_color: var(--color-red) - state_on_indicator_on_color: var(--color-red) + - type: custom:decluttering-card + template: brita_water_card # Column 2 - type: vertical-stack