1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!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.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>
|
