[WIP] Handle dict syntax in state trigger "for" (#1725)

* Handle dict syntax in state trigger "for"

* padStart polyfill

src/entrypoints/compatibility.js

@@ -10,3 +10,23 @@ if (Object.values === undefined) {
     return Object.keys(target).map(function (key) { return target[key]; });
   };
 }
+
+/* eslint-disable */
+// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+if (!String.prototype.padStart) {
+    String.prototype.padStart = function padStart(targetLength, padString) {
+        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
+        padString = String(typeof padString !== 'undefined' ? padString : ' ');
+        if (this.length >= targetLength) {
+            return String(this);
+        } else {
+            targetLength = targetLength - this.length;
+            if (targetLength > padString.length) {
+                padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
+            }
+            return padString.slice(0, targetLength) + String(this);
+        }
+    };
+}
+/* eslint-enable */

src/panels/config/js/trigger/state.js

@@ -24,7 +24,22 @@ export default class StateTrigger extends Component {
   render({ trigger, hass, localize }) {
     const { entity_id, to } = trigger;
     const trgFrom = trigger.from;
-    const trgFor = trigger.for;
+    let trgFor = trigger.for;
+
+    if (trgFor.hours || trgFor.minutes || trgFor.seconds) {
+      // If the trigger was defined using the yaml dict syntax, convert it to
+      // the equivalent string format
+      let {
+        hours = 0,
+        minutes = 0,
+        seconds = 0,
+      } = trgFor;
+      hours = hours.toString();
+      minutes = minutes.toString().padStart(2, '0');
+      seconds = seconds.toString().padStart(2, '0');
+
+      trgFor = `${hours}:${minutes}:${seconds}`;
+    }
     return (
       <div>
         <ha-entity-picker