refactor(ui): Update some UI and fix some bugs
This commit is contained in:
anhtunz
@@ -29,17 +29,17 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
|
||||
APIServices apiServices = APIServices();
|
||||
List<Device> devices = [];
|
||||
Timer? getAllDevicesTimer;
|
||||
|
||||
List<Widget> tags = [];
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
devicesManagerBloc = BlocProvider.of(context);
|
||||
getUserRole();
|
||||
// devicesManagerBloc.getDevice();
|
||||
// getAllOwnerDevices();
|
||||
// const duration = Duration(seconds: 10);
|
||||
// getAllDevicesTimer =
|
||||
// Timer.periodic(duration, (Timer t) => devicesManagerBloc.getDevice());
|
||||
const duration = Duration(seconds: 10);
|
||||
getAllDevicesTimer = Timer.periodic(
|
||||
duration,
|
||||
(Timer t) => devicesManagerBloc.getDeviceByState(-2),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
@@ -52,144 +52,179 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
// backgroundColor: Colors.grey.withValues(alpha: 0.6),
|
||||
body: SafeArea(
|
||||
child: StreamBuilder<List<Device>>(
|
||||
stream: devicesManagerBloc.streamAllDevices,
|
||||
initialData: devices,
|
||||
builder: (context, allDeviceSnapshot) {
|
||||
if (allDeviceSnapshot.data?.isEmpty ?? devices.isEmpty) {
|
||||
devicesManagerBloc.getDevice();
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
} else {
|
||||
return SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
StreamBuilder<String>(
|
||||
stream: devicesManagerBloc.streamUserRole,
|
||||
initialData: role,
|
||||
builder: (context, roleSnapshot) {
|
||||
return PaginatedDataTable(
|
||||
header: Center(
|
||||
child: Text(
|
||||
appLocalization(context)
|
||||
.paginated_data_table_title,
|
||||
style: context.titleLargeTextStyle,
|
||||
body: StreamBuilder<List<int>>(
|
||||
stream: devicesManagerBloc.streamTagStates,
|
||||
builder: (context, tagSnapshot) {
|
||||
return SafeArea(
|
||||
child: StreamBuilder<List<Device>>(
|
||||
stream: devicesManagerBloc.streamAllDevices,
|
||||
initialData: devices,
|
||||
builder: (context, allDeviceSnapshot) {
|
||||
if (allDeviceSnapshot.data?.isEmpty ?? devices.isEmpty) {
|
||||
devicesManagerBloc
|
||||
.getDeviceByState(tagSnapshot.data?[0] ?? -2);
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
} else {
|
||||
if (tagSnapshot.data!.isNotEmpty) {}
|
||||
return SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
if (tagSnapshot.hasData &&
|
||||
tagSnapshot.data!.isNotEmpty &&
|
||||
tagSnapshot.data![0] != -2)
|
||||
TagState(
|
||||
state: tagSnapshot.data![0],
|
||||
devicesManagerBloc: devicesManagerBloc,
|
||||
),
|
||||
),
|
||||
columns: [
|
||||
if (roleSnapshot.data == RoleEnums.ADMIN.name ||
|
||||
roleSnapshot.data == RoleEnums.USER.name)
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_action),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceName),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceStatus),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceBaterry),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceSignal),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceTemperature),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceHump),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_devicePower),
|
||||
),
|
||||
),
|
||||
],
|
||||
onPageChanged: (int pageIndex) {
|
||||
// log('Chuyen page: $pageIndex');
|
||||
},
|
||||
rowsPerPage: 5,
|
||||
actions: [
|
||||
if (roleSnapshot.data == RoleEnums.USER.name ||
|
||||
roleSnapshot.data == RoleEnums.ADMIN.name)
|
||||
IconButton(
|
||||
style: ButtonStyle(
|
||||
backgroundColor:
|
||||
WidgetStateProperty.all<Color>(
|
||||
Colors.green),
|
||||
iconColor: WidgetStateProperty.all<Color>(
|
||||
Colors.white)),
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context)
|
||||
.clearSnackBars();
|
||||
addNewDevice(
|
||||
context, roleSnapshot.data ?? role);
|
||||
SizedBox(height: context.lowValue),
|
||||
StreamBuilder<String>(
|
||||
stream: devicesManagerBloc.streamUserRole,
|
||||
initialData: role,
|
||||
builder: (context, roleSnapshot) {
|
||||
return CardTheme(
|
||||
color: Theme.of(context).colorScheme.onPrimary,
|
||||
shadowColor:
|
||||
Theme.of(context).colorScheme.onPrimary,
|
||||
child: PaginatedDataTable(
|
||||
headingRowHeight: 30,
|
||||
columnSpacing: 30,
|
||||
horizontalMargin: 10,
|
||||
header: Center(
|
||||
child: Text(
|
||||
appLocalization(context)
|
||||
.paginated_data_table_title,
|
||||
style: context.headlineMediumTextStyle,
|
||||
),
|
||||
),
|
||||
columns: [
|
||||
if (roleSnapshot.data ==
|
||||
RoleEnums.ADMIN.name ||
|
||||
roleSnapshot.data ==
|
||||
RoleEnums.USER.name)
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceName),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceStatus),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceBaterry),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceSignal),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceTemperature),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_deviceHump),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_devicePower),
|
||||
),
|
||||
),
|
||||
DataColumn(
|
||||
label: Center(
|
||||
child: Text(appLocalization(context)
|
||||
.paginated_data_table_column_action),
|
||||
),
|
||||
),
|
||||
],
|
||||
onPageChanged: (int pageIndex) {
|
||||
// log('Chuyen page: $pageIndex');
|
||||
},
|
||||
icon: IconConstants.instance
|
||||
.getMaterialIcon(Icons.add))
|
||||
],
|
||||
source: DeviceSource(
|
||||
devices: allDeviceSnapshot.data ?? devices,
|
||||
context: context,
|
||||
devicesBloc: devicesManagerBloc,
|
||||
role: role,
|
||||
rowsPerPage:
|
||||
(allDeviceSnapshot.data?.length ?? 0) < 6
|
||||
? (allDeviceSnapshot.data?.length ??
|
||||
0)
|
||||
: 5,
|
||||
actions: [
|
||||
if (roleSnapshot.data ==
|
||||
RoleEnums.USER.name ||
|
||||
roleSnapshot.data ==
|
||||
RoleEnums.ADMIN.name)
|
||||
IconButton(
|
||||
style: ButtonStyle(
|
||||
backgroundColor:
|
||||
WidgetStateProperty.all<Color>(
|
||||
Colors.green),
|
||||
iconColor:
|
||||
WidgetStateProperty.all<Color>(
|
||||
Colors.white,
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
ScaffoldMessenger.of(context)
|
||||
.clearSnackBars();
|
||||
addNewDevice(context,
|
||||
roleSnapshot.data ?? role);
|
||||
},
|
||||
icon: IconConstants.instance
|
||||
.getMaterialIcon(Icons.add))
|
||||
],
|
||||
source: DeviceSource(
|
||||
devices: allDeviceSnapshot.data ?? devices,
|
||||
context: context,
|
||||
devicesBloc: devicesManagerBloc,
|
||||
role: role,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
SizedBox(height: context.lowValue),
|
||||
Text(
|
||||
appLocalization(context).overview_message,
|
||||
style: const TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
SizedBox(height: context.lowValue),
|
||||
Text(
|
||||
appLocalization(context).overview_message,
|
||||
style: const TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
StreamBuilder<Map<String, List<Device>>>(
|
||||
stream: devicesManagerBloc.streamDeviceByState,
|
||||
builder: (context, devicesByStateSnapshot) {
|
||||
if (devicesByStateSnapshot.data == null) {
|
||||
devicesManagerBloc.getDeviceByState(
|
||||
tagSnapshot.data?[0] ?? -2);
|
||||
return const Center(
|
||||
child: CircularProgressIndicator());
|
||||
} else {
|
||||
return SharedPieChart(
|
||||
deviceByState:
|
||||
devicesByStateSnapshot.data ?? {},
|
||||
devicesManagerBloc: devicesManagerBloc,
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: context.lowValue),
|
||||
StreamBuilder<Map<String, List<Device>>>(
|
||||
stream: devicesManagerBloc.streamDeviceByState,
|
||||
builder: (context, devicesByStateSnapshot) {
|
||||
if (devicesByStateSnapshot.data == null) {
|
||||
devicesManagerBloc.getDevice();
|
||||
return const Center(
|
||||
child: CircularProgressIndicator());
|
||||
} else {
|
||||
return SharedPieChart(
|
||||
deviceByState: devicesByStateSnapshot.data ?? {});
|
||||
}
|
||||
},
|
||||
),
|
||||
SizedBox(height: context.mediumValue),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -205,11 +240,13 @@ class DeviceSource extends DataTableSource {
|
||||
List<Device> devices;
|
||||
final DevicesManagerBloc devicesBloc;
|
||||
final BuildContext context;
|
||||
DeviceSource(
|
||||
{required this.devices,
|
||||
required this.context,
|
||||
required this.devicesBloc,
|
||||
required this.role});
|
||||
|
||||
DeviceSource({
|
||||
required this.devices,
|
||||
required this.context,
|
||||
required this.devicesBloc,
|
||||
required this.role,
|
||||
});
|
||||
@override
|
||||
DataRow? getRow(int index) {
|
||||
if (index >= devices.length) {
|
||||
@@ -221,88 +258,72 @@ class DeviceSource extends DataTableSource {
|
||||
String deviceState =
|
||||
DeviceUtils.instance.checkStateDevice(context, device.state!);
|
||||
return DataRow.byIndex(
|
||||
// color: getTableRowColor(device.state!),
|
||||
// color: WidgetStateProperty.all(rowColor),
|
||||
index: index,
|
||||
cells: [
|
||||
if (role == RoleEnums.USER.name || role == RoleEnums.ADMIN.name)
|
||||
DataCell(
|
||||
Center(
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
// style: ButtonStyle(),
|
||||
hoverColor: Colors.black,
|
||||
onPressed: () {
|
||||
context.pushNamed(AppRoutes.DEVICE_UPDATE.name,
|
||||
pathParameters: {'thingID': device.thingId!});
|
||||
},
|
||||
icon: const Icon(Icons.build, color: Colors.blue)),
|
||||
IconButton(
|
||||
onPressed: () async {
|
||||
handleDeleteDevice(context, device.thingId!, role);
|
||||
},
|
||||
icon: const Icon(Icons.delete, color: Colors.red)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(device.name!,
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!))), onTap: () {
|
||||
context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
|
||||
pathParameters: {'thingID': device.thingId!});
|
||||
}),
|
||||
DataCell(
|
||||
Text(device.name!,
|
||||
Text(deviceState,
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!))), onTap: () {
|
||||
// log(device.thingId.toString());
|
||||
context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
|
||||
pathParameters: {'thingID': device.thingId!});
|
||||
}),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Text(deviceState,
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!)))), onTap: () {
|
||||
// log(device.thingId.toString());
|
||||
context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
|
||||
pathParameters: {'thingID': device.thingId!});
|
||||
}),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Center(
|
||||
child: Text(sensorMap['sensorBattery'] + "%",
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!))))),
|
||||
Text(sensorMap['sensorBattery'] + "%",
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance.getTableRowColor(device.state!))),
|
||||
onTap: () => context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
|
||||
pathParameters: {'thingID': device.thingId!}),
|
||||
),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Center(
|
||||
child: Text(sensorMap['sensorCsq'],
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!))))),
|
||||
Text(sensorMap['sensorCsq'],
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance.getTableRowColor(device.state!))),
|
||||
),
|
||||
DataCell(
|
||||
Text("${sensorMap['sensorTemp']}°C",
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance.getTableRowColor(device.state!))),
|
||||
),
|
||||
DataCell(
|
||||
Text("${sensorMap['sensorHum']}%",
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance.getTableRowColor(device.state!))),
|
||||
),
|
||||
DataCell(
|
||||
Text("${sensorMap['sensorVolt']}V",
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance.getTableRowColor(device.state!))),
|
||||
),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Text(sensorMap['sensorTemp'],
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!)))),
|
||||
),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Text(sensorMap['sensorHum'],
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!)))),
|
||||
),
|
||||
DataCell(
|
||||
Center(
|
||||
child: Text(sensorMap['sensorVolt'],
|
||||
style: TextStyle(
|
||||
color: DeviceUtils.instance
|
||||
.getTableRowColor(device.state!)))),
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
hoverColor: Colors.black,
|
||||
onPressed: () {
|
||||
context.pushNamed(AppRoutes.DEVICE_UPDATE.name,
|
||||
pathParameters: {'thingID': device.thingId!});
|
||||
},
|
||||
icon: const Icon(Icons.build, color: Colors.blue)),
|
||||
IconButton(
|
||||
onPressed: () async {
|
||||
handleDeleteDevice(context, device.thingId!, role);
|
||||
},
|
||||
icon: const Icon(Icons.delete, color: Colors.red)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
@@ -317,3 +338,44 @@ class DeviceSource extends DataTableSource {
|
||||
@override
|
||||
int get selectedRowCount => 0;
|
||||
}
|
||||
|
||||
class TagState extends StatelessWidget {
|
||||
const TagState({
|
||||
super.key,
|
||||
required this.state,
|
||||
required this.devicesManagerBloc,
|
||||
});
|
||||
|
||||
final int state;
|
||||
final DevicesManagerBloc devicesManagerBloc;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: EdgeInsets.all(context.lowValue),
|
||||
height: context.mediumValue,
|
||||
width: context.dynamicWidth(0.35),
|
||||
decoration: BoxDecoration(
|
||||
color: DeviceUtils.instance.getTableRowColor(state),
|
||||
borderRadius: BorderRadius.circular(context.mediumValue),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
DeviceUtils.instance.checkStateDevice(context, state),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
devicesManagerBloc.getDeviceByState(-2);
|
||||
},
|
||||
child: const Icon(
|
||||
Icons.close,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user