rbs@u2-js

Save File Also

Copy This

modul

file_name function_name content 10139

import {
    getSessionUser
} from "./api/auth.js"
import {
    maybeFollowUser
} from "./api/profile.js"
import app from "./app.js"
import store from "./store.js"

var $ = Dom7
var notificationsStore = store.getters.getNotifications
var refreshed = false

$(document).on('page:afterin', '.page[data-name="notifications"]', async function (e) {
    const data = notificationsStore.value

if (!data || !data.success) {
        return
    }

// a list if all unread notification ids
    const unreadNotificationIds = [
        ...data.data.recent,
        ...data.data.last_week,
        ...data.data.last_30_days,
    ].filter((item) => item.is_read === "0").map((item) => item._id);

if (unreadNotificationIds.length > 0) {
        store.dispatch('markNotificationsAsRead', unreadNotificationIds)
    }
})

notificationsStore.onUpdated(async (data) => {
    if (!data || !data.success) {
        $('.notification-wrap').html('<p class="text-center">No notifications</p>')
        return
    }

const notifications = data.data

const recentContainer = document.getElementById('recent');
    const thisWeekContainer = document.getElementById('this-week');

if (refreshed) {
        recentContainer.innerHTML = '';
        thisWeekContainer.innerHTML = '';
        refreshed = false
    }

document.querySelectorAll('.app-notification-title').forEach(elem => {
        elem.innerHTML = elem.getAttribute('data-title')
    })

var user = await getSessionUser()

if (!notifications.recent.length) {
        recentContainer.innerHTML = '<p class="text-center">No recent notifications</p>';
    }

if (!notifications.last_week.length) {
        thisWeekContainer.innerHTML = '<p class="text-center">No notifications from this week</p>';
    }

notifications.recent.forEach(notification => {
        const notificationItem = createNotificationItem(notification, user);
        recentContainer.appendChild(notificationItem);
    });

notifications.last_week.forEach(notification => {
        const notificationItem = createNotificationItem(notification, user);
        thisWeekContainer.appendChild(notificationItem);
    });
})

