I have a table that is generated in a ui_template node that is causing me grief.
The object of this flow is to process alarms as they occur and add a date-time specifying when the alarm occured and then add the alarm to an array in the flow context.
The array is then sent to a ui_template node that builds a table using ng-repeat for the rows.
I added two ui_buttons that give the user the ability to acknowledge one alarm or all of them. Essentially removing one alarm (the newest) or all from the table.
This all works fine.
My grief started after I tried to implement a new feature that would allow the user to select which alarm they would like to acknowledge.
I added this code to the ui_template. Thank you krambriw for suggesting the scope in another post.
<script>
//Declare once to make scope available in functions
var theScope = scope;
var rowN = 0
$(document).on("click", "tr", function (e) {
rowN = $(e.currentTarget).index() + 1;
theScope.send({payload:rowN});
});
</script>
This works as well, sending the row number that was clicked back to my flow.
The problem is that once a row is clicked, all of the rows are cleared from the table.
However, if another alarm is added, the entire table populates again with all of the rows intact plus the new one.
Can anyone offer a clue to what could be happening?
[{"id":"b1343517.a70708","type":"inject","z":"613a1b01.3fefc4","name":"Detect Alarm","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":160,"wires":[["1af047bc.786c78"]]},{"id":"5645d088.ccedb","type":"moment","z":"613a1b01.3fefc4","name":"Add DateTime To msg","topic":"","input":"","inputType":"date","inTz":"America/Chicago","adjAmount":0,"adjType":"days","adjDir":"add","format":"M/D/YY h:mma ","locale":"en_US","output":"datetime","outputType":"msg","outTz":"America/Chicago","x":580,"y":160,"wires":[["44d2b282.bc179c"]]},{"id":"1010928d.d9c40d","type":"ui_button","z":"613a1b01.3fefc4","name":"","group":"9ddea0e7.40498","order":8,"width":"4","height":"2","passthru":true,"label":"Acknowledge","tooltip":"","color":"","bgcolor":"","icon":"","payload":"ack","payloadType":"str","topic":"","x":600,"y":250,"wires":[["44d2b282.bc179c"]]},{"id":"b7f1d06f.bb005","type":"ui_button","z":"613a1b01.3fefc4","name":"","group":"9ddea0e7.40498","order":8,"width":"4","height":"2","passthru":true,"label":"Acknowledge All","tooltip":"","color":"","bgcolor":"","icon":"","payload":"ackAll","payloadType":"str","topic":"","x":610,"y":300,"wires":[["44d2b282.bc179c"]]},{"id":"1af047bc.786c78","type":"change","z":"613a1b01.3fefc4","name":"Set Alarm Text & Topic","rules":[{"t":"set","p":"payload","pt":"msg","to":"Temperature High","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"Tank #2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":160,"wires":[["5645d088.ccedb"]]},{"id":"44d2b282.bc179c","type":"function","z":"613a1b01.3fefc4","name":"Process Alarms & Inputs","func":"let activeAlarms = flow.get('activeAlarms') || [];\n\nif(msg.payload === 'ack'){ // acknowledge button pressed\n \n activeAlarms.shift(); // remove first alarm in alarm array\n \n} else if(msg.payload === 'ackAll'){ // acknowledge all button pressed\n\n activeAlarms = []; // clear alarm array\n \n} else { // new alarm received\n\n let obj = {'message':msg.payload,'topic':msg.topic,'datetime':msg.datetime}\n activeAlarms.unshift(obj); // insert new alarm at beginning of alarm array\n\n}\n\nflow.set('activeAlarms', activeAlarms);\n\nmsg.payload = flow.get('activeAlarms');\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":160,"wires":[["387d2ee9.a99e62"]]},{"id":"387d2ee9.a99e62","type":"ui_template","z":"613a1b01.3fefc4","group":"9ddea0e7.40498","name":"Alarm Table","order":2,"width":"30","height":"11","format":"<style>\n\n .alarmDiv {\n width: 100%;\n height: 100%;\n background-color:rgb(128,0,1,0.2);\n }\n \n .alarmTable {\n width: 100%;\n background-color:rgb(128,0,1,0.2);\n cursor:pointer;\n }\n \n</style>\n\n<div class=\"alarmDiv\">\n\t<table class=\"alarmTable\" id=\"aT\">\n\t\t<thead class=\"alarmList\">\n\t\t\t<tr>\n\t\t\t <th style=\"background-color:#890000\">ID</th>\n\t\t\t <th style=\"background-color:#890000\">Topic</th>\n\t\t\t\t<th style=\"background-color:#890000\">Time Occured</th>\n\t\t\t\t<th style=\"background-color:#890000\">Description</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody class=\"alarmBody\">\n\t\t\t<tr ng-repeat=\"alarm in msg.payload | limitTo:10\">\n\t\t\t <td>{{alarm.id}}</td>\n\t\t\t <td>{{alarm.topic}}</td>\n\t\t\t\t <td>{{alarm.datetime}}</td>\n\t\t\t\t <td>{{alarm.message}}</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table> \n</div>\n\n<script>\n//Declare once to make scope available in functions\nvar theScope = scope;\nvar rowN = 0\n \n$(document).on(\"click\", \"tr\", function (e) {\n rowN = $(e.currentTarget).index() + 1;\n theScope.send({payload:rowN});\n});\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1070,"y":160,"wires":[["c6d9513b.c9053"]]},{"id":"c6d9513b.c9053","type":"debug","z":"613a1b01.3fefc4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1120,"y":240,"wires":[]},{"id":"9ddea0e7.40498","type":"ui_group","z":"","name":"Testing","tab":"eefe50d3.3cfcf","disp":true,"width":"30","collapse":false},{"id":"eefe50d3.3cfcf","type":"ui_tab","z":"","name":"Sandbox","icon":"dashboard","disabled":false,"hidden":false}]
