jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

Working on the edit teams modal

Browse Source
This commit is contained in:
Corban-Lee 2023-05-08 17:21:07 +01:00
parent 8fdb4a624c
commit 73c55fc301
3 changed files with 86 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
create_dummy_data.bat
View File

@ -1,5 +1,5 @@
@echo off
echo The purpose of this file is to populate the database with dummy data for testing.
echo The purpose of this file is to populate the database with dummy data for testing. Running this WILL DELETE your current sqlite3 database.
set /p confirm=Do you want to continue? [y/n]
if /i "%confirm%"=="y" (

34
src/mainapp/templates/teams.html
View File

@ -70,8 +70,38 @@
</div>
<!-- Edit Modal -->
<div class="modal fade" id="editMemberModal" tabindex="-1">
<!-- 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">
<h3 class="modal-title fs-5" id="editTeamTitle">Team Number Here</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
</div>
<div class="modal-body">
<form id="editTeamForm">
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<label for="editTeamNumber" class="form-label">Team Number</label>
<input type="number" name="editTeamNumber" class="form-control" id="editTeamNumber">
</div>
<div class="col-md-6">
<label for="editTeamSection" class="form-label">Section Letter</label>
<input type="text" name="editTeamSection" class="form-control" id="editTeamSection">
</div>
</div>
</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" id="saveEditTeamModal">Save Changes</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">

74
src/static/js/teams.js
View File

@ -77,16 +77,22 @@ function loadTeams(teams, highlightText="") {
$("#teamsContainer").append(
`<div class='col-12 col-md-6 col-xl-4 mb-4'>
<div
class='team p-4 bg-body-secondary bg-gradient rounded h-100 fluid-hover-zoom shadow-sm shadow-on-hover'
data-number='${team.team_number}'>
<h4>
<span class='fs-6'>TEAM</span>
${team.team_number}
class='team px-4 py-3 bg-body-secondary bg-gradient rounded h-100 fluid-hover-zoom shadow-sm shadow-on-hover'
data-number='${team.team_number}'
data-section='${team.section_letter}'>
<h3>
<span class='fs-4'>
<span class='fs-6'>TEAM</span>
${team.team_number}
</span>
<span class='fs-5 text-secondary'>
<span class='fs-6'>SECTION</span>
${team.section_letter}
</span>
</h4>
<button class='btn btn-sm btn-outline-secondary float-end border-0 me-1'>
<i class='bi bi-gear fs-6'></i>
</button>
</h3>
<ul class='list-unstyled team-members mt-3'>
</ul>
</div>
@ -100,22 +106,23 @@ function loadTeams(teams, highlightText="") {
$("#teamsContainer").find(".team-members").last().append(
`<li class='bg-body-tertiary mb-3 rounded w-100'>
<div
type='button'
class='team-member px-3 py-2 d-flex'
class='team-member d-flex'
data-first='${member.first}'
data-last='${member.last}'
data-member-id='${member.id}'
data-team-number='${member.team}'
data-peg-number='${member.peg}'>
<span class='text-secondary me-2'>
${member.peg}
</span>
<span class='team-member-fullname'>
${fullname}
</span>
<span class='ms-auto text-secondary'>
<div class='px-3 py-2'>
<span class='text-secondary me-2'>
${member.peg}
</span>
<span class='team-member-fullname'>
${fullname}
</span>
</div>
<button type='button' class='ms-auto btn btn-outline-secondary border-0 btn-sm fs-6 m-1' style="max-height: 32px;">
<i class='bi bi-pencil'></i>
</span>
</button>
</div>
</li>`
);
@ -129,9 +136,19 @@ function loadTeams(teams, highlightText="") {
$(this).html($(this).text().replace(regex, '<span class="text-primary fw-bold">$&</span>'));
});
}
// Bind edit team modal to the edit team button
$(".team > h3 > button").on("click", function() {
openEditTeamModal($(this).parent().parent().data("number"));
});
$(".team-member").on("click", function() {
openEditModal($(this).data("member-id"));
// Bind edit member modal to the edit member button
$(".team-member button").on("click", function() {
$(this).addClass("active");
$("#editMemberModal").off("hidden.bs.modal").on("hidden.bs.modal", function() {
$("#teamsContainer").find(".team").find("button.active").removeClass("active");
});
openEditMemberModal($(this).parent().data("member-id"));
});
}
@ -166,7 +183,22 @@ function teamsLoading(show=true) {
$("#teamsLoadingSpinner").hide();
}
function openEditModal(memberId) {
function openEditTeamModal(teamNumber) {
// Team data
const team = $(`.team[data-number='${teamNumber}']`);
const section = team.data("section");
// Load data to form
$("#editTeamTitle").text(`Team ${teamNumber}`);
$("#editTeamNumber").val(teamNumber);
$('#editTeamSection').val(section);
$("#editTeamModal").modal("show");
}
function openEditMemberModal(memberId) {
// Member data
const member = $(`.team-member[data-member-id='${memberId}']`);
@ -196,10 +228,10 @@ function openEditModal(memberId) {
$("#editMemberModal").modal("show");
// Update the submit button
$("#saveEditModal").off("click").on("click", () => { saveEditModal(memberId); });
$("#saveEditModal").off("click").on("click", () => { saveEditMemberModal(memberId); });
}
function saveEditModal(memberId) {
function saveEditMemberModal(memberId) {
if (!$("#editMemberForm").valid()) {
return;