From ff40fc3662c7d7f802f66d974b51ae34256a453c Mon Sep 17 00:00:00 2001 From: hodasemi Date: Fri, 13 Oct 2023 11:14:25 +0200 Subject: [PATCH] Create better plug overview --- frontend/lib/devices.dart | 135 ++++++++++++++++++++++++++------------ frontend/lib/main.dart | 44 +++++++------ 2 files changed, 117 insertions(+), 62 deletions(-) diff --git a/frontend/lib/devices.dart b/frontend/lib/devices.dart index 4ee3c77..5764f3d 100644 --- a/frontend/lib/devices.dart +++ b/frontend/lib/devices.dart @@ -64,7 +64,7 @@ class Category { } class CategoryWidget extends StatelessWidget { - Category category; + final Category category; CategoryWidget({super.key, required this.category}); @@ -75,50 +75,99 @@ class CategoryWidget extends StatelessWidget { @override Widget build(BuildContext context) { - var list = category.devices - .map((device) => TableRow(children: [ - Text( - textAlign: TextAlign.center, - device.device_descriptor ?? device.device_id), - DeviceLed( - device_id: device.device_id, led_state: device.led_state), - DevicePower( - device_id: device.device_id, - power_state: device.power_state, - power_control: device.power_control), - Text(textAlign: TextAlign.center, "${device.power_draw} W") - ])) - .toList(); + final double header_height = 40; + final double info_height = 30; - list.insert( - 0, - const TableRow( - decoration: BoxDecoration( - color: Colors.blueGrey, - ), + return Wrap( + spacing: 25, + runSpacing: 25, + children: category.devices.map((device) { + return Table( + border: TableBorder.all(), + defaultVerticalAlignment: TableCellVerticalAlignment.middle, + columnWidths: const { + 0: FixedColumnWidth(200.0), + 1: FixedColumnWidth(200.0), + }, children: [ - Text( - style: TextStyle(fontWeight: FontWeight.bold), - textAlign: TextAlign.center, - "Name"), - Text( - style: TextStyle(fontWeight: FontWeight.bold), - textAlign: TextAlign.center, - "LED"), - Text( - style: TextStyle(fontWeight: FontWeight.bold), - textAlign: TextAlign.center, - "Power"), - Text( - style: TextStyle(fontWeight: FontWeight.bold), - textAlign: TextAlign.center, - "Power Draw"), - ])); - - return Table( - border: TableBorder.all(), - defaultVerticalAlignment: TableCellVerticalAlignment.middle, - children: list); + TableRow( + decoration: const BoxDecoration( + color: Colors.blueGrey, + ), + children: [ + SizedBox( + height: header_height, + child: Stack( + children: [ + Align( + child: Text( + textAlign: TextAlign.center, + device.device_descriptor ?? + device.device_id)), + Align( + alignment: Alignment.centerRight, + child: IconButton( + onPressed: () {}, + icon: const Icon(Icons.settings)), + ), + ], + )) + ]), + TableRow(children: [ + SizedBox( + height: info_height, + child: Stack(children: [ + const Align( + alignment: Alignment(-0.9, 0.0), + child: Text( + style: TextStyle(fontWeight: FontWeight.bold), + textAlign: TextAlign.center, + "LED")), + Align( + alignment: const Alignment(0.5, 0.0), + child: DeviceLed( + device_id: device.device_id, + led_state: device.led_state)), + ])) + ]), + TableRow(children: [ + SizedBox( + height: info_height, + child: Stack(children: [ + const Align( + alignment: Alignment(-0.9, 0.0), + child: Text( + style: TextStyle(fontWeight: FontWeight.bold), + textAlign: TextAlign.center, + "Power")), + Align( + alignment: const Alignment(0.4, 0.0), + child: DevicePower( + device_id: device.device_id, + power_state: device.power_state, + power_control: device.power_control)), + ])) + ]), + TableRow(children: [ + SizedBox( + height: info_height, + child: Stack(children: [ + const Align( + alignment: Alignment(-0.9, 0.0), + child: Text( + style: TextStyle(fontWeight: FontWeight.bold), + textAlign: TextAlign.center, + "Power Draw")), + Align( + alignment: const Alignment(0.5, 0.0), + child: Text( + textAlign: TextAlign.center, + "${device.power_draw} W")) + ])) + ]) + ]); + }).toList(), + ); } } diff --git a/frontend/lib/main.dart b/frontend/lib/main.dart index 9092d45..7429e9c 100644 --- a/frontend/lib/main.dart +++ b/frontend/lib/main.dart @@ -64,26 +64,32 @@ class _MyHomePageState extends State { title: Text(widget.title), ), body: Column(children: [ - ExpansionPanelList( - expansionCallback: (int index, bool isExpanded) { - setState(() { - expanded[index] = isExpanded; - }); - }, - children: data.asMap().entries.map( - (category) { - final CategoryWidget widget = - CategoryWidget(category: category.value); + Container( + margin: const EdgeInsets.all(15.0), + padding: const EdgeInsets.all(15.0), + child: ExpansionPanelList( + expansionCallback: (int index, bool expand) { + setState(() { + expanded[index] = expand; + }); + }, + children: data.asMap().entries.map( + (category) { + final CategoryWidget widget = + CategoryWidget(category: category.value); - return ExpansionPanel( - headerBuilder: - (BuildContext context, bool isExpanded) { - return ListTile(title: Text(widget.Name())); - }, - body: widget, - isExpanded: expanded[category.key]); - }, - ).toList()) + return ExpansionPanel( + headerBuilder: + (BuildContext context, bool isExpanded) { + return ListTile(title: Text(widget.Name())); + }, + body: widget, + isExpanded: expanded[category.key], + backgroundColor: Colors.grey[200], + canTapOnHeader: true, + ); + }, + ).toList())) ])); }); }