This is an UI List Item Widget to view Low Batteries information.
Only use with List Card with accordion and rich list items option set to true.
Support to use a light and a dark background.
Configuration parameters:
- Title string
items
- Group:Number:COUNT(ON) item for numbers of Low batteries
Screenshots
Standard Library List Card
Configure List
Changelog
Version 0.1
- initial release
Resources
uid: frs_LowBattery_list_item
tags:
- battery
- list
props:
parameters:
- defaultValue: Low Battery
description: LowBattery list-item title
label: Title
name: LowBatteryTitle
required: false
type: TEXT
groupName: lowbattery
- context: item
description: Group:Number:COUNT(ON) item for numbers of Low batteries
label: Item
name: LowbatteryGroupCountItem
required: false
type: TEXT
groupName: lowbattery
parameterGroups:
- name: lowbattery
label: Low Battery
component: oh-list-item
config:
icon: '=(items[props.LowbatteryGroupCountItem].state == "0") ? "iconify:fluent:battery-checkmark-24-filled" : "iconify:fluent:battery-warning-24-filled"'
iconColor: '=(items[props.LowbatteryGroupCountItem].state == "0") ? "green" : "red"'
style:
--f7-list-item-after-font-size: 16px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
subtitle: =(items[props.LowbatteryGroupCountItem].state) + " batteries need to be replaced"
title: =props.LowBatteryTitle
slots:
accordion:
- component: f7-list
config:
mediaList: true
style:
background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
slots:
default:
- component: oh-repeater
config:
filter: loop.item2.state == "ON"
for: item2
fragment: true
groupItem: =props.LowbatteryGroupCountItem
sourceType: itemsInGroup
slots:
default:
- component: oh-label-item
config:
icon: '=(loop.item2.state == "ON") ? "f7:battery_0" : "f7:battery_100"'
iconColor: '=(loop.item2.state == "ON") ? "red" : "green"'
mediaList: false
style:
--f7-list-item-after-font-size: 15px
--f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
--f7-list-item-title-font-size: 15px
--f7-list-item-title-line-height: 32px
--f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
title: =loop.item2.label