[rbdr/crowdantine] / index.html

<!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="#add-' + proposal.id + '" 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
          .sort((a, b) => b.total_occurrences - a.total_occurrences)
          .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>
Commit	Line	Data
6c43b90f BB	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');
636c2ad4	35	listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#add-' + proposal.id + '" onclick="createProposal(\'' + proposal.title.replace(/'/g, '\\\'')+ '\')">I agree.</a> </li>'
6c43b90f BB	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
910bdeae BB	48	parsedResponse.result.items
	49	.sort((a, b) => b.total_occurrences - a.total_occurrences)
	50	.forEach((proposal) => {
6c43b90f BB	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>