Only portrait mode is currently supported - please rotate your device.
Page History
...
HTML |
---|
<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" /> |
...