Ihave a small example where i can with MouseOver/Down select table cells.
Now i want the information wich cells are higlighted.
Call:
http://node-red-IP:1880/mysite
Is this possible that i check the checkboxes?
At the end i wanna make the input field not visible.
and my next question is how can i insert this page direct into the Dashboard?
here is my flow:
[{"id":"2bd58fd138a1157e","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"ce26f02687ebfd99","type":"http in","z":"2bd58fd138a1157e","name":"","url":"/mysite","method":"get","swaggerDoc":"","x":230,"y":240,"wires":[["76124fef0feca833"]]},{"id":"b22283647ae789a7","type":"http in","z":"2bd58fd138a1157e","name":"","url":"/mysitepost","method":"post","swaggerDoc":"","x":250,"y":440,"wires":[["5ced15da7ee3e926","0b591c3ac2f5dd77"]]},{"id":"76124fef0feca833","type":"function","z":"2bd58fd138a1157e","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":470,"y":240,"wires":[["837c29637f66cc20"]]},{"id":"5ced15da7ee3e926","type":"debug","z":"2bd58fd138a1157e","name":"mysitepost","active":true,"console":"false","complete":"payload","x":890,"y":440,"wires":[]},{"id":"08309480af7fb815","type":"http response","z":"2bd58fd138a1157e","name":"","x":910,"y":400,"wires":[]},{"id":"ef842b339380fcc9","type":"template","z":"2bd58fd138a1157e","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[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\ninput[type=\"checkbox\"] {\n//display: none;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}\n\ntable td {\nwidth:100px;\nheight:100px;\ntext-align:center;\nvertical-align:middle;\nbackground-color:#ccc;\nborder:1px solid #fff;\n}\n\ntable td.highlighted {\nbackground-color:#999;\n}","x":630,"y":340,"wires":[["348756352e2067ab"]]},{"id":"837c29637f66cc20","type":"template","z":"2bd58fd138a1157e","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$(function () {\n var isMouseDown = false,\n isHighlighted;\n $(\"#our_table td\")\n .mousedown(function () {\n isMouseDown = true;\n $(this).toggleClass(\"highlighted\");\n isHighlighted = $(this).hasClass(\"highlighted\");\n return false; \n })\n .mouseover(function () {\n if (isMouseDown) {\n $(this).toggleClass(\"highlighted\", isHighlighted);\n }\n })\n .bind(\"selectstart\", function () {\n return false;\n })\n\n $(document)\n .mouseup(function () {\n isMouseDown = false;\n });\n});","x":470,"y":340,"wires":[["ef842b339380fcc9"]]},{"id":"880766bc0dd7edf0","type":"http response","z":"2bd58fd138a1157e","name":"","x":910,"y":340,"wires":[]},{"id":"348756352e2067ab","type":"template","z":"2bd58fd138a1157e","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\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\n<table cellpadding=\"0\" cellspacing=\"0\" id=\"our_table\" border=\"1\">\n <thead>\n <tr>\n <th width=\"50px\">-</th>\n <th>1</th>\n <th>2</th>\n <th>3</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th>A</th>\n <td><input type=\"checkbox\" name=\"a_1\" value=\"a 1\">a 1</td>\n <td><input type=\"checkbox\" name=\"a_2\" value=\"a 2\">a 2</td>\n <td><input type=\"checkbox\" name=\"a_3\" value=\"a 2\">a 3</td>\n </tr>\n <tr>\n <th>B</th>\n <td><input type=\"checkbox\" name=\"b_1\" value=\"b 1\">b 1</td>\n <td><input type=\"checkbox\" name=\"b_2\" value=\"b 2\">b 2</td>\n <td><input type=\"checkbox\" name=\"b_3\" value=\"b 2\">b 3</td>\n </tr>\n <tr>\n <th>C</th>\n <td><input type=\"checkbox\" name=\"c_1\" value=\"c 1\">c 1</td>\n <td><input type=\"checkbox\" name=\"c_2\" value=\"c 2\">c 2</td>\n <td><input type=\"checkbox\" name=\"c_3\" value=\"c 2\">c 3</td>\n </tr>\n </tbody>\n</table>\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":770,"y":340,"wires":[["880766bc0dd7edf0"]]},{"id":"9f483d5a874507b0","type":"function","z":"2bd58fd138a1157e","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":640,"y":400,"wires":[["08309480af7fb815"]]},{"id":"31a44fa39641ce6c","type":"comment","z":"2bd58fd138a1157e","name":"Inject msg object properties","info":"","x":440,"y":200,"wires":[]},{"id":"0b591c3ac2f5dd77","type":"json","z":"2bd58fd138a1157e","name":"","x":450,"y":400,"wires":[["9f483d5a874507b0"]]},{"id":"8b8d8d78ec4ac3d0","type":"comment","z":"2bd58fd138a1157e","name":"Website","info":"","x":210,"y":160,"wires":[]},{"id":"239a876ea0698802","type":"comment","z":"2bd58fd138a1157e","name":"Form Submission","info":"","x":240,"y":380,"wires":[]}]