Browse Source

Seconds are aliiiiive!

Sacha Bron 6 years ago
parent
commit
ccaca5e73e
3 changed files with 76 additions and 58 deletions
  1. 31 17
      main.js
  2. 38 34
      style.css
  3. 7 7
      trigger.html

+ 31 - 17
main.js

@@ -36,7 +36,7 @@ function checkHours(hoursForm) {
     hoursOpen = Math.floor(hoursOpen);
     //TODO throw error if parentElement is null
     if (openButton == null) {
-        alert("The page was malformed, you should reload it now.")
+        alert("The page was malformed, you should reload it now.");
     }
     if (isNaN(hoursOpen) || hoursOpen < 1) {
         openButton.disabled = true;
@@ -89,12 +89,9 @@ function updateSpaceInformation() {
                     toggleDiv(closeBlock, 0);
                     document.hoursform.hours.focus();
                 }
-                var diff_time = Number(closing_time.getTime()) - new Date().getTime();
-                if (diff_time > 0) {
-                    update_date(new Date(diff_time));
-                } else {
-                    update_date(new Date(0));
-                }
+                
+                launchAutoRefresh(closing_time);
+                
                 msgBlock.innerHTML = parsed_text.state.message;
                 toggleDiv(msgBlock, 1);
                 toggleDiv(loadBlock, 0);
@@ -106,6 +103,24 @@ function updateSpaceInformation() {
     xhr.send(null);
 }
 
+function calcDiff(closing_time) {
+  var diff_time = Number(closing_time.getTime()) - new Date().getTime();
+  if (diff_time > 0) {
+      return new Date(diff_time);
+  } else {
+      return new Date(0);
+  }
+}
+
+var autoRefreshTime;
+function launchAutoRefresh(closing_time) {
+  if(autoRefreshTime)
+    clearInterval();
+  autoRefreshTime = setInterval(function () {
+    update_date(calcDiff(closing_time))
+  }, 100);
+}
+
 function onPageLoad() {
     "use strict";
     toggleDiv(openBlock, 0);
@@ -167,25 +182,24 @@ function closeSpace() {
 }
 
 function update_date(date) {
-
     "use strict";
-    var hours = String(date.getHours() - 1);
+    var hours = String(date.getHours() - 1); // Time Zone GMT-1
     if (hours.length == 1) {
         hours = "0" + hours;
     }
-    var first_char = hours.charAt(0);
-    setTextForId("first-hour", first_char);
-    var second_char = hours.charAt(1);
-    setTextForId("second-hour", second_char);
+    setTextForId("hour", hours);
 
     var minutes = String(date.getMinutes());
     if (minutes.length == 1) {
         minutes = "0" + minutes;
     }
-    var first_char = minutes.charAt(0);
-    setTextForId("first-minute", first_char);
-    var second_char = minutes.charAt(1);
-    setTextForId("second-minute", first_char);
+    setTextForId("minute", minutes);
+    
+    var seconds = String(date.getSeconds());
+    if (seconds.length == 1) {
+        seconds = "0" + seconds;
+    }
+    setTextForId("second", seconds);
 }
 
 function setTextForId(id, text) {

+ 38 - 34
style.css

@@ -36,11 +36,15 @@ body {
     height: 100%;
 }
 
+p {
+    margin: 10px 0;
+}
+
 #container {
     margin: auto;
     width: 800px;
     
-    height: 100%;
+    min-height: 100%;
     
     background-color: rgba(50, 50, 50, 0.8);
 }
@@ -71,10 +75,12 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
     font-size: 48px;
+    margin-bottom: 20px;
 }
 
 h2 {
     font-size: 36px;
+    margin-bottom: 10px;
 }
 
 .central-block {
@@ -115,40 +121,47 @@ buttons
 match all the button
 */
 div .button, button, input[type=submit] {
-    border-style: groove;
-    background: #009100;
-    font-size:20px;
-    border-color: #006100;
-    border-width:3px;
-    padding:5px 15px;
-    margin:5px 2px;
-    color:black;
-    border-radius: 5px;
+    padding: 10px 10px;
+    width: 100px;
+    margin: 5px;
+    background-color: #333;
+    border: 2px solid #eee;
 }
 
 div .btn_red {
-    background: #ff0000;
+    border-color: #aa0000;
 }
 
 div .btn_green {
-    background: #00ff00;
+    border-color: #00aa00;
 }
 
 div .btn_blue {
-    background: #0000ff;
+    border-color: #0000aa;
 }
 
-
 div .button:active, button:active, input[type=submit]:active {
-    background: #006100;
+    border-color: #777777;
+}
+
+div .btn_red:active {
+    border-color: #770000;
+}
+
+div .btn_green:active {
+    border-color: #007700;
+}
+
+div .btn_blue:active {
+    border-color: #000077;
 }
 
 div .button[disabled], button[disabled], input[type=submit][disabled] {
-    background: #003100;
+    border-color: transparent;
 }
 
 div .button[disabled]:active, button[disabled]:active, input[type=submit][disabled]:active {
-    background: #003100;
+    border-color: transparent;
 }
 
 .text-input {
@@ -166,27 +179,17 @@ div .button[disabled]:active, button[disabled]:active, input[type=submit][disabl
 }
 
 .number {
-    float:left;
-    display:inline;
-    text-align:center;
-    background-color:#009100;
-    color:white;
-    font-size:32;
-    font-weight:bold;
-    padding:8px;
-    width:20px;
-    height:35px;
-    border-radius:10px;
-    margin: 4px;
 }
 
-#separator {
-    background: black;
+.separator:before {
+  content: ":";
 }
 .numbers {
-    margin: 0px auto;
-    width:220px;
-    height: 50px;
+    width: 200px;
+    text-align: center;
+    border: 2px solid #eeeeee;
+    padding: 10px 10px;
+    margin: 5px;
 }
 
 .breathSlider{
@@ -202,3 +205,4 @@ div .button[disabled]:active, button[disabled]:active, input[type=submit][disabl
 #breathBox {
     margin: 5px 0;
 }
+

+ 7 - 7
trigger.html

@@ -16,7 +16,7 @@
 
       <div class='central-block'>
           <h2>Status</h2>
-          <div id="loading-block">Loading ...</div>
+          <div id="loading-block"><p>Loading ...</p></div>
 
           <div id="open-block" style="visibility:hidden;">
             <form name="hoursform" id="hoursform">
@@ -35,13 +35,13 @@
               <input type="button" onclick="promptOpenSpace()" value="Extend"
               class="button">
               <br>
-            The space is still open for :
+            <p>The space is still open for:</p>
             <div class="numbers">
-              <span class="number" id="first-hour">2</span> <span class=
-              "number" id="second-hour">2</span> <span class="number" id=
-              "separator">:</span> <span class="number" id=
-              "first-minute">2</span> <span class="number" id=
-              "second-minute">2</span>
+              <span class="number" id="hour">21</span>
+              <span class="separator"></span>
+              <span class="number" id="minute">45</span>
+              <span class="separator"></span>
+              <span class="number" id="second">38</span>
             </div>
             </form>
           </div>