diff options
| author | Mark Powers <mark@marks.kitchen> | 2023-01-31 22:11:34 -0600 |
|---|---|---|
| committer | Mark Powers <mark@marks.kitchen> | 2023-01-31 22:11:34 -0600 |
| commit | f74a597c0931122dff6f76452270633419472354 (patch) | |
| tree | 82ed3de8c0e76e4c55f3797db0c39f16e69065df /static | |
| parent | ad11ec7f93dca356748cb6c8bc49313a7ee7c3d7 (diff) | |
Add task timer
Diffstat (limited to 'static')
| -rw-r--r-- | static/index.html | 4 | ||||
| -rw-r--r-- | static/timer.html | 141 |
2 files changed, 145 insertions, 0 deletions
diff --git a/static/index.html b/static/index.html index 83136dc..fd37550 100644 --- a/static/index.html +++ b/static/index.html @@ -51,6 +51,10 @@ <div id="books"></div> <div id="prompts"></div> <div><button onclick="on_submit()">Submit</button></div> + <div style="margin-top: 2rem;"> + <a href="/timer"><button>Timer</button></a> + <a href="/new_form"><button>New Form</button></a> + </div> <script> function insert_multiple_select(prompt, prompt_id, items){ let root_el = document.getElementById("prompts") 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> |