diff --git a/ac_web/lib/Layouts/DesktopView.dart b/ac_web/lib/Layouts/DesktopView.dart index e69de29..4e49036 100644 --- a/ac_web/lib/Layouts/DesktopView.dart +++ b/ac_web/lib/Layouts/DesktopView.dart @@ -0,0 +1,71 @@ +import 'package:ac_web/Pages/AgentAvailabilities.dart'; +import 'package:ac_web/Pages/LatestReports.dart'; +import 'package:ac_web/Pages/Reports.dart'; +import 'package:ac_web/Widgets/LatestReportHeader.dart'; +import 'package:flutter/material.dart'; + +/// Main screen for wide windows. +/// +/// Instead of switching between the three pages through a navigation bar like +/// the `MobileView` does, all of them are shown next to each other: +/// reports on the left, the latest reports in the center and the agents on +/// the right. +class DesktopView extends StatelessWidget { + const DesktopView({super.key}); + + /// Breakpoint at which this layout is wide enough to be useful. + static const double minimumWidth = 900; + + @override + Widget build(BuildContext context) { + + return Scaffold( + appBar: AppBar( + backgroundColor: Theme.of(context).colorScheme.inversePrimary, + title: Text("AC Control"), + ), + body: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + + // Reports grouped by their type + _buildColumn(flex: 2, child: const Reports()), + + const VerticalDivider(width: 1, thickness: 1), + + // The newest reports of every type + _buildColumn(flex: 3, child: LatestReports()), + + const VerticalDivider(width: 1, thickness: 1), + + // Agents and their current availability + _buildColumn( + flex: 2, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // The other two columns draw their headline themselves. + Padding( + padding: EdgeInsetsGeometry.fromLTRB(8, 8, 8, 0), + child: LatestReportHeader(text: "Agents", bigHeader: true), + ), + const Expanded(child: AgentAvailabilities()), + ], + ), + ), + ], + ), + ); + } + + /// One column of the layout. Every column scrolls on its own. + Widget _buildColumn({required int flex, required Widget child}) { + return Expanded( + flex: flex, + child: Padding( + padding: EdgeInsetsGeometry.all(8), + child: child, + ), + ); + } +} diff --git a/ac_web/lib/Layouts/MainApp.dart b/ac_web/lib/Layouts/MainApp.dart index 5d3fbbe..c01164a 100644 --- a/ac_web/lib/Layouts/MainApp.dart +++ b/ac_web/lib/Layouts/MainApp.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; +import 'DesktopView.dart'; import 'MobileView.dart'; class MainApp extends StatelessWidget { @@ -31,7 +32,16 @@ class MainApp extends StatelessWidget { brightness: Brightness.dark, ) ), - home: const MobileView(), + // Wide windows show all three pages next to each other, narrow ones + // switch between them through the navigation bar. + home: LayoutBuilder( + builder: (context, constraints) { + if (constraints.maxWidth >= DesktopView.minimumWidth) { + return const DesktopView(); + } + return const MobileView(); + }, + ), ); } } \ No newline at end of file