Change colour of widget in dashboard

Hi,

I am using a template node to put together a dashboard. I have a button which is styled:
class="md-raised nr-dashboard-form-button md-button md-ink-ripple"

The colour of the button is defined in the node-red dashboard style sheet as:
@widgetBackgroundColor: #4FBAE4;

is it possible to override this colour in my own styles? I have a section in my template. I have tried setting it there but nothing happens. Be nice to know if it is possible.

Thanks

Martyn

Yes in the dashboard sidebar site tab you can turn off the theme for templates

1 Like

Thanks for that.

Hi Again,

I have switched so it says Angular themes in ui_template. However, this is still not changing the styling. I suspect that I can't easily achieve what I am after. But maybe someone has a suggestion.

I have a button which is defined as:

<button class="md-raised nr-dashboard-form-button md-button md-ink-ripple" id="shd-set" style="margin:0 0 0 -1px; width: 73px; " ng-click="send(save())">SET</button>

It comes out in the theme colour.

I would like to make the button change colour to indicate that a setting has changed and needs to be saved.

So I thought that I could add the style

<style>
    #shd-set .redbtn  {
    	background-color: red;
	    color: white;
    }
    
    #shd-set:hover .redbtn {
	    background-color: #de9090!important;
    }
</style>

and use jquery to add the class redbtn into the definition

<button class="redbtn md-raised nr-dashboard-form-button md-button md-ink-ripple" id="shd-set" style="margin:0 0 0 -1px; width: 73px; " ng-click="send(save())">SET</button>

The styling works when i remove the class selector from it but doesn't work with the class selector.

I am probably doing something daft but I can't see it now? If anyone has any ideas that would be very helpful

here is my complete flow if that helps:

