Sp 1513 fe implement device dropdown and live status card presence vacancy (#179)

* Called the widget of presence sensor status widgets.

* Enahnced `PowerClampEnergyDataDeviceDropdown` design and made it a dropdown.

* connected the realtime feature to the occupancy side bar, but with a mock id.

* revert default tab to energyManagement.
This commit is contained in:
Faris Armoush
2025-05-11 16:59:15 +03:00
committed by GitHub
parent 49e93329c8
commit b7ef9da35d
6 changed files with 138 additions and 58 deletions

View File

@ -5,7 +5,7 @@ import 'package:syncrow_web/pages/analytics/modules/analytics/enums/analytics_pa
part 'analytics_tab_event.dart'; part 'analytics_tab_event.dart';
class AnalyticsTabBloc extends Bloc<AnalyticsTabEvent, AnalyticsPageTab> { class AnalyticsTabBloc extends Bloc<AnalyticsTabEvent, AnalyticsPageTab> {
AnalyticsTabBloc() : super(AnalyticsPageTab.occupancy) { AnalyticsTabBloc() : super(AnalyticsPageTab.energyManagement) {
on<UpdateAnalyticsTabEvent>(_onUpdateAnalyticsTabEvent); on<UpdateAnalyticsTabEvent>(_onUpdateAnalyticsTabEvent);
} }

View File

@ -1,36 +1,55 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class PowerClampEnergyDataDeviceDropdown extends StatelessWidget { class PowerClampEnergyDataDeviceDropdown extends StatelessWidget {
const PowerClampEnergyDataDeviceDropdown({super.key}); const PowerClampEnergyDataDeviceDropdown({super.key});
static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return TextButton( return Container(
style: TextButton.styleFrom( decoration: BoxDecoration(
foregroundColor: _color,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
side: const BorderSide( border: Border.all(
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
width: 1, width: 1,
), ),
), ),
backgroundColor: ColorsManager.transparentColor, child: DropdownButton<String>(
padding: const EdgeInsets.symmetric( value: 'Device 1',
horizontal: 32, isDense: true,
vertical: 16, borderRadius: BorderRadius.circular(16),
dropdownColor: ColorsManager.whiteColors,
underline: const SizedBox.shrink(),
icon: const RotatedBox(
quarterTurns: 1,
child: Icon(Icons.chevron_right, size: 16),
), ),
), style: context.textTheme.labelSmall?.copyWith(
child: const Text( color: ColorsManager.textPrimaryColor,
'Device 1',
style: TextStyle(
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
fontSize: 14,
),
padding: const EdgeInsetsDirectional.symmetric(
horizontal: 20,
vertical: 2,
),
items: [
for (var i = 1; i < 10; i++)
DropdownMenuItem(
value: 'Device $i',
child: Text(
'Device $i',
style: context.textTheme.labelSmall?.copyWith(
color: ColorsManager.textPrimaryColor,
fontWeight: FontWeight.w700,
fontSize: 14,
), ),
), ),
onPressed: () {}, ),
],
onChanged: (value) {},
),
); );
} }
} }

View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart'; import 'package:syncrow_web/pages/analytics/modules/analytics/blocs/analytics_date_picker_bloc/analytics_date_picker_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart'; import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart';
import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart'; import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy/occupancy_bloc.dart';
import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart'; import 'package:syncrow_web/pages/analytics/modules/occupancy/blocs/occupancy_heat_map/occupancy_heat_map_bloc.dart';
@ -46,5 +47,11 @@ abstract final class FetchOccupancyDataHelper {
), ),
), ),
); );
context.read<RealtimeDeviceChangesBloc>()
..add(const RealtimeDeviceChangesClosed())
..add(
const RealtimeDeviceChangesStarted('14fe6e7e-47af-4a07-ae0a-7c4a26ef8135'),
);
} }
} }

View File

