InfantrySkillCalculator/static/index.js

document.addEventListener('DOMContentLoaded', function() {
    initTooltips(document);
});

function initTooltips(elementRoot) {
    const tooltipTriggerList = elementRoot.querySelectorAll('[data-bs-action="tooltip"]');
    tooltipTriggerList.forEach((elem) => {
        new bootstrap.Tooltip(elem, {
            trigger: 'hover',
            delay: {show: 500, hide: 0},
            container: 'body'
        });
    });
}

function setupClanButtons(dropdownId, delBtnId, editBtnId) {
    const dropdown = document.getElementById(dropdownId);
    const deleteButton = document.getElementById(delBtnId);
    const editButton = document.getElementById(editBtnId);

    dropdown.addEventListener('change', function () {
        deleteButton.disabled = !this.value;
        editButton.disabled = !this.value;
        if (this.value) {
            deleteButton.classList.remove("bg-secondary-subtle");
            editButton.classList.remove("bg-secondary-subtle");
        } else {
            deleteButton.classList.add("bg-secondary-subtle");
            editButton.classList.add("bg-secondary-subtle");
        }
    });
}

function getSelectedClanId(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    const selectedClanId = dropdown.options[dropdown.selectedIndex].value;
    return parseInt(selectedClanId);
}

function setupPlayerButtons(dropdownId, listId, addBtnId) {
    const dropdown = document.getElementById(dropdownId);
    const addButton = document.getElementById(addBtnId);

    dropdown.addEventListener('change', function () {
        addButton.disabled = !this.value && (dropdown.selectedIndex !== -1);
        if (this.value)
            addButton.classList.remove("bg-secondary-subtle");
        else
            addButton.classList.add("bg-secondary-subtle");
    });
}

function getClanLists(event) {
    const button = event.relatedTarget;
    const clanListId = button.getAttribute('data-bs-list');
    const clanList = document.querySelector(clanListId);

    let otherClanListId;
    if (clanListId === '#home-clan')
        otherClanListId = '#opponent-clan'
    else
        otherClanListId = '#home-clan'
    const otherClanList = document.querySelector(otherClanListId);

    return [clanList, otherClanList];
}

function getPlayerLists(event) {
    const button = event.relatedTarget;
    let playerListId = button.getAttribute('data-bs-list');
    if (playerListId === null)
        playerListId = '#' + button.closest('ul').parentElement.parentElement.id;
    const playerList = document.querySelector(playerListId);

    let otherPlayerListId;
    if (playerListId === '#home-player-list')
        otherPlayerListId = '#opponent-player-list'
    else
        otherPlayerListId = '#home-player-list'
    const otherPlayerList = document.querySelector(otherPlayerListId);

    return [playerList, otherPlayerList];
}

function getSelectedClan(event) {
    const button = event.relatedTarget;
    let playerListId = button.getAttribute('data-bs-list');
    if (playerListId === null)
        playerListId = '#' + button.closest('ul').parentElement.parentElement.id;

    let clanListId;
    if (playerListId === '#home-player-list')
        clanListId = '#home-clan'
    else
        clanListId = '#opponent-clan'
    const clanList = document.querySelector(clanListId);

    return clanList.options[clanList.selectedIndex];
}

function loadClans() {
    const homeClanList = document.getElementById('home-clan');
    const oppClanList = document.getElementById('opponent-clan');

    fetch('/clans_html')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(data => {
            homeClanList.innerHTML = data;
            oppClanList.innerHTML = data;
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}

function updateSelectedPlayers(sender) {
    const playerList = sender.parentElement.parentElement.parentElement.parentElement;
    const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');
    let counter = 0;

    Array.from(playerList.children).forEach(p => {
       if (p.querySelector('input[type="checkbox"]:checked'))
           counter++;
    });

    checkCounter.innerText = counter;
}

function selectAllPlayers(playerListId) {
    const playerList = document.getElementById(playerListId);
    const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');

    Array.from(playerList.children).forEach(p => {
        p.querySelector('input[type="checkbox"]').checked = true;
    });

    checkCounter.innerText = playerList.children.length;
}

function deselectAllPlayers(playerListId) {
    const playerList = document.getElementById(playerListId);
    const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');

    Array.from(playerList.children).forEach(p => {
        p.querySelector('input[type="checkbox"]').checked = false;
    });

    checkCounter.innerText = 0;
}

function singleCalcSpinner(sender) {
    const spinner = '<i class="spinner-grow spinner-grow-sm text-info align-baseline me-2" style="margin-left: 0.91rem;" role="status"></i>';
    const score = sender.previousElementSibling.children[1];
    score.innerHTML = spinner;
    sender.disabled = true;
    sender.addEventListener('htmx:afterRequest', function () {
        sender.disabled = false;
        const homeClan = document.getElementById('home-clan');
        const oppClan = document.getElementById('opponent-clan');
        if (homeClan.selectedIndex === oppClan.selectedIndex) {
            if (sender.parentElement.parentElement.id === 'home-player-list')
                oppClan.dispatchEvent(new Event('change'));
            else
                homeClan.dispatchEvent(new Event('change'));
        }
    }, {once: true});
}