585 lines
20 KiB
Dart
585 lines
20 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:firebase_database/firebase_database.dart';
|
|
import 'package:firebase_auth/firebase_auth.dart';
|
|
import 'dashboard.dart';
|
|
import 'history.dart';
|
|
import '../widgets/fade_in_up.dart';
|
|
import '../widgets/whatsapp_notification.dart';
|
|
import 'akun.dart';
|
|
|
|
class NotifikasiPage extends StatefulWidget {
|
|
const NotifikasiPage({super.key});
|
|
|
|
@override
|
|
State<NotifikasiPage> createState() => _NotifikasiPageState();
|
|
}
|
|
|
|
class _NotifikasiPageState extends State<NotifikasiPage> {
|
|
final db = FirebaseDatabase.instance.ref();
|
|
List<Map<dynamic, dynamic>> notifications = [];
|
|
|
|
// 🔥 REALTIME NEW NOTIFICATION POPUP STATE
|
|
StreamSubscription? _notifChildSubscription;
|
|
StreamSubscription? _notifSubscription;
|
|
int _pageOpenTime = DateTime.now().millisecondsSinceEpoch;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// Jalankan listener notifikasi WhatsApp global
|
|
WhatsAppNotificationService().startListening();
|
|
|
|
listenToNotifications();
|
|
listenToNewNotifPush();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_notifChildSubscription?.cancel();
|
|
_notifSubscription?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
void listenToNewNotifPush() {
|
|
_pageOpenTime = DateTime.now().millisecondsSinceEpoch;
|
|
|
|
// Memantau penambahan notifikasi baru secara realtime untuk memicu popup modal dialog
|
|
_notifChildSubscription = db.child("notifikasi")
|
|
.orderByChild("timestamp")
|
|
.startAt(_pageOpenTime)
|
|
.onChildAdded
|
|
.listen((event) {
|
|
final data = event.snapshot.value as Map<dynamic, dynamic>?;
|
|
if (data != null && mounted) {
|
|
final timestamp = data['timestamp'];
|
|
if (timestamp != null && timestamp > _pageOpenTime) {
|
|
_tampilkanPopUpHasil(
|
|
data["title"] ?? "Notifikasi Baru",
|
|
data["message"] ?? "",
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
void _tampilkanPopUpHasil(String title, String message) {
|
|
bool isBahaya = title.toLowerCase().contains("bahaya");
|
|
bool isAman = title.toLowerCase().contains("aman");
|
|
|
|
showDialog(
|
|
context: context,
|
|
barrierDismissible: false,
|
|
builder: (context) => Dialog(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(24),
|
|
),
|
|
elevation: 10,
|
|
backgroundColor: Colors.white,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.4)
|
|
: (isAman ? Colors.green.withOpacity(0.4) : Colors.orange.withOpacity(0.4)),
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Icon Indikator Menarik
|
|
Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.1)
|
|
: (isAman ? Colors.green.withOpacity(0.1) : Colors.orange.withOpacity(0.1)),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
isBahaya
|
|
? Icons.warning_amber_rounded
|
|
: (isAman ? Icons.check_circle_outline_rounded : Icons.info_outline_rounded),
|
|
color: isBahaya ? Colors.red : (isAman ? Colors.green : Colors.orange),
|
|
size: 50,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// Title
|
|
Text(
|
|
title,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: isBahaya ? Colors.red : (isAman ? Colors.green : const Color(0xFF1565C0)),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
|
|
// Message
|
|
Text(
|
|
message,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
color: Colors.black87,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Tombol OK
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: isBahaya
|
|
? Colors.red
|
|
: (isAman ? Colors.green : const Color(0xFF1565C0)),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(15),
|
|
),
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
),
|
|
child: const Text(
|
|
"Selesai",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _tampilkanDetailNotif(Map<dynamic, dynamic> notif) {
|
|
String title = notif["title"] ?? "Info Notifikasi";
|
|
String message = notif["message"] ?? "";
|
|
String time = notif["time"] ?? "--:--";
|
|
bool isBahaya = title.toLowerCase().contains("bahaya");
|
|
bool isAman = title.toLowerCase().contains("aman");
|
|
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) => Dialog(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(24),
|
|
),
|
|
elevation: 10,
|
|
backgroundColor: Colors.white,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.4)
|
|
: (isAman ? Colors.green.withOpacity(0.4) : Colors.orange.withOpacity(0.4)),
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Icon Indikator Menarik
|
|
Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.1)
|
|
: (isAman ? Colors.green.withOpacity(0.1) : Colors.orange.withOpacity(0.1)),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
isBahaya
|
|
? Icons.warning_amber_rounded
|
|
: (isAman ? Icons.check_circle_outline_rounded : Icons.info_outline_rounded),
|
|
color: isBahaya ? Colors.red : (isAman ? Colors.green : Colors.orange),
|
|
size: 50,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// Title
|
|
Text(
|
|
title,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: isBahaya ? Colors.red : (isAman ? Colors.green : const Color(0xFF1565C0)),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
|
|
// Time
|
|
Text(
|
|
"Waktu: $time",
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Message
|
|
Text(
|
|
message,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
color: Colors.black87,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// Tips / Info Tambahan
|
|
Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.05)
|
|
: const Color(0xFF1565C0).withOpacity(0.05),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
isBahaya
|
|
? "⚠️ Rekomendasi: Segera buang makanan tersebut dan jangan dikonsumsi demi kesehatan Anda."
|
|
: "✅ Informasi: Makanan tergolong aman untuk dikonsumsi.",
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: isBahaya ? Colors.red.shade700 : const Color(0xFF1565C0),
|
|
fontStyle: FontStyle.italic,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Tombol Tutup
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: isBahaya
|
|
? Colors.red
|
|
: (isAman ? Colors.green : const Color(0xFF1565C0)),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(15),
|
|
),
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
),
|
|
child: const Text(
|
|
"Tutup",
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void listenToNotifications() {
|
|
// Memantau folder 'notifikasi' dan mengurutkan berdasarkan timestamp terbaru
|
|
_notifSubscription?.cancel();
|
|
_notifSubscription = db.child("notifikasi").orderByChild("timestamp").onValue.listen((event) {
|
|
final data = event.snapshot.value as Map<dynamic, dynamic>?;
|
|
|
|
if (data != null) {
|
|
List<Map<dynamic, dynamic>> tempList = [];
|
|
data.forEach((key, value) {
|
|
// Mengambil data dan menyimpan key-nya untuk fitur hapus
|
|
Map<dynamic, dynamic> notifWithKey = Map.from(value);
|
|
notifWithKey['key'] = key;
|
|
tempList.add(notifWithKey);
|
|
});
|
|
|
|
setState(() {
|
|
// Dibalik agar notifikasi paling baru muncul di paling atas
|
|
notifications = tempList.reversed.toList();
|
|
});
|
|
} else {
|
|
setState(() {
|
|
notifications = [];
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk menghapus semua notifikasi sekaligus
|
|
void hapusSemua() {
|
|
db.child("notifikasi").remove();
|
|
}
|
|
|
|
// Fungsi untuk menghapus satu notifikasi (geser/swipe)
|
|
void hapusSatu(String key) {
|
|
db.child("notifikasi").child(key).remove();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Container(
|
|
width: double.infinity,
|
|
height: double.infinity,
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
Colors.white,
|
|
Color(0xFFE3F2FD), // Light blue
|
|
Color(0xFF42A5F5), // Medium blue
|
|
Color(0xFF1565C0), // Dark blue
|
|
],
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header Baru (Gaya Dashboard)
|
|
Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 10, 20, 20),
|
|
child: FadeInUp(
|
|
delay: 50,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
const Text(
|
|
"Notifikasi",
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFF1565C0),
|
|
),
|
|
),
|
|
Text(
|
|
"System alerts & info",
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: const Color(0xFF1565C0).withOpacity(0.7),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// Header status jumlah notifikasi
|
|
if (notifications.isNotEmpty)
|
|
FadeInUp(
|
|
delay: 200,
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
color: const Color(0xFF1565C0).withOpacity(0.08),
|
|
child: Center(
|
|
child: Text(
|
|
"Terdeteksi ${notifications.length} peringatan sistem",
|
|
style: const TextStyle(color: Colors.black54, fontSize: 13),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
|
|
Expanded(
|
|
child: FadeInUp(
|
|
delay: 400,
|
|
child: notifications.isEmpty
|
|
? _buildEmptyState()
|
|
: ListView.builder(
|
|
padding: const EdgeInsets.all(20),
|
|
itemCount: notifications.length,
|
|
itemBuilder: (context, index) {
|
|
final notif = notifications[index];
|
|
return Dismissible(
|
|
key: Key(notif['key']),
|
|
direction: DismissDirection.endToStart,
|
|
onDismissed: (direction) => hapusSatu(notif['key']),
|
|
background: Container(
|
|
alignment: Alignment.centerRight,
|
|
padding: const EdgeInsets.only(right: 20),
|
|
margin: const EdgeInsets.only(bottom: 15),
|
|
decoration: BoxDecoration(
|
|
color: Colors.red,
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: const Icon(Icons.delete, color: Colors.white),
|
|
),
|
|
child: _buildNotifCard(notif),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Bottom Navigation Bar agar navigasi antar halaman sinkron
|
|
bottomNavigationBar: BottomNavigationBar(
|
|
currentIndex: 2, // Highlight icon Notif
|
|
selectedItemColor: const Color(0xFF1565C0),
|
|
unselectedItemColor: Colors.grey,
|
|
type: BottomNavigationBarType.fixed,
|
|
onTap: (index) {
|
|
if (index == 0) {
|
|
Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(builder: (context) => const DashboardPage()),
|
|
);
|
|
} else if (index == 1) {
|
|
Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(builder: (context) => const RiwayatPage()),
|
|
);
|
|
} else if (index == 3) {
|
|
Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(builder: (context) => const AkunPage()),
|
|
);
|
|
}
|
|
},
|
|
items: const [
|
|
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
|
|
BottomNavigationBarItem(icon: Icon(Icons.history), label: "History"),
|
|
BottomNavigationBarItem(icon: Icon(Icons.notifications), label: "Notif"),
|
|
BottomNavigationBarItem(icon: Icon(Icons.person), label: "Akun"),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildNotifCard(Map<dynamic, dynamic> notif) {
|
|
bool isBahaya = notif["title"].toString().toLowerCase().contains("bahaya");
|
|
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 15),
|
|
padding: const EdgeInsets.all(18),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(
|
|
color: isBahaya ? Colors.red.withOpacity(0.3) : Colors.transparent,
|
|
width: 1,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.03),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Icon indikator bulat (Clickable)
|
|
GestureDetector(
|
|
onTap: () => _tampilkanDetailNotif(notif),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: isBahaya
|
|
? Colors.red.withOpacity(0.1)
|
|
: Colors.green.withOpacity(0.1),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
isBahaya ? Icons.warning_rounded : Icons.info_outline,
|
|
color: isBahaya ? Colors.red : const Color(0xFF1565C0),
|
|
size: 24,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 15),
|
|
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
notif["title"] ?? "Pemberitahuan",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 15,
|
|
color: isBahaya ? Colors.red : Colors.black87,
|
|
),
|
|
),
|
|
Text(
|
|
notif["time"] ?? "--:--",
|
|
style: const TextStyle(fontSize: 11, color: Colors.grey),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
notif["message"] ?? "",
|
|
style: const TextStyle(
|
|
fontSize: 14,
|
|
color: Colors.black54,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(
|
|
Icons.notifications_off_outlined,
|
|
size: 80,
|
|
color: Colors.white70,
|
|
),
|
|
const SizedBox(height: 15),
|
|
const Text(
|
|
"Belum ada pemberitahuan baru",
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|