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

@@ -92,27 +92,41 @@ class _BellScreenState extends State<BellScreen> {
},
child: Column(
children: [
ListTile(
title: Text(
getBellEvent(
context,
bellSnapshot.data![index]
.itemDetail!.sourceName!,
bellSnapshot
.data![index].eventType!,
bellSnapshot.data![index]
.itemDetail!.targetName!,
),
overflow: TextOverflow.ellipsis,
maxLines: 3,
style:
const TextStyle(fontSize: 15),
Container(
decoration: BoxDecoration(
color: bellSnapshot
.data![index].status! ==
1
? Theme.of(context)
.appBarTheme
.backgroundColor
: Theme.of(context)
.colorScheme
.outlineVariant,
),
trailing: Text(
timeAgo(
context,
bellSnapshot
.data![index].createdAt!,
child: ListTile(
// style: ListTileS,
title: Text(
getBellEvent(
context,
bellSnapshot.data![index]
.itemDetail!.sourceName!,
bellSnapshot
.data![index].eventType!,
bellSnapshot.data![index]
.itemDetail!.targetName!,
),
overflow: TextOverflow.ellipsis,
maxLines: 3,
style:
const TextStyle(fontSize: 15),
),
trailing: Text(
timeAgo(
context,
bellSnapshot
.data![index].createdAt!,
),
),
),
),
@@ -176,26 +190,6 @@ class _BellScreenState extends State<BellScreen> {
check = false;
}
bool checkStatus(List<BellItems> bells) {
for (var bell in bells) {
if (bell.status == 0) {
return false;
}
}
return true;
}
Future<Color> colorByTheme(int status) async {
String theme = await apiServices.checkTheme();
if (theme == AppThemes.LIGHT.name && status == 1) {
return Colors.white;
} else if (theme == AppThemes.DARK.name && status == 1) {
return Colors.black;
} else {
return const Color.fromARGB(255, 90, 175, 214);
}
}
String timeAgo(BuildContext context, DateTime dateTime) {
final duration = DateTime.now().difference(dateTime);

View File

@@ -1,6 +1,7 @@
// ignore_for_file: use_build_context_synchronously
import 'package:flutter/material.dart';
import 'package:sfm_app/product/shared/shared_snack_bar.dart';
import '../../product/utils/response_status_utils.dart';
import '../../product/constant/enums/role_enums.dart';
import '../../product/services/api_services.dart';
@@ -22,8 +23,11 @@ addNewDevice(BuildContext context, String role) async {
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('${appLocalization(context).add_device_title}: ',
style: context.titleMediumTextStyle),
Text(
'${appLocalization(context).add_device_title}: ',
style:
const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Container(
alignment: Alignment.centerRight,
child: IconButton(
@@ -57,15 +61,28 @@ addNewDevice(BuildContext context, String role) async {
appLocalization(context).input_name_device_hintText),
)
: const SizedBox.shrink(),
SizedBox(
height: context.lowValue,
),
Center(
child: TextButton(
onPressed: () async {
String extID = extIDController.text;
String deviceName = deviceNameController.text;
child: FilledButton.tonal(
onPressed: () async {
String extID = extIDController.text;
String deviceName = deviceNameController.text;
if (extID == "") {
showNoIconTopSnackBar(
context,
appLocalization(context).notification_enter_all_inf,
Colors.orange,
Colors.white);
ScaffoldMessenger.of(context).hideCurrentSnackBar();
} else {
addDevices(context, role, extID, deviceName);
ScaffoldMessenger.of(context).hideCurrentSnackBar();
},
child: Text(appLocalization(context).add_button_content)),
}
},
child: Text(appLocalization(context).add_button_content),
),
)
],
),

View File

@@ -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,
),
),
],
),
);
}
}

View File

@@ -47,8 +47,8 @@ class _HomeScreenState extends State<HomeScreen> {
void initState() {
super.initState();
homeBloc = BlocProvider.of(context);
const duration = Duration(seconds: 20);
getOwnerAndJoinedDevices();
const duration = Duration(seconds: 20);
getAllDevicesTimer =
Timer.periodic(duration, (Timer t) => getOwnerAndJoinedDevices());
}

View File

@@ -8,6 +8,8 @@ import 'package:go_router/go_router.dart';
// import 'package:persistent_bottom_nav_bar_v2/persistent-tab-view.dart';
import 'package:badges/badges.dart' as badges;
import 'package:persistent_bottom_nav_bar/persistent_bottom_nav_bar.dart';
import '../settings/profile/profile_model.dart';
import '../../product/extention/context_extention.dart';
import '../../bloc/home_bloc.dart';
import '../../product/constant/app/app_constants.dart';
import '../../product/constant/enums/app_route_enums.dart';
@@ -75,6 +77,7 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
WidgetsBinding.instance.addObserver(this);
initialCheck();
getBellNotification();
mainBloc.getUserProfile();
}
@override
@@ -176,36 +179,21 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
builder: (context, themeModeSnapshot) {
return Scaffold(
appBar: AppBar(
title: StreamBuilder<User>(
stream: mainBloc.streamUserProfile,
builder: (context, userSnapshot) {
return Row(
children: [
IconConstants.instance.getMaterialIcon(Icons.person),
SizedBox(
width: context.lowValue,
),
Text(userSnapshot.data?.name ?? "")
],
);
}),
backgroundColor: Colors.transparent,
actions: [
// LightDarkSwitch(
// value: !isLight,
// onChanged: (value) {
// themeNotifier.changeTheme();
// isLight = !isLight;
// },
// ),
// SizedBox(
// width: context.lowValue,
// ),
// StreamBuilder<bool>(
// stream: mainBloc.streamIsVNIcon,
// builder: (context, isVNSnapshot) {
// return LanguageSwitch(
// value: isVNSnapshot.data ?? isVN,
// onChanged: (value) async {
// Locale locale = await LanguageServices().setLocale(isVN
// ? LanguageConstants.ENGLISH
// : LanguageConstants.VIETNAM);
// MyApp.setLocale(context, locale);
// isVN = !isVN;
// mainBloc.sinkIsVNIcon.add(isVN);
// },
// );
// }),
// SizedBox(
// width: context.lowValue,
// ),
IconButton(
onPressed: () async {
ThemeData newTheme = await ThemeServices().changeTheme(
@@ -337,11 +325,9 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
controller: controller,
screens: _buildScreens(),
items: _navBarsItems(),
// confineInSafeArea: true,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: true,
// hideNavigationBarWhenKeyboardShows: true,
backgroundColor:
themeModeSnapshot.data! ? Colors.white : Colors.black,
decoration: NavBarDecoration(
@@ -349,17 +335,18 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
colorBehindNavBar:
themeModeSnapshot.data! ? Colors.white : Colors.black,
),
// popAllScreensOnTapOfSelectedTab: true,
// itemAnimationProperties: const ItemAnimationProperties(
// duration: Duration(milliseconds: 200),
// curve: Curves.bounceInOut,
// ),
// screenTransitionAnimation: const ScreenTransitionAnimation(
// animateTabTransition: true,
// curve: Curves.linear,
// duration: Duration(milliseconds: 200),
// ),
navBarStyle: NavBarStyle.style4,
animationSettings: const NavBarAnimationSettings(
navBarItemAnimation: ItemAnimationSettings(
duration: Duration(milliseconds: 200),
curve: Curves.bounceInOut,
),
screenTransitionAnimation: ScreenTransitionAnimationSettings(
animateTabTransition: true,
curve: Curves.bounceInOut,
duration: Duration(milliseconds: 200),
),
),
navBarStyle: NavBarStyle.style13,
),
);
},