training-management-system/templates/training_list.html

91 lines
No EOL
2.8 KiB
HTML

{{ template "preamble.html" }}
<p><a href="/trainings/add"><button>Add New Training</button></a></p>
<h1>Trainings</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Type</th>
<th>Mode</th>
<th>Start</th>
<th>End</th>
<th>Status</th>
<th>Trainers</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{{range .Trainings}}
<tr>
<td>{{.Title}}</td>
<td>{{.TrainingType}}</td>
<td>{{.Mode}}</td>
<td>{{.Start.Format "2006-01-02 15:04"}}</td>
<td>{{.End.Format "2006-01-02 15:04"}}</td>
<td>{{.Status}}</td>
<td>
{{if .Trainers}}
{{range .Trainers}}
{{.Name}} ({{.Email}})<br>
{{end}}
{{else}}
No trainers assigned
{{end}}
</td>
<td>
<button onclick="openAssignTrainerModal({{.ID}})">Assign Trainer</button>
</td>
</tr>
{{end}}
</tbody>
</table>
<!-- Assign Trainer Modal -->
<div id="assignTrainerModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid black;">
<h3>Assign Trainer</h3>
<form id="assignTrainerForm" >
<input type="hidden" id="training_id" name="training_id">
<label for="trainer">Select Trainer:</label>
<select id="trainer_id" name="trainer_id">
{{range .Trainers}}
<option value="{{.ID}}">{{.Name}} ({{.Email}})</option>
{{end}}
</select>
<button type="submit">Assign</button>
<button type="button" onclick="closeAssignTrainerModal()">Cancel</button>
</form>
</div>
<script>
function openAssignTrainerModal(trainingId) {
document.getElementById('training_id').value = trainingId;
document.getElementById('assignTrainerModal').style.display = 'block';
}
function closeAssignTrainerModal() {
document.getElementById('assignTrainerModal').style.display = 'none';
}
document.getElementById('assignTrainerForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(this); // Create FormData from the form element
console.log(formData);
fetch('/trainings/assign_trainer', {
method: 'POST',
body: formData // Send as form data
}).then(response => {
if (response.ok) {
location.reload();
} else {
alert('Failed to assign trainer');
}
});
});
</script>
{{template "epilogue.html" }}