Page History

<section class="event-group-section 

ev-cards-section

<section class="event-group-section" id="

past-events-section

	</div>
</div>

<style>
#unpublished-events .conf-

<style>
#unpublished-events .conf-macro.output-block[data-macro-name=confiform-cleanview] {
    padding: 0px 35px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-gap: 20px;
    height: auto !important;
    justify-content: space-evenly;
}
</style>

<style>

.wiki-content #announcementcontainer .announcementcard a {
  color: black !important;
  border: none;
  border-bottom: 1px solid black !important;
  padding: 0;
  width: auto;
}

</style>

<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>`;
        	liveEl.innerTextallEventCardsHTML += "LIVE"eventCardHTML;
    }
    	currCarddocument.insertAdjacentElement('afterbegin', liveEl);
		}
	  }
	}
  }

  window.addEventListener('load', (getElementById(eventFilterData.selector).innerHTML =
        allEventCardsHTML;
};

const renderScrollButtons = (scrollableSection, id) => {
    let upcomingEventscurrSection = document.getElementById('upcoming-events-section')scrollableSection;
    let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard'));

currSection.id = `scroll-section-${id}`;
    forlet (letscrollContainer i = 0; i < upcomingCards.length; i++) {= document.createElement("div");
    scrollContainer.classList.add("scroll-buttons-container");
      let currCardscrollContainer.id = upcomingCards[i]`scroll-menu-${id}`;
      let currCardStartleftButton = currCard.dataset.startdate;`
    <div  let minsTilStart = getMinutesUntilEventStart(currCardStart);

class="scroll-button-container scroll-button-container-left">
        if (minsTilStart <= 0) {
		// Check if event is offline 
	    if (currCard.dataset.offline == "true") {
		  	continue;
	    }
    <div id="scroll-left-${id}" class="scroll-button">
        <img src="/download/attachments/${dashPageId}/chev-left.png?api=v2" />
        </div>
    </div>
    `;
    let liveElrightButton = document.createElement("div");`
    <div    liveEl.classList.add('live-circle');class="scroll-button-container scroll-button-container-right">
        liveEl.innerText<div id="scroll-right-${id}" class="LIVEscroll-button";>
        currCard.insertAdjacentElement('afterbegin', liveEl);<img src="/download/attachments/${dashPageId}/chev-right.png?api=v2" />
      }  </div>
    }
	
	//if (AJS.params.remoteUser == "alex@gsvlabs.com") {
		showPastWatchIndicators()
	//}
  });
</script>
<style>
  .live-circle {
    font-size: 13px</div>
    `;

    scrollContainer.innerHTML = leftButton + rightButton;
    padding: 3px 18px;
    text-transform: uppercase;currSection.insertAdjacentElement("beforeend", scrollContainer);

    currSection.addEventListener("scroll", () =>
    font-weight: bold;
    setTimeout(()  background-color: #cc1f1f;=> showOrHideScrollButtons(id), 200)
    color: white);
    position: absolute;leftButton.addEventListener("click", () =>
    z-index: 2;
    margin: 8px 8px    scrollLeft(`scroll-section-${id}`)
    );
    box-shadow: 1px 1px 5px #00000054;
  }
</style>

<style>
  .watch-indicator {rightButton.addEventListener("click", () =>
        scrollRight(`scroll-section-${id}`)
    font-size: 12px);

    padding: 3px 10px;updateScrollButtons();
};

Promise.all([
    text-transform: uppercase;renderEventCards(EVENT_FILTER_SECTION_DATA.myEvents),
    font-weight: bold;renderEventCards(EVENT_FILTER_SECTION_DATA.upcomingEvents),
    background-color: #036bc4;renderEventCards(EVENT_FILTER_SECTION_DATA.pastEvents),
    color: white;renderEventCards(EVENT_FILTER_SECTION_DATA.allEvents),
    position: absolute;
    z-index: 2renderEventCards(EVENT_FILTER_SECTION_DATA.unpublishedEvents),
]);

for (const group in EVENT_FILTER_SECTION_DATA) {
    console.log(group);
    margin: 8px 8pxrenderEventCards(EVENT_FILTER_SECTION_DATA[group]);
    box-shadow: 1px 1px 5px #00000054;
	border-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  .watch-indicator-icon {
	display: block;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px;
    padding-bottom: 2px;
  }
</style>

<style>

.wiki-content #announcementcontainer .announcementcard a {
  color: black !important;
  border: none;
  border-bottom: 1px solid black !important;
  padding: 0;
  width: auto;
}

</style>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" />