refactor(ui): Update some UI and fix some bugs
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user