Page History

<script type="module">
const CREATE_EVENT_PAGE_ID = 107518480;
const CREATE_EVENT_FORM_NAME = "createEvent";

const EVENT_FILTER_SECTION_DATA = {
    myEvents: {
        selector: "my-events-cards-container",
        url: `/ajax/confiforms/rest/filter.action?pageId=${CREATE_EVENT_PAGE_ID}&f=${CREATE_EVENT_FORM_NAME}&ownedBy:${AJS.params.remoteUser}&sort=startDate ASC`,
    },
    upcomingEvents: {
        selector: "upcoming-events-cards-container",
        url: `/ajax/confiforms/rest/filter.action?pageId=${CREATE_EVENT_PAGE_ID}&f=${CREATE_EVENT_FORM_NAME}&q=publish:true&endDate:>=_now&sort=startDate ASC`,
    },
    pastEvents: {
        selector: "past-events-cards-container",
        url: `/ajax/confiforms/rest/filter.action?pageId=${CREATE_EVENT_PAGE_ID}&f=${CREATE_EVENT_FORM_NAME}&q=publish:true&endDate:<_now&sort=startDate DESC`,
    },
    allEvents: {
        selector: "all-events-cards-container",
        url: `/ajax/confiforms/rest/filter.action?pageId=${CREATE_EVENT_PAGE_ID}&f=${CREATE_EVENT_FORM_NAME}&q=publish:true&sort=startDate ASC`,
    },
    unpublishedEvents: {
        selector: "unpublished-events-cards-container",
        url: `/ajax/confiforms/rest/filter.action?pageId=${CREATE_EVENT_PAGE_ID}&f=${CREATE_EVENT_FORM_NAME}&q=publish:false&sort=startDate ASC`,
    },
};

import { format } from "https://cdn.skypack.dev/date-fns";
const getBulkEvents = async (requestURL) => {
    let result = await jQuery.ajax({
        url: requestURL,
        type: "get",
        dataType: "json",
    });
    return result.list?.entry;
};

const renderEventCards = async (eventFilterData) => {
    const eventsData = await getBulkEvents(eventFilterData.url);
    let allEventCardsHTML = "";
    if (!eventsData) {
        return;
    }
    for (const event of eventsData) {
        // Banner data from Confiforms is a Object string, convert or set default if no image is set.
        let bannerImageLink = "";
        let bannerImageURI = "";
        const {
            createdPage,
            offline,
            startDate,
            name,
            RSVPCount,
            bannerImage,
        } = event.fields;

        if (event.fields?.bannerImage) {
            const bannerImageData = JSON.parse(bannerImage)[0];
            bannerImageURI = /.png|.jpg/.test(bannerImageData.id)
                ? bannerImageData.id
                : bannerImageData.fileName;
            bannerImageLink = `/download/attachments/${createdPage}/${bannerImageURI}?api=v2`;
        } else {
            bannerImageLink =
                "https://passport-media.s3-us-west-1.amazonaws.com/ESG/events/ESG-default-dashboard.png";
        }
        const startDateObj = new Date(startDate);
        const formattedStartDate = format(startDateObj, "MMMM d");
        const formattedStartTime = format(startDateObj, "h:mm aaa");

        let eventCardHTML = `<div class="eventcard" onclick="handleEventCardClick(this);" data-cardtype="pastevents" data-cardurl="/pages/viewpage.action?pageId=${createdPage}" data-entryid="${event.id}" data-cardtitle="${name}" data-offline="${offline}" data-startdate="${formattedStartDate}">
            <a class="eventcardlink" href="/pages/viewpage.action?pageId=${createdPage}" id="${createdPage}">
                <div class="img-container">
                    <img src="${bannerImageLink}"></img>
                </div>
                <div class="text-container">
                    <div class="top">
                        <div class="dates"><p class="formattedDate">${formattedStartDate}</p></div>
                    </div>
                    <div class="bottom">
                        <div class="title">${name}</div>
                        <div class="dates"><p class="formattedDatetime">${formattedStartTime}</p></div>
                        <div class="attendees">${RSVPCount} Participants</div>
                    </div>
                </div>
            </a>
        </div>`;
        allEventCardsHTML += eventCardHTML;
    }
    document.getElementById(eventFilterData.selector).innerHTML =
        allEventCardsHTML;
};

const renderScrollButtons = (scrollableSection, id) => {
    let currSection = scrollableSection;
    currSection.id = `scroll-section-${id}`;
    let scrollContainer = document.createElement("div");
    scrollContainer.classList.add("scroll-buttons-container");
    scrollContainer.id = `scroll-menu-${id}`;
    let leftButton = `
    <div class="scroll-button-container scroll-button-container-left">
        <div id="scroll-left-${id}" class="scroll-button">
        <img src="/download/attachments/${dashPageId}/chev-left.png?api=v2" />
        </div>
    </div>
    `;
    let rightButton = `
    <div class="scroll-button-container scroll-button-container-right">
        <div id="scroll-right-${id}" class="scroll-button">
        <img src="/download/attachments/${dashPageId}/chev-right.png?api=v2" />
        </div>
    </div>
    `;

    scrollContainer.innerHTML = leftButton + rightButton;
    currSection.insertAdjacentElement("beforeend", scrollContainer);

    currSection.addEventListener("scroll", () =>
        setTimeout(() => showOrHideScrollButtons(id), 200)
    );
    leftButton.addEventListener("click", () =>
        scrollLeft(`scroll-section-${id}`)
    );
    rightButton.addEventListener("click", () =>
        scrollRight(`scroll-section-${id}`)
    );

    updateScrollButtons();
};

Promise.all([
    renderEventCards(EVENT_FILTER_SECTION_DATA.myEvents),
    renderEventCards(EVENT_FILTER_SECTION_DATA.upcomingEvents),
    renderEventCards(EVENT_FILTER_SECTION_DATA.pastEvents),
    renderEventCards(EVENT_FILTER_SECTION_DATA.allEvents),
    renderEventCards(EVENT_FILTER_SECTION_DATA.unpublishedEvents),
]);

for (const group in EVENT_FILTER_SECTION_DATA) {
    console.log(group);
    renderEventCards(EVENT_FILTER_SECTION_DATA[group]);
    const sectionEle = document.getElementById(group.selector);
    renderScrollButtons(sectionEle, group.selector);
}

// window.onload(async (event) => {
//     console.log("BLAHBLAH");
//     console.log(event);
//     for (const group in EVENT_FILTER_SECTION_DATA) {
//         console.log(group);
//         await renderEventCards(EVENT_FILTER_SECTION_DATA[group]);
//         renderScrollButtons(group.selector);
//     }
//     renderScrollButtons();
// });
</script>

<link rel="stylesheet type="text/css" href="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/stylesheets/ESG/eventDashboard/updatedEventsDashboard.css" />