feat: realtime notifications, fix broadcasting, add notifications page
- Fix: broadcasting.php config (was missing, broadcast failed) - Fix: Echo class global scope (window.EchoClass) - Fix: Nginx WebSocket proxy for Reverb - Fix: Firewall port 8087 opened - Fix: Duplicate event listener cleanup - Fix: Mark as read functionality - Add: CreateViolationNotification listener - Add: Notifications index page with pagination - Add: Timezone Asia/Jakarta support - Add: Real-time badge across all pages - Remove: toOthers() so recorder also gets notification - Update: .env.example with new variables
This commit is contained in:
Novy San87
Vendored
+1
@@ -6,6 +6,7 @@ import Echo from 'laravel-echo';
|
||||
import Pusher from 'pusher-js';
|
||||
|
||||
window.Pusher = Pusher;
|
||||
window.EchoClass = Echo;
|
||||
|
||||
// Echo will be initialized when the page has the Reverb config
|
||||
// The actual Echo initialization is done conditionally in the layout
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
@section('title', 'Dashboard')
|
||||
|
||||
@section('content')
|
||||
<div x-data="notifications()">
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p class="text-sm text-gray-500">Ringkasan pelanggaran siswa</p>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
@stack('styles')
|
||||
</head>
|
||||
<body class="h-full antialiased">
|
||||
<div x-data="{ sidebarOpen: false, showNotif: false, showUserMenu: false, notifications: [], notifCount: 0 }" class="min-h-screen flex">
|
||||
<div x-data="notifications()" class="min-h-screen flex">
|
||||
{{-- Sidebar --}}
|
||||
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-auto transition-transform duration-200 ease-in-out flex flex-col">
|
||||
<div class="flex items-start justify-between h-auto px-4 pt-4 pb-3 border-b border-gray-200">
|
||||
@@ -103,7 +103,7 @@
|
||||
</div>
|
||||
<div class="max-h-64 overflow-y-auto">
|
||||
<template x-for="notif in notifications" :key="notif.id">
|
||||
<a :href="notif.action_url || '#'" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-0">
|
||||
<a :href="notif.action_url || '#'" @click="markAsRead(notif.id)" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-0">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div :class="'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ' + (notif.color ? 'bg-'+notif.color+'-100' : 'bg-blue-100')">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
@@ -119,6 +119,9 @@
|
||||
Tidak ada notifikasi
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-2 border-t border-gray-100 text-center">
|
||||
<a href="{{ route('notifications.index') }}" class="text-xs text-blue-600 hover:text-blue-800 font-medium">Tampilkan semua notifikasi</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -199,10 +202,25 @@
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
{{-- Reverb Config --}}
|
||||
<script>
|
||||
window.__REVERB_CONFIG = {
|
||||
key: @json(config('reverb.apps.apps.0.key') ?: env('REVERB_APP_KEY')),
|
||||
host: window.location.hostname,
|
||||
port: parseInt(window.location.port || '80'),
|
||||
};
|
||||
console.log('Reverb config:', window.__REVERB_CONFIG);
|
||||
</script>
|
||||
|
||||
{{-- Reverb + Echo for realtime --}}
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('notifications', () => ({
|
||||
showNotif: false,
|
||||
sidebarOpen: false,
|
||||
showUserMenu: false,
|
||||
notifications: [],
|
||||
notifCount: 0,
|
||||
init() {
|
||||
this.fetchCount();
|
||||
this.fetchNotifications();
|
||||
@@ -223,30 +241,34 @@
|
||||
this.notifications = [];
|
||||
this.notifCount = 0;
|
||||
},
|
||||
markAsRead(id) {
|
||||
fetch('/notifications/' + id + '/read', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content } });
|
||||
this.notifications = this.notifications.filter(n => n.id !== id);
|
||||
if (this.notifCount > 0) this.notifCount--;
|
||||
},
|
||||
connectReverb() {
|
||||
if (typeof Echo === 'undefined') {
|
||||
window.Echo = new Echo({
|
||||
broadcaster: 'reverb',
|
||||
key: import.meta.env.VITE_REVERB_APP_KEY || '"' + REVERB_APP_KEY + '",
|
||||
wsHost: import.meta.env.VITE_REVERB_HOST || '"' + REVERB_HOST + '",
|
||||
wsPort: import.meta.env.VITE_REVERB_PORT ? parseInt(import.meta.env.VITE_REVERB_PORT) : 8080,
|
||||
wssPort: 443,
|
||||
forceTLS: false,
|
||||
enabledTransports: ['ws', 'wss'],
|
||||
});
|
||||
if (typeof window.Echo === 'undefined' || window.Echo === null) {
|
||||
try {
|
||||
window.Echo = new window.EchoClass({
|
||||
broadcaster: 'reverb',
|
||||
key: window.__REVERB_CONFIG.key,
|
||||
wsHost: window.__REVERB_CONFIG.host,
|
||||
wsPort: window.__REVERB_CONFIG.port,
|
||||
wssPort: 443,
|
||||
forceTLS: false,
|
||||
enabledTransports: ['ws', 'wss'],
|
||||
});
|
||||
console.log('Echo initialized ✅');
|
||||
} catch(e) {
|
||||
console.error('Echo init error:', e);
|
||||
}
|
||||
}
|
||||
if (typeof Echo !== 'undefined') {
|
||||
Echo.channel('violations')
|
||||
if (typeof window.Echo !== 'undefined') {
|
||||
window.Echo.channel('violations')
|
||||
.listen('.violation.recorded', (e) => {
|
||||
this.notifCount++;
|
||||
this.notifications.unshift({
|
||||
id: e.violation?.id || Date.now(),
|
||||
title: 'Pelanggaran Baru: ' + (e.data?.student_name || ''),
|
||||
body: (e.data?.violation_type || '') + ' (+' + (e.data?.points || 0) + ' poin)',
|
||||
action_url: e.data?.url || '#',
|
||||
color: (e.data?.category_color || '#ef4444').replace('#', ''),
|
||||
});
|
||||
if (this.notifications.length > 20) this.notifications.pop();
|
||||
// Refresh dari database untuk hindari duplikasi
|
||||
this.fetchCount();
|
||||
this.fetchNotifications();
|
||||
});
|
||||
} else {
|
||||
// Fallback: poll every 30s if Echo not loaded
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Semua Notifikasi')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Semua Notifikasi</h1>
|
||||
<p class="text-sm text-gray-500">Riwayat notifikasi pelanggaran siswa</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
@if($notifications->count() > 0)
|
||||
<div class="divide-y divide-gray-100">
|
||||
@foreach($notifications as $notif)
|
||||
<a href="{{ $notif->action_url ?: '#' }}" onclick="event.preventDefault(); fetch('/notifications/{{ $notif->id }}/read', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content } }).then(() => { window.location = this.href; });" class="block px-6 py-4 hover:bg-gray-50 transition-colors {{ !$notif->is_read ? 'bg-blue-50/50' : '' }}">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center {{ $notif->color ? 'bg-'.$notif->color.'-100' : 'bg-blue-100' }}">
|
||||
<i class="fa-solid fa-bell text-gray-600"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900">{{ $notif->title }}</p>
|
||||
<p class="text-sm text-gray-500">{{ $notif->body }}</p>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ $notif->created_at->diffForHumans() }}</p>
|
||||
</div>
|
||||
@if(!$notif->is_read)
|
||||
<span class="flex-shrink-0 w-2 h-2 mt-2 bg-blue-500 rounded-full"></span>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-gray-100">
|
||||
{{ $notifications->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="px-6 py-12 text-center">
|
||||
<i class="fa-regular fa-bell text-4xl text-gray-300 mb-3"></i>
|
||||
<p class="text-sm text-gray-500">Belum ada notifikasi</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,51 @@
|
||||
@if ($paginator->hasPages())
|
||||
<nav class="flex items-center justify-between">
|
||||
<div class="flex-1 flex justify-between sm:hidden">
|
||||
@if ($paginator->onFirstPage())
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-200 rounded-lg">Previous</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">Previous</a>
|
||||
@endif
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50">Next</a>
|
||||
@else
|
||||
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-400 bg-white border border-gray-200 rounded-lg">Next</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600">
|
||||
Menampilkan <span class="font-medium">{{ $paginator->firstItem() }}</span> - <span class="font-medium">{{ $paginator->lastItem() }}</span> dari <span class="font-medium">{{ $paginator->total() }}</span> notifikasi
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="relative z-0 inline-flex rounded-lg shadow-sm">
|
||||
@if ($paginator->onFirstPage())
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-200 rounded-l-lg">«</span>
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-50">«</a>
|
||||
@endif
|
||||
@foreach ($elements as $element)
|
||||
@if (is_string($element))
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-200">{{ $element }}</span>
|
||||
@endif
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600">{{ $page }}</span>
|
||||
@else
|
||||
<a href="{{ $url }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-gray-50">{{ $page }}</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-r-lg hover:bg-gray-50">»</a>
|
||||
@else
|
||||
<span class="relative inline-flex items-center px-3 py-2 text-sm font-medium text-gray-400 bg-white border border-gray-200 rounded-r-lg">»</span>
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endif
|
||||
Reference in New Issue
Block a user