better help and onboarding

frontend/lib/pages/base_page.dart

@@ -0,0 +1,143 @@
+import 'package:anyway/modules/help_dialog.dart';
+import 'package:anyway/pages/current_trip.dart';
+import 'package:anyway/pages/settings.dart';
+import 'package:flutter/material.dart';
+
+import 'package:anyway/constants.dart';
+
+import 'package:anyway/structs/trip.dart';
+import 'package:anyway/modules/trips_saved_list.dart';
+import 'package:anyway/utils/load_trips.dart';
+
+import 'package:anyway/pages/new_trip_location.dart';
+import 'package:anyway/pages/onboarding.dart';
+
+
+
+
+// BasePage is the scaffold that holds a child page and a side drawer
+// The side drawer is the main way to switch between pages
+
+class BasePage extends StatefulWidget {
+  final Widget mainScreen;
+  final Widget title;
+  final List<String> helpTexts;
+
+  const BasePage({
+    super.key,
+    required this.mainScreen,
+    this.title = const Text(APP_NAME),
+    this.helpTexts = const [],
+  });
+
+  @override
+  State<BasePage> createState() => _BasePageState();
+}
+
+class _BasePageState extends State<BasePage> {
+
+  @override
+  Widget build(BuildContext context) {
+    Future<List<Trip>> trips = loadTrips();
+
+    return Scaffold(
+      appBar: AppBar(
+        title: widget.title,
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.help),
+            tooltip: 'Help',
+            onPressed: () {
+              if (widget.helpTexts.isNotEmpty) {
+                helpDialog(context, widget.helpTexts[0], widget.helpTexts[1]);
+              }
+            }
+          ),
+        ],
+      ),
+      body: Center(child: widget.mainScreen),
+      drawer: Drawer(
+        child: Column(
+          children: [
+            Container(
+              decoration: BoxDecoration(
+                gradient: APP_GRADIENT,
+              ),
+              height: 150,
+              child: Center(
+                child: Text(
+                  APP_NAME,
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 24,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            ),
+
+            ListTile(
+              title: const Text('Your Trips'),
+              leading: const Icon(Icons.map),
+              // TODO: this is not working!
+              selected: widget.mainScreen is TripPage,
+              onTap: () {},
+              trailing: ElevatedButton(
+                onPressed: () {
+                  Navigator.of(context).push(
+                    MaterialPageRoute(
+                      builder: (context) => const NewTripPage()
+                    )
+                  );
+                },
+                child: const Text('New'),
+              ),
+            ),
+
+            // Adds a ListView to the drawer. This ensures the user can scroll
+            // through the options in the drawer if there isn't enough vertical
+            // space to fit everything.
+            Expanded(
+              child: TripsOverview(trips: trips),
+            ),
+            ElevatedButton(
+              onPressed: () async {
+                removeAllTripsFromPrefs();
+              },
+              child: const Text('Clear trips'),
+            ),
+            const Divider(indent: 10, endIndent: 10),
+            ListTile(
+              title: const Text('How to use'),
+              leading: Icon(Icons.help),
+              // TODO: this is not working!
+              selected: widget.mainScreen is OnboardingPage,
+              onTap: () {
+                Navigator.of(context).push(
+                  MaterialPageRoute(
+                    builder: (context) => OnboardingPage()
+                  )
+                );
+              },
+            ),
+
+            // settings in the bottom of the drawer
+            ListTile(
+              title: const Text('Settings'),
+              leading: const Icon(Icons.settings),
+              // TODO: this is not working!
+              selected: widget.mainScreen is SettingsPage,
+              onTap: () {
+                Navigator.of(context).push(
+                  MaterialPageRoute(
+                    builder: (context) => SettingsPage()
+                  )
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}