Merge pull request #5 from chunkysteveo/master

Alarm 'Delete' button to WEB GUI
witnessmenow · May 17, 2019 · 5ec3774 · 5ec3774
2 parents 1ddd0ae + 17421c4
commit 5ec3774
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 14 deletions.
diff --git a/AlarmClock/AlarmClock.ino b/AlarmClock/AlarmClock.ino
@@ -170,7 +170,12 @@ bool buttonPressed = false;
 
 void handleGetAlarm() {
   char alarmString[5];
-  sprintf(alarmString, "%02d:%02d", alarmHour, alarmMinute);
+  if(alarmActive==true){
+    sprintf(alarmString, "%02d:%02d", alarmHour, alarmMinute);
+  }
+  else{
+    sprintf(alarmString, "--:--");
+  }
   server.send(200, "text/plain", alarmString);
 }
 
@@ -236,6 +241,7 @@ void setup() {
   server.on("/", handleRoot);
   server.on("/setAlarm", handleSetAlarm);
   server.on("/getAlarm", handleGetAlarm);
+  server.on("/deleteAlarm", handleDeleteAlarm);
   server.on("/setLED", handleLED);
   server.on("/getWiFi", handleWiFi);
   server.on("/readADC", handleADC);
@@ -322,7 +328,22 @@ void handleSetAlarm() {
       Serial.println(alarmMinute);
     }
   }
-  server.send(200, "text/html", "Set Alarm");
+  char alarmString[5];
+  sprintf(alarmString, "%02d:%02d", alarmHour, alarmMinute);
+  server.send(200, "text/html",alarmString );
+}
+
+void handleDeleteAlarm() {
+
+  Serial.println("Deleting Alarm");
+
+  alarmHour = '--';
+  alarmMinute = '--';
+  alarmActive = false;
+  saveConfig();
+  Serial.print("Alarm deleted");
+
+  server.send(200, "text/html", "--:--");
 }
 
 // notes in the melody:

diff --git a/AlarmClock/alarmWeb.h b/AlarmClock/alarmWeb.h
@@ -23,8 +23,8 @@ const char webpage[] PROGMEM = R"=====(
     <div class="form-row pt-3">
         <div class="col-auto">
             <h1>Set your alarm</h1>
-            <div class="form-group">
-                <label for="exampleInputEmail1">Alarm:</label>
+            <div class="form-group pt-2">
+                <label for="exampleInputEmail1" class="sr-only">Alarm:</label>
                 <div class="input-group mb-3 input-group-lg">
                 <div class="input-group-prepend">
                     <span class="input-group-text"><i class="fas fa-bell"></i></span>
@@ -35,14 +35,19 @@ const char webpage[] PROGMEM = R"=====(
                     </div>
                 </div>
             </div>
-              <div class="form-inline">
-                <div class="form-group">
-                    <label for="currentAlarm">Current Alarm:</label>
-                    <input type="text" readonly id="currentAlarm" class="form-control-plaintext" value="--:--" >
-                </div>
-            </div>
         </div>
     </div>
+    <div class="form-row">
+            <div class="col-auto">
+            <h5 for="currentAlarm" class="h5">Current Alarm:</h5>
+            </div>
+        </div>
+        <div class="form-row">
+            <div class="col">
+            <p id="currentAlarm" class="clearfix mr-3 h5 w-auto d-inline float-left">--:--</p>
+            <p id="deleteAlarm" class="w-auto invisible m-0"><a href="#" class="text-danger font-weight-bold text-decoration-none" onclick='deleteAlarm()'><i class="fas fa-times"></i> Delete</a></p>
+            </div>
+        </div>
     <div class="form-row">
         <div class="col-auto">
             <hr>
@@ -81,25 +86,45 @@ const char webpage[] PROGMEM = R"=====(
       sendData(2);
       getWiFi();
       getData();
+      getAlarm();
     });
     function saveAlarm()
     {
       var alarmTime = $( "#time" ).val();
       if(alarmTime) {
-        makeAjaxCall("setAlarm?alarm=" + alarmTime);
+        var xhttp = new XMLHttpRequest();
+        xhttp.onreadystatechange = function() {
+          if (this.readyState == 4 && this.status == 200) {
+            document.getElementById("currentAlarm").innerHTML =
+            this.responseText;
+            $("#deleteAlarm").show();
+          }
+        };
+        xhttp.open("GET", "setAlarm?alarm=" + alarmTime, true);
+        xhttp.send();
       }
     }
 
-    window.setInterval(getAlarm, 2000);
+//    window.setInterval(getAlarm, 2000);
 
     function displayAlarm(data){
-    var text = "Alarm currently set to: " + data;
-     $("#currentAlarm").val(data);
+      $("#currentAlarm").html(data);
+      $("#deleteAlarm").removeClass('invisible');
+      if(data!="--:--"){
+        $("#deleteAlarm").show();
+      }
+      else{
+        $("#deleteAlarm").hide();
+      }
     }
     function getAlarm(){
       $.ajax({"url": "getAlarm",
       "success": displayAlarm});
     }
+    function deleteAlarm(){
+      $.ajax({"url": "deleteAlarm",
+      "success": displayAlarm});
+    }
 
   function sendData(led) {
     var xhttp = new XMLHttpRequest();