node-red-contrib-snap4city-user/dashboard-deviceTable.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/>. */-->
<style type="text/css">
    .dashboardBtn {
        background: #AD1625;
        border: none;
        color: #eee !important;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }
</style>

<script type="text/javascript">
    RED.nodes.registerType('dashboardDevice', {
        category: 'S4CDashboard',
        color: '#00a2d3',
        defaults: {
            selectedDashboardId: {
                value: "",
            },
            flowName: {
                value: ""
            },
            authentication: {
                type: "snap4city-authentication",
                required: false
            },
            username: {
                value: ""
            },
            name: {
                value: "",
                required: true
            },
            dashboardId: {
                value: "",
                required: true
            },
            valueType: {
                value: "Testuale",
                required: true
            },
            domainType: {
                value: "singleNumericValue",
                required: true
            }
        },
        inputs: 1,
        outputs: 1,
        outputLabels: ["selection"],
        icon: "table-iot.png",
        label: function () {
            return this.name || "device table";
        },
        paletteLabel: function () {
            return this.name || "device table";
        },
        align: 'left',
        oneditprepare: function () {
            $("#node-input-currentNodeId").val(this.id);
            var accessToken = getDashboardUserInfoAndCreateSelection();
				$("#node-input-authentication").change(function () {
					getDashboardUserInfoAndCreateSelection();
			});
            $('#node-input-flowName').val($("li.red-ui-tab.ui-draggable.active a").attr("title"));
            $('#node-dashboard-edit').click(function () {
                if ($('#node-input-dashboardId').val() != null && $('#node-input-dashboardId')
                    .val() != "") {
                    $.ajax({
                        url: "dashboardManagerBaseUrl",
                        type: "GET",
                        async: true,
                        success: function (_data) {
                            var domain = (RED.nodes.node($("#node-input-authentication").val()) != null ? RED.nodes.node($("#node-input-authentication").val()).domain: "");
                            if (domain != "") {
                                _data.dashboardManagerBaseUrl = domain + "/dashboardSmartCity";
                            }
                            window.open(_data.dashboardManagerBaseUrl +
                                "/controllers/openNRDashboardEditor.php?dashboardId=" +
                                $('#node-input-dashboardId').val(),
                                '_blank');
                        }
                    });
                } else {
                    alert("Select a dashboard or enter the name of a new one");
                }
            });

            $('#node-dashboard-view').click(function () {
                if ($('#node-input-dashboardId').val() != null && $(
                    '#node-input-dashboardId')
                    .val() != "") {
                    $.ajax({
                        url: "dashboardManagerBaseUrl",
                        type: "GET",
                        async: true,
                        success: function (_data) {
                            var domain = (RED.nodes.node($("#node-input-authentication").val()) != null ? RED.nodes.node($("#node-input-authentication").val()).domain: "");
                            if (domain != "") {
                                _data.dashboardManagerBaseUrl = domain + "/dashboardSmartCity";
                            }
                            window.open(_data.dashboardManagerBaseUrl +
                                "/controllers/openNRDashboardViewer.php?dashboardId=" +
                                $('#node-input-dashboardId').val(),
                                '_blank'
                            );
                        }
                    });
                } else {
                    alert("Select a dashboard or enter the name of a new one");
                }
            });

            $("#createNewDashboardTitle").click(function () {
                $("#node-input-dashboardId").hide();
                $("#node-input-dashboardId").val("");
                $("#createNewDashboardTitle").hide();
                $("#node-input-dashboardTitle").show();
                $("#createNewDashboardButton").show();
                $("#backDashboardTitle").show();
                $("#node-dashboard-view").hide();
                $("#node-dashboard-edit").hide();
                $("#node-input-tip").show();

                $("#node-input-dashboardTitle").val($("#node-input-dashboardTitleInserted").val());
                $('#node-input-dashboardTitle').keypress(function (e) {
                    var txt = String.fromCharCode(e.which);
                    if (!txt.match(/[A-Za-z0-9&. ]/)) {
                        return false;
                    }
                });
            });

            $("#backDashboardTitle").click(function () {
                $("#node-input-dashboardTitle").val("");
                $("#node-input-dashboardTitle").hide();
                $("#node-input-dashboardId").show();
                $("#createNewDashboardTitle").show();
                $("#createNewDashboardButton").hide();
                $("#backDashboardTitle").hide();
                $("#node-dashboard-view").show();
                $("#node-dashboard-edit").show();
                $("#node-input-tip").hide();
            });

            $("#createNewDashboardButton").click(function () {
                if ($("#node-input-dashboardTitle").val() != "") {
                    if (accessToken != "") {
                        $.ajax({
                            url: "dashboardManagerBaseUrl",
                            type: "GET",
                            async: true,
                            success: function (_data) {
                                var domain = (RED.nodes.node($("#node-input-authentication").val()) != null ? RED.nodes.node($("#node-input-authentication").val()).domain: "");
                                if (domain != ""){
                                    _data.dashboardManagerBaseUrl = domain + "/dashboardSmartCity";
                                }
                                $.ajax({
                                    url: _data.dashboardManagerBaseUrl + "/controllers/createDashboardFromNR.php?dashboardTitle="
                                        + encodeURIComponent($("#node-input-dashboardTitle").val()) + "&accessToken=" + accessToken,
                                    type: "GET",
                                    async: true,
                                    success: function (_data) {
                                        try {
                                            _data = JSON.parse(_data)
                                        } catch (e) {
                                            console.log(e);
                                        }
                                        if (_data.result) {
                                            if (_data.result.toLowerCase() == "ok") {
                                                $("#node-input-selectedDashboardId").val(_data.dashboardId);
                                                getDashboardUserInfoAndCreateSelection();
                                            } else {
                                                alert(_data.errormsg);
                                            }
                                        }
                                    },
                                    error: function (_error) {
                                        console.log(_error);
                                    }
                                });
                            },
                            error: function (_error) {
                                console.log(_error);
                            }
                        });
                    } else {
                        $.ajax({
                            url: "createDashboard/",
                            type: "POST",
                            async: true,
                            dataType: "json",
                            data: {
                                "dashboardTitle": $("#node-input-dashboardTitle").val(),
                                "authenticationNodeId": $("#node-input-authentication").val(),
                                "authenticationNodeDomain": RED.nodes.node($("#node-input-authentication").val()).domain
                            },
                            success: function (_data) {
                                try {
                                    _data = JSON.parse(_data)
                                } catch (e) {
                                    console.log(e);
                                }
                                if (_data.result) {
                                    if (_data.result.toLowerCase() == "ok") {
                                        $("#node-input-selectedDashboardId").val(_data.dashboardId);
                                        getDashboardUserInfoAndCreateSelection();
                                    } else {
                                        alert(_data.errormsg);
                                    }
                                }
                            },
                            error: function (_error) {
                                console.log(_error);
                            }
                        });
                    }
                } else {
                    alert("To create a new dashboard you must insert the name of the dashboard");
                }
            });
        },
        oneditsave: function () {
            $("#node-input-selectedDashboardId").val($("#node-input-dashboardId").val());
        }
    });
</script>

<script type="text/x-red" data-template-name="dashboardDevice">
    <input type="hidden" id="node-input-username">
    <input type="hidden" id="node-input-flowName">
    <input type="hidden" id="node-input-currentNodeId">
    <input type="hidden" id="node-input-selectedDashboardId">
    <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" id="selectDashboardContainer">
        <label for="node-input-dashboardTitle">
            <i class="fa fa-dashboard"></i>Dashboard Name</label>
        <input type="text" autocomplete="off" id="node-input-dashboardTitle" placeholder="Dashboard Name" style="display:none; width: 55%;">
        <select id="node-input-dashboardId" style="width: 55%;">
        </select>
        <button id="createNewDashboardTitle" >New Dashboard</button>
        <button id="createNewDashboardButton" style="display:none">Create</button>
        <button id="backDashboardTitle" style="display:none">Show list</button>
    </div>
    <div class="form-row" id="selectWidgetName">
        <label for="node-input-name">
            <i class="icon-tag"></i> Widget Name</label>
        <input type="text" autocomplete="off" id="node-input-name" placeholder="Widget Name">
    </div>
    <div class="form-row">
        <button class="dashboardBtn" click="openDashboardEditor" role="button" aria-disabled="false" id="node-dashboard-edit">
            Edit Dashboard
        </button>
        <button class="dashboardBtn" click="openDashboardViewer" role="button" aria-disabled="false" id="node-dashboard-view">
            View Dashboard
        </button>
    </div>
    <div id="node-input-tip" class="form-tips" style="display:none">The new dashboard is created entering the title andclicking on create
    </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="dashboardDevice">
    <p>With this node you can add a dashboardDevice to an existing dashboard or a new one created by the node to select numbers in an
        interval.
    </p>

    <h3>Configuration</h3>

    <dl class="message-properties">
        <dt>dashboard
            <span class="property-type">string</span>
        </dt>
        <dd>Dashboard title to which the dashboardDevice will be added</dd>
        <dt>widget
            <span class="property-type">string</span>
        </dt>
        <dd> Title that will have the widget containing the dashboard.</dd>
        
    </dl>

    <h3>Inputs</h3>

The node accepts in input JSON objects shaped as follows:

<pre>
    msg.payload = {
            "ordering": "dateObserved", 
			"query": "https://www.snap4city.org/superservicemap/api/v1/iot-search/?selection=42.014990;10.217347;43.7768;11.2515&model=metrotrafficsensor&valueFilters=vehicleFlow>0.5;vehicleFlow<300", 
            "actions": ["pin", "action1"],
            "columnsToShow": ["dateObserved", "vehicleFlow"]
    }
</pre>

    <h3>Outputs</h3>
    The node produces in output the payload of the received message as follows.

    <pre>
  msg.payload = {
            ordering: "dateObserved",
			query: "https://www.snap4city.org/superservicemap/api/v1/iot-search/?selection=42.014990;10.217347;43.7768;11.2515&model=metrotrafficsensor&valueFilters=vehicleFlow>0.5;vehicleFlow<300",
            action:"pin",
			"columnsToShow": ["dateObserved", "vehicleFlow"]
  }
</pre>

</script>