itdept/expense
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added notifications

Browse Source
This commit is contained in:
Jagad R R
2025-01-17 16:17:53 +07:00
parent 47eb2950ef
commit f4a8972a1d
13 changed files with 344 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/app.blade.php
+78
View File
@@ -33,12 +33,37 @@
</div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" data-widget="notification">
<i class="fas fa-bell"></i>
</a>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-right">
<div id="notification">
<span class="dropdown-item dropdown-header" id="notification_title">Notifications</span>
<div id="loading-bar" style="text-align: center; padding: 10px; display: none;">
<div class="spinner-border text-primary" style="width: 2rem; height: 2rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div id="notification-list"></div>
<div class="dropdown-divider"></div>
<form action="{{ route('dashboard.mark_read') }}" method="POST">
@csrf
@include('backend.layouts.partials.messages')
<button type="submit" class="dropdown-item dropdown-footer" id="notification_mark">Mark all as read</button>
</form>
</div>
</div>
</li>
<!-- Fullscreen Icon -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<!-- Profile Section -->
<li class="nav-item dropdown" title="Account Profile">
<a class="nav-link" data-toggle="dropdown" href="#">
{{ Auth::guard('admin')->user()->name }} <i class="far fa-user"></i>
@@ -145,4 +170,57 @@
// Initialize the clock on page load
updateDateTime();
document.querySelector('[data-widget="notification"]').addEventListener('click', function (e) {
e.preventDefault();
const loadingBar = document.getElementById('loading-bar');
const notificationList = document.getElementById('notification-list');
// Show loading bar and hide notification list
loadingBar.style.display = 'block';
notificationList.classList.add('d-none');
fetch('/api/notifications')
.then(response => response.json())
.then(data => {
notificationList.innerHTML = ''; // Clear existing notifications
data.forEach(notification => {
const item = document.createElement('a');
item.href = notification.link || '#';
item.classList.add('dropdown-item');
item.innerHTML = `
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center;">
<i class="fas fa-bell" style="font-size: 16px; margin-right: 5px;"></i>
<strong style="font-size: 12px;">${notification.title}</strong>
</div>
<span class="text-muted text-sm" style="font-size: 12px !important;">
${new Date(notification.created_at).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
})}
</span>
</div>
<span class="text-muted text-sm" style="font-size: 12px !important;">${notification.content || ''}</span>
`;
notificationList.appendChild(item);
});
// Hide loading bar and show notification list
loadingBar.style.display = 'none';
notificationList.classList.remove('d-none');
})
.catch(error => {
console.error('Error fetching notifications:', error);
loadingBar.style.display = 'none';
notificationList.innerHTML = '<span class="dropdown-item text-danger">Failed to load notifications.</span>';
notificationList.classList.remove('d-none');
});
});
</script>