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 {
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(),
);
}
}

View file

@ -64,26 +64,32 @@ class _MyHomePageState extends State<MyHomePage> {
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()))
]));
});
}