node-red-contrib-knx-ultimate/nodes/knxUltimateViewer.html

Control your KNX and KNX Secure intallation via Node-Red! A bunch of KNX nodes, with integrated Philips HUE control, ETS group address importer, KNX AI for diagnosticsand KNX routing between interfaces. Easy to use and highly configurable.

<script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/htmlUtils.js"></script>

<script type="text/javascript">
    RED.nodes.registerType('knxUltimateViewer', {
        category: "KNX Ultimate",
        color: '#C7E9C0',
        defaults: {
            //buttonState: {value: true},
            server: { type: "knxUltimate-config", required: true },
            name: { value: "KNXViewer", required: false }
        },
        inputs: 0,
        outputs: 3,
        outputLabels: function (i) {
            switch (i) {
                case 0:
                    return RED._('knxUltimateViewer.outputs.ga_dashboard');
                    break;
                case 1:
                    return RED._('knxUltimateViewer.outputs.simple_array');
                    break;
                case 2:
                    return RED._('knxUltimateViewer.outputs.queue');
                    break;
                default:
                    break;
            }
        },
        icon: "node-eye-icon.svg",
        label: function () {
            return (this.name);
        },
        paletteLabel: "KNX Viewer",
        // button: {
        //     enabled: function() {
        //         // return whether or not the button is enabled, based on the current
        //         // configuration of the node
        //         return !this.changed
        //     },
        //     visible: function() {
        //         // return whether or not the button is visible, based on the current
        //         // configuration of the node
        //         return this.hasButton
        //     },
        //     //toggle: "buttonState",
        //     onclick: function() {}
        // },
        oneditprepare: function () {
            // Go to the help panel
            try {
                RED.sidebar.show("help");
            } catch (error) { }
            const nodeId = this.id;
            const resolveAdminRoot = () => {
                const raw = (RED.settings && typeof RED.settings.httpAdminRoot === "string") ? RED.settings.httpAdminRoot : "/";
                const trimmed = String(raw || "/").trim();
                if (trimmed === "" || trimmed === "/") return "";
                return "/" + trimmed.replace(/^\/+|\/+$/g, "");
            };
            const resolveAccessToken = () => {
                try {
                    const tokens = (RED.settings && typeof RED.settings.get === "function") ? RED.settings.get("auth-tokens") : null;
                    const token = tokens && typeof tokens.access_token === "string" ? tokens.access_token.trim() : "";
                    return token;
                } catch (error) {
                    return "";
                }
            };
            $("#knx-viewer-open-web-page").on("click", function (evt) {
                evt.preventDefault();
                const adminRoot = resolveAdminRoot();
                const targetBase = adminRoot + "/knxUltimateViewer/page";
                const params = new URLSearchParams();
                if (nodeId) params.set("nodeId", nodeId);
                const accessToken = resolveAccessToken();
                if (accessToken) params.set("access_token", accessToken);
                const target = targetBase + (params.toString() ? ("?" + params.toString()) : "");
                const wnd = window.open(target, "_blank", "noopener,noreferrer");
                try { if (wnd && typeof wnd.focus === "function") wnd.focus(); } catch (e) { }
            });
        },
        oneditsave: function () {
            // Return to the info tab
            try {
                RED.sidebar.show("info");
            } catch (error) { }



        },
        oneditcancel: function () {
            // Return to the info tab
            try {
                RED.sidebar.show("info");
            } catch (error) { }


        }
    })

</script>

<script type="text/html" data-template-name="knxUltimateViewer">


<div class="form-row">
    <b><span data-i18n="knxUltimateViewer.title"></span></b>
    <br />
    <label for="node-input-server">
        <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC"></img>
        <span data-i18n="knxUltimateViewer.advanced.node-input-server"></span>
    </label>
    <input type="text" id="node-input-server" />
</div>

<div class="form-row">
    <label for="node-input-name">
        <i class="fa fa-tag"></i>
        <span data-i18n="knxUltimateViewer.node-input-name"></span>
    </label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]knxUltimateViewer.node-input-name" style="flex:1 1 240px; min-width:240px; max-width:240px;" />
</div>

<div class="form-row">
    <label><i class="fa fa-external-link"></i> Web UI</label>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
        <button type="button" class="red-ui-button" id="knx-viewer-open-web-page" style="background-color:#2bb673; border-color:#2bb673; color:#ffffff !important; -webkit-text-fill-color:#ffffff;">
            <i class="fa fa-leaf" style="color:#10341f !important;"></i> <span style="color:#10341f !important;">Open KNX Viewer Web Page</span>
        </button>
    </div>
</div>



</script>