dustyp
/
track-gopher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add bootstrap css

Browse Source
main
DustyP 9 months ago
parent d47247bf5a
commit 57ccc7237d
1 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File

60
web/templates/index.templ
Unescape View File

@ -7,43 +7,46 @@ templ Index() {
<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" />
<title>Derby Race Timer</title> <title>Derby Race Timer</title>
<link href="/static/css/tailwind.css" rel="stylesheet" /> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/js/htmx.min.js"></script> <script src="/static/js/htmx.min.js"></script>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head> </head>
<body class="bg-gray-100 min-h-screen"> <body class="bg-light">
<div class="container mx-auto px-4 py-8"> <div class="container py-4">
<header class="mb-8"> <header class="mb-4">
<h1 class="text-3xl font-bold text-center">Derby Race Timer</h1> <h1 class="text-center">Derby Race Timer</h1>
</header> </header>
<div class="mb-6 flex justify-center"> <div class="mb-4 text-center">
<div id="race-status" class="px-4 py-2 rounded-full text-white bg-blue-600">Ready</div> <div id="race-status" class="badge bg-primary fs-5 px-3 py-2">Ready</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-4">
@laneComponents() @laneComponents()
</div> </div>
<div class="flex justify-center space-x-4"> <div class="d-flex justify-content-center gap-3">
<button <button
hx-post="/api/reset" hx-post="/api/reset"
hx-swap="none" hx-swap="none"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> class="btn btn-primary">
Reset Race Reset Race
</button> </button>
<button <button
hx-post="/api/force-end" hx-post="/api/force-end"
hx-swap="none" hx-swap="none"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> class="btn btn-danger">
Force End Race Force End Race
</button> </button>
</div> </div>
</div> </div>
<script> <script>
// Set up SSE connection
console.log("Setting up SSE connection..."); console.log("Setting up SSE connection...");
// Set up SSE connection
const eventSource = new EventSource('/api/events'); const eventSource = new EventSource('/api/events');
eventSource.onopen = function() { eventSource.onopen = function() {
@ -65,12 +68,12 @@ templ Index() {
const lane = document.getElementById(`lane-${laneFinishData.lane}`); const lane = document.getElementById(`lane-${laneFinishData.lane}`);
if (lane) { if (lane) {
console.log(`Updating lane ${laneFinishData.lane} with time ${laneFinishData.time}`); console.log(`Updating lane ${laneFinishData.lane} with time ${laneFinishData.time}`);
lane.classList.add('finished'); lane.classList.add('bg-success-subtle');
lane.querySelector('.time').textContent = laneFinishData.time.toFixed(4); lane.querySelector('.time').textContent = laneFinishData.time.toFixed(4);
const placeEl = lane.querySelector('.place'); const placeEl = lane.querySelector('.place');
placeEl.textContent = `${getOrdinal(laneFinishData.place)} Place`; placeEl.textContent = `${getOrdinal(laneFinishData.place)} Place`;
placeEl.classList.remove('hidden'); placeEl.classList.remove('d-none');
} else { } else {
console.error(`Lane element not found for lane ${laneFinishData.lane}`); console.error(`Lane element not found for lane ${laneFinishData.lane}`);
} }
@ -84,28 +87,29 @@ templ Index() {
try { try {
const statusData = JSON.parse(event.data); const statusData = JSON.parse(event.data);
let statusText = 'Unknown'; let statusText = 'Unknown';
let statusClass = 'bg-gray-500'; let statusClass = 'bg-secondary';
if (statusData.status === 'idle') { if (statusData.status === 'idle') {
statusText = 'Ready'; statusText = 'Ready';
statusClass = 'bg-blue-600'; statusClass = 'bg-primary';
// Reset all lanes // Reset all lanes
document.querySelectorAll('.lane').forEach(lane => { document.querySelectorAll('.lane').forEach(lane => {
lane.classList.remove('finished'); lane.classList.remove('bg-success-subtle');
lane.querySelector('.time').textContent = '--.--.---'; lane.querySelector('.time').textContent = '--.--.---';
lane.querySelector('.place').classList.add('hidden'); lane.querySelector('.place').classList.add('d-none');
}); });
} else if (statusData.status === 'running') { } else if (statusData.status === 'running') {
statusText = 'Race Running'; statusText = 'Race Running';
statusClass = 'bg-green-600'; statusClass = 'bg-success';
} else if (statusData.status === 'finished') { } else if (statusData.status === 'finished') {
statusText = 'Race Complete'; statusText = 'Race Complete';
statusClass = 'bg-purple-600'; statusClass = 'bg-info';
} }
document.getElementById('race-status').textContent = statusText; const statusEl = document.getElementById('race-status');
document.getElementById('race-status').className = `px-4 py-2 rounded-full text-white ${statusClass}`; statusEl.textContent = statusText;
statusEl.className = `badge fs-5 px-3 py-2 ${statusClass}`;
} catch (error) { } catch (error) {
console.error("Error processing status event:", error); console.error("Error processing status event:", error);
} }
@ -128,9 +132,13 @@ templ laneComponents() {
} }
templ laneComponent(lane int) { templ laneComponent(lane int) {
<div id={ "lane-" + string(rune('0' + lane)) } class="lane bg-white p-4 rounded shadow"> <div class="col">
<h2 class="text-xl font-semibold mb-2">Lane { string(rune('0' + lane)) }</h2> <div id={ "lane-" + string(rune('0' + lane)) } class="lane card h-100">
<div class="text-3xl font-mono mb-2 time">--.--.---</div> <div class="card-body text-center">
<div class="place text-lg font-bold text-green-600 hidden"></div> <h5 class="card-title">Lane { string(rune('0' + lane)) }</h5>
<div class="time display-6 font-monospace my-3">--.--.---</div>
<div class="place badge bg-success fs-6 d-none"></div>
</div>
</div>
</div> </div>
} }
Write Preview
Loading…
Cancel
Save