352 lines
18 KiB
Dart
352 lines
18 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../services/mqtt_service.dart';
|
|
import '../services/supabase_service.dart';
|
|
import 'package:supabase_flutter/supabase_flutter.dart';
|
|
import '../constants/app_colors.dart';
|
|
import '../services/recording_service.dart'; // Memori Abadi Timer Tetap Dipakai
|
|
|
|
class RecordingScreen extends StatefulWidget {
|
|
const RecordingScreen({super.key});
|
|
|
|
@override
|
|
State<RecordingScreen> createState() => _RecordingScreenState();
|
|
}
|
|
|
|
class _RecordingScreenState extends State<RecordingScreen> {
|
|
final TextEditingController _intervalController = TextEditingController();
|
|
List<Map<String, dynamic>> _gallery = [];
|
|
bool _isLoading = true;
|
|
|
|
final recordingService = RecordingService();
|
|
late final RealtimeChannel _channel;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_loadData();
|
|
|
|
_channel = Supabase.instance.client
|
|
.channel('realtime-foto')
|
|
.onPostgresChanges(
|
|
event: PostgresChangeEvent.insert,
|
|
schema: 'public',
|
|
table: 'foto_dataset',
|
|
callback: (payload) {
|
|
_loadData();
|
|
},
|
|
)
|
|
.subscribe();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_intervalController.dispose();
|
|
Supabase.instance.client.removeChannel(_channel);
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _loadData() async {
|
|
setState(() => _isLoading = true);
|
|
try {
|
|
final interval = await SupabaseService().getIntervalSetting();
|
|
final images = await SupabaseService().getFotoDataset();
|
|
if (mounted) {
|
|
setState(() {
|
|
_intervalController.text = interval.toString();
|
|
_gallery = images;
|
|
_isLoading = false;
|
|
});
|
|
}
|
|
} catch (e) {
|
|
debugPrint('Error loading recording data: $e');
|
|
if (mounted) setState(() => _isLoading = false);
|
|
}
|
|
}
|
|
|
|
Future<void> _controlRecording(bool start) async {
|
|
final mqtt = Provider.of<MqttService>(context, listen: false);
|
|
final intervalVal = int.tryParse(_intervalController.text) ?? 30;
|
|
|
|
if (intervalVal <= 0) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text('Interval harus lebih dari 0 menit!'),
|
|
backgroundColor: AppColors.warning,
|
|
),
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (start) {
|
|
await SupabaseService().updateIntervalSetting(intervalVal);
|
|
mqtt.setIntervalFoto(intervalVal);
|
|
recordingService.setRecordingStatus(true);
|
|
} else {
|
|
mqtt.setIntervalFoto(0);
|
|
recordingService.setRecordingStatus(false);
|
|
}
|
|
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text(
|
|
start
|
|
? 'Perekaman dimulai — interval $intervalVal menit'
|
|
: 'Perekaman dihentikan',
|
|
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
|
|
),
|
|
backgroundColor: start ? AppColors.success : AppColors.error,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColors.background,
|
|
body: SafeArea(
|
|
child: _isLoading
|
|
? const Center(child: CircularProgressIndicator(color: AppColors.primary))
|
|
: Padding(
|
|
padding: const EdgeInsets.all(20.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('Perekaman',
|
|
style: TextStyle(color: AppColors.textMain, fontSize: 32, fontWeight: FontWeight.bold),
|
|
),
|
|
const Text('Dataset Citra Kopi',
|
|
style: TextStyle(color: AppColors.textSecondary, fontSize: 16),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// LISTENABLE BUILDER: Membuat timer kebal pindah halaman
|
|
ListenableBuilder(
|
|
listenable: recordingService,
|
|
builder: (context, child) {
|
|
final isRecording = recordingService.isRecording;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.cardBg,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(color: AppColors.textSecondary.withValues(alpha: 0.15)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text('Interval Waktu (menit)',
|
|
style: TextStyle(color: AppColors.textMain, fontWeight: FontWeight.bold),
|
|
),
|
|
const SizedBox(height: 10),
|
|
TextField(
|
|
controller: _intervalController,
|
|
keyboardType: TextInputType.number,
|
|
style: const TextStyle(color: AppColors.textMain),
|
|
decoration: InputDecoration(
|
|
hintText: '30',
|
|
hintStyle: const TextStyle(color: AppColors.textSecondary),
|
|
filled: true,
|
|
fillColor: AppColors.background,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(15),
|
|
borderSide: BorderSide(color: AppColors.textSecondary.withValues(alpha: 0.3)),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(15),
|
|
borderSide: const BorderSide(color: AppColors.primary),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 15),
|
|
|
|
if (isRecording)
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.success.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(color: AppColors.success),
|
|
),
|
|
child: const Row(
|
|
children: [
|
|
Icon(Icons.circle, color: AppColors.success, size: 10),
|
|
SizedBox(width: 8),
|
|
Text('Perekaman berjalan...',
|
|
style: TextStyle(color: AppColors.success, fontSize: 12, fontWeight: FontWeight.bold)),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: ElevatedButton.icon(
|
|
onPressed: isRecording ? null : () => _controlRecording(true),
|
|
icon: const Icon(Icons.play_arrow, color: Colors.white),
|
|
label: const Text('Mulai', style: TextStyle(color: Colors.white)),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppColors.primary,
|
|
disabledBackgroundColor: AppColors.primary.withValues(alpha: 0.3),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: ElevatedButton.icon(
|
|
onPressed: !isRecording ? null : () => _controlRecording(false),
|
|
icon: const Icon(Icons.stop, color: Colors.white),
|
|
label: const Text('Berhenti', style: TextStyle(color: Colors.white)),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: AppColors.error,
|
|
disabledBackgroundColor: AppColors.error.withValues(alpha: 0.3),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text('Galeri Citra Dataset (${_gallery.length} foto)',
|
|
style: const TextStyle(color: AppColors.textMain, fontSize: 18, fontWeight: FontWeight.bold),
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.refresh, color: AppColors.primary),
|
|
onPressed: _loadData,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
|
|
Expanded(
|
|
child: _gallery.isEmpty
|
|
? const Center(
|
|
child: Text('Belum ada data citra', style: TextStyle(color: AppColors.textSecondary)),
|
|
)
|
|
: GridView.builder(
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 2,
|
|
crossAxisSpacing: 10,
|
|
mainAxisSpacing: 10,
|
|
),
|
|
itemCount: _gallery.length,
|
|
itemBuilder: (context, index) {
|
|
final item = _gallery[index];
|
|
final nomorFoto = index + 1;
|
|
|
|
// PENYARING WAKTU: Ubah 'T' jadi Spasi agar kodingan lamamu aman
|
|
String rawTime = item['timestamp'] ?? item['created_at'] ?? '';
|
|
String cleanTime = rawTime.replaceAll('T', ' ');
|
|
|
|
final tanggal = cleanTime.contains(' ') ? cleanTime.split(' ')[0] : cleanTime;
|
|
final jam = cleanTime.contains(' ') ? cleanTime.split(' ')[1] : '';
|
|
final jamSingkat = jam.length >= 5 ? jam.substring(0, 5) : jam;
|
|
|
|
return GestureDetector(
|
|
onTap: () => Navigator.pushNamed(
|
|
context,
|
|
'/image_result',
|
|
arguments: {
|
|
'id': item['id'].toString(),
|
|
'date': tanggal,
|
|
'time': jamSingkat,
|
|
// PENYARING SENSOR 0: Jika 0, ubah jadi strip '-'
|
|
'temp': (item['suhu'] == 0 || item['suhu'] == null) ? '-' : '${item['suhu']} °C',
|
|
'humidity': (item['kelembapan'] == 0 || item['kelembapan'] == null) ? '-' : '${item['kelembapan']} %',
|
|
'light': (item['intensitas'] == 0 || item['intensitas'] == null) ? '-' : '${item['intensitas']} Lux',
|
|
'location': 'Gudang Pengering',
|
|
'intake': item['kipas1'] ?? 'OFF',
|
|
'exhaust': item['kipas2'] ?? 'OFF',
|
|
'url_foto': item['url_foto'] ?? '',
|
|
},
|
|
),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: AppColors.cardBg,
|
|
borderRadius: BorderRadius.circular(15),
|
|
border: Border.all(color: AppColors.textSecondary.withValues(alpha: 0.15)),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Expanded(
|
|
flex: 3,
|
|
child: ClipRRect(
|
|
borderRadius: const BorderRadius.vertical(top: Radius.circular(14)),
|
|
child: item['url_foto'] != null
|
|
? Image.network(
|
|
item['url_foto'],
|
|
fit: BoxFit.cover,
|
|
errorBuilder: (_, __, ___) => const Center(
|
|
child: Icon(Icons.broken_image, color: AppColors.textSecondary, size: 40),
|
|
),
|
|
loadingBuilder: (_, child, progress) {
|
|
if (progress == null) return child;
|
|
return const Center(
|
|
child: CircularProgressIndicator(color: AppColors.primary, strokeWidth: 2),
|
|
);
|
|
},
|
|
)
|
|
: const Center(
|
|
child: Icon(Icons.image, color: AppColors.textSecondary, size: 40),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
|
decoration: const BoxDecoration(
|
|
color: Colors.transparent,
|
|
borderRadius: BorderRadius.vertical(bottom: Radius.circular(15)),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primary.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(6),
|
|
border: Border.all(color: AppColors.primary.withValues(alpha: 0.5)),
|
|
),
|
|
child: Text('#$nomorFoto',
|
|
style: const TextStyle(color: AppColors.primary, fontSize: 10, fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(tanggal, style: const TextStyle(color: AppColors.textSecondary, fontSize: 8)),
|
|
Text(jamSingkat, style: const TextStyle(color: AppColors.textMain, fontSize: 10, fontWeight: FontWeight.bold)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |