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

implemented header, and power clamp data widgets.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-04 14:59:49 +03:00
parent 5996ff3928
commit f081a7fc2d
4 changed files with 211 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
lib/pages/analytics/models/power_clamp_energy_status.dart Normal file
View File

@ -0,0 +1,13 @@
class PowerClampEnergyStatus {
final String iconPath;
final String title;
final String value;
final String unit;
const PowerClampEnergyStatus({
required this.iconPath,
required this.title,
required this.value,
required this.unit,
});
}

36
lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart Normal file
View File

@ -0,0 +1,36 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
class PowerClampEnergyDataDeviceDropdown extends StatelessWidget {
const PowerClampEnergyDataDeviceDropdown({super.key});
static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
@override
Widget build(BuildContext context) {
return TextButton(
style: TextButton.styleFrom(
foregroundColor: _color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: const BorderSide(
color: ColorsManager.greyColor,
width: 1,
),
),
backgroundColor: ColorsManager.transparentColor,
padding: const EdgeInsets.symmetric(
horizontal: 32,
vertical: 16,
),
),
child: const Text(
'Device 1',
style: TextStyle(
fontWeight: FontWeight.w700,
),
),
onPressed: () {},
);
}
}

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

@ -1,10 +1,80 @@
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/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/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:uuid/uuid.dart';
class PowerClampEnergyDataWidget extends StatelessWidget {
const PowerClampEnergyDataWidget({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
return 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),
Text(
const Uuid().v4(),
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.blackColor,
fontWeight: FontWeight.w400,
fontSize: 12,
),
),
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',
),
],
),
],
);
}
Widget _buildHeader(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Smart Power Clamp',
style: context.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
color: ColorsManager.vividBlue.withValues(alpha: 0.6),
fontSize: 18,
),
),
const Spacer(),
const PowerClampEnergyDataDeviceDropdown(),
],
);
}
}

90
lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart Normal file
View File

@ -0,0 +1,90 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';
class PowerClampEnergyStatusWidget extends StatelessWidget {
const PowerClampEnergyStatusWidget({
super.key,
required this.status,
});
final List<PowerClampEnergyStatus> status;
@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,
),
);
}
Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
return ListTile(
leading: SvgPicture.asset(
item.iconPath,
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.center,
height: 24,
width: 24,
),
title: Text(
item.title,
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
fontWeight: FontWeight.w400,
fontSize: 16,
),
),
trailing: Text.rich(
TextSpan(
style: context.textTheme.bodySmall?.copyWith(
color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
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.w400,
fontSize: 12,
),
),
],
),
),
);
}
Widget _separatorBuilder(context, index) {
return DecoratedBox(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: ColorsManager.greyColor.withValues(alpha: 0.5),
width: 1,
),
),
boxShadow: [
BoxShadow(
color: ColorsManager.blackColor.withValues(alpha: 0.1),
offset: const Offset(0, -1),
blurRadius: 3,
spreadRadius: 1,
),
],
),
child: const SizedBox(height: 1),
);
}
}