mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
Made analytics energy management view scrollable, to allow for a better UX experience.
This commit is contained in:
@ -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(),
|
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -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()),
|
],
|
||||||
],
|
),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
@ -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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
Reference in New Issue
Block a user