Checkbox & msg management in ui_template

Hello,
i would like manage 7 checkbox on dashboard, each one for any day of the week.
A msg value with 1 bit for any checkbox is the input value to manage.
Then a msg output with flag status will need to be manage, but this still a next step. I try to make the code but i'm not expert, so i ask your help to correct the code. (i apologise for errors, as i said i'm not sw engineer.)
thank for cooperation

<div>
<input type="checkbox" id="doso0Day0" >Su
<input type="checkbox" id="doso0Day1" >Mo
<input type="checkbox" id="doso0Day2" >Tu          
<input type="checkbox" id="doso0Day3" >We                    
<input type="checkbox" id="doso0Day4" >Th                              
<input type="checkbox" id="doso0Day5" >Fr
<input type="checkbox" id="doso0Day6" >Sa
</div>
<script>
    (function(scope) {
    // $watch fires each time the node is triggered in the flow
    scope.$watch('msg', function(msg) {
    if (msg.payload == 0) {
    move();
    }
    DosoWeek0 = msg.payload;
    
    if (DosoWeek0 & 1)
    document.getElementById('doso0Day0').checked = true ;
    else
    document.getElementById('doso0Day0').checked = false ;

    if (DosoWeek0 & 2)
    document.getElementById('doso0Day1').checked = true ;
    else
    document.getElementById('doso0Day1').checked = false ;

    if (DosoWeek0 & 4)
    document.getElementById('doso0Day2').checked = true ;
    else
    document.getElementById('doso0Day2').checked = false ;

    if (DosoWeek0 & 8)
    document.getElementById('doso0Day3').checked = true ;
    else
    document.getElementById('doso0Day3').checked = false ;

    if (DosoWeek0 & 16)
    document.getElementById('doso0Day4').checked = true ;
    else
    document.getElementById('doso0Day4').checked = false ;

    if (DosoWeek0 & 32)
    document.getElementById('doso0Day5').checked = true ;
    else
    document.getElementById('doso0Day5').checked = false ;

    if (DosoWeek0 & 64)
    document.getElementById('doso0Day6').checked = true ;
    else
    document.getElementById('doso0Day6').checked = false ;
    })
})(scope);
</script>

Maybe this will help, i used an array rather than bitwise operations.
I have stored the array in a context var.
When you change the check box the payload and is sent to node-red and that is used to update the context var.
I have only done first two inputs, i have also used a forEach loop to update the check boxes in the $watch.

[{"id":"b410bc875acd3074","type":"inject","z":"d1395164b4eec73e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[1,1,1,0,0,0,0]","payloadType":"json","x":472,"y":7761.000247001648,"wires":[["d9ca8de489e47385"]]},{"id":"d9ca8de489e47385","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"dosoWeek","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":652,"y":7761.000247001648,"wires":[["36bd392d84d9d92e"]]},{"id":"36bd392d84d9d92e","type":"ui_template","z":"d1395164b4eec73e","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<span>\n    <input \n        ng-model=\"dosoWeek0\" n\n        g-change=\"send({payload: dosoWeek0, id:0})\" \n        type=\"checkbox\" \n        id=\"doso0Day0\" \n    />Su\n\n<input ng-model=\"dosoWeek1\" ng-change=\"send({payload: dosoWeek1, id:1})\" type=\"checkbox\" id=\"doso0Day0\" />Mo\n<input type=\"checkbox\" id=\"doso0Day2\" />Tu          \n<input type=\"checkbox\" id=\"doso0Day3\" />We                    \n<input type=\"checkbox\" id=\"doso0Day4\" />Th                              \n<input type=\"checkbox\" id=\"doso0Day5\" />Fr\n<input type=\"checkbox\" id=\"doso0Day6\" />Sa\n</span>\n\n\n<script>\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            if(msg.payload){\n                msg.payload.forEach((dosoWeek, index) => {\n                    if (dosoWeek == 1){\n                        document.getElementById('doso0Day' + index).checked = true ;\n                    }else{\n                        document.getElementById('doso0Day' + index).checked = false ;\n                    }\n                })\n            }\n        });\n    })(scope)\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":802,"y":7761.000247001648,"wires":[["1551e37e02bf3dd7","61d33dd2aa80800a"]]},{"id":"1551e37e02bf3dd7","type":"debug","z":"d1395164b4eec73e","name":"debug 2485","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":972,"y":7761.000247001648,"wires":[]},{"id":"61d33dd2aa80800a","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"dosoWeek[msg.id]","pt":"flow","to":"$number($$.payload)","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"dosoWeek","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":882,"y":7821.000247001648,"wires":[["23b0728d85c4948f","d20931d7607a603f"]]},{"id":"23b0728d85c4948f","type":"debug","z":"d1395164b4eec73e","name":"debug 2486","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":912,"y":7861.000247001648,"wires":[]},{"id":"d20931d7607a603f","type":"ui_text","z":"d1395164b4eec73e","group":"8b5cde76.edd58","order":10,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":1052,"y":7821.000247001648,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
1 Like

Thank a lot

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.