system-action-node.html

<script type="text/javascript">
    RED.nodes.registerType('system-action-node', {
        category: 'Web of Things',
        color: '#a6bbcf',
        defaults: {
            name: { value: "" },
            thingDirectoryURI: { value: "" },
            thingAction: { value: "" },
            thingActionValue: { value: "" },
            outputToMsg: { value: true },
            redeploy: { value: "false" } //Only used to trigger UI redeploy
        },
        inputs: 1,
        inputLabels: function () {
            let text = "";

            try {
                text = formParameterText(JSON.parse(this.thingActionValue).params);
            }
            catch {
                return "";
            }

            if(text === "") {
                text = "No parameters";
            }

            return text;

            function formParameterText(params) {
                let text = "";

                for (let parameter of Object.keys(params)) {
                    text += parameter + " : " + params[parameter] + "\n";
                }

                return text.substring(0, text.length - 1);
            }
        },
        outputs: 1,
        outputLabels: function () {
            try {
               return JSON.parse(this.thingActionValue).output["type"];
            }
            catch {
                return "undefined";
            }
        },
        icon: "bridge.svg",
        label: function () {
            if (this.name) {
                return this.name;
            }
            else if (this.thingActionValue) {
                return JSON.parse(this.thingActionValue).action;
            }
            else {
                return "system-action-node";
            }
        },
        oneditprepare: function () {
            var node = this;

            // hideFunctionOption(); //TODO: Buffer options whilst waiting for connection to Thing Directory

            if(node.thingActionValue === undefined) { //Ensures value is added to this node object
                node.thingActionValue = "";
            }
            else {
                try {
                    let actionObj = JSON.parse(node.thingActionValue);

                    updateParameterLabels(actionObj);
                    updateOutputLabel(actionObj);
                }
                catch {
                    node.thingActionValue = "";
                }
            }

            $("#node-input-thingDirectoryURI").on("change", async function (event) {
                let input = $(this).val();

                let emptyInput = ["", undefined, null].includes(input);

                if (!emptyInput) {
                    await populateActions(input, node);
                }

                displayActionOption(!emptyInput);
            });

            function showActionOption() {
                $("div#action-row").show();
            }

            function hideActionOption() {
                $("#node-input-thingAction").innerText = "";
                this.thingAction = "";
                $("div#action-row").hide();
            }

            function displayActionOption(on) {
                if (on) {
                    showActionOption();
                } else {
                    hideActionOption();
                }
            }

            /**
             * @returns Boolean, the completion of this functionality
             */
            async function populateActions(tdURI, node) {
                emptyActionsSelect();

                let thingURIs;

                try {
                    thingURIs = await fetchThingURIs(tdURI);
                }
                catch (reason) {
                    //TODO: Handle failure (display error, with icon and notifiction)
                    // node.status({fill:"red",shape:"ring",text:"Disconnected from Thing directory"});
                    // error("Failed to connect to Thing Directory");
                    return reason;
                }

                let actionMap = await getActions(thingURIs);

                let actionSelect = document.getElementById("node-input-thingAction");

                if (Object.keys(actionMap).length === 0) { //No actions
                    let option = document.createElement("option");
                    option.innerHTML = "No actions available";

                    actionSelect.appendChild(option);
                    actionSelect.disabled = true;

                    // node.status({fill:"yellow",shape:"ring",text:"No actions found"}); //TODO: Allow status changes

                    document.getElementById("label-parameters").innerText = "";
                    document.getElementById("label-output").innerText = "";

                    return;
                }
                
                actionSelect.disabled = false;

                // node.status({fill:"green",shape:"dot",text:"connected"}); //TODO: Allow status changes

                actionSelect.addEventListener("change", async function () { //Set thingAction value to new selection
                    let selection = actionSelect.options[actionSelect.selectedIndex];
                    let actionObject = $(selection).data("value");

                    node.thingAction = selection.text;
                    
                    let actionJSON = JSON.stringify(actionObject); //Access object in select's data-value

                    this.thingActionValue = actionJSON;
                    node.thingActionValue = actionJSON;

                    //TODO: Use description and title
                    updateParameterLabels(actionObject);
                    updateOutputLabel(actionObject);

                    enableDeploy();
                });

                let index = 0;
                for (let action of Object.keys(actionMap)) {
                    let option = document.createElement('option');

                    actionMap[action]["action"] = action; //Move action name from a key to a value
                    $(option).data("value", actionMap[action]);

                    option.innerHTML = action;

                    actionSelect.appendChild(option);

                    if (action === node.thingAction) { //Select the thingAction option
                        actionSelect.selectedIndex = index;
                    }

                    index++;
                }

                let selection = actionSelect.options[actionSelect.selectedIndex];
                let actionObject = $(selection).data("value");

                let actionJSON = JSON.stringify(actionObject);
                node.thingActionValue = actionJSON;

                updateParameterLabels(actionObject);
                updateOutputLabel(actionObject);
            }

            function emptyActionsSelect() {
                $("select#node-input-thingAction").empty();
            }

            async function fetchThingURIs(tdURI) {
                return fetch(tdURI + "/actions/getURIs", {
                    method: "POST"
                })
                .then((response) => {
                    return response.json();
                })
                .catch((reason) => {
                    throw reason;
                });
            }

            /**
             * Note: No action names may be duplicated in the system
             * @returns A map of action to the Thing URIs, list of parameters (along with their types is provided), output type, description and title
             */
            async function getActions(uriList) {
                let uriMap = {}; //Maps actions to the URIs they are associated with

                for (let uri of uriList) {
                    let actions = await fetchObject(uri, "actions");
                    if (actions === undefined) continue;

                    for (let action of Object.keys(actions)) {
                        uriMap[action] = {
                            "uri" : uri,
                            "params" : {},
                            "output" : undefined,
                            "description" : undefined,
                            "title" : undefined
                        }; //Note: Will override an action if a duplicate occurs

                        let actionObj = actions[action];

                        uriMap[action]["output"] = actionObj["output"];
                        uriMap[action]["description"] = actionObj["description"];
                        uriMap[action]["title"] = actionObj["title"];

                        let params = actionObj["input"];
                        if (params === undefined || params === null) continue;

                        let usingProperties = false;
                        if (Object.keys(params).includes("properties")) { // If "inputs.properties" exists, take paramaters from this
                            params = params.properties;
                            usingProperties = true;
                        }

                        for (let parameter of Object.keys(params)) {
                            if (!usingProperties && parameter === "type") continue; //Ignore "inputs.type"

                            let type = params[parameter]["type"];
                            uriMap[action]["params"][parameter] = type; //Map parameter to it's type
                        }
                    }
                }

                return uriMap;
            }

            async function fetchObject(uri, key) {
                let response = await fetch(uri, {
                    method: "GET"
                })
                .then((response) => {
                    return response.json();
                })
                .catch((reason) => {
                    throw reason;
                });

                return response[key]; //Only allows keys from top-level
            }

            function enableDeploy() {
                let holder = document.getElementById("node-input-redeploy");
                
                if (holder.value !== "true") {
                    holder.value = "true";
                }
                else {
                    holder.value = "false";
                }
            }

            function updateParameterLabels(actionObject) {
                let params = actionObject["params"];

                let paramHolder = document.getElementById("label-parameters");
                let paramText = formParameterText(params);

                if(paramText === "") {
                    paramHolder.innerText = "No parameters";
                }
                else {
                    paramHolder.innerText = paramText;
                }
            }

            //TODO: Fix for multi outputs (for all node types)
            //TODO: Add output descriptions
            function updateOutputLabel(actionObject) {
                let output = actionObject["output"];

                let outputHolder = document.getElementById("label-output");

                try {
                    outputHolder.innerText = output["type"];
                }
                catch {
                    outputHolder.innerText = "undefined";
                }
            }

            //TODO: Add parameter descriptions
            function formParameterText(params) {
                let text = "";

                for (let parameter of Object.keys(params)) {
                    text += parameter + " : " + params[parameter] + "\n";
                }

                return text.substring(0, text.length - 1);
            }
        }
    });
