feat: reset button (#2)

app/public/index.html

@@ -6,6 +6,22 @@
     var interval;
     var running = false;
 
+    // Set shortcut for delete which does not exist nativelt in jQuery
+    $.delete = function(url, data, callback, type) {
+      if ( $.isFunction(data) ){
+        type = type || callback,
+            callback = data,
+            data = {}
+      }
+      return $.ajax({
+        url: url,
+        type: 'DELETE',
+        success: callback,
+        data: data,
+        contentType: type
+      });
+    }
+
     function increment() {
       var status = $("#status");
       var zone = $("#zone");
@@ -40,9 +56,44 @@
       });
     }
 
+    function reset() {
+      var status = $("#status");
+      var zone = $("#zone");
+      var counter = $("#counter");
+
+      if (running) {
+        return;
+      }
+      running = true;
+
+      $.delete('/counter', function (data, textStatus, jqXHR) {
+        if (data.err == null) {
+          status.removeClass("error");
+          status.text("Everything is working")
+          counter.text(data.counter);
+          var zoneVal = data.zone;
+          if (zoneVal == null) {
+            zoneVal = "unknown";
+          }
+          zone.text(zoneVal);
+        } else {
+          status.addClass("error");
+          status.text("Cannot connect to: redis")
+          counter.text("-");
+          zone.text("-");
+        }
+        running = false;
+      }).fail(function(){
+        status.addClass("error");
+        status.text("Cannot connect to: demo-app")
+        running = false;
+      });
+    }
+
     function stopAutoIncrement() {
       clearInterval(interval);
       $("#increment").prop("disabled", false);
+      $("#reset").prop("disabled", false);
       $("#autoincrement").prop("checked", false);
     }
 
@@ -79,10 +130,15 @@
         increment();
       });
 
+      $("#reset").click(function(){
+        reset();
+      });
+
       var autoincrement = $("#autoincrement");
       autoincrement.click(function(){
         if (autoincrement.is(":checked")) {
           $("#increment").prop("disabled", true);
+          $("#reset").prop("disabled", true);
           interval = setInterval(function(){
             increment();
           }, 0);
@@ -252,22 +308,40 @@
       background: rgba(0, 0, 0, 0.025);
     }
 
+    button:disabled {
+      background-color: #cccccc;
+    }
+
     .controls-container {
 
     }
 
     .controls {
       display: flex;
-      align-items: center;
+      /* align-items: center; */
       justify-content: center;
       text-align: center;
-      margin: 0 0 30px 0;
-      padding: 0 0 30px 0;
+      margin: 0 0 15px 0;
+      padding: 0 0 15px 0;
       border-bottom: 1px solid #eee;
     }
 
     .controls > div {
-      padding: 10px;
+      flex: 0 0 50%;
+      padding: 0 20px;
+    }
+
+    .controls button {
+      display: block;
+      width: 100%;
+    }
+
+    .auto-increment-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 15px 0 30px 0;
+      text-align: center;
     }
 
     .icon {
@@ -342,6 +416,7 @@
       margin: 0 0 10px 0;
     }
 
+    .type-s { font-size: 14px !important; }
     .type-lg { font-size: 18px !important; }
     .type-xl { font-size: 22px !important; }
     .type-xxl { font-size: 28px !important; }
@@ -371,16 +446,21 @@ <h1 class="type-xxxl">Kuma Counter Demo <span id="version"></span></h1>
         </p>
       </div>
       <div class="controls-container">
+
         <div class="controls">
           <div>
             <button id="increment" class="button type-xxxl">Increment</button>
           </div>
           <div>
-            <input type="checkbox" id="autoincrement" value="value">
-            <label for="autoincrement" class="type-xl">Auto Increment</label>
+            <button id="reset" class="button type-xxxl">Reset</button>
           </div>
         </div>
 
+        <div class="auto-increment-container">
+          <input type="checkbox" id="autoincrement" value="value" />
+          <label for="autoincrement" class="type-xl">Auto Increment</label>
+        </div>
+
         <div class="output">
           <span id="status"></span>
 
@@ -415,21 +495,6 @@ <h3>Zone</h3>
         </p>
       </div>
     </footer>
-
-    <!-- <div id="header">
-      <h1>Kuma Counter Demo <span id="version"></span></h1>
-      <p>A simple application that increments a counter in a `Redis` service via a `Demo App` service:</p>
-      <br><br>
-      <div id="">
-        <button id="increment">Increment</button>
-        <input type="checkbox" id="autoincrement" value="value"><label style="position: relative; top: -1px;" for="autoincrement">Auto Increment</label>
-      </div>
-    </div>
-    <div>
-      <span id="status"></span>
-      <span id="zone"></span>
-      <span id="counter"></span>
-    </div> -->
   </div>
 </body>
 </html>

app/server.js

@@ -3,9 +3,10 @@ const Redis = require("ioredis");
 
 const COUNTER_KEY = "counter"
 const ZONE_KEY = "zone"
-const app = express();
 const PORT = 5000;
 
+const app = express();
+
 var version = process.env.APP_VERSION || "1.0";
 var color = process.env.APP_COLOR || "#efefef";
 
@@ -59,6 +60,26 @@ app.post('/increment', function(req, res){
   });
 });
 
+app.delete('/counter', function(req, res){
+  var client = getClient();
+  client.del(COUNTER_KEY, function(err) {
+    if (err) {
+      console.log(err);
+      res.send({err:true});
+    } else {
+      client.get(ZONE_KEY, function(err, zone_result) {
+        client.quit();
+        if (err) {
+          console.log(err);
+          res.send({err:true});
+        } else {
+          res.send({counter: 0, zone: zone_result, err: err});
+        }
+      });
+    }
+  });
+});
+
 app.get('/counter', function(req, res){
   var client = getClient();
   client.get(COUNTER_KEY, function(err, counter_result) {

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+