node-red-contrib-snap4city-user/dashboard-map.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('dashboard-map', {
        category: 'S4CDashboard',
        color: '#00a2d3',
        defaults: {
            selectedDashboardId: {
                value: "",
            },
            selectedWidgetId: {
                value: "",
            },
            flowName: {
                value: ""
            },
            authentication: {
                type: "snap4city-authentication",
                required: false
            },
            username: {
                value: ""
            },
            name: {
                value: "",
                required: true
            },
            dashboardId: {
                value: "",
                required: true
            },
            widgetId: {
                value: "",
                required: true
            },
            metricType: {
                value: "Series"
            },
            startValue: {
                value: 0
            },
            metricShortDesc: {
                value: ""
            },
            metricFullDesc: {
                value: ""
            },
            valueType: {
                value: "geoPoint",
                required: true
            }
        },
        inputs: 1,
        outputs: 1,
        outputLabels: ["gps coordinates"],
        icon: "gps.png",
        label: function () {
            return this.name || "dashboard-map";
        },
        paletteLabel: function () {
            return this.name || "dashboard-map";
        },
        align: 'right',
        oneditprepare: function () {
            $("#node-input-currentNodeId").val(this.id);
            var accessToken = getDashboardUserInfoAndCreateSelectionSelector();
            $("#node-input-authentication").change(function () {
                getDashboardUserInfoAndCreateSelectionSelector();
            });
            $('#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);
                                        getDashboardUserInfoAndCreateSelectionSelector();
                                    } 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");
                }
            });

            $("#node-input-dashboardId").change(function () {
                $.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 != "") {
                            username = _data.username;
                            accessToken = _data.accessToken;

                            if ($("#node-input-dashboardId").val() != null) {
                                $.ajax({
                                    url: "dashboardManagerBaseUrl",
                                    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.dashboardManagerBaseUrl = domain + "/dashboardSmartCity";
                                        }
                                        $.ajax({
                                            url: _data.dashboardManagerBaseUrl +
                                                "/api/nodeRedDashboardWidgetsApi.php?username=" + username + "&dashboardId=" + $("#node-input-dashboardId").val() + "&accessToken=" +
                                                accessToken,
                                            type: "GET",
                                            async: false,
                                            dataType: "json",
                                            success: function (_data) {
                                                createWidgetSelectionSelector(_data, username, accessToken);
                                            },
                                            error: function (err) {
                                                console.log(err);
                                            }
                                        });
                                    }

                                });
                            }
                        };
                    }
                });

            });

        },
        oneditsave: function () {
            $("#node-input-selectedDashboardId").val($("#node-input-dashboardId").val());
            $("#node-input-selectedWidgetId").val($("#node-input-widgetId").val());
        }
    });

    var getDashboardUserInfoAndCreateSelectionSelector = function () {
        var accessToken = "";
        var username = "";
        var dashboardList = "";

        $.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 == "") {
                    $("#selectDashboardContainer").hide();
                    $("#selectWidgetContainer").hide();
                    $("#selectWidgetName").hide();
                    $('#node-dashboard-view').hide();
                    $('#node-dashboard-edit').hide();
                    $('#tipAuthenticationWrong').show();
                    $('#tipAuthentication').hide();
                } else {
                    $("#selectDashboardContainer").show();
                    $("#selectWidgetContainer").show();
                    $("#selectWidgetName").show();
                    $('#node-dashboard-view').show();
                    $('#node-dashboard-edit').show();
                    $('#tipAuthenticationWrong').hide();
                    $('#tipAuthentication').show();
                    username = _data.username;
                    accessToken = _data.accessToken;
                };
            }
        });

        $("#node-input-username").val(username);
        refreshDashboardSelectionSelector(username, accessToken, dashboardList);
        return accessToken;
    };

    var refreshDashboardSelectionSelector = function (username, accessToken, dashboardList) {
        $("#node-input-dashboardId").empty();
        if (dashboardList != "") {
            createDashboardSelectionSelector(dashboardList);
        } else if (username != "" && accessToken != "" && dashboardList == "") {
            $.ajax({
                url: "dashboardManagerBaseUrl",
                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.dashboardManagerBaseUrl = domain + "/dashboardSmartCity";
                    }
                    $.ajax({
                        url: _data.dashboardManagerBaseUrl +
                            "/api/nodeRedDashboardsApi.php?v3&username=" + username + "&accessToken=" +
                            accessToken,
                        type: "GET",
                        async: true,
                        dataType: "json",
                        success: function (_data) {
                            createDashboardSelectionSelector(_data, username, accessToken);
                        },
                        error: function (err) {
                            $("#createNewDashboardTitle").click();
                            console.log(err);
                        }
                    });
                }
            });
        }
    }

    var createDashboardSelectionSelector = function (currentDashboardList, username, accessToken) {
        console.log(currentDashboardList);
        if (currentDashboardList.length != 0) {
            $('#node-dashboard-view').show();
            $('#node-dashboard-edit').show();
            $("#node-input-dashboardId").empty();
            var currentValue = $("#node-input-selectedDashboardId").val();
            for (var i = 0; i < currentDashboardList.length; i++) {
                $("<option value='" + currentDashboardList[i].id + "'>" +
                    decodeURI(currentDashboardList[i].title.replace(
                        /\+/g, " ")) + "</option>")
                    .appendTo($("#node-input-dashboardId"));

            }

            $("#node-input-dashboardId").val(currentValue);
            $("#node-input-dashboardId").trigger('change');
            $("#backDashboardTitle").click();

        } else {
            $("#createNewDashboardTitle").click();
        }
    }

    var createWidgetSelectionSelector = function (currentWidgetList, username, accessToken) {
        console.log(currentWidgetList);
        $("#node-input-widgetId").empty();
        var currentValue = $("#node-input-selectedWidgetId").val();
        for (var i = 0; i < currentWidgetList.length; i++) {
            if (currentWidgetList[i].type == "widgetMap") {
                $("<option value='" + currentWidgetList[i].widget_id + "'>" +
                    decodeURI(currentWidgetList[i].title.replace(
                        /\+/g, " ")) + "</option>")
                    .appendTo($("#node-input-widgetId"));
            }
        }
        $("#node-input-widgetId").val(currentValue);
        $("#node-input-name").val($("#node-input-widgetId option:selected").text());
    }
</script>

<script type="text/x-red" data-template-name="dashboard-map">
    <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-name">
    <input type="hidden" id="node-input-selectedDashboardId">
    <input type="hidden" id="node-input-selectedWidgetId">
    <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="selectWidgetContainer" >  
        <label for="node-input-widgetId">
            <i class="fa fa-dashboard"></i>Widget Name</label>
        <select id="node-input-widgetId" style="width: 55%;">
        </select>
    </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="dashboard-map">
    To know what to send as input to this node read the guide found <a href="https://www.snap4city.org/drupal/node/774">here</a>

    <p>With this node you can add a map to an existing dashboard or a new one created by the node. If a point in the map is clicked this node receives 
        the GPS coordinates of the point clicked on the map.
    </p>

    <h3>Configuration</h3>

    <dl class="message-properties">
        <dt>dashboard
            <span class="property-type">string</span>
        </dt>
        <dd>Dashboard title to which the map will be added</dd>
    </dl>

    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>GPS Coordinates and service uri
            <dl class="message-properties">
                <dd> Returns the GPS coordinates when the map is clicked or GPS coordinates and service uri when a device in the map is clicked</dd>
            </dl>
            <pre>
{
	"latitude": 43.75, 
	"longitude": 11.35,
	"serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO15"
}
            </pre>
        </li>
       
    </ol>
</script>