TKK_E32220565/newata2/lib/device_management_page.dart

396 lines
17 KiB
Dart

// =================================================================
// HALAMAN BARU: DEVICE MANAGEMENT
// =================================================================
import 'package:CCTV_App/home_page.dart';
import 'package:CCTV_App/provider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class DeviceManagementPage extends StatefulWidget {
const DeviceManagementPage({super.key});
@override
State<DeviceManagementPage> createState() => _DeviceManagementPageState();
}
class _DeviceManagementPageState extends State<DeviceManagementPage> {
@override
void initState() {
super.initState();
Future.microtask(() => context.read<AppState>().fetchUserDevices());
}
void _showAddDeviceDialog() {
final formKey = GlobalKey<FormState>();
final deviceIdController = TextEditingController();
final deviceNameController = TextEditingController();
showDialog(
context: context,
builder: (context) {
return AlertDialog(
backgroundColor: Theme.of(context).cardColor,
title: const Text('Tambah perangkat baru'),
content: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: deviceIdController,
decoration: const InputDecoration(labelText: 'Device ID'),
validator: (value) =>
value!.isEmpty ? 'Device ID wajib diisi' : null),
const SizedBox(height: 16),
TextFormField(
controller: deviceNameController,
decoration: const InputDecoration(
labelText: 'Nama perangkat (e.g., Teras Rumah)'),
validator: (value) =>
value!.isEmpty ? 'Perangkat harus diberi nama' : null),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Batal')),
ElevatedButton(
onPressed: () async {
if (formKey.currentState!.validate()) {
final appState = context.read<AppState>();
final result = await appState.addUserDevice(
deviceIdController.text.trim(),
deviceNameController.text.trim());
if (mounted) {
Navigator.of(context).pop();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content:
Text(result ?? 'Perangkat berhasil ditambahkan!'),
backgroundColor: result == null
? Colors.green
: Theme.of(context).colorScheme.error));
}
}
},
child: const Text('Tambah')),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.add_box_outlined),
color: Theme.of(context).primaryColor,
tooltip: 'Tambah Perangkat',
onPressed: _showAddDeviceDialog,
),
title: const Text('Daftar Perangkat'),
centerTitle: true,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 0,
actions: [
TextButton.icon(
icon: const Icon(Icons.logout),
label: const Text('Logout'),
onPressed: () async => await context.read<AppState>().signOut(),
style: TextButton.styleFrom(
foregroundColor: Colors.red,
padding: const EdgeInsets.symmetric(horizontal: 16),
),
)
],
),
body: Consumer<AppState>(
builder: (context, appState, child) {
if (appState.isLoading && appState.userDevices.isEmpty) {
return const Center(child: CircularProgressIndicator());
}
if (appState.userDevices.isEmpty) {
return const Center(
child: Padding(
padding: EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(CupertinoIcons.camera_viewfinder,
size: 60, color: Colors.white38),
SizedBox(height: 16),
Text('Perangkat tidak ditemukan',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
SizedBox(height: 8),
// PERUBAHAN 3: Memperbarui teks bantuan
Text(
'Klik ikon [+] di pojok kiri atas untuk menambahkan perangkat baru.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white70)),
],
),
),
);
}
return RefreshIndicator(
onRefresh: () => appState.fetchUserDevices(),
child: ListView.builder(
padding: const EdgeInsets.all(8.0),
itemCount: appState.userDevices.length,
itemBuilder: (context, index) {
final device = appState.userDevices[index];
return Card(
margin:
const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
leading: const Icon(CupertinoIcons.camera_fill,
color: Colors.tealAccent),
title: Text(device['device_name'],
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.white)),
subtitle: Text(device['device_id'],
style: const TextStyle(color: Colors.white70)),
trailing: IconButton(
icon: const Icon(Icons.delete_outline,
color: Colors.redAccent),
onPressed: () async {
final confirm = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
title: const Text('Konfirmasi Hapus'),
content: Text(
'Apakah anda yakin untuk menghapus perangkat ${device['device_name']}?'),
actions: [
TextButton(
onPressed: () =>
Navigator.of(context).pop(false),
child: const Text('Batal')),
TextButton(
onPressed: () =>
Navigator.of(context).pop(true),
child: const Text('Hapus',
style: TextStyle(
color: Colors.redAccent))),
],
));
if (confirm == true) {
await appState.removeUserDevice(device['id']);
}
},
),
onTap: () async {
await appState.selectDevice(device);
if (mounted) {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => const ControlPage()));
}
},
),
);
},
),
);
},
),
// PERUBAHAN 4: Menghapus FloatingActionButton
// floatingActionButton: FloatingActionButton(
// onPressed: _showAddDeviceDialog,
// backgroundColor: Theme.of(context).primaryColor,
// child: const Icon(Icons.add, color: Colors.black)),
);
}
}
// class DeviceManagementPage extends StatefulWidget {
// const DeviceManagementPage({super.key});
// @override
// State<DeviceManagementPage> createState() => _DeviceManagementPageState();
// }
// class _DeviceManagementPageState extends State<DeviceManagementPage> {
// @override
// void initState() {
// super.initState();
// Future.microtask(() => context.read<AppState>().fetchUserDevices());
// }
// void _showAddDeviceDialog() {
// final formKey = GlobalKey<FormState>();
// final deviceIdController = TextEditingController();
// final deviceNameController = TextEditingController();
// showDialog(
// context: context,
// builder: (context) {
// return AlertDialog(
// backgroundColor: Theme.of(context).cardColor,
// title: const Text('Tambah perangkat baru'),
// content: Form(
// key: formKey,
// child: Column(
// mainAxisSize: MainAxisSize.min,
// children: [
// TextFormField(
// controller: deviceIdController,
// decoration: const InputDecoration(labelText: 'Device ID'),
// validator: (value) =>
// value!.isEmpty ? 'Device ID wajib diisi' : null),
// const SizedBox(height: 16),
// TextFormField(
// controller: deviceNameController,
// decoration: const InputDecoration(
// labelText: 'Nama perangkat (e.g., Teras Rumah)'),
// validator: (value) =>
// value!.isEmpty ? 'Perangkat harus diberi nama' : null),
// ],
// ),
// ),
// actions: [
// TextButton(
// onPressed: () => Navigator.of(context).pop(),
// child: const Text('Batal')),
// ElevatedButton(
// onPressed: () async {
// if (formKey.currentState!.validate()) {
// final appState = context.read<AppState>();
// final result = await appState.addUserDevice(
// deviceIdController.text.trim(),
// deviceNameController.text.trim());
// if (mounted) {
// Navigator.of(context).pop();
// ScaffoldMessenger.of(context).showSnackBar(SnackBar(
// content:
// Text(result ?? 'Perangkat berhasil ditambahkan!'),
// backgroundColor: result == null
// ? Colors.green
// : Theme.of(context).colorScheme.error));
// }
// }
// },
// child: const Text('Tambah')),
// ],
// );
// },
// );
// }
// @override
// Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(
// title: const Text('Daftar Perangkat Tertaut'),
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
// elevation: 0,
// actions: [
// IconButton(
// icon: const Icon(Icons.logout),
// onPressed: () async => await context.read<AppState>().signOut())
// ],
// ),
// body: Consumer<AppState>(
// builder: (context, appState, child) {
// if (appState.isLoading && appState.userDevices.isEmpty) {
// return const Center(child: CircularProgressIndicator());
// }
// if (appState.userDevices.isEmpty) {
// return const Center(
// child: Padding(
// padding: EdgeInsets.all(24.0),
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
// Icon(CupertinoIcons.camera_viewfinder,
// size: 60, color: Colors.white38),
// SizedBox(height: 16),
// Text('Perangkat tidak ditermukan',
// style: TextStyle(
// fontSize: 20,
// fontWeight: FontWeight.bold,
// color: Colors.white)),
// SizedBox(height: 8),
// Text(
// 'Klik [+] dipojok kanan bawah untuk menambahkan perangkat.',
// textAlign: TextAlign.center,
// style: TextStyle(color: Colors.white70)),
// ],
// ),
// ),
// );
// }
// return RefreshIndicator(
// onRefresh: () => appState.fetchUserDevices(),
// child: ListView.builder(
// padding: const EdgeInsets.all(8.0),
// itemCount: appState.userDevices.length,
// itemBuilder: (context, index) {
// final device = appState.userDevices[index];
// return Card(
// margin:
// const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
// child: ListTile(
// contentPadding: const EdgeInsets.symmetric(
// vertical: 10, horizontal: 20),
// leading: const Icon(CupertinoIcons.camera_fill,
// color: Colors.tealAccent),
// title: Text(device['device_name'],
// style: const TextStyle(
// fontWeight: FontWeight.bold, color: Colors.white)),
// subtitle: Text(device['device_id'],
// style: const TextStyle(color: Colors.white70)),
// trailing: IconButton(
// icon: const Icon(Icons.delete_outline,
// color: Colors.redAccent),
// onPressed: () async {
// final confirm = await showDialog<bool>(
// context: context,
// builder: (context) => AlertDialog(
// title: const Text('Confirm Deletion'),
// content: Text(
// 'Apakah anda yakin untuk menghapus perangkat ${device['device_name']}?'),
// actions: [
// TextButton(
// onPressed: () =>
// Navigator.of(context).pop(false),
// child: const Text('Batal')),
// TextButton(
// onPressed: () =>
// Navigator.of(context).pop(true),
// child: const Text('Hapus',
// style: TextStyle(
// color: Colors.redAccent))),
// ],
// ));
// if (confirm == true) {
// await appState.removeUserDevice(device['id']);
// }
// },
// ),
// onTap: () async {
// await appState.selectDevice(device);
// if (mounted) {
// Navigator.of(context).push(MaterialPageRoute(
// builder: (_) => const HomePage()));
// }
// },
// ),
// );
// },
// ),
// );
// },
// ),
// floatingActionButton: FloatingActionButton(
// onPressed: _showAddDeviceDialog,
// backgroundColor: Theme.of(context).primaryColor,
// child: const Icon(Icons.add, color: Colors.black)),
// );
// }
// }