</script>

<style>
    .parameterLabel {
        vertical-align: top;
        width: 60%;
    }

    #label-parameters {
        width: 60%;
    }

    #label-output {
        width: 60%;
    }
</style>

<script type="text/html" data-template-name="system-action-node">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-thingDirectoryURI"><i class="fa fa-tag"></i> Thing Directory</label>
        <input type="text" id="node-input-thingDirectoryURI" placeholder="http://localhost:8080/td">
    </div>
    <div id="action-row" class="form-row">
        <label for="node-input-thingAction"><i class="fa fa-tag"></i> Action</label>
        <select name="actionSelect" id="node-input-thingAction">
            <option>Placeholder</option>
        </select>

        <div class="form-row">
            <label for="label-parameters"> Parameters</label>
            <label id="label-parameters" class="parameterLabel"></label>
        </div>
        <div class="form-row">
            <label for="label-output"> Output Type</label>
            <label id="label-output" class="parameterLabel"></label>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-outputToMsg"><i class="fa fa-tag"></i> Output to msg.payload</label>
        <input type="checkbox" checked id="node-input-outputToMsg" name="outputToMsg">
    </div>
    <input type="hidden" id="node-input-redeploy" name="holder">
</script>

<script type="text/html" data-help-name="system-action-node">
    <p>A node describing all Thing actions held within its ThingDirectory</p>
</script>