Sharing a project that I began over the weekend.
I like Grocy (am using it for chore tracking) but it’s overkill for my simple grocery-buying habits (which go something like … crap we’re out of milk again … makes note to buy milk).
Proactive? No. Ideal? No. But hey. We’re all human.
When I was thinking about the system I’d like to see, I decided that a dashboard with images would be my preference. Click on a picture of what you need. Great. It’s added to the list.
To implement this, I took an approach that might seem unconventional (but I’ll share my reasoning).
You can call: shopping_list.add_item but it’s very easy to accidentally create duplicates, especially when multiple people are using the system.
Instead I decided to brainstorm all the common items on my shopping list:
Etc.
Next, I created corresponding button cards made with button-card.
Here’s the format:
type: custom:button-card
name: Regular milk
entity_picture: /local/images/makolettime/regularmilk.png
show_entity_picture: true
show_name: false
tap_action:
action: call-service
service: shopping_list.incomplete_item
data:
name: Milk (regular)
The tedious part was creating the thumbnails!
As you can see, the behavior is like this:
- Click on the thing you need
- It then “adds” it to the list (in reality, it’s being marked as incomplete and thus taken out of the completed section and back to the front of the list. But … the end-user needn’t worry about these details).
You’re obviously not actually adding items to the list by tapping on them so no potential for duplication. You just need to keep your shopping list tidy and make sure that the naming used in the cards maps onto items.
For styling, I chose to use the grid card item so that I could play around with the column layout (I like 1 the best on mobile).
The output is a dashboard that looks like this:
I decided to also create shortcut buttons to “reset” the list by calling other services mentioned in the documentation.
These are simply:
show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: shopping_list.complete_all
target: {}
entity: input_button.shopping_list_complete_all
name: Mark all items purchased
And
show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: shopping_list.incomplete_all
target: {}
entity: input_button.shopping_list_mark_all_items_for_purchase_incomplete
name: Remove all items from completed list
Here’s how it looks on mobile:
Planned Upgrades / Next Ideas
- Conditional formatting so that I can set different column layouts (1 column for mobile and 3 for desktop) that change based on the detected user-agent.
- A confirmation message or animation to indicate that an item has been added successfully.
- A way of undoing accidental additions without leaving the image dashboard. Perhaps something like a long press will mark that item as complete (thereby taking it off the “to buy” list
- Formatting logic to display the shopping list with uncompleted items only