Countdown in task display

src/functions.rs

@@ -342,14 +342,13 @@ pub fn show_task<T: MedalConnection>(conn: &T, task_id: u32, session_token: Stri
                 // TODO: Nicer message!
             }
             else {
-                let left_min = left_secs / 60;
-                let left_sec = left_secs % 60;
-                if left_sec < 10 {
-                    data.insert("time_left".to_string(), to_json(&format!("{}:0{}",left_min,left_sec)));
-                }
-                else {
-                    data.insert("time_left".to_string(), to_json(&format!("{}:{}",left_min,left_sec)));
-                }
+                let (hour, min, sec) = (
+                    left_secs / 3600,
+                    left_secs / 60 % 60,
+                    left_secs % 60);
+                
+                data.insert("time_left".to_string(), to_json(&format!("{}:{:02}", hour, min)));
+                data.insert("time_left_sec".to_string(), to_json(&format!(":{:02}", sec)));
  
                 let taskpath = format!("{}{}", c.location, t.location);    
                 
@@ -358,6 +357,7 @@ pub fn show_task<T: MedalConnection>(conn: &T, task_id: u32, session_token: Stri
                 data.insert("csrftoken".to_string(), to_json(&session.csrf_token));
                 data.insert("taskpath".to_string(), to_json(&taskpath));
                 data.insert("contestid".to_string(), to_json(&c.id));
+                data.insert("seconds_left".to_string(), to_json(&left_secs));
                 
                 Ok(("task".to_owned(), data))
             }

templates/task.hbs

@@ -87,10 +87,33 @@ width: 100vw;border: 0px;height: calc(100vh - 45px);
 Verbleibende Zeit
 </div>
 <div id="timetime">
-{{time_left}}<!--span id="ttsec">:00</span-->
+{{time_left}}<span id="ttsec">{{time_left_sec}}</span>
 </div>
 <script>
-// todo: update timer
+  var seconds_left_at_start = {{seconds_left}};
+  var timerStart = Date.now();
+
+  function lz(a) {
+    var b = a.toString();
+    if (b.length < 2) {
+      return "0" + b;
+    }
+    return b;
+  }
+  
+  function updateTimer() {
+    var seconds_passed = (Date.now() - timerStart) / 1000;
+    var seconds_left = seconds_left_at_start - seconds_passed;
+
+    var hour = seconds_left / 3600 | 0;
+    var min = seconds_left / 60 | 0 % 60 | 0;
+    var sec = seconds_left % 60 | 0;
+
+    text = hour.toString() + ":" + lz(min) + "<span id=\"ttsec\">:" + lz(sec) + "</span>";
+    document.getElementById("timetime").innerHTML = text;
+  }
+  
+  setInterval(updateTimer, 300);
 </script>
 </div>