This widget will show you the upcoming garbage collection dates. Badges are shown the day before a garbage collection (in yellow) and on the day of garbage collection (in red). Note that I changed the code a bit to fake the badges in the screenshot for demonstration purposes. I read all the collection date values from my nextcloud calendar with the iCalendar binding. The text in the widget is in German but I think you get the idea. The badges ‘Heute’ and ‘Morgen’ mean ‘Today’ and ‘Tomorrow’.
Configuaration parameters:
- Title: Will be displayed as card title, leave emtpy for none.
- Footer: Will be displayed as card footer, leave emtpy for none. I use the following footer value to display the date of the next collection (might require some simple translation on your end):
="Nächste Abholung: " + ((dayjs(items.garbage_collection.state).diff(dayjs().startOf("day"), "days")) == 0 ? "Heute" : (dayjs(items.garbage_collection.state).diff(dayjs().startOf("day"), "days")) == 1 ? "Morgen" : "In " + (dayjs(items.garbage_collection.state).diff(dayjs().startOf("day"), "days")) + " Tagen")
- & 4. Put your localized strings for “Today” (3.) and “Tomorrow” (4.) here.
- Date Array: Requires a string of the format as shown in the following example:
"Restmüll","black","f7:trash","garbage_collection_restmuell"|"Bioabfall","teal","f7:trash","garbage_collection_bioabfall"|"Gelbe Tonne","yellow","f7:trash","garbage_collection_gelb"|"Blaue Tonne","blue","f7:trash","garbage_collection_blue"|"Sperrmüll","gray","f7:trash","garbage_collection_bulk"|"Weihnachtsbäume","green","f7:trash","garbage_collection_christmas"
The logic behind this is:
"<Type of garbage collection>","<color>","<icon>","<name of DateTime item providing the next collection date>"
Multiple types of garbage collections are divided by a pipe symbol: |
DateTime items with an undefined state will not be shown in the widget.
Screenshots
None so far
Changelog
Version 0.2
- fixed: complete overhaul to make the widget more easy to use and reduce amount of code significantly
Version 0.1
- initial release
Resources
uid: garbage_list_v1
tags: []
props:
parameters:
- description: Title of the card
label: Title
name: title
required: false
type: TEXT
- description: The card footer
label: Footer
name: footer
required: false
type: TEXT
- description: Your local translation for tomorrow
label: Tomorrow translation
name: tomorrow
required: true
type: TEXT
- description: Your local translation for today
label: Today translation
name: today
required: true
type: TEXT
- description: Date items
label: Date items
name: datearray
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 3, 2021, 7:17:40 PM
component: f7-card
config:
title: =props.title
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-repeater
config:
for: listitem
in: =props.datearray.split("|")
fragment: true
slots:
default:
- component: oh-list-item
config:
title: =loop.listitem.split("\"")[1]
icon: =loop.listitem.split("\"")[5]
iconColor: =loop.listitem.split("\"")[3]
badge: '=((dayjs(items[loop.listitem.split("\"")[7]].state).diff(dayjs().startOf("day"), "days")) == 0 ? (props.today) : (dayjs(items[loop.listitem.split("\"")[7]].state).diff(dayjs().startOf("day"), "days")) == 1 ? (props.tomorrow) : false)'
badgeColor: '=((dayjs(items[loop.listitem.split("\"")[7]].state).diff(dayjs().startOf("day"), "days")) == 0 ? "red" : "yellow")'
footer: =items[loop.listitem.split("\"")[7]].displayState
visible: '=items[loop.listitem.split("\"")[7]].state == "UNDEF" ? false : true'
- component: f7-card-footer
slots:
default:
- component: Label
config:
text: =props.footer
