Add experimental day view

This commit is contained in:
Andrew-71 2024-03-27 11:51:33 +03:00
parent 4d8cee17df
commit 0094534b31
5 changed files with 79 additions and 14 deletions

33
pages/day.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/public/favicon.ico">
<link rel="stylesheet" href="/public/main.css">
<script src="/public/date.js"></script>
<script src="/public/requests.js"></script>
<title>Hibiscus.txt</title>
</head>
<body>
<header>
<h1>🌺 Hibiscus.txt</h1>
<p id="status">Today is <span id="today-date">a place</span></p>
</header>
<main>
<h2 style="margin-bottom:0;"><label for="day">Viewing <span id="daytag"></span></label> | <a href="/days">Go back</a></h2>
<textarea id="day" cols="40" rows="15"></textarea>
</main>
<footer>
<p><a href="/">home </a> | <a href="/days">previous days</a> | <a href="/api/readme">readme.txt</a></p>
</footer>
<script defer>
updateDate()
beginDateUpdater()
loadDay()
</script>
</body>
</html>

View file

@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="icon" type="image/x-icon" href="/public/img/favicon.ico">--> <link rel="icon" type="image/x-icon" href="/public/favicon.ico">
<!-- <link rel="stylesheet" href="/public/css/main.css">--> <link rel="stylesheet" href="/public/main.css">
<title>Error 404 - Hibiscus</title> <title>Error 404</title>
</head> </head>
<body> <body>
<main> <main>

View file

@ -1,8 +1,17 @@
function formatDate(date) {
let dateFormat = new Intl.DateTimeFormat('en', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
return dateFormat.format(Date.parse(date))
}
// Set today's date // Set today's date
function updateDate() { function updateDate() {
let todayDate = new Date() let todayDate = new Date()
let timeField = document.getElementById("today-date") let timeField = document.getElementById("today-date")
timeField.innerText = todayDate.toISOString().split('T')[0] timeField.innerText = formatDate(todayDate.toISOString().split('T')[0])
} }

View file

@ -9,11 +9,7 @@ async function postData(url = "", data = "") {
referrerPolicy: "no-referrer", referrerPolicy: "no-referrer",
body: data, body: data,
}); });
if (response.ok) { return response
return response.text();
} else {
return response.status
}
} }
async function getData(url = "", data = "") { async function getData(url = "", data = "") {
@ -35,7 +31,7 @@ async function getData(url = "", data = "") {
function saveLog() { function saveLog() {
let logField = document.getElementById("log") let logField = document.getElementById("log")
postData("/api/log", logField.value).then((data) => { postData("/api/log", logField.value).then((data) => {
if (data !== 500) { if (data.ok) {
logField.value = "" logField.value = ""
} }
}); });
@ -44,7 +40,9 @@ function saveLog() {
function saveToday() { function saveToday() {
let logField = document.getElementById("day") let logField = document.getElementById("day")
postData("/api/today", logField.value).then((data) => { postData("/api/today", logField.value).then((data) => {
console.log(data); if (!data.ok) {
alert(`Error saving: ${data.text()}`)
}
}); });
} }
function loadToday() { function loadToday() {
@ -53,10 +51,10 @@ function loadToday() {
if (data === 404) { if (data === 404) {
dayField.value = "" dayField.value = ""
} else if (data === 401) { } else if (data === 401) {
dayField.enabled = false dayField.readOnly = true
dayField.value = "Unauthorized" dayField.value = "Unauthorized"
} else if (data === 500) { } else if (data === 500) {
dayField.enabled = false dayField.readOnly = true
dayField.value = "Internal server error" dayField.value = "Internal server error"
} else { } else {
dayField.value = data dayField.value = data
@ -76,9 +74,31 @@ function loadPrevious() {
data = JSON.parse(data).reverse() // Reverse: latest days first data = JSON.parse(data).reverse() // Reverse: latest days first
for (let i in data) { for (let i in data) {
let li = document.createElement("li"); let li = document.createElement("li");
li.innerHTML = `<a href="/api/day/${data[i]}">${data[i]}</a>` li.innerHTML = `<a href="/day?d=${data[i]}">${formatDate(data[i])}</a>` // Parse to human-readable
daysField.appendChild(li); daysField.appendChild(li);
} }
} }
}); });
}
function loadDay() {
const urlParams = new URLSearchParams(window.location.search);
const day = urlParams.get('d');
let dayTag = document.getElementById("daytag")
dayTag.innerText = formatDate(day)
let dayField = document.getElementById("day")
getData("/api/day/" + day, "").then((data) => {
if (data === 404) {
dayField.value = ""
} else if (data === 401) {
dayField.value = "Unauthorized"
} else if (data === 500) {
dayField.value = "Internal server error"
} else {
dayField.value = data
}
});
dayField.readOnly = true
} }

View file

@ -25,6 +25,9 @@ func Serve() {
r.Get("/days", func(w http.ResponseWriter, r *http.Request) { r.Get("/days", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "./pages/days.html") http.ServeFile(w, r, "./pages/days.html")
}) })
r.Get("/day", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "./pages/day.html")
})
// API ============= // API =============
apiRouter := chi.NewRouter() apiRouter := chi.NewRouter()