Implement basic plug settings page

frontend/lib/constants.dart

@@ -4,4 +4,5 @@ class Constants {
   static const String BASE_URL = "http://127.0.0.1:8062";
 // static const String BASE_URL = "http://smart.gavania.de";
   static const Color MAIN_COLOR = Colors.deepPurple;
+  static const double TABLE_RADIUS = 15;
 }

frontend/lib/devices/plug.dart

@@ -50,10 +50,10 @@ class Plug extends Device {
     const double info_height = 30;
     const double info_width = 60;
     const double x_offset = 0.9;
-    const double radius = 15;
 
     return Table(
-        border: TableBorder(borderRadius: BorderRadius.circular(radius)),
+        border: TableBorder(
+            borderRadius: BorderRadius.circular(Constants.TABLE_RADIUS)),
         defaultVerticalAlignment: TableCellVerticalAlignment.middle,
         columnWidths: const {
           0: FixedColumnWidth(200.0),
@@ -63,7 +63,7 @@ class Plug extends Device {
           TableRow(
               decoration: BoxDecoration(
                 color: Colors.deepPurple[200],
-                borderRadius: BorderRadius.circular(radius),
+                borderRadius: BorderRadius.circular(Constants.TABLE_RADIUS),
               ),
               children: [
                 SizedBox(
@@ -83,7 +83,7 @@ class Plug extends Device {
                                 Navigator.of(context).pushReplacementNamed(
                                     '/plug_settings',
                                     arguments: PlugSettingsArguments(
-                                        device_id, device_descriptor ?? ""));
+                                        device_id, device_descriptor));
                               },
                               icon: const Icon(Icons.settings)),
                         ),

frontend/lib/main.dart

@@ -23,9 +23,7 @@ class MyApp extends StatelessWidget {
         ),
         home: const MyHomePage(title: 'Home Server'),
         routes: <String, WidgetBuilder>{
-          '/home': (BuildContext context) =>
+          '/plug_settings': (BuildContext context) => PlugSettings(),
-              const MyHomePage(title: 'Home Server'),
-          '/plug_settings': (BuildContext context) => const PlugSettings(),
         });
   }
 }

frontend/lib/states/plug_settings.dart

@@ -1,17 +1,19 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_spinkit/flutter_spinkit.dart';
+import 'package:http/http.dart' as http;
 
-import '../devices/devices.dart';
+import '../constants.dart';
 
 class PlugSettingsArguments {
-  final String device_id;
-  final String device_descriptor;
-
   PlugSettingsArguments(this.device_id, this.device_descriptor);
+
+  final String device_id;
+  String? device_descriptor;
 }
 
 class PlugSettings extends StatefulWidget {
-  const PlugSettings({super.key});
+  PlugSettings({super.key});
+
+  String? device_descriptor;
 
   @override
   State<PlugSettings> createState() => _PlugSettingsState();
@@ -23,6 +25,96 @@ class _PlugSettingsState extends State<PlugSettings> {
     final args =
         ModalRoute.of(context)!.settings.arguments! as PlugSettingsArguments;
 
-    throw UnimplementedError();
+    widget.device_descriptor = args.device_descriptor;
+
+    return Scaffold(
+        appBar: AppBar(
+          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+          title: const Text('Plug settings'),
+        ),
+        body: Column(children: [
+          const SizedBox(height: 60),
+          Table(
+            border: TableBorder(
+                borderRadius: BorderRadius.circular(Constants.TABLE_RADIUS)),
+            defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+            columnWidths: const {
+              0: FixedColumnWidth(200.0),
+              1: FixedColumnWidth(200.0),
+            },
+            children: [
+              TableRow(children: [
+                const Text(
+                  'ID',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(fontWeight: FontWeight.bold),
+                ),
+                Text(args.device_id)
+              ]),
+              TableRow(children: [
+                const Text(
+                  'Name',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(fontWeight: FontWeight.bold),
+                ),
+                TextField(
+                  controller: TextEditingController()
+                    ..text = args.device_descriptor ?? '',
+                  decoration: InputDecoration(
+                    border: OutlineInputBorder(
+                        borderRadius:
+                            BorderRadius.circular(Constants.TABLE_RADIUS)),
+                    hintText: 'device descriptor',
+                    isDense: true,
+                  ),
+                  style: const TextStyle(height: 1.0, color: Colors.black),
+                  onChanged: (text) => widget.device_descriptor = text,
+                ),
+              ])
+            ],
+          ),
+          const SizedBox(height: 20),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              ElevatedButton(
+                  onPressed: () {
+                    Navigator.of(context).pushReplacementNamed(
+                      '/',
+                    );
+                  },
+                  style: TextButton.styleFrom(
+                    foregroundColor: Colors.red[900],
+                  ),
+                  child: const Text(
+                    'Back',
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  )),
+              const SizedBox(width: 100),
+              ElevatedButton(
+                  onPressed: () {
+                    http
+                        .post(Uri.parse(
+                            "${Constants.BASE_URL}/device_name/${args.device_id}/${widget.device_descriptor}"))
+                        .then((response) {
+                      if (response.statusCode != 200) {
+                        throw Exception("Failed to fetch devices");
+                      }
+
+                      Navigator.of(context).pushReplacementNamed(
+                        '/',
+                      );
+                    });
+                  },
+                  style: TextButton.styleFrom(
+                    foregroundColor: Colors.green[900],
+                  ),
+                  child: const Text(
+                    'Accept',
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ))
+            ],
+          )
+        ]));
   }
 }