Merge pull request #91 from dgrnbrg/patch-1

Add haptic feedback in-app usage & other minor affordances
isabellaalstrom · Apr 3, 2023 · 5c81997 · 5c81997
2 parents 6973242 + 480668f
commit 5c81997
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ views:
 | 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.                             |
 | use_24_hours                 | bool        | **Optional** | `true`   | Sets if the times are shown in 12 hour or 24 hour formats.                                                                                                                                                                           |
 | 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.                            |
+| 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).                                                     |
 
 ## Advanced options
 It is possible to translate the following English strings in the card to whatever you like.

diff --git a/grocy-chores-card.js b/grocy-chores-card.js
@@ -193,7 +193,7 @@ class GrocyChoresCard extends LitElement {
 
     _renderItem(item) {
         return html`
-            <div class="${this.show_divider ? "grocy-item-container" : "grocy-item-container-no-border"} info flex">
+            <div class="${this.show_divider ? "grocy-item-container" : "grocy-item-container-no-border"} ${this.local_cached_hidden_items.includes(`${item.__type}${item.id}`) ? "hidden-class" : "show-class"} info flex" id="${item.__type}${item.id}">
                 <div>
                     ${this._renderItemName(item)}
                     ${this._shouldRenderDueInDays(item) ? this._renderDueInDays(item) : nothing}
@@ -273,7 +273,7 @@ class GrocyChoresCard extends LitElement {
     _renderAddTaskButton() {
         return html`
             <mwc-button class="hide-button" @click=${() => this._toggleAddTask()}>
-                <ha-icon icon="mdi:chevron-down"></ha-icon>
+                <ha-icon icon="mdi:chevron-down" id="add-task-icon"></ha-icon>
                 ${this._translate("Add task")}
             </mwc-button>
         `
@@ -520,13 +520,19 @@ class GrocyChoresCard extends LitElement {
     }
 
     _trackChore(choreId, choreName) {
+        // Hide the chore on the next render, for better visual feedback
+        this.local_cached_hidden_items.push(`chore${choreId}`);
+        this.requestUpdate();
         this._hass.callService("grocy", "execute_chore", {
             chore_id: choreId, done_by: this.userId
         });
         this._showTrackedToast(choreName);
     }
 
     _trackTask(taskId, taskName) {
+        // Hide the task on the next render, for better visual feedback
+        this.local_cached_hidden_items.push(`task${taskId}`);
+        this.requestUpdate();
         this._hass.callService("grocy", "complete_task", {
             task_id: taskId
         });
@@ -547,6 +553,15 @@ class GrocyChoresCard extends LitElement {
                 message: `${this._translate(action)} "${itemName}".`, duration: 3000
             });
         }
+        this._fireHaptic();
+    }
+
+    _fireHaptic() {
+        if (this.haptic != null) {
+            const myevent = new Event("haptic", {bubbles: true, composed: true, cancelable: false});
+            myevent.detail = this.haptic;
+            window.dispatchEvent(myevent);
+        }
     }
 
     _toggleOverflow(documentFragment) {
@@ -570,10 +585,13 @@ class GrocyChoresCard extends LitElement {
 
     _toggleAddTask() {
         const x = this.shadowRoot.getElementById("add-task-row");
+        const icon = this.shadowRoot.getElementById("add-task-icon");
         if (x.style.display === "none") {
             x.style.display = "flex";
+            icon.icon = "mdi:chevron-up";
         } else {
             x.style.display = "none";
+            icon.icon = "mdi:chevron-down";
         }
     }
 
@@ -636,6 +654,7 @@ class GrocyChoresCard extends LitElement {
         this.hide_text_with_no_data = this.config.hide_text_with_no_data ?? false;
         this.use_long_date = this.config.use_long_date ?? false;
         this.use_24_hours = this.config.use_24_hours ?? true;
+        this.haptic = this.config.haptic ?? "selection";
         this.task_icon = null
         this.chore_icon = null
         this.use_icons = this.config.use_icons ?? false;
@@ -645,6 +664,12 @@ class GrocyChoresCard extends LitElement {
         }
     }
 
+
+    constructor() {
+        super();
+        this.local_cached_hidden_items = []
+    }
+
     // @TODO: This requires more intelligent logic
     getCardSize() {
         return 3;