git.r.bdr.sh - rbdr/crowdantine/blame_incremental

... / ...

Commit	Line	Data
	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>