diff --git a/config-2.yaml b/config-2.yaml index 8e4b072..922a31f 100644 --- a/config-2.yaml +++ b/config-2.yaml @@ -1,4 +1,7 @@ # this is another version of the dashbaord that is a WIP +kiosk_mode: + hide_header: '[[[ user_name === "Viewer" ]]]' + hide_sidebar: '[[[ is_state("input_boolean.hide_sidebar", "on") ]]]' views: - title: Home sections: @@ -53,97 +56,177 @@ views: column_span: 4 - type: grid cards: - - type: horizontal-stack + - type: vertical-stack cards: - - type: custom:bubble-card - card_type: button - button_type: state - entity: person.brian - scrolling_effect: false - show_icon: true - show_name: true - show_state: false - tap_action: - action: perform-action - perform_action: script.brian_calendar_visible_filter - target: {} - button_action: - tap_action: - action: perform-action - perform_action: script.brian_calendar_visible_filter - target: {} - styles: | - .bubble-button-background { - opacity: 1 !important; - background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;} - } - - type: custom:bubble-card - card_type: button - button_type: state - entity: person.brian - name: Dogs - scrolling_effect: false - show_icon: true - show_name: true - show_state: false - tap_action: - action: perform-action - perform_action: script.dog_calendar_visible_filter - target: {} - button_action: - tap_action: - action: perform-action - perform_action: script.dog_calendar_visible_filter - target: {} - styles: | - .bubble-button-background { - opacity: 1 !important; - background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;} - } - - type: custom:bubble-card - card_type: button - button_type: name - card_layout: large - name: Add Event - icon: mdi:calendar-plus - tap_action: - action: navigate - navigation_path: '#addcalendarevent' - button_action: - tap_action: - action: navigate - navigation_path: '#addcalendarevent' - styles: | - * { - font-size: 1.05em !important; - } - ha-card { - --bubble-main-background-color: #393745 !important; - width: 300px; - } - .bubble-icon { - --mdc-icon-size: 30px !important; - color: snow !important; - opacity: 1; - } - .bubble-icon-container { - background: #393745 !important; - display: flex; + - type: horizontal-stack + cards: + - type: custom:bubble-card + card_type: button + button_type: state + entity: person.brian + scrolling_effect: false + show_icon: true + show_name: true + show_state: false + tap_action: + action: perform-action + perform_action: script.brian_calendar_visible_filter + target: {} + button_action: + tap_action: + action: perform-action + perform_action: script.brian_calendar_visible_filter + target: {} + styles: | + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;} + } + - type: custom:bubble-card + card_type: button + button_type: state + entity: person.kate + scrolling_effect: false + show_icon: true + show_name: true + show_state: false + tap_action: + action: perform-action + perform_action: script.kate_calendar_visible_filter_duplicate + target: {} + button_action: + tap_action: + action: perform-action + perform_action: script.kate_calendar_visible_filter_duplicate + target: {} + styles: | + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['input_text.kate_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(240, 8, 130, 0.5)'} !important;} + } + - type: custom:bubble-card + card_type: button + button_type: state + entity: person.brian + name: Dogs + scrolling_effect: false + show_icon: true + show_name: true + show_state: false + tap_action: + action: perform-action + perform_action: script.dog_calendar_visible_filter + target: {} + button_action: + tap_action: + action: perform-action + perform_action: script.dog_calendar_visible_filter + target: {} + styles: | + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;} + } + - type: custom:bubble-card + card_type: button + button_type: state + entity: calendar.holidays + scrolling_effect: false + show_icon: true + show_name: true + show_state: false + tap_action: + action: perform-action + perform_action: script.holiday_calendar_visible_filter + target: {} + button_action: + tap_action: + action: perform-action + perform_action: script.holiday_calendar_visible_filter + target: {} + styles: | + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['input_text.holiday_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(175, 150, 255, 0.6)'} !important;} + } + icon: mdi:calendar-month + - type: custom:bubble-card + card_type: button + button_type: state + entity: calendar.contact_birthdays + scrolling_effect: false + show_icon: true + icon: mdi:cake + show_name: true + show_state: false + tap_action: + action: perform-action + perform_action: script.contact_calendar_visible_filter + target: {} + button_action: + tap_action: + action: perform-action + perform_action: script.contact_calendar_visible_filter + target: {} + styles: | + .bubble-button-background { + opacity: 1 !important; + background-color: ${hass.states['input_text.contact_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(250, 230, 30, 0.6)'} !important;} + } + card_layout: large + force_icon: false + name: Birthdays + - type: custom:bubble-card + card_type: button + button_type: name + card_layout: large + name: Add Event + icon: mdi:calendar-plus + tap_action: + action: navigate + navigation_path: '#addcalendarevent' + button_action: + tap_action: + action: navigate + navigation_path: '#addcalendarevent' + styles: | + * { + font-size: 1.05em !important; + } + ha-card { + --bubble-main-background-color: #393745 !important; + width: 300px; + } + .bubble-icon { + --mdc-icon-size: 30px !important; + color: snow !important; + opacity: 1; + } + .bubble-icon-container { + background: #393745 !important; + display: flex; - } - .bubble-name { - color: snow !important; - opacity: 1; - display: flex; - line-height: 18px; - flex-direction: row; - justify-content: center; - flex-grow: 1; - margin: 0 40px 0 0; - pointer-events: none; - position: relative; - overflow: hidden; - } + } + .bubble-name { + color: snow !important; + opacity: 1; + display: flex; + line-height: 18px; + flex-direction: row; + justify-content: center; + flex-grow: 1; + margin: 0 40px 0 0; + pointer-events: none; + position: relative; + overflow: hidden; + } + [data-entity="calendar.contact_birthdays"] { + color: red !important; + } + grid_options: + columns: full + - type: vertical-stack + cards: - type: custom:bubble-card card_type: select entity: input_select.calendar_view @@ -153,47 +236,63 @@ views: show_last_changed: false show_attribute: false grid_options: - columns: full + columns: 9 + rows: 1 - type: custom:config-template-card entities: - input_text.brian_calendar_filter + - input_text.kate_calendar_filter - input_text.dog_calendar_filter + - input_text.holiday_calendar_filter + - input_text.contact_calendar_filter - inpup_select.calendar_view variables: PERSONCAL: states['input_text.brian_calendar_filter']?.state + PERSON2CAL: states['input_text.kate_calendar_filter']?.state DOGCAL: states['input_text.dog_calendar_filter']?.state + HOLCAL: states['input_text.holiday_calendar_filter']?.state + BIRCAL: states['input_text.contact_calendar_filter']?.state VIEW: states['input_select.calendar_view']?.state DAYS: | (() => { + const width = window.innerWidth; const calendarView = states['input_select.calendar_view']?.state; - + if (width >= 390 && width<= 500) return 1; if (calendarView === 'Today') return 1; if (calendarView === 'Tomorrow') return 2; - - // Check for Month, Biweek, or Week based on screen width - if (calendarView === 'Week') return 7; - if (calendarView === 'Biweek') return 14; - if (calendarView === 'Month') return 28; if (calendarView === 'Bimonth') return 56; - - // Default fallback to 7 if no condition matches - return 31; + if (calendarView === 'Month') return 31; + if (calendarView === 'Biweek') return 14; + if (calendarView === 'Week') return 7; + return 3; })() - #### OPTION TO MAKE 1 MONTH VIEW 31 DAYS #### card: type: custom:week-planner-card calendars: - - entity: calendar.personal + - entity: calendar.brian name: brian color: rgba(15, 208, 184, 0.3) filter: ${ PERSONCAL } + - entity: calendar.kate + name: kate + color: rgba(223, 8, 119, 0.35) + filter: ${ PERSON2CAL } - entity: calendar.dogs name: dogs color: rgba(15, 100, 255, 0.5) filter: ${ DOGCAL } + - entity: calendar.holidays + name: holidays + color: rgba(175, 150, 255, 0.6) + filter: ${ HOLCAL } + - entity: calendar.contact_birthdays + name: Birthdays + color: rgba(250, 240, 30, 0.6) + filter: ${ BIRCAL } days: ${ DAYS } + startingDay: today + showNavigation: true startingDayOffset: 0 - startingDay: month hideWeekend: false noCardBackground: false compact: false @@ -229,18 +328,16 @@ views: card_mod: style: | ha-card { - #font-family: 'Ovo'; .container .navigation .data-year { position: static; - right: 60px; } .event.past { opacity: .2; background-color: gray !important; } .container .data-week { - display: none !important; - } + display: none !important; + } .time { color: #333333 !important; font-size: 0.8em !important; @@ -254,6 +351,16 @@ views: overflow: hidden !important; font-size: 1.1em !important; } + .event.fullday { + background: none !important; /* or transparent */ + border: 2px solid var(--border-color); /* Use your border color variable */ + } + .fullday .inner { + padding: 0.25rem !important; + } + .fullday .inner .time { + display: none !important; + } .none { background-color: transparent !important; } @@ -263,9 +370,10 @@ views: padding-left: 4px; padding-right: 4px; } - #.today { - # border: solid 2px #000000 !important; - #} + .today { + border: solid 2px rgba(0,0,0,0) !important; + border-radius: 5px; + } .day .date .text { font-size: 1em !important; font-weight: bold !important; @@ -275,9 +383,9 @@ views: font-size: 3em !important; } .day { - border-radius: 5px; --background-color: red; border: solid 1px whitesmoke; + border-radius: 5px; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; @@ -303,32 +411,21 @@ views: .container .legend { grid-column: 1 / -1 !important; /* span full width */ grid-row: 1 !important; - justify-content: center !important; + justify-content: left !important; } .navigation { display: flex !important; flex-direction: row !important; - align-items: center !important; + align-items: left !important; margin-bottom: 0px !important; - text-align: center !important; + text-align: left !important; } .navigation .month { color: transparent !important; /* hide original text */ position: relative !important; white-space: nowrap !important; - align-items: center !important; - } - - .navigation .month::after { - content: "November 🦃" !important; /* new text */ - color: #000000 !important; /* your desired color */ - position: absolute !important; - white-space: nowrap !important; - left: 0; - top: 0; - padding-right: 4px; } /* Reorder days so Sunday is first column */ @@ -343,6 +440,7 @@ views: .week.past-week { display: none !important; } + } grid_options: columns: full - type: vertical-stack @@ -362,12 +460,17 @@ views: ${hass.states['input_select.calendar_select'].state == 'brian' ? 'rgba(15, 208, 184, 0.3)' : hass.states['input_select.calendar_select'].state == + 'kate' ? 'rgba(223, 8, 119, 0.35)' + : hass.states['input_select.calendar_select'].state == 'dogs' ? 'rgba(15, 100, 255, 0.5)' : hass.states['input_select.calendar_select'].state == - 'Birthdays' ? '#000000' + 'Birthdays' ? 'light-grey' : 'red'} !important; } modules: [] + close_action: + action: navigate + navigation_path: /our-calendar - type: vertical-stack cards: - type: entities @@ -388,10 +491,10 @@ views: card: type: entities entities: - - entity: input_datetime.calendar_event_start - name: Start Time - - entity: input_datetime.calendar_event_end - name: End Time + - entity: input_datetime.calendar_timed_event_start + name: Start Date & Time + - entity: input_datetime.calendar_timed_event_end + name: End Date & Time - type: conditional conditions: - entity: input_boolean.calendar_all_day_event @@ -407,13 +510,15 @@ views: name: Add Event to Calendar tap_action: action: call-service - service: script.add_calendar_event + service: script.add_caldav_calendar_event styles: card: - background-color: | [[[ if (states['input_select.calendar_select'].state == 'brian') return "rgba(15, 208, 184, 0.3)"; + if (states['input_select.calendar_select'].state == 'kate') + return "rgba(223, 8, 119, 0.35)"; if (states['input_select.calendar_select'].state == 'dogs') return "rgba(15, 100, 255, 0.5)"; if (states['input_select.calendar_select'].state == 'Birthdays') diff --git a/dashboard.yaml b/dashboard.yaml index 4b9214f..cfea473 100644 --- a/dashboard.yaml +++ b/dashboard.yaml @@ -293,6 +293,7 @@ views: filter: ${ BIRCAL } days: ${ DAYS } startingDay: sunday + showNavigation: false startingDayOffset: 0 hideWeekend: false noCardBackground: false @@ -323,6 +324,9 @@ views: yesterday: '' today: '' tomorrow: '' + overmorrow: '' + fullDay: '' + noEvents: '' card_mod: style: | ha-card { @@ -377,7 +381,7 @@ views: padding: 0.2%; width: 13% !important; } - } + } grid_options: columns: full - type: vertical-stack