config: label: Overview-TEST-2 layoutType: responsive sidebar: true blocks: - component: oh-block config: {} slots: default: - component: oh-grid-cells config: {} slots: default: - component: widget:clock_widget config: {} - component: oh-cell config: title: Power Usage trendItem: ShellyEM_MAINS_Watt slots: default: - component: f7-page config: style: --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 slots: default: - component: f7-row config: class: - margin-top style: height: 100% top: 0px width: 100% slots: default: - component: f7-col config: class: - display-flex - flex-direction-column - align-content-space-around width: 20 slots: default: - component: oh-gauge config: borderBgColor: gray borderColor: green borderWidth: 20 class: - margin-top - margin-bottom item: ShellyEM_MAINS_Watt labelText: Mains max: 8000 min: 0 type: semicircle valueFontSize: 25 valueTextColor: green - component: oh-gauge config: borderBgColor: gray borderColor: blue borderWidth: 25 class: - margin-top - margin-bottom item: ShellyEM_UPS_Watt labelText: UPS max: 2500 min: 0 type: semicircle valueFontSize: 25 valueTextColor: blue - component: f7-col config: width: 20 slots: default: - component: oh-icon config: icon: '=(items.ShellyUNI_VoltageADC_Battery_Level.state === "Charging") ? "charge_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Idling") ? "full_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Running") ? "middle_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Critical") ? "empty_battery" : "error"' style: position: absolute width: 40 - component: Label config: style: font-size: 20px font-weight: 500 line-height: 35px text-align: right white-space: nowrap text: =(items.ShellyUNI_VoltageADC_Battery_Level.state) - component: f7-col config: width: 80 slots: default: - component: oh-chart config: chartType: "" label: Power period: 12h slots: dataZoom: - component: oh-chart-datazoom config: type: inside grid: - component: oh-chart-grid config: containLabel: false legend: - component: oh-chart-legend config: bottom: 3 type: scroll series: - component: oh-time-series config: color: green gridIndex: 0 item: ShellyEM_MAINS_Watt name: Mains type: line xAxisIndex: 0 yAxisIndex: 0 - component: oh-time-series config: color: blue gridIndex: 0 item: ShellyEM_UPS_Watt name: UPS type: line xAxisIndex: 0 yAxisIndex: 0 tooltip: - component: oh-chart-tooltip config: confine: true smartFormatter: true xAxis: - component: oh-time-axis config: gridIndex: 0 yAxis: - component: oh-value-axis config: gridIndex: 0 min: 0 name: W - component: oh-cell config: action: popup actionModal: widget:caddx_graphic_portrait_V6 actionModalConfig: alarmFeedback: Alarm_Feedback sendCommand: CaddxBridge_SendCommand tooltipEnable: true title: Alarm slots: header: - component: f7-list config: mediaList: true slots: default: - component: f7-list-item config: title: Alarm slots: title: - component: f7-chip config: color: '=(items.Partition1_Armed.state === "ON") ? "red" : "green"' text: 1 - component: f7-chip config: color: '=(items.Partition2_Armed.state === "ON") ? "red" : "green"' text: 2 - component: f7-chip config: color: '=(items.Partition3_Armed.state === "ON") ? "red" : "green"' text: 3 - component: f7-chip config: color: '=(items.Partition4_Armed.state === "ON") ? "red" : "green"' text: 4 - component: oh-cell config: action: popup actionModal: widget:weatherPopup_extended_uv_feel_min_max_with_feel_sunrise_sunset actionModalConfig: dateFormat: true forecastDays: "5" forecastHours: "25" globalBackgroundDayImg: durban_day.jpg globalBackgroundNightImg: durban_night.jpg imageFolder: /static/files/weather_img/ itemPrefix: WeatherAtHome_ locationTitle: Durban sunIndicator: true label: Weather on: "true" title: Weather - component: oh-cell config: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" :(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : "green"' on: true title: Access Controls slots: default: - component: f7-list config: style: --f7-list-index-font-size: 1px --f7-list-index-item-height: 1px --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 virtualList: true slots: default: - component: oh-toggle-item config: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' icon: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "oh:door-open" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "oh:door-closed" : "oh:alarm"' iconColor: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' item: ShellyGarageDoorshelly1a4cf12f486ac10163199232_Power title: Garage slots: after: - component: Label config: style: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.displayState) - component: oh-toggle-item config: color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' icon: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "oh:door-open" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "oh:door-closed" : "oh:alarm"' iconColor: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' item: ShellyGateshelly1a4cf12f41d5e10163199231_Power title: Gate slots: after: - component: Label config: style: color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.displayState) - component: oh-cell config: color: '=(items.GPSMarkatHome.state === "ON") ? "green" : (items.GPSRileyatHome.state === "OFF") ? "green" : (items.GPSEthanatHome.state === "OFF") ? "green" : "red"' on: true title: Presence slots: default: - component: f7-list config: style: --f7-list-index-font-size: 1px --f7-list-index-item-height: 1px --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 virtualList: true slots: default: - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Mackeurtan Ave - component: oh-list-item config: color: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMarkatHome title: Mark's Phone slots: after: - component: Label config: style: color: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMarkatHome.displayState) - component: oh-list-item config: color: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSRileyatHome title: Riley's Phone slots: after: - component: Label config: style: color: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRileyatHome.displayState) - component: oh-list-item config: color: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSEthanatHome title: Ethan's Phone slots: after: - component: Label config: style: color: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthanatHome.displayState) - component: oh-list-item config: color: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatHome title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatHome.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHome title: Michael's Phone slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHome.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Meadow Lane - component: oh-list-item config: color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatMeadow title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatMeadow.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatMeadow title: Michael's Phone slots: after: - component: Label config: style: color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatMeadow.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Wilden Place - component: oh-list-item config: color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSRileyatWilden title: Riley's Phone slots: after: - component: Label config: style: color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRileyatWilden.displayState) - component: oh-list-item config: color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSEthanatWilden title: Ethan's Phone slots: after: - component: Label config: style: color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthanatWilden.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Hoylake Drive - component: oh-list-item config: color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatHoylake title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSRileyatHoylake.state === "OFF") ? "red" : (items.GPSRileyatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSRileyatHoylake.state === "OFF") ? "red" : (items.GPSRileyatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSRileyatHoylake title: Riley's Phone slots: after: - component: Label config: style: color: '=(items.GPSRileyatHoylake.state === "OFF") ? "red" : (items.GPSRileyatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRileyatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSEthanatHoylake.state === "OFF") ? "red" : (items.GPSEthanatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSEthanatHoylake.state === "OFF") ? "red" : (items.GPSEthanatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSEthanatHoylake title: Ethan's Phone slots: after: - component: Label config: style: color: '=(items.GPSEthanatHoylake.state === "OFF") ? "red" : (items.GPSEthanatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthanatHoylake.displayState) - component: oh-cell config: color: '=(dayjs(now) - dayjs(items.GPSGroup_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSGroup_LastSeen.state) <= 3600000) ? "green" : "yellow"' on: true title: GPS Last Seen slots: default: - component: f7-list config: style: --f7-list-index-font-size: 1px --f7-list-index-item-height: 1px --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 virtualList: true slots: default: - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSMark_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSMark_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSMark_LastSeen.state) > 3600000) ? "red" : (dayjs(now) - dayjs(items.GPSMark_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSMark_LastSeen title: Marks Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMark_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) > 3600000) ? "red" : (dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSRiley_LastSeen title: Rileys Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRiley_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSEthan_LastSeen title: Ethans Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthan_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSAnne_LastSeen title: Annes Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnne_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSMichael_LastSeen title: Michaels Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichael_LastSeen.displayState) - component: oh-cell config: on: true title: Astro slots: default: - component: f7-list config: style: --f7-list-index-font-size: 1px --f7-list-index-item-height: 1px --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 virtualList: true slots: default: - component: f7-list config: class: - padding-bottom slots: default: - component: oh-list-item config: icon: f7:sunrise iconUsesState: true item: LocalSunRise_StartTime title: Sunrise slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalSunRise_StartTime.displayState) - component: oh-list-item config: icon: f7:sunset iconUsesState: true item: LocalSunSet_StartTime title: Sunset slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalSunSet_StartTime.displayState) - component: oh-list-item config: icon: '=(items.LocalMoon_PhaseName.state === "WAXING_CRESCENT") ? "oh:waxing_crescent" : (items.LocalMoon_PhaseName.state === "NEW") ? "oh:new" : (items.LocalMoon_PhaseName.state === "FIRST_QUARTER") ? "oh:first_quarter" : (items.LocalMoon_PhaseName.state === "WAXING_GIBBOUS") ? "oh:waxing_gibbous" : (items.LocalMoon_PhaseName.state === "FULL") ? "oh:full" : (items.LocalMoon_PhaseName.state === "WANING_GIBBOUS") ? "oh:waning_gibbous" : (items.LocalMoon_PhaseName.state === "THIRD_QUARTER") ? "oh:third_quarter" : (items.LocalMoon_PhaseName.state === "WANING_CRESCENT") ? "oh:waning_crescent" : "f7:exclamationmark_circle"' iconUsesState: true item: LocalMoon_PhaseName title: Moon Phase slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_PhaseName.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoon_Sign title: Moon Sign slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_Sign.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoonRise_StartTime title: Moon Rise Time slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoonRise_StartTime.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoonSet_StartTime title: Moon Set Time slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoonSet_StartTime.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoon_FullMoon title: Full Moon slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_FullMoon.displayState) - component: oh-cell config: action: popup actionModal: page:MemberLocations actionPage: page:MemberLocations title: Member Locations - component: oh-cell config: action: navigate actionAnalyzerItems: - ShellyUNIshellyunie8db84d6b3e510163199230_VoltageADC actionPage: page:ShellyUNI_Battery_Level_Chart title: = "*** UPS as at " + dayjs(items["ShellyUNI_Battery_Updated"].state).fromNow() trendItem: ShellyUNIshellyunie8db84d6b3e510163199230_VoltageADC slots: background: - component: f7-block config: class: - card-opened-fade-out slots: default: - component: oh-icon config: icon: '=(items.ShellyUNI_VoltageADC_Battery_Level.state === "Charging") ? "charge_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Idling") ? "full_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Discharging") ? "middle_battery" : (items.ShellyUNI_VoltageADC_Battery_Level.state === "Critical") ? "empty_battery" : "error"' iconUseState: true style: left: 5px position: absolute top: 30px width: 50px - component: Label config: style: color: red left: 55px position: absolute top: 30px text: = "BATT is " + (items.ShellyUNI_VoltageADC_Battery_Level.state) + " at " + (items.ShellyUNIshellyunie8db84d6b3e510163199230_VoltageADC.state) + " " + (items.ShellyUNI_VoltageADC_Percentage.state) + "% " + (items.ShellyUNIshellyunie8db84d6b3e510163199230_Temperature.state) - component: oh-cell config: footer: Footer header: Header subtitle: SubTitle title: Title slots: default: - component: oh-icon config: icon: oh:empty_battery style: position: absolute width: 40 - component: Label config: style: font-size: 20px font-weight: 500 line-height: 35px text-align: right white-space: nowrap text: Test Label - component: oh-cell config: title: Doors & Windows slots: header: - component: f7-list config: mediaList: true slots: default: - component: f7-list-item config: title: Doors & Windows slots: title: - component: f7-chip config: text: Test - component: Label config: style: color: red text: Front Door open! visible: =test === 'OPEN' - component: Label config: style: color: red text: Living Room Window open! visible: =teste === 'OPEN' - component: oh-cell config: action: navigate actionPage: page:FloorPlan title: Floor Plan - component: oh-cell config: action: popup actionModal: widget:caddx_graphic_portrait_V6 actionModalConfig: alarmFeedback: Alarm_Feedback sendCommand: CaddxBridge_SendCommand tooltipEnable: true title: Alarm - component: widget:Caddx_Popup_Size config: {} - component: oh-cell config: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" :(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : "green"' on: true title: Access Controls - OLD slots: default: - component: f7-page config: style: --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 slots: default: - component: f7-list config: class: - padding-bottom slots: default: - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Access Control - component: oh-toggle-item config: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' icon: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "oh:door-open" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "oh:door-closed" : "oh:alarm"' iconColor: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' item: ShellyGarageDoorshelly1a4cf12f486ac10163199232_Power title: Garage slots: after: - component: Label config: style: color: '=(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "OFF") ? "red" : (items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input.displayState) - component: oh-toggle-item config: color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' icon: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "oh:door-open" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "oh:door-closed" : "oh:alarm"' iconColor: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' item: ShellyGateshelly1a4cf12f41d5e10163199231_Power title: Gate slots: after: - component: Label config: style: color: '=(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "OFF") ? "red" : (items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.ShellyGateshelly1a4cf12f41d5e10163199231_Input.displayState) - component: oh-cell config: on: true title: Astro - OLD slots: default: - component: f7-page config: style: --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 slots: default: - component: f7-list config: class: - padding-bottom slots: default: - component: oh-list-item config: icon: f7:sunrise iconUsesState: true item: LocalSunRise_StartTime title: Sunrise slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalSunRise_StartTime.displayState) - component: oh-list-item config: icon: f7:sunset iconUsesState: true item: LocalSunSet_StartTime title: Sunset slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalSunSet_StartTime.displayState) - component: oh-list-item config: icon: '=(items.LocalMoon_PhaseName.state === "WAXING_CRESCENT") ? "oh:waxing_crescent" : (items.LocalMoon_PhaseName.state === "NEW") ? "oh:new" : (items.LocalMoon_PhaseName.state === "FIRST_QUARTER") ? "oh:first_quarter" : (items.LocalMoon_PhaseName.state === "WAXING_GIBBOUS") ? "oh:waxing_gibbous" : (items.LocalMoon_PhaseName.state === "FULL") ? "oh:full" : (items.LocalMoon_PhaseName.state === "WANING_GIBBOUS") ? "oh:waning_gibbous" : (items.LocalMoon_PhaseName.state === "THIRD_QUARTER") ? "oh:third_quarter" : (items.LocalMoon_PhaseName.state === "WANING_CRESCENT") ? "oh:waning_crescent" : "f7:exclamationmark_circle"' iconUsesState: true item: LocalMoon_PhaseName title: Moon Phase slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_PhaseName.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoon_Sign title: Moon Sign slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_Sign.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoonRise_StartTime title: Moon Rise Time slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoonRise_StartTime.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoonSet_StartTime title: Moon Set Time slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoonSet_StartTime.displayState) - component: oh-list-item config: icon: f7:moon iconUsesState: true item: LocalMoon_FullMoon title: Full Moon slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.LocalMoon_FullMoon.displayState) - component: oh-cell config: color: '=(items.GPSMarkatHome.state === "ON") ? "green" : (items.GPSRileyatHome.state === "OFF") ? "green" : (items.GPSEthanatHome.state === "OFF") ? "green" : "red"' on: true title: Presence - Old slots: default: - component: f7-page config: style: --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black overflow-y: scroll z-index: 0 slots: default: - component: f7-list config: class: - padding-bottom slots: default: - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Mackeurtan Ave - component: oh-list-item config: color: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMarkatHome title: Mark's Phone slots: after: - component: Label config: style: color: '=(items.GPSMarkatHome.state === "OFF") ? "red" : (items.GPSMarkatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMarkatHome.displayState) - component: oh-list-item config: color: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSRileyatHome title: Riley's Phone slots: after: - component: Label config: style: color: '=(items.GPSRileyatHome.state === "OFF") ? "red" : (items.GPSRileyatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRileyatHome.displayState) - component: oh-list-item config: color: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSEthanatHome title: Ethan's Phone slots: after: - component: Label config: style: color: '=(items.GPSEthanatHome.state === "OFF") ? "red" : (items.GPSEthanatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthanatHome.displayState) - component: oh-list-item config: color: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatHome title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatHome.state === "OFF") ? "red" : (items.GPSAnneatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatHome.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHome title: Michael's Phone slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHome.state === "OFF") ? "red" : (items.GPSMichaelatHome.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHome.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Meadow Lane - component: oh-list-item config: color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatMeadow title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatMeadow.state === "OFF") ? "red" : (items.GPSAnneatMeadow.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatMeadow.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatMeadow title: Michael's Phone slots: after: - component: Label config: style: color: '=(items.GPSMichaelatMeadow.state === "OFF") ? "red" : (items.GPSMichaelatMeadow.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatMeadow.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Wilden - component: oh-list-item config: color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSRileyatWilden title: Riley's Phone slots: after: - component: Label config: style: color: '=(items.GPSRileyatWilden.state === "OFF") ? "red" : (items.GPSRileyatWilden.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRileyatWilden.displayState) - component: oh-list-item config: color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSEthanatWilden title: Ethan's Phone slots: after: - component: Label config: style: color: '=(items.GPSEthanatWilden.state === "OFF") ? "red" : (items.GPSEthanatWilden.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthanatWilden.displayState) - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: Hoylake Drive - component: oh-list-item config: color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSAnneatHoylake title: Anne's Phone slots: after: - component: Label config: style: color: '=(items.GPSAnneatHoylake.state === "OFF") ? "red" : (items.GPSAnneatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnneatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 1 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 2 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 3 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 4 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 4 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-list-item config: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' icon: f7:person_circle iconColor: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' iconUsesState: true item: GPSMichaelatHoylake title: Michael's Phone 5 slots: after: - component: Label config: style: color: '=(items.GPSMichaelatHoylake.state === "OFF") ? "red" : (items.GPSMichaelatHoylake.state === "ON") ? "green" : "yellow"' font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichaelatHoylake.displayState) - component: oh-cell config: color: '=(dayjs(now) - dayjs(items.GPSGroup_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSGroup_LastSeen.state) <= 3600000) ? "green" : "yellow"' on: true title: GPS Last Seen - OLD slots: default: - component: f7-page config: style: --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 slots: default: - component: f7-list config: class: - padding-bottom slots: default: - component: Label config: style: font-weight: 500 line-height: 20px padding-left: 20px text: GPS Last Seen - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSMark_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSMark_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSMark_LastSeen.state) > 3600000) ? "red" : (dayjs(now) - dayjs(items.GPSMark_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSMark_LastSeen title: Marks Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMark_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) > 3600000) ? "red" : (dayjs(now) - dayjs(items.GPSRiley_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSRiley_LastSeen title: Rileys Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSRiley_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSEthan_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSEthan_LastSeen title: Ethans Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSEthan_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSAnne_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSAnne_LastSeen title: Annes Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSAnne_LastSeen.displayState) - component: oh-list-item config: icon: '=(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) > 3600000) ? "f7:xmark_circle" : (dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) <= 3600000) ? "f7:checkmark_circle" : "f7:exclamationmark_circle"' iconColor: '=(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) > 3600000) ? "red" :(dayjs(now) - dayjs(items.GPSMichael_LastSeen.state) <= 3600000) ? "green" : "yellow"' iconUsesState: true item: GPSMichael_LastSeen title: Michaels Phone slots: after: - component: Label config: style: font-weight: 500 line-height: 20px padding-right: 20px text: =(items.GPSMichael_LastSeen.displayState) - component: oh-cell config: action: popup actionModal: widget:ak_universal_switch_widget_v1 actionModalConfig: switchItem: LoungeRoom_Switch dimmerItem: LoungeRoom_Brightness colorItem: LoungeRoom_Color tempItem: LoungeRoom_ColorTemperature header1: Lounge Lights title: Lounge Lights - component: oh-cell config: title: Lights NEW expandable: true slots: default: - component: f7-list config: mediaList: true slots: default: - component: f7-list-item config: title: Lights slots: title: - component: oh-button config: color: black text: Test 1 action: popup actionModal: widget:ak_universal_switch_widget_v1 actionModalConfig: switchItem: LoungeRoom_Switch dimmerItem: LoungeRoom_Brightness colorItem: LoungeRoom_Color tempItem: LoungeRoom_ColorTemperature header1: Lounge Lights - component: oh-button config: color: black text: Test 2 action: variable actionModal: widget:ak_universal_switch_widget_v1 - component: oh-cell config: on: true title: Lights via List slots: default: - component: f7-list config: style: --f7-list-index-font-size: 1px --f7-list-index-item-height: 1px --f7-navbar-bg-color: white --f7-navbar-border-color: white --f7-navbar-font-size: 0px --f7-navbar-height: 0px --f7-navbar-link-color: black --f7-navbar-text-color: black z-index: 0 virtualList: true slots: default: - component: oh-list-item config: icon: f7:lightbulb iconColor: '=(items.LoungeRoom_Switch.state === "ON") ? "null" : "gray"' iconUsesState: true title: Lounge Lights action: popup popupOpen: .openPopup - component: oh-cell config: class: - openPopup closeByBackdropClick: true slots: default: - component: oh-button config: action: popup popupClose: .openPopup style: --f7-button-bg-color: transparent --f7-button-hover-bg-color: transparent --f7-button-pressed-bg-color: transparent height: 100% width: 100% position: absolute left: 0px top: 0px - component: oh-button config: label: Switch off light text: Some text masonry: [] grid: null canvas: null