ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +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, spacing: 32,
children: [ children: [
SizedBox( SizedBox(
height: MediaQuery.sizeOf(context).height * 0.9, height: MediaQuery.sizeOf(context).height * 1.2,
child: Container( child: Container(
decoration: subSectionContainerDecoration.copyWith( decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30), borderRadius: BorderRadius.circular(30),
@ -101,31 +101,32 @@ class _AnalyticsEnergyManagementViewState
); );
} }
return Padding( return SingleChildScrollView(
padding: _padding, child: Container(
child: Row( padding: _padding,
spacing: 32, height: MediaQuery.sizeOf(context).height * 1,
children: [ child: const Column(
const Expanded( children: [
flex: 2, Expanded(
child: Column( child: Row(
spacing: 20, spacing: 32,
children: [ children: [
Expanded(child: TotalEnergyConsumptionChartBox()), Expanded(
Expanded(child: EnergyConsumptionPerDeviceChartBox()), flex: 2,
], child: Column(
), spacing: 20,
), children: [
Expanded( Expanded(child: TotalEnergyConsumptionChartBox()),
child: Container( Expanded(child: EnergyConsumptionPerDeviceChartBox()),
decoration: subSectionContainerDecoration.copyWith( ],
borderRadius: BorderRadius.circular(30), ),
),
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/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
class PowerClampEnergyDataWidget extends StatelessWidget { class PowerClampEnergyDataWidget extends StatelessWidget {
const PowerClampEnergyDataWidget({super.key}); const PowerClampEnergyDataWidget({super.key});
@ -28,65 +29,71 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
builder: (context, state) { builder: (context, state) {
final generalDataPoints = final generalDataPoints =
state.powerClampModel?.status.general.dataPoints ?? []; state.powerClampModel?.status.general.dataPoints ?? [];
return Column( return Container(
crossAxisAlignment: CrossAxisAlignment.start, decoration: subSectionContainerDecoration.copyWith(
children: [ borderRadius: BorderRadius.circular(30),
_buildHeader(context), ),
Text( padding: const EdgeInsetsDirectional.all(32),
'Device ID:', child: Column(
style: context.textTheme.bodySmall?.copyWith( crossAxisAlignment: CrossAxisAlignment.start,
color: ColorsManager.textPrimaryColor, children: [
fontWeight: FontWeight.w400, _buildHeader(context),
fontSize: 12, Text(
'Device ID:',
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w400,
fontSize: 12,
),
), ),
), const SizedBox(height: 6),
const SizedBox(height: 6), SelectableText(
SelectableText( state.powerClampModel?.productUuid ?? 'N/A',
state.powerClampModel?.productUuid ?? 'N/A', style: context.textTheme.bodySmall?.copyWith(
style: context.textTheme.bodySmall?.copyWith( color: ColorsManager.blackColor,
color: ColorsManager.blackColor, fontWeight: FontWeight.w400,
fontWeight: FontWeight.w400, fontSize: 12,
fontSize: 12, ),
), ),
), const Divider(),
const Divider(), Expanded(
Expanded( flex: 2,
flex: 2, child: PowerClampEnergyStatusWidget(
child: PowerClampEnergyStatusWidget( status: [
status: [ PowerClampEnergyStatus(
PowerClampEnergyStatus( iconPath: Assets.powerActiveIcon,
iconPath: Assets.powerActiveIcon, title: 'Active',
title: 'Active', value: _valueFromCode('EnergyConsumed', generalDataPoints),
value: _valueFromCode('EnergyConsumed', generalDataPoints), unit: 'W',
unit: 'W', ),
), PowerClampEnergyStatus(
PowerClampEnergyStatus( iconPath: Assets.voltMeterIcon,
iconPath: Assets.voltMeterIcon, title: 'Current',
title: 'Current', value: _valueFromCode('Current', generalDataPoints),
value: _valueFromCode('Current', generalDataPoints), unit: 'A',
unit: 'A', ),
), PowerClampEnergyStatus(
PowerClampEnergyStatus( iconPath: Assets.frequencyIcon,
iconPath: Assets.frequencyIcon, title: 'Frequency',
title: 'Frequency', value: _valueFromCode('Frequency', generalDataPoints),
value: _valueFromCode('Frequency', generalDataPoints), unit: 'Hz',
unit: 'Hz', ),
), ],
], ),
), ),
), const SizedBox(height: 14),
const SizedBox(height: 14), Expanded(
Expanded( flex: 4,
flex: 4, child: PowerClampPhasesDataWidget(
child: PowerClampPhasesDataWidget( phaseA: state.powerClampModel?.status.phaseA,
phaseA: state.powerClampModel?.status.phaseA, phaseB: state.powerClampModel?.status.phaseB,
phaseB: state.powerClampModel?.status.phaseB, phaseC: state.powerClampModel?.status.phaseC,
phaseC: state.powerClampModel?.status.phaseC, ),
), ),
), const SizedBox(height: 14),
const SizedBox(height: 14), const Expanded(flex: 3, child: EnergyConsumptionByPhasesChartBox()),
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) { Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
return ListTile( return Center(
leading: SvgPicture.asset( child: ListTile(
item.iconPath, titleAlignment: ListTileTitleAlignment.center,
fit: BoxFit.scaleDown, leading: SvgPicture.asset(
alignment: AlignmentDirectional.centerEnd, item.iconPath,
height: 18, fit: BoxFit.scaleDown,
width: 18, alignment: AlignmentDirectional.centerEnd,
), height: 18,
contentPadding: const EdgeInsets.symmetric(horizontal: 20), width: 18,
title: Text(
item.title,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w400,
fontSize: 16,
), ),
), contentPadding: const EdgeInsets.symmetric(horizontal: 20),
trailing: Text.rich( title: Text(
TextSpan( item.title,
style: context.textTheme.bodySmall?.copyWith( style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83), color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w700, fontWeight: FontWeight.w400,
fontSize: 16, fontSize: 16,
), ),
children: [ ),
TextSpan(text: '${item.value} '), trailing: Text.rich(
TextSpan( TextSpan(
text: item.unit, style: context.textTheme.bodySmall?.copyWith(
style: context.textTheme.bodySmall?.copyWith( color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83), fontWeight: FontWeight.w700,
fontWeight: FontWeight.w700, fontSize: 16,
fontSize: 8,
),
), ),
], 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Expanded( return Expanded(
flex: 5,
child: Container( child: Container(
margin: const EdgeInsets.only(bottom: 4), margin: const EdgeInsets.only(bottom: 4),
decoration: containerWhiteDecoration.copyWith(boxShadow: const []), decoration: containerWhiteDecoration.copyWith(boxShadow: const []),
@ -33,7 +32,7 @@ class PowerClampPhase extends StatelessWidget {
children: [ children: [
_buildIcon(), _buildIcon(),
Expanded( Expanded(
flex: 5, flex: 3,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -62,7 +61,7 @@ class PowerClampPhase extends StatelessWidget {
return Expanded( return Expanded(
flex: 2, flex: 2,
child: FittedBox( child: FittedBox(
alignment: AlignmentDirectional.centerStart, alignment: AlignmentDirectional.topCenter,
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
child: Text.rich( child: Text.rich(
TextSpan( TextSpan(
@ -89,6 +88,7 @@ class PowerClampPhase extends StatelessWidget {
Widget _buildTitle(BuildContext context) { Widget _buildTitle(BuildContext context) {
return Expanded( return Expanded(
flex: 2,
child: FittedBox( child: FittedBox(
alignment: AlignmentDirectional.centerStart, alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown, 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, spacing: 4,
children: [ children: [
const SizedBox(height: 8), const SizedBox(height: 8),
Expanded( FittedBox(
flex: 2, fit: BoxFit.scaleDown,
child: FittedBox( alignment: AlignmentDirectional.center,
clipBehavior: Clip.none, child: Text(
alignment: AlignmentDirectional.center, 'Phase ${phaseIndex + 1}',
fit: BoxFit.scaleDown, style: context.textTheme.titleLarge?.copyWith(
child: Text( color: ColorsManager.textPrimaryColor,
'Phase ${phaseIndex + 1}', fontWeight: FontWeight.w700,
style: context.textTheme.titleLarge?.copyWith( fontSize: 20,
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w700,
fontSize: 20,
),
), ),
), ),
), ),