You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
448 lines
20 KiB
448 lines
20 KiB
package templates
|
|
|
|
import (
|
|
"track-gopher/models"
|
|
"fmt"
|
|
"strconv"
|
|
)
|
|
|
|
// RaceManage renders the race management view
|
|
templ RaceManage(groups []models.Group, currentGroup models.Group, heats []models.Heat, racers []models.Racer, currentHeatNum int, results []models.HeatResult) {
|
|
@Layout("Race Management") {
|
|
<div class="container-fluid mt-3">
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">Race Control</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="group-select" class="form-label">Racing Group</label>
|
|
<select id="group-select" class="form-select" hx-post="/api/race/set-group" hx-trigger="change" hx-swap="none">
|
|
for _, group := range groups {
|
|
<option value={ strconv.FormatInt(group.ID, 10) } selected?={ group.ID == currentGroup.ID }>
|
|
{ group.Name }
|
|
</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h5>Current Heat: { strconv.Itoa(currentHeatNum) } of { strconv.Itoa(len(heats)) }</h5>
|
|
<div class="btn-group" role="group">
|
|
<button id="prev-heat-btn" class="btn btn-secondary" hx-post="/api/race/previous-heat" hx-swap="none" disabled?={ currentHeatNum <= 1 }>
|
|
<i class="bi bi-arrow-left"></i> Previous Heat
|
|
</button>
|
|
<button id="next-heat-btn" class="btn btn-secondary" hx-post="/api/race/next-heat" hx-swap="none" disabled?={ currentHeatNum >= len(heats) }>
|
|
Next Heat <i class="bi bi-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h5>Timer Control</h5>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<h3 id="timer" class="me-3">0.000</h3>
|
|
<span id="status-indicator" class="badge mb-3 bg-secondary">Ready</span>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button class="btn btn-warning" onclick="resetTimer()">
|
|
<i class="bi bi-arrow-repeat"></i> Reset Timer
|
|
</button>
|
|
<button class="btn btn-danger" onclick="forceEndHeat()">
|
|
<i class="bi bi-flag-fill"></i> Force End
|
|
</button>
|
|
<button class="btn btn-info" hx-post="/api/race/rerun-heat" hx-swap="none">
|
|
<i class="bi bi-arrow-counterclockwise"></i> Re-Run Heat
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gate-status" class="alert alert-secondary">
|
|
<strong>Gate Status:</strong> <span id="gate-status-text">Unknown</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">Heat Results</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Heat</th>
|
|
<th>Lane 1</th>
|
|
<th>Lane 2</th>
|
|
<th>Lane 3</th>
|
|
<th>Lane 4</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
for _, result := range results {
|
|
<tr class={ "table-primary" }>
|
|
<td>{ strconv.Itoa(result.HeatNumber) }</td>
|
|
<td>{ fmt.Sprintf("%.4f", result.Lane1Time) } ({ strconv.Itoa(result.Lane1Position) })</td>
|
|
<td>{ fmt.Sprintf("%.4f", result.Lane2Time) } ({ strconv.Itoa(result.Lane2Position) })</td>
|
|
<td>{ fmt.Sprintf("%.4f", result.Lane3Time) } ({ strconv.Itoa(result.Lane3Position) })</td>
|
|
<td>{ fmt.Sprintf("%.4f", result.Lane4Time) } ({ strconv.Itoa(result.Lane4Position) })</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Heat Display -->
|
|
@currentHeatDisplay(heats, racers, currentHeatNum, results)
|
|
|
|
<!-- Next Heat Preview -->
|
|
if currentHeatNum < len(heats) {
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h4 class="mb-0">Next Heat: { strconv.Itoa(currentHeatNum + 1) }</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Lane</th>
|
|
<th>Racer</th>
|
|
<th>Car #</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
for _, heat := range heats {
|
|
if heat.HeatNum == currentHeatNum + 1 {
|
|
if heat.Lane1ID != nil {
|
|
@nextHeatRacer(1, *heat.Lane1ID, racers)
|
|
}
|
|
if heat.Lane2ID != nil {
|
|
@nextHeatRacer(2, *heat.Lane2ID, racers)
|
|
}
|
|
if heat.Lane3ID != nil {
|
|
@nextHeatRacer(3, *heat.Lane3ID, racers)
|
|
}
|
|
if heat.Lane4ID != nil {
|
|
@nextHeatRacer(4, *heat.Lane4ID, racers)
|
|
}
|
|
}
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<script>
|
|
// Set up SSE connection
|
|
console.log("Setting up SSE connection...");
|
|
|
|
const eventSource = new EventSource('/api/events');
|
|
|
|
eventSource.onopen = function() {
|
|
console.log("SSE connection opened");
|
|
};
|
|
|
|
eventSource.onerror = function(error) {
|
|
console.error("SSE connection error:", error);
|
|
};
|
|
|
|
eventSource.addEventListener('debug', function(event) {
|
|
console.log("Debug event received:", event.data);
|
|
});
|
|
|
|
eventSource.addEventListener('lane-finish', function(event) {
|
|
console.log("Lane finish event received:", event.data);
|
|
try {
|
|
const laneFinishData = JSON.parse(event.data);
|
|
const laneTimeElement = document.getElementById(`lane-${laneFinishData.lane}-time`);
|
|
if (laneTimeElement) {
|
|
laneTimeElement.textContent = laneFinishData.time.toFixed(4);
|
|
}
|
|
|
|
const lanePositionElement = document.getElementById(`lane-${laneFinishData.lane}-position`);
|
|
if (lanePositionElement) {
|
|
lanePositionElement.textContent = laneFinishData.place;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing lane finish event:", error);
|
|
}
|
|
});
|
|
|
|
eventSource.addEventListener('status', function(event) {
|
|
console.log("Status event received:", event.data);
|
|
try {
|
|
const statusData = JSON.parse(event.data);
|
|
let statusText = 'Unknown';
|
|
let statusClass = 'bg-secondary';
|
|
|
|
if (statusData.status === 'idle') {
|
|
statusText = 'Ready';
|
|
statusClass = 'bg-primary';
|
|
|
|
// Reset all times and positions
|
|
document.querySelectorAll('[id^="lane-"][id$="-time"]').forEach(el => {
|
|
el.textContent = '--.-';
|
|
});
|
|
|
|
document.querySelectorAll('[id^="lane-"][id$="-position"]').forEach(el => {
|
|
el.textContent = '-';
|
|
});
|
|
|
|
} else if (statusData.status === 'running') {
|
|
statusText = 'Race Running';
|
|
statusClass = 'bg-success';
|
|
} else if (statusData.status === 'finished') {
|
|
statusText = 'Race Complete';
|
|
statusClass = 'bg-info';
|
|
|
|
// Save heat results
|
|
saveHeatResults();
|
|
}
|
|
|
|
const statusIndicator = document.getElementById('status-indicator');
|
|
if (statusIndicator) {
|
|
statusIndicator.textContent = statusText;
|
|
statusIndicator.className = `badge mb-3 ${statusClass}`;
|
|
}
|
|
|
|
const timerDisplay = document.getElementById('timer');
|
|
if (timerDisplay && statusData.status === 'idle') {
|
|
timerDisplay.textContent = '0.000';
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing status event:", error);
|
|
}
|
|
});
|
|
|
|
// Admin socket for admin-specific events
|
|
const adminSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/admin`);
|
|
|
|
adminSocket.onmessage = function(event) {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data === 'heat-changed' || data === 'group-changed' || data === 'heat-rerun') {
|
|
// Reload the page when heat or group changes
|
|
window.location.reload();
|
|
}
|
|
};
|
|
|
|
// Add event listener for admin events
|
|
eventSource.addEventListener('admin', function(event) {
|
|
console.log("Admin event received:", event.data);
|
|
try {
|
|
const adminData = JSON.parse(event.data);
|
|
|
|
if (adminData.event === 'heat-changed' ||
|
|
adminData.event === 'group-changed' ||
|
|
adminData.event === 'heat-rerun') {
|
|
// Reload the page when heat or group changes
|
|
window.location.reload();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing admin event:", error);
|
|
}
|
|
});
|
|
|
|
// Function to reset the timer
|
|
function resetTimer() {
|
|
fetch('/api/reset', { method: 'POST' })
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
console.error('Failed to reset timer');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
// Function to force end the current heat
|
|
function forceEndHeat() {
|
|
fetch('/api/force-end', { method: 'POST' })
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
console.error('Failed to force end heat');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
// Function to save heat results
|
|
function saveHeatResults() {
|
|
// Get lane times and positions from the UI
|
|
const lanes = [1, 2, 3, 4];
|
|
const results = {
|
|
group_id: parseInt(document.getElementById('group-select').value),
|
|
heat_number: parseInt('{ strconv.Itoa(currentHeatNum) }'),
|
|
};
|
|
|
|
lanes.forEach(lane => {
|
|
const timeElement = document.getElementById(`lane-${lane}-time`);
|
|
const positionElement = document.getElementById(`lane-${lane}-position`);
|
|
|
|
if (timeElement && positionElement) {
|
|
const timeText = timeElement.textContent.trim();
|
|
const positionText = positionElement.textContent.trim();
|
|
|
|
results[`lane${lane}_time`] = timeText !== '--.-' ? parseFloat(timeText) : 0;
|
|
results[`lane${lane}_position`] = positionText !== '-' ? parseInt(positionText) : 0;
|
|
}
|
|
});
|
|
|
|
// Save results to the server
|
|
fetch('/api/race/save-result', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(results),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
console.error('Failed to save heat results');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
function getOrdinal(n) {
|
|
const s = ["th", "st", "nd", "rd"];
|
|
const v = n % 100;
|
|
return n + (s[(v-20)%10] || s[v] || s[0]);
|
|
}
|
|
</script>
|
|
}
|
|
}
|
|
|
|
// Find the current heat
|
|
templ currentHeatDisplay(heats []models.Heat, racers []models.Racer, currentHeatNum int, results []models.HeatResult) {
|
|
{{
|
|
// Find the current heat
|
|
var currentHeat models.Heat
|
|
for _, heat := range heats {
|
|
if heat.HeatNum == currentHeatNum {
|
|
currentHeat = heat
|
|
break
|
|
}
|
|
}
|
|
|
|
// Find the current result
|
|
var currentResult *models.HeatResult
|
|
for _, result := range results {
|
|
if result.HeatNumber == currentHeatNum {
|
|
currentResult = &result
|
|
break
|
|
}
|
|
}
|
|
}}
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">Current Heat: { strconv.Itoa(currentHeatNum) }</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
if currentHeat.Lane1ID != nil {
|
|
@raceLaneInfo(1, *currentHeat.Lane1ID, racers, currentResult)
|
|
}
|
|
if currentHeat.Lane2ID != nil {
|
|
@raceLaneInfo(2, *currentHeat.Lane2ID, racers, currentResult)
|
|
}
|
|
if currentHeat.Lane3ID != nil {
|
|
@raceLaneInfo(3, *currentHeat.Lane3ID, racers, currentResult)
|
|
}
|
|
if currentHeat.Lane4ID != nil {
|
|
@raceLaneInfo(4, *currentHeat.Lane4ID, racers, currentResult)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// Helper template for displaying a lane in the race manager
|
|
templ raceLaneInfo(lane int, racerID int64, racers []models.Racer, result *models.HeatResult) {
|
|
{{
|
|
// Find the racer
|
|
var racer models.Racer
|
|
for _, r := range racers {
|
|
if r.ID == racerID {
|
|
racer = r
|
|
break
|
|
}
|
|
}
|
|
|
|
// Get time and position from result if available
|
|
var timeStr string = "--.-"
|
|
var positionStr string = "-"
|
|
|
|
if result != nil {
|
|
if lane == 1 && result.Lane1Time > 0 {
|
|
timeStr = fmt.Sprintf("%.4f", result.Lane1Time)
|
|
positionStr = strconv.Itoa(result.Lane1Position)
|
|
} else if lane == 2 && result.Lane2Time > 0 {
|
|
timeStr = fmt.Sprintf("%.4f", result.Lane2Time)
|
|
positionStr = strconv.Itoa(result.Lane2Position)
|
|
} else if lane == 3 && result.Lane3Time > 0 {
|
|
timeStr = fmt.Sprintf("%.4f", result.Lane3Time)
|
|
positionStr = strconv.Itoa(result.Lane3Position)
|
|
} else if lane == 4 && result.Lane4Time > 0 {
|
|
timeStr = fmt.Sprintf("%.4f", result.Lane4Time)
|
|
positionStr = strconv.Itoa(result.Lane4Position)
|
|
}
|
|
}
|
|
}}
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h5 class="mb-0">Lane { strconv.Itoa(lane) }</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title">{ racer.FirstName } { racer.LastName }</h5>
|
|
<p class="card-text">Car #: { racer.CarNumber }</p>
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<strong>Time:</strong> <span id="lane-{strconv.Itoa(lane)}-time">{ timeStr }</span>
|
|
</div>
|
|
<div>
|
|
<strong>Position:</strong> <span id="lane-{strconv.Itoa(lane)}-position">{ positionStr }</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
// Helper template for displaying a racer in the next heat
|
|
templ nextHeatRacer(lane int, racerID int64, racers []models.Racer) {
|
|
{{
|
|
// Find racer
|
|
var racer models.Racer
|
|
for _, r := range racers {
|
|
if r.ID == racerID {
|
|
racer = r
|
|
break
|
|
}
|
|
}
|
|
}}
|
|
<tr>
|
|
<td>{ strconv.Itoa(lane) }</td>
|
|
<td>{ racer.FirstName } { racer.LastName }</td>
|
|
<td>{ racer.CarNumber }</td>
|
|
</tr>
|
|
} |