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.

lib/pages/analytics/modules/analytics/blocs/analytics_tab/analytics_tab_bloc.dart

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

lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart

@@ -1,36 +1,55 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.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(
+    return Container(
-      style: TextButton.styleFrom(
+      decoration: BoxDecoration(
-        foregroundColor: _color,
+        borderRadius: BorderRadius.circular(16),
-        shape: RoundedRectangleBorder(
+        border: Border.all(
-          borderRadius: BorderRadius.circular(16),
+          color: ColorsManager.greyColor,
-          side: const BorderSide(
+          width: 1,
-            color: ColorsManager.greyColor,
-            width: 1,
-          ),
-        ),
-        backgroundColor: ColorsManager.transparentColor,
-        padding: const EdgeInsets.symmetric(
-          horizontal: 32,
-          vertical: 16,
         ),
       ),
-      child: const Text(
+      child: DropdownButton<String>(
-        'Device 1',
+        value: 'Device 1',
-        style: TextStyle(
+        isDense: true,
+        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(
+          color: ColorsManager.textPrimaryColor,
           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,
+                ),
+              ),
+            ),
+        ],
+        onChanged: (value) {},
       ),
-      onPressed: () {},
     );
   }
 }

lib/pages/analytics/modules/occupancy/helpers/fetch_occupancy_data_helper.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.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/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/occupancy/blocs/occupancy/occupancy_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'),
+      );
   }
 }

lib/pages/analytics/modules/occupancy/views/analytics_occupancy_view.dart

@@ -32,9 +32,9 @@ class _AnalyticsOccupancyViewState extends State<AnalyticsOccupancyView> {
             child: Column(
               spacing: 32,
               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()),
               ],
             ),
           );

lib/pages/analytics/modules/occupancy/widgets/occupancy_end_side_bar.dart

@@ -1,5 +1,12 @@
 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/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
 import 'package:uuid/uuid.dart';
@@ -9,42 +16,90 @@ class OccupancyEndSideBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return BlocBuilder<RealtimeDeviceChangesBloc, RealtimeDeviceChangesState>(
-      decoration: subSectionContainerDecoration.copyWith(
+      builder: (context, state) {
-        borderRadius: BorderRadius.circular(30),
+        return Container(
-      ),
+          decoration: subSectionContainerDecoration.copyWith(
-      padding: const EdgeInsetsDirectional.all(32),
+            borderRadius: BorderRadius.circular(30),
-      child: 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),
+          padding: const EdgeInsetsDirectional.all(32),
-          SelectableText(
+          child: Column(
-            (const Uuid().v4()),
+            crossAxisAlignment: CrossAxisAlignment.start,
-            style: context.textTheme.bodySmall?.copyWith(
+            children: [
-              color: ColorsManager.blackColor,
+              _buildHeader(context),
-              fontWeight: FontWeight.w400,
+              Text(
-              fontSize: 12,
+                'Device ID:',
-            ),
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.textPrimaryColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 12,
+                ),
+              ),
+              const SizedBox(height: 6),
+              SelectableText(
+                (const Uuid().v4()),
+                style: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.blackColor,
+                  fontWeight: FontWeight.w400,
+                  fontSize: 12,
+                ),
+              ),
+              const SizedBox(height: 10),
+              const Divider(height: 1, color: ColorsManager.greyColor),
+              const SizedBox(height: 50),
+              SizedBox(
+                height: MediaQuery.sizeOf(context).height * 0.2,
+                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: 50),
+        );
-          const Placeholder(fallbackHeight: 150),
+      },
-          const SizedBox(height: 50),
-          const Expanded(child: Placeholder()),
-          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) {
     return Row(
       mainAxisSize: MainAxisSize.min,
@@ -69,8 +124,7 @@ class OccupancyEndSideBar extends StatelessWidget {
           child: FittedBox(
             fit: BoxFit.scaleDown,
             alignment: AlignmentDirectional.centerEnd,
-            // child: PowerClampEnergyDataDeviceDropdown(),
+            child: PowerClampEnergyDataDeviceDropdown(),
-            child: Placeholder(fallbackHeight: 30),
           ),
         ),
       ],

lib/pages/analytics/services/realtime_device_service/firebase_realtime_device_service.dart

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