I am working on something similar to a To-Do list. In all aspects, it is exactly the same function. Except for one thing. A user is not physically adding new tasks with an input box and an Add button. Likewise, the user is not physically checking off the completed tasks.
Instead, the user is using a barcode scanner to scan a code. With the help of Node-Red, the scanned code is then used to fetch a To-Do list from a Sql Database, then the tasks are displayed on node-red-dashboard.
The user is now tasked to go complete each of the listed tasks in the generated To-Do list. In order to complete a task, the user must scan a barcode associated with a task. Each time a task is completed it should be visually checked off in the to-do list until all tasks are completed. Once all tasks are completed, the To-List is cleared and now the application is waiting for the user to scan a code to load a new To-List.
I have got this application working up to being able to check off individual tasks.
The hump I am not able to get over is checking off more than one individual task. I am able to check off one task, however, when the next task is scanned, the previous completed task becomes unchecked and the recent completed task is checked.
I understand why this method does not work, the function is overwriting the previous checked item with the most recent checked item. Is there some other way to accomplish this? I want to think that I could call a function in the ui template to accept a index then add a css style to a particular row.
var html = ""
var obj = flow.get('list')
for (var i = 0; i < obj.length; i++) {
//if scanned code equals current item in index, construct html to turn item green
if(msg.payload === obj[i].Value) {
html += "<tr style=\"background:green\">"+
"<td style=\"text-align: left; vertical-align: middle;\">"+obj[i].Type+"</td>"+
"<td style=\"text-align: center; vertical-align: middle;\">"+obj[i].Value+"</td>"+
"</tr>"
obj[i].Checked = "Yes"
continue
}
//if scanned code does not match current item in index, contruct html to keep item red
html += "<tr style=\"background:red\">"+
"<td style=\"text-align: left; vertical-align: middle;\">"+obj[i].Type+"</td>"+
"<td style=\"text-align: center; vertical-align: middle;\">"+obj[i].Value+"</td>"+
"</tr>"
}
flow.set('list',obj)
msg.html = html
return msg;
Template HTML:
<div>
<table class="componentTable">
<thead>
<tr>
<th>Type</th>
<th>Part Number</th>
</tr>
</thead>
<tbody ng-bind-html="msg.html | trusted">
</tbody>
</table>
</div>