From 245ab82208b6bce504335dc07891ff13e12360ef Mon Sep 17 00:00:00 2001 From: Mohammad Salameh Date: Thu, 4 Apr 2024 01:14:55 +0300 Subject: [PATCH] Refactor GangSwitch widget and ThreeGangInterfaceBody Refactor GangSwitch widget and ThreeGangInterfaceBody for better readability and maintainability. Update widget structure and logic for improved functionality and code organization. --- .../view/widgets/three_gang/gang_switch.dart | 94 ++-- .../three_gang/three_gang_interface_body.dart | 438 +++++++++--------- 2 files changed, 280 insertions(+), 252 deletions(-) diff --git a/lib/features/devices/view/widgets/three_gang/gang_switch.dart b/lib/features/devices/view/widgets/three_gang/gang_switch.dart index a0a2826..ff78992 100644 --- a/lib/features/devices/view/widgets/three_gang/gang_switch.dart +++ b/lib/features/devices/view/widgets/three_gang/gang_switch.dart @@ -3,68 +3,78 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_svg/svg.dart'; import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart'; import 'package:syncrow_app/features/devices/model/device_control_model.dart'; +import 'package:syncrow_app/features/devices/model/device_model.dart'; import 'package:syncrow_app/generated/assets.dart'; import 'package:syncrow_app/utils/resource_manager/color_manager.dart'; class GangSwitch extends StatelessWidget { const GangSwitch({ super.key, + required this.threeGangSwitch, required this.control, }); + final DeviceModel threeGangSwitch; + final DeviceControlModel control; @override Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { - return state is DeviceControlLoading - ? const CircularProgressIndicator() - : InkWell( - overlayColor: MaterialStateProperty.all(Colors.transparent), - onTap: () { - // DevicesCubit.getInstance() - // .deviceControl(control) - // .then((value) { - // print('Device control response: $value'); - // if (control.value ?? true) { - // control.value = false; - // } else { - // control.value = true; - // } - // }); - }, - child: Stack( - alignment: !control.value! - ? Alignment.topCenter - : Alignment.bottomCenter, - children: [ - Container( - decoration: BoxDecoration( - borderRadius: - const BorderRadius.all(Radius.circular(100.0)), - color: !control.value! - ? ColorsManager.primaryColorWithOpacity - : ColorsManager.switchOffColor, - ), - width: 60, - height: 115, - ), - Padding( - padding: const EdgeInsets.all(5.0), - child: SizedBox.square( - dimension: 60, - child: SvgPicture.asset( - !control.value! + return InkWell( + overlayColor: MaterialStateProperty.all(Colors.transparent), + onTap: () { + var tempControl = DeviceControlModel( + deviceId: control.deviceId, + code: control.code!, + value: !control.value!); + DevicesCubit.getInstance().deviceControl( + tempControl, + control.deviceId!, + ); + }, + child: Stack( + alignment: + !control.value! ? Alignment.topCenter : Alignment.bottomCenter, + children: [ + Container( + decoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(100.0)), + color: threeGangSwitch.status + .firstWhere((element) => element.code == control.code) + .value! + ? ColorsManager.primaryColorWithOpacity + : ColorsManager.switchOffColor, + ), + width: 60, + height: 115, + ), + Padding( + padding: const EdgeInsets.all(5.0), + child: SizedBox.square( + dimension: 60, + child: state is GetDeviceStatusLoading && + state.code == control.code || + state is DeviceControlSuccess && + state.code == control.code || + state is DeviceControlLoading && + state.code == control.code + ? const SizedBox( + width: 10, + height: 10, + child: Center(child: CircularProgressIndicator())) + : SvgPicture.asset( + control.value! ? Assets.iconsLightSwitchOn : Assets.iconsLightSwitchOff, fit: BoxFit.fill, ), - ), - ), - ], ), - ); + ), + ], + ), + ); }, ); } diff --git a/lib/features/devices/view/widgets/three_gang/three_gang_interface_body.dart b/lib/features/devices/view/widgets/three_gang/three_gang_interface_body.dart index b737dda..031df63 100644 --- a/lib/features/devices/view/widgets/three_gang/three_gang_interface_body.dart +++ b/lib/features/devices/view/widgets/three_gang/three_gang_interface_body.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart'; import 'package:syncrow_app/features/devices/model/device_control_model.dart'; import 'package:syncrow_app/features/devices/model/device_model.dart'; import 'package:syncrow_app/features/devices/view/widgets/three_gang/gang_switch.dart'; @@ -16,245 +18,261 @@ class ThreeGangInterfaceBody extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const Expanded(child: SizedBox.shrink()), - Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, + return BlocBuilder( + builder: (context, state) { + return Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Column( - children: [ - GangSwitch( - control: DeviceControlModel( - deviceId: 'bfe10693d4fd263206ocq9', - code: 'switch_1', - value: true, - ), - ), - const SizedBox(height: 20), - const SizedBox( - width: 70, - child: BodySmall( - text: "Bedside Light", - fontColor: ColorsManager.textPrimaryColor, - textAlign: TextAlign.center, - ), - ), - ], - ), - Column( - children: [ - GangSwitch( - control: DeviceControlModel( - deviceId: 'bfe10693d4fd263206ocq9', - code: 'switch_2', - value: true, - ), - ), - const SizedBox(height: 20), - const SizedBox( - width: 70, - child: BodySmall( - text: "Ceiling Light", - fontColor: ColorsManager.textPrimaryColor, - textAlign: TextAlign.center, - ), - ), - ], - ), - Column( - children: [ - GangSwitch( - control: DeviceControlModel( - deviceId: 'bfe10693d4fd263206ocq9', - code: 'switch_3', - value: true, - ), - ), - const SizedBox(height: 20), - const SizedBox( - width: 70, - child: BodySmall( - text: "Spotlight", - fontColor: ColorsManager.textPrimaryColor, - textAlign: TextAlign.center, - ), - ), - ], - ), - ], - ), - Expanded( - child: Center( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, + const Expanded(child: SizedBox.shrink()), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ Column( - mainAxisSize: MainAxisSize.min, children: [ - Card( - elevation: 3, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(100), - ), - child: InkWell( - onTap: () {}, - child: Stack( - alignment: Alignment.center, - children: [ - Container( - width: 60, - height: 60, - decoration: BoxDecoration( - color: Colors.grey[300], - borderRadius: BorderRadius.circular(100), - ), - ), - Container( - width: 40, - height: 40, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(100), - ), - child: Center( - child: BodySmall( - text: "On", - style: context.bodyMedium.copyWith( - color: - ColorsManager.primaryColorWithOpacity, - fontWeight: FontWeight.bold), - ), - ), - ), - ], - ), + GangSwitch( + threeGangSwitch: device, + control: DeviceControlModel( + deviceId: device.id, + // code: 'switch_1', + code: device.status[0].code, + // value: true, + value: device.status[0].value, ), ), - const SizedBox(height: 10), - BodySmall( - text: "All On", - style: context.bodyMedium.copyWith( - color: ColorsManager.textPrimaryColor, + const SizedBox(height: 20), + const SizedBox( + width: 70, + child: BodySmall( + text: "Bedside Light", + fontColor: ColorsManager.textPrimaryColor, + textAlign: TextAlign.center, ), ), ], ), - const SizedBox( - width: 20, - ), Column( - mainAxisSize: MainAxisSize.min, children: [ - Card( - elevation: 3, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(100), - ), - child: InkWell( - onTap: () {}, - child: Stack( - alignment: Alignment.center, - children: [ - Container( - width: 60, - height: 60, - decoration: BoxDecoration( - color: Colors.grey[300], - borderRadius: BorderRadius.circular(100), - ), - ), - Container( - width: 40, - height: 40, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(100), - ), - child: Center( - child: Icon( - Icons.access_time, - color: ColorsManager.primaryColorWithOpacity, - size: 25, - ), - ), - ), - ], - ), + GangSwitch( + threeGangSwitch: device, + control: DeviceControlModel( + // deviceId: 'bfe10693d4fd263206ocq9', + // code: 'switch_2', + // value: true, + deviceId: device.id, + code: device.status[1].code, + value: device.status[1].value, ), ), - const SizedBox(height: 10), - BodySmall( - text: "Timer", - style: context.bodyMedium.copyWith( - color: ColorsManager.textPrimaryColor, + const SizedBox(height: 20), + const SizedBox( + width: 70, + child: BodySmall( + text: "Ceiling Light", + fontColor: ColorsManager.textPrimaryColor, + textAlign: TextAlign.center, ), ), ], ), - const SizedBox( - width: 20, - ), Column( - mainAxisSize: MainAxisSize.min, children: [ - Card( - elevation: 3, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(100), - ), - child: InkWell( - onTap: () {}, - child: Stack( - alignment: Alignment.center, - children: [ - Container( - width: 60, - height: 60, - decoration: BoxDecoration( - color: Colors.grey[300], - borderRadius: BorderRadius.circular(100), - ), - ), - Container( - width: 40, - height: 40, - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(100), - ), - child: Center( - child: BodySmall( - text: "Off", - style: context.bodyMedium.copyWith( - color: - ColorsManager.primaryColorWithOpacity, - fontWeight: FontWeight.bold), - ), - ), - ), - ], - ), + GangSwitch( + threeGangSwitch: device, + control: DeviceControlModel( + // deviceId: 'bfe10693d4fd263206ocq9', + // code: 'switch_3', + // value: true, + deviceId: device.id, + code: device.status[2].code, + value: device.status[2].value, ), ), - const SizedBox(height: 10), - BodySmall( - text: "All Off", - style: context.bodyMedium.copyWith( - color: ColorsManager.textPrimaryColor, + const SizedBox(height: 20), + const SizedBox( + width: 70, + child: BodySmall( + text: "Spotlight", + fontColor: ColorsManager.textPrimaryColor, + textAlign: TextAlign.center, ), ), ], ), ], ), - ), - ), - ], + Expanded( + child: Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Card( + elevation: 3, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), + child: InkWell( + onTap: () {}, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: 60, + height: 60, + decoration: BoxDecoration( + color: Colors.grey[300], + borderRadius: BorderRadius.circular(100), + ), + ), + Container( + width: 40, + height: 40, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(100), + ), + child: Center( + child: BodySmall( + text: "On", + style: context.bodyMedium.copyWith( + color: ColorsManager + .primaryColorWithOpacity, + fontWeight: FontWeight.bold), + ), + ), + ), + ], + ), + ), + ), + const SizedBox(height: 10), + BodySmall( + text: "All On", + style: context.bodyMedium.copyWith( + color: ColorsManager.textPrimaryColor, + ), + ), + ], + ), + const SizedBox( + width: 20, + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Card( + elevation: 3, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), + child: InkWell( + onTap: () {}, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: 60, + height: 60, + decoration: BoxDecoration( + color: Colors.grey[300], + borderRadius: BorderRadius.circular(100), + ), + ), + Container( + width: 40, + height: 40, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(100), + ), + child: Center( + child: Icon( + Icons.access_time, + color: + ColorsManager.primaryColorWithOpacity, + size: 25, + ), + ), + ), + ], + ), + ), + ), + const SizedBox(height: 10), + BodySmall( + text: "Timer", + style: context.bodyMedium.copyWith( + color: ColorsManager.textPrimaryColor, + ), + ), + ], + ), + const SizedBox( + width: 20, + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + Card( + elevation: 3, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(100), + ), + child: InkWell( + onTap: () {}, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: 60, + height: 60, + decoration: BoxDecoration( + color: Colors.grey[300], + borderRadius: BorderRadius.circular(100), + ), + ), + Container( + width: 40, + height: 40, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(100), + ), + child: Center( + child: BodySmall( + text: "Off", + style: context.bodyMedium.copyWith( + color: ColorsManager + .primaryColorWithOpacity, + fontWeight: FontWeight.bold), + ), + ), + ), + ], + ), + ), + ), + const SizedBox(height: 10), + BodySmall( + text: "All Off", + style: context.bodyMedium.copyWith( + color: ColorsManager.textPrimaryColor, + ), + ), + ], + ), + ], + ), + ), + ), + ], + ); + }, ); } }