InfantrySkillCalculator/static/index.js

document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    tooltipTriggerList.forEach((elem) => {
        new bootstrap.Tooltip(elem);
    });
});

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;
    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 confirmAndTrigger(btn) {
    Swal.fire({
        title: btn.innerText,
        text: 'Do you want to continue?',
        confirmButtonText: 'Yes',
        confirmButtonColor: '#dd6b55',
        denyButtonColor: '#3085d6',
        icon: 'warning',
        showDenyButton: true
    }).then((result) => {
        if (result.isConfirmed) {
            htmx.trigger(btn, 'confirmed');
        }
    });
}

function createCodeDialog(btn) {
    Swal.fire({
        title: btn.innerText,
        input: 'select',
        inputOptions: {
            'READER': 'Reader',
            'AUTHOR': 'Author',
            'ADMIN': 'Admin'
        },
        inputPlaceholder: 'Select a role',
        confirmButtonText: 'Generate',
        showCancelButton: true
    }).then((result) => {
        if (result.isConfirmed) {
            btn.setAttribute('hx-vals', '{"user_role": "' + result.value + '"}');
            htmx.trigger(btn, 'confirmed');
        }
    });
}