Skip to content

Commit 4c9be39

Browse files
zucchinidevzucchinidev
committed
Create minimum frontend to visualize, create and delete surveys.
1 parent 15456ca commit 4c9be39

File tree

6 files changed

+142
-101
lines changed

6 files changed

+142
-101
lines changed

‎web/public/index.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,6 @@ <h1>Polls</h1>
1616
</div>
1717
<div class="col-md-4"></div>
1818
</div>
19-
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
20-
<script>
21-
$(function () {
22-
var update = function () {
23-
$.get("http://localhost:8080/polls/?key=abc123", null, null, "json")
24-
.done(function (polls) {
25-
$("#polls").empty();
26-
for (var p in polls) {
27-
var poll = polls[p];
28-
$("#polls").append(
29-
$("<li>").append(
30-
$("<a>")
31-
.attr("href", "view.html?poll=polls/" + poll.id)
32-
.text(poll.title)
33-
)
34-
)
35-
}
36-
}
37-
);
38-
window.setTimeout(update, 10000);
39-
}
40-
update();
41-
});
42-
</script>
19+
<script src="js/index.js"></script>
4320
</body>
4421
</html>

‎web/public/js/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use strict';
2+
3+
(function () {
4+
const $ = document.querySelector.bind(document)
5+
6+
function createLink (id, title) {
7+
const href = `view.html?poll=polls/${id}`
8+
const link = document.createElement('a')
9+
link.setAttribute('href', href)
10+
link.textContent = title
11+
return link
12+
}
13+
14+
function renderPolls (polls) {
15+
const $polls = $('#polls')
16+
$polls.innerHTML = ''
17+
for (const {id, title} of polls) {
18+
const link = createLink(id, title)
19+
const item = document.createElement('li')
20+
item.appendChild(link)
21+
$polls.appendChild(item)
22+
}
23+
}
24+
25+
function showError (err) {
26+
console.log(err)
27+
}
28+
29+
function update () {
30+
const url = 'http://localhost:8080/polls/?key=abc123'
31+
fetch(url).then(response => response.json()).then(renderPolls).catch(showError)
32+
window.setTimeout(update, 10000)
33+
}
34+
35+
window.addEventListener('load', update)
36+
})()

‎web/public/js/new.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
(function () {
4+
const $ = document.querySelector.bind(document)
5+
6+
function getRequestOptions () {
7+
const title = $('input[id="title"]').value
8+
const optionsValue = $('input[id="options"]').value
9+
const options = optionsValue.split(',').map(opt => opt.trim())
10+
return {
11+
method: 'POST',
12+
body: JSON.stringify({ title, options }),
13+
headers: { 'Content-Type': 'application/json' }
14+
}
15+
}
16+
17+
function init () {
18+
const form = $('form#poll')
19+
form.addEventListener('submit', event => {
20+
event.preventDefault()
21+
const url = 'http://localhost:8080/polls/?key=abc123'
22+
const postOptions = getRequestOptions()
23+
fetch(url, postOptions).then(response => {
24+
location.href = `view.html?poll=${response.headers.get('Location')}`
25+
})
26+
})
27+
}
28+
29+
window.addEventListener('load', init)
30+
})()

‎web/public/js/view.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use strict';
2+
3+
(function () {
4+
const $ = document.querySelector.bind(document)
5+
let chart
6+
let $options
7+
let $title
8+
9+
function onInit () {
10+
$options = $('#options')
11+
$title = $('[data-field="title"]')
12+
chart = new google.visualization.PieChart($('#chart'))
13+
const pollId = new URL(location.href).searchParams.get('poll')
14+
const url = `http://localhost:8080/${pollId}?key=abc123`
15+
16+
$('#delete').addEventListener('click', () => {
17+
if (confirm('Sure?')) {
18+
fetch(url, { method: 'DELETE' }).then(() => location.href = '/').catch(err => console.log(err))
19+
}
20+
})
21+
update(url)
22+
}
23+
24+
function getItemListDomElements () {
25+
const $li = document.createElement('li')
26+
const $small = document.createElement('small')
27+
const $span = document.createElement('span')
28+
$small.classList.add('label', 'label-default')
29+
return { $small, $span, $li }
30+
}
31+
32+
function renderResultItems ($options, key, value) {
33+
const { $small, $span, $li } = getItemListDomElements()
34+
$small.textContent = value
35+
$span.textContent = key
36+
$li.appendChild($small)
37+
$li.appendChild($span)
38+
$options.appendChild($li)
39+
}
40+
41+
function update (url) {
42+
const $options = $('#options')
43+
const $title = $('[data-field="title"]')
44+
fetch(url).then(response => response.json()).then(polls => {
45+
const poll = polls[0]
46+
$options.textContent = poll.title
47+
$title.innerHTML = ''
48+
poll.options.forEach(option => {
49+
const value = poll.results && poll.results[option] || 0
50+
renderResultItems($options, option, value)
51+
if (poll.results) {
52+
const data = new google.visualization.DataTable()
53+
data.addColumn('string', 'Option')
54+
data.addColumn('number', 'Votes')
55+
for (const row of Object.entries(poll.results)) {
56+
data.addRow(row)
57+
}
58+
chart.draw(data, { is3D: true })
59+
}
60+
})
61+
})
62+
window.setTimeout(update.bind(null, url), 1000)
63+
}
64+
65+
google.load('visualization', '1.0', { 'packages': ['corechart'] })
66+
google.setOnLoadCallback(function () { onInit()})
67+
})()

