Sian-Lee-SA · Sian-Lee-SA · Dec 3, 2022 · Dec 3, 2022 · Dec 3, 2022
diff --git a/custom_components/switch_manager/assets/switch_manager_panel.js b/custom_components/switch_manager/assets/switch_manager_panel.js
diff --git a/custom_components/switch_manager/manifest.json b/custom_components/switch_manager/manifest.json
@@ -1,7 +1,7 @@
 {
   "domain": "switch_manager",
   "name": "Switch Manager",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "documentation": "https://github.com/Sian-Lee-SA/switch_manager",
   "dependencies": ["panel_custom", "websocket_api", "http", "frontend", "script", "mqtt"],
   "requirements": [],

diff --git a/custom_components/switch_manager/models.py b/custom_components/switch_manager/models.py
@@ -1,6 +1,6 @@
 from .const import DOMAIN, LOGGER
 from .helpers import format_mqtt_message
-from homeassistant.core import HomeAssistant, Context
+from homeassistant.core import HomeAssistant, Context, callback
 from homeassistant.helpers.script import Script
 from homeassistant.components.mqtt.client import async_subscribe as mqtt_subscribe
 from homeassistant.components.mqtt.models import ReceiveMessage
@@ -183,13 +183,34 @@ async def start(self):
         if self._event_listener or not self.valid_blueprint or not self.enabled:
             return
 
+        @callback
+        def _handleMQTT( message: ReceiveMessage ):
+            data = format_mqtt_message(message)
+            __processIncoming( data, Context() )
+
+        @callback
+        def _handleEvent( event ):
+            __processIncoming( event.data, event.context )
+
+        def __processIncoming( data, context ):
+            if not self.enabled or not self._check_conditons( data ):
+                return
+
+            for button in self.buttons:
+                if not button._check_conditions( data ):
+                    continue
+                for action in button.actions:
+                    if not action._check_conditions( data ):
+                        continue
+                    self._hass.async_create_task( action.run( context=context ) )
+
         if self.blueprint.event_type == 'mqtt':
             try:
-                self._event_listener = await mqtt_subscribe(self._hass, self.identifier, self._handleMQTT)
+                self._event_listener = await mqtt_subscribe(self._hass, self.identifier, _handleMQTT)
             except HomeAssistantError:
                 LOGGER.error(f"Unable to handle switch: {self.name} as MQTT is not loaded")
         else:
-            self._event_listener = self._hass.bus.async_listen(self.blueprint.event_type, self._handleEvent)
+            self._event_listener = self._hass.bus.async_listen(self.blueprint.event_type, _handleEvent)
 
     def stop(self):
         self.stop_running_scripts();
@@ -199,25 +220,8 @@ def stop(self):
 
     def setEnabled( self, value: bool ):
         self.enabled = value
+
 
-    async def _handleMQTT( self, message: ReceiveMessage ):
-        data = format_mqtt_message(message)
-        await self.__processIncoming( data, Context() )
-
-    async def _handleEvent( self, event ):
-        await self.__processIncoming( event.data, event.context )
-
-    async def __processIncoming( self, data, context ):
-        if not self.enabled or not self._check_conditons( data ):
-            return
-
-        for button in self.buttons:
-            if not button._check_conditions( data ):
-                continue
-            for action in button.actions:
-                if not action._check_conditions( data ):
-                    continue
-                await action.run( context=context )
 
 
     def _check_conditons( self, data ) -> bool:

diff --git a/js/dialogs/dialog-blueprint-selector.ts b/js/dialogs/dialog-blueprint-selector.ts
@@ -3,17 +3,19 @@ import { customElement, property, state } from "lit/decorators.js";
 import { SwitchManagerBlueprint } from "../types";
 import {
     mdiGestureTapButton,
-    mdiClose
+    mdiClose,
+    mdiHelpCircle
 } from "@mdi/js";
 import { 
     buildAssetUrl, 
     buildUrl,
     buildWSPath,
+    createCloseHeading,
     navigate, 
     showToast
 } from "../helpers";
 import { fireEvent } from "@hass/common/dom/fire_event";
-
+import { haStyleDialog, haStyleScrollbar } from "@hass/resources/styles"
 
 @customElement('switch-manager-dialog-blueprint-selector')
 class SwitchManagerBlueprintSelector extends LitElement 
@@ -46,77 +48,82 @@ class SwitchManagerBlueprintSelector extends LitElement
                 open
                 hideActions
                 @closed=${this.closeDialog}
-                .heading=${html`<div class="header_title">Select Blueprint</div>`}>
-
+                .heading="${createCloseHeading('Select Blueprint')}">
+                <p>Can't find a blueprint for your switch? create your own.
+                    <ha-icon-button .path=${mdiHelpCircle} @click=${() => window.open('https://github.com/Sian-Lee-SA/Home-Assistant-Switch-Manager#blueprints', '_blank').focus()}></ha-icon-button>
+                </p>
                 <mwc-list>
                     ${this._listBlueprints()}
                 </mwc-list>
-                <!-- <div id="content">
-                    <ha-icon-button id="close-button" .path=${mdiClose}></ha-icon-button>               
-                </div> -->
-                </ha-dialog>
+            </ha-dialog>
         `;
     }
 
 
     static get styles() 
     {
-        return css`
-        :host {
-            --mdc-dialog-min-width: 500px;
-        }
-
-        mwc-list-item {
-            height: 90px;
-            padding: 0px 20px;
-            align-items: center;
-        }
-
-        h2 {
-            padding: 0px 0px 12px;
-            margin: 0px;
-            font-weight: normal;
-            font-size: 1.3em;
-            border-bottom: 1px solid #DDD;
-            margin-bottom: 5px;
-        }
+        return [haStyleDialog, haStyleScrollbar, css`
 
-        .row {
-
-            display: flex;
-            align-items: center;
-        }
-        a.blueprint-item {
-            display: flex;
-            padding: 0px 20px;
-            align-items: center;
-            -webkit-font-smoothing: antialiased;
-            font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-            font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
-            font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
-            letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
-            color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
-            text-decoration: none;
-        }
-        .image {
-            height: 90px;
-            width: 90px;
-            text-align: center;
-        }
-        .image img {
-            max-width: 100%;
-            max-height: 100%;
-        }
-        .image ha-svg-icon {
-            fill: var(--primary-color);
-            margin-top: 5px;
-            width: 85%;
-            height: 85%;
-        }
-        .name {
-            padding-left: 1em;
-        }
-        `;
+            mwc-list-item {
+                min-width: 470px;
+                height: 90px;
+                padding: 0px 20px;
+                align-items: center;
+            }
+            h2 {
+                padding: 0px 0px 12px;
+                margin: 15px 0px 0px;
+                font-weight: normal;
+                font-size: 1.3em;
+                border-bottom: 1px solid #DDD;
+            }
+            h2:first-child {
+                margin: 0;
+            }
+            p {
+                margin: -35px 0 0 0;
+                font-size: 0.8em;
+            }
+            ha-icon-button {
+                vertical-align: middle;
+            }
+            .row {
+                display: flex;
+                align-items: center;
+            }
+            a.blueprint-item {
+                display: flex;
+                padding: 0px 20px;
+                align-items: center;
+                -webkit-font-smoothing: antialiased;
+                font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+                font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
+                font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
+                letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
+                color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
+                text-decoration: none;
+            }
+            .image {
+                height: 90px;
+                width: 90px;
+                text-align: center;
+                padding: 4px;
+                box-sizing: border-box;
+            }
+            .image img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+            .image ha-svg-icon {
+                fill: var(--primary-color);
+                margin-top: 5px;
+                width: 85%;
+                height: 85%;
+            }
+            .name {
+                padding-left: 1em;
+            }
+        `];
     }
 
 

diff --git a/js/main.ts b/js/main.ts
@@ -8,11 +8,13 @@ import { loadComponents } from "./helpers";
 @customElement('switch-manager-panel')
 class SwitchManagerPanel extends LitElement 
 {
-    @property({ attribute: false }) hass!: any;
+    @property() hass!: any;
     @property() narrow;
     @property() panel;
     @state() params = {};
 
+    @state() component_name = "custom";
+
     private _route;
     get route() { return this._route };
     @property() set route( route ) {

diff --git a/js/switch-editor.ts b/js/switch-editor.ts
@@ -13,7 +13,7 @@ import {
     mdiEarHearing
 } from "@mdi/js";
 import { MODES, SwitchManagerBlueprint, SwitchManagerConfig } from "./types"
-import { haStyle, haStyleScrollbar } from "@hass/resources/styles"
+import { haStyle } from "@hass/resources/styles"
 import { 
     buildAssetUrl, 
     buildUrl, 
@@ -254,20 +254,22 @@ class SwitchManagerSwitchEditor extends LitElement
             }
             h3, #identifier {
                 padding-left: 25px;
+                position: relative;
             }
             #identifier-input {
                 width: 300px;
             }
             #identifier ha-icon-button {
                 vertical-align: middle;
-                background: var(--material-secondary-text-color);
+                background: var(--mdc-text-field-fill-color);
                 border-radius: 50%;
-                color: var(--primary-background-color);
+                color: var(--mdc-text-field-ink-color);
                 margn-top: -10px;
                 margin-top: -14px;
                 margin-left: -34px;
                 position: relative;
                 --mdc-icon-button-size: 54px;
+                box-shadow: -5px 1px 8px -6px;
             }
             #identifier ha-icon-button[listening] {
                 animation: 1s infinite alternate pulse;
@@ -327,6 +329,9 @@ class SwitchManagerSwitchEditor extends LitElement
                 width: 260px;
                 height: 260px;
             }
+            #switch-image svg image {
+                filter: drop-shadow(0px 0px 8px #00000033);
+            }
             #switch-image svg .button {
                 fill: #00000000;
                 stroke: #00adff3d;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "switch_manager",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Home Assistant Frontend for Switch Manager",
   "scripts": {
     "build": "rollup -c",