rbs@u2-js

Save File Also

Copy This

modul

file_name function_name content 17789

import app from "./app.js";
import store from "./store.js";
var $ = Dom7;

var trendingEventsStore = store.getters.getTrendingEvents;
var trendingVenuesStore = store.getters.getTrendingVenues;
var eventCategories = store.getters.getEventCategories;
var filteredEventsStore = store.getters.getFilteredEvents;
var filteredVenuesStore = store.getters.getFilteredVenues;
var trendingUsersStore = store.getters.getTrendingUsers;

var isFetchingPosts = false
var currentEventsPage = 1
var currentVenuesPage = 1
var currentUsersPage = 1
var refreshed = false

var totalEventPages = 1
var totalVenuesPages = 1
var totalUsersPages = 1

var autocomplete;
var filters = {};

//AUTOCOMPLETE FUNCTIONS
function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("autocomplete"), {
            types: ["establishment", "geocode"],
            componentRestrictions: {
                country: 'GB'
            }
        }
    );
    autocomplete.setFields(["geometry", "address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
    const place = autocomplete.getPlace();

console.log(place);

document.getElementById('lat').value = place.geometry.location.lat();
    document.getElementById('lng').value = place.geometry.location.lng();
}

function populateEventCard(data = [], isSwiper = true) {
    const swiperContainer = document.querySelector('#trending-events');
    if (isSwiper) swiperContainer.innerHTML = '';

const eventsTabContainer = document.querySelector('#filtered-events-tab');

if (refreshed) {
        eventsTabContainer.innerHTML = '';
    }

data.forEach(event => {
        const startDate = new Date(event.start_date);
        const endDate = new Date(event.end_date);
        // const startDate = new Date(event.dates[0].start_date);
        // const endDate = new Date(event.dates[0].end_date);

let endDateString = '';

if (startDate.getDate() !== endDate.getDate()) {
            endDateString = `
            <div class="event-date-item">
                <p>${endDate.toLocaleString('default', { month: 'short' })}</p>
                <h5>${endDate.getDate()}</h5>
            </div>
            `
        }

const card = `
        <a href="/discover-view-event/${event.id}">
            <div class="card event-item">
                <div class="event-image position-relative">
                    <div class="image-rectangle" style="background-image: url('${event.thumbnail}');"></div>
                    <div class="event-dates">
                        <div class="event-date-item">
                            <p>${startDate.toLocaleString('default', { month: 'short' })}</p>
                            <h5>${startDate.getDate()}</h5>
                        </div>
                        ${endDateString}
                    </div>
                </div>
                <div class="card-content">
                    <h3 class="event-title">${event.title}</h3>
                    <p class="event-info">Starts ${startDate.toLocaleString('default', { weekday: 'short' })}, ${startDate.getDate()} ${startDate.toLocaleString('default', { month: 'short' })} ${startDate.getFullYear()}</p>
                    <div class="event-info">
                        ${event.location}
                    </div>
                </div>
            </div>
        </a>
        `;

if (isSwiper) {
            const swiperSlide = document.createElement('swiper-slide');
            swiperSlide.innerHTML = card;
            swiperContainer.appendChild(swiperSlide);
        }

eventsTabContainer.innerHTML += card;
    });
}

function populateVenueCard(data = [], isSwiper = true) {
    const swiperContainer = document.querySelector('#trending-venues');

if (isSwiper) swiperContainer.innerHTML = '';

const eventsTabContainer = document.querySelector('#filtered-venues-tab');

data.forEach(event => {
        const swiperSlide = document.createElement('swiper-slide');

const card = `
        <a href="/discover-view-venue/${event.ID}">
            <div class="card event-item">
                <div class="event-image position-relative">
                    <div class="image-rectangle" style="background-image: url('${event.cover_image}');"></div>
                </div>
                <div class="card-content">
                    <h3 class="event-title">${event.title}</h3>
                    <div class="event-info">
                        ${event.venue_location}
                    </div>
                    <div class="event-info">
                        Apprx. ${event.distance} miles away
                    </div>
                </div>
            </div>
        </a>
        `;

if (isSwiper) {
            swiperSlide.innerHTML = card;
            swiperContainer.appendChild(swiperSlide);
        }

eventsTabContainer.innerHTML += card;
    });

}

function populateUsersCard(data = []) {
    const tabContainer = document.querySelector('#users-vehicles-tab');

data.forEach(user => {
        let linkTo = user.type === 'user' ? `/profile-view/${user.id}` : `/profile-garage-vehicle-view/${user.id}`;
        let title;

if (user.type === 'user') {
            title = user.name;
        }

if (user.type === 'vehicle') {
            const userName = user.owner.username;
            const vehicleName = user.title;

title = `${vehicleName} <br/> Owner ${userName}`;
        }

function addCategoryOptions(categories) {
    const categoryFilters = document.querySelector('#category-filters ul');

categories.forEach(category => {
        const listItem = document.createElement('li');

listItem.innerHTML = `
            <label class="item-checkbox item-content">
                <input type="checkbox" name="${category.slug}" value="${category.id}" />
                <i class="icon icon-checkbox"></i>
                <div class="item-inner">
                    <div class="item-title">${category.name}</div>
                </div>
            </label>
        `;

categoryFilters.appendChild(listItem);
    });
}

// Event listener for the submit button
$(document).on('click', '.apply-filters', function (e) {
    const dateFilters = document.querySelector('#date-filters ul');
    const locationFilters = document.querySelector('#location-filters ul');
    const categoryFilters = document.querySelector('#category-filters ul');

e.preventDefault(); // Prevent form submission if you're handling it via JavaScript
    const selectedCats = [...categoryFilters.querySelectorAll('input[type="checkbox"]:checked')].map(cb => cb.value);
    const selectedLocation = [...locationFilters.querySelectorAll('input[type="radio"]:checked')].map(cb => cb.value);
    const dateFilter = [...dateFilters.querySelectorAll('input[type="checkbox"]:checked')].map(cb => cb.value);

filters = {
        'event_location': selectedLocation,
        //  'custom_location': location,
        'event_date': dateFilter,
        //  'event_start': customDateRange?.start,
        //  'event_end': customDateRange?.end,
        'event_category': !selectedCats?.includes(0) ? selectedCats : undefined,
    };

// get active tab
    const activeTab = document.querySelector('.tabbar-nav .tab-link-active').getAttribute('data-id');

if (activeTab === 'events') {
        store.dispatch('filterEvents', {
            page: 1,
            filters
        })

currentEventsPage = 1
        isFetchingPosts = false

const eventsTabContainer = document.querySelector('#filtered-events-tab');
        eventsTabContainer.innerHTML = '';
    }

if (activeTab === 'venues') {
        store.dispatch('filterVenues', {
            page: 1,
            filters
        })

currentVenuesPage = 1
        isFetchingPosts = false

const venuesTabContainer = document.querySelector('#filtered-venues-tab');
        venuesTabContainer.innerHTML = '';
    }

// close popup
    app.popup.close()
});

$(document).on('change', '#category-filters ul', function (e) {
    const categoryFilters = document.querySelector('#category-filters ul');
    var allCheckbox = categoryFilters.querySelector('input[name="all"]');

const targetCheckbox = e.target;

if (targetCheckbox.name !== "all") {
        // If any other checkbox is selected, uncheck "All"
        if (targetCheckbox.checked) {
            allCheckbox.checked = false;
        } else {
            // If all other checkboxes are unchecked, check "All"
            const allUnchecked = [...categoryFilters.querySelectorAll('input[type="checkbox"]')]
                .filter(cb => cb.name !== "all")
                .every(cb => !cb.checked);

if (allUnchecked) {
                allCheckbox.checked = true;
            }
        }
    } else {
        // If "All" is selected, uncheck all other checkboxes
        if (targetCheckbox.checked) {
            [...categoryFilters.querySelectorAll('input[type="checkbox"]')]
            .filter(cb => cb.name !== "all")
                .forEach(cb => cb.checked = false);
        }
    }
});

eventCategories.onUpdated((data) => {
    addCategoryOptions(data);
})

trendingVenuesStore.onUpdated((data) => {
    totalVenuesPages = data.total_pages

populateVenueCard(data.data);
});

trendingEventsStore.onUpdated((data) => {
    totalEventPages = data.total_pages

populateEventCard(data.data);
});

trendingUsersStore.onUpdated((data) => {
    const tabContainer = document.querySelector('#users-vehicles-tab');
    if (!data || data.data.length === 0) {
        tabContainer.innerHTML = `
            <div class="no-events">
                <h3>No trending users found for you</h3>
            </div>
        `;
        return
    }

totalUsersPages = data.total_pages

if ((totalUsersPages == data.page) || (totalUsersPages == 0) || (data.new_data.length < 10)) {
        $('.infinite-scroll-preloader.users-tab').hide()
    } else {
        $('.infinite-scroll-preloader.users-tab').show()
    }

populateUsersCard(data.new_data);
});

// Filtered views
filteredEventsStore.onUpdated((data) => {
    const eventsTabContainer = document.querySelector('#filtered-events-tab');
    if (!data || data.data.length === 0) {
        eventsTabContainer.innerHTML = `
            <div class="no-events">
                <h3>No events found</h3>
            </div>
        `;
        return
    }

totalEventPages = data.total_pages

if ((totalEventPages == data.page) || (totalEventPages == 0) || (data.new_data.length < 10)) {
        $('.infinite-scroll-preloader.events-tab').hide()
    } else {
        $('.infinite-scroll-preloader.events-tab').show()
    }

populateEventCard(data.new_data, false);
});

filteredVenuesStore.onUpdated((data) => {
    const tabContainer = document.querySelector('#filtered-venues-tab');

if (!data || data.data.length === 0) {
        tabContainer.innerHTML = `
            <div class="no-venues">
                <h3>No venues found</h3>
            </div>
        `;

totalVenuesPages = 0
        return
    }

if ((totalVenuesPages == data.page) || (totalVenuesPages == 0) || (data.new_data.length == 0)) {
        $('.infinite-scroll-preloader.venues-tab').hide()
        totalVenuesPages = 0
    } else {
        $('.infinite-scroll-preloader.venues-tab').show()
        totalVenuesPages = data.total_pages
        populateVenueCard(data.new_data, false);
    }
});

$(document).on('page:init', '.page[data-name="discover"]', function (e) {
    //Date Filters
    app.calendar.create({
        inputEl: '#date-from',
        openIn: 'customModal',
        header: true,
        footer: true,
    });

app.calendar.create({
        inputEl: '#date-to',
        openIn: 'customModal',
        header: true,
        footer: true,
    });

//Filter Date Popup
    app.popup.create({
        el: '.filter-bydate-popup',
        swipeToClose: 'to-bottom'
    });

//Filter Category Popup
    app.popup.create({
        el: '.filter-bycategory-popup',
        swipeToClose: 'to-bottom'
    });

//Filter Location Popup
    app.popup.create({
        el: '.filter-bylocation-popup',
        swipeToClose: 'to-bottom'
    });

//SEARCH BAR
    $('.discover-search').on('mousedown', function (event) {
        event.preventDefault();
        app.views.discover.router.navigate('/search/');
    });

const dateFilters = document.querySelector('#date-filters ul');
    const locationFilters = document.querySelector('#location-filters ul');

// Event listener for checkbox selection
    dateFilters.addEventListener('change', function (e) {
        const targetCheckbox = e.target;

// Uncheck all checkboxes except the one that was clicked
        if (targetCheckbox.type === "checkbox") {
            [...dateFilters.querySelectorAll('input[type="checkbox"]')].forEach(checkbox => {
                if (checkbox !== targetCheckbox) {
                    checkbox.checked = false;
                }
            });
        }
    });

locationFilters.addEventListener('change', function (e) {
        const targetCheckbox = e.target;

// Uncheck all checkboxes except the one that was clicked
        if (targetCheckbox.type === "checkbox") {
            [...locationFilters.querySelectorAll('input[type="checkbox"]')].forEach(checkbox => {
                if (checkbox !== targetCheckbox) {
                    checkbox.checked = false;
                }
            });
        }
    });

initAutocomplete();
});

$(document).on('infinite', '.discover-page.infinite-scroll-content', async function (e) {
    if (isFetchingPosts) return

// get active tab
    const activeTabId = $('.tabbar-nav .tab-link-active').attr('data-id');

if (!activeTabId) return

isFetchingPosts = true

if (activeTabId == 'events') {
        currentEventsPage++

if (currentEventsPage <= totalEventPages) {
            await store.dispatch('filterEvents', {
                page: currentEventsPage,
                filters
            })
            isFetchingPosts = false
        }
    } else if (activeTabId == 'venues') {
        currentVenuesPage++

if (currentVenuesPage <= totalVenuesPages) {
            await store.dispatch('filterVenues', {
                page: currentVenuesPage,
                filters
            })
            isFetchingPosts = false
        }
    } else {
        isFetchingPosts = false
    }
})

// $(document).on('page:beforein', '.page[data-name="discover"]', function (e) {
// const eventCats = eventCategories.value
// const trendingEvents = trendingEventsStore.value
// const trendingVenues = trendingVenuesStore.value
// const trendingUsers = trendingUsersStore.value

// if (!eventCats || eventCats.length === 0) {
//     store.dispatch('fetchEventCategories')
// } else {
//     addCategoryOptions(eventCats);
// }

// if (!trendingEvents || trendingEvents.length === 0) {
//     store.dispatch('fetchTrendingEvents')
// } else {
//     totalEventPages = trendingEvents.total_pages
//     populateEventCard(trendingEvents.data);
// }

// if (!trendingVenues || trendingVenues.length === 0) {
//     store.dispatch('fetchTrendingVenues')
// } else {
//     totalVenuesPages = trendingVenues.total_pages
//     populateVenueCard(trendingVenues.data);
// }

// if (!trendingUsers || trendingUsers.length === 0) {
//     store.dispatch('fetchTrendingUsers')
// } else {
//     totalUsersPages = trendingUsers.total_pages
//     populateUsersCard(trendingUsers.data);
// }
// });

$(document).on('page:init', '.page[data-name="discover-view-event"]', function (e) {
    // Init slider
    new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })

app.popup.create({
        el: '.share-listing-popup',
        swipeToClose: 'to-bottom'
    });
});

$(document).on('ptr:refresh', '.discover-page.ptr-content', async function (e) {
    refreshed = true
    currentEventsPage = 1
    currentVenuesPage = 1

try {
        await store.dispatch('getTrendingEvents')
        await store.dispatch('getTrendingVenues')
        await store.dispatch('filterTrendingUsers')
        await store.dispatch('fetchEventCategories')
    } catch (error) {
        console.log(error);
    }

refreshed = false
    app.ptr.get('.discover-page.ptr-content').done()
})

$(document).on('click', '#featured-event-link', function (e) {
    e.preventDefault();
    window.open(e.target.href, '_blank');
});

file content 17789