128 lines
5.1 KiB
HTML
128 lines
5.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}
|
|
Teams & Members |
|
|
{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="bg-body-secondary p-4">
|
|
<a href="{% url 'index' %}" class="btn btn-primary px-4">Back</a>
|
|
</div>
|
|
|
|
<div class="container my-4 p-4 bg-body-secondary rounded">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-8">
|
|
<h3 class="mb-4">Teams & their Members</h3>
|
|
</div>
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="input-group mb-4 mb-md-0">
|
|
<input type="search" class="form-control" placeholder="Search" id="search">
|
|
<button type="button" class="btn border"><i class="bi bi-search"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="teamsContainer"></div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div class="modal fade" id="editMemberModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title fs-5" id="editMemberName">Member Name Here</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<label for="editMemberFirstName" class="form-label">Forename</label>
|
|
<input type="text" name="editMemberFirstName" id="editMemberFirstName" class="form-control mb-2">
|
|
|
|
<label for="editMemberLastName" class="form-label">Surname</label>
|
|
<input type="text" name="editMemberLastName" id="editMemberLastName" class="form-control mb-2">
|
|
|
|
<label for="editMemberTeam" class="form-label">Team</label>
|
|
<select name="editMemberTeam" id="editMemberTeam" class="form-select" style="max-height: 300px;">
|
|
{% for team in teams %}
|
|
<option value="{{ team.identifier }}">{{ team.identifier }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block scripts %}
|
|
<script type="text/javascript">
|
|
$(document).ready(() => {
|
|
loadTeams();
|
|
|
|
var searchTimeout = null;
|
|
|
|
$("#search").keyup(() => {
|
|
clearTimeout(searchTimeout);
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
loadTeams($("#search").val());
|
|
}, 500)
|
|
})
|
|
})
|
|
|
|
function loadTeams(search="") {
|
|
$.ajax({
|
|
url: "{% url 'get-teams' %}",
|
|
type: "post",
|
|
data: {
|
|
"csrfmiddlewaretoken": "{{ csrf_token }}",
|
|
"search": search
|
|
},
|
|
success: (results) => {
|
|
$("#teamsContainer").html("");
|
|
|
|
for (var i = 0; i < results.teams.length; i++) {
|
|
var team = results.teams[i];
|
|
$("#teamsContainer").append(
|
|
"<div class='col-12 col-md-6 col-xl-4 mb-4'>" +
|
|
"<div class='p-4 bg-body-tertiary rounded h-100'>" +
|
|
`<h4>${team.identifier}</h4>` +
|
|
"<ul class='list-unstyled ul-cols-2 team-members'>" +
|
|
"</ul>" +
|
|
"</div>" +
|
|
"</div>"
|
|
);
|
|
for (var j = 0; j < team.members.length; j++) {
|
|
var member = team.members[j];
|
|
$("#teamsContainer").find(".team-members").last().append(
|
|
"<li>" +
|
|
`<span type='button' class='team-member' onclick='javascript:openEditModal("${member.name}");'>${member.name}</span>` +
|
|
"</li>"
|
|
);
|
|
}
|
|
}
|
|
},
|
|
error: (xhr, textStatus, errorThrown) => {
|
|
alert(errorThrown);
|
|
}
|
|
});
|
|
}
|
|
|
|
function openEditModal(name) {
|
|
|
|
var [first, last] = name.split(" ");
|
|
var teamIdentifier = $(`.team-member:contains('${name}')`).parent().parent().parent().find("h4").text();
|
|
|
|
$("#editMemberName").text(name);
|
|
$("#editMemberFirstName").val(first);
|
|
$("#editMemberLastName").val(last);
|
|
$("#editMemberTeam").val(teamIdentifier)
|
|
|
|
$("#editMemberModal").modal("show");
|
|
}
|
|
</script>
|
|
{% endblock scripts %} |