From 66f45721e51036d42b749a02c1a13c4b9a51184d Mon Sep 17 00:00:00 2001 From: ashrafzarkanisala Date: Sun, 22 Sep 2024 00:16:44 +0300 Subject: [PATCH] working on schedual table --- lib/pages/common/buttons/default_button.dart | 4 + .../water_heater/widgets/schedual_view.dart | 222 +++++++++++++----- lib/utils/theme/theme.dart | 7 +- 3 files changed, 165 insertions(+), 68 deletions(-) diff --git a/lib/pages/common/buttons/default_button.dart b/lib/pages/common/buttons/default_button.dart index 5aa506f8..77eb9bd7 100644 --- a/lib/pages/common/buttons/default_button.dart +++ b/lib/pages/common/buttons/default_button.dart @@ -17,6 +17,7 @@ class DefaultButton extends StatelessWidget { this.borderRadius, this.height, this.padding, + this.borderColor, }); final void Function()? onPressed; final Widget child; @@ -31,6 +32,8 @@ class DefaultButton extends StatelessWidget { final ButtonStyle? customButtonStyle; final Color? backgroundColor; final Color? foregroundColor; + final Color? borderColor; + @override Widget build(BuildContext context) { return ElevatedButton( @@ -61,6 +64,7 @@ class DefaultButton extends StatelessWidget { }), shape: MaterialStateProperty.all( RoundedRectangleBorder( + side: BorderSide(color: borderColor ?? Colors.transparent), borderRadius: BorderRadius.circular(borderRadius ?? 20), ), ), diff --git a/lib/pages/device_managment/water_heater/widgets/schedual_view.dart b/lib/pages/device_managment/water_heater/widgets/schedual_view.dart index 74cdb94b..125a9483 100644 --- a/lib/pages/device_managment/water_heater/widgets/schedual_view.dart +++ b/lib/pages/device_managment/water_heater/widgets/schedual_view.dart @@ -163,9 +163,27 @@ class _BuildScheduleViewState extends State { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - ElevatedButton( - onPressed: () => _showAddScheduleDialog(context), - child: Text('+ Add new schedule'), + SizedBox( + width: 170, + height: 40, + child: DefaultButton( + borderColor: ColorsManager.boxColor, + padding: 2, + backgroundColor: ColorsManager.graysColor, + borderRadius: 15, + onPressed: () => _showAddScheduleDialog(context), + child: Row( + children: [ + const Icon(Icons.add, color: ColorsManager.primaryColor), + Text( + ' Add new schedule', + style: context.textTheme.bodySmall!.copyWith( + color: ColorsManager.blackColor, + ), + ), + ], + ), + ), ), const SizedBox(height: 20), _buildScheduleTable(state), @@ -219,8 +237,8 @@ class _BuildScheduleViewState extends State { children: [ Center( child: schedule.functionOn - ? Icon(Icons.radio_button_checked) - : Icon(Icons.radio_button_unchecked)), + ? const Icon(Icons.radio_button_checked) + : const Icon(Icons.radio_button_unchecked)), Center(child: Text(_getSelectedDays(schedule.selectedDays))), Center(child: Text(schedule.time.format(context))), Center(child: Text(schedule.functionOn ? 'On' : 'Off')), @@ -230,7 +248,8 @@ class _BuildScheduleViewState extends State { children: [ TextButton( onPressed: () { - _showEditScheduleDialog(context, schedule, index); + _showAddScheduleDialog(context); + // _showEditScheduleDialog(context, schedule, index); }, child: Text( 'Edit', @@ -298,7 +317,6 @@ class _BuildScheduleViewState extends State { }, child: Text(selectedTime.format(context)), ), - // Same checkboxes and function on/off logic as before ], ), actions: [ @@ -340,7 +358,8 @@ class _BuildScheduleViewState extends State { ); } - void _showAddScheduleDialog(BuildContext context) { + void _showAddScheduleDialog( + BuildContext context) { showDialog( context: context, builder: (ctx) { @@ -352,10 +371,10 @@ class _BuildScheduleViewState extends State { false, false, false - ]; // Mon - Sun + ]; + TimeOfDay? selectedTime; bool isOn = false; - return BlocProvider.value( value: BlocProvider.of(context), child: StatefulBuilder( @@ -363,44 +382,88 @@ class _BuildScheduleViewState extends State { return AlertDialog( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20)), - title: const Text('Scheduling'), content: Column( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - ElevatedButton( - onPressed: () async { - TimeOfDay? time = await showTimePicker( - context: context, - initialTime: TimeOfDay.now(), - ); - if (time != null) { - setState(() { - selectedTime = time; - }); - } - }, - child: Text( - selectedTime == null - ? 'Time' - : '${selectedTime!.format(context)}', - ), - ), - const SizedBox(height: 10), Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - _buildDayCheckbox(setState, 'Mon', 0, selectedDays), - _buildDayCheckbox(setState, 'Tue', 1, selectedDays), - _buildDayCheckbox(setState, 'Wed', 2, selectedDays), - _buildDayCheckbox(setState, 'Thu', 3, selectedDays), - _buildDayCheckbox(setState, 'Fri', 4, selectedDays), - _buildDayCheckbox(setState, 'Sat', 5, selectedDays), - _buildDayCheckbox(setState, 'Sun', 6, selectedDays), + const SizedBox(), + Text( + 'Scheduling', + style: context.textTheme.titleLarge!.copyWith( + color: ColorsManager.dialogBlueTitle, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(), ], ), - const SizedBox(height: 10), + const SizedBox( + height: 24, + ), + SizedBox( + width: 150, + height: 40, + child: DefaultButton( + padding: 8, + backgroundColor: ColorsManager.boxColor, + borderRadius: 15, + onPressed: () async { + TimeOfDay? time = await showTimePicker( + context: context, + initialTime: TimeOfDay.now(), + ); + if (time != null) { + setState(() { + selectedTime = time; + }); + } + }, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + selectedTime == null + ? 'Time' + : selectedTime!.format(context), + style: context.textTheme.bodySmall!.copyWith( + color: ColorsManager.grayColor, + ), + ), + const Icon( + Icons.access_time, + color: ColorsManager.grayColor, + size: 18, + ), + ], + ), + ), + ), + const SizedBox(height: 16), Row( children: [ - const Text('Function:'), + _buildDayCheckbox(setState, 'Mon.', 0, selectedDays), + _buildDayCheckbox(setState, 'Tue.', 1, selectedDays), + _buildDayCheckbox(setState, 'Wed.', 2, selectedDays), + _buildDayCheckbox(setState, 'Thu.', 3, selectedDays), + _buildDayCheckbox(setState, 'Fri.', 4, selectedDays), + _buildDayCheckbox(setState, 'Sat.', 5, selectedDays), + _buildDayCheckbox(setState, 'Sun.', 6, selectedDays), + ], + ), + const SizedBox(height: 16), + Row( + children: [ + Text( + 'Function:', + style: context.textTheme.bodySmall! + .copyWith(color: ColorsManager.grayColor), + ), + const SizedBox( + width: 10, + ), Radio( value: true, groupValue: isOn, @@ -411,6 +474,9 @@ class _BuildScheduleViewState extends State { }, ), const Text('On'), + const SizedBox( + width: 10, + ), Radio( value: false, groupValue: isOn, @@ -426,25 +492,37 @@ class _BuildScheduleViewState extends State { ], ), actions: [ - TextButton( - onPressed: () { - Navigator.pop(context); - }, - child: const Text('Cancel'), + SizedBox( + width: 200, + child: DefaultButton( + height: 40, + onPressed: () { + Navigator.pop(context); + }, + backgroundColor: ColorsManager.boxColor, + child: Text( + 'Cancel', + style: context.textTheme.bodyMedium, + ), + ), ), - TextButton( - onPressed: () { - // Dispatch Bloc Event to Add Schedule - if (selectedTime != null) { - context.read().add(AddScheduleEvent( - time: selectedTime!, - selectedDays: selectedDays, - functionOn: isOn, - )); - Navigator.pop(context); // Close the dialog - } - }, - child: const Text('Save'), + SizedBox( + width: 200, + child: DefaultButton( + height: 40, + onPressed: () { + if (selectedTime != null) { + context.read().add(AddScheduleEvent( + time: selectedTime!, + selectedDays: selectedDays, + functionOn: isOn, + )); + Navigator.pop(context); + } + }, + backgroundColor: ColorsManager.primaryColor, + child: const Text('Save'), + ), ), ], ); @@ -556,21 +634,31 @@ class _BuildScheduleViewState extends State { List _buildCountDownAngInchingView( BuildContext context, WaterHeaterDeviceStatusLoaded state) { + final isCountDown = + state.scheduleMode?.name == ScheduleModes.countdown.name; return [ Text( - 'Countdown:', + isCountDown ? 'Countdown:' : 'Inching:', style: context.textTheme.bodySmall!.copyWith( fontSize: 13, color: ColorsManager.grayColor, ), ), - const SizedBox(height: 4), + const SizedBox(height: 8), + Visibility( + visible: !isCountDown, + child: const Text( + 'Once enabled this feature, each time the device is turned on, it will automatically turn of after a period time as pre-set.'), + ), + const SizedBox(height: 8), _hourMinutesWheel(state, context) ]; } Row _hourMinutesWheel( WaterHeaterDeviceStatusLoaded state, BuildContext context) { + final isActive = + (state.countdownRemaining != null && state.isActive == true); return Row( mainAxisAlignment: MainAxisAlignment.start, children: [ @@ -580,7 +668,7 @@ class _BuildScheduleViewState extends State { hours: value, minutes: state.minutes ?? 0, )); - }), + }, isActive: isActive), const SizedBox(width: 10), _buildPickerColumn(context, 'm', state.minutes ?? 0, 60, (value) { context.read().add(UpdateScheduleEvent( @@ -588,18 +676,19 @@ class _BuildScheduleViewState extends State { hours: state.hours ?? 0, minutes: value, )); - }), + }, isActive: isActive), ], ); } Widget _buildPickerColumn(BuildContext context, String label, - int initialValue, int itemCount, ValueChanged onSelected) { + int initialValue, int itemCount, ValueChanged onSelected, + {required bool isActive}) { return Row( mainAxisSize: MainAxisSize.min, children: [ Container( - height: 50, + height: 40, width: 80, padding: const EdgeInsets.symmetric(horizontal: 16), decoration: BoxDecoration( @@ -619,7 +708,10 @@ class _BuildScheduleViewState extends State { return Center( child: Text( index.toString().padLeft(2, '0'), - style: const TextStyle(fontSize: 24), + style: TextStyle( + fontSize: 24, + color: isActive ? ColorsManager.grayColor : Colors.black, + ), ), ); }, @@ -627,7 +719,7 @@ class _BuildScheduleViewState extends State { ), ), ), - const SizedBox(height: 8), + const SizedBox(width: 8), Text( label, style: const TextStyle( diff --git a/lib/utils/theme/theme.dart b/lib/utils/theme/theme.dart index ee868c8d..413f3243 100644 --- a/lib/utils/theme/theme.dart +++ b/lib/utils/theme/theme.dart @@ -5,9 +5,10 @@ final myTheme = ThemeData( fontFamily: 'Aftika', textTheme: const TextTheme( bodySmall: TextStyle( - fontSize: 13, - color: ColorsManager.whiteColors, - fontWeight: FontWeight.bold), + fontSize: 13, + color: ColorsManager.whiteColors, + fontWeight: FontWeight.normal, + ), bodyMedium: TextStyle(color: Colors.black87, fontSize: 14), bodyLarge: TextStyle(fontSize: 16, color: Colors.white), headlineSmall: TextStyle(color: Colors.black87, fontSize: 18),