1 files changed, 141 insertions, 0 deletions
diff --git a/static/timer.html b/static/timer.html
new file mode 100644
index 0000000..ecaf966
--- /dev/null
+++ b/static/timer.html
@@ -0,0 +1,141 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      p {
+        #margin-top: 0;
+        #margin-bottom: 0;
+      }
+      label.number, label.text {
+        margin-right: 1rem;
+      }
+      label.multi-label {
+        padding: 1rem;
+        border: 1px solid #3366ff;
+      }
+      input[type="checkbox"].multi-checkbox {
+        display: none;
+      }
+      input[type="checkbox"] {
+        height: 2rem;
+        width: 2rem;
+      }
+      input:checked + label{
+        background-color: #99ccff;
+      }
+      input[type="number"] {
+        height: 3rem;
+      }
+      input[type="range"] {
+        width: 60%;
+      }
+      input[type="text"] {
+        height: 3rem;
+      }
+      .prompt {
+        margin-bottom: 2rem;
+      }
+      textarea {
+        width: 80ch;
+        height: 5rem;
+      }
+      button, select {
+        padding: 1rem;
+        border: 1px solid #3366ff;
+      }
+      .main>div {
+        margin: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <nav></nav>
+    <div class="main">
+
+      <div id="stopwatch">0 minutes 0 seconds</div>
+      <div>
+        <button onclick="start()" id="start">Start</button>
+      </div>
+      <div>
+        <button onclick="pause()" id="pause">Pause</button>
+      </div>
+      <div>
+        <button onclick="reset()" id="reset">Reset</button>
+      </div>
+
+      <div>
+        <select id="select_el" name="type">
+        </select>
+      </div>
+
+      <div>
+        <button onclick="on_submit()">Submit</button>
+      </div>
+
+
+      <script>
+        var seconds = 0;
+        var timeoutId;
+        let stopwatch = document.getElementById("stopwatch")
+        let start_button = document.getElementById("start")
+        let pause_button = document.getElementById("pause")
+        let reset_button = document.getElementById("reset")
+        function start(){
+            start_button.disabled = true
+            pause_button.disabled = false
+            reset_button.disabled = false
+            timeoutId = setTimeout(function() {
+              seconds++
+              let disp_seconds = seconds % 60
+              let minutes = Math.trunc(seconds/60)
+              stopwatch.innerHTML = minutes + ' minutes ' + disp_seconds + " seconds"
+              start();
+            }, 1000); // setTimeout delay time 10 milliseconds
+        }
+        function pause(){
+            clearTimeout(timeoutId)
+            start_button.disabled = false
+            pause_button.disabled = true
+            reset_button.disabled = false
+        }
+        function reset(){
+            start_button.disabled = false
+            pause_button.disabled = true
+            reset_button.disabled = true
+            seconds = 0
+            stopwatch.innerHTML = '0 minutes 0 seconds'
+        }
+        async function enqueue_data(path, payload, do_alert=false){
+          payload["timestamp"] =  Date.now()
+          await fetch(path, {method: "POST", body: JSON.stringify(payload)})
+          if(do_alert){
+            alert("saved!")
+          }
+        }
+        function on_submit(){
+          let payload = {
+            "type": document.getElementById("select_el").value,
+            "seconds": seconds,
+          }
+          console.log(payload)
+          enqueue_data("/submit_task_time", payload, do_alert=true)
+        }
+        window.onload = function(){
+          start_button.disabled = false
+          pause_button.disabled = true
+          reset_button.disabled = true
+          fetch("/tasks").then(res => res.json()).then(data => {
+            let el = document.getElementById("select_el")
+            data.forEach(i => {
+              let option = document.createElement("option")
+              option.setAttribute("value", i)
+              option.innerHTML = i
+
+              el.appendChild(option)
+            })
+          })
+        }
+      </script>
+    </div>
+  </body>
+</html>