‎web/public/new.html‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,6 @@ <h2>Create Poll</h2>
2323
</form>
2424
<div class="col-md-4"></div>
2525
</div>
26-
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
27-
<script>
28-
$(function(){
29-
var form = $("form#poll");
30-
form.submit(function(e){
31-
e.preventDefault();
32-
var title = form.find("input[id='title']").val();
33-
var options = form.find("input[id='options']").val();
34-
options = options.split(",");
35-
for (var opt in options) {
36-
options[opt] = options[opt].trim();
37-
}
38-
$.post("http://localhost:8080/polls/?key=abc123",
39-
JSON.stringify({
40-
title: title, options: options
41-
})
42-
).fail(function(){
43-
alert("Failed to create poll");
44-
}).done(function(d, s, r){
45-
location.href = "view.html?poll=" + r.getResponseHeader("Location");
46-
});
47-
});
48-
});
49-
</script>
26+
<script src="js/new.js"></script>
5027
</body>
5128
</html>

‎web/public/view.html‎

Lines changed: 7 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,18 @@
44
<meta charset="UTF-8">
55
<title>View Poll</title>
66
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
7+
<style>
8+
.options .label {
9+
margin-right: 1rem;
10+
}
11+
</style>
712
</head>
813
<body>
914
<div class="container">
1015
<div class="col-md-4"></div>
1116
<div class="col-md-4">
1217
<h1 data-field="title">...</h1>
13-
<ul id="options"></ul>
18+
<ul id="options" class="options"></ul>
1419
<div id="chart"></div>
1520
<div>
1621
<button class="btn btn-sm" id="delete">Delete this poll</button>
@@ -19,57 +24,6 @@ <h1 data-field="title">...</h1>
1924
<div class="col-md-4"></div>
2025
</div>
2126
<script src="//www.google.com/jsapi"></script>
22-
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
23-
<script>
24-
google.load('visualization', '1.0', {'packages':['corechart']});
25-
google.setOnLoadCallback(function(){
26-
$(function(){
27-
var chart;
28-
var poll = location.href.split("poll=")[1];
29-
$("#delete").click(function(){
30-
if (confirm("Sure?")) {
31-
$.ajax({
32-
url:"http://localhost:8080/"+poll+"?key=abc123",
33-
type:"DELETE"
34-
})
35-
.done(function(){
36-
location.href = "/";
37-
})
38-
}
39-
});
40-
var update = function(){
41-
$.get("http://localhost:8080/"+poll+"?key=abc123", null, null, "json")
42-
.done(function(polls){
43-
var poll = polls[0];
44-
$('[data-field="title"]').text(poll.title);
45-
$("#options").empty();
46-
for (var o in poll.results) {
47-
$("#options").append(
48-
$("<li>").append(
49-
$("<small>").addClass("label label-default").text(poll.results[o]),
50-
" ", o
51-
)
52-
)
53-
}
54-
if (poll.results) {
55-
var data = new google.visualization.DataTable();
56-
data.addColumn("string","Option");
57-
data.addColumn("number","Votes");
58-
for (var o in poll.results) {
59-
data.addRow([o, poll.results[o]])
60-
}
61-
if (!chart) {
62-
chart = new google.visualization.PieChart(document.getElementById('chart'));
63-
}
64-
chart.draw(data, {is3D: true});
65-
}
66-
}
67-
);
68-
window.setTimeout(update, 1000);
69-
};
70-
update();
71-
});
72-
});
73-
</script>
27+
<script src="js/view.js"></script>
7428
</body>
7529
</html>

0 commit comments

Comments
 (0)