feat: Add search button to find home assisant instances for server co…

…nfig
zachowj · Jan 14, 2020 · 8f25ef6 · 8f25ef6
1 parent 7c9762e
commit 8f25ef6
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 86 deletions.
diff --git a/docs/guide/README.md b/docs/guide/README.md
@@ -47,7 +47,11 @@ pencil icon next to the Server field.
 
 ![screenshot](./images/getting-started_01.png)
 
-Fill in the Base Url and Access Token on the server config node then Add/Update the
+Search for a local Home Assistant instance or manually fill in the Base Url.
+
+![screenshot](./images/getting-started_03.png)
+
+Enter an Access Token on the server config node then Add/Update the
 Server Config and Events: all nodes and deploy. After deploying a green box with
 a status message, i.e. connected, stated_changed, should appear below
 the Events: all node. If you see an open box with the status of connecting or

diff --git a/docs/guide/images/getting-started_03.png b/docs/guide/images/getting-started_03.png
diff --git a/lib/common/common.scss b/lib/common/common.scss
@@ -120,3 +120,27 @@ li span.property-type {
         }
     }
 }
+
+.button-box {
+    div.text-box {
+        display: inline-block;
+        position: relative;
+        width: 70%;
+        height: 20px;
+
+        div {
+            position: absolute;
+            left: 0px;
+            right: 40px;
+
+            input {
+                width: 100%;
+            }
+        }
+        a {
+            position: absolute;
+            right: 0px;
+            top: 0px;
+        }
+    }
+}
diff --git a/nodes/config-server/config-server.js b/nodes/config-server/config-server.js
@@ -1,18 +1,10 @@
 const BaseNode = require('../../lib/base-node');
