function init() {
displayGames()
$('#standing-component-container').show()
$('#st-loading').hide(2000)
}
const API_URL = 'https://airtable.sharptop.io'
var games = []
var currentGender = 'Boys'
var currentSkillLevel = 'Varsity'
var currentTeam = ''
var competitive = true
var noncompetitive = true
var competitiveStandings
var noncompetitiveStandings
$(document).ready(async function () {
games = await fetch('Games')
games.sort(compareDates)
console.log('games: ', games)
competitiveStandings = extractStandingTemplate(games)
noncompetitiveStandings = extractStandingTemplate(games)
games.forEach(game => {
addGameToStandings(game, game.competitive ? competitiveStandings : noncompetitiveStandings);
})
populateComponent()
addGenderSelectionHandlers();
addSkillLevelSelectionHandlers();
addCompetitiveSelectionHandlers();
$('#st-loading').hide(2000)
})
function extractStandingTemplate(games) {
let standings = {}
games.forEach(game => {
if (!standings[game.gender]) standings[game.gender] = {}
if (!standings[game.gender][game.skillLevel]) standings[game.gender][game.skillLevel] = {}
if (!standings[game.gender][game.skillLevel][game.homeTeamName]) {
standings[game.gender][game.skillLevel][game.homeTeamName] = {won: 0, lost: 0, tied: 0}
}
if (!standings[game.gender][game.skillLevel][game.awayTeamName]) {
standings[game.gender][game.skillLevel][game.awayTeamName] = {won: 0, lost: 0, tied: 0}
}
})
return standings
}
function addGameToStandings(game, standing) {
if (game.winningTeamName) {
standing[game.gender][game.skillLevel][game.winningTeamName].won++
standing[game.gender][game.skillLevel][game.losingTeamName].lost++
} else {
standing[game.gender][game.skillLevel][game.homeTeamName].tied++
standing[game.gender][game.skillLevel][game.awayTeamName].tied++
}
}
function displayGame(game) {
$(`#st-games-table`).append(`
<div class="row">
<div class="col-2">${game.date.substring(5)}</div>
<div class="col-4 st-team-column">${game.homeTeamName}</div>
<div class="col-1">${game.homeScore}</div>
<div class="col-1 st-away-score">${game.awayScore}</div>
<div class="col-4 st-team-column">${game.awayTeamName}</div>
</div>
`)
}
function displayGames() {
$('#st-games-container').html(`
<h4>${currentTeam}</h4>
<div id="st-games-table" class="st-games-table">
<div class="row st-table-header">
<div class="col-2">Date</div>
<div class="col-5">Home</div>
<div class="col-5">Away</div>
</div>
</div>
`)
games.forEach(game => {
if (game.homeTeamName[0] === currentTeam || game.awayTeamName[0] === currentTeam) {
if ((game.competitive && competitive) || (!game.competitive && noncompetitive)) {
displayGame(game);
}
}
})
}
function sortStandings() {
let list = []
for (var team in competitiveStandings[currentGender][currentSkillLevel]) {
let teamCompetitiveStandings = (competitive ? competitiveStandings[currentGender][currentSkillLevel][team] : {
won: 0,
lost: 0,
tied: 0
})
let teamNoncompetitiveStandings = (noncompetitive ? noncompetitiveStandings[currentGender][currentSkillLevel][team] : {
won: 0,
lost: 0,
tied: 0
})
list.push({
name: team,
won: teamCompetitiveStandings.won + teamNoncompetitiveStandings.won,
lost: teamCompetitiveStandings.lost + teamNoncompetitiveStandings.lost,
tied: teamCompetitiveStandings.tied + teamNoncompetitiveStandings.tied,
})
}
list.sort(compareStandings)
return list;
}
function displayStandings() {
$('#st-standings-table').html(`
<div class="row st-table-header">
<div class="col-2">Rank</div>
<div class="col-4 st-team-column">Team</div>
<div class="col-2">Won</div>
<div class="col-2">Lost</div>
<div class="col-2">Tied</div>
</div>
`)
sortStandings().forEach((team, i) => {
if (currentTeam === '') {
currentTeam = team.name
}
$('#st-standings-table').append(`
<div class="row st-team-row" id="${team.name}">
<div class="col-2 ${team.name === currentTeam ? 'active' : ''}">${i + 1}</div>
<div class="col-4 st-team-column ${team.name === currentTeam ? 'active' : ''}">${team.name}</div>
<div class="col-2 ${team.name === currentTeam ? 'active' : ''}">${team.won}</div>
<div class="col-2 ${team.name === currentTeam ? 'active' : ''}">${team.lost}</div>
<div class="col-2 ${team.name === currentTeam ? 'active' : ''}">${team.tied}</div>
</div>
`)
})
}
function populateComponent() {
console.log(`competitive: `, competitive)
console.log(`noncompetitive: `, noncompetitive)
$('li').removeClass('active')
$(`#st-${currentGender.replace(/\s+/g, '-').toLowerCase()}`).addClass('active')
$(`#st-${currentSkillLevel.replace(/\s+/g, '-').toLowerCase()}`).addClass('active')
displayStandings();
displayGames();
addTeamSelectionHandler();
}
function fetch(objectType) {
return $.ajax({
type: 'POST',
url: API_URL,
dataType: 'json',
data: JSON.stringify({
'baseId': 'appNtmri6lpYTOimo',
'tableName': objectType,
'action': 'select'
})
})
}
function compareStandings(a, b) {
if (a.won > b.won)
return -1;
if (a.won < b.won)
return 1;
if (a.lost < b.lost)
return -1;
if (a.lost > b.lost)
return 1;
if (a.tied < b.tied)
return -1;
if (a.tied > b.tied)
return 1;
return 0;
}
function compareDates(a, b) {
if (a.date < b.date)
return -1;
if (a.date > b.date)
return 1;
return 0;
}
function switchGender(gender) {
currentTeam = ''
currentGender = gender
populateComponent()
}
function switchSkillLevel(skillLevel) {
currentTeam = ''
currentSkillLevel = skillLevel
populateComponent()
}
function addTeamSelectionHandler() {
$('.st-team-row').click(function () {
currentTeam = $(this).prop('id')
console.log(currentTeam)
populateComponent()
})
}
function addGenderSelectionHandlers() {
$('#st-boys').click(() => switchGender("Boys"))
$('#st-girls').click(() => switchGender("Girls"))
}
function addSkillLevelSelectionHandlers() {
$('#st-varsity').click(() => switchSkillLevel("Varsity"))
$('#st-junior-varsity').click(() => switchSkillLevel("Junior Varsity"))
$('#st-junior-high').click(() => switchSkillLevel("Junior High"))
$('#st-elementary').click(() => switchSkillLevel("Elementary"))
$('#st-12u').click(() => switchSkillLevel("12U"))
$('#st-12u2').click(() => switchSkillLevel("12U2"))
}
function addCompetitiveSelectionHandlers() {
$(':checkbox').change(function () {
window[$(this).prop('id').substring(3)] = $(this).is(':checked')
populateComponent()
});
}