node-red-contrib-snap4city-user/dashboard-form.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('dashboardForm', {
        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
            },
            dashboardFormOrderedList: { value: [] },
            domainType: {
                value: "singleNumericValue",
                required: true
            }
        },
        inputs: 1,
        outputs: 1,
        outputLabels: ["selection"],
        icon: "dashboardForm.png",
        label: function () {
            return this.name || "form";
        },
        paletteLabel: function () {
            return this.name || "form";
        },
        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");
                }
            });

            $("#node-input-dashboardFormOrderedList-container").css('min-height', '300px').css('min-width', '300px').css('width', '80%').editableList({
                addItem: function (container, i, opt) {
                    if (!opt.hasOwnProperty('p')) {
                        opt.p = {};
                    }
                    var dashboardFormItem = opt.p;

                    container.css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    });


                    var row = $('<div/>').appendTo(container);
                    
					// Label
					
					var labelField = $('<input/>', { class: "node-input-dashboardFormOrderedList-label", type: "text", style: "margin-left: 5px;width: 24%;", placeholder: "Label" }).appendTo(row);
                    if (typeof dashboardFormItem.label != "undefined" && dashboardFormItem.label != "") {
                        labelField.val(dashboardFormItem.label);
                    }
					
					// Type
					
					var typeField = $('<select/>', { class: "node-input-dashboardFormOrderedList-type", type: "text", style: "margin-left:5px; width:24%" }).appendTo(row);
					var arr = [
                        { val: "text", text: "text" },
                        { val: "number", text: "number" },
                        { val: "email", text: "email" },
                        { val: "password", text: "password" },
                        { val: "checkbox", text: "checkbox" },
                        { val: "switch", text: "switch" },
                        { val: "date", text: "date" },
                        { val: "time", text: "time" }
                    ];
                    $(arr).each(function () {
                        var isSelected = false;
                        if (dashboardFormItem.type == this.val) {
                            isSelected = true;
                        }
                        typeField.append($("<option>").attr('value', this.val).text(this.text).prop('selected', isSelected));
                    });
					
					// Value
					
					var valueField = null;					
                    if("checkbox" == typeField.val()) {
						valueField = $('<select/>', { class: "node-input-dashboardFormOrderedList-value", type: "text", style: "margin-left:5px; width:24%" }).appendTo(row);
						valueField.append($("<option>").attr('value', '').text(''));
						valueField.append($("<option>").attr('value', 'checked').text('checked').prop('selected', Boolean(dashboardFormItem.value)));						
					}
					else if("switch" == typeField.val()) {
						valueField = $('<select/>', { class: "node-input-dashboardFormOrderedList-value", type: "text", style: "margin-left:5px; width:24%" }).appendTo(row);
						valueField.append($("<option>").attr('value', '').text(''));
						valueField.append($("<option>").attr('value', 'on').text('on').prop('selected', Boolean(dashboardFormItem.value)));						
					}
					else {
						valueField = $('<input/>', { class: "node-input-dashboardFormOrderedList-value", type: "text", style: "margin-left: 5px;width: 24%;", placeholder: "Value" }).appendTo(row);
						if (typeof dashboardFormItem.value != "undefined" && dashboardFormItem.value != "") {
							valueField.val(dashboardFormItem.value);
						}
					}

					// Required 
					
                    var requiredLabel = $('<span/>', {style: "margin-left:10px; width:16%"}).appendTo(row);
                    requiredLabel.html("Required");
					var required = $('<input/>', { class: "node-input-dashboardFormOrderedList-required", type: "checkbox", style: "margin-bottom:6px; width:6%;", checked: dashboardFormItem.required}).appendTo(row);					
					
                },
                removable: true,
                addButton: true
            });

            for (var i = 0; i < this.dashboardFormOrderedList.length; i++) {
                var dashboardFormItem = this.dashboardFormOrderedList[i];
                $("#node-input-dashboardFormOrderedList-container").editableList('addItem', { p: dashboardFormItem, i: i });
            }
        },
        oneditsave: function () {
            $("#node-input-selectedDashboardId").val($("#node-input-dashboardId").val());
            var dashboardFormOrderedList = $("#node-input-dashboardFormOrderedList-container").editableList('items');
            var node = this;
            node.dashboardFormOrderedList = [];
            dashboardFormOrderedList.each(function (i) {
                var dashboardFormItem = $(this);
                var p = {};
                p.label = dashboardFormItem.find(".node-input-dashboardFormOrderedList-label").val();
                p.value = dashboardFormItem.find(".node-input-dashboardFormOrderedList-value").val();
                p.type = dashboardFormItem.find(".node-input-dashboardFormOrderedList-type").val();
                p.required = dashboardFormItem.find(".node-input-dashboardFormOrderedList-required").is(":checked");
                node.dashboardFormOrderedList.push(p);
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="dashboardForm">
    <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 node-input-dashboardFormOrderedList-container-row">
        <ol id="node-input-dashboardFormOrderedList-container"></ol>
    </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="dashboardForm">
    <p>With this node you can add a dashboardForm 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 dashboardForm will be added</dd>
        <dt>widget
            <span class="property-type">string</span>
        </dt>
        <dd> Title that will have the widget containing the dashboardForm.</dd>
        
    </dl>

    <h3>Inputs</h3>

The node accepts in input JSON objects shaped as follows:

<pre>
    {
        "form": {
            "options": [
                {
                    "label": "enter text",
                    "value": "",
                    "type": "text",
                    "required": true
                },
                {
                    "label": "enter number",
                    "value": "",
                    "type": "number",
                    "required": false
                },
                {
                    "label": "enter email",
                    "value": "",
                    "type": "email",
                    "required": false
                },
                {
                    "label": "enter password",
                    "value": "",
                    "type": "password",
                    "required": false
                },
                {
                    "label": "enter check",
                    "value": "checked",
                    "type": "checkbox",
                    "required": true
                },
                {
                    "label": "enter switch",
                    "value": "on",
                    "type": "switch",
                    "required": false
                },
                {
                    "label": "enter date",
                    "value": "",
                    "type": "date",
                    "required": false
                },
                {
                    "label": "enter time",
                    "value": "",
                    "type": "time",
                    "required": true
                }
            ],
            "selected": []
        }
    }

</pre>

    <h3>Outputs</h3>
    The node produces in output the payload of the received message (the hidden value associated with the writing that the user has clicked on the widget).

</script>