Scheduler: web UI layout fixes, allow toggling, change first weeday to Monday, dinamically load relays in dropdown

code/espurna/scheduler.ino

@@ -1,8 +1,9 @@
 /*
 
-A SCHEDULER MODULE
+SCHEDULER MODULE
 
 Copyright (C) 2017 by faina09
+Adapted by Xose Pérez <xose dot perez at gmail dot com>
 
 */
 
@@ -27,6 +28,8 @@ void _schWebSocketOnSend(JsonObject &root){
     }
 }
 
+#endif // WEB_SUPPORT
+
 void _schConfigure() {
 
     bool delete_flag = false;
@@ -48,11 +51,15 @@ void _schConfigure() {
 
             #if DEBUG_SUPPORT
 
-                int sch_operation = getSetting("schAction", i, 0).toInt();
+                int sch_action = getSetting("schAction", i, 0).toInt();
                 int sch_hour = getSetting("schHour", i, 0).toInt();
                 int sch_minute = getSetting("schMinute", i, 0).toInt();
                 String sch_weekdays = getSetting("schWDs", i, "");
-                DEBUG_MSG_P(PSTR("[SCH] Turn switch #%d %s at %02d:%02d on %s\n"), sch_switch, sch_operation ? "ON" : "OFF", sch_hour, sch_minute, (char *)sch_weekdays.c_str());
+                DEBUG_MSG_P(
+                    PSTR("[SCH] Schedule #%d: %s switch #%d at %02d:%02d on %s\n"),
+                    i, sch_action == 0 ? "turn OFF" : sch_action == 1 ? "turn ON" : "toggle", sch_switch,
+                    sch_hour, sch_minute, (char *) sch_weekdays.c_str()
+                );
 
             #endif // DEBUG_SUPPORT
 
@@ -62,19 +69,17 @@ void _schConfigure() {
 
 }
 
-#endif // WEB_SUPPORT
-
 bool _isThisWeekday(String weekdays){
 
-    //Sunday = 1, Monday = 2, ...
-    int w = weekday(now());
-    //DEBUG_MSG_P(PSTR("[SCH] NTP weekday: %d\n"), w);
+    // Monday = 1, Tuesday = 2 ... Sunday = 7
+    int w = weekday(now()) - 1;
+    if (w == 0) w = 7;
 
-    char * pch;
+    char pch;
     char * p = (char *) weekdays.c_str();
-    while ((pch = strtok_r(p, ",", &p)) != NULL) {
-        //DEBUG_MSG_P(PSTR("[SCH] w found: %d\n"), atoi(pch));
-        if (atoi(pch) == w) return true;
+    unsigned char position = 0;
+    while (pch = p[position++]) {
+        if ((pch - '0') == w) return true;
     }
     return false;
 
@@ -141,11 +146,18 @@ void schLoop(){
                 int sch_minute = getSetting("schMinute", i, 0).toInt();
                 int minutes_to_trigger = _diffTime(sch_hour, sch_minute);
                 if (minutes_to_trigger == 0) {
-                    int sch_operation = getSetting("schAction", i, 0).toInt();
-                    relayStatus(sch_switch, sch_operation);
+                    int sch_action = getSetting("schAction", i, 0).toInt();
+                    if (sch_action == 2) {
+                        relayToggle(sch_switch);
+                    } else {
+                        relayStatus(sch_switch, sch_action);
+                    }
                     DEBUG_MSG_P(PSTR("[SCH] Schedule #%d TRIGGERED!!\n"), sch_switch);
                 } else if (minutes_to_trigger > 0) {
-                    DEBUG_MSG_P(PSTR("[SCH] %d minutes to trigger schedule #%d\n"), minutes_to_trigger, sch_switch);
+                    DEBUG_MSG_P(
+                        PSTR("[SCH] %d minutes to trigger schedule #%d\n"),
+                        minutes_to_trigger, sch_switch
+                    );
                 }
             }
         }

code/html/custom.css

@@ -67,18 +67,18 @@
     background: rgb(28, 184, 65);
 }
 .button-del-network,
-.button-del-schedule, {
+.button-del-schedule {
     background: rgb(202, 60, 60);
-    letter-spacing: 0px;
 }
+.pure-button {
+    letter-spacing: 0;
+}
+
 .button-more-network,
 .button-more-schedule,
 .button-rfb-send {
     background: rgb(223, 117, 20);
 }
-#schedules input[type=number]{
-    max-width: 55px;
-}
 .button-settings-backup,
 .button-settings-restore {
     background: rgb(0, 202, 0);
@@ -112,11 +112,10 @@ div.hint {
 #networks .pure-g,
 #schedules .pure-g {
     padding: 10px 0 10px 0;
-    margin-bottom: 5px;
-    border-bottom: 2px dashed #e5e5e5;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #eee;
 }
-#networks .more,
-#schedules .more {
+#networks .more {
     display: none;
 }
 legend.module,
@@ -206,3 +205,11 @@ select {
     width: 100%;
     margin-bottom: 10px;
 }
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #eee;
+    margin: 1em 0;
+    padding: 0;
+}

code/html/custom.js

@@ -861,6 +861,7 @@ function processData(data) {
         // -----------------------------------------------------------------------------
         // Relays scheduler
         // -----------------------------------------------------------------------------
+
         if (key == "maxSchedules") {
             maxSchedules = parseInt(data.maxSchedules);
             return;
@@ -869,15 +870,11 @@ function processData(data) {
         if (key == "schedule") {
             var schedule = data.schedule;
             for (var i in schedule) {
-                // add a new row
                 var line = addSchedule();
-                // fill in the blanks
                 var schedule = data.schedule[i];
                 Object.keys(schedule).forEach(function(key) {
-                    var element = $("input[name=" + key + "]", line);
-                    if (element.length) element.val(schedule[key]);
-                    var elementsel = $("select[name=" + key + "]", line);
-                    if (elementsel.length) elementsel.prop("value", schedule[key]);
+                    $("input[name=" + key + "]", line).val(schedule[key]);
+                    $("select[name=" + key + "]", line).prop("value", schedule[key]);
                 });
             }
             return;
@@ -890,9 +887,17 @@ function processData(data) {
         if (key == "relayStatus") {
             initRelays(data[key]);
             for (var i in data[key]) {
+
+                // Set the status for each relay
                 $("input.relayStatus[data='" + i + "']")
                     .prop("checked", data[key][i])
                     .iphoneStyle("refresh");
+
+                // Populate the relay SELECTs
+                $("select.isrelay").append(
+                    $("<option></option>").attr("value",i).text("Switch #" + i)
+                );
+
             }
             return;
         }

code/html/index.html

@@ -534,8 +534,7 @@
 
                             <fieldset>
 
-                                <div id="networks">
-                                </div>
+                                <div id="networks"></div>
 
                                 <button type="button" class="pure-button button-add-network">Add network</button>
 
@@ -1040,7 +1039,7 @@
                 <div class="pure-u-1 pure-u-lg-3-4 hint more">Set the Domain Name Server IP to use when using a static IP</div>
 
                 <div class="pure-u-0 pure-u-lg-1-4 more"></div>
-                <button type="button" class="pure-button button-del-network more">Delete network</button>
+                <button class="pure-button button-del-network more" type="button">Delete network</button>
 
             </div>
 
@@ -1050,31 +1049,36 @@
 
             <div class="pure-g">
 
-                <label class="pure-u-sm-4-24 pure-u-1-3">Turn&nbsp;Switch&nbsp;No</label>
-                <div class="pure-u-sm-3-24 pure-u-1-3"><input name="schSwitch" type="number" min="0" max="10" step="1" value="0" tabindex="0" /></div>
-
-                <div class="pure-u-sm-3-24 pure-u-1-3">
-                    <select name="schAction" tabindex="0">
-                        <option value="0">OFF</option>
-                        <option value="1">ON</option>
-                    </select>
+                <label class="pure-u-1 pure-u-lg-1-4">When time is</label>
+                <div class="pure-u-1-4 pure-u-lg-1-5">
+                    <input class="pure-u-2-3" name="schHour" type="number" min="0" step="1" max="23" size="20" />
+                    <div class="pure-u-1-4 hint center"> h</div>
                 </div>
+                <div class="pure-u-1-4 pure-u-lg-1-5">
+                    <input class="pure-u-2-3" name="schMinute" type="number" min="0" step="1" max="59" />
+                    <div class="pure-u-1-4 hint center"> m</div>
+                </div>
+                <div class="pure-u-0 pure-u-lg-1-3"></div>
 
-                <label class="pure-u-sm-5-24 pure-u-1-3">at&nbsp;Time&nbsp;HH&nbsp;MM</label>
-                <div class="pure-u-sm-3-24 pure-u-1-3"><input name="schHour" type="number" min="0" max="23" step="1" tabindex="0" value="0" /></div>
-                <div class="pure-u-sm-3-24 pure-u-1-3"><input name="schMinute" type="number" min="0" max="59" step="1" tabindex="0" value="0" /></div>
-
-                <div class="pure-u break"></div>
-
-                <label class="pure-u-sm-1-4 pure-u-1">on&nbsp;Weekdays:</label>
-                <div class="pure-u-sm-3-4 pure-u-1">
-                    <div class="pure-u-1 weekDays-selector">
-                        <input type="inbox" name="schWDs" value="1,2,3,4,5,6,7" class="weekday"  tabindex="0" />
-                    </div>
-                    <div class="pure-u-1 hint">1 = Sunday, 2 = Monday, ...</div>
+                <label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>
+                <div class="pure-u-2-5 pure-u-lg-1-5">
+                    <input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" size="15" tabindex="0" value="1,2,3,4,5,6,7" />
+                </div>
+                <div class="pure-u-3-5 pure-u-lg-1-2 hint center">1 for Monday, 2 for Tuesday...</div>
+
+                <label class="pure-u-1 pure-u-lg-1-4">Action</label>
+                <div class="pure-u-1 pure-u-lg-1-5">
+                    <select class="pure-u-1 pure-u-lg-23-24" name="schAction">
+                        <option value="0">Turn OFF</option>
+                        <option value="1">Turn ON</option>
+                        <option value="2">Toggle</option>
+                    </select>
                 </div>
+                <select class="pure-u-1 pure-u-lg-1-5 isrelay" name="schSwitch"></select>
+                <div class="pure-u-0 pure-u-lg-1-5"></div>
 
-                <div class="pure-u-md-1-6 pure-u-1-4"><button type="button" class="pure-button button-del-schedule pure-u-5-6 pure-u-md-5-6">Del</button></div>
+                <div class="pure-u-0 pure-u-lg-1-4"></div>
+                <button class="pure-button button-del-schedule" type="button">Delete schedule</button>
 
             </div>