From 8fe408bcc61cb8d44dec2539bd68332b928f8e49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Mon, 18 Jul 2022 23:23:15 +0000
Subject: [PATCH] Call services from frontend with fire-dom-event

---
 custom_components/browser_mod/binary_sensor.py |  4 ++--
 custom_components/browser_mod/browser_mod.js   | 17 +++++++++--------
 js/plugin/main.ts                              | 11 +++--------
 js/plugin/popups.ts                            |  2 +-
 js/plugin/services.ts                          |  6 ++++++
 5 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/custom_components/browser_mod/binary_sensor.py b/custom_components/browser_mod/binary_sensor.py
index 692412d..b0d2fd0 100644
--- a/custom_components/browser_mod/binary_sensor.py
+++ b/custom_components/browser_mod/binary_sensor.py
@@ -15,8 +15,8 @@ async def async_setup_entry(hass, config_entry, async_add_entities):
 
 
 class BrowserBinarySensor(BrowserModEntity, BinarySensorEntity):
-    def __init__(self, coordinator, deviceID, parameter, name):
-        super().__init__(coordinator, deviceID, name)
+    def __init__(self, coordinator, browserID, parameter, name):
+        super().__init__(coordinator, browserID, name)
         self.parameter = parameter
 
     @property
diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js
index d7ff28d..fa510cb 100644
--- a/custom_components/browser_mod/browser_mod.js
+++ b/custom_components/browser_mod/browser_mod.js
@@ -869,6 +869,11 @@ const ServicesMixin = (SuperClass) => {
                     });
                 });
             }
+            document.body.addEventListener("ll-custom", (ev) => {
+                if (ev.detail.browser_mod) {
+                    this._service_action(ev.detail.browser_mod);
+                }
+            });
         }
         async _service_action({ service, data }) {
             let _service = service;
@@ -1051,7 +1056,7 @@ class BrowserModPopup extends s {
         --mdc-dialog-content-ink-color: var(--primary-text-color);
         --justify-action-buttons: space-between;
 
-        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 1px)
+        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 2px)
           var(--ha-card-border-color, var(--divider-color, #e0e0e0));
         --ha-dialog-border-radius: 8px;
         --mdc-theme-surface: var(
@@ -1268,7 +1273,7 @@ var pjson = {
   - Commands
     x Rename browser_mod commands to browser_mod services
     x Framework
-    - ll-custom handling
+    x ll-custom handling
     - Commands
       x popup
       x close_popup
@@ -1279,8 +1284,9 @@ var pjson = {
       - screensaver
       x sequence
       x delay
+      - javascript eval
       - toast?
-    - Redesign services to target devices
+    x Redesign services to target devices
   - frontend editor for popup cards
     - also screensavers
   - Tweaks
@@ -1299,11 +1305,6 @@ class BrowserMod extends ServicesMixin(PopupMixin(BrowserStateMixin(CameraMixin(
     constructor() {
         super();
         this.connect();
-        // document.body.addEventListener("ll-custom", (ev) => {
-        //   if ((ev as CustomEvent).detail.browser_mod) {
-        //     this.msg_callback((ev as CustomEvent).detail.browser_mod);
-        //   }
-        // });
         console.info(`%cBROWSER_MOD ${pjson.version} IS INSTALLED
     %cBrowserID: ${this.browserID}`, "color: green; font-weight: bold", "");
     }
diff --git a/js/plugin/main.ts b/js/plugin/main.ts
index a275672..e4702b8 100644
--- a/js/plugin/main.ts
+++ b/js/plugin/main.ts
@@ -29,7 +29,7 @@ import pjson from "../../package.json";
   - Commands
     x Rename browser_mod commands to browser_mod services
     x Framework
-    - ll-custom handling
+    x ll-custom handling
     - Commands
       x popup
       x close_popup
@@ -40,8 +40,9 @@ import pjson from "../../package.json";
       - screensaver
       x sequence
       x delay
+      - javascript eval
       - toast?
-    - Redesign services to target devices
+    x Redesign services to target devices
   - frontend editor for popup cards
     - also screensavers
   - Tweaks
@@ -73,12 +74,6 @@ export class BrowserMod extends ServicesMixin(
     super();
     this.connect();
 
-    // document.body.addEventListener("ll-custom", (ev) => {
-    //   if ((ev as CustomEvent).detail.browser_mod) {
-    //     this.msg_callback((ev as CustomEvent).detail.browser_mod);
-    //   }
-    // });
-
     console.info(
       `%cBROWSER_MOD ${pjson.version} IS INSTALLED
     %cBrowserID: ${this.browserID}`,
diff --git a/js/plugin/popups.ts b/js/plugin/popups.ts
index c9982ea..aa41b88 100644
--- a/js/plugin/popups.ts
+++ b/js/plugin/popups.ts
@@ -161,7 +161,7 @@ class BrowserModPopup extends LitElement {
         --mdc-dialog-content-ink-color: var(--primary-text-color);
         --justify-action-buttons: space-between;
 
-        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 1px)
+        --mdc-dialog-box-shadow: 0px 0px 0px var(--ha-card-border-width, 2px)
           var(--ha-card-border-color, var(--divider-color, #e0e0e0));
         --ha-dialog-border-radius: 8px;
         --mdc-theme-surface: var(
diff --git a/js/plugin/services.ts b/js/plugin/services.ts
index 67ed4fa..2216cf5 100644
--- a/js/plugin/services.ts
+++ b/js/plugin/services.ts
@@ -52,6 +52,12 @@ export const ServicesMixin = (SuperClass) => {
           });
         });
       }
+
+      document.body.addEventListener("ll-custom", (ev: CustomEvent) => {
+        if (ev.detail.browser_mod) {
+          this._service_action(ev.detail.browser_mod);
+        }
+      });
     }
 
     async _service_action({ service, data }) {