import wixWindow from 'wix-window';

import wixData from 'wix-data';

 

​

let expirationTimer = null;

​

$w.onReady(function () {

    // Wait for dataset for events to load

    $w('#dataset1').onReady(() => {

        // Start the expiration timer

        checkExpirationTimer();

    });

    

});

 

/*

 * checkExpirationTimer 

 * This function does the hard work of tracking when

 * displayed events that should be removed are expired.

 *

 * This is a recursive function (it calls itself) which repeats forever

 * until the page exits.

 * The timer is recorded in the expirationTimer variable. This allows us to

 * stop the timer whenever a lightbox is loaded. The timer is restarted when

 * lightbox returns.

 */

const expirationTimerDelay = 10000; (10 seconds convert to milliseconds)

​

function checkExpirationTimer() {

    // The check to see if any events have expired

    filterDataSetByEventExpiration()

    .then(() => {

        // Refresh the repeater based on the filtered dataset

        $w('#repeater1').forEachItem(updateCustomFields);

    });

    // Set the delay we want before we call this function to re-filter the

    // dataset

    expirationTimer = setTimeout(() => {

        checkExpirationTimer(); // Call ourself after delay

    }, expirationTimerDelay);

}

 

/*

 * updateCustomFields 

 * This function is the repeater item event handler which is called whenever

 * the repeater content is updated

 *

 * NOTE: Several simple values are 'wired' to the repeater using dataset

 * binding for example event name and description. This function focuses on

 * Repeater information that requires additional processing

 */

function updateCustomFields ($item, itemData, index) {

    // Use the eventListing type to set the index of the radio button control

    // which is called 'eventListing'

    if (itemData.hasOwnProperty('freeEvent') && itemData.freeEvent) {

        $item('#eventListing').selectedIndex = 0;

    } else {

        $item('#eventListing').selectedIndex = 1;

    }

    // We display a clock which ticks down in ten second increments (basically

    // when the repeater is updated by checkExpirationTimer()

    // This is a text field with the ID 'expirationTimer'. The time based

    // (free) event listings are tagged with a boolean called 'eventExpires'

    // Which we use to display volatile event listings

    if (itemData.hasOwnProperty('eventExpires') && itemData.eventExpires) {

        // We use the Date object (see MDN) to format the time output we use

        // called toLocaleTimeString()

        let timeTilExpiration = itemData.expirationDate.getTime() - Date.now();

        $item('#expirationTimer').text = new Date(Date.UTC(0, 0, 0, 0, 0, 0)+timeTilExpiration).toLocaleTimeString('en-US', { hour12: false });

    } else {

        $item('#expireryTimeGroup').hide();

    }

    // We have a function that determines how many people have signed up

    // to the event

    addAttendeeCount($item, itemData);

}

​

/*

 * addAttendeeCount

 * This uses wixData to count the number of event registrations that have been

 * recorded in the registration lightbox.

 *

 * Since this is called by the repeater function updateCustomFields() we need

 * to have the repeater scope ($item) passed as a parameter and the event

 * object that we are working with.

 */

function addAttendeeCount(scope, event) {

    if (scope && event) {

        // Start a query to get the record count.

        // NOTE: We don't wait for this to complete (we want to use the

        // asynchronous nature of the Data API to load as many repeater items

        // simultaneously as possible).

        wixData.query("EventRegistrations")

        .eq('eventId', event._id)

        .count()

        .then((count) => {

            // Make sure the count we get back is printable

            count = (count === undefined ? 0 : count);

            // Add the count and show the result in the repeater

            scope('#attendees').text = String(count);

            scope('#attendeeGroup').show();

        });

    }

}

 

/*

 * filterDataSetByEventExpiration

 * 

 * The heart of filtering the display. We have set a date property called

 * "expirationDate" in the data collection which we use to determine what is

 * displayed in the repeater. Any events with an expirationDate that is

 * after "NOW" [which is determined using new Date()] we do not display. 

 */

function filterDataSetByEventExpiration () {

    let filter = wixData.filter().gt('expirationDate', new Date());

    return $w('#dataset1').setFilter(filter);

}

 

/*

 * addNewEvent_click

 *

 * This function responds to the click event on the button labelled

 * "Add New Event".

 * We postpone the timeout timer and load a lightbox "Add Event" to add the

 * new event.

 */

export function addNewEvent_click(event) {

    //Cancel the timeout for now

    clearTimeout(expirationTimer);

    // Load the Add Event LightBox. This has a promise that returns when the

    // Lightbox is closed

    wixWindow.openLightbox("Add Event")

    .then(() => {

        // Reload the dataset to add the new event

        checkExpirationTimer();

    });

}

 

/*

 * registerForEvent_click

 *

 * This function responds to the click event on the button labelled

 * "Register" in each repeater. Since this is a repeater event we need to 

 * use the scope using $w.at to access the repeater item for the event.

 * We postpone the timeout timer and load a lightbox "Register For Event" to

 * add the new event.

export function registerForEvent_click(event) {

    // Get the Event Id for the clicked item

    let eventId = event.context.itemId;

    //Cancel the timeout for now

    clearTimeout(expirationTimer);

    // Load the registration lightbox

    wixWindow.openLightbox("Register For Event", {'eventId':eventId})

    .then(() => {

        // Reload the dataset to add the new event

        checkExpirationTimer();

    });

}

 

/*

 * attendees_mouseIn

 *

 * An event trigger handler which displays a list of event attendees 

 * When the attendee count is hovered over

 *

 * We use a special dataset linked to the event registration data collection 

 * and a simple repeater attached to the dataset. So this function simply

 * filters the registration collection by the event id and displays the

 * attendee emails.

 */

export function attendees_mouseIn(event) {

    // Get the eventId for the event attendee filter

    let eventId = event.context.itemId;

    // All we do is apply the event filter and expand the repeater

    // Display. The data binding will show the content

    let filter = wixData.filter().eq('eventId', eventId);

    $w('#registrationDataset').setFilter(filter)

    .then(() => {

        $w('#attendeeListBox').expand();

    });

}

 

/*

 * deleteRegistration_click

 * 

 * This function is used to delete a registration item from the reistration

 * data collection.

 *

 * It is called from a repeater item and so determines the scope

 * on the repeater and then uses this on the dataset to remove the item.

 *

 * NOTE: Make sure the dataset has read/write permissions or this will

 * likely fail.

 */

export function deleteRegistration_click(event) {

     // Get the item to remove

     let $item = $w.at(event.context);

     let item = $item('#registrationDataset').remove();

     $item('#deletedLine').expand();

     $item('#deleteRegistration').hide();

 

}

 

/*

 * closeAttendees_click

 *

 * This is the event handler connected to the 'close cross' in the

 * corner of the registered attendees  display.

 *

 * When clicked the box is closed and the dataset is refreshed incase

 * any items were deleted.

 */

export function closeAttendees_click(event) {

    $w('#attendeeListBox').collapse();

    $w('#registrationDataset').refresh();

}