+const HomeAssistant = require('../../lib/home-assistant');
+const bonjour = require('bonjour')();
 const flatten = require('flat');
 const uniq = require('lodash.uniq');
 
 module.exports = function(RED) {
-    const HomeAssistant = require('../../lib/home-assistant');
-
-    // Handle static files
-    // RED.httpAdmin.get('/homeassistant/static/*', function(req, res, next) {
-    //     res.sendFile(req.params[0], {
-    //         root: require('path').join(__dirname, '../..', '/libs'),
-    //         dotfiles: 'deny'
-    //     });
-    // });
-
     const httpHandlers = {
         disableCache: function(req, res, next) {
             if (this.nodeConfig.cacheJson === false) {
@@ -110,6 +102,23 @@ module.exports = function(RED) {
         }
     };
 
+    RED.httpAdmin.get('/homeassistant/discover', async function(req, res) {
+        const instances = [];
+        bonjour.find({ type: 'home-assistant' }, service => {
+            instances.push({
+                label: service.name
+                    ? `${service.name} (${service.txt.base_url})`
+                    : service.txt.base_url,
+                value: service.txt.base_url
+            });
+        });
+
+        // Add a bit of delay for all services to be discovered
+        setTimeout(() => {
+            res.json(instances);
+        }, 3000);
+    });
+
     const nodeOptions = {
         debug: true,
         config: {

diff --git a/nodes/config-server/ui-config-server.html b/nodes/config-server/ui-config-server.html
@@ -1,7 +1,7 @@
 <div class="form-row">
-    <label for="node-config-input-name" style="width: 120px"
-        ><i class="fa fa-tag"></i> Name</label
-    >
+    <label for="node-config-input-name" style="width: 120px">
+        <i class="fa fa-tag"></i> Name
+    </label>
     <input type="text" id="node-config-input-name" />
 </div>
 
@@ -12,8 +12,8 @@
         style="width: auto;margin-left: 125px;vertical-align: top"
     />
     <label for="node-config-input-hassio" style="width: auto;">
-        I use the Hass.io Add-on</label
-    >
+        I use the Hass.io Add-on
+    </label>
 </div>
 
 <div class="form-row hassio">
@@ -23,29 +23,37 @@
         style="width: auto;margin-left: 125px;vertical-align: top"
     />
     <label for="node-config-input-connectionDelay" style="width: auto;">
-        Delay connection attempts</label
-    >
+        Delay connection attempts
+    </label>
 </div>
 
 <div id="server-info">
-    <div class="form-row">
-        <label for="node-config-input-host" style="width: 120px"
-            ><i class="fa fa-link"></i> Base URL</label
-        >
-        <input
-            type="text"
-            id="node-config-input-host"
-            placeholder="http://localhost:8123"
-        />
+    <div class="form-row button-box">
+        <label for="node-config-input-host" style="width: 124px">
+            <i class="fa fa-link"></i> Base URL
+        </label>
+        <div class="text-box">
+            <div>
+                <input
+                    type="text"
+                    id="node-config-input-host"
+                    placeholder="http://localhost:8123"
+                />
+            </div>
+            <a id="discoverInstances" class="red-ui-button">
+                <i class="fa fa-search"></i>
+            </a>
+        </div>
     </div>
 
     <div class="form-row">
         <label
             id="access-token-label"
             for="node-config-input-access_token"
             style="width: 120px"
-            ><i class="fa fa-user-secret"></i> Access Token</label
         >
+            <i class="fa fa-user-secret"></i> Access Token
+        </label>
         <input
             type="text"
             id="node-config-input-access_token"
@@ -60,8 +68,8 @@
             style="width: auto;margin-left: 125px;vertical-align: top"
         />
         <label for="node-config-input-legacy" style="width: auto;">
-            Use Legacy API Password</label
-        >
+            Use Legacy API Password
+        </label>
     </div>
 
     <div class="form-row">
@@ -71,15 +79,15 @@
             style="width: auto;margin-left: 125px;vertical-align: top"
         />
         <label for="accept_unauthorized_certs" style="width: auto;">
-            Accept Unauthorized SSL Certificates</label
-        >
+            Accept Unauthorized SSL Certificates
+        </label>
     </div>
 </div>
 
 <div class="form-row">
-    <label for="node-config-input-ha_boolean" style="width: 120px"
-        ><i class="fa fa-link"></i> State Boolean</label
-    >
+    <label for="node-config-input-ha_boolean" style="width: 120px">
+        <i class="fa fa-link"></i> State Boolean
+    </label>
     <input
         type="text"
         id="node-config-input-ha_boolean"
@@ -94,6 +102,6 @@
         style="width: auto;margin-left: 125px;vertical-align: top"
     />
     <label for="node-config-input-cacheJson" style="width: auto;">
-        Cache Autocomplete Results</label
-    >
+        Cache Autocomplete Results
+    </label>
 </div>
diff --git a/nodes/config-server/ui-config-server.js b/nodes/config-server/ui-config-server.js
@@ -70,6 +70,39 @@ RED.nodes.registerType('server', {
         $legacy.on('click', function() {
             updateLegacy();
         });
+
+        try {
+            $host.autocomplete('destroy');
+        } catch (err) {}
+        const $discovery = $('#discoverInstances');
+        $discovery.on('click', function() {
+            if ($(this).hasClass('disabled')) return;
+            const $icon = $('i', this)
+                .removeClass('fa-search')
+                .addClass('spinner');
+            $discovery.addClass('disabled');
+            $host
+                .autocomplete({
+                    source: (request, response) => {
+                        $.ajax({
+                            dataType: 'json',
+                            url: '/homeassistant/discover',
+                            cache: false
+                        }).done(data => {
+                            response(data);
+                        });
+                    },
+                    minLength: 0,
+                    response: () => {
+                        $icon.addClass('fa-search').removeClass('spinner');
+                        $discovery.removeClass('disabled');
+                    },
+                    close: (event, ui) => {
+                        $host.autocomplete('destroy');
+                    }
+                })
+                .autocomplete('search', '');
+        });
     },
     oneditsave: function() {
         const hassio = $('#node-config-input-hassio').is(':checked');