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
  49           .sort((a, b) => b.total_occurrences - a.total_occurrences)
  50           .forEach((proposal) => {
  51
  52           container.appendChild(generateProposalHTML(proposal));
  53         });
  54       }
  55
  56       /*
  57        * Simple dumb guard for multi-voting, stores a value.
  58        */
  59
  60       var guard = function(proposal) {
  61         if (localStorage.getItem(proposal)) {
  62           return false;
  63         }
  64
  65         localStorage.setItem(proposal, true);
  66         return true;
  67       }
  68
  69       /*
  70        * Creates a proposal in rollbar
  71        */
  72       var createProposal = function(proposal) {
  73
  74         if (guard(proposal)) {
  75
  76           var request = new XMLHttpRequest();
  77           request.addEventListener('load', () => location.reload());
  78           request.open('POST', 'https://api.rollbar.com/api/1/item/');
  79           request.send(JSON.stringify({
  80             access_token: kProjectAccessToken,
  81             data: {
  82               environment: "production",
  83               body: {
  84                 message: {
  85                   body: proposal
  86                 }
  87               },
  88               platform: "client"
  89             }
  90           }));
  91
  92           return;
  93         }
  94
  95         location.reload();
  96       }
  97
  98       /*
  99        * Submits a new proposal
 100        */
 101       var onSubmit = function(event) {
 102
 103         event.preventDefault();
 104         var proposal = event.target.querySelector('[name="proposal"]').value;
 105
 106         if (!proposal ) {
 107           alert("please. be serious")
 108           return false;
 109         }
 110
 111         createProposal(proposal);
 112         setTimeout(Location.reload, 100);
 113       };
 114
 115       /*
 116        * Main entry point
 117        */
 118       var main = function(event) {
 119
 120         var form = document.querySelector('form');
 121         form.addEventListener('submit', onSubmit);
 122
 123         fetchProposals();
 124       };
 125
 126       window.addEventListener('load', main);
 127     </script>
 128   </head>
 129   <body>
 130     <h1>Help me decide what to do during quarantine</h1>
 131     <p>Vote on the recommendations, or <a href="#add">add one</a>.</p>
 132     <ul id="proposals"></ul>
 133     <h1 id="add">Add a recommendation</h1>
 134     <form>
 135       <p>
 136         <label for="proposal">You should...</label>
 137         <input name="proposal">
 138       </p>
 139       <input type="submit" value="Do it.">
 140     </form>
 141   </body>
 142 </html>