Add devices screen to the Flutter frontend

Lists devices with New/Registered/All filtering, pull-to-refresh, device-type icons, and visual differentiation between new and registered devices. Introduces a reusable StatusBadge widget for colour-coded labels. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-07-08 19:21:54 +02:00 · 2026-05-27 14:58:11 -04:00
parent 6d72ba7202
commit d0b9855bad
5 changed files with 280 additions and 1 deletions
@@ -0,0 +1,187 @@
+import 'package:flutter/material.dart';
+
+import '../model/device.dart';
+import '../utils/friendly_date_formatter.dart';
+import '../utils/oott_api.dart';
+import '../widgets/status_badge.dart';
+
+enum _DeviceFilter { newDevices, registered, all }
+
+class DeviceList extends StatefulWidget {
+  const DeviceList({super.key});
+
+  @override
+  State<DeviceList> createState() => _DeviceListState();
+}
+
+class _DeviceListState extends State<DeviceList> {
+  _DeviceFilter _filter = _DeviceFilter.newDevices;
+  List<Device> _devices = [];
+  bool _isLoading = true;
+  String? _error;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadDevices();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  Future<void> _loadDevices() async {
+    setState(() {
+      _isLoading = _devices.isEmpty;
+      _error = null;
+    });
+    try {
+      bool? isRegistered;
+      if (_filter == _DeviceFilter.newDevices) isRegistered = false;
+      if (_filter == _DeviceFilter.registered) isRegistered = true;
+
+      final devices = await BackendAPI.instance.listDevices(
+        isRegistered: isRegistered,
+      );
+      if (!mounted) return;
+      setState(() {
+        _devices = devices;
+        _isLoading = false;
+      });
+    } catch (e) {
+      if (!mounted) return;
+      setState(() {
+        _error = e.toString();
+        _isLoading = false;
+      });
+    }
+  }
+
+  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;
+    }
+  }
+
+  String _emptyMessage() {
+    switch (_filter) {
+      case _DeviceFilter.newDevices:
+        return 'No new devices';
+      case _DeviceFilter.registered:
+        return 'No registered devices';
+      case _DeviceFilter.all:
+        return 'No devices found';
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final formatter = FriendlyDateFormatter();
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Devices')),
+      body: Column(
+        children: [
+          Container(
+            height: 50,
+            alignment: Alignment.centerRight,
+            child: Wrap(
+              spacing: 8.0,
+              children: [
+                ChoiceChip(
+                  label: const Text('New'),
+                  selected: _filter == _DeviceFilter.newDevices,
+                  onSelected: (bool selected) {
+                    setState(() => _filter = _DeviceFilter.newDevices);
+                    _loadDevices();
+                  },
+                ),
+                ChoiceChip(
+                  label: const Text('Registered'),
+                  selected: _filter == _DeviceFilter.registered,
+                  onSelected: (bool selected) {
+                    setState(() => _filter = _DeviceFilter.registered);
+                    _loadDevices();
+                  },
+                ),
+                ChoiceChip(
+                  label: const Text('All'),
+                  selected: _filter == _DeviceFilter.all,
+                  onSelected: (bool selected) {
+                    setState(() => _filter = _DeviceFilter.all);
+                    _loadDevices();
+                  },
+                ),
+              ],
+            ),
+          ),
+          Expanded(
+            child: _isLoading
+                ? const Center(child: CircularProgressIndicator())
+                : _error != null
+                ? Center(child: Text('Error: $_error'))
+                : _devices.isEmpty
+                ? Center(child: Text(_emptyMessage()))
+                : RefreshIndicator(
+                    onRefresh: _loadDevices,
+                    child: ListView.builder(
+                      physics: const AlwaysScrollableScrollPhysics(),
+                      itemCount: _devices.length,
+                      itemBuilder: (context, index) {
+                        final device = _devices[index];
+                        return Stack(
+                          children: [
+                            Card(
+                              color: device.isRegistered
+                                  ? null
+                                  : theme.colorScheme.secondaryContainer,
+                              child: ListTile(
+                                leading: Icon(_deviceIcon(device.deviceType)),
+                                title: Text(device.ipv4Address),
+                                subtitle: Text(
+                                  '${device.vendor} · ${device.macAddress}\n'
+                                  'Last seen: ${formatter.format(device.lastSeen)}',
+                                ),
+                                isThreeLine: true,
+                                trailing: device.isRegistered
+                                    ? Text(device.owner)
+                                    : null,
+                              ),
+                            ),
+                            if (!device.isRegistered)
+                              Positioned(
+                                top: 16,
+                                right: 16,
+                                child: const StatusBadge(
+                                  label: 'New',
+                                  color: BadgeColor.secondary,
+                                ),
+                              ),
+                          ],
+                        );
+                      },
+                    ),
+                  ),
+          ),
+        ],
+      ),
+    );
+  }
+}