List Item Widget for Low Batteries

LowBatteryListItemScreenShot

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

Screen4

Standard Library List Card

Screen2

Configure List

Screen3

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
2 Likes