[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="#" 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>
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');
	35	listItem.innerHTML = proposal.title + ' (' + proposal.total_occurrences + ' votes) <a href="#" 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>