diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 247 |
1 files changed, 0 insertions, 247 deletions
diff --git a/index.html b/index.html deleted file mode 100644 index 83136dc..0000000 --- a/index.html +++ /dev/null @@ -1,247 +0,0 @@ -<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 { - padding: 1rem; - border: 1px solid #3366ff; - } - </style> - </head> - <body> - <nav></nav> - <div class="main"> - <div id="books"></div> - <div id="prompts"></div> - <div><button onclick="on_submit()">Submit</button></div> - <script> - function insert_multiple_select(prompt, prompt_id, items){ - let root_el = document.getElementById("prompts") - let wrapper_el = document.createElement("div") - wrapper_el.setAttribute("class", "prompt multiple_select") - - let prompt_text_el = document.createElement("p") - prompt_text_el.innerHTML = prompt - wrapper_el.appendChild(prompt_text_el) - items.forEach(item => { - let checkbox_el = document.createElement("input") - checkbox_el.setAttribute("id", prompt_id+"__"+item["id"]) - checkbox_el.setAttribute("type", "checkbox") - checkbox_el.setAttribute("class", "multi-checkbox") - wrapper_el.appendChild(checkbox_el) - - let item_label = document.createElement("label") - item_label.setAttribute("for", prompt_id+"__"+item["id"]) - item_label.setAttribute("class", "multi-label") - item_label.innerHTML = item["display"] - wrapper_el.appendChild(item_label) - }) - root_el.appendChild(wrapper_el) - } - function insert_input(prompt, prompt_id, class_name, type){ - let root_el = document.getElementById("prompts") - let wrapper_el = document.createElement("div") - wrapper_el.setAttribute("class", "prompt") - - let item_label = document.createElement("label") - item_label.setAttribute("for", prompt_id) - item_label.setAttribute("class", class_name) - item_label.innerHTML = prompt - - let input_el = document.createElement("input") - input_el.setAttribute("id", prompt_id) - input_el.setAttribute("type", type) - wrapper_el.appendChild(item_label) - wrapper_el.appendChild(input_el) - root_el.appendChild(wrapper_el) - - return input_el - } - function insert_number(prompt, prompt_id){ - insert_input(prompt, prompt_id, "number", "number") - } - function insert_text(prompt, prompt_id){ - insert_input(prompt, prompt_id, "text", "text") - } - function insert_range(prompt, prompt_id, min, max){ - let input_el = insert_input(prompt, prompt_id, "number", "range") - input_el.setAttribute("min", min) - input_el.setAttribute("max", max) - input_el.setAttribute("value", Math.floor((max+min)/2)) - - let checkbox_el = document.createElement("input") - checkbox_el.setAttribute("id", prompt_id+"_checkbox") - checkbox_el.setAttribute("type", "checkbox") - input_el.parentElement.insertBefore(checkbox_el, input_el) - } - function insert_textarea(prompt, prompt_id){ - let root_el = document.getElementById("prompts") - let wrapper_el = document.createElement("div") - wrapper_el.setAttribute("class", "prompt") - - let item_label = document.createElement("label") - item_label.setAttribute("for", prompt_id) - item_label.setAttribute("class", "number") - item_label.innerHTML = prompt - - let input_el = document.createElement("textarea") - input_el.setAttribute("id", prompt_id) - - let label_wrapper = document.createElement("div") - label_wrapper.appendChild(item_label) - wrapper_el.appendChild(label_wrapper) - wrapper_el.appendChild(input_el) - root_el.appendChild(wrapper_el) - } - function insert_book(title){ - let safe_id = title.replace(/\s/g, ''); - - let item_label = document.createElement("label") - item_label.setAttribute("for", safe_id) - item_label.setAttribute("class", "number") - item_label.innerHTML = title - - let input_el = document.createElement("input") - input_el.setAttribute("id", safe_id) - input_el.setAttribute("type", "number") - input_el.setAttribute("placeholder", "pages") - - let item_complete_label = document.createElement("label") - item_complete_label.setAttribute("for", safe_id+"_complete") - item_complete_label.innerHTML = "Completed?" - - let input_complete_el = document.createElement("input") - input_complete_el.setAttribute("id", safe_id+"_complete") - input_complete_el.setAttribute("type", "checkbox") - - let wrapper_el = document.createElement("div") - wrapper_el.setAttribute("class", "prompt") - wrapper_el.appendChild(item_label) - wrapper_el.appendChild(input_el) - wrapper_el.appendChild(item_complete_label) - wrapper_el.appendChild(input_complete_el) - - let root_el = document.getElementById("books") - root_el.appendChild(wrapper_el) - } - function item(i){ - return {"id": i, "display": i} - } - 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 submit_geolocation(){ - navigator.geolocation.getCurrentPosition(function(pos){ - enqueue_data("/submit_payload", { - "geoposition": { - "latitude": pos.coords.latitude, - "longitude": pos.coords.longitude - } - }) - }); - } - function on_submit(){ - let payload = {} - document.querySelectorAll("#prompts input[type=checkbox].multi-checkbox").forEach(el => { - let p = el.id.split("__", 2) - if(!(p[0] in payload)){ - payload[p[0]] = {} - } - payload[p[0]][p[1]] = el.checked - }) - document.querySelectorAll("#prompts input[type=number]").forEach(el => { - payload[el.id] = el.value - }) - document.querySelectorAll("#prompts input[type=checkbox]:checked + input[type=range]").forEach(el => { - payload[el.id] = el.value - }) - document.querySelectorAll("#prompts textarea").forEach(el => { - payload[el.id] = el.value - }) - payload["books"] = [] - document.querySelectorAll("#books .prompt").forEach(el => { - if(el.childNodes[1].value){ - book = { - "title": el.childNodes[0].innerHTML, - "pages": el.childNodes[1].value, - "complete": el.childNodes[3].checked - } - payload["books"].push(book) - } - }) - console.log(payload["books"]) - enqueue_data("/submit_payload", payload, do_alert=true) - submit_geolocation() - } - window.onload = function(){ - fetch("/forms").then(res => res.json()).then(data => { - data.forEach(form => { - switch(form["type"]) { - case "multiple_select": - insert_multiple_select(form["prompt"], form["prompt_id"], form["extra"]) - break; - case "number": - insert_number(form["prompt"], form["prompt_id"]) - break; - case "range": - insert_range( - form["prompt"], form["prompt_id"], form["extra"]["min"], form["extra"]["max"]) - break; - case "textarea": - insert_textarea(form["prompt"], form["prompt_id"]) - break; - case "text": - insert_text(form["prompt"], form["prompt_id"]) - break; - } - }) - }) - fetch("/books").then(res => res.json()).then(data => { - data.forEach(book => insert_book(book)) - }) - } - </script> - </div> - </body> -</html> |