From 2e970dcef28521f0ddfe3ad63b5d18ba5c74f4b7 Mon Sep 17 00:00:00 2001
From: Paul Liverman III <paul.liverman.iii@gmail.com>
Date: Tue, 24 Apr 2018 15:02:13 -0700
Subject: [PATCH] cleaning up JS/CSS

---
 static/index.js | 82 +++++++++++++++----------------------------------
 static/main.css | 15 +++------
 static/main.js  |  2 +-
 3 files changed, 29 insertions(+), 70 deletions(-)

diff --git a/static/index.js b/static/index.js
index c766119..b79f8a8 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,70 +1,36 @@
-function request(url) {
-  var xhr = new XMLHttpRequest();
-  xhr.open("POST", url, true);
-  xhr.setRequestHeader("Content-Type", "application/json");
-  return xhr;
-}
-
 function check(id) {
-  var checkbox = document.getElementById("task-" + id);
-  if (checkbox.checked) {
-    var xhr = request("/v1/do");
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === 4) {
-        data = JSON.parse(xhr.responseText);
-        if (data.task) {
-          $("#task-" + data.task.id).prop("checked", data.task.done);
-        } else {
-          console.log(data); // NOTE TEMPORARY (handle errors better!)
-        }
-      }
-    }
-    xhr.send(JSON.stringify({api_key: API_KEY, id: id}));
-  } else {
-    var xhr = request("/v1/undo");
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === 4) {
-        data = JSON.parse(xhr.responseText);
-        if (data.task) {
-          $("#task-" + data.task.id).prop("checked", data.task.done);
-        } else {
-          console.log(data); // NOTE TEMPORARY (handle errors better!)
-        }
-      }
-    }
-    xhr.send(JSON.stringify({api_key: API_KEY, id: id}));
+  let checkbox = $("#task-" + id);
+  let uri = "/v1/undo";
+  if (checkbox.prop("checked")) {
+    uri = "/v1/do";
   }
+  $.post(uri, {api_key: API_KEY, id: id}, function(data, status) {
+    if (status == "success") {
+      checkbox.prop("checked", data.task.done);
+    } else {
+      console.log(data); // NOTE TEMPORARY (need to handle errors better)
+    }
+  });
 }
 
 function new_task() {
-  var text = document.getElementById("new-task-input");
-  var xhr = request("/v1/new");
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      data = JSON.parse(xhr.responseText);
-      if (data.task) {
-        $("#new-task").before("<li><input type='checkbox' id='task-" + data.task.id + "' onchange='check(" + data.task.id + ")'> " + data.task.content + "</li>");
-      } else {
-        console.log(data); // NOTE TEMPORARY (handle errors better!)
-      }
+  let input = $("#new-task-input");
+  $.post("/v1/new", {api_key: API_KEY, content: input.prop("value")}, function(data, status) {
+    if (status == "success") {
+      $("#new-task").before("<li><input type='checkbox' id='task-" + data.task.id + "' onchange='check(" + data.task.id + ")'> " + data.task.content + "</li>");
+    } else {
+      console.log(data); // NOTE TEMPORARY (need to handle errors better)
     }
-  }
-  xhr.send(JSON.stringify({api_key: API_KEY, content: text.value}));
-
+  });
   return false; // prevent form submission
 }
 
 function new_api_key() {
-  var xhr = request("/new-api-key");
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      data = JSON.parse(xhr.responseText);
-      if (data.api_key) {
-        $("#new-api-key").before("<li>" + data.api_key.key + "</li>");
-      } else {
-        console.log(data); // NOTE TEMPORARY (handle errors better!)
-      }
+  $.get("/new-api-key", function(data, status) {
+    if (status == "success") {
+      $("#new-api-key").before("<li>" + data.api_key.key + "</li>");
+    } else {
+      console.log(data); // NOTE TEMPORARY (need to handle errors better)
     }
-  }
-  xhr.send(); // NOTE may need to send empty string or empty JSON object
+  });
 }
diff --git a/static/main.css b/static/main.css
index ee467d4..45f2f07 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,19 +1,12 @@
 .collapsible {
-  cursor: pointer;
   width: 100%;
-  /*border: none;*/
-  /*text-align: left;*/
-  /*outline: none;*/
-  /*font-size: 15px;*/
+  text-align: left;
+  cursor: pointer;
 }
 
-/*.active, .collapsible:hover {
-  background-color: #ccc;
-}*/
-
 .content {
-  /*padding: 0 18px;*/
+  padding: 1rem;
+  background-color: #eee;
   display: none;
   overflow: hidden;
-  /*background-color: #f1f1f1;*/
 }
diff --git a/static/main.js b/static/main.js
index 9458272..4c9f490 100644
--- a/static/main.js
+++ b/static/main.js
@@ -3,7 +3,7 @@ $(document).ready(function() {
 
   for (let i = 0; i < c.length; i++) {
     c[i].addEventListener("click", function() {
-      this.classList.toggle("active");
+      this.classList.toggle("button-outline");
       var content = this.nextElementSibling;
       if (content.style.display === "block") {
         content.style.display = "none";