2022-02-22 20:34:53 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>lassulus radio news</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main {
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 2fr 1fr;
|
|
|
|
|
grid-gap: 2em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#news-list ul {
|
|
|
|
|
list-style: none;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#news-list li {
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#news-list time {
|
|
|
|
|
display: block;
|
|
|
|
|
color: grey;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form label {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form input,
|
|
|
|
|
form textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
|
main {
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
2022-05-25 17:05:19 +02:00
|
|
|
const newsEndpoint = "http://radio-news.r";
|
2022-02-22 20:34:53 +01:00
|
|
|
|
|
|
|
|
function isoString(date) {
|
|
|
|
|
return date.toISOString().slice(0, -5) + "Z";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setNextNews() {
|
|
|
|
|
document.getElementById("next-news").innerHTML = (
|
|
|
|
|
60 - new Date().getUTCMinutes()
|
|
|
|
|
).toString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setInterval(setNextNews, 6000);
|
|
|
|
|
|
|
|
|
|
function fetchNews() {
|
|
|
|
|
fetch(newsEndpoint).then((response) => {
|
|
|
|
|
response.json().then((news) => {
|
|
|
|
|
const newsList = document.getElementById("news-list");
|
|
|
|
|
newsList.innerHTML = "";
|
|
|
|
|
const ul = document.createElement("ul");
|
|
|
|
|
for (const newsItem of news) {
|
|
|
|
|
const start = new Date(newsItem.from);
|
|
|
|
|
const end = new Date(newsItem.to);
|
|
|
|
|
|
|
|
|
|
const li = document.createElement("li");
|
|
|
|
|
|
|
|
|
|
const startDate = document.createElement("time");
|
|
|
|
|
startDate.className = "start";
|
2022-06-06 17:12:50 +02:00
|
|
|
startDate.title = isoString(start);
|
2022-02-22 20:34:53 +01:00
|
|
|
startDate.setAttribute("datetime", isoString(start));
|
2022-06-06 17:12:50 +02:00
|
|
|
startDate.appendChild(
|
|
|
|
|
document.createTextNode(start.toLocaleString())
|
|
|
|
|
);
|
2022-02-22 20:34:53 +01:00
|
|
|
|
|
|
|
|
const endDate = document.createElement("time");
|
|
|
|
|
endDate.className = "end";
|
2022-06-06 17:12:50 +02:00
|
|
|
endDate.title = isoString(end);
|
2022-02-22 20:34:53 +01:00
|
|
|
endDate.setAttribute("datetime", isoString(end));
|
2022-06-06 17:12:50 +02:00
|
|
|
endDate.appendChild(
|
|
|
|
|
document.createTextNode(end.toLocaleString())
|
|
|
|
|
);
|
2022-02-22 20:34:53 +01:00
|
|
|
|
|
|
|
|
li.appendChild(document.createTextNode(newsItem.text));
|
|
|
|
|
li.appendChild(startDate);
|
|
|
|
|
li.appendChild(endDate);
|
|
|
|
|
ul.appendChild(li);
|
|
|
|
|
}
|
|
|
|
|
newsList.appendChild(ul);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sendNews(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const formData = new FormData(event.target);
|
|
|
|
|
|
|
|
|
|
const request = new XMLHttpRequest();
|
|
|
|
|
request.open("POST", newsEndpoint, false); // synchronous
|
|
|
|
|
request.send(
|
|
|
|
|
JSON.stringify({
|
2022-06-06 17:12:50 +02:00
|
|
|
from: isoString(new Date(formData.get("from"))),
|
|
|
|
|
to: isoString(new Date(formData.get("to"))),
|
2022-02-22 20:34:53 +01:00
|
|
|
text: formData.get("text"),
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
location.reload();
|
|
|
|
|
}
|
|
|
|
|
|
2022-06-06 17:12:50 +02:00
|
|
|
const pad2 = (int) => (int < 10 ? `0${int}` : int.toString());
|
|
|
|
|
|
|
|
|
|
const localIsoString = (date) =>
|
|
|
|
|
`${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(
|
|
|
|
|
date.getDate()
|
|
|
|
|
)}T${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
|
|
|
|
|
|
2022-05-25 13:13:40 +02:00
|
|
|
function setDate() {
|
|
|
|
|
let now = new Date();
|
2022-06-06 17:12:50 +02:00
|
|
|
document.getElementById("time-from").value = localIsoString(now);
|
2022-05-25 13:13:40 +02:00
|
|
|
|
|
|
|
|
now.setHours(now.getHours() + 1);
|
2022-06-06 17:12:50 +02:00
|
|
|
document.getElementById("time-to").value = localIsoString(now);
|
2022-05-25 13:13:40 +02:00
|
|
|
}
|
|
|
|
|
|
2022-02-22 20:34:53 +01:00
|
|
|
window.onload = () => {
|
2022-05-25 13:13:40 +02:00
|
|
|
setDate();
|
2022-02-22 20:34:53 +01:00
|
|
|
setNextNews();
|
|
|
|
|
fetchNews();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<section>
|
|
|
|
|
<h1>Submit news</h1>
|
|
|
|
|
<form onsubmit="sendNews(event)">
|
2022-06-06 17:12:50 +02:00
|
|
|
<label>Start time</label>
|
2022-05-25 13:13:40 +02:00
|
|
|
<input type="datetime-local" id="time-from" name="from" required />
|
2022-06-06 17:12:50 +02:00
|
|
|
<label>End time</label>
|
2022-05-25 13:13:40 +02:00
|
|
|
<input type="datetime-local" id="time-to" name="to" required />
|
2022-02-22 20:34:53 +01:00
|
|
|
<label>News text</label>
|
|
|
|
|
<textarea name="text" rows="10" required></textarea>
|
|
|
|
|
<input type="submit" />
|
|
|
|
|
</form>
|
|
|
|
|
Next news report should start in <span id="next-news"></span> minutes.
|
|
|
|
|
</section>
|
|
|
|
|
<aside>
|
|
|
|
|
<h1>Planned news</h1>
|
|
|
|
|
<div id="news-list">
|
|
|
|
|
<em>No news planned yet.</em>
|
|
|
|
|
</div>
|
|
|
|
|
</aside>
|
|
|
|
|
</main>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