function createNotificationItem(notification, user) {
    const isFollow = notification.type === 'follow' ? true : false;
    const container = document.createElement(isFollow ? 'div' : 'a');

if (!isFollow) {
        container.href = `/post-view/${notification.entity.entity_id}`;
    }

let isReadClass = notification.is_read == "0" ? "unread-notif" : "";

container.className = `notification-item ${isReadClass}`;
    container.dataset.notificationId = notification._id;

// Profile image and notification content container
    const leftContainer = document.createElement('div');
    leftContainer.className = 'notification-left';

const imageDiv = document.createElement('a');
    imageDiv.className = 'image-square image-rounded';
    imageDiv.style.backgroundImage = `url('${notification.entity.initiator_data.profile_image || 'assets/img/profile-placeholder.jpg'}')`;
    imageDiv.href = `/profile-view/${notification.entity.user_id}`;

const infoDiv = document.createElement('div');
    infoDiv.className = 'notification-info';

let content = '';

// Conditional content rendering based on the type
    if (notification.type === 'like') {
        content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> liked your ${notification.entity.entity_type}
                ${notification.entity.entity_data.comment ? `<span class="inline font-semibold text-black">: "${notification.entity.entity_data.comment}"</span>` : ''}
                <span class=""></span>
            </div>
        `;
    } else if (notification.type === 'comment') {
        const eclipseComment = notification.entity.entity_data.comment.length > 50 ? notification.entity.entity_data.comment.substring(0, 50) + '...' : notification.entity.entity_data.comment;

container.href = `/post-view/${notification.entity.entity_data.post_id}?commentId=${notification.entity.entity_id}`;

content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> commented on your post: 
                <span class="font-semibold text-black">"${eclipseComment}"</span>
                <span class="${isReadClass}"></span>
            </div>
        `;
    } else if (notification.type === 'follow') {
        content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> followed you
                <span class="${isReadClass}"></span>
            </div>
        `;
    } else if (notification.type === 'mention') {
        content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> mentioned you in a ${notification.entity.entity_type}
                ${notification.entity.entity_data.comment ? `<span class="block font-semibold text-black">"${notification.entity.entity_data.comment}"</span>` : ''}
                <span class="${isReadClass}"></span>
            </div>
        `;
    } else if (notification.type === 'post') {
        content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> has posted ${notification.entity.entity_type === 'car' ? "your car" : "a post"} 
                <a href="/profile/garage/${notification.entity.entity_data?.garage?.id}" class="font-semibold hover:cursor-pointer hover:text-customblue">
                    ${notification.entity.entity_data?.garage?.make || ''} ${notification.entity.entity_data?.garage?.model || ''}
                </a>
                <span class="${isReadClass}"></span>
            </div>
        `;
    } else if (notification.type === 'tag') {
        content = `
            <div class="notification-text">
                <a href="/profile-view/${notification.entity.user_id}"><strong>${notification.entity.initiator_data.display_name}</strong></a> ${notification.entity.entity_type === 'car' ? "tagged your car in a post" : "tagged you in a post"}
                <span class="${isReadClass}"></span>
            </div>
        `;
    }

// Add time ago
    const timeSpan = document.createElement('span');
    timeSpan.className = 'notification-time';
    timeSpan.textContent = timeAgo(notification.date);

infoDiv.innerHTML = `${content} ${timeSpan.outerHTML}`;

// Adding profile image and content to the left container
    leftContainer.appendChild(imageDiv);
    leftContainer.appendChild(infoDiv);

// Append left container to the main container
    container.appendChild(leftContainer);

if (notification.type === 'follow') {
        const isFollowing = user.following.includes(notification.entity.user_id);
        let followBtn = `<div class="btn btn-primary btn-sm toggle-follow" data-is-following="${isFollowing}" data-user-id="${notification.entity.user_id}">
            ${isFollowing ? 'Unfollow' : 'Follow'}
        </div>`;

container.innerHTML += followBtn;
    } else {
        const rightContainer = document.createElement('a');
        rightContainer.className = 'notification-left';
        let path;

if (notification.entity.entity_type === 'car') {
            path = 'car';
            rightContainer.href = `/${path}/${notification.entity.entity_id}`;

} else if (notification.entity.entity_type === 'post') {
            path = 'post-view';
            rightContainer.href = `/${path}/${notification.entity.entity_id}`;

} else if (notification.entity.entity_type === 'comment') {
            path = 'post-view';
            rightContainer.href = `/${path}/${notification.entity.entity_data.post_id}?commentId=${notification.entity.entity_id}`;
        } else {
            path = 'profile-view';
            rightContainer.href = `/${path}/${notification.entity.user_id}`;
        }

const imageDiv = document.createElement('div');
        imageDiv.className = 'image-square image-rounded';
        imageDiv.style.backgroundImage = `url('${notification.entity.entity_data.media}')`;
        imageDiv.style.backgroundSize = 'cover';
        imageDiv.style.backgroundPosition = 'center';
        imageDiv.style.backgroundColor = '#f1f1f1';

rightContainer.appendChild(imageDiv);
        container.appendChild(rightContainer)
    }

return container;
}

$(document).on('click', '.toggle-follow', async function (e) {
    const userId = e.target.dataset.userId;
    const isFollowing = e.target.dataset.isFollowing === 'true';

// update the button text
    e.target.textContent = isFollowing ? 'Follow' : 'Unfollow';
    e.target.dataset.isFollowing = !isFollowing;

await maybeFollowUser(userId);
    store.dispatch('updateUserDetails')
});

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

try {
        await store.dispatch('notificationCount')
        await store.dispatch('fetchNotifications')
    } catch (error) {
        console.log(error);
    }

app.ptr.get('.notification-page.ptr-content').done()
})

file content 10139