├── .github
└── workflows
│ ├── build.yml
│ └── release.yml
├── .gitignore
├── README.md
├── grocy-chores-card.js
├── grocy-chores-card.png
├── hacs.json
├── package-lock.json
├── package.json
├── rollup.config.mjs
└── style.js
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: 'Build'
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | pull_request:
8 | branches:
9 | - master
10 |
11 | jobs:
12 | build:
13 | name: Test build
14 | runs-on: ubuntu-latest
15 | steps:
16 | - uses: actions/checkout@v1
17 | - name: Build
18 | run: |
19 | npm install
20 | npm run build
21 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | release:
5 | types: [published]
6 |
7 | jobs:
8 | release:
9 | name: Prepare release
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v1
13 |
14 | # Build
15 | - name: Build the file
16 | run: |
17 | cd /home/runner/work/lovelace-grocy-chores-card/lovelace-grocy-chores-card
18 | npm install
19 | npm run build
20 |
21 | # Upload build file to the releas as an asset.
22 | - name: Upload zip to release
23 | uses: svenstaro/upload-release-action@v1-release
24 |
25 | with:
26 | repo_token: ${{ secrets.GITHUB_TOKEN }}
27 | file: /home/runner/work/lovelace-grocy-chores-card/lovelace-grocy-chores-card/output/grocy-chores-card.js
28 | asset_name: grocy-chores-card.js
29 | tag: ${{ github.ref }}
30 | overwrite: true
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | output/
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://github.com/hacs/integration)
2 |
3 | # grocy-chores-card
4 |
5 | A Lovelace custom card for [custom component Grocy](https://github.com/custom-components/grocy) in Home Assistant.
6 |
7 |
8 |
9 | **This card reqires [card tools](https://github.com/thomasloven/lovelace-card-tools).**
10 |
11 | Easiest installation via [HACS](https://custom-components.github.io/hacs/).
12 |
13 | For manual installation see [this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
14 |
15 |
16 |
17 | ## Example configuration
18 |
19 | ```yaml
20 | title: My awesome Lovelace config
21 | resources:
22 | - url: /local/grocy-chores-card.js
23 | type: js
24 | views:
25 | title: My view
26 | cards:
27 | - type: custom:grocy-chores-card
28 | entity:
29 | - sensor.grocy_chores
30 | - sensor.grocy_tasks
31 | ```
32 |
33 | ## Options
34 |
35 | | Name | Type | Optional | Default | Description |
36 | |------------------------------|-------------|--------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
37 | | type | string | **Required** | | `custom:grocy-chores-card` |
38 | | entity | string/list | **Required** | | The entity id(s) of your Grocy chores and/or tasks sensor(s). |
39 | | title | string | **Optional** | `"Todo"` | The title of the card. |
40 | | show_quantity | number | **Optional** | | The number of items you want to show in the card. The rest are either hidden or show in the overflow. |
41 | | show_days | number/range | **Optional** | | E.g. `0` to only show items that are due today, overdue or have no due date. If a range is specified show only tasks with a due date in that range; e.g. `1..10` would show tasks due in the next 10 days, but not overdue tasks, or tasks due today. If not specified, shows all items. |
42 | | show_chores_without_due | bool | **Optional** | `true` | Show chores that do not have a due date. |
43 | | show_tasks_without_due | bool | **Optional** | `true` | Show tasks that do not have a due date. |
44 | | user_id | number/map | **Optional** | `1` | Id of the Grocy user performing the items. Default if not specified is `1`. A map may also be specified, see [here](#user_id)|
45 | | custom_translation | string-list | **Optional** | | List of translations of string values used in the card (see below). |
46 | | filter | string/list | **Optional** | | Only show items that contains this filter in the name. When filter is a list, filters are applied as OR. |
47 | | remove_filter | bool | **Optional** | | Use together with `filter` to remove the filter from the name when showing in card. Chore name "Yard work: Clean rain gutters" with filter "Yard work: " will then only display "Clean rain gutters". |
48 | | filter_user | number | **Optional** | | Only show items assigned to the user with this user_id. Ex: `1`. If a user_id map is defined, `current` may be used instead of a number, in which case only items assigned to the current home-assistant user are shown. |
49 | | filter_task_category | number/list | **Optional** | | Only show tasks with select category_ids. When filter is a list, filters are applied as OR. Ex: `1` |
50 | | show_assigned | bool | **Optional** | `true` | Show who's assigned to the item (does not work on tasks). |
51 | | show_last_tracked | bool | **Optional** | `true` | Show when someone last tracked this chore (does not work on tasks). |
52 | | show_last_tracked_by | bool | **Optional** | `true` | Show who last tracked this chore (`show_last_tracked` must be true to show this) (does not work on tasks). |
53 | | show_track_button | bool | **Optional** | `true` | Show track (complete) button |
54 | | show_empty | bool | **Optional** | `true` | Set to false to hide card when no items |
55 | | show_create_task | bool | **Optional** | `false` | Set to true to show ability to add a task in Grocy directly from the card. Due date must be in format yyyy-mm-dd, e.g. 2022-01-31. When due date is empty, task has no due date. |
56 | | browser_mod | bool | **Optional** | `false` | Set to true _if you have installed [browser_mod v2](https://github.com/thomasloven/hass-browser_mod)_ and want feedback when tracking or adding a task, in the form of a native toast bar. |
57 | | show_overflow | bool | **Optional** | `false` | When true, replaces the 'Look in Grocy for X more items' text with a 'Show X more' button that toggles an overflow area. |
58 | | show_divider | bool | **Optional** | `false` | When true, shows a divider between each task. Uses the CSS variable `entities-divider-color` and falls back on `divider-color` from your theme. |
59 | | use_icons | bool | **Optional** | | When null, uses icons for chores/tasks only when `chore_icon` or `task_icon` is set. When true, forces defaults if `chore_icon`/`task_icon` is not set. When false, overrides `chore_icon`/`task_icon` and always uses text buttons. |
60 | | task_icon | string | **Optional** | | Sets the icon used on Tasks. Replaces the text. Set `use_icons` to true and don't use this parameter to use default icon. |
61 | | task_icon_size | number | **Optional** | `24` | Sets the size of the icon for Tasks. Default is 24 because default is an empty checkbox. Only applies when `use_icon` or `task_icon` is set. |
62 | | chore_icon | string | **Optional** | | Sets the icon used on Chores. Replaces the text. Set `use_icons` to true and don't use this parameter to use default icon. |
63 | | chore_icon_size | number | **Optional** | `32` | Sets the size of the icon for Chores. Default is 32. Only applies when `use_icon` or `chore_icon` is set. |
64 | | expand_icon_size | number | **Optional** | `30` | Sets the size of the expand/collapse button on the Overflow area. Default is 30. Only applies when `show_overflow` is set. |
65 | | use_long_date | bool | **Optional** | `false` | Sets if the Due/Completed dates are formatted in long format (i.e. December 31, 2022) or short format (i.e. 12/31/2022). Uses localization settings for token order. |
66 | | due_in_days_threshold | number | **Optional** | `0` | Due dates are reported as 'Overdue', 'Today', 'Tomorrow', 'In X Days', and finally using the actual date. This sets how many days use the 'In X Days' format, before it switches to using date notation. |
67 | | last_tracked_days_threshold | number | **Optional** | `0` | Last tracked dates are reported as 'Today', 'Yesterday', 'x days ago' and finally the actual track date. This sets how many days use the 'x days ago' format, before it switches to using date notation. |
68 | | use_24_hours | bool | **Optional** | `true` | Sets if the times are shown in 12 hour or 24 hour formats. |
69 | | hide_text_with_no_data | bool | **Optional** | `false` | When true, if a property for an item is not set, it hides the text. For example, if a chore has never been completed, instead of showing 'Last tracked: -', it will hide the 'Last tracked' row entirely. |
70 | | haptic | string | **Optional** | `selection` | Can be set to `light`, `success`, or anything [listed here](https://companion.home-assistant.io/docs/integrations/haptics/#developers-integrating-haptics-into-custom-cards). |
71 | | show_description | bool | **Optional** | `false` | When true, show the chore/task descriptions under the name. |
72 | | description_max_length | number | **Optional** | | When set and `show_description` is set, truncate shown descriptions to the number of characters specified. |
73 | | fixed_tiling_size | number | **Optional** | | When set, provides a fixed value to the masonry tiling algorithm for card size, where 1 unit equals 50 pixels. When unset, calculate the size dynamically from the number of items in the todo list. Setting the value will give a more consistent layout of masonry elements, though they may not be well balanced. When unset, the cards will be more compactly tiled for layout, but may move around on page refresh as list length changes.
74 | | custom_sort | string/map | **Optional** | | Modifies the sort order. See [here](#custom_sort) for details.
75 | ## Advanced options
76 | It is possible to translate the following English strings in the card to whatever you like.
77 |
78 | ```yaml
79 | custom_translation:
80 | Overdue: "Försenad"
81 | Today: "Idag"
82 | Due: "Dags"
83 | 'Assigned to': "Tilldelad"
84 | 'Last tracked': "Senast"
85 | by: "av"
86 | Track: "Gör nu"
87 | 'No todos': "Tomt"
88 | 'Look in Grocy for {number} more items': "Det finns {number} fler göromål i Grocy"
89 | 'Add task': "Lägg till"
90 | 'Optional due date/time': "Valfritt datum/tid"
91 | "'Name' can't be empty": "Fyll i namn"
92 | Tracked: "Färdigställt"
93 | ```
94 |
95 | ## Multi-User Support
96 | If your Home Assistant/Grocy installation supports multiple users, this card can handle multiple users. To enable this, specify a map in the configuration, mapping the names of each home assistant user to their grocy user-id, e.g.:
97 |
98 | ```
99 | user_id:
100 | bob: 1
101 | alice: 2
102 | default: 1
103 | ```
104 | In this example, home-assistant user "bob" has a grocy userid of 1, and home-assistant user "alice" has a grocy userid of 2.
105 | Then when Bob is logged into home assistant, chores/tasks will be tracked as userid 1, and when Alice is logged in, they will be tracked as userid 2.
106 |
107 | Note that this name on the left hand side is the user's home assistant display name, not the login/userid.
108 |
109 | A `default` value may also be specified, specifying the userid to use for any Home Assistant user not otherwise specified.
110 |
111 |
112 | This also affects the behavior of filter_user. Specifying `filter_user: current` in the config will only show chores/tasks for the currently logged in user.
113 |
114 | ## Custom Sorting
115 |
116 | By default, the card sorts items with the soonest due chores/tasks first. This can be modified by adding a `custom_sort` key to the configuration. The card can sort on any property available in the individual items, and it can sort on multiple indices, in ascending (default) or descending order.
117 |
118 | ### Sort Examples
119 | The current sort algorithm, sorting by due_date, ascending.
120 | `custom_sort: __due_date`
121 |
122 | Sort alphabetically by name:
123 | `custom_sort: name`
124 |
125 | Sort by user_id, then sort by due_date
126 | ```
127 | custom_sort:
128 | - user_id
129 | - __due_date
130 | ```
131 | Sort by category_id (descending), then by user_id, then by due date (descending)
132 | ```
133 | custom_sort:
134 | - field: category_id
135 | direction: descending
136 | - user_id
137 | - field: __due_date
138 | direction: descending
139 | ```
140 |
141 | The exact fields available for sort are tied into the card implementation and may change in the future without notice. To see the full list of fields that are available, review the source code or use the browser debugger to inspect what keys of the item object are available for sorting. Note tasks and chores may support different keys, so they may not sort as expected if you show both and use a sort key that is not available for both.
142 |
143 | ## Using the Collapsible Overflow
144 | Instead of the “Look in Grocy for X more items” text from older versions, this version can show all additional items in a collapsible overflow panel.
145 |
146 | ### Usage
147 | 1. Add the `show_quantity` parameter and set it to the number of items that should be shown in the main area.
148 | 2. Add the `show_overflow` parameter and set it to `true`.
149 | 3. To override the default size of the expand button icon, set `expand_icon_size` to an integer value.
150 |
151 | Once you refresh, you should see a new button with an expand button at the bottom of the card if you have additional items. Click this to expand the card and show all items.
152 |
153 | ## Icon Buttons
154 | This version adds the ability to use icons instead of the “TRACK” text buttons on each item. Tasks and Chores can have different icons and sizes.
155 |
156 | ### Usage
157 | * `use_icons` parameter
158 | - When not used or `null`, icons are controlled by the other parameters.
159 | - When `true`, both Tasks and Chores will use an icon. If the associated parameters are not set, it will use the default icons.
160 | - When `false`, all other icon options are ignored and text-based buttons are used.
161 | * `task_icon`/`chore_icon` parameters
162 | - When set to a valid icon (i.e. `mdi:check`), items of that type will use the specified icon instead of text as long as `use_icons` is not `false`.
163 | - When `use_icons` is true, you only need to use these parameters to override the default icons.
164 | * `task_icon_size`/`chore_icon_size` parameters
165 | - When icons are used, specifies the height and width of the icon for that item type.
166 | - Default for chores is `32` (as it’s a button) and tasks is `24` (because it is a checkbox).
167 |
168 | ## Date Formatting
169 | This version also introduces better date formatting. Each date is formatted based on the current user’s localization settings so that the order of tokens (day/month/year vs month/day/year) is correct. It also allows 12 or 24 hour times and long date formats (i.e. December 31, 2022).
170 |
171 | ### Usage
172 | * `use_long_date` – When `true`, uses the long date format (i.e. December 31, 2022). When `false`, uses the short format (i.e. 12/31/2022). Default is `false`.
173 | * `use_24_hours` – When `true`, the time is shown in 24 hour format (i.e. 17:59). When `false`, it uses 12 hour format (i.e. 5:59 pm). Default is to use 24 hour format (`true`).
174 | * `due_in_days_threshold` – When set to a value grater than `1`, specifies how many days from today will be shown as “Due: In X Days”. Default is `0`, which means unused. For example, if it is set to `3`, your tasks should have the following due dates:
175 | - Due: Overdue
176 | - Due: Today
177 | - Due: Tomorrow
178 | - Due: In 2 Days
179 | - Due: In 3 Days
180 | - Due: August 9, 2022
181 | - Etc.
182 |
183 | ## Miscellaneous Style Options
184 | * `show_divider` – When `true`, adds a divider between each task or chore. The color is specified in your theme using the `entities-divider-color` variable (with fallback to `divider-color`).
185 | * `hide_text_with_no_data` – When `true`, when an item’s property is blank, that property is hidden regardless of other settings. For example, if you have `show_last_tracked` set to `true`, but a chore has never been completed, instead of showing “Last tracked: -”, the “Last tracked” line simply does not appear on that item (see Clean out the Fridge in the screenshot vs Sweep the Stairs).
186 | * Some of the colors can now be specified in your theme using CSS variables.
187 | - `--red`: sets the color of Overdue due date.
188 | - `--orange`: sets the color of Today due date.
189 | - `--green`: sets the mouse-over color on icon buttons.
190 | - `--paper_font_subhead_-_font_size`: sets the size of the task title test.
191 | - `--paper_font_body1_-_font_size`: sets the size of the task’s other information text.
192 | - `--primary-text-color`: sets the title text, icon color, and item title text color.
193 | - `--secondary-text-color`: sets the color of other text.
194 | - `--accent-color`: sets the hover color of the Show More button and icon.
195 |
196 | ## Other changes in this version
197 | In general, this update aims to not change any default setups so that anyone using this card won’t notice any change unless they change it themselves. However, some small changes have been made:
198 |
199 | 1. Date is always formatted using user’s localization settings rather than always appearing YYYY/MM//DD.
200 | 2. Due Date will be shown as “Tomorrow” when it is due in 1 day.
201 | 3. Task title line will now always use the following CSS variables:
202 | - `--paper_font_subhead_-_font_size` for the size.
203 | - `--primary-text-color` for the color.
204 | 4. Other task lines will now always use the following CSS variables:
205 | - `--paper_font_body1_-_font_size` for the size.
206 | - `--secondary-text-color` for the color.
207 |
208 | ## Known Issues
209 | 1. Due/Completed dates with the time values 23:59:59 or 00:00:00 will not show the times. This is because those are the default values populated when no time is set.
210 |
211 | ## Development Instructions
212 | To do development work on this card (either for your personal use, or to contribute via pull requests), follow these steps:
213 |
214 | 1. Create a fork of this repository on GitHub
215 | 2. Download and setup the repository on your local machine, by running:
216 | ```
217 | git clone https://github.com/YOUR_USERNAME/lovelace-grocy-chores-card
218 | cd lovelace-grocy-chores-card
219 | git remote add upstream https://github.com/isabellaalstrom/lovelace-grocy-chores-card
220 | ```
221 | 3. Once the repository is setup, install the npm dependencies with `npm install`
222 | 4. Make local edits as needed to the grocy chores card.
223 | 5. To test changes, run `npm run build`. This will create a compiled version of the card in `output/grocy-chores-card.js`.
224 | 6. Copy the compiled card in the `output/` folder to your Home Assistant installation and update the dashboard resources to point to it. Make sure the cache is cleared each time you try updating with new changes.
225 | 7. Push the changes back to your GitHub origin, and open a pull request if you want to contribute them to the main repository.
226 | ---
227 |
228 | Like my work and want to say thanks? Do it here:
229 |
230 |
231 |
--------------------------------------------------------------------------------
/grocy-chores-card.js:
--------------------------------------------------------------------------------
1 | import {html, LitElement, nothing} from "lit";
2 | import {DateTime} from "luxon";
3 | import style from './style.js';
4 |
5 | class GrocyChoresCard extends LitElement {
6 |
7 | async loadCustomCreateTaskElements() {
8 | if(!customElements.get("ha-date-input") || !customElements.get("ha-textfield")) {
9 | const cardHelpers = await window.loadCardHelpers();
10 | if(!customElements.get("ha-date-input")) {
11 | await cardHelpers.importMoreInfoControl("date");
12 | }
13 | if(!customElements.get("ha-textfield")) {
14 | await cardHelpers.importMoreInfoControl("text");
15 | }
16 | }
17 | }
18 |
19 | static get styles() {
20 | return style;
21 | }
22 |
23 | _needUpdate(hass) {
24 | const oldHass = this._hass;
25 | if(oldHass == null) {
26 | return true;
27 | }
28 | let entities = [].concat(this.config.entity);
29 | for(let i=0; ix);
129 | for(let i=0; i< sort.length; i++) {
130 | if(typeof sort[i] === "object") {
131 | let d = sort[i].direction;
132 | sort[i] = {field: sort[i].field ?? "",
133 | direction: typeof d === "string" && d.startsWith("d") ? -1 : 1};
134 | }
135 | if(typeof sort[i] === "string") {
136 | sort[i] = {field: sort[i], direction: 1};
137 | }
138 | }
139 | sort = sort.filter(x=>x.field !== "");
140 | allItems.sort(function (a, b) {
141 | for(let i=0; i< sort.length; i++) {
142 | let f = sort[i].field;
143 | let dir = sort[i].direction;
144 |
145 | if (a[f] == null && b[f] == null) {
146 | continue; // Both are null, maintain current order
147 | }
148 | if (a[f] == null) {
149 | return 1 * dir; // Place null at the end
150 | }
151 | if (b[f] == null) {
152 | return -1 * dir; // Place null at the end
153 | }
154 | if (a[f] < b[f]) {
155 | return -1 * dir;
156 | }
157 | if (a[f] > b[f]) {
158 | return 1 * dir;
159 | }
160 | }
161 | return 0;
162 | });
163 | }
164 |
165 | this.itemsNotVisible = 0;
166 | this.overflow = [];
167 | if (this.show_quantity != null) {
168 | this.items = allItems.slice(0, this.show_quantity);
169 | if (this.show_overflow) {
170 | this.overflow = allItems.slice(this.show_quantity);
171 | } else {
172 | this.itemsNotVisible = allItems.length - this.items.length;
173 | }
174 | } else {
175 | this.items = allItems;
176 | }
177 |
178 | this.requestUpdate();
179 | }
180 |
181 | static getStubConfig() {
182 | return {
183 | entity: ["sensor.grocy_chores", "sensor.grocy_tasks"],
184 | title: "Todo",
185 | show_quantity: 5,
186 | show_assigned: true,
187 | show_overflow: true,
188 | show_chores_without_due: true,
189 | show_tasks_without_due: true,
190 | use_icons: true,
191 | use_long_date: true,
192 | due_in_days_threshold: 7,
193 | use_24_hours: true,
194 | hide_text_with_no_data: true,
195 | }
196 | }
197 |
198 | static getConfigElement() {
199 | return document.createElement("content-card-editor");
200 | }
201 |
202 | setConfig(config) {
203 | if (!config.entity) {
204 | throw new Error('Please define entity');
205 | }
206 | this.config = config;
207 | this._processItems();
208 | if(this.config.show_create_task) {
209 | this.loadCustomCreateTaskElements();
210 | }
211 |
212 | }
213 |
214 | render() {
215 | if (!this.entities) {
216 | return this._renderEntityNotFound();
217 | }
218 | for (let i = 0; i < this.entities_not_found.length; i++) {
219 | return this._renderEntityNotFound(this.entities_not_found[i]);
220 | }
221 |
222 | if (this.items === undefined) {
223 | this.items = [];
224 | this.overflow = [];
225 | this.itemsNotVisible = 0;
226 | }
227 |
228 | if (this.items.length < 1 && !this.show_empty) {
229 | return;
230 | }
231 |
232 | return html`
233 | ${html`
234 |
235 |
8 |
9 | **This card reqires [card tools](https://github.com/thomasloven/lovelace-card-tools).**
10 |
11 | Easiest installation via [HACS](https://custom-components.github.io/hacs/).
12 |
13 | For manual installation see [this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
14 |
15 |
16 |
17 | ## Example configuration
18 |
19 | ```yaml
20 | title: My awesome Lovelace config
21 | resources:
22 | - url: /local/grocy-chores-card.js
23 | type: js
24 | views:
25 | title: My view
26 | cards:
27 | - type: custom:grocy-chores-card
28 | entity:
29 | - sensor.grocy_chores
30 | - sensor.grocy_tasks
31 | ```
32 |
33 | ## Options
34 |
35 | | Name | Type | Optional | Default | Description |
36 | |------------------------------|-------------|--------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
37 | | type | string | **Required** | | `custom:grocy-chores-card` |
38 | | entity | string/list | **Required** | | The entity id(s) of your Grocy chores and/or tasks sensor(s). |
39 | | title | string | **Optional** | `"Todo"` | The title of the card. |
40 | | show_quantity | number | **Optional** | | The number of items you want to show in the card. The rest are either hidden or show in the overflow. |
41 | | show_days | number/range | **Optional** | | E.g. `0` to only show items that are due today, overdue or have no due date. If a range is specified show only tasks with a due date in that range; e.g. `1..10` would show tasks due in the next 10 days, but not overdue tasks, or tasks due today. If not specified, shows all items. |
42 | | show_chores_without_due | bool | **Optional** | `true` | Show chores that do not have a due date. |
43 | | show_tasks_without_due | bool | **Optional** | `true` | Show tasks that do not have a due date. |
44 | | user_id | number/map | **Optional** | `1` | Id of the Grocy user performing the items. Default if not specified is `1`. A map may also be specified, see [here](#user_id)|
45 | | custom_translation | string-list | **Optional** | | List of translations of string values used in the card (see below). |
46 | | filter | string/list | **Optional** | | Only show items that contains this filter in the name. When filter is a list, filters are applied as OR. |
47 | | remove_filter | bool | **Optional** | | Use together with `filter` to remove the filter from the name when showing in card. Chore name "Yard work: Clean rain gutters" with filter "Yard work: " will then only display "Clean rain gutters". |
48 | | filter_user | number | **Optional** | | Only show items assigned to the user with this user_id. Ex: `1`. If a user_id map is defined, `current` may be used instead of a number, in which case only items assigned to the current home-assistant user are shown. |
49 | | filter_task_category | number/list | **Optional** | | Only show tasks with select category_ids. When filter is a list, filters are applied as OR. Ex: `1` |
50 | | show_assigned | bool | **Optional** | `true` | Show who's assigned to the item (does not work on tasks). |
51 | | show_last_tracked | bool | **Optional** | `true` | Show when someone last tracked this chore (does not work on tasks). |
52 | | show_last_tracked_by | bool | **Optional** | `true` | Show who last tracked this chore (`show_last_tracked` must be true to show this) (does not work on tasks). |
53 | | show_track_button | bool | **Optional** | `true` | Show track (complete) button |
54 | | show_empty | bool | **Optional** | `true` | Set to false to hide card when no items |
55 | | show_create_task | bool | **Optional** | `false` | Set to true to show ability to add a task in Grocy directly from the card. Due date must be in format yyyy-mm-dd, e.g. 2022-01-31. When due date is empty, task has no due date. |
56 | | browser_mod | bool | **Optional** | `false` | Set to true _if you have installed [browser_mod v2](https://github.com/thomasloven/hass-browser_mod)_ and want feedback when tracking or adding a task, in the form of a native toast bar. |
57 | | show_overflow | bool | **Optional** | `false` | When true, replaces the 'Look in Grocy for X more items' text with a 'Show X more' button that toggles an overflow area. |
58 | | show_divider | bool | **Optional** | `false` | When true, shows a divider between each task. Uses the CSS variable `entities-divider-color` and falls back on `divider-color` from your theme. |
59 | | use_icons | bool | **Optional** | | When null, uses icons for chores/tasks only when `chore_icon` or `task_icon` is set. When true, forces defaults if `chore_icon`/`task_icon` is not set. When false, overrides `chore_icon`/`task_icon` and always uses text buttons. |
60 | | task_icon | string | **Optional** | | Sets the icon used on Tasks. Replaces the text. Set `use_icons` to true and don't use this parameter to use default icon. |
61 | | task_icon_size | number | **Optional** | `24` | Sets the size of the icon for Tasks. Default is 24 because default is an empty checkbox. Only applies when `use_icon` or `task_icon` is set. |
62 | | chore_icon | string | **Optional** | | Sets the icon used on Chores. Replaces the text. Set `use_icons` to true and don't use this parameter to use default icon. |
63 | | chore_icon_size | number | **Optional** | `32` | Sets the size of the icon for Chores. Default is 32. Only applies when `use_icon` or `chore_icon` is set. |
64 | | expand_icon_size | number | **Optional** | `30` | Sets the size of the expand/collapse button on the Overflow area. Default is 30. Only applies when `show_overflow` is set. |
65 | | use_long_date | bool | **Optional** | `false` | Sets if the Due/Completed dates are formatted in long format (i.e. December 31, 2022) or short format (i.e. 12/31/2022). Uses localization settings for token order. |
66 | | due_in_days_threshold | number | **Optional** | `0` | Due dates are reported as 'Overdue', 'Today', 'Tomorrow', 'In X Days', and finally using the actual date. This sets how many days use the 'In X Days' format, before it switches to using date notation. |
67 | | last_tracked_days_threshold | number | **Optional** | `0` | Last tracked dates are reported as 'Today', 'Yesterday', 'x days ago' and finally the actual track date. This sets how many days use the 'x days ago' format, before it switches to using date notation. |
68 | | use_24_hours | bool | **Optional** | `true` | Sets if the times are shown in 12 hour or 24 hour formats. |
69 | | hide_text_with_no_data | bool | **Optional** | `false` | When true, if a property for an item is not set, it hides the text. For example, if a chore has never been completed, instead of showing 'Last tracked: -', it will hide the 'Last tracked' row entirely. |
70 | | haptic | string | **Optional** | `selection` | Can be set to `light`, `success`, or anything [listed here](https://companion.home-assistant.io/docs/integrations/haptics/#developers-integrating-haptics-into-custom-cards). |
71 | | show_description | bool | **Optional** | `false` | When true, show the chore/task descriptions under the name. |
72 | | description_max_length | number | **Optional** | | When set and `show_description` is set, truncate shown descriptions to the number of characters specified. |
73 | | fixed_tiling_size | number | **Optional** | | When set, provides a fixed value to the masonry tiling algorithm for card size, where 1 unit equals 50 pixels. When unset, calculate the size dynamically from the number of items in the todo list. Setting the value will give a more consistent layout of masonry elements, though they may not be well balanced. When unset, the cards will be more compactly tiled for layout, but may move around on page refresh as list length changes.
74 | | custom_sort | string/map | **Optional** | | Modifies the sort order. See [here](#custom_sort) for details.
75 | ## Advanced options
76 | It is possible to translate the following English strings in the card to whatever you like.
77 |
78 | ```yaml
79 | custom_translation:
80 | Overdue: "Försenad"
81 | Today: "Idag"
82 | Due: "Dags"
83 | 'Assigned to': "Tilldelad"
84 | 'Last tracked': "Senast"
85 | by: "av"
86 | Track: "Gör nu"
87 | 'No todos': "Tomt"
88 | 'Look in Grocy for {number} more items': "Det finns {number} fler göromål i Grocy"
89 | 'Add task': "Lägg till"
90 | 'Optional due date/time': "Valfritt datum/tid"
91 | "'Name' can't be empty": "Fyll i namn"
92 | Tracked: "Färdigställt"
93 | ```
94 |
95 | ## Multi-User Support
96 | If your Home Assistant/Grocy installation supports multiple users, this card can handle multiple users. To enable this, specify a map in the configuration, mapping the names of each home assistant user to their grocy user-id, e.g.:
97 |
98 | ```
99 | user_id:
100 | bob: 1
101 | alice: 2
102 | default: 1
103 | ```
104 | In this example, home-assistant user "bob" has a grocy userid of 1, and home-assistant user "alice" has a grocy userid of 2.
105 | Then when Bob is logged into home assistant, chores/tasks will be tracked as userid 1, and when Alice is logged in, they will be tracked as userid 2.
106 |
107 | Note that this name on the left hand side is the user's home assistant display name, not the login/userid.
108 |
109 | A `default` value may also be specified, specifying the userid to use for any Home Assistant user not otherwise specified.
110 |
111 |
112 | This also affects the behavior of filter_user. Specifying `filter_user: current` in the config will only show chores/tasks for the currently logged in user.
113 |
114 | ## Custom Sorting
115 |
116 | By default, the card sorts items with the soonest due chores/tasks first. This can be modified by adding a `custom_sort` key to the configuration. The card can sort on any property available in the individual items, and it can sort on multiple indices, in ascending (default) or descending order.
117 |
118 | ### Sort Examples
119 | The current sort algorithm, sorting by due_date, ascending.
120 | `custom_sort: __due_date`
121 |
122 | Sort alphabetically by name:
123 | `custom_sort: name`
124 |
125 | Sort by user_id, then sort by due_date
126 | ```
127 | custom_sort:
128 | - user_id
129 | - __due_date
130 | ```
131 | Sort by category_id (descending), then by user_id, then by due date (descending)
132 | ```
133 | custom_sort:
134 | - field: category_id
135 | direction: descending
136 | - user_id
137 | - field: __due_date
138 | direction: descending
139 | ```
140 |
141 | The exact fields available for sort are tied into the card implementation and may change in the future without notice. To see the full list of fields that are available, review the source code or use the browser debugger to inspect what keys of the item object are available for sorting. Note tasks and chores may support different keys, so they may not sort as expected if you show both and use a sort key that is not available for both.
142 |
143 | ## Using the Collapsible Overflow
144 | Instead of the “Look in Grocy for X more items” text from older versions, this version can show all additional items in a collapsible overflow panel.
145 |
146 | ### Usage
147 | 1. Add the `show_quantity` parameter and set it to the number of items that should be shown in the main area.
148 | 2. Add the `show_overflow` parameter and set it to `true`.
149 | 3. To override the default size of the expand button icon, set `expand_icon_size` to an integer value.
150 |
151 | Once you refresh, you should see a new button with an expand button at the bottom of the card if you have additional items. Click this to expand the card and show all items.
152 |
153 | ## Icon Buttons
154 | This version adds the ability to use icons instead of the “TRACK” text buttons on each item. Tasks and Chores can have different icons and sizes.
155 |
156 | ### Usage
157 | * `use_icons` parameter
158 | - When not used or `null`, icons are controlled by the other parameters.
159 | - When `true`, both Tasks and Chores will use an icon. If the associated parameters are not set, it will use the default icons.
160 | - When `false`, all other icon options are ignored and text-based buttons are used.
161 | * `task_icon`/`chore_icon` parameters
162 | - When set to a valid icon (i.e. `mdi:check`), items of that type will use the specified icon instead of text as long as `use_icons` is not `false`.
163 | - When `use_icons` is true, you only need to use these parameters to override the default icons.
164 | * `task_icon_size`/`chore_icon_size` parameters
165 | - When icons are used, specifies the height and width of the icon for that item type.
166 | - Default for chores is `32` (as it’s a button) and tasks is `24` (because it is a checkbox).
167 |
168 | ## Date Formatting
169 | This version also introduces better date formatting. Each date is formatted based on the current user’s localization settings so that the order of tokens (day/month/year vs month/day/year) is correct. It also allows 12 or 24 hour times and long date formats (i.e. December 31, 2022).
170 |
171 | ### Usage
172 | * `use_long_date` – When `true`, uses the long date format (i.e. December 31, 2022). When `false`, uses the short format (i.e. 12/31/2022). Default is `false`.
173 | * `use_24_hours` – When `true`, the time is shown in 24 hour format (i.e. 17:59). When `false`, it uses 12 hour format (i.e. 5:59 pm). Default is to use 24 hour format (`true`).
174 | * `due_in_days_threshold` – When set to a value grater than `1`, specifies how many days from today will be shown as “Due: In X Days”. Default is `0`, which means unused. For example, if it is set to `3`, your tasks should have the following due dates:
175 | - Due: Overdue
176 | - Due: Today
177 | - Due: Tomorrow
178 | - Due: In 2 Days
179 | - Due: In 3 Days
180 | - Due: August 9, 2022
181 | - Etc.
182 |
183 | ## Miscellaneous Style Options
184 | * `show_divider` – When `true`, adds a divider between each task or chore. The color is specified in your theme using the `entities-divider-color` variable (with fallback to `divider-color`).
185 | * `hide_text_with_no_data` – When `true`, when an item’s property is blank, that property is hidden regardless of other settings. For example, if you have `show_last_tracked` set to `true`, but a chore has never been completed, instead of showing “Last tracked: -”, the “Last tracked” line simply does not appear on that item (see Clean out the Fridge in the screenshot vs Sweep the Stairs).
186 | * Some of the colors can now be specified in your theme using CSS variables.
187 | - `--red`: sets the color of Overdue due date.
188 | - `--orange`: sets the color of Today due date.
189 | - `--green`: sets the mouse-over color on icon buttons.
190 | - `--paper_font_subhead_-_font_size`: sets the size of the task title test.
191 | - `--paper_font_body1_-_font_size`: sets the size of the task’s other information text.
192 | - `--primary-text-color`: sets the title text, icon color, and item title text color.
193 | - `--secondary-text-color`: sets the color of other text.
194 | - `--accent-color`: sets the hover color of the Show More button and icon.
195 |
196 | ## Other changes in this version
197 | In general, this update aims to not change any default setups so that anyone using this card won’t notice any change unless they change it themselves. However, some small changes have been made:
198 |
199 | 1. Date is always formatted using user’s localization settings rather than always appearing YYYY/MM//DD.
200 | 2. Due Date will be shown as “Tomorrow” when it is due in 1 day.
201 | 3. Task title line will now always use the following CSS variables:
202 | - `--paper_font_subhead_-_font_size` for the size.
203 | - `--primary-text-color` for the color.
204 | 4. Other task lines will now always use the following CSS variables:
205 | - `--paper_font_body1_-_font_size` for the size.
206 | - `--secondary-text-color` for the color.
207 |
208 | ## Known Issues
209 | 1. Due/Completed dates with the time values 23:59:59 or 00:00:00 will not show the times. This is because those are the default values populated when no time is set.
210 |
211 | ## Development Instructions
212 | To do development work on this card (either for your personal use, or to contribute via pull requests), follow these steps:
213 |
214 | 1. Create a fork of this repository on GitHub
215 | 2. Download and setup the repository on your local machine, by running:
216 | ```
217 | git clone https://github.com/YOUR_USERNAME/lovelace-grocy-chores-card
218 | cd lovelace-grocy-chores-card
219 | git remote add upstream https://github.com/isabellaalstrom/lovelace-grocy-chores-card
220 | ```
221 | 3. Once the repository is setup, install the npm dependencies with `npm install`
222 | 4. Make local edits as needed to the grocy chores card.
223 | 5. To test changes, run `npm run build`. This will create a compiled version of the card in `output/grocy-chores-card.js`.
224 | 6. Copy the compiled card in the `output/` folder to your Home Assistant installation and update the dashboard resources to point to it. Make sure the cache is cleared each time you try updating with new changes.
225 | 7. Push the changes back to your GitHub origin, and open a pull request if you want to contribute them to the main repository.
226 | ---
227 |
228 | Like my work and want to say thanks? Do it here:
229 |
230 |