Merge branch 'master' of https://github.com/marcokreeft87/room-card

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

info.md

@@ -2,10 +2,14 @@
 
 ### Features
 
-{% if version_installed.replace("v", "").replace(".","") | int < 122  %}
+{% if version_installed.replace("v", "").replace(".","") | int < 123  %}
 - Added `Changed source code to Typescript`
 {% endif %}
 
+{% if version_installed.replace("v", "").replace(".","") | int < 122  %}
+- Added `Added hold_action support`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 121  %}
 - Added `Added show_state to show the state beneath the entities (not info_entities)`
 {% endif %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-card",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Show entities in Home Assistant's Lovelace UI",
   "keywords": [
     "home-assistant",

src/entity.ts

@@ -1,7 +1,7 @@
 import { secondsToDuration } from './lib/seconds_to_duration';
 import { formatNumber } from './lib/format_number';
 import { computeStateDisplay, computeStateDomain } from './lib/compute_state_display';
-import { checkConditionalValue, isObject, isUnavailable } from './util';
+import { checkConditionalValue, getValue, isObject, isUnavailable } from './util';
 import { HomeAssistant } from 'custom-card-helpers';
 import { HomeAssistantEntity, EntityCondition, RoomCardEntity, RoomCardIcon } from './types/room-card-types';
 
@@ -67,7 +67,7 @@ export const entityStateDisplay = (hass: HomeAssistant, stateObj: HomeAssistantE
         return hass.localize(`state.default.${stateObj.state}`);
     }
 
-    let value = config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
+    let value = getValue(stateObj, config);
     let unit =
         config.attribute !== undefined
             ? config.unit

src/index.ts

@@ -4,12 +4,12 @@ import { ActionConfig, handleClick, HomeAssistant, LovelaceCard, LovelaceCardCon
 
 import { LAST_CHANGED, LAST_UPDATED, TIMESTAMP_FORMATS } from './lib/constants';
 import { checkEntity, entityName, entityStateDisplay, entityStyles, entityIcon } from './entity';
-import { getEntityIds, hasConfigOrEntitiesChanged, hideIf, isObject } from './util';
+import { getEntityIds, hasConfigOrEntitiesChanged, hideIf, isObject, getValue } from './util';
 import { style } from './styles';
 import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity } from './types/room-card-types';
 
 console.info(
-    '%c ROOM-CARD %c 1.2.2',
+    '%c ROOM-CARD %c 1.2.3',
     'color: cyan; background: black; font-weight: bold;',
     'color: darkblue; background: white; font-weight: bold;'
 );
@@ -156,11 +156,52 @@ class RoomCard extends LitElement {
         if (!stateObj || hideIf(stateObj, config, this._hass)) {
             return null;
         }
-
-        const entityValue = config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
+        
+        const entityValue = getValue(stateObj, config);
         const onClick = this.clickHandler(stateObj.entity_id, config.tap_action);
-        const onDblClick = this.dblClickHandler(stateObj.entity_id, config.double_tap_action);
-        return html`<div class="entity" style="${entityStyles(config)}" @click="${onClick}" @dblclick="${onDblClick}">
+        const onDblClick = this.dblClickHandler(stateObj.entity_id, config.double_tap_action);        
+        const onHold = this.holdHandler(stateObj.entity_id, config.hold_action);
+        let held: boolean;
+        let timer: number;
+        let dblClickTimeout: number;
+
+        const start = () => {
+            held = false;
+
+            timer = window.setTimeout(() => {
+              held = true;
+            }, 500);
+          };
+
+        const end = (ev: MouseEvent) => {
+            // Prevent mouse event if touch event
+            ev.preventDefault();
+            if (['touchend', 'touchcancel'].includes(ev.type) && timer === undefined) {
+              return;
+            }
+            window.clearTimeout(timer);
+            timer = undefined;
+            if (held) {
+                onHold();
+            } else if (config.double_tap_action !== undefined) {
+              if ((ev.type === 'click' && (ev).detail < 2) || !dblClickTimeout) {
+                dblClickTimeout = window.setTimeout(() => {
+                  dblClickTimeout = undefined;                  
+                  onClick();
+                }, 250);
+              } else {
+                window.clearTimeout(dblClickTimeout);
+                dblClickTimeout = undefined;
+                onDblClick();
+              }
+            } else {
+                onClick();
+            }
+        };
+
+        return html`<div class="entity" style="${entityStyles(config)}"
+        @mousedown="${start}" @mouseup="${end}" @touchstart="${start}" @touchend="${end}" @touchcancel="${end}"
+        ">
             <span>${entityName(stateObj, config)}</span>
             <div>${this.renderIcon(stateObj, config)}</div>
             ${config.show_state ? html`<span>${entityValue}</span>` : ''}
@@ -203,7 +244,7 @@ class RoomCard extends LitElement {
             ></ha-relative-time>`;
         }
         if (config.format && TIMESTAMP_FORMATS.includes(config.format)) {
-            const value = config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
+            const value = getValue(stateObj, config);
             const timestamp = new Date(value);
             if (!(timestamp instanceof Date) || isNaN(timestamp.getTime())) {
                 return value;

src/util.ts

@@ -11,6 +11,10 @@ export const hideUnavailable = (stateObj: HomeAssistantEntity, config: RoomCardE
     config.hide_unavailable &&
     (isUnavailable(stateObj) || (config.attribute && stateObj.attributes[config.attribute] === undefined));
 
+export const getValue = (stateObj: HomeAssistantEntity, config: RoomCardEntity) => {
+    return config.attribute ? stateObj.attributes[config.attribute] : stateObj.state;
+}
+
 export const hideIf = (stateObj: HomeAssistantEntity, config: RoomCardEntity, hass: HomeAssistant) => {
     if (hideUnavailable(stateObj, config)) {
         return true;