67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Weight Tracker</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<script>
|
|
function fillCurrentDateTime() {
|
|
// Fill date and time with current values
|
|
const now = new Date();
|
|
|
|
// Format date as YYYY-MM-DD
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
const day = String(now.getDate()).padStart(2, '0');
|
|
document.getElementById('date').value = `${year}-${month}-${day}`;
|
|
|
|
// Format time as HH:MM
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
document.getElementById('time').value = `${hours}:${minutes}`;
|
|
|
|
// Fill weight with the latest weight from the list
|
|
const weightElements = document.querySelectorAll('#weights p');
|
|
if (weightElements.length > 0) {
|
|
const latestWeightText = weightElements[0].textContent;
|
|
// Extract weight value from format "YYYY-MM-DD: XX.X kg by username"
|
|
const match = latestWeightText.match(/(\d+\.?\d*)\s*kg/);
|
|
if (match) {
|
|
document.getElementById('weight').value = match[1];
|
|
}
|
|
}
|
|
}
|
|
|
|
function showInputDialog() {
|
|
fillCurrentDateTime();
|
|
document.getElementById('inputDialog').showModal();
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Weight Tracker</h1>
|
|
<div id="weights">
|
|
{% for weight in weights %}
|
|
<p>{{ weight.date }}: {{ weight.weight }} kg by {{ weight.user_id }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
<button onclick="showInputDialog()">Add Weight</button>
|
|
<dialog id="inputDialog">
|
|
<h1>Add Weight</h1>
|
|
<form hx-post="/input" hx-target="#weights" hx-swap="innerHTML"
|
|
hx-on:htmx:after-request="document.getElementById('inputDialog').close()">
|
|
<label for="date">Date:</label>
|
|
<input type="date" id="date" name="date" required><br>
|
|
<label for="time">Time:</label>
|
|
<input type="time" id="time" name="time" required><br>
|
|
<label for="weight">Weight (kg):</label>
|
|
<input type="number" step="0.1" id="weight" name="weight" required><br>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
</dialog>
|
|
</body>
|
|
|
|
</html> |