@ -32,9 +32,9 @@ class _AnalyticsOccupancyViewState extends State<AnalyticsOccupancyView> {
child: Column( child: Column(
spacing: 32, spacing: 32,
children: [ children: [
SizedBox(height: height * 0.4, child: const OccupancyEndSideBar()), SizedBox(height: height * 0.45, child: const OccupancyEndSideBar()),
SizedBox(height: height * 0.4, child: const OccupancyChartBox()), SizedBox(height: height * 0.5, child: const OccupancyChartBox()),
SizedBox(height: height * 0.4, child: const OccupancyHeatMapBox()), SizedBox(height: height * 0.5, child: const Placeholder()),
], ],
), ),
); );

View File

@ -1,5 +1,12 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
import 'package:syncrow_web/pages/analytics/modules/energy_management/blocs/realtime_device_changes/realtime_device_changes_bloc.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/device_managment/all_devices/models/device_status.dart';
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/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
import 'package:uuid/uuid.dart'; import 'package:uuid/uuid.dart';
@ -9,6 +16,8 @@ class OccupancyEndSideBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<RealtimeDeviceChangesBloc, RealtimeDeviceChangesState>(
builder: (context, state) {
return Container( return Container(
decoration: subSectionContainerDecoration.copyWith( decoration: subSectionContainerDecoration.copyWith(
borderRadius: BorderRadius.circular(30), borderRadius: BorderRadius.circular(30),
@ -35,14 +44,60 @@ class OccupancyEndSideBar extends StatelessWidget {
fontSize: 12, fontSize: 12,
), ),
), ),
const SizedBox(height: 10),
const Divider(height: 1, color: ColorsManager.greyColor),
const SizedBox(height: 50), const SizedBox(height: 50),
const Placeholder(fallbackHeight: 150), SizedBox(
const SizedBox(height: 50), height: MediaQuery.sizeOf(context).height * 0.2,
const Expanded(child: Placeholder()), child: PowerClampEnergyStatusWidget(
status: [
PowerClampEnergyStatus(
iconPath: Assets.presenceState,
title: 'Presence Status',
value: _valueFromCode(
'presence_state',
state.deviceStatusList,
),
unit: '',
),
PowerClampEnergyStatus(
iconPath: Assets.presenceTimeIcon,
title: 'Presence Time',
value:
'${_valueFromCode('none_body_time', state.deviceStatusList)} Min',
unit: '',
),
PowerClampEnergyStatus(
iconPath: Assets.currentDistanceIcon,
title: 'Detection Distance',
value:
'${_valueFromCode('space_move_val', state.deviceStatusList)} M',
unit: '',
),
],
),
),
const SizedBox(height: 20), const SizedBox(height: 20),
], ],
), ),
); );
},
);
}
String _valueFromCode(
String code,
List<Status> status, {
String? defaultValue,
}) {
final value = status
.firstWhere(
(e) => e.code == code,
orElse: () => Status(code: '--', value: '--'),
)
.value
.toString();
return value == 'null' ? defaultValue ?? '--' : value;
} }
Widget _buildHeader(BuildContext context) { Widget _buildHeader(BuildContext context) {
@ -69,8 +124,7 @@ class OccupancyEndSideBar extends StatelessWidget {
child: FittedBox( child: FittedBox(
fit: BoxFit.scaleDown, fit: BoxFit.scaleDown,
alignment: AlignmentDirectional.centerEnd, alignment: AlignmentDirectional.centerEnd,
// child: PowerClampEnergyDataDeviceDropdown(), child: PowerClampEnergyDataDeviceDropdown(),
child: Placeholder(fallbackHeight: 30),
), ),
), ),
], ],

View File

@ -23,7 +23,7 @@ class FirebaseRealtimeDeviceService implements RealtimeDeviceService {
return Status( return Status(
code: status['code']?.toString() ?? '', code: status['code']?.toString() ?? '',
value: num.tryParse(status['value']?.toString() ?? '0'), value: status['value']?.toString() ?? '',
); );
}).toList(); }).toList();
}); });