I've moved away from building custom add-ons and custom cards for a certain service. Have a look at my Api Consumer add-on instead. It has a sample consumer for the Grocy Tasks.
You can use a simple markdown card or the versatile button card to display the information in any way you like.
This card exposes the Tasks and Chores you have set in Grocy and allows you to mark tasks as done and chores as executed/tracked.
The card uses the Bulma css framework for the layout and some basic styling. As always you can make your own styles with card-mod. When you track a chore or complete a task the card will automatically refresh, but this will take some time as the Grocy api works pretty slowly. You can also refresh the data manually at any time using the refresh icon
- This card depends on the accompanying Grocy api-wrapper I made, so make sure to install this first.
- Copy the .js file to the config > www > custom_cards folder of Home Assistant (the folder path may be different on your system)
- Add these lines to your
ui-lovelace.yaml
file:
- url: /local/custom_cards/grocy-chores-tasks-card.js?v=0.001
type: module
- Include the card in a lovelace view:
cards:
- type: custom:grocy-chores-tasks
title: Title goes here
grocyApiWrapperUrl: *api wrapper url including port* e.g. 'http://192.168.1.5:3003'