JS cleanup [read comment]

Moved global js to new file custom.js and documented teams.js
This commit is contained in:
Corban-Lee 2023-05-09 09:42:21 +01:00
parent 78e4361452
commit 79d391d171
5 changed files with 113 additions and 90 deletions

View File

@ -3,8 +3,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 1, "pk": 1,
"fields": { "fields": {
"first_name": "Shaquita", "first_name": "Robert",
"last_name": "Nichols", "last_name": "Reid",
"team": 1, "team": 1,
"peg_number": null "peg_number": null
} }
@ -13,8 +13,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 2, "pk": 2,
"fields": { "fields": {
"first_name": "Tawanna", "first_name": "Ronald",
"last_name": "Kingsbury", "last_name": "Jones",
"team": 1, "team": 1,
"peg_number": null "peg_number": null
} }
@ -23,8 +23,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 3, "pk": 3,
"fields": { "fields": {
"first_name": "Ricardo", "first_name": "Casey",
"last_name": "Benton", "last_name": "Cohen",
"team": 1, "team": 1,
"peg_number": null "peg_number": null
} }
@ -33,8 +33,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 4, "pk": 4,
"fields": { "fields": {
"first_name": "David", "first_name": "James",
"last_name": "Moore", "last_name": "Scudder",
"team": 2, "team": 2,
"peg_number": null "peg_number": null
} }
@ -43,8 +43,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 5, "pk": 5,
"fields": { "fields": {
"first_name": "Patricia", "first_name": "Randall",
"last_name": "Mader", "last_name": "Young",
"team": 2, "team": 2,
"peg_number": null "peg_number": null
} }
@ -53,8 +53,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 6, "pk": 6,
"fields": { "fields": {
"first_name": "Sue", "first_name": "Helen",
"last_name": "Coleman", "last_name": "Doak",
"team": 2, "team": 2,
"peg_number": null "peg_number": null
} }
@ -63,8 +63,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 7, "pk": 7,
"fields": { "fields": {
"first_name": "Brandon", "first_name": "Brenda",
"last_name": "Goodwin", "last_name": "Powell",
"team": 3, "team": 3,
"peg_number": null "peg_number": null
} }
@ -73,8 +73,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 8, "pk": 8,
"fields": { "fields": {
"first_name": "Travis", "first_name": "Constance",
"last_name": "Walls", "last_name": "Abild",
"team": 3, "team": 3,
"peg_number": null "peg_number": null
} }
@ -83,8 +83,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 9, "pk": 9,
"fields": { "fields": {
"first_name": "Donna", "first_name": "Patsy",
"last_name": "Sanders", "last_name": "Branham",
"team": 3, "team": 3,
"peg_number": null "peg_number": null
} }
@ -93,8 +93,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 10, "pk": 10,
"fields": { "fields": {
"first_name": "Debra", "first_name": "Cheryl",
"last_name": "Lu", "last_name": "Sears",
"team": 4, "team": 4,
"peg_number": null "peg_number": null
} }
@ -103,8 +103,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 11, "pk": 11,
"fields": { "fields": {
"first_name": "Edwin", "first_name": "Justin",
"last_name": "Goldberger", "last_name": "Cramer",
"team": 4, "team": 4,
"peg_number": null "peg_number": null
} }
@ -113,8 +113,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 12, "pk": 12,
"fields": { "fields": {
"first_name": "Peggy", "first_name": "Theodore",
"last_name": "Lane", "last_name": "Wilson",
"team": 4, "team": 4,
"peg_number": null "peg_number": null
} }
@ -123,8 +123,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 13, "pk": 13,
"fields": { "fields": {
"first_name": "Dora", "first_name": "Geneva",
"last_name": "Eye", "last_name": "Low",
"team": 5, "team": 5,
"peg_number": null "peg_number": null
} }
@ -133,8 +133,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 14, "pk": 14,
"fields": { "fields": {
"first_name": "Christopher", "first_name": "John",
"last_name": "Delap", "last_name": "Burtt",
"team": 5, "team": 5,
"peg_number": null "peg_number": null
} }
@ -143,8 +143,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 15, "pk": 15,
"fields": { "fields": {
"first_name": "John", "first_name": "Alfred",
"last_name": "Reyes", "last_name": "Diaz",
"team": 5, "team": 5,
"peg_number": null "peg_number": null
} }
@ -153,8 +153,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 16, "pk": 16,
"fields": { "fields": {
"first_name": "Robert", "first_name": "Arthur",
"last_name": "Reveles", "last_name": "Alton",
"team": 6, "team": 6,
"peg_number": null "peg_number": null
} }
@ -163,8 +163,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 17, "pk": 17,
"fields": { "fields": {
"first_name": "Cheryl", "first_name": "Vicki",
"last_name": "Jones", "last_name": "Greer",
"team": 6, "team": 6,
"peg_number": null "peg_number": null
} }
@ -173,8 +173,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 18, "pk": 18,
"fields": { "fields": {
"first_name": "Anne", "first_name": "Lewis",
"last_name": "Thomas", "last_name": "Segovia",
"team": 6, "team": 6,
"peg_number": null "peg_number": null
} }
@ -183,8 +183,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 19, "pk": 19,
"fields": { "fields": {
"first_name": "Erika", "first_name": "Vince",
"last_name": "Dolfi", "last_name": "Robinson",
"team": 7, "team": 7,
"peg_number": null "peg_number": null
} }
@ -193,8 +193,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 20, "pk": 20,
"fields": { "fields": {
"first_name": "Scott", "first_name": "Blake",
"last_name": "Hines", "last_name": "Mueller",
"team": 7, "team": 7,
"peg_number": null "peg_number": null
} }
@ -203,8 +203,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 21, "pk": 21,
"fields": { "fields": {
"first_name": "Min", "first_name": "Luis",
"last_name": "Baker", "last_name": "Hazel",
"team": 7, "team": 7,
"peg_number": null "peg_number": null
} }
@ -213,8 +213,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 22, "pk": 22,
"fields": { "fields": {
"first_name": "Laura", "first_name": "Diane",
"last_name": "Cleaves", "last_name": "Lloyd",
"team": 8, "team": 8,
"peg_number": null "peg_number": null
} }
@ -223,8 +223,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 23, "pk": 23,
"fields": { "fields": {
"first_name": "Deborah", "first_name": "Jamey",
"last_name": "Pence", "last_name": "Mendes",
"team": 8, "team": 8,
"peg_number": null "peg_number": null
} }
@ -233,8 +233,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 24, "pk": 24,
"fields": { "fields": {
"first_name": "Harvey", "first_name": "Virgilio",
"last_name": "Cabello", "last_name": "Nixon",
"team": 8, "team": 8,
"peg_number": null "peg_number": null
} }
@ -243,8 +243,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 25, "pk": 25,
"fields": { "fields": {
"first_name": "Shawn", "first_name": "Rodney",
"last_name": "Mabe", "last_name": "White",
"team": 9, "team": 9,
"peg_number": null "peg_number": null
} }
@ -253,8 +253,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 26, "pk": 26,
"fields": { "fields": {
"first_name": "Donald", "first_name": "Kathleen",
"last_name": "Duryea", "last_name": "Ashe",
"team": 9, "team": 9,
"peg_number": null "peg_number": null
} }
@ -263,8 +263,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 27, "pk": 27,
"fields": { "fields": {
"first_name": "John", "first_name": "Stephanie",
"last_name": "Mcinturff", "last_name": "Taylor",
"team": 9, "team": 9,
"peg_number": null "peg_number": null
} }
@ -273,8 +273,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 28, "pk": 28,
"fields": { "fields": {
"first_name": "Ivette", "first_name": "John",
"last_name": "Paterson", "last_name": "Brennan",
"team": 10, "team": 10,
"peg_number": null "peg_number": null
} }
@ -283,8 +283,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 29, "pk": 29,
"fields": { "fields": {
"first_name": "Mary", "first_name": "Kenneth",
"last_name": "Sussman", "last_name": "Duff",
"team": 10, "team": 10,
"peg_number": null "peg_number": null
} }
@ -293,8 +293,8 @@
"model": "mainapp.member", "model": "mainapp.member",
"pk": 30, "pk": 30,
"fields": { "fields": {
"first_name": "Peter", "first_name": "Matthew",
"last_name": "Faison", "last_name": "Whitesell",
"team": 10, "team": 10,
"peg_number": null "peg_number": null
} }

