245 lines
14 KiB
HTML
245 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}
|
|
Manage Anglers |
|
|
{% endblock title %}
|
|
|
|
{% block style %}
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
|
|
{% endblock style %}
|
|
|
|
{% block content %}
|
|
<div class="bg-body p-4 d-flex">
|
|
<a href="{% url 'index' %}" class="btn btn-company px-4">Back</a>
|
|
<img class="ms-auto" width="40" src="{% static 'img/logo.webp' %}">
|
|
</div>
|
|
|
|
<div class="container my-4 p-4 pb-0 bg-body rounded">
|
|
<div class="row mb-4">
|
|
<div class="col-12 col-xl-4 d-flex">
|
|
<h3 class="mb-3 mb-xl-0">
|
|
Manage Anglers
|
|
<div class="border-company border-bottom border-2 w-100 pt-1"></div>
|
|
</h3>
|
|
</div>
|
|
<div class="col-sm-3 col-md-6 col-xl-4 mb-3 mb-sm-0">
|
|
<div class="input-group justify-content-xl-end">
|
|
<button class="btn border-secondary-subtle btn-outline-company" id="addMember" data-bs-toggle="tooltip" data-bs-title="Add Angler">
|
|
<i class="bi bi-person"></i>
|
|
</button>
|
|
<button class="btn border-secondary-subtle btn-outline-company" id="addTeam" data-bs-toggle="tooltip" data-bs-title="Add Team">
|
|
<i class="bi bi-people"></i>
|
|
</button>
|
|
<button class="btn border-secondary-subtle btn-outline-company" id="addSection" data-bs-toggle="tooltip" data-bs-title="Add Section">
|
|
<i class="bi bi-layers"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-9 col-md-6 col-xl-4">
|
|
<div class="input-group dropdown">
|
|
<button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
|
|
<i class="bi bi-sort-up"></i>
|
|
</button>
|
|
<input type="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers" id="search">
|
|
<button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
|
|
<form id="sortForm">
|
|
<ul class="dropdown-menu py-3 text-body-secondary bg-body-tertiary border border-light-subtle shadow-sm justify-self-center mt-2" onclick="event.stopPropagation()">
|
|
<li class="px-4">
|
|
<h3 class="h6 mb-3">Sort groups by</h3>
|
|
<div>
|
|
<div class="d-inline-block form-check">
|
|
<input type="radio" class="form-check-input" checked value="teams" name="sortGroups" id="sortTeamsName">
|
|
<label for="sortTeamsName" class="form-check-label">Teams</label>
|
|
</div>
|
|
<div class="d-inline-block form-check ms-4">
|
|
<input type="radio" class="form-check-input" value="sections" name="sortGroups" id="sortTeamsSection">
|
|
<label for="sortTeamsSection" class="form-check-label">Sections</label>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-divider my-3 mx-4 bg-light-subtle"></li>
|
|
<li class="px-4">
|
|
<h3 class="h6 mb-3">Sort anglers by</h3>
|
|
<div>
|
|
<div class="d-inline-block form-check">
|
|
<input type="radio" class="form-check-input" value="first_name" name="sortMembers" id="sortMembersName">
|
|
<label for="sortMembersName" class="form-check-label">Name</label>
|
|
</div>
|
|
<div class="d-inline-block form-check ms-4">
|
|
<input type="radio" class="form-check-input" checked value="peg_number" name="sortMembers" id="sortMembersPeg">
|
|
<label for="sortMembersPeg" class="form-check-label">Peg Number</label>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="groupsContainer"></div>
|
|
<div class="col-12 text-center pb-4" id="teamsLoadingSpinner">
|
|
<div class="spinner-border spinner-border-lg" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div class="pb-4" id="teamsNotFound">
|
|
<div class="alert alert-danger m-0" role="alert">
|
|
No teams found under that search
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Edit Section Modal -->
|
|
<div class="modal fade" id="editSectionModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<div class="modal-header border-0">
|
|
<h3 class="modal-title fs-5" id="editTeamTitle">
|
|
Section Character Here
|
|
<div class="border-company border-bottom border-2 w-100 pt-1"></div>
|
|
</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="col-md-6 d-flex">
|
|
<div class="input-group">
|
|
<span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section Character">
|
|
<i class="bi bi-layers"></i>
|
|
</span>
|
|
<input type="text" name="editSectionName" id="editSectionName" class="form-control" minlength="1" maxlength="3" value="A">
|
|
</div>
|
|
<button type="button" id="editSectionNameButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available character">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mt-2 text-danger" id="editSectionNameError" style="display: hidden"></div>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-company px-4" id="saveEditSectionModal">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Team Modal -->
|
|
<div class="modal fade" id="editTeamModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<div class="modal-header border-0">
|
|
<h3 class="modal-title fs-5" id="editTeamTitle">
|
|
Team Number Here
|
|
<div class="border-company border-bottom border-2 w-100 pt-1"></div>
|
|
</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="col-md-6 d-flex">
|
|
<div class="input-group">
|
|
<span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team number">
|
|
<i class="bi bi-tag"></i>
|
|
</span>
|
|
<input type="number" name="editTeamNumber" id="editTeamNumber" class="form-control" min="1" max="9999" value="1">
|
|
</div>
|
|
<button type="button" id="editTeamNumberButton" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available number">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6 mt-2 text-danger" id="editTeamNumberError" style="display: hidden"></div>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-company px-4" id="saveEditTeamModal">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Member Modal -->
|
|
<div class="modal fade" id="editMemberModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content border-0">
|
|
<div class="modal-header border-0">
|
|
<h3 class="modal-title fs-5 color" id="editMemberName">
|
|
Angler Name Here
|
|
<div class="border-company border-bottom border-2 w-100 pt-1"></div>
|
|
</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md">
|
|
<div class="form-floating">
|
|
<input class="form-control" type="text" name="editMemberForename" id="editMemberForename" placeholder="Forename" value="First Name">
|
|
<label for="editMemberForename">Forename</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="form-floating">
|
|
<input class="form-control" type="text" name="editMemberSurname" id="editMemberSurname" placeholder="Surname" value="Last Name">
|
|
<label for="editMemberSurname">Surname</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Team">
|
|
<i class="bi bi-people"></i>
|
|
</span>
|
|
<select class="form-select" name="editMemberTeam" id="editMemberTeam">
|
|
<option value="" class="font-ssp">Team 1</option>
|
|
<option value="" class="font-ssp">Team 2</option>
|
|
<option value="" class="font-ssp">Team 3</option>
|
|
<option value="" class="font-ssp">Team 4</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Section">
|
|
<i class="bi bi-layers"></i>
|
|
</span>
|
|
<select class="form-select" name="editMemberSection" id="editMemberSection">
|
|
<option value="">Section A</option>
|
|
<option value="">Section B</option>
|
|
<option value="">Section C</option>
|
|
<option value="">Section D</option>
|
|
</select>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 d-flex">
|
|
<div class="input-group">
|
|
<span class="input-group-text" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Peg Number">
|
|
<i class="bi bi-tag"></i>
|
|
</span>
|
|
<input type="number" name="editMemberPeg" id="editMemberPeg" class="form-control" min="1" max="9999" value="1">
|
|
</div>
|
|
<button type="button" class="btn btn-outline-company border-secondary-subtle ms-3" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Find next available peg">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-company px-4" id="saveEditModal">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
const pageUrl = "{% url 'anglers' %}"
|
|
// const getPageDataUrl = "{% url 'get-angler-data' %}"; DEPRICATED FOR REWRITE
|
|
// const updateMemberUrl = "{% url 'update-member' %}";
|
|
// const updateSectionUrl = "{% url 'update-section' %}"
|
|
// const updateTeamUrl = "{% url 'update-team' %}"
|
|
const getNextIdentifierUrl = "{% url 'get-next-identifier' %}"
|
|
const csrfMiddlewareToken = "{{ csrf_token }}";
|
|
</script>
|
|
<script src="{% static 'js/teams.js' %}"></script>
|
|
{% endblock scripts %} |