+<!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>
git.r.bdr.sh / rbdr / crowdantine / commitdiff