mdkrieg · October 6, 2021 20:08
diff --git a/app.html b/app.html
 <html>
    <head>
        <title>ReQUI Example App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $("document").ready(initFlow);

            
            function initFlow(){
                var flow = $("#flow").html();
                window.flow = JSON.parse(flow);
                attachListeners();
            }
            
            const embeddedFunctions = { // embed the functions to the page rather than eval'ing the function text
                "0343157c19660dba": function(msg){
                    var header = [];
                    var data = [];

                    $("#myTable th").each(function(){
                        header.push($(this).html());
                    });
                    header = header.join(",");
                    
                    data.push(header);
                    $("#myTable tr").each(function(){
                        var row = [];
                        $(this).find("td input").each(function(){
                            row.push($(this).val());
                        });
                        row = row.join(",");
                        if(row.length > 0){
                            data.push(row);
                        }
                    })
                    console.log(data)
                    data = data.join("\r\n");
                    msg.payload = data;
                    return msg;
                }
            }

            const flowHandlers = {
                listener: function(node,msg){
                    msg = {};
                    $(node.query).on(node.trigger,()=>{send(node.wires[0],msg);});
                },
                template: function(node,msg){
                    msg.payload = node.template;
                    send(node.wires[0],msg);
                },
                append: function(node,msg){
                    var $new = $(msg.payload);
                    $(node.query).append($new);
                },
                function: function(node,msg){
                    msg = embeddedFunctions[node.id](msg);
                    console.log({msg})
                    send(node.wires[0],msg);
                },
                file: function(node,msg){
                    var content = msg.payload;
                    var c = document.createElement("a");
                    c.download = node.filename;

                    var t = new Blob([content], {
                        type: "text/plain"
                    });
                    c.href = window.URL.createObjectURL(t);
                    c.click();

                    send(node.wires[0],msg);
                }
            };

            function attachListeners(){
                var listeners = window.flow.filter(x=>{
                    return x.type == "listener";
                });
                listeners.forEach(flowHandlers.listener);
            }
            function getNodeById(id){
                return window.flow.filter(x=>{
                    return x.id == id;
                })[0];
            }
            function send(id,msg){
                id.forEach(xid=>{
                    var node = getNodeById(xid);
                    console.log(node);
                    flowHandlers[node.type](node,msg);
                })
            }
        </script>
        <style type='text/css'>
            #myTable{
                border: 1px solid #444;
            }
            #myTable th{
                width:200px;
            }
        </style>
    </head>
    <body>
        <div style="margin:auto;">
            <table id="myTable">
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                </tr>
            </table>
            <button class="add">Add Row</button>
            <button class="DL">Download</button>
        </div>
    </body>

    <script type="text/json" id="flow">
        
        [
        {
            "id": "7bb2769ccb257749",
            "type": "tab",
            "label": "Flow 1",
            "disabled": false,
            "info": ""
        },
        {
            "id": "e52d5fac34fdade7",
            "type": "listener",
            "z": "7bb2769ccb257749",
            "name": "ADD button listener",
            "trigger": "click",
            "query": "button.add",
            "x": 250,
            "y": 120,
            "wires": [
                [
                    "c380ac5910d38d76"
                ]
            ]
        },
        {
            "id": "c380ac5910d38d76",
            "type": "template",
            "z": "7bb2769ccb257749",
            "name": "",
            "field": "payload",
            "fieldType": "msg",
            "format": "handlebars",
            "syntax": "mustache",
            "template": "<tr>\n    <td><input type=\"text\"></td>\n    <td><input type=\"text\"></td>\n    <td><input type=\"text\"></td>\n</tr>",
            "output": "str",
            "x": 480,
            "y": 120,
            "wires": [
                [
                    "472959208dc6e30e"
                ]
            ]
        },
        {
            "id": "ce89141bfbd6a90d",
            "type": "file",
            "z": "7bb2769ccb257749",
            "name": "",
            "filename": "data.csv",
            "appendNewline": true,
            "createDir": false,
            "overwriteFile": "false",
            "encoding": "none",
            "x": 680,
            "y": 260,
            "wires": [
                []
            ]
        },
        {
            "id": "aae92123dca5e2d3",
            "type": "listener",
            "z": "7bb2769ccb257749",
            "name": "DL button listener",
            "trigger": "click",
            "query": "button.dl",
            "x": 240,
            "y": 260,
            "wires": [
                [
                    "0343157c19660dba"
                ]
            ]
        },
        {
            "id": "472959208dc6e30e",
            "type": "append",
            "z": "7bb2769ccb257749",
            "name": "append row",
            "query": "#myTable tbody",
            "x": 710,
            "y": 120,
            "wires": [
                []
            ]
        },
        {
            "id": "0343157c19660dba",
            "type": "function",
            "z": "7bb2769ccb257749",
            "name": "compileData",
            "func": "var header = [];\nvar data = [];\n\n$(\"#myTable th\").each(function(){\n    header.push($(this).html());\n});\nheader = header.join(\",\");\n\n$(\"#myTable tr\").each(function(){\n    var row = [];\n    $(this).find(\"td input\").each(function(){\n        row.push($(this).val());\n    });\n    row = row.join(\",\");\n    if(row.length > 0){\n        data.push(row);\n    }\n})\ndata = data.join(\"\\n\");\nmsg.payload = header + \"\\n\" + data;\nreturn msg;",
            "outputs": 1,
            "noerr": 0,
            "initialize": "",
            "finalize": "",
            "libs": [],
            "x": 470,
            "y": 260,
            "wires": [
                [
                    "ce89141bfbd6a90d"
                ]
            ]
        }
    ]
 </script>
 </html>
	<html>
	<head>
	<title>ReQUI Example App</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
	$("document").ready(initFlow);


	function initFlow(){
	var flow = $("#flow").html();
	window.flow = JSON.parse(flow);
	attachListeners();
	}

	const embeddedFunctions = { // embed the functions to the page rather than eval'ing the function text
	"0343157c19660dba": function(msg){
	var header = [];
	var data = [];

	$("#myTable th").each(function(){
	header.push($(this).html());
	});
	header = header.join(",");

	data.push(header);
	$("#myTable tr").each(function(){
	var row = [];
	$(this).find("td input").each(function(){
	row.push($(this).val());
	});
	row = row.join(",");
	if(row.length > 0){
	data.push(row);
	}
	})
	console.log(data)
	data = data.join("\r\n");
	msg.payload = data;
	return msg;
	}
	}

	const flowHandlers = {
	listener: function(node,msg){
	msg = {};
	$(node.query).on(node.trigger,()=>{send(node.wires[0],msg);});
	},
	template: function(node,msg){
	msg.payload = node.template;
	send(node.wires[0],msg);
	},
	append: function(node,msg){
	var $new = $(msg.payload);
	$(node.query).append($new);
	},
	function: function(node,msg){
	msg = embeddedFunctions[node.id](msg);
	console.log({msg})
	send(node.wires[0],msg);
	},
	file: function(node,msg){
	var content = msg.payload;
	var c = document.createElement("a");
	c.download = node.filename;

	var t = new Blob([content], {
	type: "text/plain"
	});
	c.href = window.URL.createObjectURL(t);
	c.click();

	send(node.wires[0],msg);
	}
	};

	function attachListeners(){
	var listeners = window.flow.filter(x=>{
	return x.type == "listener";
	});
	listeners.forEach(flowHandlers.listener);
	}
	function getNodeById(id){
	return window.flow.filter(x=>{
	return x.id == id;
	})[0];
	}
	function send(id,msg){
	id.forEach(xid=>{
	var node = getNodeById(xid);
	console.log(node);
	flowHandlers[node.type](node,msg);
	})
	}
	</script>
	<style type='text/css'>
	#myTable{
	border: 1px solid #444;
	}
	#myTable th{
	width:200px;
	}
	</style>
	</head>
	<body>
	<div style="margin:auto;">
	<table id="myTable">
	<tr>
	<th>Col1</th>
	<th>Col2</th>
	<th>Col3</th>
	</tr>
	</table>
	<button class="add">Add Row</button>
	<button class="DL">Download</button>
	</div>
	</body>

	<script type="text/json" id="flow">

	[
	{
	"id": "7bb2769ccb257749",
	"type": "tab",
	"label": "Flow 1",
	"disabled": false,
	"info": ""
	},
	{
	"id": "e52d5fac34fdade7",
	"type": "listener",
	"z": "7bb2769ccb257749",
	"name": "ADD button listener",
	"trigger": "click",
	"query": "button.add",
	"x": 250,
	"y": 120,
	"wires": [
	[
	"c380ac5910d38d76"
	]
	]
	},
	{
	"id": "c380ac5910d38d76",
	"type": "template",
	"z": "7bb2769ccb257749",
	"name": "",
	"field": "payload",
	"fieldType": "msg",
	"format": "handlebars",
	"syntax": "mustache",
	"template": "<tr>\n <td><input type=\"text\"></td>\n <td><input type=\"text\"></td>\n <td><input type=\"text\"></td>\n</tr>",
	"output": "str",
	"x": 480,
	"y": 120,
	"wires": [
	[
	"472959208dc6e30e"
	]
	]
	},
	{
	"id": "ce89141bfbd6a90d",
	"type": "file",
	"z": "7bb2769ccb257749",
	"name": "",
	"filename": "data.csv",
	"appendNewline": true,
	"createDir": false,
	"overwriteFile": "false",
	"encoding": "none",
	"x": 680,
	"y": 260,
	"wires": [
	[]
	]
	},
	{
	"id": "aae92123dca5e2d3",
	"type": "listener",
	"z": "7bb2769ccb257749",
	"name": "DL button listener",
	"trigger": "click",
	"query": "button.dl",
	"x": 240,
	"y": 260,
	"wires": [
	[
	"0343157c19660dba"
	]
	]
	},
	{
	"id": "472959208dc6e30e",
	"type": "append",
	"z": "7bb2769ccb257749",
	"name": "append row",
	"query": "#myTable tbody",
	"x": 710,
	"y": 120,
	"wires": [
	[]
	]
	},
	{
	"id": "0343157c19660dba",
	"type": "function",
	"z": "7bb2769ccb257749",
	"name": "compileData",
	"func": "var header = [];\nvar data = [];\n\n$(\"#myTable th\").each(function(){\n header.push($(this).html());\n});\nheader = header.join(\",\");\n\n$(\"#myTable tr\").each(function(){\n var row = [];\n $(this).find(\"td input\").each(function(){\n row.push($(this).val());\n });\n row = row.join(\",\");\n if(row.length > 0){\n data.push(row);\n }\n})\ndata = data.join(\"\\n\");\nmsg.payload = header + \"\\n\" + data;\nreturn msg;",
	"outputs": 1,
	"noerr": 0,
	"initialize": "",
	"finalize": "",
	"libs": [],
	"x": 470,
	"y": 260,
	"wires": [
	[
	"ce89141bfbd6a90d"
	]
	]
	}
	]
	</script>
	</html>