Merge pull request #11 from ludeeus/dev

Restructure

README.md

@@ -11,21 +11,12 @@ Copy the following files/complete folders into your home assistant configuration
 ```
   alarm.yaml                  This file stores your alarm configuration
   custom_components/bwalarm/  The brains of the operation. This is the logic of the custom alarm system
-  panel_custom.yaml           Needed by HA. NOTE: If you already have a panel_custom.yaml for say floorplan then just copy and paste the code from this repo file into your own panel_custom.yaml to prevent floorplan from being overritten.
-  panels/alarm.html           This is the interface for the custom alarm component. It's actually optional as the alarm will function without it but recommended for ease of setup
-  www/alarm/                  These files control how the interface looks and feels
-  www/lib/                    These files add additional functionality to the interface in order to work
-  www/images/ha.png           An image file used for the interface log
 ```
 
 To get things working with Home Assistant (HA) you need to add the following to your configuration.yaml:
 ```
 alarm_control_panel: !include alarm.yaml
 ```
-You will also need to tell HA where your new panel interface file is. Also add the following to your configuration.yaml:
-```
-panel_custom: !include panel_custom.yaml
-```
 
 **NOTE:** If you experience issues with the page not displaying then add the following:
 ```

custom_components/bwalarm/alarm_control_panel.py

@@ -15,6 +15,7 @@
   - Alarm is going back to Triggered state if the sensor that caused the alarm is still active
 """
 
+# For legacy installations, this is not used in HA > 0.93
 REQUIREMENTS = ['ruamel.yaml==0.15.42']
 
 import asyncio
@@ -371,6 +372,23 @@ def str2bool(string) -> bool:
     return d.get(string, string)
 
 async def async_setup_platform(hass, config, async_add_devices, discovery_info=None):
+
+    # Set up a static enpoint to serve files
+    resources = hass.config.path('custom_components/bwalarm/resources')
+    hass.http.register_static_path("/bwalarm", resources)
+
+    # Register the panel
+    url = "/api/panel_custom/alarm"
+    hass.http.register_static_path(url, "{}/panel.html".format(resources))
+    await hass.components.panel_custom.async_register_panel(
+        webcomponent_name='alarm',
+        frontend_url_path="alarm",
+        html_url=url,
+        sidebar_title='Alarm',
+        sidebar_icon='mdi:shield-home',
+        config={"alarmid": "alarm_control_panel.house"},
+    )
+
     #Setup MQTT if enabled
     mqtt = None
     if (config[CONF_MQTT][CONF_ENABLE_MQTT]):

custom_components/bwalarm/manifest.json

@@ -3,6 +3,6 @@
   "name": "Fork of Yet another take on an alarm",
   "documentation": "https://github.com/akasma74/Hass-Custom-Alarm",
   "dependencies": [],
-  "codeowners": [],
-  "requirements": []
+  "codeowners": ["@akasma74"],
+  "requirements": ["ruamel.yaml==0.15.42"]
 }

www/alarm/custom-element.html → custom_components/bwalarm/resources/alarm/custom-element.html

@@ -1,21 +1,21 @@
-					<!-- ADD YOUR CUSTOM HTML HERE. This could be liver camera views, custom buttons, rotating picture gallery -->
-<dom-module id="custom-element">
-	<template>
-
-		<div style='font-size: x-large; background-color: var(--panel-background-color);  color: var(--subtitle-text);  text-align: center;  font-weight: 500;  padding: 20px;'>Home Assistant</div>
-		<div class='box-inner vLayout'>
-<!-- 	        <div style='text-align: center; color: white;'>
-	            this is a custom test message, add your custom goodies here whether it be live video cams, custom HA buttons/Sensors, rotating image gallery whatever takes your fancy
-	        </div>  -->
-
-        	<div style='padding-top: 20px; width: 300px; text-align: center;     margin: auto;'>
-        		<div style='color: var(--subtitle-text); padding-bottom: 15px; font-weight: 500;'>Lounge</div>
-        		<img src='http://www.rockymountainrenewableenergy.com/wp-content/uploads/2015/10/nest.png' style='width:300px'/>
-        	</div>
-        </div>
-   </template>
-</dom-module>
-
-<script>
-    Polymer({is: 'custom-element'});
+					<!-- ADD YOUR CUSTOM HTML HERE. This could be liver camera views, custom buttons, rotating picture gallery -->
+<dom-module id="custom-element">
+	<template>
+
+		<div style='font-size: x-large; background-color: var(--panel-background-color);  color: var(--subtitle-text);  text-align: center;  font-weight: 500;  padding: 20px;'>Home Assistant</div>
+		<div class='box-inner vLayout'>
+<!-- 	        <div style='text-align: center; color: white;'>
+	            this is a custom test message, add your custom goodies here whether it be live video cams, custom HA buttons/Sensors, rotating image gallery whatever takes your fancy
+	        </div>  -->
+
+        	<div style='padding-top: 20px; width: 300px; text-align: center;     margin: auto;'>
+        		<div style='color: var(--subtitle-text); padding-bottom: 15px; font-weight: 500;'>Lounge</div>
+        		<img src='http://www.rockymountainrenewableenergy.com/wp-content/uploads/2015/10/nest.png' style='width:300px'/>
+        	</div>
+        </div>
+   </template>
+</dom-module>
+
+<script>
+    Polymer({is: 'custom-element'});
 </script>