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

Progress on making EnergyManagementView responsive.

Browse Source
This commit is contained in:
Faris Armoush
2025-05-05 09:47:54 +03:00
parent 7467be6980
commit cd8264b6ce
5 changed files with 125 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,12 +40,46 @@ class _AnalyticsEnergyManagementViewState
);
}
static const _padding = EdgeInsetsDirectional.all(32);
@override
Widget build(BuildContext context) {
return Padding(
return LayoutBuilder(
builder: (context, constraints) {
final isMediumOrLess = constraints.maxWidth <= 900;
if (isMediumOrLess) {
return SingleChildScrollView(
padding: _padding,
child: Column(
spacing: 32,
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.9,
child: Container(
decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30),
),
padding: const EdgeInsetsDirectional.all(32),
child: const PowerClampEnergyDataWidget(),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: const TotalEnergyConsumptionChartBox(),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: const EnergyConsumptionPerDeviceChartBox(),
),
],
),
);
}
return Padding(
padding: _padding,
child: Row(
spacing: 20,
spacing: 32,
children: [
const Expanded(
flex: 2,
@ -69,5 +103,7 @@ class _AnalyticsEnergyManagementViewState
],
),
);
},
);
}
}

11
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart_box.dart
View File

@ -21,7 +21,16 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
Row(
spacing: 32,
children: [
ChartTitle(title: Text('Energy Consumption per Device')),
Expanded(
flex: 3,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerStart,
child: ChartTitle(
title: Text('Energy Consumption per Device'),
),
),
),
Spacer(),
Expanded(flex: 2, child: EnergyConsumptionPerDeviceDevicesList()),
],

12
lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart
View File

@ -13,13 +13,17 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: List.generate(20, (index) => _buildDeviceCell(index)).toList(),
children: List.generate(
20,
(index) => _buildDeviceCell(context, index),
).toList(),
),
);
}
Widget _buildDeviceCell(int index) {
Widget _buildDeviceCell(BuildContext context, int index) {
return Container(
height: MediaQuery.sizeOf(context).height * 0.035,
padding: const EdgeInsetsDirectional.symmetric(
vertical: 8,
horizontal: 12,
@ -31,6 +35,9 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
width: 1,
),
),
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.center,
child: Row(
spacing: 6,
children: [
@ -49,6 +56,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
),
],
),
),
);
}
}

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

@ -73,7 +73,12 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
SelectableText(
Expanded(
flex: 2,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerStart,
child: SelectableText(
'Smart Power Clamp',
style: context.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w700,
@ -81,8 +86,16 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
fontSize: 18,
),
),
),
),
const Spacer(),
const PowerClampEnergyDataDeviceDropdown(),
const Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerEnd,
child: PowerClampEnergyDataDeviceDropdown(),
),
),
],
);
}

14
lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart_box.dart
View File

@ -20,7 +20,19 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
spacing: 20,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const ChartTitle(title: Text('Total Energy Consumption')),
const Row(
children: [
Expanded(
flex: 3,
child: FittedBox(
alignment: AlignmentDirectional.centerStart,
fit: BoxFit.scaleDown,
child: ChartTitle(title: Text('Total Energy Consumption')),
),
),
Spacer(flex: 4),
],
),
const Divider(),
TotalEnergyConsumptionChart(chartData: state.chartData),
],