Adding fancy stuff to events list

This commit is contained in:
rzuasti
2026-02-11 18:31:12 -05:00
parent f927294194
commit 9c5755a2d9
2 changed files with 94 additions and 62 deletions
+88 -58
View File
@@ -3,67 +3,97 @@ import 'package:frontend/utils/friendly_date_formatter.dart';
import '../model/event.dart'; import '../model/event.dart';
import '../model/device_type.dart'; import '../model/device_type.dart';
// Dummy events to display class EventsList extends StatefulWidget {
// TODO : Replace with API call @override
final List<Event> events = <Event>[ _EventListState createState() => _EventListState();
Event( }
id: 5,
title: 'New device found', class _EventListState extends State<EventsList> {
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5', // Dummy events to display
isRead: false, // TODO : Replace with API call
deviceType: DeviceType.phone, List<Event> events = <Event>[
dateTime: DateTime.now().subtract(Duration(minutes: 22)), Event(
), id: 5,
Event( title: 'New device found',
id: 4, description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
title: 'New device found', isRead: false,
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5', deviceType: DeviceType.phone,
isRead: false, dateTime: DateTime.now().subtract(Duration(minutes: 22)),
deviceType: DeviceType.pc, ),
dateTime: DateTime.now().subtract(Duration(minutes: 87)), Event(
), id: 4,
Event( title: 'New device found',
id: 3, description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
title: 'New device found', isRead: false,
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5', deviceType: DeviceType.pc,
isRead: false, dateTime: DateTime.now().subtract(Duration(minutes: 87)),
deviceType: DeviceType.tablet, ),
dateTime: DateTime.now().subtract(Duration(hours: 23)), Event(
), id: 3,
Event( title: 'New device found',
id: 2, description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
title: 'New device found', isRead: false,
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5', deviceType: DeviceType.tablet,
isRead: false, dateTime: DateTime.now().subtract(Duration(hours: 23)),
deviceType: DeviceType.server, ),
dateTime: DateTime(2026, 01, 19, 14, 47), Event(
), id: 2,
Event( title: 'New device found',
id: 1, description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
title: 'New device found', isRead: false,
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5', deviceType: DeviceType.server,
isRead: false, dateTime: DateTime(2026, 01, 19, 14, 47),
deviceType: DeviceType.phone, ),
dateTime: DateTime(2026, 01, 17, 14, 47), Event(
), id: 1,
]; title: 'New device found',
description: 'Apple device @ 192.168.0.1 with MAC 56:e7:e3:07:d2:d5',
isRead: false,
deviceType: DeviceType.phone,
dateTime: DateTime(2026, 01, 17, 14, 47),
),
];
class EventsList extends StatelessWidget {
const EventsList({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ListView.separated( return Scaffold(
itemCount: events.length, appBar: AppBar(title: const Text('Events')),
itemBuilder: (context, index) { body: ListView.separated(
return ListTile( itemCount: events.length,
leading: Icon(events[index].deviceType.icon), itemBuilder: (context, index) {
title: Text( return Dismissible(
'${FriendlyDateFormatter().format(events[index].dateTime)} - ${events[index].title}', key: UniqueKey(),
), onDismissed: (direction) {
subtitle: Text(events[index].description), setState(() {
); events.removeAt(index);
}, });
separatorBuilder: (context, index) => Divider(),
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Event marked as read'),
behavior: SnackBarBehavior.floating,
showCloseIcon: true,
),
);
},
background: Container(
color: Theme.of(context).colorScheme.primaryContainer,
alignment: Alignment.center,
child: Icon(Icons.done),
),
child: ListTile(
leading: Icon(events[index].deviceType.icon),
title: Text(
'${FriendlyDateFormatter().format(events[index].dateTime)} - ${events[index].title}',
),
subtitle: Text(events[index].description),
trailing: Icon(Icons.more_vert),
onTap: () {},
),
);
},
separatorBuilder: (context, index) => Divider(),
),
); );
} }
} }
+6 -4
View File
@@ -14,7 +14,7 @@ final GoRouter router = GoRouter(
GoRoute( GoRoute(
path: '/events', path: '/events',
name: 'events', name: 'events',
builder: (context, state) => const EventsList(), builder: (context, state) => EventsList(),
), ),
GoRoute( GoRoute(
path: '/devices', path: '/devices',
@@ -49,7 +49,9 @@ class MainShell extends StatelessWidget {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('OOTT'), title: const Text('OOTT'),
backgroundColor: Theme.of(context).colorScheme.surfaceBright, backgroundColor: Theme.of(
context,
).colorScheme.surfaceContainerLowest,
), ),
body: Row( body: Row(
children: [ children: [
@@ -57,7 +59,7 @@ class MainShell extends StatelessWidget {
child: NavigationRail( child: NavigationRail(
backgroundColor: Theme.of( backgroundColor: Theme.of(
context, context,
).colorScheme.primaryContainer, ).colorScheme.surfaceContainerLow,
extended: constraints.maxWidth >= 600, extended: constraints.maxWidth >= 600,
destinations: [ destinations: [
NavigationRailDestination( NavigationRailDestination(
@@ -89,7 +91,7 @@ class MainShell extends StatelessWidget {
Expanded( Expanded(
child: Container( child: Container(
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
color: Theme.of(context).colorScheme.surfaceDim, color: Theme.of(context).colorScheme.surface,
child: child, child: child,
), ),
), ),