Hello
I'm trying to make a simple schedule editor. But the problem is I can't send data from the template node.
Here's my flow:
[{"id":"ec96f91dfb1e17e0","type":"ui_template","z":"68076f3321e9d37c","group":"fffc367495eb6a2d","name":"","order":2,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html lang=\"pl\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Schedule</title>\n <style>\n table,\n th,\n td {\n border: 1px solid;\n border-collapse: collapse;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n }\n\n #day {\n color: #fde424;\n }\n\n .checkbox {\n min-width: 3em;\n min-height: 1.3em;\n }\n\n .day {\n background-color: #fde424;\n }\n .night {\n background-color: #281aed;\n }\n .off {\n background-color: #2e2d34;\n }\n </style>\n </head>\n <body>\n <div class=\"options\">\n <input type=\"radio\" name=\"mode\" id=\"day\" checked />\n <label for=\"day\">Dzień</label>\n <input type=\"radio\" name=\"mode\" id=\"night\" />\n <label for=\"night\">Noc</label>\n <input type=\"radio\" name=\"mode\" id=\"off\" />\n <label for=\"off\">Off</label>\n </div>\n <div class=\"container\">\n <table>\n <tr>\n <th></th>\n <th>pn</th>\n <th>wt</th>\n <th>śr</th>\n <th>czw</th>\n <th>pt</th>\n <th>sb</th>\n <th>nd</th>\n </tr>\n <tr class=\"row\">\n <th>0:00</th>\n </tr>\n <tr class=\"row\">\n <th>0:15</th>\n </tr>\n <tr class=\"row\">\n <th>0:30</th>\n </tr>\n <tr class=\"row\">\n <th>0:45</th>\n </tr>\n <tr class=\"row\">\n <th>1:00</th>\n </tr>\n <tr class=\"row\">\n <th>1:15</th>\n </tr>\n <tr class=\"row\">\n <th>1:30</th>\n </tr>\n <tr class=\"row\">\n <th>1:45</th>\n </tr>\n <tr class=\"row\">\n <th>2:00</th>\n </tr>\n <tr class=\"row\">\n <th>2:15</th>\n </tr>\n <tr class=\"row\">\n <th>2:30</th>\n </tr>\n <tr class=\"row\">\n <th>2:45</th>\n </tr>\n <tr class=\"row\">\n <th>3:00</th>\n </tr>\n <tr class=\"row\">\n <th>3:15</th>\n </tr>\n <tr class=\"row\">\n <th>3:30</th>\n </tr>\n <tr class=\"row\">\n <th>3:45</th>\n </tr>\n <tr class=\"row\">\n <th>4:00</th>\n </tr>\n <tr class=\"row\">\n <th>4:15</th>\n </tr>\n <tr class=\"row\">\n <th>4:30</th>\n </tr>\n <tr class=\"row\">\n <th>4:45</th>\n </tr>\n <tr class=\"row\">\n <th>5:00</th>\n </tr>\n <tr class=\"row\">\n <th>5:15</th>\n </tr>\n <tr class=\"row\">\n <th>5:30</th>\n </tr>\n <tr class=\"row\">\n <th>5:45</th>\n </tr>\n <tr class=\"row\">\n <th>6:00</th>\n </tr>\n <tr class=\"row\">\n <th>6:15</th>\n </tr>\n <tr class=\"row\">\n <th>6:30</th>\n </tr>\n <tr class=\"row\">\n <th>6:45</th>\n </tr>\n <tr class=\"row\">\n <th>7:00</th>\n </tr>\n <tr class=\"row\">\n <th>7:15</th>\n </tr>\n <tr class=\"row\">\n <th>7:30</th>\n </tr>\n <tr class=\"row\">\n <th>7:45</th>\n </tr>\n <tr class=\"row\">\n <th>8:00</th>\n </tr>\n <tr class=\"row\">\n <th>8:15</th>\n </tr>\n <tr class=\"row\">\n <th>8:30</th>\n </tr>\n <tr class=\"row\">\n <th>8:45</th>\n </tr>\n <tr class=\"row\">\n <th>9:00</th>\n </tr>\n <tr class=\"row\">\n <th>9:15</th>\n </tr>\n <tr class=\"row\">\n <th>9:30</th>\n </tr>\n <tr class=\"row\">\n <th>9:45</th>\n </tr>\n <tr class=\"row\">\n <th>10:00</th>\n </tr>\n <tr class=\"row\">\n <th>10:15</th>\n </tr>\n <tr class=\"row\">\n <th>10:30</th>\n </tr>\n <tr class=\"row\">\n <th>10:45</th>\n </tr>\n <tr class=\"row\">\n <th>11:00</th>\n </tr>\n <tr class=\"row\">\n <th>11:15</th>\n </tr>\n <tr class=\"row\">\n <th>11:30</th>\n </tr>\n <tr class=\"row\">\n <th>11:45</th>\n </tr>\n <tr class=\"row\">\n <th>12:00</th>\n </tr>\n <tr class=\"row\">\n <th>12:15</th>\n </tr>\n <tr class=\"row\">\n <th>12:30</th>\n </tr>\n <tr class=\"row\">\n <th>12:45</th>\n </tr>\n <tr class=\"row\">\n <th>13:00</th>\n </tr>\n <tr class=\"row\">\n <th>13:15</th>\n </tr>\n <tr class=\"row\">\n <th>13:30</th>\n </tr>\n <tr class=\"row\">\n <th>13:45</th>\n </tr>\n <tr class=\"row\">\n <th>14:00</th>\n </tr>\n <tr class=\"row\">\n <th>14:15</th>\n </tr>\n <tr class=\"row\">\n <th>14:30</th>\n </tr>\n <tr class=\"row\">\n <th>14:45</th>\n </tr>\n <tr class=\"row\">\n <th>15:00</th>\n </tr>\n <tr class=\"row\">\n <th>15:15</th>\n </tr>\n <tr class=\"row\">\n <th>15:30</th>\n </tr>\n <tr class=\"row\">\n <th>15:45</th>\n </tr>\n <tr class=\"row\">\n <th>16:00</th>\n </tr>\n <tr class=\"row\">\n <th>16:15</th>\n </tr>\n <tr class=\"row\">\n <th>16:30</th>\n </tr>\n <tr class=\"row\">\n <th>16:45</th>\n </tr>\n <tr class=\"row\">\n <th>17:00</th>\n </tr>\n <tr class=\"row\">\n <th>17:15</th>\n </tr>\n <tr class=\"row\">\n <th>17:30</th>\n </tr>\n <tr class=\"row\">\n <th>17:45</th>\n </tr>\n <tr class=\"row\">\n <th>18:00</th>\n </tr>\n <tr class=\"row\">\n <th>18:15</th>\n </tr>\n <tr class=\"row\">\n <th>18:30</th>\n </tr>\n <tr class=\"row\">\n <th>18:45</th>\n </tr>\n <tr class=\"row\">\n <th>19:00</th>\n </tr>\n <tr class=\"row\">\n <th>19:15</th>\n </tr>\n <tr class=\"row\">\n <th>19:30</th>\n </tr>\n <tr class=\"row\">\n <th>19:45</th>\n </tr>\n <tr class=\"row\">\n <th>20:00</th>\n </tr>\n <tr class=\"row\">\n <th>20:15</th>\n </tr>\n <tr class=\"row\">\n <th>20:30</th>\n </tr>\n <tr class=\"row\">\n <th>20:45</th>\n </tr>\n <tr class=\"row\">\n <th>21:00</th>\n </tr>\n <tr class=\"row\">\n <th>21:15</th>\n </tr>\n <tr class=\"row\">\n <th>21:30</th>\n </tr>\n <tr class=\"row\">\n <th>21:45</th>\n </tr>\n <tr class=\"row\">\n <th>22:00</th>\n </tr>\n <tr class=\"row\">\n <th>22:15</th>\n </tr>\n <tr class=\"row\">\n <th>22:30</th>\n </tr>\n <tr class=\"row\">\n <th>22:45</th>\n </tr>\n <tr class=\"row\">\n <th>23:00</th>\n </tr>\n <tr class=\"row\">\n <th>23:15</th>\n </tr>\n <tr class=\"row\">\n <th>23:30</th>\n </tr>\n <tr class=\"row\">\n <th>23:45</th>\n </tr>\n </table>\n </div>\n <md-button id=\"save\">Zapisz</md-button>\n\n <script type=\"text/javascript\">\n const schedule = []; // Variable I want to send\n const rows = document.querySelectorAll(\".row\");\n\n const createRow = (n) => {\n for (let i = 1; i <= 7; i++) {\n const cell = document.createElement(\"td\");\n const div = document.createElement(\"div\");\n div.classList = \"checkbox\";\n let day;\n if (i == 7) day = 0;\n else day = i;\n div.setAttribute(\"data-day\", day);\n div.setAttribute(\"data-hr\", n);\n cell.appendChild(div);\n rows[n].appendChild(cell);\n }\n };\n\n // CREATE TABLE ------------------------\n for (let i = 0; i < 96; i++) {\n const weekArray = [0, 0, 0, 0, 0, 0, 0];\n schedule[i] = weekArray;\n\n createRow(i);\n }\n // ---------------------------------------\n\n const checkboxes = document.querySelectorAll(\".checkbox\");\n const mode = document.getElementsByName(\"mode\");\n const save = document.getElementById(\"save\")\n let state = \"day\";\n\n const checkState = () => {\n for (let i = 0; i < mode.length; i++) {\n if (mode[i].checked) {\n state = mode[i].id;\n }\n }\n };\n\n const fillSchedule = (schedule) => {\n if (schedule.length != 96) {\n console.error(\"Wrong data\");\n return;\n }\n\n for (let i = 0; i < schedule.length; i++) {\n for (let j = 0; j < schedule[i].length; j++) {\n const savedState = schedule[i][j];\n const element = document.querySelector(\n `[data-day='${j}'][data-hr='${i}']`\n );\n switch (savedState) {\n case 0:\n element.classList.add(\"off\");\n break;\n case 1:\n element.classList.add(\"day\");\n break;\n case 2:\n element.classList.add(\"night\");\n break;\n }\n }\n }\n };\n\n const handleChange = (e) => {\n e.target.classList.remove(\"day\");\n e.target.classList.remove(\"off\");\n e.target.classList.remove(\"night\");\n e.target.classList.add(state);\n let day = e.target.getAttribute(\"data-day\");\n let hour = e.target.getAttribute(\"data-hr\");\n let numState = 0;\n switch (state) {\n case \"off\":\n numState = 0;\n break;\n case \"day\":\n numState = 1;\n break;\n case \"night\":\n numState = 2;\n break;\n }\n schedule[hour][day] = numState;\n };\n\n schedule[0][1] = 2;\n console.log(schedule);\n fillSchedule(schedule);\n\n for (let i = 0; i < mode.length; i++) {\n mode[i].addEventListener(\"change\", checkState);\n }\n\n for (let i = 0; i < checkboxes.length; i++) {\n checkboxes[i].addEventListener(\"mousedown\", (e) => {\n handleChange(e);\n });\n checkboxes[i].addEventListener(\"mouseover\", (e) => {\n if (e.buttons) {\n handleChange(e);\n }\n });\n }\n \n save.addEventListener(\"click\", ()=>{\n this.scope.send({payload: schedule})\n })\n \n // Here's the code that doesn't work\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload.match('check')) {\n alert(msg.payload);\n scope.send({payload: \"payload sent\"});\n }\n });\n })(scope);\n \n </script>\n </body>\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":300,"y":460,"wires":[["5263238797ed55b9"]]},{"id":"5263238797ed55b9","type":"debug","z":"68076f3321e9d37c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":460,"wires":[]},{"id":"ce9cb7b78948bffa","type":"ui_button","z":"68076f3321e9d37c","name":"","group":"fffc367495eb6a2d","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"check","payloadType":"str","topic":"topic","topicType":"msg","x":150,"y":460,"wires":[["ec96f91dfb1e17e0"]]},{"id":"fffc367495eb6a2d","type":"ui_group","name":"Temperatura","tab":"b0b5440f73fb87b5","order":1,"disp":true,"width":"8","collapse":false},{"id":"b0b5440f73fb87b5","type":"ui_tab","name":"Edycja","icon":"dashboard","order":2,"disabled":false,"hidden":true}]
I copied some code from Sending msg.payload from ui template - #3 by paulalsmith1000
