Working on the edit teams modal

create_dummy_data.bat

@@ -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" (

src/mainapp/templates/teams.html

@@ -70,8 +70,38 @@
           
     </div>
 
-    <!-- Edit Modal -->
+    <!-- Edit Team Modal -->
-    <div class="modal fade" id="editMemberModal" tabindex="-1">
+    <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">

src/static/js/teams.js

@@ -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'
+                    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-number='${team.team_number}' 
-                    <h4>
+                    data-section='${team.section_letter}'>
-                        <span class='fs-6'>TEAM</span> 
+                    <h3>
-                        ${team.team_number}
+                        <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 d-flex'
-                        class='team-member px-3 py-2 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'>
+                        <div class='px-3 py-2'>
-                            ${member.peg}
+                            <span class='text-secondary me-2'>
-                        </span>
+                                ${member.peg}
-                        <span class='team-member-fullname'>
+                            </span>
-                            ${fullname}
+                            <span class='team-member-fullname'>
-                        </span>
+                                ${fullname}
-                        <span class='ms-auto text-secondary'>
+                            </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() {
+    // Bind edit member modal to the edit member button
-        openEditModal($(this).data("member-id"));
+    $(".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;