node-red-contrib-snap4city-user/synoptic-read.html

Nodes for Snap4city project, targeted to standard user (no developer)

<!--/* NODE-RED-CONTRIB-SNAP4CITY-USER
   Copyright (C) 2018 DISIT Lab http://www.disit.org - University of Florence

   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as
   published by the Free Software Foundation, either version 3 of the
   License, or (at your option) any later version.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU Affero General Public License for more details.

   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>. */-->
<script type="text/javascript">
    RED.nodes.registerType('synoptic-read', {
        category: 'S4CDashboard',
        color: '#00a2d3',
        defaults: {
            name: {
                value: ""
            },
            synopticId: {
                value: ""
            },
            selectedSynopticId: {
                value: ""
            },
            synopticVariableId: {
                value: ""
            },
            selectedSynopticVariableId: {
                value: ""
            },
            authentication: {
                type: "snap4city-authentication",
                required: false
            }
        },
        outputs: 1,
        inputs: 1,
        icon: "synoptic.svg",
        label: function () {
            return this.name || "synoptic-read";
        },
        oneditprepare: function () {
            $("#node-input-currentNodeId").val(this.id);
            $("#node-input-synopticId").val("");
            var accessToken = "";
            var synopticList = "";

            $.ajax({
                url: "retrieveAccessTokenAuthentication",
                type: "POST",
                async: false,
                dataType: "json",
                data: {
                    "authenticationNodeId": $("#node-input-authentication").val(),
                    "nodeId": $("#node-input-currentNodeId").val()
                },
                success: function (_data) {
                    if (_data.accessToken == "") {
                        $("#selectSynopticContainer").hide();
                        $("#selectSynopticVariableContainer").hide();
                        $('#tipAuthenticationWrong').show();
                        $('#tipAuthentication').hide();
                    } else {
                        accessToken = _data.accessToken;
                    };
                }
            });

            refreshSynopticSelection(accessToken, synopticList);
        },
        oneditsave: function () {
            $("#node-input-selectedSynopticId").val($("#node-input-synopticId").val());
            $("#node-input-selectedSynopticVariableId").val($("#node-input-synopticVariableId").val());
            if ($("#node-input-name").val() == "") {
                $("#node-input-name").val("Read From " + $("#node-input-synopticVariableId option:selected").text());
            }
        }
    });

    var refreshSynopticSelection = function (accessToken, synopticList) {
        $("#node-input-synopticId").empty();
        if (synopticList != "") {
            createSynopticSelectionOutput(synopticList);
        } else if (accessToken != "" && synopticList == "") {
            $.ajax({
                url: "dashboardSmartCityUrl",
                type: "GET",
                async: false,
                success: function (_data) {
                    var domain = (RED.nodes.node($("#node-input-authentication").val()) != null ? RED.nodes.node($("#node-input-authentication").val()).domain : "");
                    if (domain != "") {
                        _data.dashboardSmartCityUrl = domain + "/dashboardSmartCity/";
                    }
                    $.ajax({
                        url: _data.dashboardSmartCityUrl +
                            "api/synoptics.php?accessToken=" +
                            accessToken,
                        type: "GET",
                        async: true,
                        dataType: "json",
                        success: function (_data) {
                            createSynopticSelectionOutput(_data);
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });
                }
            });
        }

    }

    var createSynopticSelectionOutput = function (currentSynopticList) {
        console.log(currentSynopticList);
        var currentSynopticList = currentSynopticList.applications;
        currentSynopticList.applications.sort(function (a, b) {
            if (a.unique_name_id < b.unique_name_id) { return -1; }
            if (a.unique_name_id > b.unique_name_id) { return 1; }
            return 0;
        });
        if (currentSynopticList.length != 0) {
            $("#node-input-synopticId").empty();
            var currentValue = $("#node-input-selectedSynopticId").val();
            for (var i = 0; i < currentSynopticList.length; i++) {
                $("<option value='" + currentSynopticList[i].id + "'>" + currentSynopticList[i].unique_name_id + "-" +
                    currentSynopticList[i].low_level_type + "</option>").appendTo($("#node-input-synopticId"));
            }

            $("#node-input-synopticId").change(function () {
                if ($("#node-input-synopticId").val() != null) {
                    $("#node-input-synopticVariableId").empty();
                    //console.log(currentSynopticList);
                    var synopticIndex = 0;
                    for (synopticIndex = 0; synopticIndex < currentSynopticList.length; synopticIndex++) {
                        if (currentSynopticList[synopticIndex].id == $("#node-input-synopticId").val()) {
                            break;
                        }
                    }
                    var currentVariableValue = $("#node-input-selectedSynopticVariableId").val();
                    for (var currentOutput in currentSynopticList[synopticIndex].output) {
                        //console.log(currentOutput);
                        $("<option value=\"" + currentSynopticList[synopticIndex].output[currentOutput] + "\">" + currentOutput + "</option>").appendTo(
                            $("#node-input-synopticVariableId"));
                    }
                    $("#node-input-synopticVariableId").val(currentVariableValue);
                }
            });

            $("#node-input-synopticId").val(currentValue).trigger('change');
        }
    }
</script>

<script type="text/x-red" data-template-name="synoptic-read">
    <input type="hidden" id="node-input-currentNodeId">
    <input type="hidden" id="node-input-selectedSynopticId">
    <input type="hidden" id="node-input-selectedSynopticVariableId">
    <div class="form-row" id="rowAuthentication">
        <label for="node-input-authentication">Authentication</label>
        <input type="text" id="node-input-authentication">
    </div>
    <div class="form-row">
        <label for="node-input-name">Name</label>
        <input type="text" autocomplete="off" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row" id="selectSynopticContainer">
        <label for="node-input-synopticId">
            <i class="fa fa-dashboard"></i>Select Synoptic</label>
        <select id="node-input-synopticId" style="width: 55%;">
        </select>
    </div>
    <div class="form-row" id="selectSynopticVariableContainer">
        <label for="node-input-synopticVariableId">
            <i class="fa fa-dashboard"></i>Select Synoptic Variable</label>
        <select id="node-input-synopticVariableId" style="width: 55%;">
        </select>
    </div>
    <div class="form-tips"  id="tipAuthentication" style="max-width: none">
		You must have an account with Snap4city to use this node. You can register for one <a href="https://www.snap4city.org" target="_blank">here</a>.
    </div>
    <div class="form-tips" id="tipAuthenticationWrong" style="display:none; max-width: none">
        Maybe the authentication data are wrong. Check them and redeploy the node.
    </div>
    <div class="form-tips"  id="tipAuthenticationRedeploy" style="display:none; max-width: none">
        Deploy the node to retrieve the updated list of dashboards.
    </div>
    <div class="form-tips"  id="tipAuthenticationDeployFirstTime" style="display:none; max-width: none">
        Insert the authentication data and deploy the node to retrieve the updated list of dashboards.
    </div>
</script>

<script type="text/x-red" data-help-name="synoptic-read">
    <p>Shows in output the current value of the Synoptic Variable chosen</p>

    <h3>Inputs</h3>
    A JSON with these parameters:

    <dl class="message-properties">
        <dt>synopticId
            <span class="property-type">string</span>
        </dt>
        <dd>the id of the Synoptic to be read</dd>
        <dt>synopticVariableId
            <span class="property-type">string</span>
        </dt>
        <dd>the id of the Synoptic Variable to be read</dd>

        <p>An example of the JSON array filled with correct data:</p>
    <pre>
{
    "synopticId": 17849,
    "synopticVariableId": "s4csvg_name"
}
    </pre>
    or
    <pre>
{
    "synopticId": 17849,
    "synopticVariableId": "12345"
}
</pre>

    <h3>Outputs</h3>
    <dl class="message-properties">
        <dd> Value of Synoptic Variable that has been readed</dd>
    </dl>


</script>