Add class ConnectionPage

This is a second page to offer a form to set the Sia server name.

2 files changed, 35 insertions, 1 deletions

diff --git a/lib/data.dart b/lib/data.dart
index 2583d1a..31e48b1 100644
--- a/lib/data.dart
+++ b/lib/data.dart
@@ -9,6 +9,7 @@ const int brokerPort = 1883;
 const String topicPrefix = 'sia';
 
 class AppState with ChangeNotifier {
+  bool onConnectionPage = false;
   Map<String, bool> contacts = <String, bool>{};
   late final MqttServerClient _client;
   bool _brokerConnected = false;
diff --git a/lib/ui.dart b/lib/ui.dart
index 02093eb..e7c0234 100644
--- a/lib/ui.dart
+++ b/lib/ui.dart
@@ -10,7 +10,40 @@ class Sia extends StatelessWidget {
   Widget build(BuildContext context) {
     return ChangeNotifierProvider<AppState>(
       create: (BuildContext context) => AppState(),
-      child: const MaterialApp(home: DevicesPage()),
+      child: MaterialApp(
+        home: Consumer<AppState>(
+          builder: (_, AppState provider, _) {
+            if (provider.onConnectionPage) {
+              return const ConnectionPage();
+            }
+            return const DevicesPage();
+          }
+        ),
+      ),
+    );
+  }
+}
+
+class ConnectionPage extends StatelessWidget {
+  const ConnectionPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text("Connection")),
+      body: const Padding(
+        padding: EdgeInsets.all(16.0),
+        child: TextField(
+          decoration: InputDecoration(
+            labelText: "Server name",
+            hintText: "iot.example.org",
+            border: OutlineInputBorder(),
+          ),
+        ),
+      ),
+      bottomNavigationBar: const SafeArea(
+        child: ConnectionStatus(),
+      ),
     );
   }
 }