Create better plug overview

This commit is contained in:
hodasemi 2023-10-13 11:14:25 +02:00
parent 7639eb7bc0
commit ff40fc3662
2 changed files with 117 additions and 62 deletions

View file

@ -64,7 +64,7 @@ class Category {
} }
class CategoryWidget extends StatelessWidget { class CategoryWidget extends StatelessWidget {
Category category; final Category category;
CategoryWidget({super.key, required this.category}); CategoryWidget({super.key, required this.category});
@ -75,50 +75,99 @@ class CategoryWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var list = category.devices final double header_height = 40;
.map((device) => TableRow(children: [ final double info_height = 30;
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();
list.insert( return Wrap(
0, spacing: 25,
const TableRow( runSpacing: 25,
decoration: BoxDecoration( children: category.devices.map((device) {
color: Colors.blueGrey, return Table(
), border: TableBorder.all(),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
columnWidths: const {
0: FixedColumnWidth(200.0),
1: FixedColumnWidth(200.0),
},
children: [ children: [
Text( TableRow(
style: TextStyle(fontWeight: FontWeight.bold), decoration: const BoxDecoration(
textAlign: TextAlign.center, color: Colors.blueGrey,
"Name"), ),
Text( children: [
style: TextStyle(fontWeight: FontWeight.bold), SizedBox(
textAlign: TextAlign.center, height: header_height,
"LED"), child: Stack(
Text( children: [
style: TextStyle(fontWeight: FontWeight.bold), Align(
textAlign: TextAlign.center, child: Text(
"Power"), textAlign: TextAlign.center,
Text( device.device_descriptor ??
style: TextStyle(fontWeight: FontWeight.bold), device.device_id)),
textAlign: TextAlign.center, Align(
"Power Draw"), alignment: Alignment.centerRight,
])); child: IconButton(
onPressed: () {},
return Table( icon: const Icon(Icons.settings)),
border: TableBorder.all(), ),
defaultVerticalAlignment: TableCellVerticalAlignment.middle, ],
children: list); ))
]),
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(),
);
} }
} }

View file

@ -64,26 +64,32 @@ class _MyHomePageState extends State<MyHomePage> {
title: Text(widget.title), title: Text(widget.title),
), ),
body: Column(children: [ body: Column(children: [
ExpansionPanelList( Container(
expansionCallback: (int index, bool isExpanded) { margin: const EdgeInsets.all(15.0),
setState(() { padding: const EdgeInsets.all(15.0),
expanded[index] = isExpanded; child: ExpansionPanelList(
}); expansionCallback: (int index, bool expand) {
}, setState(() {
children: data.asMap().entries.map( expanded[index] = expand;
(category) { });
final CategoryWidget widget = },
CategoryWidget(category: category.value); children: data.asMap().entries.map(
(category) {
final CategoryWidget widget =
CategoryWidget(category: category.value);
return ExpansionPanel( return ExpansionPanel(
headerBuilder: headerBuilder:
(BuildContext context, bool isExpanded) { (BuildContext context, bool isExpanded) {
return ListTile(title: Text(widget.Name())); return ListTile(title: Text(widget.Name()));
}, },
body: widget, body: widget,
isExpanded: expanded[category.key]); isExpanded: expanded[category.key],
}, backgroundColor: Colors.grey[200],
).toList()) canTapOnHeader: true,
);
},
).toList()))
])); ]));
}); });
} }