mirror of
https://github.com/rzuasti/oott.git
synced 2026-07-08 19:21:54 +02:00
Add device detail screen and navigate to it from notifications and devices
- New /devices/:macAddress route showing all device fields with Register/Forget actions - Device list items are now tappable; popup menu gains a "View details" item - Notification list items with a linked device are tappable; popup menu gains a "View device" item - Backend: new DB migration adds optional mac_address column to notifications - Device-related notifications (NewDeviceFound, DeviceOnlineAfterTime, DeviceChanged) now store the triggering device's MAC address Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
rzuasti
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
07f7d54531
commit
2da339a2b0
@@ -0,0 +1,369 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../model/device.dart';
|
||||
import '../utils/friendly_date_formatter.dart';
|
||||
import '../utils/oott_api.dart';
|
||||
import '../utils/ui_snackbars.dart';
|
||||
import '../widgets/status_badge.dart';
|
||||
|
||||
const _deviceTypes = [
|
||||
'phone',
|
||||
'laptop',
|
||||
'tablet',
|
||||
'server',
|
||||
'router',
|
||||
'tv',
|
||||
'printer',
|
||||
'unknown',
|
||||
];
|
||||
|
||||
class DeviceDetail extends StatefulWidget {
|
||||
final String macAddress;
|
||||
|
||||
const DeviceDetail({super.key, required this.macAddress});
|
||||
|
||||
@override
|
||||
State<DeviceDetail> createState() => _DeviceDetailState();
|
||||
}
|
||||
|
||||
class _DeviceDetailState extends State<DeviceDetail> {
|
||||
Device? _device;
|
||||
bool _isLoading = true;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadDevice();
|
||||
}
|
||||
|
||||
Future<void> _loadDevice() async {
|
||||
setState(() {
|
||||
_isLoading = _device == null;
|
||||
_error = null;
|
||||
});
|
||||
try {
|
||||
final device = await BackendAPI.instance.getDevice(widget.macAddress);
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_device = device;
|
||||
_isLoading = false;
|
||||
});
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_error = e.toString();
|
||||
_isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _confirmForget(Device device) async {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Forget Device'),
|
||||
content: Text(
|
||||
'This device will be unregistered and will no longer be linked to '
|
||||
'${device.owner}. Are you sure?',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
child: Text('Forget', style: TextStyle(color: colorScheme.error)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (confirmed != true || !mounted) return;
|
||||
|
||||
try {
|
||||
await BackendAPI.instance.forgetDevice(device.macAddress);
|
||||
if (!mounted) return;
|
||||
UISnackbars.showSuccess(context, 'Device forgotten');
|
||||
_loadDevice();
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
UISnackbars.showError(context, 'Failed to forget device: $e');
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _showRegisterDialog(Device device) async {
|
||||
final formKey = GlobalKey<FormState>();
|
||||
String owner = '';
|
||||
String deviceType = _deviceTypes.contains(device.deviceType)
|
||||
? device.deviceType
|
||||
: 'unknown';
|
||||
|
||||
final saved = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (context) => StatefulBuilder(
|
||||
builder: (context, setDialogState) => AlertDialog(
|
||||
title: const Text('Register Device'),
|
||||
content: Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
TextFormField(
|
||||
decoration: const InputDecoration(labelText: 'Owner'),
|
||||
validator: (value) => value == null || value.trim().isEmpty
|
||||
? 'Owner is required'
|
||||
: null,
|
||||
onSaved: (value) => owner = value?.trim() ?? '',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
InputDecorator(
|
||||
decoration: const InputDecoration(labelText: 'Device Type'),
|
||||
child: DropdownButton<String>(
|
||||
value: deviceType,
|
||||
isExpanded: true,
|
||||
underline: const SizedBox(),
|
||||
items: _deviceTypes
|
||||
.map((t) => DropdownMenuItem(value: t, child: Text(t)))
|
||||
.toList(),
|
||||
onChanged: (value) =>
|
||||
setDialogState(() => deviceType = value ?? deviceType),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
if (formKey.currentState?.validate() ?? false) {
|
||||
formKey.currentState?.save();
|
||||
Navigator.of(context).pop(true);
|
||||
}
|
||||
},
|
||||
child: const Text('Save'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (saved != true || !mounted) return;
|
||||
|
||||
try {
|
||||
await BackendAPI.instance.registerDevice(
|
||||
device.macAddress,
|
||||
owner,
|
||||
deviceType,
|
||||
);
|
||||
if (!mounted) return;
|
||||
UISnackbars.showSuccess(context, 'Device registered');
|
||||
_loadDevice();
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
UISnackbars.showError(context, 'Failed to register device: $e');
|
||||
}
|
||||
}
|
||||
|
||||
IconData _deviceIcon(String deviceType) {
|
||||
switch (deviceType.toLowerCase()) {
|
||||
case 'phone':
|
||||
return Icons.phone_android;
|
||||
case 'laptop':
|
||||
return Icons.laptop;
|
||||
case 'tablet':
|
||||
return Icons.tablet_android;
|
||||
case 'server':
|
||||
return Icons.dns;
|
||||
case 'router':
|
||||
return Icons.router;
|
||||
case 'tv':
|
||||
return Icons.tv;
|
||||
case 'printer':
|
||||
return Icons.print;
|
||||
default:
|
||||
return Icons.device_unknown;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final device = _device;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Device Details'),
|
||||
leading: BackButton(onPressed: () => context.pop()),
|
||||
actions: [
|
||||
if (device != null)
|
||||
PopupMenuButton<String>(
|
||||
icon: const Icon(Icons.more_vert),
|
||||
onSelected: (value) async {
|
||||
if (value == 'forget') {
|
||||
await _confirmForget(device);
|
||||
} else if (value == 'register') {
|
||||
await _showRegisterDialog(device);
|
||||
}
|
||||
},
|
||||
itemBuilder: (context) => [
|
||||
if (device.isRegistered)
|
||||
const PopupMenuItem(value: 'forget', child: Text('Forget')),
|
||||
if (!device.isRegistered)
|
||||
const PopupMenuItem(
|
||||
value: 'register',
|
||||
child: Text('Register'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _isLoading
|
||||
? const Center(child: CircularProgressIndicator())
|
||||
: _error != null
|
||||
? Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text('Error: $_error'),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton(
|
||||
onPressed: _loadDevice,
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
: device == null
|
||||
? const Center(child: Text('Device not found'))
|
||||
: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_DeviceHeader(
|
||||
device: device,
|
||||
deviceIcon: _deviceIcon(device.deviceType),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
_DeviceInfoCard(device: device),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DeviceHeader extends StatelessWidget {
|
||||
final Device device;
|
||||
final IconData deviceIcon;
|
||||
|
||||
const _DeviceHeader({required this.device, required this.deviceIcon});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Row(
|
||||
children: [
|
||||
Icon(deviceIcon, size: 48),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(device.ipv4Address, style: theme.textTheme.headlineSmall),
|
||||
const SizedBox(height: 4),
|
||||
if (device.isRegistered)
|
||||
StatusBadge(label: 'Registered', color: BadgeColor.success)
|
||||
else
|
||||
StatusBadge(
|
||||
label: 'Not registered',
|
||||
color: BadgeColor.secondary,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DeviceInfoCard extends StatelessWidget {
|
||||
final Device device;
|
||||
|
||||
const _DeviceInfoCard({required this.device});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final formatter = FriendlyDateFormatter();
|
||||
|
||||
return Card(
|
||||
child: Column(
|
||||
children: [
|
||||
_InfoRow(label: 'MAC Address', value: device.macAddress),
|
||||
const Divider(height: 1),
|
||||
_InfoRow(label: 'IP Address', value: device.ipv4Address),
|
||||
const Divider(height: 1),
|
||||
_InfoRow(
|
||||
label: 'Vendor',
|
||||
value: device.vendor.isEmpty ? '—' : device.vendor,
|
||||
),
|
||||
const Divider(height: 1),
|
||||
_InfoRow(
|
||||
label: 'Last Seen',
|
||||
value: formatter.format(device.lastSeen),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
_InfoRow(
|
||||
label: 'Device Type',
|
||||
value: device.deviceType.isEmpty || device.deviceType == 'unknown'
|
||||
? 'Unknown'
|
||||
: device.deviceType,
|
||||
),
|
||||
const Divider(height: 1),
|
||||
_InfoRow(
|
||||
label: 'Owner',
|
||||
value: device.owner.isEmpty ? '—' : device.owner,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoRow extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _InfoRow({required this.label, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: Text(
|
||||
label,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(child: Text(value, style: theme.textTheme.bodyMedium)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user