node-red-contrib-lgtv-with-fullscreen/nodes/lgtv-config.html

Node-RED Nodes to control LG webOS Smart TVs, with browser fullscreen

<script type="text/javascript">
    RED.nodes.registerType('lgtv-config', {
        category: 'config',
        defaults: {
            host: {
                value: 'lgwebostv',
                required: true
            }
        },
        credentials: {
            token: {
                type: 'text'
            }
        },
        label() {
            return this.host;
        },
        oneditprepare() {
            const nodeId = this.id;
            let timeout;
            $('#node-config-dialog-ok').button('option', 'disabled', true);
            $('#lgtv-connect').button().click(() => {
                $('#lgtv-connect').button('option', 'disabled', true);
                $('#lgtv-spinner').removeClass('hide');
                timeout = false;
                setTimeout(() => {
                    timeout = true;
                }, 30000);
                pollConnection();
            });

            function pollConnection() {
                $.getJSON('lgtv-connect/?id=' + nodeId + '&host=' + $('#node-config-input-host').val(), data => {
                    $('#lgtv-state').html(data.state);
                    if (data.token) {
                        $('#node-config-dialog-ok').button('option', 'disabled', false);
                        $('#lgtv-spinner').addClass('hide');
                        $('#node-config-input-token').val(data.token);
                    } else if (timeout) {
                        $('#lgtv-state').html('');
                        $('#lgtv-spinner').addClass('hide');
                        $('#lgtv-connect').button('option', 'disabled', false);
                    } else {
                        setTimeout(pollConnection, 1000);
                    }
                });
            }
        }
    });
</script>

<script type="text/x-red" data-template-name="lgtv-config">
    <div class="form-row">
        <label for="node-config-input-host"><i class="icon-bookmark"></i> Host</label>
        <input type="text" id="node-config-input-host">
    </div>
    <div class="form-row">
        <label for="node-config-input-token"><i class="icon-bookmark"></i> Token</label>
        <input type="text" id="node-config-input-token" disabled>
    </div>
    <div class="form-row">
        <label for="lgtv-state"><i class="icon-bookmark"></i> Connection</label>
        <span id="lgtv-state"></span>
    </div>

    <div class="form-row">
        <label for="lgtv-connect"><span id="lgtv-spinner" class="hide"><img src="red/images/spin.svg"></span></label>
        <button id="lgtv-connect">Connect</button>
    </div>
</script>