Basic service call framework set up

js/plugin/main.ts

@@ -15,15 +15,20 @@ import pjson from "../../package.json";
 
 /*
   TODO:
+  - Fix nomenclature
+    - Command -> Service
+    - Device -> Browser
   - Popups
     X Basic popups
     - Card-mod integration
     X Timeout
     X Fullscreen
+  - Motion/occupancy tracker
   - Information about interaction requirement
   - Information about fullykiosk
   - Commands
-    - Framework
+    - Rename browser_mod commands to browser_mod services
+    x Framework
     - ll-custom handling
     - Commands
       x popup
@@ -33,8 +38,8 @@ import pjson from "../../package.json";
       - lovelace-reload
       - window-reload
       - screensaver
-      - sequence
-      - delay
+      x sequence
+      x delay
       - toast?
     - Redesign services to target devices
   - frontend editor for popup cards

js/plugin/popups.ts

@@ -9,10 +9,10 @@ class BrowserModPopup extends LitElement {
   @property() title;
   @property({ reflect: true }) actions;
   @property({ reflect: true }) card;
-  @property() primary_action;
-  @property() secondary_action;
+  @property() right_button;
+  @property() left_button;
   @property() dismissable;
-  callbacks;
+  _actions;
   timeout;
   _timeoutStart;
   _timeoutTimer;
@@ -39,11 +39,14 @@ class BrowserModPopup extends LitElement {
     title,
     content,
     {
-      primary_action = undefined,
-      secondary_action = undefined,
+      right_button = undefined,
+      right_button_action = undefined,
+      left_button = undefined,
+      left_button_action = undefined,
       dismissable = true,
+      dismiss_action = undefined,
       timeout = undefined,
-      callbacks = undefined,
+      timeout_action = undefined,
     } = {}
   ) {
     this.title = title;
@@ -57,36 +60,42 @@ class BrowserModPopup extends LitElement {
       this.content = card;
     } else {
       // Basic HTML content
+      this.card = undefined;
       this.content = unsafeHTML(content);
     }
 
-    this.primary_action = primary_action;
-    this.secondary_action = secondary_action;
-    this.actions = primary_action === undefined ? undefined : "";
+    this.right_button = right_button;
+    this.left_button = left_button;
+    this.actions = right_button === undefined ? undefined : "";
 
     this.dismissable = dismissable;
     this.timeout = timeout;
-    this.callbacks = callbacks;
+    this._actions = {
+      right_button_action,
+      left_button_action,
+      dismiss_action,
+      timeout_action,
+    };
   }
 
   _primary() {
-    if (this.callbacks?.dismiss) this.callbacks.dismiss = undefined;
+    if (this._actions?.dismiss_action) this._actions.dismiss_action = undefined;
     this.closeDialog();
-    this.callbacks?.primary_action?.();
+    this._actions?.right_button_action?.();
   }
   _secondary() {
-    if (this.callbacks?.dismiss) this.callbacks.dismiss = undefined;
+    if (this._actions?.dismiss_action) this._actions.dismiss_action = undefined;
     this.closeDialog();
-    this.callbacks?.secondary_action?.();
+    this._actions?.left_button_action?.();
   }
   _dismiss() {
     this.closeDialog();
-    this.callbacks?.dismiss?.();
+    this._actions?.dismiss_action?.();
   }
   _timeout() {
-    if (this.callbacks?.dismiss) this.callbacks.dismiss = undefined;
+    if (this._actions?.dismiss_action) this._actions.dismiss_action = undefined;
     this.closeDialog();
-    this.callbacks?.timeout?.();
+    this._actions?.timeout_action?.();
   }
 
   render() {
@@ -121,20 +130,20 @@ class BrowserModPopup extends LitElement {
 
         <div class="content">${this.content}</div>
 
-        ${this.primary_action !== undefined
+        ${this.right_button !== undefined
           ? html`
               <mwc-button
                 slot="primaryAction"
-                .label=${this.primary_action}
+                .label=${this.right_button}
                 @click=${this._primary}
               ></mwc-button>
             `
           : ""}
-        ${this.secondary_action !== undefined
+        ${this.left_button !== undefined
           ? html`
               <mwc-button
                 slot="secondaryAction"
-                .label=${this.secondary_action}
+                .label=${this.left_button}
                 @click=${this._secondary}
               ></mwc-button>
             `

js/plugin/services.ts

@@ -23,16 +23,14 @@ export const ServicesMixin = (SuperClass) => {
         data:
           [title: <string>]
           [content: <string | Lovelace Card Configuration>]
-          [primary_action: <string>]
-          [secondary_action: <string>]
+          [right_button: <string>]
+          [right_button_action: <service call>]
+          [left_button: <string>]
+          [left_button_action: <service call>]
           [dismissable: <TRUE/false>]
+          [dismiss_action: <service call>]
           [timeout: <number>]
-          [callbacks:
-            [primary_action: <service call>]
-            [secondary_action: <service call>]
-            [timeout: <service call>]
-            [dismissed: <service call>]
-          ]
+          [timeout_action: <service call>]
 
         Close popup
           service: browser_mod.close_popup
@@ -43,7 +41,20 @@ export const ServicesMixin = (SuperClass) => {
             message: <string>
     */
 
-    _service_action({ service, data }) {
+    constructor() {
+      super();
+      const cmds = ["sequence", "delay", "popup", "close_popup"];
+      for (const service of cmds) {
+        this.addEventListener(`command-${service}`, (ev) => {
+          this._service_action({
+            service,
+            data: ev.detail,
+          });
+        });
+      }
+    }
+
+    async _service_action({ service, data }) {
       let _service: String = service;
       if (!_service.startsWith("browser_mod.") && _service.includes(".")) {
         // CALL HOME ASSISTANT SERVICE
@@ -54,11 +65,18 @@ export const ServicesMixin = (SuperClass) => {
       }
 
       switch (_service) {
+        case "sequence":
+          for (const a of data.sequence) await this._service_action(a);
+          break;
+        case "delay":
+          await new Promise((resolve) => setTimeout(resolve, data.time));
+          break;
+
         case "popup":
           const { title, content, ...d } = data;
-          if (d.callbacks) {
-            for (const [k, v] of Object.entries(data.callbacks)) {
-              d.callbacks[k] = () => this._service_action(v as any);
+          for (const [k, v] of Object.entries(d)) {
+            if (k.endsWith("_action")) {
+              d[k] = () => this._service_action(v as any);
             }
           }
           this.showPopup(title, content, d);