node-red-contrib-smartnode/extra/screen9225/screen9225.html

this project is a nodejs package for making the nodered support the Smart Device development. the pacakge require node-red enviroment.

<!--
  Copyright 2015 Maker Collider

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<script type="text/javascript">
    var files = [];
    var diff_files = [];
    var rules = [];
    RED.nodes.registerType('Screen9225', {
        category: 'Extra',
        color: '#E2D96E',
        defaults: {
            name: {value: "Screen9225", required: false},
            rules: {value:[]}
        },
        inputs: 1,
        outputs: 0,
        icon: "light.png",
        label: function() {
            return this.name || "Screen9225";
        },
        paletteLabel: function () {
            return this.name||this._("Screen9225.label.palette");
        },
        oneditprepare: function() {
            rules = this.rules;
            loadFrame();

            var operators = [];
            if (files){
                operators = files;
            }

            $("#node-input-add-file").click(function() {
                addSingleFileSelect();
            }); 

            function generateFileSelect(i,rule) {
                var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
                var row = $('<div/>').appendTo(container);
                $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);

                var selectField = $('<select/>',{style:"width:240px; margin-left: 5px; text-align: center;"}).appendTo(row);
                for (var d in operators) {
                    selectField.append($("<option></option>").val(operators[d].v).text(operators[d].t));
                }

                var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
                finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');

                var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
                $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);

                deleteButton.click(function() {
                    container.css({"background":"#fee"});
                    container.fadeOut(300, function() {
                        $(this).remove();
                        $("#node-input-file-container").children().each(function(i) {
                            $(this).find(".node-input-rule-index").html(i+1);
                        });

                    });
                });

                $("#node-input-file-container").append(container);

                selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
                selectField.change();

                selectField.click(function() {
                    appendNewOptions(this);
                });
            }    

            function switchDialogResize() {
                var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
                var height = $("#dialog-form").height();
                for (var i=0;i<rows.size();i++) {
                    height -= $(rows[i]).outerHeight(true);
                }
                var editorRow = $("#dialog-form>div.node-input-rule-container-row");
                height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
                $("#node-input-file-container-div").css("height",height+"px");
            };

            $( "#node-input-file-container" ).sortable({
                axis: "y",
                update: function( event, ui ) {
                    var rules = $("#node-input-file-container").children();
                    rules.each(function(i) {
                        $(this).find(".node-input-rule-index").html(i+1);
                    });
                },
                handle:".node-input-rule-handle",
                cursor: "move"
            });
            $( "#node-input-file-container .node-input-rule-handle" ).disableSelection();

            $( "#dialog" ).on("dialogresize", switchDialogResize);
            $( "#dialog" ).one("dialogopen", function(ev) {
                var size = $( "#dialog" ).dialog('option','sizeCache-switch');
                if (size) {
                    $("#dialog").dialog('option','width',size.width);
                    $("#dialog").dialog('option','height',size.height);
                    switchDialogResize();
                }
            });
            $( "#dialog" ).one("dialogclose", function(ev,ui) {
                $( "#dialog" ).off("dialogresize",switchDialogResize);
            });
        },
        oneditsave: function() {
            var rules = $("#node-input-file-container").children();
            var ruleset;
            var node = this;
            node.rules= [];
            rules.each(function(i) {
                var rule = $(this);
                var val = rule.find("select option:selected").val();
                var text = rule.find("select option:selected").text();
                var id = parseInt(i)+1;
                var r = {t:text,v:val,id:id};
                node.rules.push(r);
            });

            console.log(node.rules);
        }
    });

    //load frame
    var host = window.location.host;
    var web_url = 'http://'+host.replace(/1880/, "3000");

    function loadFrame(){
        $('#frmUpload').attr('src',web_url);
        getFilesList();
    }

    function getFilesList(){
        $.ajax({
            url: web_url+'/getfiles',
            type: 'GET',
            dataType: "json",
            cache: false,
            success: function(data){
                if (200 === data.code) {

                    files = data.msg;
                    for (var i in rules){
                        generateMultiFileSelect(parseInt(i)+1,rules[i]);
                    }
                } 
            },
            error: function(){}
        });
    }

    function addSingleFileSelect(){
        $.ajax({
            url: web_url+'/getfiles',
            type: 'GET',
            dataType: "json",
            cache: false,
            success: function(data){
                if (200 === data.code) {
                    files = data.msg;                    
                    var j = 0;
                    $("#node-input-file-container").children().each(function(i) {
                        j++;
                    });
                    generateSingleFileSelect(parseInt(j)+1,files); 
                } 
            },
            error: function(){}
        });
    }

    function appendNewOptions(selectField){
        $.ajax({
            url: web_url+'/getfiles',
            type: 'GET',
            dataType: "json",
            cache: false,
            success: function(data){
                if (200 === data.code) {
                    files = data.msg;

                    var curr_files=[];
                    $(selectField).children("option").each(function(){
                        curr_files.push($(this).val());

                    });
                    for (var d in files) {
                        var flag = true;
                        for (var c in curr_files) { 
                            if (curr_files[c] == files[d].v){
                                flag = false;
                            }

                        }
                        if (flag) {
                            diff_files.push(files[d]);
                        }
                    }
                    
                    for (var d in diff_files) { 
                        console.log(diff_files[d].v);
                        $(selectField).append($("<option></option>").val(diff_files[d].v).text(diff_files[d].t));
                    }

                    diff_files = [];
                } 
            },
            error: function(){}
        });
    }


    function generateMultiFileSelect(i,rule) {
        var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
        var row = $('<div/>').appendTo(container);
        $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
    
        var selectField = $('<select/>',{style:"width:240px; margin-left: 5px; text-align: center;"}).appendTo(row);
        for (var d in files) {
            selectField.append($("<option></option>").val(files[d].v).text(files[d].t));
        }
    
        var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
        finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
    
        var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
        $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
    
        deleteButton.click(function() {
            container.css({"background":"#fee"});
            container.fadeOut(300, function() {
                $(this).remove();
                $("#node-input-file-container").children().each(function(i) {
                    $(this).find(".node-input-rule-index").html(i+1);
                });
    
            });
        });
    
        $("#node-input-file-container").append(container);
    
        selectField.find("option").filter(function() {return $(this).val() == rule.v;}).attr('selected',true);
        selectField.change();

        selectField.click(function() {
            appendNewOptions(this);
        });
    }


    function generateSingleFileSelect(i,_files) {
        var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
        var row = $('<div/>').appendTo(container);
        $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
    
        var selectField = $('<select/>',{style:"width:240px; margin-left: 5px; text-align: center;"}).appendTo(row);
        for (var d in _files) {
            selectField.append($("<option></option>").val(_files[d].v).text(_files[d].t));
        }
    
        selectField.click(function() {
            appendNewOptions(this);
        });

        selectField.change();

        var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
        finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
    
        var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
        $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
    
        deleteButton.click(function() {
            container.css({"background":"#fee"});
            container.fadeOut(300, function() {
                $(this).remove();
                $("#node-input-file-container").children().each(function(i) {
                    $(this).find(".node-input-rule-index").html(i+1);
                });
    
            });
        });
    
        $("#node-input-file-container").append(container);
    }

</script>

<script type="text/x-red" data-template-name="Screen9225">
    <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 node-input-rule-container-row" style="margin-bottom: 0px;">
        <div id="node-input-file-container-div" style="box-sizing: border-box; border-radius: 5px; height: 250px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
            <ol id="node-input-file-container" style=" list-style-type:none; margin: 0;">
            </ol>
        </div>
    </div>
    <div class="form-row">
        <a href="#" class="editor-button editor-button-small" id="node-input-add-file" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span>files list</span></a>
    </div>
    <div class="form-row">
        <iframe id="frmUpload" src="" frameborder="0" width="100%" height="30" scrolling="no" >                                 
        </iframe>   
    </div>
</script>

<script type="text/x-red" data-help-name="Screen9225">
    <p>A Node-RED node for button,need digital pin</p>
</script>