server.html

<script type="text/x-red" data-template-name="harmonyws-server">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" />
    </div>
    <div class="form-row">
        <label for="node-config-input-ip-select"><i class="fa fa-server"></i> Hubs</label>
        <select id="node-config-input-ip-select" style="width: 60%;"></select>
        <a id="node-config-input-select-trigger" class="editor-button"><i class="fa fa-search"></i></a>
    </div>
    <div class="form-row">
        <label for="node-config-input-ip"><i class="fa fa-laptop"></i> IP</label>
        <input type="text" id="node-config-input-ip" style="width: 60%;"/>
    </div>
    <div class="form-row">
        <label for="node-config-input-debug"><i class="fa fa-bug"></i> Debug</label>
        <input type="checkbox" id="node-config-input-debug"/>
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType("harmonyws-server", {
        category: "config",
        defaults: {
            name: {
                value: "",
                required: false
            },
            ip: {
                value: "",
                required: true
            },
            debug: {
                value: false
            }
        },
        label: function() {
            return this.name ? this.name : "Harmony Hub";
        },
        paletteLabel: 'Harmony Hub Server',
        oneditprepare: function() {

            function scanForHubs(selected_ip) {
                $('#node-config-input-select-trigger').addClass('disabled')
                $('#node-config-input-ip-select').attr('disabled', 'disabled')
                $('#node-config-input-ip-select').append("<option value='' selected>Scanning for hubs...</option>")
                $.get('hws/discover')
                    .done(function(data) {
                        var hubs = JSON.parse(data);
                        $('#node-config-input-ip-select').empty()
                        if (!hubs || hubs.length <= 0) {
                            $('#node-config-input-ip-select').append("<option value='' selected>No hubs</option>")
                            RED.notify("No hubs found.", "error")
                        } else {
                            hubs.forEach(function(hub) {
                                $('#node-config-input-ip-select').append('<option value="' + hub.ip + '" title="' + hub.friendlyName + '">' + hub.friendlyName + ' (' + hub.ip + ')</option>')
                            })
                            if (selected_ip) {
                                $('#node-config-input-ip-select').val(selected_ip)
                            } else {
                                $('#node-config-input-ip-select').val($('#node-config-input-ip-select option:first').val())
                                $('#node-config-input-name').val($('#node-config-input-ip-select :selected').attr('title'))
                                $('#node-config-input-ip').val($('#node-config-input-ip-select option:first').val())
                            }
                            $('#node-config-input-ip-select').removeAttr('disabled')
                        }
                        $('#node-config-input-select-trigger').removeClass('disabled')
                    })
                    .fail(function() {
                        RED.notify("Something went wrong discovering an Harmony Hub", "error")
                    })
            }

            scanForHubs(this.ip)

            $('#node-config-input-select-trigger').click(function() {
                if (!$('#node-config-input-select-trigger').hasClass('disabled')) {
                    scanForHubs(this.ip)
                }
            })

            $('#node-config-input-ip-select').on('change', function() {
                $('#node-config-input-name').val($('#node-config-input-ip-select :selected').attr('title'))
                $('#node-config-input-ip').val($('#node-config-input-ip-select').val())
            })
        }
    })
</script>