diff --git a/mobile_dashboard.yaml b/mobile_dashboard.yaml index 2f70775..07cb416 100644 --- a/mobile_dashboard.yaml +++ b/mobile_dashboard.yaml @@ -305,6 +305,150 @@ decluttering_templates: opacity: ${hass.states['[[hot_entity]]'].state === 'on' ? 0.3 : 0} !important; transition: all 1s !important; } + popup_timer_card: + defaults: + name: '' + entity: '' + card: + type: conditional + conditions: + - condition: state + entity: '[[entity]]' + state_not: idle + card: + type: custom:bubble-card + card_type: button + button_type: state + entity: '[[entity]]' + name: '[[name]]' + icon: mdi:timer + sub_button: + - entity: '[[entity]]' + tap_action: + action: perform-action + perform_action: timer.start + target: + entity_id: '[[entity]]' + name: Start + icon: mdi:play + visibility: [] + - entity: '[[entity]]' + name: Pause + icon: mdi:pause + tap_action: + action: perform-action + perform_action: timer.pause + target: + entity_id: '[[entity]]' + - entity: '[[entity]]' + name: Cancel + icon: mdi:cancel + tap_action: + action: perform-action + perform_action: timer.cancel + target: + entity_id: '[[entity]]' + - entity: '[[entity]]' + name: Finish + icon: mdi:clock-end + tap_action: + action: perform-action + perform_action: timer.finish + target: + entity_id: '[[entity]]' + styles: | + :host{ + --circle-color: var(--bubble-accent-color, var(--accent-color)); + --percentage: ${(() => { + card.timerEntity = hass.states[entity]; + const now = new Date(); + const endTime = new Date(card.timerEntity.attributes.finishes_at); + const runningTime = Math.round((endTime - now) / 1000); + const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000); + const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000); + + var percentage = 0; + if (isNaN(runningTime)) { + percentage = 100 - Math.round( 100.0 * remainingTime / maxtime); + } else { + percentage = 100 - Math.round( 100.0 * runningTime / maxtime); + } + + if (isNaN(percentage)) { + return "0%"; + } else { + return "" + percentage +"%"; + } + })()}; + } + .bubble-icon-container { + background: radial-gradient( + var(--card-background-color) 60%, + transparent 0% + ), conic-gradient( + var(--circle-color) var(--percentage) 0%, + var(--card-background-color) 0% 100% + ) !important; + } + .bubble-icon-container:after { + content: "" !important; + height: 100% !important; + width: 100% !important; + position: absolute !important; + border-radius: 50% !important; + background: (var(--bubble-button-icon-background-color), 0.1) !important; + } + ${(() => { + function UpdateState(){ + try { + let now = new Date(); + let endTime = new Date(card.timerEntity.attributes.finishes_at); + let runningTime = Math.round((endTime - now)/1000); + let hours = Math.floor(runningTime / 3600); + let minutes = Math.floor((runningTime - (hours * 3600)) / 60); + let remainingSeconds = runningTime % 60; + + card.querySelector('.bubble-state').innerText = + (hours > 0 ? (hours + ":") : "") + + ("0" + minutes).slice(-2) + ":" + + ("0" + remainingSeconds).slice(-2); + + } catch (error) { + card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration; + } + }; + + if (card.timer == null && card.timerEntity.state === 'active') { + card.timer = setInterval(()=>{UpdateState()}, 500); + }else if (card.timerEntity.state != 'active'){ + clearInterval(card.timer); + card.timer = null; + if (card.timerEntity.state !='paused') { + card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration; + } else if(card.timerEntity.state==='paused') { + card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining; + } + } + })()} + + ${(() => { + subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay'); + })()} + ${(() => { + if (card.timerEntity.state != 'active') { + card.querySelector('.bubble-sub-button-2').classList.add("hidden"); + } + })()} + ${(() => { + if (card.timerEntity.state === 'idle') { + card.querySelector('.bubble-sub-button-3').classList.add("hidden"); + } + })()} + ${(() => { + if (card.timerEntity.state === 'idle') { + card.querySelector('.bubble-sub-button-4').classList.add("hidden"); + } + })()} views: - title: Home path: home @@ -1657,27 +1801,11 @@ views: variables: - name: Occupied - entity: binary_sensor.living_room_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.living_room_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.living_room_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: custom:bubble-card card_type: separator name: Security @@ -1841,27 +1969,11 @@ views: variables: - name: Side - entity: binary_sensor.downstairs_bathroom_window_2 - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.downstairs_bathroom_lights_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.downstairs_bathroom_lights_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: vertical-stack cards: - type: custom:bubble-card @@ -2055,27 +2167,11 @@ views: variables: - name: Window - entity: binary_sensor.mud_room_window - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.mud_room_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.mud_room_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: vertical-stack cards: - type: custom:bubble-card @@ -2155,27 +2251,11 @@ views: - entity: binary_sensor.stairway_window_lower - type: custom:bubble-card card_type: empty-column - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.stairwell_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.stairwell_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: grid cards: - type: vertical-stack @@ -2245,36 +2325,11 @@ views: variables: - name: Occupied - entity: binary_sensor.upstairs_hallway_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.upstairs_hallway_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.upstairs_hallway_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - visibility: - - condition: or - conditions: - - condition: state - entity: timer.upstairs_hallway_motion_timer - state: running - - condition: state - entity: timer.upstairs_hallway_motion_timer - state: paused - type: vertical-stack cards: - type: custom:bubble-card @@ -2373,39 +2428,16 @@ views: variables: - name: Occupied - entity: binary_sensor.upstairs_bathroom_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.upstairs_bathroom_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.upstairs_bathroom_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Shower Mode Cooldown - entity: timer.shower_mode_cooldown - name: Cooldown - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.shower_mode_cooldown - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: vertical-stack cards: - type: custom:bubble-card @@ -2670,39 +2702,16 @@ views: variables: - name: Occupied - entity: binary_sensor.master_bedroom_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.master_bedroom_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.master_bedroom_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Shower Mode Cooldown - entity: timer.shower_mode_cooldown - name: Cooldown - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.shower_mode_cooldown - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: vertical-stack cards: - type: custom:bubble-card @@ -2876,27 +2885,11 @@ views: variables: - name: Occupied - entity: binary_sensor.kallen_bedroom_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.kallen_bedroom_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.kallen_bedroom_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: vertical-stack cards: - type: custom:bubble-card @@ -3087,27 +3080,11 @@ views: variables: - name: Occupied - entity: binary_sensor.emma_bedroom_occupied - - type: custom:timer-bar-card - filter: true - entities: + - type: custom:decluttering-card + template: popup_timer_card + variables: + - name: Lights Timer - entity: timer.emma_bedroom_motion_timer - name: Motion Timer - sync_issues: ignore - tap_action: - action: call-service - service: timer.finish - target: - entity_id: timer.emma_bedroom_motion_timer - hold_action: - action: more-info - double_tap_action: - action: none - modifications: - - elapsed: 40% - bar_foreground: orange - - elapsed: 80% - bar_foreground: red - compressed: true - type: grid cards: - type: vertical-stack