{"id":264,"date":"2024-09-06T19:07:55","date_gmt":"2024-09-06T19:07:55","guid":{"rendered":"https:\/\/www.buddyupgo.com\/?page_id=264"},"modified":"2024-09-06T19:07:55","modified_gmt":"2024-09-06T19:07:55","slug":"buddies-list","status":"publish","type":"page","link":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/buddies-list\/","title":{"rendered":"Buddies List"},"content":{"rendered":"<div class=\"buddyUpPjaxContainer\" data-buddyup-pjax-container=\"1\"><style>body {\n    background: var(--buddyup-background);\n}\n\n\/* Section Wrappers *\/\n#buddiesListSectionWrapper {\n    padding: 30px;\n}\n\n.buddyUpBuddiesList {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 1rem;\n    margin-bottom: 1rem;\n}\n\n#buddyUpPendingList.buddyUpBuddiesList {\n    grid-template-columns: repeat(2, 1fr);\n}\n\n@media(min-width: 1601px){\n    .buddyUpBuddiesList {\n        grid-template-columns: repeat(4, 1fr);\n    }\n}\n\n@media(max-width: 1250px){\n    .buddyUpBuddiesList {\n        grid-template-columns: repeat(3, 1fr);\n    }\n\n    #buddyUpPendingList.buddyUpBuddiesList {\n        grid-template-columns: repeat(1, 1fr);\n    }\n}\n\n@media (min-width: 1000px){\n    #buddiesListSectionWrapper {\n        padding: 40px;\n    }\n}\n\n@media(max-width: 950px){\n    .buddyUpBuddiesList {\n        grid-template-columns: repeat(2, 1fr);\n    }\n}\n\n@media(max-width: 700px){\n    .buddyUpBuddiesList {\n        grid-template-columns: repeat(1, 1fr);\n        \/* gap: 0; *\/\n    }\n\n    #buddiesListSectionWrapper {\n        padding: 0;\n    }\n}\n\n\n\n\/* Buddy List Top Bar *\/\n.buddyUpBackLink {\n    transition: opacity .2s;\n}\n\n.buddyUpBackLink:hover {\n    color: inherit;\n    opacity: .7;\n}\n\n\n\/* Headings *\/\n.buddiesHeadingWrapper {\n    text-align: center;\n}\n\n.buddiesHeadingWrapper h1 {\n    margin: 0;\n}\n\n.buddiesHeadingWrapper#pendingHeadingWrapper {\n    margin-top: 2rem;\n}\n\n.buddiesHeadingWrapper .buddyCounter {\n    margin: 0;\n    color: #888;\n}\n\n@media (max-with: 600px){\n    .buddiesHeadingWrapper h1 {\n        font-size: 1.8rem;\n    }\n}\n\n\n\/* Buddy Cards *\/\nli.buddyCard {\n    list-style: none;\n    margin: 0;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n    overflow: visible;\n}\n\nli.buddyCard:before {\n    content: '';\n    display: none;\n}\n\n.buddyCard .loadingText {\n    margin: 0;\n}\n\n.buddyCard:not(.placeholderCard) {\n    border: 1px solid rgba(0,0,0,.1);\n    border-radius: var(--border-radius);\n    padding: 12px 15px;\n    box-shadow: 0 0 0 rgba(0,0,0,.1);\n    transition: box-shadow .2s;\n    cursor: pointer;\n}\n\n.buddyCard .buddyCardImage {\n    --image-size: 45px;\n    min-width: var(--image-size);\n    width: var(--image-size);\n    max-width: var(--image-size);\n    min-height: var(--image-size);\n    height: var(--image-size);\n    max-height: var(--image-size);\n}\n\n.buddyCard .buddyCardName {\n    font-weight: bold;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    line-height: normal;\n}\n\n.buddyCard .buddyCardButtonsWrapper {\n    text-align: right;\n    min-width: 85px;\n}\n\n.buddyCard .buddyCardButtons {\n    display: inline-block;\n}\n\n.buddyCard .buddyCardButtons button {\n    width: 30px;\n    height: 30px;\n    padding: 0;\n    font-size: .7rem;\n    margin: 0 0 0 5px;\n}\n\n.buddyCard .buddyCardButtons [data-toggle=\"add\"]:not(:disabled), .buddyCard .buddyCardButtons [data-toggle=\"accept\"]:not(:disabled) {\n    background: var(--secondary-color);\n    border-color: var(--secondary-color) !important;\n    color: white !important;\n}\n\n.buddyCard .buddyCardButtons [data-toggle=\"remove\"]:not(:disabled) {\n    background: #cc0000;\n    border-color: #cc0000 !important;\n}\n\n.buddyCard .buddyCardButtons [data-toggle=\"block\"]:not(:disabled) {\n    background: #f2f2f2 !important;\n    border-color: #f2f2f2 !important;\n    color: #222 !important;\n}\n\n.buddyCard .newBuddyBadge {\n    position: absolute;\n    top: -12px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: var(--primary-color);\n    color: white;\n    font-weight: bold;\n    border-radius: 5px;\n    font-size: .9rem;\n    padding: 0 .5rem;\n}\n\n@media (min-width: 701px){\n    .buddyCard:not(.placeholderCard):hover {\n        box-shadow: 0 0 7px rgba(0,0,0,.08);\n    }\n}\n\n@media(max-width: 700px){\n    .buddyCard:not(.placeholderCard) {\n        border-radius: 0;\n        border: none;\n        border-bottom: 1px solid rgba(0,0,0,.1);\n        padding: 1rem 0 1.5rem;\n    }\n\n    .buddyCard:not(.placeholderCard):last-of-type {\n        border-bottom: 0;\n    }\n    \n    .buddyCard .buddyCardButtons button {\n        width: 35px;\n        height: 35px;\n    }\n}\n\n\n\/* No Buddies Message *\/\n.noBuddiesMessage {\n    text-align: center;\n    padding: 2rem 1rem;\n}\n\n.noBuddiesMessage .textHeading {\n    margin-bottom: 0;\n}\n\n.noBuddiesMessage i.fa {\n    font-size: 2rem;\n    margin-bottom: 1rem;\n}\n\n.noBuddiesMessage a {\n    margin: 0;\n}\n\n\/* Message after pending response *\/\n.pendingCompleteMessage {\n    padding: 6px 15px;\n    background: rgba(0,0,0,.08);\n    border-radius: 5px;\n    font-weight: bold;\n    font-size: 14px;\n}<\/style><section id=\"buddiesListSectionWrapper\" class=\"buddyUpContainer buddyUp\"><\/section><script>const currentUser = BUDDYUP.getCurrentUser();\nconst buddiesListSection = document.getElementById('buddiesListSectionWrapper');\nif (BUDDYUP.getCurrentUser()){\n    function buddyCard(buddyInfo, type){\n        if (typeof buddyInfo === 'object' && buddyInfo.id){\n            var addTitle = type === 'pending' ? 'Accept Request' : 'Add Buddy';\n            var removeTitle = type === 'pending' ? 'Decline Request' : 'Remove Buddy';\n                removeTitle = type === 'match' ? 'Remove Match' : removeTitle;\n            \n            const acceptButton = type === 'pending' && buddyInfo.can_accept === true ? `<button class=\"buddyUpButton1 buddyCardButtonToggleBuddy\" data-type=\"${type}\" aria-label=\"Accept request from ${buddyInfo.full_name}\" data-toggle=\"accept\"><i class=\"fa fa-fw fa-solid fa-user-plus\" title=\"${addTitle}\"><\/i><\/button>` : '';\n            const blockButton = type !== 'match' ? `<button class=\"buddyUpButton1 buddyCardButtonToggleBuddy\" data-type=\"${type}\" aria-label=\"Block ${buddyInfo.full_name} as a Buddy\" data-toggle=\"block\"><i class=\"fa fa-fw fa-solid fa-ban\" title=\"Block Buddy\"><\/i><\/button>` : '';\n            const newBadge = buddyInfo.new && buddyInfo.new === true ? '<div class=\"newBuddyBadge\">New Buddy<\/div>' : '';\n            return `<li class=\"buddyCard flexWrapper\" data-id=\"${buddyInfo.id}\" aria-label=\"View ${buddyInfo.full_name}'s profile\" tabindex=\"0\">\n                ${newBadge}\n                <div class=\"buddyCardImage buddyUpImageCircle\"><img decoding=\"async\" src=\"${BUDDYUP.profileImageSrc(buddyInfo.profile_image)}\" alt=\"Image of ${buddyInfo.full_name}\" onerror=\"BUDDYUP.onErrProfileImage(this)\"><\/div>\n                <div class=\"buddyCardName\">${buddyInfo.full_name}<\/div>\n                <div class=\"buddyCardButtonsWrapper\">\n                    <div class=\"buddyCardButtons\">\n                        <button class=\"buddyUpButton1 buddyCardButtonSendMessage hidden\" data-type=\"${type}\" aria-label=\"Send Message to ${buddyInfo.full_name}\"><i class=\"fa-regular fa-fw fa-message\"><\/i><\/button>\n                        ${acceptButton}\n                        <button class=\"buddyUpButton1 buddyCardButtonToggleBuddy\" data-type=\"${type}\" aria-label=\"Remove ${buddyInfo.full_name} as a Buddy\" data-toggle=\"remove\"><i class=\"fa fa-fw fa-solid fa-user-minus\" title=\"${removeTitle}\"><\/i><\/button>\n                        ${blockButton}\n                    <\/div>\n                <\/div>\n            <\/li>`;\n        } else {\n            return `<li class=\"buddyCard flexWrapper placeholderCard\">\n                <div class=\"buddyCardImage buddyUpImageCircle\"><div class=\"loadingText\" style=\"width: 100%; height: 100%;\"><\/div><\/div>\n                <div class=\"buddyCardName placeholderName\"><div class=\"loadingText\">&nbsp;<\/div><\/div>\n            <\/li>`;\n        }\n    }\n\n    async function getBuddiesList(){\n        let placeholderBuddies = buddyCard() + buddyCard() + buddyCard() + buddyCard();\n        let buddyUpList = `<a href=\"${buddyUpVariables.account_link}\" class=\"buddyUpBackLink\"><i class=\"fa fa-solid fa-arrow-left\"><\/i> Back to Profile<\/a><br\/><br\/>\n        <div class=\"buddyUpElWrapper\">\n            <div id=\"buddiesHeadingWrapper\" class=\"buddiesHeadingWrapper hidden\">\n                <h1>Your Buddies<\/h1>\n                <p id=\"buddyCounter\" class=\"buddyCounter\"><\/p>\n            <\/div>\n            <ul id=\"buddyUpBuddiesList\" class=\"buddyUpBuddiesList\">${placeholderBuddies}<\/ul>\n\n            <div id=\"matchHeadingWrapper\" class=\"buddiesHeadingWrapper hidden\">\n                <h1>Matches<\/h1>\n                <p id=\"buddyUpMatchCounter\" class=\"buddyCounter\"><\/p>\n            <\/div>\n            <ul id=\"buddyUpMatchList\" class=\"buddyUpBuddiesList hidden\"><\/ul>\n\n            <div id=\"pendingHeadingWrapper\" class=\"buddiesHeadingWrapper hidden\">\n                <h1>Pending Requests<\/h1>\n                <p id=\"buddyUpPendingCounter\" class=\"buddyCounter\"><\/p>\n            <\/div>\n            <ul id=\"buddyUpPendingList\" class=\"buddyUpBuddiesList hidden\"><\/ul>\n        <\/div>`;\n        \n        buddiesListSection.innerHTML = buddyUpList;\n        \n        const currentUserBuddiesRequest = await BUDDYUP.apiRequest('buddy-get', {'id' : currentUser.id});\n        \n        if (currentUserBuddiesRequest.status === 'success'){\n            const buddies = currentUserBuddiesRequest.buddies;\n            const pending = currentUserBuddiesRequest.pending;\n            const matches = currentUserBuddiesRequest.matches;\n\n            if (matches.length > 0){\n                matches.sort(function(a, b){ \/\/ Sort buddies by name\n                    var textA = a.full_name.toUpperCase();\n                    var textB = b.full_name.toUpperCase();\n                    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;\n                });\n\n                let matchesList = document.getElementById('buddyUpMatchList');\n                matchesList.innerHTML = '';\n                let matchesCounter = 0;\n                matches.forEach(matchBuddy => {\n                    matchesList.innerHTML += matchBuddy.id !== 0 ? buddyCard(matchBuddy, 'match') : '';\n                    matchesCounter += matchBuddy.id !== 0 ? 1 : 0;\n                });\n                \n                document.getElementById('matchHeadingWrapper').classList.remove('hidden');\n                document.getElementById('buddyUpMatchCounter').innerHTML = `${matchesCounter} ${matchesCounter === 1 ? 'Match' : 'Matches'}`;\n\n                document.getElementById('buddyUpMatchList').classList.remove('hidden');\n            } else {\n                BUDDYUP.clearAllElements('#matchHeadingWrapper, #buddyUpMatchList');\n            }\n\n            if (pending.length > 0){\n                pending.sort(function(a, b){ \/\/ Sort buddies by name\n                    var textA = a.full_name.toUpperCase();\n                    var textB = b.full_name.toUpperCase();\n                    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;\n                });\n\n                let pendingList = document.getElementById('buddyUpPendingList');\n                pendingList.innerHTML = '';\n                let pendingCounter = 0;\n                pending.forEach(pendingBuddy => {\n                    pendingList.innerHTML += pendingBuddy.id !== 0 ? buddyCard(pendingBuddy, 'pending') : '';\n                    pendingCounter += pendingBuddy.id !== 0 ? 1 : 0;\n                });\n                \n                document.getElementById('pendingHeadingWrapper').classList.remove('hidden');\n                document.getElementById('buddyUpPendingCounter').innerHTML = `${pendingCounter} ${pendingCounter === 1 ? 'Request' : 'Requests'}`;\n\n                document.getElementById('buddyUpPendingList').classList.remove('hidden');\n            } else {\n                BUDDYUP.clearAllElements('#pendingHeadingWrapper, #buddyUpPendingList');\n            }\n            \n\n            if (buddies.length > 0){ \/\/ Buddies exist\n                buddies.sort(function(a, b){ \/\/ Sort buddies by name\n                    var textA = a.full_name.toUpperCase();\n                    var textB = b.full_name.toUpperCase();\n                    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;\n                });\n    \n                let buddyList = document.getElementById('buddyUpBuddiesList');\n                buddyList.innerHTML = '';\n                let buddyCounter = 0;\n                buddies.forEach(buddy => {\n                    buddyList.innerHTML += buddy.id !== 0 ? buddyCard(buddy) : '';\n                    buddyCounter += buddy.id !== 0 ? 1 : 0;\n                });\n                \n                document.getElementById('buddiesHeadingWrapper').classList.remove('hidden');\n                document.getElementById('buddyCounter').innerHTML = `${buddyCounter} ${buddyCounter === 1 ? 'Buddy' : 'Buddies'}`;\n            } else {\n                var message =`<i class=\"fa fa-solid fa-users fa-fw\"><\/i>\n                <p class=\"textHeading\">No Buddies found<\/p>\n                <p>Go out and find some new Buddies!<\/p>\n                <a href=\"${buddyUpVariables.user_search_link}\" class=\"buddyUpButton1\">Find Buddies<\/a>`;\n                \n                BUDDYUP.clearAllElements('#buddyUpBuddiesList, #buddiesHeadingWrapper'); \/\/ Remove the buddy \n                const noBuddiesMessage = `<div class=\"noBuddiesMessage\">\n                ${message}\n                <\/div>`;\n                document.querySelector('.buddyUpElWrapper').insertAdjacentHTML('afterbegin', noBuddiesMessage);\n            }\n        } else {\n            var message =`<i class=\"fa fa-solid fa-exclamation-circle fa-fw\"><\/i>\n            <p class=\"textHeading\">An error occurred<\/p>\n            <p style=\"padding-bottom: 0;\">There was a problem getting your buddies list. Please try again later.<\/p>`;\n\n            BUDDYUP.clearAllElements('#buddyUpBuddiesList, #buddiesHeadingWrapper');\n            const noBuddiesMessage = `<div class=\"noBuddiesMessage\">\n            ${message}\n            <\/div>`;\n            document.querySelector('.buddyUpElWrapper').insertAdjacentHTML('beforeend', noBuddiesMessage);\n        }\n    }\n\n    getBuddiesList();\n\n    \/\/ Event Handlers\n    async function buddyEventHandler(e){\n        const buddyCard = e.target.closest('.buddyCard');\n\n        if (buddyCard){ \/\/ Check if a buddy card was clicked\n            let buddyID = buddyCard.getAttribute('data-id');\n            \n            if (buddyID && buddyID != 0){ \/\/ If a buddy id is set, continue with the event handler\n                const toggleBuddyButton = e.target.closest('.buddyCardButtonToggleBuddy');\n                const sendMessageButton = e.target.closest('.buddyCardButtonSendMessage');\n                \n                if (toggleBuddyButton){ \/\/ If the buddy toggle button is clicked\n                    toggleBuddyButton.setAttribute('disabled', 'disabled'); \/\/ Disable button to prevent duplicate requests\n                    \n                    const friendshipToggle = toggleBuddyButton.getAttribute('data-toggle'); \/\/ Check to see if buddy is being removed or added\n                    const buddyType = toggleBuddyButton.getAttribute('data-type');\n                    \n                    let endpointToHit = '';\n                    let endpointData = { 'id': buddyID };\n\n                    if (friendshipToggle === 'add'){\n                        endpointToHit = 'buddy-add';\n                    } else if (friendshipToggle === 'remove'){\n                        endpointToHit = 'buddy-remove';\n                    } else if (friendshipToggle === 'block'){\n                        endpointToHit = 'buddy-block';\n                        endpointData.block = 1;\n                    } else if (friendshipToggle === 'accept'){\n                        endpointToHit = 'buddy-respond';\n                        endpointData.action = 'accept';\n                    }\n                    \n                    const toggleBuddyRequest = await BUDDYUP.apiRequest(endpointToHit, endpointData);\n                    \n                    if (toggleBuddyRequest.status === 'success'){\n                        if (buddyType === 'match'){\n                            buddyCard.querySelector('.buddyCardButtons').innerHTML = `<div class=\"pendingCompleteMessage\">Buddy Unmatched<\/div>`;\n                        } if (buddyType === 'pending'){\n                            let message = friendshipToggle === 'remove' ? 'Buddy Rejected' : 'Buddy Added';\n                                message = friendshipToggle === 'block' ? 'Buddy Blocked' : message;\n                            buddyCard.querySelector('.buddyCardButtons').innerHTML = `<div class=\"pendingCompleteMessage\">${message}<\/div>`;\n                        } else {\n                            if (friendshipToggle === 'remove'){\n                                toggleBuddyButton.setAttribute('data-toggle', 'add');\n                                toggleBuddyButton.setAttribute('title', 'Add Buddy');\n                                toggleBuddyButton.querySelector('i').classList.remove('fa-user-minus');\n                                toggleBuddyButton.querySelector('i').classList.add('fa-user-plus');\n                            } else if (friendshipToggle === 'add') {\n                                toggleBuddyButton.setAttribute('data-toggle', 'remove');\n                                toggleBuddyButton.setAttribute('title', 'Remove Buddy');\n                                toggleBuddyButton.querySelector('i').classList.add('fa-user-minus');\n                                toggleBuddyButton.querySelector('i').classList.remove('fa-user-plus');\n                                \n                                const modalContent = `Give your Buddy a moment to view your request.`;\n                                BUDDYUP.openModal(modalContent, 'Buddy Request Sent!', 'buddyUpTextCenter');\n                            } else if (friendshipToggle === 'block'){\n                                buddyCard.querySelector('.buddyCardButtons').innerHTML = `<div class=\"pendingCompleteMessage\">Buddy Blocked<\/div>`;\n                            }\n                        }\n                    }\n                    \n                    toggleBuddyButton.removeAttribute('disabled');\n                } else if (sendMessageButton){ \/\/ Currently unused\n                    sendMessageButton.setAttribute('disabled', 'disabled'); \/\/ Disable button to prevent duplicate requests\n\n                    sendMessageButton.removeAttribute('disabled');\n                } else {\n                    BUDDYUP.pjaxNavigate(buddyUpVariables.account_link + buddyID);\n                }\n            }\n        }\n    }\n\n    BUDDYUP.setGlobalHandler('buddies.click', document, 'click', e => {\n        buddyEventHandler(e);\n    });\n\n    BUDDYUP.setGlobalHandler('buddies.keyup', document, 'keyup', e => {\n        if (e.key === 'Enter'){\n            buddyEventHandler(e);\n        }\n    });\n} else {\n    let errMessageContent = `<p>Please log in or register to view and find buddies!<\/p>\n        <a href=\"${buddyUpVariables.login_link}\" class=\"buddyUpButton1\">Log in<\/a>\n        <a href=\"${buddyUpVariables.register_link}\" class=\"buddyUpButton1\" style=\"margin-left: .5rem;\">Sign Up<\/a>`;\n    let errMessage = BUDDYUP.errorPage('Please log in', errMessageContent);\n    buddiesListSection.innerHTML = errMessage;\n}<\/script><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/full-width-no-header.php","meta":{"footnotes":""},"class_list":["post-264","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/comments?post=264"}],"version-history":[{"count":0,"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/pages\/264\/revisions"}],"wp:attachment":[{"href":"https:\/\/buddyupapi-staging.us35.cdn-alpha.com\/api\/wp\/v2\/media?parent=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}