1 files changed, 125 insertions, 28 deletions
diff --git a/lib/ui.dart b/lib/ui.dart
index b9f82d0..9603562 100644
--- a/lib/ui.dart
+++ b/lib/ui.dart
@@ -3,27 +3,96 @@ import 'package:provider/provider.dart';
 
 import 'data.dart';
 
-class UI extends StatelessWidget {
-  const UI({super.key});
+class Sia extends StatelessWidget {
+  const Sia({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      home: Scaffold(
-        appBar: AppBar(title: const Text("Contacts")),
-        body: const Column(
-          children: <Widget>[
-            Expanded(child: ContactList()),
-          ],
-        ),
-        bottomNavigationBar: const SafeArea(
-          child: ConnectionStatus(),
+    return ChangeNotifierProvider<AppState>(
+      create: (BuildContext context) => AppState(),
+      child: MaterialApp(
+        home: Consumer<AppState>(
+          builder: (_, AppState provider, _) {
+            if (provider.state == MachineState.init) {
+              return const ConnectionPage();
+            }
+            return const DevicesPage();
+          }
         ),
       ),
     );
   }
 }
 
+class ConnectionPage extends StatefulWidget {
+  const ConnectionPage({super.key});
+
+  @override
+  State<ConnectionPage> createState() => _ConnectionPageState();
+}
+
+class _ConnectionPageState extends State<ConnectionPage> {
+  late TextEditingController controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    final AppState provider = context.read<AppState>();
+    controller = TextEditingController(text: provider.fqdn);
+
+    controller.addListener(() {
+      provider.fqdn = controller.text;
+    });
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppState>(
+      builder: (_, AppState state, _) {
+        return Scaffold(
+          appBar: AppBar(title: const Text("Connection")),
+          body: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: TextField(
+              controller: controller,
+              decoration: const InputDecoration(
+                labelText: "Server name",
+                hintText: "iot.example.org",
+                border: OutlineInputBorder(),
+              ),
+            ),
+          ),
+          bottomNavigationBar: const ConnectionStatus(),
+        );
+      }
+    );
+  }
+}
+
+class DevicesPage extends StatelessWidget {
+  const DevicesPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text("Contacts")),
+      body: const Column(
+        children: <Widget>[
+          Expanded(child: ContactList()),
+        ],
+      ),
+      bottomNavigationBar: const ConnectionStatus(),
+    );
+  }
+}
+
 class ContactList extends StatelessWidget {
   const ContactList({super.key});
 
@@ -56,24 +125,52 @@ class ConnectionStatus extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return  Consumer<AppState>(
-      builder: (BuildContext context, AppState state, Widget? child) {
-        Icon icon;
-        Text text;
+    return  SafeArea(
+      child: Consumer<AppState>(
+        builder: (BuildContext context, AppState state, Widget? child) {
+          Icon icon = const Icon(Icons.cloud_off, color: Colors.grey);
+          Text text = const Text('Disconnected');
 
-        if (state.brokerConnected && state.serverConnected) {
-          icon = const Icon(Icons.cloud, color: Colors.green);
-          text = const Text('Connected');
-        } else if (state.brokerConnected && !state.serverConnected) {
-          icon = const Icon(Icons.cloud_off, color: Colors.orange);
-          text = const Text('Connection issue');
-        } else {
-          icon = const Icon(Icons.cloud_off, color: Colors.red);
-          text = const Text('Disconnected');
-        }
+          switch (state.state) {
+            case MachineState.init:
+              icon = const Icon(Icons.cloud_off, color: Colors.grey);
+              text = const Text('Off');
+            case MachineState.disconnected:
+              icon = const Icon(Icons.cloud_off, color: Colors.red);
+              text = const Text('Disconnected');
+            case MachineState.unreachable:
+              icon = const Icon(Icons.cloud_off, color: Colors.orange);
+              text = const Text('Unreachable');
+            case MachineState.reachable:
+              icon = const Icon(Icons.cloud, color: Colors.green);
+              text = const Text('Connected');
+          }
 
-        return ListTile(leading: icon, title: text);
-      },
+          MachineEvent event = MachineEvent.disconnect;
+          String action = 'disconnect';
+          if (state.state == MachineState.init) {
+            event = MachineEvent.connect;
+            action = 'connect';
+          }
+
+          return Row(
+            children: <Widget>[
+              Expanded(
+                child: ListTile(
+                  leading: icon,
+                  title: text,
+                  trailing: ElevatedButton(
+                    onPressed: () {
+                      state.process(event);
+                    },
+                    child: Text(action),
+                  ),
+                ),
+              ),
+            ],
+          );
+        },
+      ),
     );
   }
 }