Added Desktop View

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: <Widget>[
+
+          // 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: <Widget>[
+                // 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,
+      ),
+    );
+  }
+}

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();
+        },
+      ),
     );
   }
 }