mirror of
https://github.com/rzuasti/oott.git
synced 2026-07-08 19:21:54 +02:00
Refactor frontend: extract widgets and eliminate duplicated scanner state
- Convert ArpScannerCard to a self-managing StatefulWidget (owns its own 5s refresh + 1s tick timers), removing the duplicated state management that existed in both HomeScreen and StatusScreen - Extract NotificationCard to home/notification_card.dart - Extract DeviceSummaryCard (with its 1-min refresh timer) to widgets/device_summary_card.dart - HomeScreen drops from 515 to 253 lines; StatusScreen from 82 to 19 lines 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
251d8a479e
commit
f113da9cd0
@@ -1,16 +1,15 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
|
||||
|
||||
import '../model/arp_scanner_status.dart';
|
||||
import '../model/device_summary.dart';
|
||||
import '../model/notification.dart' as oott_model;
|
||||
import '../utils/friendly_date_formatter.dart';
|
||||
import '../utils/oott_api.dart';
|
||||
import '../utils/ui_snackbars.dart';
|
||||
import '../widgets/arp_scanner_card.dart';
|
||||
import '../widgets/device_summary_card.dart';
|
||||
import 'notification_card.dart';
|
||||
|
||||
const _twoColumnBreakpoint = 700.0;
|
||||
|
||||
@@ -38,7 +37,6 @@ class HomeScreen extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _HomeScreenState extends State<HomeScreen> {
|
||||
// Notification state
|
||||
_NotificationFilter _filter = _NotificationFilter.newOnly;
|
||||
Timer? _notificationTimer;
|
||||
|
||||
@@ -51,20 +49,6 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
BackendAPI.instance.listNotifications(_filter.isNew, pageKey),
|
||||
);
|
||||
|
||||
// Device summary state
|
||||
DeviceSummary? _deviceSummary;
|
||||
bool _isLoadingDeviceSummary = true;
|
||||
String? _deviceSummaryError;
|
||||
Timer? _deviceSummaryTimer;
|
||||
|
||||
// Scanner status state
|
||||
ArpScannerStatus? _scannerStatus;
|
||||
DateTime? _scannerStatusReceivedAt;
|
||||
bool _isLoadingScanner = true;
|
||||
String? _scannerError;
|
||||
Timer? _scannerRefreshTimer;
|
||||
Timer? _scannerTickTimer;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
@@ -72,71 +56,15 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
const Duration(minutes: 1),
|
||||
(_) => _pagingController.refresh(),
|
||||
);
|
||||
_loadDeviceSummary();
|
||||
_deviceSummaryTimer = Timer.periodic(
|
||||
const Duration(minutes: 1),
|
||||
(_) => _loadDeviceSummary(),
|
||||
);
|
||||
_loadScannerStatus();
|
||||
_scannerRefreshTimer = Timer.periodic(
|
||||
const Duration(seconds: 5),
|
||||
(_) => _loadScannerStatus(),
|
||||
);
|
||||
_scannerTickTimer = Timer.periodic(
|
||||
const Duration(seconds: 1),
|
||||
(_) {
|
||||
if (mounted) setState(() {});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_notificationTimer?.cancel();
|
||||
_pagingController.dispose();
|
||||
_deviceSummaryTimer?.cancel();
|
||||
_scannerRefreshTimer?.cancel();
|
||||
_scannerTickTimer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _loadDeviceSummary() async {
|
||||
try {
|
||||
final summary = await BackendAPI.instance.getDeviceSummary();
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_deviceSummary = summary;
|
||||
_deviceSummaryError = null;
|
||||
_isLoadingDeviceSummary = false;
|
||||
});
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_deviceSummaryError = e.toString();
|
||||
_isLoadingDeviceSummary = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _loadScannerStatus() async {
|
||||
try {
|
||||
final status = await BackendAPI.instance.getArpScannerStatus();
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_scannerStatus = status;
|
||||
_scannerStatusReceivedAt = DateTime.now();
|
||||
_scannerError = null;
|
||||
_isLoadingScanner = false;
|
||||
});
|
||||
} catch (e) {
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_scannerError = e.toString();
|
||||
_isLoadingScanner = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _markAllAsRead(BuildContext context) async {
|
||||
await BackendAPI.instance.markAllNotificationsAsRead();
|
||||
_pagingController.refresh();
|
||||
@@ -217,15 +145,15 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
),
|
||||
),
|
||||
const VerticalDivider(width: 32),
|
||||
SizedBox(
|
||||
const SizedBox(
|
||||
width: 300,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildDeviceSummaryCard(context),
|
||||
const SizedBox(height: 16),
|
||||
_buildScannerCard(),
|
||||
DeviceSummaryCard(),
|
||||
SizedBox(height: 16),
|
||||
ArpScannerCard(),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -243,16 +171,16 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
slivers: [
|
||||
SliverToBoxAdapter(child: _buildNotificationsHeader(context, state)),
|
||||
_buildNotificationSliver(state, fetchNextPage),
|
||||
SliverToBoxAdapter(
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 24),
|
||||
child: _buildDeviceSummaryCard(context),
|
||||
padding: EdgeInsets.only(top: 24),
|
||||
child: DeviceSummaryCard(),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
const SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 16, bottom: 20),
|
||||
child: _buildScannerCard(),
|
||||
padding: EdgeInsets.only(top: 16, bottom: 20),
|
||||
child: ArpScannerCard(),
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -314,7 +242,7 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
state: state,
|
||||
fetchNextPage: fetchNextPage,
|
||||
builderDelegate: PagedChildBuilderDelegate(
|
||||
itemBuilder: (context, item, index) => _NotificationCard(
|
||||
itemBuilder: (context, item, index) => NotificationCard(
|
||||
item: item,
|
||||
formatter: formatter,
|
||||
onSetRead: (ctx, read) => _setRead(ctx, item, read),
|
||||
@@ -322,193 +250,4 @@ class _HomeScreenState extends State<HomeScreen> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDeviceSummaryCard(BuildContext context) {
|
||||
return Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Devices', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 12),
|
||||
if (_isLoadingDeviceSummary)
|
||||
const Center(child: CircularProgressIndicator())
|
||||
else if (_deviceSummaryError != null)
|
||||
Text(
|
||||
'Error loading device summary',
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
)
|
||||
else if (_deviceSummary != null) ...[
|
||||
_SummaryRow(
|
||||
label: 'Registered',
|
||||
value: '${_deviceSummary!.totalRegistered}',
|
||||
),
|
||||
const Divider(height: 20),
|
||||
Text(
|
||||
'Seen in the last 24 hours',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
_SummaryRow(
|
||||
label: 'Registered',
|
||||
value: '${_deviceSummary!.seenLastDayRegistered}',
|
||||
),
|
||||
_SummaryRow(
|
||||
label: 'Unregistered',
|
||||
value: '${_deviceSummary!.seenLastDayUnregistered}',
|
||||
),
|
||||
const Divider(height: 20),
|
||||
Text(
|
||||
'Seen in the last 7 days',
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.outline,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
_SummaryRow(
|
||||
label: 'Registered',
|
||||
value: '${_deviceSummary!.seenLastWeekRegistered}',
|
||||
),
|
||||
_SummaryRow(
|
||||
label: 'Unregistered',
|
||||
value: '${_deviceSummary!.seenLastWeekUnregistered}',
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildScannerCard() {
|
||||
return ArpScannerCard(
|
||||
status: _scannerStatus,
|
||||
statusReceivedAt: _scannerStatusReceivedAt,
|
||||
error: _scannerError,
|
||||
isLoading: _isLoadingScanner,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SummaryRow extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _SummaryRow({required this.label, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(label, style: Theme.of(context).textTheme.bodyMedium),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _NotificationCard extends StatelessWidget {
|
||||
final oott_model.Notification item;
|
||||
final FriendlyDateFormatter formatter;
|
||||
final Future<bool> Function(BuildContext, bool read) onSetRead;
|
||||
|
||||
const _NotificationCard({
|
||||
required this.item,
|
||||
required this.formatter,
|
||||
required this.onSetRead,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Card(
|
||||
color: item.isNew ? theme.colorScheme.secondaryContainer : null,
|
||||
child: Dismissible(
|
||||
key: UniqueKey(),
|
||||
confirmDismiss: (direction) => direction == DismissDirection.startToEnd
|
||||
? onSetRead(context, false)
|
||||
: onSetRead(context, true),
|
||||
background: Container(
|
||||
color: theme.colorScheme.tertiaryContainer,
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: const EdgeInsets.only(left: 16),
|
||||
child: const Icon(Icons.mark_email_unread),
|
||||
),
|
||||
secondaryBackground: Container(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
alignment: Alignment.centerRight,
|
||||
padding: const EdgeInsets.only(right: 16),
|
||||
child: const Icon(Icons.done),
|
||||
),
|
||||
child: ListTile(
|
||||
leading: Icon(
|
||||
item.notificationType.icon,
|
||||
color: item.isNew ? theme.colorScheme.primary : null,
|
||||
),
|
||||
title: Text(
|
||||
'${formatter.format(item.createdOn)} - ${item.title}',
|
||||
style: item.isNew
|
||||
? const TextStyle(fontWeight: FontWeight.bold)
|
||||
: null,
|
||||
),
|
||||
subtitle: Text(item.body, maxLines: 5),
|
||||
trailing: PopupMenuButton<String>(
|
||||
icon: const Icon(Icons.more_vert),
|
||||
onSelected: (value) async {
|
||||
if (value == 'view_device') {
|
||||
if (item.isNew) await onSetRead(context, true);
|
||||
if (context.mounted) {
|
||||
context.push('/devices/${item.macAddress}');
|
||||
}
|
||||
} else if (value == 'mark_read') {
|
||||
await onSetRead(context, true);
|
||||
} else if (value == 'mark_new') {
|
||||
await onSetRead(context, false);
|
||||
}
|
||||
},
|
||||
itemBuilder: (context) => [
|
||||
if (item.macAddress != null)
|
||||
const PopupMenuItem(
|
||||
value: 'view_device',
|
||||
child: Text('View device'),
|
||||
),
|
||||
if (item.isNew)
|
||||
const PopupMenuItem(
|
||||
value: 'mark_read',
|
||||
child: Text('Mark as read'),
|
||||
),
|
||||
if (!item.isNew)
|
||||
const PopupMenuItem(
|
||||
value: 'mark_new',
|
||||
child: Text('Mark as unread'),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: item.macAddress != null
|
||||
? () async {
|
||||
if (item.isNew) await onSetRead(context, true);
|
||||
if (context.mounted) {
|
||||
context.push('/devices/${item.macAddress}');
|
||||
}
|
||||
}
|
||||
: null,
|
||||
isThreeLine: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user