refactor(ui): Update some UI and fix some bugs

This commit is contained in:
anhtunz
2025-01-11 16:43:19 +07:00
parent c2c685da86
commit a17831d0ac
16 changed files with 688 additions and 464 deletions

View File

@@ -1,5 +1,8 @@
import 'dart:developer';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:sfm_app/bloc/devices_manager_bloc.dart';
import 'package:sfm_app/feature/devices/device_model.dart';
import 'package:sfm_app/product/extention/context_extention.dart';
import 'package:sfm_app/product/services/language_services.dart';
@@ -7,15 +10,17 @@ import 'package:sfm_app/product/services/language_services.dart';
import '../constant/app/app_constants.dart';
class SharedPieChart extends StatelessWidget {
const SharedPieChart({
super.key,
required this.deviceByState,
});
const SharedPieChart(
{super.key,
required this.deviceByState,
required this.devicesManagerBloc});
final Map<String, List<Device>> deviceByState;
final DevicesManagerBloc devicesManagerBloc;
@override
Widget build(BuildContext context) {
int touchedIndex = -1;
TextStyle titleStyle = const TextStyle(
color: Colors.white,
fontSize: 20,
@@ -31,56 +36,98 @@ class SharedPieChart extends StatelessWidget {
deviceByState[ApplicationConstants.INPROGRESS_STATE]?.length ?? 0;
int errorCount =
deviceByState[ApplicationConstants.ERROR_STATE]?.length ?? 0;
return Padding(
padding: context.paddingLowHorizontal,
return AspectRatio(
aspectRatio: 1.5,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: context.dynamicWidth(0.5),
height: context.dynamicHeight(0.3),
padding: const EdgeInsets.all(10),
child: PieChart(
PieChartData(
sections: [
PieChartSectionData(
color: Colors.grey,
value: offlineCount.toDouble(),
title: offlineCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
children: <Widget>[
const SizedBox(
height: 18,
),
Expanded(
child: AspectRatio(
aspectRatio: 1,
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
touchCallback: (FlTouchEvent event, pieTouchResponse) {
if (!event.isInterestedForInteractions ||
pieTouchResponse == null ||
pieTouchResponse.touchedSection == null) {
touchedIndex = -1;
return;
}
int newTouchedIndex =
pieTouchResponse.touchedSection!.touchedSectionIndex;
// Chỉ gọi updateDevicesOnTapPieChart nếu touchedIndex thay đổi
if (newTouchedIndex != touchedIndex) {
touchedIndex = newTouchedIndex;
log("TouchedIndex: $touchedIndex");
log("Event: ${event.isInterestedForInteractions}");
Future.delayed(
context.lowDuration,
() => updateDevicesOnTapPieChart(newTouchedIndex),
);
}
// touchedIndex =
// pieTouchResponse.touchedSection!.touchedSectionIndex;
// // log("TouchedIndex: $touchedIndex");
// // log("Event: ${event.isInterestedForInteractions}");
// // int currentTouchedIndex = touchedIndex;
// if (currentTouchedIndex != touchedIndex) {
// touchedIndex = currentTouchedIndex;
// log("TouchedIndex: $touchedIndex");
// log("Event: ${event.isInterestedForInteractions}");
// Future.delayed(
// context.lowDuration,
// () => updateDevicesOnTapPieChart(touchedIndex),
// );
// }
},
),
PieChartSectionData(
color: Colors.green,
value: normalCount.toDouble(),
title: normalCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.red,
value: warningCount.toDouble(),
title: warningCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.yellow,
value: inProgressCount.toDouble(),
title: inProgressCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.black, // Có thể thêm màu cho trạng thái lỗi
value: errorCount.toDouble(),
title: errorCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
],
centerSpaceRadius: context.dynamicWidth(0.1),
sectionsSpace: 2,
sections: [
PieChartSectionData(
color: Colors.grey,
value: offlineCount.toDouble(),
title: offlineCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.green,
value: normalCount.toDouble(),
title: normalCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.red,
value: warningCount.toDouble(),
title: warningCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.yellow,
value: inProgressCount.toDouble(),
title: inProgressCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
PieChartSectionData(
color: Colors.black, // Có thể thêm màu cho trạng thái lỗi
value: errorCount.toDouble(),
title: errorCount.toString(),
radius: context.dynamicWidth(0.2),
titleStyle: titleStyle,
),
],
centerSpaceRadius: context.dynamicWidth(0.05),
sectionsSpace: 2,
),
),
),
),
@@ -88,52 +135,88 @@ class SharedPieChart extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Indicator(
color: Colors.grey,
text: appLocalization(context).inactive_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
Indicator(
color: Colors.green,
text: appLocalization(context).active_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
Indicator(
color: Colors.red,
text: appLocalization(context).warning_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
Indicator(
color: Colors.yellow,
text: appLocalization(context).in_progress_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
Indicator(
color: Colors.black,
text: appLocalization(context).error_message_uppercase,
isSquare: true,
),
// const SizedBox(
// height: 18,
// ),
if (offlineCount != 0)
Column(
children: [
Indicator(
color: Colors.grey,
text: appLocalization(context).inactive_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
],
),
if (normalCount != 0)
Column(
children: [
Indicator(
color: Colors.green,
text: appLocalization(context).active_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
],
),
if (warningCount != 0)
Column(
children: [
Indicator(
color: Colors.red,
text: appLocalization(context).warning_devices_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
],
),
if (inProgressCount != 0)
Column(
children: [
Indicator(
color: Colors.yellow,
text: appLocalization(context).in_progress_message,
isSquare: true,
),
SizedBox(
height: context.lowValue,
),
],
),
if (errorCount != 0)
Indicator(
color: Colors.black,
text: appLocalization(context).error_message_uppercase,
isSquare: true,
),
],
),
const SizedBox(
width: 10,
),
],
),
);
}
void updateDevicesOnTapPieChart(int touchedIndex) {
log("Update PieChart On Tap Function");
if (touchedIndex == 0) {
devicesManagerBloc.getDeviceByState(-1);
} else if (touchedIndex == 1) {
devicesManagerBloc.getDeviceByState(0);
} else if (touchedIndex == 2) {
devicesManagerBloc.getDeviceByState(1);
} else if (touchedIndex == 3) {
devicesManagerBloc.getDeviceByState(2);
} else {
devicesManagerBloc.getDeviceByState(-2);
}
}
}
class Indicator extends StatelessWidget {