-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathControlWebsite
1 lines (1 loc) · 5.34 KB
/
ControlWebsite
1
[{"id":"aa556e1c.05cb3","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"96ea5f3a.4efe1","type":"http in","z":"aa556e1c.05cb3","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":450,"y":380,"wires":[["d9da02eb.7bd26"]]},{"id":"3a9addd1.0881f2","type":"http in","z":"aa556e1c.05cb3","name":"","url":"/mysitepost","method":"post","upload":false,"swaggerDoc":"","x":470,"y":580,"wires":[["120f1de3.8d5772","2265f01d.779df"]]},{"id":"d9da02eb.7bd26","type":"function","z":"aa556e1c.05cb3","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":690,"y":380,"wires":[["c803e8e2.ca91e8"]]},{"id":"120f1de3.8d5772","type":"debug","z":"aa556e1c.05cb3","name":"mysitepost","active":true,"console":"false","complete":"payload","x":1110,"y":580,"wires":[]},{"id":"254285de.0abbea","type":"http response","z":"aa556e1c.05cb3","name":"","statusCode":"","headers":{},"x":1130,"y":540,"wires":[]},{"id":"9c087b56.efe908","type":"template","z":"aa556e1c.05cb3","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=text], select {\n width: 100%;\n padding: 12px 20px;\n margin: 8px 0;\n display: inline-block;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\ninput[type=submit] {\n width: 100%;\n background-color: #4CAF50;\n color: white;\n padding: 14px 20px;\n margin: 8px 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\ninput[type=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}","x":850,"y":480,"wires":[["14219954.4850b7"]]},{"id":"c803e8e2.ca91e8","type":"template","z":"aa556e1c.05cb3","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\n \n $(\"#loadingimg\").show();\n \n $.ajax({\n url: form_url, \n type: form_method, \n data: form_data, \n cache: false,\n success: function(returnhtml){ \n $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});","x":690,"y":480,"wires":[["9c087b56.efe908"]]},{"id":"758c1643.99d368","type":"http response","z":"aa556e1c.05cb3","name":"","statusCode":"","headers":{},"x":1130,"y":480,"wires":[]},{"id":"14219954.4850b7","type":"template","z":"aa556e1c.05cb3","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n\n<div>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <label for=\"speed\">Speed (between 0 and 100):</label>\n <input type=\"range\" id=\"speed\" name=\"speed\" min=\"0\" max=\"100\">\n <input type=\"submit\" value=\"Submit\">\n </form>\n</div>\n<div>\n <span id=\"result\"></span>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":990,"y":480,"wires":[["758c1643.99d368"]]},{"id":"11932ae1.6b9715","type":"comment","z":"aa556e1c.05cb3","name":"Login Form","info":"","x":650,"y":440,"wires":[]},{"id":"dadae3be.f5cac","type":"function","z":"aa556e1c.05cb3","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":860,"y":540,"wires":[["254285de.0abbea"]]},{"id":"f6f2047b.805f58","type":"comment","z":"aa556e1c.05cb3","name":"Inject msg object properties","info":"","x":660,"y":340,"wires":[]},{"id":"2265f01d.779df","type":"json","z":"aa556e1c.05cb3","name":"","property":"payload","action":"","pretty":false,"x":670,"y":540,"wires":[["dadae3be.f5cac"]]},{"id":"f3c5c04e.b0f71","type":"comment","z":"aa556e1c.05cb3","name":"Website","info":"","x":430,"y":300,"wires":[]},{"id":"9b3ad095.99d58","type":"comment","z":"aa556e1c.05cb3","name":"Form Submission","info":"","x":460,"y":520,"wires":[]},{"id":"59854863.9b5478","type":"comment","z":"aa556e1c.05cb3","name":"Node-RED Public Site - README","info":"This Flow demonstrates how to create\na simple frontend webpage with Node-RED.\n\nThe public facing page consists of the \nclient side JavaScript, CSS and HTML. \n\nThe important technique is how the mustache \ntemplates are used. Each template will set the\n\"property\" relative to the content. \n\nThe CSS node sets the \"msg.payload.style\" property.\nThe JavaScript node sets the \"msg.payload.script\" property.\nThe HTML node then includes these properties \n<script>{{{payload.script}}}</script>\n<style>{{{payload.style}}}</style>\n\n\nThis example was created by http://www.InternetofLEGO.com\n\n","x":760,"y":200,"wires":[]}]