Hi everyone,
I’d like to share my first go on a rather simple list widget I created today. Unfortunately everything is hardcoded in this widget so it is not really easy to reuse. However I tried to improve the widget through the use of oh-repeater and props but when it comes down to the colors that should be used for every trash bin it gets quite ugly if you have to pass in a lot of parameters…
Why am I sharing it anyway?
- There is still a limited amount of examples around and it took me a while to figure out everything that went into the final version of this widget. So I think it may be nice for someone in my position to have everything i’ve learned today (at least regarding OH3) in one example.
- I’m 100% sure that there is a lot of room for improvement so I’m more than happy to receive any constructive comments on what I could have done better (e.g. I want to add some visibility options for the items since especially for the christmas tree collection there a no further dates in my calendar)
- It is always to better to give something in return when you have a question to the community
So here is my question: Any hint on the more efficient use of my date comparisons would be highly appreciated. Right now I compare the date of the collection with a date that is formatted the same way. It would however be much more elegant if this widget would not be relying on the same formatting of two items… I’d love to see some better solutions for that!
BTW: I read all the collection date values from my nextcloud calendar with the iCalendar binding.
This is what the widget looks like:
Note that I changed the code a bit to fake the badges for demonstration purposes. They are normally only shown the day before a garbage collection (in yellow) and on the day of garbage collection (in red).
The text in the widget is in German but I think you get the idea. The badges ‘Heute’ and ‘Morgen’ mean ‘Today’ and ‘Tomorrow’.
uid: garbage_cell_v3
tags: []
props:
parameterGroups: []
timestamp: Jan 20, 2021, 3:49:25 PM
component: f7-card
config:
title: ="Abfuhrtermine:"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
title: Restmüll
icon: f7:trash
iconColor: black
badge: '=((items.garbage_collection_restmuell.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_restmuell.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_restmuell.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_restmuell.displayState
- component: oh-list-item
config:
title: Bioabfall
icon: f7:trash
iconColor: teal
badge: '=((items.garbage_collection_bioabfall.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_bioabfall.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_bioabfall.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_bioabfall.displayState
- component: oh-list-item
config:
title: Gelbe Tonne
icon: f7:trash
iconColor: yellow
badge: '=((items.garbage_collection_gelb.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_gelb.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_gelb.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_gelb.displayState
- component: oh-list-item
config:
title: Blaue Tonne
icon: f7:trash
iconColor: blue
badge: '=((items.garbage_collection_blue.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_blue.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_blue.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_blue.displayState
- component: oh-list-item
config:
title: Sperrmüll
icon: f7:trash
iconColor: gray
badge: '=((items.garbage_collection_bulk.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_bulk.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_bulk.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_bulk.displayState
- component: oh-list-item
config:
title: Weihnachtsbäume
icon: f7:trash
iconColor: green
badge: '=((items.garbage_collection_christmas.displayState == items.local_dateweekday.displayState) ? "Heute" : (items.garbage_collection_christmas.displayState == items.local_dateweekday_tomorrow.displayState) ? "Morgen" : false)'
badgeColor: '=((items.garbage_collection_christmas.displayState == items.local_dateweekday.displayState) ? "red" : "yellow")'
footer: =items.garbage_collection_christmas.displayState
- component: f7-card-footer
slots:
default:
- component: Label
config:
text: '="Nächste Abholung: " + items.garbage_collection.displayState'
