polyplus/js/account/friends.js

var SelectedFriends = []

chrome.storage.sync.get(['PolyPlus_Settings'], function(result){
    Settings = result.PolyPlus_Settings;
    if (Settings.ImprovedFrListsOn === true) {
        var Tab = "requests"

        var FriendsContainer = document.getElementById('friends-container')
        var Container = document.createElement('div')
        Container.classList = 'row mb-3'
        Container.innerHTML = `
        <div class="col"><button id="AccAllFrBtn" class="btn btn-success w-100">Accept all Friend Request(s)</button></div>
        <div class="col"><button id="DelAllFrBtn" class="btn btn-danger w-100">Decline all Friend Request(s)</button></div>
        `
        FriendsContainer.parentElement.insertBefore(Container, FriendsContainer)
        var AccAllFrBtn = document.getElementById('AccAllFrBtn')
        var DelAllFrBtn = document.getElementById('DelAllFrBtn')
        var AccBtns = document.querySelectorAll('[onclick="acceptFriendRequest(this)"]')
        var DelBtns = document.querySelectorAll('[onclick="declineFriendRequest(this)"]')
        if (!(AccBtns.length === 0)) {
            AccAllFrBtn.addEventListener('click', function(){
                AccBtns.forEach(element => {
                    setTimeout(function () {}, 145)
                    fetch('https://polytoria.com/api/friends/send', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-Token': document.querySelector('input[name="_csrf"]').value
                        },
                        body: JSON.stringify({ userID: parseInt(element.getAttribute('data-user-id')) }),
                    })
                    .catch(error => {
                        // Handle any errors
                        console.error('Error:', error);
                        Success = false
                    });

                    /*
                    let NewAcceptBtn = document.createElement('a')
                    NewAcceptBtn.style.display = 'none'
                    sNewAcceptBtn.classList = 'btn btn-success'
                    NewAcceptBtn.setAttribute('data-user-id', element.getAttribute('data-user-id'))
                    NewAcceptBtn.setAttribute('onclick', 'acceptFriendRequest(this)')
                    FriendsContainer.appendChild(NewAcceptBtn)
                    NewAcceptBtn.click();
                    */
                })
            });
        } else {
            AccAllFrBtn.setAttribute('disabled', 'true')
        }
        if (!(DelBtns.length === 0)) {
            DelAllFrBtn.addEventListener('click', function(){
                DelBtns.forEach(element => {
                    setTimeout(function () {}, 110)
                    fetch('https://polytoria.com/api/friends/remove', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-Token': document.querySelector('input[name="_csrf"]').value
                        },
                        body: JSON.stringify({ userID: parseInt(element.getAttribute('data-user-id')) }),
                    })
                    .catch(error => {
                        // Handle any errors
                        console.error('Error:', error, document.querySelector('input[name="_csrf"]').value);
                        Success = false
                    });

                    /*
                    let NewDeclineBtn = document.createElement('a')
                    NewDeclineBtn.style.display = 'none'
                    NewDeclineBtn.classList = 'btn btn-danger'
                    NewDeclineBtn.setAttribute('data-user-id', element.getAttribute('data-user-id'))
                    NewDeclineBtn.setAttribute('onclick', 'declineFriendRequest(this)')
                    FriendsContainer.appendChild(NewDeclineBtn)
                    NewDeclineBtn.click();
                    */
                })
            });
        } else {
            DelAllFrBtn.setAttribute('disabled', 'true')
        }
        let Text = document.createElement('p')
        Text.classList = 'mx-auto'
        Text.style.textAlign = 'center'
        Text.style.fontSize = '1.3rem'
        Text.style.display = 'none'
        Text.innerHTML = `
        <span>0</span> friends selected!
        <br>
        <button id="viewSelectionBtn" class="btn btn-primary">View Selection</button>
        <button id="clearSelectionBtn" class="btn btn-warning">Clear Selection</button>
        <button id="removeSelectionBtn" class="btn btn-danger">Remove Selected Friends</button>
        `
        FriendsContainer.parentElement.insertBefore(Text, FriendsContainer)
        let Text_Span = Text.querySelector('span');
        let Text_View = document.getElementById('viewSelectionBtn');
        let Text_Clear = document.getElementById('clearSelectionBtn');
        let Text_Remove = document.getElementById('removeSelectionBtn');
        document.querySelector('[data-friends-tab="requests"]').addEventListener('click', function(){
            Tab = "requests"
            Container.style.display = '';
            Text.style.display = 'none';
            document.querySelectorAll('input[type="check"]').forEach(element => {element.remove();});
        });
        document.querySelector('[data-friends-tab="friends"]').addEventListener('click', function(){
            Tab = "friends"
            Container.style.display = 'none';
            Text.style.display = '';
        });
        var ConfirmRemove = 0
        Text_View.addEventListener('click', function(){});
        Text_Clear.addEventListener('click', function(){
            SelectedFriends = []
            UpdateCheckboxes();
            Text_Span.innerText = SelectedFriends.length
        });
        Text_Remove.addEventListener('click', function(){
            ConfirmRemove = ConfirmRemove + 1
            switch(ConfirmRemove) {
                case 0:
                    Text_Remove.innerText = 'Remove Selected Friends'
                    break
                case 1:
                    Text_Remove.innerText = 'Are you sure?'
                    break
                case 2:
                    for (let i = 0; i < SelectedFriends.length; i++) {
                        setTimeout(function () {}, 110)
                        let NewDeclineBtn = document.createElement('a')
                        NewDeclineBtn.style.display = 'none'
                        NewDeclineBtn.classList = 'btn btn-danger'
                        NewDeclineBtn.setAttribute('data-user-id', SelectedFriends[i])
                        NewDeclineBtn.setAttribute('onclick', 'declineFriendRequest(this)')
                        FriendsContainer.appendChild(NewDeclineBtn)
                        NewDeclineBtn.click();
                    }
                    SelectedFriends = []
                    UpdateCheckboxes();
                    Text_Remove.innerText = 'Remove Selected Friends'
                    ConfirmRemove = 0
                    break
            }
        });

        const observer = new MutationObserver(function (){
            if (FriendsContainer.children.length > 0 && Tab === "friends") {
                LoadCheckBoxes();
            }
        });
        observer.observe(FriendsContainer, {childList: true, subtree: false});

        function LoadCheckBoxes() {
            Array.from(FriendsContainer.children).forEach(element => {
                let DeclineBtn = element.querySelector('a.btn.btn-danger')
                let UserID = DeclineBtn.getAttribute('data-user-id')
                let Column = document.createElement('div')
                let EditColumn = element.querySelector('.col-9')
                Column.classList = 'col-auto'
                var NewCheckBox = document.createElement('button')
                NewCheckBox.classList = 'polyplus-multiremovefr-checkbox'
                NewCheckBox.setAttribute('style', 'padding: 20px; background-color: #191919; border: 1px solid #393939; border-radius: 1rem;')
                var Index = SelectedFriends.indexOf(UserID)
                if (Index !== -1) {
                    DeclineBtn.classList.add('disabled')
                    NewCheckBox.style.borderColor = 'lime'
                }
                EditColumn.classList.remove('col-9')
                EditColumn.classList.add('col')
                Column.appendChild(NewCheckBox)
                EditColumn.parentElement.appendChild(Column)
                NewCheckBox.addEventListener('click', function(){
                    var Index = SelectedFriends.indexOf(UserID)
                    if (Index === -1) {
                        DeclineBtn.classList.add('disabled')
                        SelectedFriends.push(UserID)
                        NewCheckBox.style.borderColor = 'lime'
                    } else {
                        SelectedFriends.splice(Index, 1) 
                        NewCheckBox.style.borderColor = '#393939'
                        DeclineBtn.classList.remove('disabled')
                    }
                    Text_Span.innerText = SelectedFriends.length
                    UpdateCheckboxes();
                });
            });
        }

        function UpdateCheckboxes(){
            document.querySelectorAll('.polyplus-multiremovefr-checkbox').forEach(element => {
                let Parent = element.parentElement.parentElement.parentElement.parentElement.parentElement
                let DeclineBtn = Parent.querySelector('a.btn.btn-danger')
                if (element.getAttribute('disabled')) {
                    element.removeAttribute('disabled')
                }
                if (SelectedFriends.IndexOf(DeclineBtn.getAttribute('data-user-id')) === -1) {
                    element.style.borderColor = '#393939'
                    DeclineBtn.classList.remove('disabled')
                    if (SelectedFriends.length >= 25) {
                        element.setAttribute('disabled', true)
                    }
                } else {
                    DeclineBtn.classList.add('disabled')
                    element.style.borderColor = 'lime'
                }
            })
        }
    }
});