View File

@ -3,70 +3,70 @@
"model": "mainapp.team", "model": "mainapp.team",
"pk": 1, "pk": 1,
"fields": { "fields": {
"section_letter": "P" "section_letter": "D"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 2, "pk": 2,
"fields": { "fields": {
"section_letter": "C" "section_letter": "P"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 3, "pk": 3,
"fields": { "fields": {
"section_letter": "Y" "section_letter": "L"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 4, "pk": 4,
"fields": { "fields": {
"section_letter": "B" "section_letter": "M"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 5, "pk": 5,
"fields": { "fields": {
"section_letter": "T" "section_letter": "Z"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 6, "pk": 6,
"fields": { "fields": {
"section_letter": "K" "section_letter": "Y"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 7, "pk": 7,
"fields": { "fields": {
"section_letter": "N" "section_letter": "J"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 8, "pk": 8,
"fields": { "fields": {
"section_letter": "S" "section_letter": "W"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 9, "pk": 9,
"fields": { "fields": {
"section_letter": "Z" "section_letter": "T"
} }
}, },
{ {
"model": "mainapp.team", "model": "mainapp.team",
"pk": 10, "pk": 10,
"fields": { "fields": {
"section_letter": "U" "section_letter": "F"
} }
} }
] ]

22
src/static/js/custom.js Normal file
View File

@ -0,0 +1,22 @@
/**
* Custom javascript for the entire website.
* Add to this file for javascript that will be ran globally.
*/
$(document).ready(() => {
// Enable all tooltips on the page
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});
/**
* Returns boolean if the string is empty or only contains whitespace.
*
* @param {string} string - The string to check against.
* @returns {boolean} - The result as boolean
*/
function isEmptyOrSpaces(string) {
return string === null || string.match(/^ *$/) !== null;
}

View File

@ -5,15 +5,12 @@ jQuery.expr[':'].icontains = function(a, i, m) {
$(document).ready(() => { $(document).ready(() => {
// Enable all tooltips on the page
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
teamsLoading(true); // show the loading icon teamsLoading(true); // show the loading icon
// Search functionality // Search functionality
var searchTimeout = null; var searchTimeout = null;
// Bind searching to when a key is lifted on the searchbar
$("#search").keyup(() => { $("#search").keyup(() => {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
teamsLoading(true); teamsLoading(true);
@ -23,17 +20,20 @@ $(document).ready(() => {
}, 500) }, 500)
}); });
// Bind searching to the search button
$("#searchButton").on("click", () => { $("#searchButton").on("click", () => {
fetchAndLoadTeams(...getFilters()); fetchAndLoadTeams(...getFilters());
}); });
// Bind searching to the sort buttons
$("#sortForm input").on("click", function() { $("#sortForm input").on("click", function() {
const name = $(this).attr("name"); const name = $(this).attr("name");
localStorage.setItem(name, $(`input[name='${name}']:checked`, "#sortForm").val());7 localStorage.setItem(name, $(`input[name='${name}']:checked`, "#sortForm").val());
fetchAndLoadTeams(...getFilters()); fetchAndLoadTeams(...getFilters());
}); });
// Load the last saved sort settings TODO: use local storage so it only saves on one reload
const sortTeamsValue = localStorage.getItem("sortTeams"); const sortTeamsValue = localStorage.getItem("sortTeams");
if (sortTeamsValue !== null) { if (sortTeamsValue !== null) {
$("#sortForm input[name='sortTeams']").val([sortTeamsValue]); $("#sortForm input[name='sortTeams']").val([sortTeamsValue]);
@ -44,10 +44,8 @@ $(document).ready(() => {
$("#sortForm input[name='sortMembers']").val([sortMembersValue]); $("#sortForm input[name='sortMembers']").val([sortMembersValue]);
} }
// Edit member form validation options // Customize form validation for the edit members form
$("#editMemberForm").validate({ $("#editMemberForm").validate({ errorClass: "text-danger mb-2" });
errorClass: "text-danger mb-2"
})
// Prevent dropdowns from closing when clicking inside // Prevent dropdowns from closing when clicking inside
$('.dropdown-menu').on('hide.bs.dropdown', function (e) { $('.dropdown-menu').on('hide.bs.dropdown', function (e) {
@ -59,10 +57,16 @@ $(document).ready(() => {
} }
}); });
fetchAndLoadTeams(...getFilters()); // load the teams with default filters // load the teams with default filters
fetchAndLoadTeams(...getFilters());
}); });
/**
* Returns an array of search filters in this order [search, sortTeams, sortMembers]
*
* @returns {Array} The array of filters, each filter is a string.
*/
function getFilters() { function getFilters() {
return [ return [
$("#search").val(), $("#search").val(),
@ -71,14 +75,6 @@ function getFilters() {
] ]
} }
/**
* Returns bool if the string is empty or only contains whitespace
*
* **/
function isEmptyOrSpaces(string) {
return string === null || string.match(/^ *$/) !== null;
}
function loadTeams(teams, highlightText="") { function loadTeams(teams, highlightText="") {
$("#teamsContainer").html(""); // Clear the previous listed teams $("#teamsContainer").html(""); // Clear the previous listed teams
@ -113,7 +109,7 @@ function loadTeams(teams, highlightText="") {
</div>` </div>`
); );
// Whilimage.pnge we have the team, iterate over and add it's members // While we have the team, iterate over and add it's members
team.members.forEach((member) => { team.members.forEach((member) => {
const fullname = member.first + " " + member.last; const fullname = member.first + " " + member.last;
@ -139,7 +135,7 @@ function loadTeams(teams, highlightText="") {
</button> </button>
</div> </div>
</li>` </li>`
); )
}); });
}); });
@ -153,6 +149,10 @@ function loadTeams(teams, highlightText="") {
// Bind edit team modal to the edit team button // Bind edit team modal to the edit team button
$(".team > h3 > button").on("click", function() { $(".team > h3 > button").on("click", function() {
$(this).addClass("active");
$("#editTeamModal").off("hidden.bs.modal").on("hidden.bs.modal", function() {
$("#teamsContainer").find(".team").find("button.active").removeClass("active");
});
openEditTeamModal($(this).parent().parent().data("number")); openEditTeamModal($(this).parent().parent().data("number"));
}); });

View File

@ -20,6 +20,7 @@
<script src="{% static 'js/jquery-3.6.3.min.js' %}"></script> <script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
<script src="{% static 'js/jquery.validate.min.js' %}"></script> <script src="{% static 'js/jquery.validate.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script> <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
{% block scripts %} {% block scripts %}
{% endblock scripts %} {% endblock scripts %}
</body> </body>