diff --git a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart index 1c07913c..18012ce4 100644 --- a/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart +++ b/lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/energy_consumption_by_phases/energy_consumption_by_phases_bloc.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/total_energy_consumption/total_energy_consumption_bloc.dart'; -import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart'; @@ -64,13 +63,7 @@ class _AnalyticsEnergyManagementViewState borderRadius: BorderRadius.circular(30), ), padding: const EdgeInsetsDirectional.all(32), - child: const Column( - spacing: 10, - children: [ - Expanded(flex: 2, child: PowerClampEnergyDataWidget()), - Expanded(child: EnergyConsumptionByPhasesChartBox()), - ], - ), + child: const PowerClampEnergyDataWidget(), ), ), ], diff --git a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart index 9a18ca86..bf7e4b14 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart'; +import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart'; +import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart'; 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'; @@ -26,7 +28,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget { ), const SizedBox(height: 6), Text( - const Uuid().v4(), + const Uuid().v6(), style: context.textTheme.bodySmall?.copyWith( color: ColorsManager.blackColor, fontWeight: FontWeight.w400, @@ -34,28 +36,35 @@ class PowerClampEnergyDataWidget extends StatelessWidget { ), ), const Divider(), - const PowerClampEnergyStatusWidget( - status: [ - PowerClampEnergyStatus( - iconPath: Assets.powerActiveIcon, - title: 'Active', - value: '700', - unit: 'W', - ), - PowerClampEnergyStatus( - iconPath: Assets.voltMeterIcon, - title: 'Current', - value: '3.06', - unit: 'A', - ), - PowerClampEnergyStatus( - iconPath: Assets.frequencyIcon, - title: 'Frequency', - value: '50', - unit: 'Hz', - ), - ], + const Expanded( + flex: 2, + child: PowerClampEnergyStatusWidget( + status: [ + PowerClampEnergyStatus( + iconPath: Assets.powerActiveIcon, + title: 'Active', + value: '700', + unit: 'W', + ), + PowerClampEnergyStatus( + iconPath: Assets.voltMeterIcon, + title: 'Current', + value: '3.06', + unit: 'A', + ), + PowerClampEnergyStatus( + iconPath: Assets.frequencyIcon, + title: 'Frequency', + value: '50', + unit: 'Hz', + ), + ], + ), ), + const SizedBox(height: 14), + const Expanded(flex: 4, child: PowerClampPhasesDataWidget()), + const SizedBox(height: 14), + const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()), ], ); } diff --git a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart index a6b5ae1e..ec8e3740 100644 --- a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart +++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart @@ -15,13 +15,17 @@ class PowerClampEnergyStatusWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return DecoratedBox( - decoration: secondarySection, - child: ListView.separated( - itemCount: status.length, - itemBuilder: (context, index) => _buildItem(context, status[index]), - separatorBuilder: _separatorBuilder, - shrinkWrap: true, + return Container( + decoration: secondarySection.copyWith(boxShadow: const []), + padding: const EdgeInsets.symmetric(vertical: 8), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + for (var index = 0; index < status.length; index++) ...[ + Expanded(child: _buildItem(context, status[index])), + _buildDivider(context), + ], + ], ), ); } @@ -31,10 +35,11 @@ class PowerClampEnergyStatusWidget extends StatelessWidget { leading: SvgPicture.asset( item.iconPath, fit: BoxFit.scaleDown, - alignment: AlignmentDirectional.center, - height: 24, - width: 24, + alignment: AlignmentDirectional.centerEnd, + height: 18, + width: 18, ), + contentPadding: const EdgeInsets.symmetric(horizontal: 14), title: Text( item.title, style: context.textTheme.bodySmall?.copyWith( @@ -47,7 +52,7 @@ class PowerClampEnergyStatusWidget extends StatelessWidget { TextSpan( style: context.textTheme.bodySmall?.copyWith( color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83), - fontWeight: FontWeight.w400, + fontWeight: FontWeight.w700, fontSize: 16, ), children: [ @@ -56,8 +61,8 @@ class PowerClampEnergyStatusWidget extends StatelessWidget { text: item.unit, style: context.textTheme.bodySmall?.copyWith( color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83), - fontWeight: FontWeight.w400, - fontSize: 12, + fontWeight: FontWeight.w700, + fontSize: 8, ), ), ], @@ -66,7 +71,7 @@ class PowerClampEnergyStatusWidget extends StatelessWidget { ); } - Widget _separatorBuilder(BuildContext context, int index) { + Widget _buildDivider(BuildContext context) { return DecoratedBox( decoration: BoxDecoration( border: Border( diff --git a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart new file mode 100644 index 00000000..19098846 --- /dev/null +++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart @@ -0,0 +1,188 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +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 PowerClampPhasesDataWidget extends StatelessWidget { + const PowerClampPhasesDataWidget({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + decoration: secondarySection.copyWith(boxShadow: const []), + padding: const EdgeInsetsDirectional.symmetric(vertical: 14), + child: Row( + children: List.generate(5, (index) { + if (index case 1 || 3) return _separatorBuilder(); + return Expanded( + child: Padding( + padding: const EdgeInsetsDirectional.symmetric(horizontal: 14), + child: Column( + spacing: 4, + children: [ + Expanded( + flex: 2, + child: FittedBox( + clipBehavior: Clip.none, + alignment: AlignmentDirectional.center, + fit: BoxFit.scaleDown, + child: Text( + 'Phase ${index ~/ 2 + 1}', + style: context.textTheme.titleLarge?.copyWith( + color: ColorsManager.textPrimaryColor, + fontWeight: FontWeight.w700, + fontSize: 20, + ), + ), + ), + ), + _buildItem( + context, + iconPath: Assets.powerActiveIcon, + title: 'Active Power', + value: '393.0', + unit: 'W', + ), + _buildItem( + context, + iconPath: Assets.voltageIcon, + title: 'Active Power', + value: '228.5', + unit: 'V', + ), + _buildItem( + context, + iconPath: Assets.voltMeterIcon, + title: 'Current', + value: '1.72', + unit: 'A', + ), + _buildItem( + context, + iconPath: Assets.speedoMeter, + title: 'Power Factor', + value: '0.8', + ), + ], + ), + ), + ); + }), + ), + ); + } + + Widget _buildItem( + BuildContext context, { + required String iconPath, + required String title, + required String value, + String? unit, + }) { + return Expanded( + flex: 5, + child: Container( + margin: const EdgeInsets.only(bottom: 4), + decoration: containerWhiteDecoration.copyWith( + boxShadow: const [], + ), + padding: const EdgeInsetsDirectional.all(6), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + spacing: 10, + children: [ + Expanded( + flex: 2, + child: SvgPicture.asset( + iconPath, + height: 24, + width: 24, + ), + ), + Expanded( + flex: 4, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + spacing: 4, + mainAxisSize: MainAxisSize.min, + children: [ + Expanded( + child: FittedBox( + alignment: AlignmentDirectional.centerStart, + fit: BoxFit.scaleDown, + child: Text( + title, + style: context.textTheme.titleSmall?.copyWith( + color: ColorsManager.lightGreyColor, + fontWeight: FontWeight.w400, + fontSize: 8, + ), + ), + ), + ), + Expanded( + child: FittedBox( + alignment: AlignmentDirectional.centerStart, + fit: BoxFit.scaleDown, + child: Text.rich( + TextSpan( + style: context.textTheme.bodySmall?.copyWith( + color: ColorsManager.textPrimaryColor.withValues( + alpha: 0.83, + ), + fontWeight: FontWeight.w700, + fontSize: 15, + ), + children: [ + TextSpan(text: '$value '), + if (unit != null) + TextSpan( + text: unit, + style: context.textTheme.bodySmall?.copyWith( + color: ColorsManager.textPrimaryColor.withValues( + alpha: 0.83, + ), + fontWeight: FontWeight.w400, + fontSize: 12, + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ); + } + + Widget _separatorBuilder() { + return Container( + height: double.infinity, + decoration: BoxDecoration( + border: Border( + left: BorderSide( + color: ColorsManager.blackColor.withValues(alpha: 0.1), + width: 0.5, + ), + ), + boxShadow: [ + BoxShadow( + color: ColorsManager.blackColor.withValues(alpha: 0.1), + offset: const Offset(2, 0), + blurRadius: 8, + spreadRadius: 2, + ), + ], + ), + ); + } +}