1 files changed, 140 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..077a8e0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Rubén Beltrán del Río">
+    <meta name="description" content="crowdsourcing quarantine software">
+
+    <meta name="theme-color" content="#ffffff">
+
+    <title>Help me decide what to do during quarantine</title>
+
+    <script>
+
+      var kProjectAccessToken = 'd42555177ceb4395a2679dae0c622100';
+      var kReadToken = 'e5c2d4b6ceab453aaf38f6930e6550cf';
+
+      /*
+       * Fetches the proposals
+       */
+      var fetchProposals = function() {
+
+        var request = new XMLHttpRequest();
+        request.addEventListener('load', renderEvents);
+        request.open('GET', 'https://api.rollbar.com/api/1/items/?access_token=' + kReadToken + '&environment=production&status=active');
+        request.send();
+      };
+
+      /*
+       * Given a single proposal, generates HTML
+       */
+      var generateProposalHTML = function(proposal) {
+
+        var listItem = document.createElement('li');
+        listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#" onclick="createProposal(\'' + proposal.title.replace(/'/g, '\\\'')+ '\')">I agree.</a> </li>'
+        return listItem;
+      };
+
+      /*
+       * Renders the events from the rollbar response
+       */
+      var renderEvents = function(response) {
+
+        const parsedResponse = JSON.parse(this.response);
+
+        const container = document.getElementById('proposals');
+
+        parsedResponse.result.items.forEach((proposal) => {
+
+          container.appendChild(generateProposalHTML(proposal));
+        });
+      }
+
+      /*
+       * Simple dumb guard for multi-voting, stores a value.
+       */
+
+      var guard = function(proposal) {
+        if (localStorage.getItem(proposal)) {
+          return false;
+        }
+
+        localStorage.setItem(proposal, true);
+        return true;
+      }
+
+      /*
+       * Creates a proposal in rollbar
+       */
+      var createProposal = function(proposal) {
+
+        if (guard(proposal)) {
+
+          var request = new XMLHttpRequest();
+          request.addEventListener('load', () => location.reload());
+          request.open('POST', 'https://api.rollbar.com/api/1/item/');
+          request.send(JSON.stringify({
+            access_token: kProjectAccessToken,
+            data: {
+              environment: "production",
+              body: {
+                message: {
+                  body: proposal
+                }
+              },
+              platform: "client"
+            }
+          }));
+
+          return;
+        }
+
+        location.reload();
+      }
+
+      /*
+       * Submits a new proposal
+       */
+      var onSubmit = function(event) {
+
+        event.preventDefault();
+        var proposal = event.target.querySelector('[name="proposal"]').value;
+
+        if (!proposal ) {
+          alert("please. be serious")
+          return false;
+        }
+
+        createProposal(proposal);
+        setTimeout(Location.reload, 100);
+      };
+
+      /*
+       * Main entry point
+       */
+      var main = function(event) {
+
+        var form = document.querySelector('form');
+        form.addEventListener('submit', onSubmit);
+
+        fetchProposals();
+      };
+
+      window.addEventListener('load', main);
+    </script>
+  </head>
+  <body>
+    <h1>Help me decide what to do during quarantine</h1>
+    <p>Vote on the recommendations, or <a href="#add">add one</a>.</p>
+    <ul id="proposals"></ul>
+    <h1 id="add">Add a recommendation</h1>
+    <form>
+      <p>
+        <label for="proposal">You should...</label>
+        <input name="proposal">
+      </p>
+      <input type="submit" value="Do it.">
+    </form>
+  </body>
+</html>