Garbage Collection Widget

got it all running now - thanks for the support!

Great! Glad I could help :grinning:

I managed to fully configure the widget, but I’m changing some stuff because I prefer to work without the additional parameters. Everything is working fine, but the displayState in my items are not showing (yes they are there…)

footer: =loop.item.displayState

when I use loop.item.state I get the state value.
image

If I’m just getting a displayState of one specific item it’s also working:

footer: =items.AfvalGft.displayState

image

Full yaml

uid: garbage_list_v2
tags:
  - card
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 4, 2021, 10:17:26 AM
component: f7-card
config:
  title: "Trash"
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-list
            config:
              mediaList: true
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: item
                    sourceType: itemsInGroup
                    groupItem: Trash
                    fragment: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: =loop.item.label.replace('Afval','')
                          icon: f7:trash
                          iconColor: gray
                          badge: '=((dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Today" : (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Tomorrow" : false)'
                          badgeColor: '=((dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 0 ? "red" : "yellow")'
                          footer: =loop.item.displayState
                          visible: '=loop.item.state == "UNDEF" ? false : true'
    - component: f7-card-footer
      slots:
        default:
          - component: Label
            config:
              text: '="Next: " + items.Trash.displayState'

Good that you got it do what you wanted! Regarding the displayState: you probably have not added the State Description Metadata to the respective item.

Yes I did, as you can see in the second screenshot (it’s displaying the metadata of one item in all other items)

Do you know by change, what other info we can grab from an item? What are the commands to grab other metadata info (like label, state, displayState…), I didn’t find any docs.

Ah ok. Sorry I have no idea why this does not work for you then…

I’m afraid I also cannot answer your second question, I also only know these three properties.

I completed my version of the widget.
All dates are in their corresponding items and these items are member of a general ‘trash’ group.
There are no parameters, so everything is gathered from the items. I added the colors of the trashbins as a tag to the items.
If there is no date in the item, it will be hidden. The same will happen when the date is more then 31 days in the future (because ‘snoeiafval’ is only collected 2 times a year, so I don’t want to see this the whole year)

image

uid: trash
tags:
  - card
  - trash
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 4, 2021, 5:01:40 PM
component: f7-card
config:
  title: Trash Calendar
slots:
  default:
    - component: oh-list
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              sourceType: itemsInGroup
              groupItem: Trash
              fragment: true
            slots:
              default:
                - component: oh-list-item
                  config:
                    icon: f7:trash
                    iconColor: =loop.item.tags[0]
                    color: gray
                    title: =loop.item.label.replace('Afval','')
                    badge: '=((dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Today" : (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Tomorrow" : (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) > 1 ? "In " + (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) + " days" : false)'
                    badgeColor: '=((dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 0 ? "red" : (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) == 1 ? "yellow" : "green")'
                    #footer: =loop.item.state
                    visible: '=loop.item.state == "UNDEF" ? false : loop.item.state == "NULL" ? false : (dayjs(loop.item.state).diff(dayjs().startOf("day"), "days")) > 31 ? false : true'
    - component: f7-card-footer
      slots:
        default:
          - component: Label
            config:
              text: '="Next: " + items.Trash.displayState'

Hi wars and thank you for sharing your version of the widget. I thought about using metadata for the colors even though custom metadata is not really convenient to maintain in Main UI at the moment. Have you thought about this as well and do you happen to have a code example for that? I don’t want to use tags since this is somewhat against the concept of tags and may be error prone if I may end up using the tag feature more in the future.

You mean a custom namespace? I don’t know how this works (yet)
image

You are correct about this, it’s not realy a clean appeoach, because when I will add a tags in the future, the index will change, but I will deal with it when this happens :slight_smile:

Another possibility is to add the color into the label and extract this in the widgetcode…

I played around a bit with custom namespaces and I think that it is not too complicated to add these. However it is not very convenient to maintain these since you would have to remember the namespace names since they are not shown in UI yet. Moreover I haven’t found a way to delete a custom namespace yet…

In addition to that I have no idea how to access these namespaces in rules, I found a couple of code examples but these seemed a bit too complicated for my purpose so I did not follow this road until now. I might try this in the future, custom namespaces seem to be just too powerful to ignore this feature. It could be really useful to reduce the number of items I guess.