Started a service framework

js/plugin/main.ts

@@ -8,6 +8,7 @@ import { CameraMixin } from "./camera";
 import { RequireInteractMixin } from "./require-interact";
 import { FullyMixin } from "./fullyKiosk";
 import { BrowserStateMixin } from "./browser";
+import { ServicesMixin } from "./services";
 import "./popups";
 import { PopupMixin } from "./popups";
 import pjson from "../../package.json";
@@ -25,13 +26,15 @@ import pjson from "../../package.json";
     - Framework
     - ll-custom handling
     - Commands
-      - popup
-      - close_popup
+      x popup
+      x close_popup
       - more-info
       - navigate
       - lovelace-reload
       - window-reload
       - screensaver
+      - sequence
+      - delay
       - toast?
     - Redesign services to target devices
   - frontend editor for popup cards
@@ -48,12 +51,14 @@ import pjson from "../../package.json";
   - Media_seek
   - Screensavers
   */
-export class BrowserMod extends PopupMixin(
-  BrowserStateMixin(
-    CameraMixin(
-      MediaPlayerMixin(
-        ScreenSaverMixin(
-          FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
+export class BrowserMod extends ServicesMixin(
+  PopupMixin(
+    BrowserStateMixin(
+      CameraMixin(
+        MediaPlayerMixin(
+          ScreenSaverMixin(
+            FullyMixin(RequireInteractMixin(ConnectionMixin(EventTarget)))
+          )
         )
       )
     )

js/plugin/popups.ts

@@ -14,7 +14,7 @@ class BrowserModPopup extends LitElement {
   @property() dismissable;
   callbacks;
   timeout;
-  timeoutStart;
+  _timeoutStart;
   _timeoutTimer;
 
   closeDialog() {
@@ -25,9 +25,9 @@ class BrowserModPopup extends LitElement {
   openDialog() {
     this.open = true;
     if (this.timeout) {
-      this.timeoutStart = new Date().getTime();
+      this._timeoutStart = new Date().getTime();
       this._timeoutTimer = setInterval(() => {
-        const ellapsed = new Date().getTime() - this.timeoutStart;
+        const ellapsed = new Date().getTime() - this._timeoutStart;
         const progress = (ellapsed / this.timeout) * 100;
         this.style.setProperty("--progress", `${progress}%`);
         if (ellapsed >= this.timeout) this._timeout();

js/plugin/services.ts

@@ -0,0 +1,77 @@
+export const ServicesMixin = (SuperClass) => {
+  return class ServicesMixinClass extends SuperClass {
+    /*
+      Structure of service call:
+        service: <service>
+        [data: <data>]
+
+      Sequence:
+        service: browser_mod.sequence
+        data:
+          sequence:
+            - <service call>
+            - <service call>
+            - ...
+
+      Delay
+        service: browser_mod.delay
+        data:
+          time: <number>
+
+      Popup:
+        service: browser_mod.popup
+        data:
+          [title: <string>]
+          [content: <string | Lovelace Card Configuration>]
+          [primary_action: <string>]
+          [secondary_action: <string>]
+          [dismissable: <TRUE/false>]
+          [timeout: <number>]
+          [callbacks:
+            [primary_action: <service call>]
+            [secondary_action: <service call>]
+            [timeout: <service call>]
+            [dismissed: <service call>]
+          ]
+
+        Close popup
+          service: browser_mod.close_popup
+
+        Javascript console print
+          service: browser_mod.console
+          data:
+            message: <string>
+    */
+
+    _service_action({ service, data }) {
+      let _service: String = service;
+      if (!_service.startsWith("browser_mod.") && _service.includes(".")) {
+        // CALL HOME ASSISTANT SERVICE
+      }
+
+      if (_service.startsWith("browser_mod.")) {
+        _service = _service.substring(12);
+      }
+
+      switch (_service) {
+        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);
+            }
+          }
+          this.showPopup(title, content, d);
+          break;
+
+        case "close_popup":
+          this.closePopup();
+          break;
+
+        case "console":
+          console.log(data.message);
+          break;
+      }
+    }
+  };
+};