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

progress towards drawing the phases widgts.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-04 16:07:51 +03:00
parent 18acae3e85
commit cd54574279
4 changed files with 239 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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(

188
lib/pages/analytics/modules/energy_management/widgets/power_clamp_phases_data_widget.dart Normal file
View File

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