git.r.bdr.sh - rbdr/crowdantine/blob - index.html

   1 <!doctype html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6     <meta name="author" content="Rubén Beltrán del Río">
   7     <meta name="description" content="crowdsourcing quarantine software">
   8
   9     <meta name="theme-color" content="#ffffff">
  10
  11     <title>Help me decide what to do during quarantine</title>
  12
  13     <script>
  14
  15       var kProjectAccessToken = 'd42555177ceb4395a2679dae0c622100';
  16       var kReadToken = 'e5c2d4b6ceab453aaf38f6930e6550cf';
  17
  18       /*
  19        * Fetches the proposals
  20        */
  21       var fetchProposals = function() {
  22
  23         var request = new XMLHttpRequest();
  24         request.addEventListener('load', renderEvents);
  25         request.open('GET', 'https://api.rollbar.com/api/1/items/?access_token=' + kReadToken + '&environment=production&status=active');
  26         request.send();
  27       };
  28
  29       /*
  30        * Given a single proposal, generates HTML
  31        */
  32       var generateProposalHTML = function(proposal) {
  33
  34         var listItem = document.createElement('li');
  35         listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#add-' + proposal.id + '" onclick="createProposal(\'' + proposal.title.replace(/'/g, '\\\'')+ '\')">I agree.</a> </li>'
  36         return listItem;
  37       };
  38
  39       /*
  40        * Renders the events from the rollbar response
  41        */
  42       var renderEvents = function(response) {
  43
  44         const parsedResponse = JSON.parse(this.response);
  45
  46         const container = document.getElementById('proposals');
  47
  48         parsedResponse.result.items.forEach((proposal) => {
  49
  50           container.appendChild(generateProposalHTML(proposal));
  51         });
  52       }
  53
  54       /*
  55        * Simple dumb guard for multi-voting, stores a value.
  56        */
  57
  58       var guard = function(proposal) {
  59         if (localStorage.getItem(proposal)) {
  60           return false;
  61         }
  62
  63         localStorage.setItem(proposal, true);
  64         return true;
  65       }
  66
  67       /*
  68        * Creates a proposal in rollbar
  69        */
  70       var createProposal = function(proposal) {
  71
  72         if (guard(proposal)) {
  73
  74           var request = new XMLHttpRequest();
  75           request.addEventListener('load', () => location.reload());
  76           request.open('POST', 'https://api.rollbar.com/api/1/item/');
  77           request.send(JSON.stringify({
  78             access_token: kProjectAccessToken,
  79             data: {
  80               environment: "production",
  81               body: {
  82                 message: {
  83                   body: proposal
  84                 }
  85               },
  86               platform: "client"
  87             }
  88           }));
  89
  90           return;
  91         }
  92
  93         location.reload();
  94       }
  95
  96       /*
  97        * Submits a new proposal
  98        */
  99       var onSubmit = function(event) {
 100
 101         event.preventDefault();
 102         var proposal = event.target.querySelector('[name="proposal"]').value;
 103
 104         if (!proposal ) {
 105           alert("please. be serious")
 106           return false;
 107         }
 108
 109         createProposal(proposal);
 110         setTimeout(Location.reload, 100);
 111       };
 112
 113       /*
 114        * Main entry point
 115        */
 116       var main = function(event) {
 117
 118         var form = document.querySelector('form');
 119         form.addEventListener('submit', onSubmit);
 120
 121         fetchProposals();
 122       };
 123
 124       window.addEventListener('load', main);
 125     </script>
 126   </head>
 127   <body>
 128     <h1>Help me decide what to do during quarantine</h1>
 129     <p>Vote on the recommendations, or <a href="#add">add one</a>.</p>
 130     <ul id="proposals"></ul>
 131     <h1 id="add">Add a recommendation</h1>
 132     <form>
 133       <p>
 134         <label for="proposal">You should...</label>
 135         <input name="proposal">
 136       </p>
 137       <input type="submit" value="Do it.">
 138     </form>
 139   </body>
 140 </html>