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.
128 lines
4.7 KiB
128 lines
4.7 KiB
package templates
|
|
|
|
import (
|
|
"fmt"
|
|
"track-gopher/models"
|
|
)
|
|
|
|
templ Register(groups []models.Group) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Racer Registration</title>
|
|
<!-- 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>
|
|
<!-- Bootstrap JS Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</head>
|
|
<body class="bg-light">
|
|
<div class="container py-4">
|
|
<header class="mb-4">
|
|
<h1 class="text-center">Racer Registration</h1>
|
|
<div class="d-flex justify-content-center mt-3">
|
|
<a href="/" class="btn btn-outline-primary me-2">Race Timer</a>
|
|
<a href="/admin" class="btn btn-outline-secondary">Admin</a>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Register New Racer</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="registerForm" hx-post="/api/racers" hx-swap="none">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="firstName" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="firstName" name="first_name" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="lastName" class="form-label">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName" name="last_name" required/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="carNumber" class="form-label">Car Number</label>
|
|
<input type="text" class="form-control" id="carNumber" name="car_number" required/>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="carWeight" class="form-label">Car Weight (oz)</label>
|
|
<input type="number" step="0.1" class="form-control" id="carWeight" name="car_weight" required/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="groupID" class="form-label">Group</label>
|
|
<select class="form-select" id="groupID" name="group_id" required>
|
|
<option value="" selected disabled>Select a group</option>
|
|
for _, group := range groups {
|
|
<option value={ fmt.Sprint(group.ID) }>{ group.Name }</option>
|
|
}
|
|
</select>
|
|
</div>
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">Register Racer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="successAlert" class="alert alert-success mt-3 d-none">
|
|
<h4 class="alert-heading">Registration Successful!</h4>
|
|
<p>The racer has been registered successfully.</p>
|
|
<hr>
|
|
<div class="d-flex justify-content-between">
|
|
<button class="btn btn-outline-success" onclick="resetForm()">Register Another Racer</button>
|
|
<a href="/admin" class="btn btn-outline-primary">View All Racers</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorAlert" class="alert alert-danger mt-3 d-none">
|
|
<h4 class="alert-heading">Registration Failed</h4>
|
|
<p id="errorMessage">There was an error registering the racer.</p>
|
|
<hr>
|
|
<button class="btn btn-outline-danger" onclick="dismissError()">Dismiss</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('registerForm').addEventListener('htmx:afterRequest', function(event) {
|
|
const response = event.detail.xhr;
|
|
|
|
if (response.status === 200 || response.status === 201) {
|
|
// Show success message
|
|
document.getElementById('successAlert').classList.remove('d-none');
|
|
document.getElementById('errorAlert').classList.add('d-none');
|
|
} else {
|
|
// Show error message
|
|
document.getElementById('errorAlert').classList.remove('d-none');
|
|
document.getElementById('successAlert').classList.add('d-none');
|
|
|
|
try {
|
|
const error = JSON.parse(response.responseText);
|
|
document.getElementById('errorMessage').textContent = error.message || 'There was an error registering the racer.';
|
|
} catch (e) {
|
|
document.getElementById('errorMessage').textContent = 'There was an error registering the racer.';
|
|
}
|
|
}
|
|
});
|
|
|
|
function resetForm() {
|
|
document.getElementById('registerForm').reset();
|
|
document.getElementById('successAlert').classList.add('d-none');
|
|
}
|
|
|
|
function dismissError() {
|
|
document.getElementById('errorAlert').classList.add('d-none');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
} |