[{"id":"de76e056.a3ba7","type":"tab","label":"Scheduler","disabled":false,"info":""},{"id":"cb9fa2c4.12ef5","type":"ui_template","z":"de76e056.a3ba7","group":"e1673405.ab8328","name":"Schedule Item","order":1,"width":6,"height":10,"format":"<style>\n    #shd-set .redbtn  {\n    \tbackground-color: red;\n\t    color: white;\n    }\n    \n    #shd-set:hover .redbtn {\n\t    background-color: #de9090!important;\n    }\n</style>\n\n<div class=\"container\" style=\"margin:-5px 0 0 10px; padding:0;\">\n    <table id=\"shd-itm\">\n        <tr><td><input type=\"text\" id=\"shd-tag\" value=\"\" style=\"width: 170px;\"><label class=\"valLable\">Tag</label></td></tr>\n        <tr><td><input type=\"time\" class=\"valHour\" id=\"shd-st\" value=\"\" ><label for=\"shd-st\" class=\"valLable\">Start time</label></td></tr>\n    \t<tr><td><input type=\"text\" class=\"valMedium\" id=\"shd-st-v\" value=\"\"><label class=\"valLable\">Start Value</label></td></tr>\n    \t<tr><td><input type=\"time\" class=\"valHour\" id=\"shd-et\"  value=\"\"><label for=\"shd-et\" class=\"valLable\">End time</label></td></tr>\n    \t<tr><td><input type=\"text\" class=\"valMedium\" id=\"shd-et-v\" value=\"\"><label class=\"valLable\">End Value</label>\n    \t<br>\n    \t</td></tr>\n        <tr><td>\n            <label class=\"yLable\">Day of the week</label><br><br>\n    \t\t<input type=\"checkbox\" id=\"shd-dow-1\" class=\"dow\"><label for=\"shd-dow-1\">Mon</label>\t\n    \t\t<input type=\"checkbox\" id=\"shd-dow-2\" class=\"dow\"><label for=\"shd-dow-2\"  style=\"padding-right:14px !important; margin-left:0px !important;\">Tue</label>\n    \t\t<input type=\"checkbox\" id=\"shd-dow-3\" class=\"dow\"><label for=\"shd-dow-3\">Wed</label>\n    \t\t<input type=\"checkbox\" id=\"shd-dow-4\" class=\"dow\"><label for=\"shd-dow-4\">Thrs</label>\n    \t\t<br><br>\n    \t</td></tr>\n    \t<tr><td>\n    \t\t<input type=\"checkbox\" id=\"shd-dow-5\" class=\"dow\"><label for=\"shd-dow-5\" style=\"padding-right:23px !important;\">Fri</label>\n    \t\t<input type=\"checkbox\" id=\"shd-dow-6\" class=\"dow\"><label for=\"shd-dow-6\" style=\"padding-right:17px !important; margin-left:0px !important;\">Sat</label>\n    \t    <input type=\"checkbox\" id=\"shd-dow-0\" class=\"dow\"><label for=\"shd-dow-0\" style=\"padding-right:14px !important; margin-left:0px !important;\">Sun</label>\n            <br>\n        </td></tr>\n    \t<tr><td>\n    \t   <br><input type=\"date\" id=\"shd-StartDate\" style=\"width: 145px\" value=\"\"><label class=\"valLable\" >Start</label>\n    \t   <input type=\"date\" id=\"shd-EndDate\" style=\"width: 145px\" value=\"\"><label class=\"valLable\" >End</label>\n    \t   <br>\n        </td></tr>\n    </table>\n    <table style=\"margin-top: 10px;\">\n    \t<tr>\n    \t <td>\n    \t   <input type=\"checkbox\" id=\"shd-disabled\" class=\"dis\" style=\"width: 110px;\"><label for=\"shd-disabled\">Disable</label>\n         </td>\n         <td>\n            <button class=\"redbtn md-raised nr-dashboard-form-button md-button md-ink-ripple\" id=\"shd-set\" style=\"margin:0 0 0 -1px; width: 73px; \" ng-click=\"send(save())\">SET</button>\n        </td></tr>\n\t</table>\n\t<textarea id=\"shdMsg\" rows=\"3\" cols=\"28\" style=\"margin-top: 10px !important; padding: 5px; border:0; background: #24323B; color: #CBC5C5; font-size: 0.8em;\"></textarea>\n\t<input type=\"hidden\" id=\"shd-id\" value=\"\">\n\t<div ng-init=\"init()\" style=\"display: none;\"></div>\n</div>\n<script>\n\nvar onInit = false;  // catch unwanted msg when flow is deployed\n\n(function(scope) {\n\n  scope.init = function () {\n//    console.log('oninit');\n    // not used stub\n  };\n  \n  scope.$watch('msg', function(msg) {\n    if (msg) {\n//        console.log('pl:'+msg.payload+' msgtype: '+msg.msgType);\n        if(\tmsg.msgType ===  'Schedule' && onInit === false){\n\n            $('#shd-tag').val(msg.payload.tag);\n            $('#shd-st').val(msg.payload.ontime);\n    \t    $('#shd-st-v').val(msg.payload.onpayload);\n            $('#shd-et').val(msg.payload.offtime);\n            $('#shd-et-v').val(msg.payload.offpayload);\n            \n            for (dow = 0; dow < 7; dow++) {\n    \t\t\tvar  dowUI = '#shd-dow-'+dow;\n    \t\t\tif (msg.payload.dofWeek[dow]==1){\n    \t\t\t\t$(dowUI).prop( \"checked\", true );\n    \t\t\t} else {\n    \t\t\t\t$(dowUI).prop( \"checked\", false );\n    \t\t\t}\n            }\n            \n            $('#shd-StartDate').val(msg.payload.StartDate);\n            $('#shd-st').css({\"background-color\": \"#FFFFFF\"});\n            $('#shd-et').css({\"background-color\": \"#FFFFFF\"});\n            if(msg.payload.shedState === 1 || msg.payload.shedState === 2){$('#shd-st').css({\"background-color\": \"#E7E7E7\"});}\n            $('#shd-EndDate').val(msg.payload.EndDate);\n            if(msg.payload.shedState === 2){$('#shd-et').css({\"background-color\": \"#E7E7E7\"});}\n            \n            if(msg.payload.disabled ===  true){\n    \t        $('#shd-disabled').prop( \"checked\", true);\n            } else {\n                $('#shd-disabled').prop( \"checked\", false); \n            }\n            \n            $('#shd-id').val(msg.payload.id);\n            \n        } else if (onInit === true){onInit = false;}\n    }\n  });\n  \n  this.scope.save = function(){\n    var obj = {id:null, tag: null, ontime: null, onpayload: null, offtime: null, offpayload: null, dofWeek: [], StartDate: null, EndDate: null, suspended: null};\n    obj.id         = $('#shd-id').val();\n    obj.tag        = $('#shd-tag').val();\n    obj.ontime     = $('#shd-st').val();\n\tobj.onpayload  = $('#shd-st-v').val();\n    obj.offtime    = $('#shd-et').val();\n    obj.offpayload = $('#shd-et-v').val();\n    \n    for (dow = 0; dow< 7; dow++) {\n\t\tvar dowUI = '#shd-dow-'+dow;\n\t\tif($(dowUI).prop( \"checked\")){\n\t\t\tobj.dofWeek[dow] = 1 ;\n\t\t} else {\n\t\t\tobj.dofWeek[dow] = 0 ;\n\t\t}\n\t}\n\t\n\tif ($('#shd-StartDate').val() == \"\"){\n        obj.StartDate = null;\n\t} else {\n\t    obj.StartDate = $('#shd-StartDate').val();\n\t}\n\n\tif ($('#shd-EndDate').val() == \"\"){\n        obj.EndDate = null;\n\t} else {\n        obj.EndDate   = $('#shd-EndDate').val();\n\t}\n\t\n    if($('#shd-disabled').prop( \"checked\")){\n\t\tobj.suspended = true ;\n\t} else {\n\t\tobj.suspended = false ;\n\t}\n\t\n//\t$('#shd-set').css('background-color','blue');\n\tconsole.log($('#shd-set')[0].classList);\n//    console.log(\"pl:\"+obj.tag);\n    return msg = {payload: obj, topic: Date.now()};\n  }\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":610,"y":220,"wires":[["45ff2311.8d62fc","c19183de.4c4a7"]],"info":"Dsiplays a shedule item config"},{"id":"ba847b8a.b36ff8","type":"schedex","z":"de76e056.a3ba7","name":"Timer01","passthroughunhandled":true,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"1","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"0","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":40,"wires":[["95c7578.5bca7a8"]]},{"id":"e84aa579.a671a8","type":"function","z":"de76e056.a3ba7","name":"get item","func":"var shed = flow.get('schedule','file');\n//var shedState = flow.get('scheduledState','file');\nvar idx = msg.payload.split('-');\nmsg.topic = msg.payload;\n//msg.payload = JSON.stringify(shed[msg.payload]);\nmsg.payload = shed[msg.payload];\nmsg.msgType =  'Schedule';\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":220,"wires":[["cb9fa2c4.12ef5"]],"icon":"font-awesome/fa-database","info":"This node get the config of selected shedule item.\nNode input comes from selected shedule item ui template.\nOutput is passed to shedule item template."},{"id":"c19183de.4c4a7","type":"function","z":"de76e056.a3ba7","name":"update","func":"var _keyNo = parseInt(msg.payload.id,'10');\nvar no = _keyNo+1;\nvar _key = \"shd-\"+no ;\nvar shd = flow.get('schedule','file');\nshd[_key].tag = msg.payload.tag;\nshd[_key].ontime  = msg.payload.ontime;\nshd[_key].onpayload = msg.payload.onpayload;\nshd[_key].offtime    = msg.payload.offtime;\nshd[_key].offpayload   = msg.payload.offpayload;\nshd[_key].dofWeek    = msg.payload.dofWeek;\nshd[_key].StartDate  = msg.payload.StartDate;\nshd[_key].EndDate    = msg.payload.EndDate;\nshd[_key].suspended   = msg.payload.suspended;\nflow.set('schedule',shd,'file');\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":220,"wires":[[]],"icon":"font-awesome/fa-database","info":"persists changes to a shedule item."},{"id":"d1a1b290.3b781","type":"function","z":"de76e056.a3ba7","name":"Schedule","func":"var shedDIDs = {\n\"shd-1\": {\n  \"id\": 0,\n  \"tag\": \"Lights\",\n  \"ontime\": \"19:00\",\n  \"onpayload\": \"1\",\n  \"offtime\": \"22:30\",\n  \"offpayload\": \"0\",\n  \"dofWeek\": [\n    1,\n    1,\n    1,\n    1,\n    1,\n    1,\n    1\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": false\n  }, \n\"shd-2\": {\n  \"id\": 1,    \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-3\": {\n  \"id\": 2,    \n  \"tag\": \"\",\n  \"ontime\": \"\",\n  \"onpayload\": null,\n  \"offtime\": \"\",\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-4\": {\n  \"id\": 3,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-5\": {\n  \"id\": 4,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-6\": {\n  \"id\": 5,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-7\": {\n  \"id\": 6,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-8\": {\n  \"id\": 7,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-9\": {\n  \"id\": 8,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-10\": {\n  \"id\": 9,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-11\": {\n  \"id\": 10,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  },\n\"shd-12\": {\n  \"id\": 11,     \n  \"tag\": \"\",\n  \"ontime\": null,\n  \"onpayload\": null,\n  \"offtime\": null,\n  \"offpayload\": null,\n  \"dofWeek\": [\n    0,\n    0,\n    0,\n    0,\n    0,\n    0,\n    0\n  ],\n  \"StartDate\": null,\n  \"EndDate\": null,\n  \"suspended\": true\n  }\n}\nflow.set('schedule',shedDIDs,'file');","outputs":1,"noerr":0,"x":260,"y":100,"wires":[[]],"icon":"font-awesome/fa-database","info":"shedule JSON"},{"id":"665f0a7a.0081e4","type":"inject","z":"de76e056.a3ba7","name":"Create","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":"0.0","x":110,"y":100,"wires":[["d1a1b290.3b781"]],"info":"Click this to create the schedule"},{"id":"a159bc2b.e7c6f","type":"inject","z":"de76e056.a3ba7","name":"Update","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"00 00 * * *","once":false,"onceDelay":0.1,"x":120,"y":380,"wires":[["6db354dc.df062c"]]},{"id":"95c7578.5bca7a8","type":"link out","z":"de76e056.a3ba7","name":"","links":["b112b041.1008b"],"x":1295,"y":40,"wires":[]},{"id":"bcab5774.3da1d8","type":"ui_template","z":"de76e056.a3ba7","group":"382c8b2c.300c74","name":"Select Schedule","order":1,"width":6,"height":4,"format":"<style>\n    input[type=checkbox].shed  { display:none; }\n    input[type=checkbox].shed + label{width: 150px; min-width: 150px;  border: 1px solid #486170; padding: 13px; margin:0 2px 0 0; border-radius:3px;}\n    input[type=checkbox].shed:checked + label{ background-color: #7A7A7A;}\n    \n    input[type=checkbox].shedLR  { display:none; }\n    input[type=checkbox].shedLR + label{width: 150px; min-width: 150px;  border: 1px solid #486170; padding: 13px; margin:0 2px 0 0; border-radius:3px;}\n    input[type=checkbox].shedLR:checked + label{ background-color: #7A7A7A;}\n    \n    input[type=checkbox].dow  { display:none; }\n    input[type=checkbox].dow + label{ border: 1px solid #486170; padding: 9px; margin:0 0px 0 0; border-radius:3px;}\n    input[type=checkbox].dow:checked + label{ background-color:#7A7A7A; width: 150px;}\n    \n    input[type=checkbox].dis   { display:none; }\n    input[type=checkbox].dis + label{ border: 1px solid #486170; padding: 7px; margin:0 0 0 0; border-radius:3px;}\n    input[type=checkbox].dis:checked + label{border: 1px solid #FF7443; background-color:#FF7443; width: 150px;}\n    \n    input[type=\"text\"]{padding: 3px 0 3px 4px;  border: 1px solid #cccccc; margin: 5px 0 5px 0; border-radius:3px; color:#3C3C3C;}\n    input[type=\"text\"]:disabled { color: #486170;}\n    input[type=\"time\"]{padding: 0px 0 0px 4px;  border: 1px solid #cccccc; font-size: 1.0em;  border-radius:3px; color:#3C3C3C;}\n    input[type=\"time\"]:disabled { color: #486170;}\n    input[type=\"date\"]{padding: 0px 0 0px 4px;  border: 1px solid #cccccc; font-size: 1.0em;  border-radius:3px; color:#3C3C3C;}\n    input[type=\"date\"]:disabled { color: #486170;}\n    \n    .valMedium {width: 75px;}\n    .valLable {padding-left: 15px; font-size: 0.8em;}\n    .yLable {padding-left: 0px; font-size: 0.8em;}\n    \n    @media screen and (max-device-width:640px), screen and (max-width:640px) {\n        input[type=checkbox].shedLR  { display:none; }\n        input[type=checkbox].shedLR + label{width: 155px; min-width: 155px;  border: 1px solid #486170; padding: 13px 15px 13px 14px; margin:0 2px 0 0; border-radius:3px;}\n        input[type=checkbox].shedLR:checked + label{ background-color: #7A7A7A;;}\n    }\n</style>\n\n<div style=\"float:left; margin:18px 0 0 20px; height: 55px; 220px\">\n\t<input type=\"checkbox\" id=\"shd-1\" evh=\"shedSel\"  ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-1\" evh=\"shedSel\">01</label>\n\t<input type=\"checkbox\" id=\"shd-2\" evh=\"shedSel\"  ng-click=\"send(action($event))\" class=\"shed\">\n    <label for=\"shd-2\" evh=\"shedSel\">02</label>\n\t<input type=\"checkbox\" id=\"shd-3\" evh=\"shedSel\"  ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-3\">03</label>\t\n\t<input type=\"checkbox\" id=\"shd-4\" evh=\"shedSel\"  ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-4\">04</label>\n</div>\n<div style=\"float:left; margin:8px 0 0 20px; height: 55px; width: 220px\">\n\t<input type=\"checkbox\" id=\"shd-5\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-5\">05</label>\t\t\t\t\t\n\t<input type=\"checkbox\" id=\"shd-6\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-6\">06</label>\n\t<input type=\"checkbox\" id=\"shd-7\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-7\">07</label>\t\n\t<input type=\"checkbox\" id=\"shd-8\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-8\">08</label>\n</div>\t\n<div style=\"float:left; margin:8px 0 0 20px; height: 55px; width: 220px\">\n\t<input type=\"checkbox\" id=\"shd-9\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shed\">\n\t<label for=\"shd-9\">09</label>\t\t\t\t\t\n\t<input type=\"checkbox\" id=\"shd-10\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shedLR\">\n\t<label for=\"shd-10\" >10</label>\n\t<input type=\"checkbox\" id=\"shd-11\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shedLR\">\n\t<label for=\"shd-11\" >11</label>\t\n\t<input type=\"checkbox\" id=\"shd-12\" evh=\"shedSel\" ng-click=\"send(action($event))\" class=\"shedLR\">\n\t<label for=\"shd-12\">12</label>\n</div>\n<input type=\"hidden\" id=\"init\" value=\"yes\">\n\n<script>\n    $(document).ready(function() {\n    \t$(\"[evh=shedSel]\").bind( \"click\", function(event, ui) {\n    \t\tvar sel = \"[evh=shedSel]\";\n    \t\t$(sel).each(function () {\n        \t\t$(sel).prop( \"checked\", false )\n    \t    });\n    \t\t$(this ).prop( \"checked\", true ); \n        });\n        \n        $('#shd-itm').on('change', function() {\n            console.log( \"hello\" );\n//            $('#shd-set').removeClass('md-primary').addClass('md-warn');\n        });\n    \n        if($('#init').val() === 'yes'){\n            $('#shd-1').prop( \"checked\", true );\n            $('#init').val('no');\n        }\n    });\n\n    (function(scope) {\n        this.scope.action = function(event){\n            console.log('shedID: '+event.currentTarget.id);\n            return msg = {payload: event.currentTarget.id};\n        }\n    })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":290,"y":220,"wires":[["e84aa579.a671a8"]],"info":"selects a shedule item No"},{"id":"7eb0e056.d66d1","type":"comment","z":"de76e056.a3ba7","name":"Create json structure - do once","info":"","x":150,"y":60,"wires":[]},{"id":"56b1f062.5d438","type":"switch","z":"de76e056.a3ba7","name":"","property":"payload.id","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"},{"t":"eq","v":"7","vt":"num"},{"t":"eq","v":"8","vt":"num"},{"t":"eq","v":"9","vt":"num"},{"t":"eq","v":"10","vt":"num"},{"t":"eq","v":"11","vt":"num"}],"checkall":"false","repair":false,"outputs":12,"x":810,"y":380,"wires":[["ba847b8a.b36ff8"],["407e2899.db9db8"],["6eac78e2.85c7c8"],["656666a2.028598"],["ed3f3019.3a5ed"],["20d07e86.be40e2"],["a59ab8d1.4586a8"],["f8175e32.1b57d"],["a6f9a489.61a838"],["47e73d86.138b74"],["8f00f70a.06d868"],["78bd86a5.2e4038"]]},{"id":"407e2899.db9db8","type":"schedex","z":"de76e056.a3ba7","name":"Timer02","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":100,"wires":[["589f2137.79094"]]},{"id":"656666a2.028598","type":"schedex","z":"de76e056.a3ba7","name":"Timer04","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":220,"wires":[["bd56690c.4c2ef8"]]},{"id":"6eac78e2.85c7c8","type":"schedex","z":"de76e056.a3ba7","name":"Timer03","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":160,"wires":[["59a17e38.7086e"]]},{"id":"8f00f70a.06d868","type":"schedex","z":"de76e056.a3ba7","name":"Timer11","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":640,"wires":[["45d758da.31ed68"]]},{"id":"ed3f3019.3a5ed","type":"schedex","z":"de76e056.a3ba7","name":"Timer05","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":280,"wires":[["667ca505.b1042c"]]},{"id":"20d07e86.be40e2","type":"schedex","z":"de76e056.a3ba7","name":"Timer06","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":340,"wires":[["9e13168a.d55af8"]]},{"id":"a59ab8d1.4586a8","type":"schedex","z":"de76e056.a3ba7","name":"Timer07","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":400,"wires":[["d7f7deb.13e562"]]},{"id":"47e73d86.138b74","type":"schedex","z":"de76e056.a3ba7","name":"Timer10","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":580,"wires":[["119e8f95.ea3eb"]]},{"id":"a6f9a489.61a838","type":"schedex","z":"de76e056.a3ba7","name":"Timer09","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":520,"wires":[["e276b1ad.56602"]]},{"id":"f8175e32.1b57d","type":"schedex","z":"de76e056.a3ba7","name":"Timer08","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":460,"wires":[["3995bd56.b9a942"]]},{"id":"78bd86a5.2e4038","type":"schedex","z":"de76e056.a3ba7","name":"Timer12","passthroughunhandled":false,"suspended":false,"lat":"","lon":"","ontime":"","ontopic":"","onpayload":"","onoffset":0,"onrandomoffset":0,"offtime":"","offtopic":"","offpayload":"","offoffset":0,"offrandomoffset":0,"mon":true,"tue":true,"wed":true,"thu":true,"fri":true,"sat":true,"sun":true,"x":1020,"y":700,"wires":[["9a6adbcf.04cd28"]]},{"id":"c6e014bf.1c97d8","type":"comment","z":"de76e056.a3ba7","name":"Build UI and setup timers","info":"","x":130,"y":180,"wires":[]},{"id":"6db354dc.df062c","type":"function","z":"de76e056.a3ba7","name":"get all items","func":"var shed = flow.get('schedule','file'); // Get schedule fraom storage\nmsg.topic = msg.payload;\nmsg.payload = shed;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":380,"wires":[["76a4472.6143ab8"]],"outputLabels":["msg"],"icon":"font-awesome/fa-database"},{"id":"76a4472.6143ab8","type":"split","z":"de76e056.a3ba7","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":457,"y":380,"wires":[["45ff2311.8d62fc"]]},{"id":"5bd36f34.054b5","type":"comment","z":"de76e056.a3ba7","name":"Restore timer values from memory","info":"","x":380,"y":340,"wires":[]},{"id":"d917b7fd.f1fc78","type":"comment","z":"de76e056.a3ba7","name":"Get an item and modify/save","info":"","x":494,"y":180,"wires":[]},{"id":"589f2137.79094","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":100,"wires":[]},{"id":"59a17e38.7086e","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":160,"wires":[]},{"id":"bd56690c.4c2ef8","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":220,"wires":[]},{"id":"667ca505.b1042c","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":280,"wires":[]},{"id":"9e13168a.d55af8","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":340,"wires":[]},{"id":"d7f7deb.13e562","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":400,"wires":[]},{"id":"3995bd56.b9a942","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":460,"wires":[]},{"id":"e276b1ad.56602","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":520,"wires":[]},{"id":"119e8f95.ea3eb","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":580,"wires":[]},{"id":"45d758da.31ed68","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":640,"wires":[]},{"id":"9a6adbcf.04cd28","type":"link out","z":"de76e056.a3ba7","name":"","links":[],"x":1295,"y":700,"wires":[]},{"id":"c1989f5c.cfcd1","type":"inject","z":"de76e056.a3ba7","name":"Restart","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":120,"y":220,"wires":[["6db354dc.df062c","bcab5774.3da1d8"]]},{"id":"9b7b8edb.71f6c","type":"comment","z":"de76e056.a3ba7","name":"Update timers daily","info":"","x":110,"y":340,"wires":[]},{"id":"45ff2311.8d62fc","type":"function","z":"de76e056.a3ba7","name":"process schedule","func":"var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];\nvar shed = msg.payload; // Get the schedule object\nvar offset = new Date().getTimezoneOffset(); // Get time offset from UTC\nvar now = Number(msg.topic) - offset * 60000; // Convert to Localtime;\n\n// Loop over days\nfor (dow = 0; dow< 7; dow++) {\n    if(shed.dofWeek[dow]) {\n        shed[days[dow]] = true;\n    } else {\n        shed[days[dow]] = false;\n    }\n}\n\n// Determine if today is within date range\nif ((shed.StartDate !== null) && shed.EndDate !== null) {\n    var startDate = (new Date(shed.StartDate).getTime());\n    var endDate = (new Date(shed.EndDate).getTime()) + (24 * 60 * 60000) - 1; // up to 23:59:59.999\n    if ((now < startDate) || now > endDate) {\n        shed.suspended = true;\n    } else {\n        shed.suspended = false;\n    }\n}\n\nmsg.payload = shed;\n\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":380,"wires":[["56b1f062.5d438"]]},{"id":"e1673405.ab8328","type":"ui_group","z":"","name":"Schedule Item","tab":"51c606d2.dfb618","order":2,"disp":true,"width":"6","collapse":false},{"id":"382c8b2c.300c74","type":"ui_group","z":"","name":"Select Schedule Item","tab":"51c606d2.dfb618","order":1,"disp":true,"width":"6","collapse":false},{"id":"51c606d2.dfb618","type":"ui_tab","z":"","name":"Scheduler","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thanks

MArtyn