Initial commit

author: Mark Powers <mark@marks.kitchen> 2023-01-02 21:36:54 -0600
committer: Mark Powers <mark@marks.kitchen> 2023-01-02 21:36:54 -0600
commit: d0969bd6886a81dc59c5c02b12468a97b3c4cf58 (patch)
tree: ef44a9d1a0cf29e582f5eff90f5f6a33092fd58f /index.html
1 files changed, 248 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..64490b3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,248 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      p {
+        #margin-top: 0;
+        #margin-bottom: 0;
+      }
+      label.number {
+        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%;
+      }
+      .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_number(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("input")
+          input_el.setAttribute("id", prompt_id)
+          input_el.setAttribute("type", "number")
+          wrapper_el.appendChild(item_label)
+          wrapper_el.appendChild(input_el)
+          root_el.appendChild(wrapper_el)
+        }
+        function insert_range(prompt, prompt_id, min, max){
+          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 checkbox_el = document.createElement("input")
+          checkbox_el.setAttribute("id", prompt_id+"_checkbox")
+          checkbox_el.setAttribute("type", "checkbox")
+
+          let input_el = document.createElement("input")
+          input_el.setAttribute("id", prompt_id)
+          input_el.setAttribute("type", "range")
+          input_el.setAttribute("min", min)
+          input_el.setAttribute("max", max)
+          input_el.setAttribute("value", Math.floor((max+min)/2))
+          wrapper_el.appendChild(item_label)
+          wrapper_el.appendChild(checkbox_el)
+          wrapper_el.appendChild(input_el)
+          root_el.appendChild(wrapper_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;
+		}
+	    })
+          })
+
+          fetch("/books").then(res => res.json()).then(data => {
+            data.forEach(book => insert_book(book))
+          })
+        }
+      </script>
+    </div>
+  </body>
+</html>
author	Mark Powers <mark@marks.kitchen>	2023-01-02 21:36:54 -0600
committer	Mark Powers <mark@marks.kitchen>	2023-01-02 21:36:54 -0600
commit	d0969bd6886a81dc59c5c02b12468a97b3c4cf58 (patch)
tree	ef44a9d1a0cf29e582f5eff90f5f6a33092fd58f /index.html