401 lines
15 KiB
Dart
401 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
|
|
import '../../../core/app_theme.dart';
|
|
import '../../auth/auth_notifier.dart';
|
|
import '../../auth/auth_state.dart';
|
|
import '../providers/monitoring_provider.dart';
|
|
import '../providers/control_notifier.dart';
|
|
import '../widgets/chart_range_selector.dart';
|
|
import '../widgets/chart_type_selector.dart';
|
|
import '../widgets/greeting_section.dart';
|
|
import '../widgets/device_status_card.dart';
|
|
import '../widgets/monitoring_card.dart';
|
|
import '../widgets/monitoring_chart.dart';
|
|
|
|
class MonitoringPage extends ConsumerWidget {
|
|
const MonitoringPage({super.key});
|
|
|
|
String _getUserName(WidgetRef ref) {
|
|
final authState = ref.watch(authProvider);
|
|
if (authState is AuthSuccess) return authState.user.name;
|
|
return 'Pengguna';
|
|
}
|
|
|
|
String _getDeviceCode(WidgetRef ref) {
|
|
final authState = ref.watch(authProvider);
|
|
if (authState is AuthSuccess) return authState.user.deviceId ?? '-';
|
|
return '-';
|
|
}
|
|
|
|
void _showClaimDeviceDialog(BuildContext context, WidgetRef ref) {
|
|
final controller = TextEditingController();
|
|
final formKey = GlobalKey<FormState>();
|
|
bool dialogLoading = false;
|
|
String? dialogError;
|
|
|
|
showDialog(
|
|
context: context,
|
|
barrierDismissible: true,
|
|
builder: (context) {
|
|
return StatefulBuilder(
|
|
builder: (context, setState) {
|
|
return AlertDialog(
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
|
title: const Text(
|
|
'Hubungkan Alat',
|
|
style: TextStyle(fontWeight: FontWeight.bold),
|
|
),
|
|
content: Form(
|
|
key: formKey,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Masukkan Kode Perangkat (Claim Code) yang tertera pada alat Anda.',
|
|
style: TextStyle(fontSize: 13, color: AppTheme.textSecondary),
|
|
),
|
|
const SizedBox(height: 16),
|
|
TextFormField(
|
|
controller: controller,
|
|
decoration: InputDecoration(
|
|
labelText: 'Claim Code',
|
|
prefixIcon: const Icon(Icons.qr_code_scanner_outlined, color: AppTheme.primary),
|
|
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: const BorderSide(color: AppTheme.primary, width: 2),
|
|
),
|
|
),
|
|
validator: (v) => (v == null || v.trim().isEmpty) ? 'Claim Code tidak boleh kosong' : null,
|
|
),
|
|
if (dialogError != null) ...[
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
dialogError!,
|
|
style: const TextStyle(color: AppTheme.statusDanger, fontSize: 13),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: dialogLoading ? null : () => Navigator.pop(context),
|
|
child: const Text('Batal'),
|
|
),
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppTheme.primary,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
),
|
|
onPressed: dialogLoading
|
|
? null
|
|
: () async {
|
|
if (!formKey.currentState!.validate()) return;
|
|
setState(() {
|
|
dialogLoading = true;
|
|
dialogError = null;
|
|
});
|
|
try {
|
|
await ref.read(authProvider.notifier).claimDevice(controller.text);
|
|
if (context.mounted) {
|
|
Navigator.pop(context);
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text('Perangkat berhasil dihubungkan!'),
|
|
backgroundColor: AppTheme.statusNormal,
|
|
),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
setState(() {
|
|
dialogLoading = false;
|
|
dialogError = e.toString().replaceFirst('Exception: ', '');
|
|
});
|
|
}
|
|
},
|
|
child: dialogLoading
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2),
|
|
)
|
|
: const Text('Hubungkan', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final monitoring = ref.watch(monitoringProvider);
|
|
final control = ref.watch(controlProvider);
|
|
final userName = _getUserName(ref);
|
|
final authState = ref.watch(authProvider);
|
|
final hasDevice = authState is AuthSuccess && authState.user.deviceId != null;
|
|
|
|
return Scaffold(
|
|
backgroundColor: AppTheme.bgPage,
|
|
body: SafeArea(
|
|
child: RefreshIndicator(
|
|
onRefresh: () => hasDevice
|
|
? ref.read(monitoringProvider.notifier).fetchData(showLoading: true)
|
|
: Future.value(),
|
|
child: SingleChildScrollView(
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
GreetingSection(
|
|
userName: userName,
|
|
subtitle: hasDevice ? 'Monitoring Real-Time Kumbung' : 'Selamat datang kembali!',
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
if (!hasDevice) ...[
|
|
const SizedBox(height: 40),
|
|
_EmptyDeviceState(
|
|
onAddPressed: () => _showClaimDeviceDialog(context, ref),
|
|
),
|
|
] else ...[
|
|
DeviceStatusCard(
|
|
isOnline: monitoring.latest != null && DateTime.now().difference(monitoring.latest!.timestamp).inMinutes < 5,
|
|
deviceCode: _getDeviceCode(ref),
|
|
lastSeen: monitoring.latest?.timestamp,
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// ── Error banner ──────────────────────────────
|
|
if (monitoring.errorMessage != null)
|
|
_ErrorBanner(message: monitoring.errorMessage!),
|
|
|
|
// ── Loading skeleton ──────────────────────────
|
|
if (monitoring.isLoading)
|
|
const _LoadingSkeleton()
|
|
else if (monitoring.latest == null) ...[
|
|
// ── Belum ada data sensor ─────────────────────
|
|
_NoDataBanner(),
|
|
] else ...[
|
|
// ── Sensor cards ──────────────────────────────
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: MonitoringCard(
|
|
value: monitoring.temperature.toStringAsFixed(1),
|
|
unit: '°C',
|
|
subtitle: 'Suhu Real Time',
|
|
status: monitoring.tempStatus(control.suhuLimit),
|
|
gradient: AppTheme.suhuGradient,
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Expanded(
|
|
child: MonitoringCard(
|
|
value: monitoring.humidity.toStringAsFixed(1),
|
|
unit: '%',
|
|
subtitle: 'Kelembapan Real Time',
|
|
status: monitoring.humidStatus(control.kelembapanLimit),
|
|
gradient: AppTheme.humidGradient,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 30),
|
|
|
|
// ── Chart filter ──────────────────────────────
|
|
const ChartRangeSelector(),
|
|
const SizedBox(height: 12),
|
|
const ChartTypeSelector(),
|
|
const SizedBox(height: 20),
|
|
|
|
// ── Chart ─────────────────────────────────────
|
|
const MonitoringChart(),
|
|
],
|
|
],
|
|
|
|
const SizedBox(height: 20),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── Empty Device State ──────────────────────────────────────────
|
|
class _EmptyDeviceState extends StatelessWidget {
|
|
final VoidCallback onAddPressed;
|
|
|
|
const _EmptyDeviceState({required this.onAddPressed});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 36),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(24),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.04),
|
|
blurRadius: 16,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
GestureDetector(
|
|
onTap: onAddPressed,
|
|
child: Container(
|
|
width: 84,
|
|
height: 84,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.accentLight,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: AppTheme.accent.withOpacity(0.2),
|
|
width: 2,
|
|
),
|
|
),
|
|
child: const Icon(
|
|
Icons.add,
|
|
size: 44,
|
|
color: AppTheme.accent,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
const Text(
|
|
'Belum Ada Alat Terhubung',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: AppTheme.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
const Text(
|
|
'Tekan tombol + di atas untuk menambahkan perangkat baru Anda menggunakan Claim Code agar dapat memulai monitoring real-time kumbung jamur Anda.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: AppTheme.textSecondary,
|
|
height: 1.5,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── Error banner ───────────────────────────────────────────────
|
|
class _ErrorBanner extends StatelessWidget {
|
|
final String message;
|
|
const _ErrorBanner({required this.message});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.statusDanger.withOpacity(0.1),
|
|
border: Border.all(color: AppTheme.statusDanger.withOpacity(0.3)),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.wifi_off, color: AppTheme.statusDanger, size: 18),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
'Gagal mengambil data: $message',
|
|
style: const TextStyle(
|
|
color: AppTheme.statusDanger,
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── Loading skeleton ───────────────────────────────────────────
|
|
class _LoadingSkeleton extends StatelessWidget {
|
|
const _LoadingSkeleton();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
Expanded(child: _skeletonBox(height: 120)),
|
|
const SizedBox(width: 16),
|
|
Expanded(child: _skeletonBox(height: 120)),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _skeletonBox({required double height}) {
|
|
return Container(
|
|
height: height,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade200,
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// ── No Data banner ─────────────────────────────────────────────
|
|
class _NoDataBanner extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 16),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade100,
|
|
border: Border.all(color: Colors.grey.shade300),
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: const Column(
|
|
children: [
|
|
Icon(Icons.sensors_off, color: Colors.grey, size: 40),
|
|
SizedBox(height: 12),
|
|
Text(
|
|
'Belum Ada Data Sensor',
|
|
style: TextStyle(
|
|
color: Colors.grey,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
SizedBox(height: 6),
|
|
Text(
|
|
'Pastikan perangkat ESP32 menyala dan\nterhubung ke internet.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(color: Colors.grey, fontSize: 13),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|