ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made analytics energy management view scrollable, to allow for a better UX experience.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-06 11:26:58 +03:00
parent e8f9ae944c
commit 1a6121c452
5 changed files with 131 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart
View File

@ -79,7 +79,7 @@ class _AnalyticsEnergyManagementViewState
spacing: 32,
children: [
SizedBox(
height: MediaQuery.sizeOf(context).height * 0.9,
height: MediaQuery.sizeOf(context).height * 1.2,
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
@ -101,31 +101,32 @@ class _AnalyticsEnergyManagementViewState
);
}
return Padding(
padding: _padding,
child: Row(
spacing: 32,
children: [
const Expanded(
flex: 2,
child: Column(
spacing: 20,
children: [
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChartBox()),
],
),
),
Expanded(
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
return SingleChildScrollView(
child: Container(
padding: _padding,
height: MediaQuery.sizeOf(context).height * 1,
child: const Column(
children: [
Expanded(
child: Row(
spacing: 32,
children: [
Expanded(
flex: 2,
child: Column(
spacing: 20,
children: [
Expanded(child: TotalEnergyConsumptionChartBox()),
Expanded(child: EnergyConsumptionPerDeviceChartBox()),
],
),
),
Expanded(child: PowerClampEnergyDataWidget()),
],
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
),
),
],
],
),
),
);
},

117
lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart
View File

@ -11,6 +11,7 @@ import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clam
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
class PowerClampEnergyDataWidget extends StatelessWidget {
const PowerClampEnergyDataWidget({super.key});
@ -28,65 +29,71 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
builder: (context, state) {
final generalDataPoints =
state.powerClampModel?.status.general.dataPoints ?? [];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(context),
Text(
'Device ID:',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w400,
fontSize: 12,
return Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildHeader(context),
Text(
'Device ID:',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w400,
fontSize: 12,
),
),
),
const SizedBox(height: 6),
SelectableText(
state.powerClampModel?.productUuid ?? 'N/A',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 12,
const SizedBox(height: 6),
SelectableText(
state.powerClampModel?.productUuid ?? 'N/A',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 12,
),
),
),
const Divider(),
Expanded(
flex: 2,
child: PowerClampEnergyStatusWidget(
status: [
PowerClampEnergyStatus(
iconPath: Assets.powerActiveIcon,
title: 'Active',
value: _valueFromCode('EnergyConsumed', generalDataPoints),
unit: 'W',
),
PowerClampEnergyStatus(
iconPath: Assets.voltMeterIcon,
title: 'Current',
value: _valueFromCode('Current', generalDataPoints),
unit: 'A',
),
PowerClampEnergyStatus(
iconPath: Assets.frequencyIcon,
title: 'Frequency',
value: _valueFromCode('Frequency', generalDataPoints),
unit: 'Hz',
),
],
const Divider(),
Expanded(
flex: 2,
child: PowerClampEnergyStatusWidget(
status: [
PowerClampEnergyStatus(
iconPath: Assets.powerActiveIcon,
title: 'Active',
value: _valueFromCode('EnergyConsumed', generalDataPoints),
unit: 'W',
),
PowerClampEnergyStatus(
iconPath: Assets.voltMeterIcon,
title: 'Current',
value: _valueFromCode('Current', generalDataPoints),
unit: 'A',
),
PowerClampEnergyStatus(
iconPath: Assets.frequencyIcon,
title: 'Frequency',
value: _valueFromCode('Frequency', generalDataPoints),
unit: 'Hz',
),
],
),
),
),
const SizedBox(height: 14),
Expanded(
flex: 4,
child: PowerClampPhasesDataWidget(
phaseA: state.powerClampModel?.status.phaseA,
phaseB: state.powerClampModel?.status.phaseB,
phaseC: state.powerClampModel?.status.phaseC,
const SizedBox(height: 14),
Expanded(
flex: 4,
child: PowerClampPhasesDataWidget(
phaseA: state.powerClampModel?.status.phaseA,
phaseB: state.powerClampModel?.status.phaseB,
phaseC: state.powerClampModel?.status.phaseC,
),
),
),
const SizedBox(height: 14),
const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()),
],
const SizedBox(height: 14),
const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()),
],
),
);
},
),

61
lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart
View File

@ -30,41 +30,44 @@ class PowerClampEnergyStatusWidget extends StatelessWidget {
}
Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
return ListTile(
leading: SvgPicture.asset(
item.iconPath,
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerEnd,
height: 18,
width: 18,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
title: Text(
item.title,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w400,
fontSize: 16,
return Center(
child: ListTile(
titleAlignment: ListTileTitleAlignment.center,
leading: SvgPicture.asset(
item.iconPath,
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerEnd,
height: 18,
width: 18,
),
),
trailing: Text.rich(
TextSpan(
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
title: Text(
item.title,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w700,
fontWeight: FontWeight.w400,
fontSize: 16,
),
children: [
TextSpan(text: '${item.value} '),
TextSpan(
text: item.unit,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w700,
fontSize: 8,
),
),
trailing: Text.rich(
TextSpan(
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w700,
fontSize: 16,
),
],
children: [
TextSpan(text: '${item.value} '),
TextSpan(
text: item.unit,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w700,
fontSize: 8,
),
),
],
),
),
),
);

6
lib/pages/analytics/modules/energy_management/widgets/power_clamp_phase.dart
View File

@ -21,7 +21,6 @@ class PowerClampPhase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Expanded(
flex: 5,
child: Container(
margin: const EdgeInsets.only(bottom: 4),
decoration: containerWhiteDecoration.copyWith(boxShadow: const []),
@ -33,7 +32,7 @@ class PowerClampPhase extends StatelessWidget {
children: [
_buildIcon(),
Expanded(
flex: 5,
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -62,7 +61,7 @@ class PowerClampPhase extends StatelessWidget {
return Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
alignment: AlignmentDirectional.topCenter,
fit: BoxFit.scaleDown,
child: Text.rich(
TextSpan(
@ -89,6 +88,7 @@ class PowerClampPhase extends StatelessWidget {
Widget _buildTitle(BuildContext context) {
return Expanded(
flex: 2,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,

22
lib/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart
View File

@ -39,19 +39,15 @@ class PowerClampPhasesDataWidget extends StatelessWidget {
spacing: 4,
children: [
const SizedBox(height: 8),
Expanded(
flex: 2,
child: FittedBox(
clipBehavior: Clip.none,
alignment: AlignmentDirectional.center,
fit: BoxFit.scaleDown,
child: Text(
'Phase ${phaseIndex + 1}',
style: context.textTheme.titleLarge?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w700,
fontSize: 20,
),
FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.center,
child: Text(
'Phase ${phaseIndex + 1}',
style: context.textTheme.titleLarge?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
),