115 lines
3.5 KiB
HTML
115 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">-->
|
|
<link rel="stylesheet" href="/light.css">
|
|
<style>
|
|
body {
|
|
font-size: 1.25rem;
|
|
}
|
|
:not(#answers-list[hidden]) + #question,
|
|
:not(#answers-list[hidden]) + #question + #answer-form,
|
|
:not(#question-options:empty) + #answers-freeform
|
|
{
|
|
display: none;
|
|
}
|
|
</style>
|
|
</header>
|
|
<body>
|
|
<div id="answers-list"></div>
|
|
<div id="question">
|
|
<h1><span id="question-text"></span></h1>
|
|
</div>
|
|
<form id="answer-form" action="#" onsubmit="submitAnswersForm(this); return false;">
|
|
<div id="question-options"></div>
|
|
<input id="answers-freeform" type="text" hidden/>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</body>
|
|
<footer>
|
|
<script>
|
|
let g_questions = [];
|
|
let g_live_question = {};
|
|
|
|
function pollState() {
|
|
http("GET", "/api/v1/questions", (body) => {
|
|
if (!body)
|
|
return;
|
|
g_questions = JSON.parse(body);
|
|
console.log("TODO polled state:", body);
|
|
pollLiveAnswer();
|
|
pollLiveQuestion();
|
|
});
|
|
}
|
|
|
|
function pollLiveQuestion() {
|
|
let live_questions = g_questions.filter((q) => q.Live);
|
|
if (live_questions) {
|
|
g_live_question = live_questions[0];
|
|
}
|
|
if (g_live_question) {
|
|
let options = "";
|
|
for (let i of g_live_question.Options)
|
|
options += `<div>
|
|
<input type="radio" value="${i}" name="g_live_question.Options" />
|
|
<label for="${i}">${i}</label>
|
|
</div>`
|
|
options = `<fieldset>${options}</fieldset>`;
|
|
if (document.getElementById("question-text").innerHTML != g_live_question.Text) {
|
|
document.getElementById("question-text").innerHTML = g_live_question.Text;
|
|
document.getElementById("question-options").innerHTML = options;
|
|
}
|
|
} else {
|
|
document.getElementById("question-text").innerHTML = "";
|
|
document.getElementById("question-options").innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function pollLiveAnswer() {
|
|
if (!g_live_question || !g_live_question.Closed) {
|
|
document.getElementById("answers-list").hidden = true;
|
|
return;
|
|
}
|
|
document.getElementById("answers-list").hidden = false;
|
|
http("GET", `/api/v1/questions/${g_live_question.ID}/answers`, (body) => {
|
|
let answers = JSON.parse(body).map((a) => a.Text);
|
|
answers.sort((a, b) => {
|
|
a = a.toLowerCase();
|
|
b = b.toLowerCase();
|
|
return (a > b) - (a < b)
|
|
});
|
|
let result = "";
|
|
for (let i of answers)
|
|
result += `<li>${i}</li>`;
|
|
document.getElementById("answers-list").innerHTML = `<ul>${result}</ul>`;
|
|
});
|
|
}
|
|
|
|
function submitAnswersForm(form) {
|
|
console.log("TODO submitAnswersForm")
|
|
}
|
|
|
|
function http(method, remote, callback, body) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
callback(xmlhttp.responseText, xmlhttp.status)
|
|
}
|
|
};
|
|
xmlhttp.open(method, remote, true);
|
|
if(typeof body == "undefined") {
|
|
body = null
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
|
|
pollState();
|
|
setInterval(() => {
|
|
try {
|
|
pollState();
|
|
} catch {}
|
|
}, 1000);
|
|
</script>
|
|
</footer>
|
|
</html>
|