ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 07:07:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding fucntions and values to routine bloc

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-11-22 16:55:30 +03:00
parent 4441878bdd
commit 1d6673b5b0
10 changed files with 1094 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
lib/pages/routiens/bloc/routine_bloc.dart
View File

@ -1,5 +1,6 @@
import 'package:bloc/bloc.dart'; import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart'; import 'package:equatable/equatable.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/pages/routiens/models/routine_model.dart'; import 'package:syncrow_web/pages/routiens/models/routine_model.dart';
import 'package:syncrow_web/services/routines_api.dart'; import 'package:syncrow_web/services/routines_api.dart';
@ -14,27 +15,55 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
on<AddToThenContainer>(_onAddToThenContainer); on<AddToThenContainer>(_onAddToThenContainer);
on<LoadScenes>(_onLoadScenes); on<LoadScenes>(_onLoadScenes);
on<LoadAutomation>(_onLoadAutomation); on<LoadAutomation>(_onLoadAutomation);
on<AddFunction>(_onAddFunction);
on<RemoveFunction>(_onRemoveFunction);
on<ClearFunctions>(_onClearFunctions);
} }
void _onAddToIfContainer(AddToIfContainer event, Emitter<RoutineState> emit) { void _onAddToIfContainer(AddToIfContainer event, Emitter<RoutineState> emit) {
if (!_isDuplicate(state.ifItems, event.item)) { if (!_isDuplicate(state.ifItems, event.item)) {
final updatedIfItems = List<Map<String, dynamic>>.from(state.ifItems)..add(event.item); final updatedIfItems = List<Map<String, dynamic>>.from(state.ifItems)
..add(event.item);
emit(state.copyWith(ifItems: updatedIfItems)); emit(state.copyWith(ifItems: updatedIfItems));
} }
} }
void _onAddToThenContainer(AddToThenContainer event, Emitter<RoutineState> emit) { void _onAddToThenContainer(
AddToThenContainer event, Emitter<RoutineState> emit) {
if (!_isDuplicate(state.thenItems, event.item)) { if (!_isDuplicate(state.thenItems, event.item)) {
final updatedThenItems = List<Map<String, dynamic>>.from(state.thenItems)..add(event.item); final updatedThenItems = List<Map<String, dynamic>>.from(state.thenItems)
..add(event.item);
emit(state.copyWith(thenItems: updatedThenItems)); emit(state.copyWith(thenItems: updatedThenItems));
} }
} }
bool _isDuplicate(List<Map<String, dynamic>> items, Map<String, dynamic> newItem) { void _onAddFunction(AddFunction event, Emitter<RoutineState> emit) {
return items.any((item) => item['imagePath'] == newItem['imagePath'] && item['title'] == newItem['title']); final functions = List<DeviceFunctionData>.from(state.selectedFunctions);
functions.add(event.function);
emit(state.copyWith(selectedFunctions: functions));
} }
Future<void> _onLoadScenes(LoadScenes event, Emitter<RoutineState> emit) async { void _onRemoveFunction(RemoveFunction event, Emitter<RoutineState> emit) {
final functions = List<DeviceFunctionData>.from(state.selectedFunctions)
..removeWhere((f) =>
f.function == event.function.function &&
f.value == event.function.value);
emit(state.copyWith(selectedFunctions: functions));
}
void _onClearFunctions(ClearFunctions event, Emitter<RoutineState> emit) {
emit(state.copyWith(selectedFunctions: []));
}
bool _isDuplicate(
List<Map<String, dynamic>> items, Map<String, dynamic> newItem) {
return items.any((item) =>
item['imagePath'] == newItem['imagePath'] &&
item['title'] == newItem['title']);
}
Future<void> _onLoadScenes(
LoadScenes event, Emitter<RoutineState> emit) async {
emit(state.copyWith(isLoading: true, errorMessage: null)); emit(state.copyWith(isLoading: true, errorMessage: null));
try { try {
@ -51,7 +80,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
} }
} }
Future<void> _onLoadAutomation(LoadAutomation event, Emitter<RoutineState> emit) async { Future<void> _onLoadAutomation(
LoadAutomation event, Emitter<RoutineState> emit) async {
emit(state.copyWith(isLoading: true, errorMessage: null)); emit(state.copyWith(isLoading: true, errorMessage: null));
try { try {

16
lib/pages/routiens/bloc/routine_event.dart
View File

@ -42,3 +42,19 @@ class LoadAutomation extends RoutineEvent {
@override @override
List<Object> get props => [unitId]; List<Object> get props => [unitId];
} }
class AddFunction extends RoutineEvent {
final DeviceFunctionData function;
const AddFunction(this.function);
@override
List<Object> get props => [function];
}
class RemoveFunction extends RoutineEvent {
final DeviceFunctionData function;
const RemoveFunction(this.function);
@override
List<Object> get props => [function];
}
class ClearFunctions extends RoutineEvent {}

5
lib/pages/routiens/bloc/routine_state.dart
View File

@ -6,6 +6,7 @@ class RoutineState extends Equatable {
final List<Map<String, String>> availableCards; final List<Map<String, String>> availableCards;
final List<ScenesModel> scenes; final List<ScenesModel> scenes;
final List<ScenesModel> automations; final List<ScenesModel> automations;
final List<DeviceFunctionData> selectedFunctions;
final bool isLoading; final bool isLoading;
final String? errorMessage; final String? errorMessage;
@ -15,6 +16,7 @@ class RoutineState extends Equatable {
this.availableCards = const [], this.availableCards = const [],
this.scenes = const [], this.scenes = const [],
this.automations = const [], this.automations = const [],
this.selectedFunctions = const [],
this.isLoading = false, this.isLoading = false,
this.errorMessage, this.errorMessage,
}); });
@ -24,6 +26,7 @@ class RoutineState extends Equatable {
List<Map<String, dynamic>>? thenItems, List<Map<String, dynamic>>? thenItems,
List<ScenesModel>? scenes, List<ScenesModel>? scenes,
List<ScenesModel>? automations, List<ScenesModel>? automations,
List<DeviceFunctionData>? selectedFunctions,
bool? isLoading, bool? isLoading,
String? errorMessage, String? errorMessage,
}) { }) {
@ -32,6 +35,7 @@ class RoutineState extends Equatable {
thenItems: thenItems ?? this.thenItems, thenItems: thenItems ?? this.thenItems,
scenes: scenes ?? this.scenes, scenes: scenes ?? this.scenes,
automations: automations ?? this.automations, automations: automations ?? this.automations,
selectedFunctions: selectedFunctions ?? this.selectedFunctions,
isLoading: isLoading ?? this.isLoading, isLoading: isLoading ?? this.isLoading,
errorMessage: errorMessage ?? this.errorMessage, errorMessage: errorMessage ?? this.errorMessage,
); );
@ -43,6 +47,7 @@ class RoutineState extends Equatable {
thenItems, thenItems,
scenes, scenes,
automations, automations,
selectedFunctions,
isLoading, isLoading,
errorMessage, errorMessage,
]; ];

562
lib/pages/routiens/helper/ac_helper.dart
View File

@ -1,411 +1,219 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/models/ac/ac_function.dart'; import 'package:syncrow_web/pages/routiens/models/ac/ac_function.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart'; import 'package:syncrow_web/pages/routiens/models/device_functions.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'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ACHelper { class ACHelper {
static Future<Map<String, dynamic>?> showACFunctionsDialog( static Future<void> showACFunctionsDialog(
BuildContext context, BuildContext context,
List<DeviceFunction<dynamic>> functions, List<DeviceFunction<dynamic>> functions,
) async { ) async {
List<ACFunction> acFunctions = functions.whereType<ACFunction>().toList(); List<ACFunction> acFunctions = functions.whereType<ACFunction>().toList();
String? selectedFunction; // Track multiple selections using a map
dynamic selectedValue = 20; Map<String, dynamic> selectedValues = {};
String? selectedCondition = "=="; List<DeviceFunctionData> selectedFunctions = [];
List<bool> _selectedConditions = [false, true, false];
return showDialog<Map<String, dynamic>?>( await showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return StatefulBuilder( return Dialog(
builder: (context, setState) { child: Container(
return AlertDialog( width: 600,
contentPadding: EdgeInsets.zero, height: 450,
content: _buildDialogContent( decoration: BoxDecoration(
context, color: Colors.white,
setState, borderRadius: BorderRadius.circular(20),
acFunctions, ),
selectedFunction, padding: const EdgeInsets.only(top: 20),
selectedValue, child: Column(
selectedCondition, mainAxisSize: MainAxisSize.min,
_selectedConditions, children: [
(fn) => selectedFunction = fn, Text(
(val) => selectedValue = val, 'AC Functions',
(cond) => selectedCondition = cond, style: Theme.of(context).textTheme.bodyMedium!.copyWith(
), color: ColorsManager.primaryColorWithOpacity,
); fontWeight: FontWeight.bold,
}, ),
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 15, horizontal: 50),
child: Container(
height: 1,
width: double.infinity,
color: ColorsManager.greyColor,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: ListView.separated(
itemCount: acFunctions.length,
separatorBuilder: (_, __) => const Divider(
color: ColorsManager.dividerColor,
),
itemBuilder: (context, index) {
final function = acFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset(
function.icon,
width: 24,
height: 24,
),
title: Text(
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: isSelected
? Icon(
Icons.check_circle,
color:
ColorsManager.primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () {
if (isSelected) {
selectedValues.remove(function.code);
selectedFunctions.removeWhere(
(f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
},
);
},
),
),
Expanded(
child: Builder(
builder: (context) {
final selectedFunction = acFunctions.firstWhere(
(f) => selectedValues.containsKey(f.code),
orElse: () => acFunctions.first,
);
return _buildValueSelector(
context,
selectedFunction,
selectedValues[selectedFunction.code],
(value) {
selectedValues[selectedFunction.code] = value;
// Update or add the function data
final functionData = DeviceFunctionData(
entityId: selectedFunction.deviceId,
function: selectedFunction.code,
operationName: selectedFunction.operationName,
value: value,
valueDescription: _getValueDescription(
selectedFunction, value),
);
final existingIndex =
selectedFunctions.indexWhere((f) =>
f.function == selectedFunction.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
);
},
),
),
],
),
),
Container(
height: 1,
width: double.infinity,
color: ColorsManager.greyColor,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Cancel',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: ColorsManager.greyColor),
),
),
TextButton(
onPressed: selectedFunctions.isNotEmpty
? () {
// Add all selected functions to the bloc
for (final function in selectedFunctions) {
context
.read<RoutineBloc>()
.add(AddFunction(function));
}
Navigator.pop(context, true);
}
: null,
child: Text(
'Confirm',
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: ColorsManager.primaryColorWithOpacity,
),
),
),
],
),
],
),
),
); );
}, },
); );
} }
/// Build dialog content for AC functions dialog static Widget _buildValueSelector(
static Widget _buildDialogContent(
BuildContext context, BuildContext context,
StateSetter setState, ACFunction function,
List<ACFunction> acFunctions,
String? selectedFunction,
dynamic selectedValue, dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(String?) onFunctionSelected,
Function(dynamic) onValueSelected, Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) { ) {
final values = function.getOperationalValues();
return Container( return Container(
width: selectedFunction != null ? 600 : 360, height: 200,
height: 450, padding: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration( child: ListView.builder(
color: Colors.white, itemCount: values.length,
borderRadius: BorderRadius.circular(20),
),
padding: const EdgeInsets.only(top: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildDialogHeader(context),
Flexible(
child: Row(
children: [
_buildFunctionsList(
context,
setState,
acFunctions,
selectedFunction,
onFunctionSelected,
),
if (selectedFunction != null)
_buildValueSelector(
context,
setState,
selectedFunction,
selectedValue,
selectedCondition,
selectedConditions,
onValueSelected,
onConditionSelected,
acFunctions,
),
],
),
),
_buildDialogFooter(
context,
selectedFunction,
selectedValue,
selectedCondition,
),
],
),
);
}
/// Build header for AC functions dialog
static Widget _buildDialogHeader(BuildContext context) {
return Column(
children: [
Text(
'AC Condition',
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: ColorsManager.primaryColorWithOpacity,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 50),
child: Container(
height: 1,
width: double.infinity,
color: ColorsManager.greyColor,
),
),
],
);
}
/// Build functions list for AC functions dialog
static Widget _buildFunctionsList(
BuildContext context,
StateSetter setState,
List<ACFunction> acFunctions,
String? selectedFunction,
Function(String?) onFunctionSelected,
) {
return Expanded(
child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: acFunctions.length,
separatorBuilder: (context, index) => const Divider(
color: ColorsManager.dividerColor,
),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final function = acFunctions[index]; final value = values[index];
return ListTile( return RadioListTile<dynamic>(
leading: SvgPicture.asset( value: value.value,
function.icon, groupValue: selectedValue,
width: 24, onChanged: onValueSelected,
height: 24, title: Text(value.description),
),
title: Text(
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () => setState(() => onFunctionSelected(function.code)),
); );
}, },
), ),
); );
} }
/// Build value selector for AC functions dialog static String _getValueDescription(ACFunction function, dynamic value) {
static Widget _buildValueSelector( final values = function.getOperationalValues();
BuildContext context, final selectedValue = values.firstWhere((v) => v.value == value);
StateSetter setState, return selectedValue.description;
String selectedFunction,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
List<ACFunction> acFunctions,
) {
if (selectedFunction == 'temp_set' || selectedFunction == 'temp_current') {
return Expanded(
child: _buildTemperatureSelector(
context,
setState,
selectedValue,
selectedCondition,
selectedConditions,
onValueSelected,
onConditionSelected,
),
);
}
final selectedFn =
acFunctions.firstWhere((f) => f.code == selectedFunction);
final values = selectedFn.getOperationalValues();
return Expanded(
child: _buildOperationalValuesList(
context,
setState,
values,
selectedValue,
onValueSelected,
),
);
}
/// Build temperature selector for AC functions dialog
static Widget _buildTemperatureSelector(
BuildContext context,
StateSetter setState,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildConditionToggle(
context,
setState,
selectedConditions,
onConditionSelected,
),
const SizedBox(height: 20),
_buildTemperatureDisplay(context, selectedValue),
const SizedBox(height: 20),
_buildTemperatureSlider(
context,
setState,
selectedValue,
onValueSelected,
),
],
);
}
/// Build condition toggle for AC functions dialog
static Widget _buildConditionToggle(
BuildContext context,
StateSetter setState,
List<bool> selectedConditions,
Function(String?) onConditionSelected,
) {
return ToggleButtons(
onPressed: (int index) {
setState(() {
for (int i = 0; i < selectedConditions.length; i++) {
selectedConditions[i] = i == index;
}
onConditionSelected(index == 0
? "<"
: index == 1
? "=="
: ">");
});
},
borderRadius: const BorderRadius.all(Radius.circular(8)),
selectedBorderColor: ColorsManager.primaryColorWithOpacity,
selectedColor: Colors.white,
fillColor: ColorsManager.primaryColorWithOpacity,
color: ColorsManager.primaryColorWithOpacity,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 40.0,
),
isSelected: selectedConditions,
children: const [Text("<"), Text("="), Text(">")],
);
}
/// Build temperature display for AC functions dialog
static Widget _buildTemperatureDisplay(
BuildContext context, dynamic selectedValue) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
decoration: BoxDecoration(
color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'${selectedValue ?? 20}°C',
style: context.textTheme.headlineMedium!.copyWith(
color: ColorsManager.primaryColorWithOpacity,
),
),
);
}
static Widget _buildTemperatureSlider(
BuildContext context,
StateSetter setState,
dynamic selectedValue,
Function(dynamic) onValueSelected,
) {
final currentValue = selectedValue is int ? selectedValue.toDouble() : 20.0;
return Slider(
value: currentValue,
min: 16,
max: 30,
divisions: 14,
label: '${currentValue.toInt()}°C',
onChanged: (value) {
setState(() => onValueSelected(value.toInt()));
},
);
}
static Widget _buildOperationalValuesList(
BuildContext context,
StateSetter setState,
List<dynamic> values,
dynamic selectedValue,
Function(dynamic) onValueSelected,
) {
return ListView.builder(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
return ListTile(
leading: SvgPicture.asset(
value.icon,
width: 24,
height: 24,
),
title: Text(
value.description,
style: context.textTheme.bodyMedium,
),
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
onChanged: (newValue) {
setState(() => onValueSelected(newValue));
},
),
);
},
);
}
static Widget _buildDialogFooter(
BuildContext context,
String? selectedFunction,
dynamic selectedValue,
String? selectedCondition,
) {
return Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: ColorsManager.greyColor,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildFooterButton(
context,
'Cancel',
selectedFunction != null ? 299 : 179,
() => Navigator.pop(context),
),
_buildFooterButton(
context,
'Confirm',
selectedFunction != null ? 299 : 179,
selectedFunction != null && selectedValue != null
? () => Navigator.pop(context, {
'function': selectedFunction,
'value': selectedValue,
'condition': selectedCondition ?? "==",
})
: null,
),
],
),
);
}
static Widget _buildFooterButton(
BuildContext context,
String text,
double width,
VoidCallback? onTap,
) {
return GestureDetector(
onTap: onTap,
child: SizedBox(
height: 50,
width: width,
child: Center(
child: Text(
text,
style: context.textTheme.bodyMedium!.copyWith(
color: onTap != null
? ColorsManager.primaryColorWithOpacity
: ColorsManager.textGray,
),
),
),
),
);
} }
} }

24
lib/pages/routiens/helper/dialog_helper/device_dialog_helper.dart
View File

@ -13,15 +13,11 @@ class DeviceDialogHelper {
final functions = data['functions'] as List<DeviceFunction>; final functions = data['functions'] as List<DeviceFunction>;
try { try {
final result = await _getDialogForDeviceType( await _getDialogForDeviceType(
context, context,
data['productType'], data['productType'],
functions, functions,
); );
if (result != null) {
return {...data, ...result};
}
} catch (e) { } catch (e) {
debugPrint('Error: $e'); debugPrint('Error: $e');
} }
@ -29,25 +25,25 @@ class DeviceDialogHelper {
return null; return null;
} }
static Future<Map<String, dynamic>?> _getDialogForDeviceType( static Future<void> _getDialogForDeviceType(
BuildContext context, BuildContext context,
String productType, String productType,
List<DeviceFunction> functions, List<DeviceFunction> functions,
) async { ) async {
switch (productType) { switch (productType) {
case 'AC': case 'AC':
return ACHelper.showACFunctionsDialog(context, functions); await ACHelper.showACFunctionsDialog(context, functions);
break;
case '1G': case '1G':
return OneGangSwitchHelper.showSwitchFunctionsDialog( await OneGangSwitchHelper.showSwitchFunctionsDialog(context, functions);
context, functions); break;
case '2G': case '2G':
return TwoGangSwitchHelper.showSwitchFunctionsDialog( await TwoGangSwitchHelper.showSwitchFunctionsDialog(context, functions);
context, functions); break;
case '3G': case '3G':
return ThreeGangSwitchHelper.showSwitchFunctionsDialog( await ThreeGangSwitchHelper.showSwitchFunctionsDialog(
context, functions); context, functions);
default: break;
return null;
} }
} }
} }

333
lib/pages/routiens/helper/one_gang_switch_helper.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart'; import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/one_gang_switch/one_gang_switch.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/one_gang_switch/one_gang_switch.dart';
@ -7,16 +9,18 @@ import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
class OneGangSwitchHelper { class OneGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog( static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async { BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions List<DeviceFunction<dynamic>> switchFunctions = functions
.where( .where(
(f) => f is OneGangSwitchFunction || f is OneGangCountdownFunction) (f) => f is OneGangSwitchFunction || f is OneGangCountdownFunction)
.toList(); .toList();
String? selectedFunction; Map<String, dynamic> selectedValues = {};
dynamic selectedValue; List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>( await showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return StatefulBuilder( return StatefulBuilder(
@ -24,7 +28,7 @@ class OneGangSwitchHelper {
return AlertDialog( return AlertDialog(
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
content: Container( content: Container(
width: selectedFunction != null ? 600 : 360, width: 600,
height: 450, height: 450,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
@ -50,21 +54,23 @@ class OneGangSwitchHelper {
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
), ),
), ),
Flexible( Expanded(
child: Row( child: Row(
children: [ children: [
// Left side: Function list
Expanded( Expanded(
child: ListView.separated( child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length, itemCount: switchFunctions.length,
separatorBuilder: (context, index) => separatorBuilder: (_, __) => const Divider(
const Divider(
color: ColorsManager.dividerColor, color: ColorsManager.dividerColor,
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final function = switchFunctions[index]; final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile( return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset( leading: SvgPicture.asset(
function.icon, function.icon,
width: 24, width: 24,
@ -74,62 +80,129 @@ class OneGangSwitchHelper {
function.operationName, function.operationName,
style: context.textTheme.bodyMedium, style: context.textTheme.bodyMedium,
), ),
trailing: const Icon( trailing: isSelected
Icons.arrow_forward_ios, ? Icon(
size: 16, Icons.check_circle,
color: ColorsManager.textGray, color: ColorsManager
), .primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () { onTap: () {
setState(() { if (isSelected) {
selectedFunction = function.code; selectedValues.remove(function.code);
selectedValue = null; selectedFunctions.removeWhere(
}); (f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
}, },
); );
}, },
), ),
), ),
if (selectedFunction != null) // Right side: Value selector
Expanded( Expanded(
child: Builder( child: Builder(
builder: (context) { builder: (context) {
final selectedFn = switchFunctions.firstWhere( final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction) (f) => selectedValues.containsKey(f.code),
as BaseSwitchFunction; orElse: () => switchFunctions.first,
final values = ) as BaseSwitchFunction;
selectedFn.getOperationalValues();
return ListView.builder( if (selectedFn is OneGangCountdownFunction) {
shrinkWrap: false, return _buildCountDownSelector(
physics: context,
const AlwaysScrollableScrollPhysics(), setState,
itemCount: values.length, selectedValues[selectedFn.code] ?? 0,
itemBuilder: (context, index) { selectedCondition,
final value = values[index]; selectedConditions,
return ListTile( (value) {
leading: SvgPicture.asset( selectedValues[selectedFn.code] = value;
value.icon, final functionData = DeviceFunctionData(
width: 24, entityId: selectedFn.deviceId,
height: 24, function: selectedFn.code,
), operationName: selectedFn.operationName,
title: Text( value: value,
value.description, condition: selectedCondition,
style: context.textTheme.bodyMedium, valueDescription: '${value} sec',
),
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
),
); );
final existingIndex =
selectedFunctions.indexWhere((f) =>
f.function == selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
(condition) {
setState(() {
selectedCondition = condition;
});
}, },
); );
}, }
),
final values =
selectedFn.getOperationalValues();
return ListView.builder(
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
return ListTile(
leading: SvgPicture.asset(
value.icon,
width: 24,
height: 24,
),
title: Text(
value.description,
style: context.textTheme.bodyMedium,
),
trailing: Radio<dynamic>(
value: value.value,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
selectedValues[selectedFn.code] =
newValue;
final functionData =
DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName:
selectedFn.operationName,
value: newValue,
valueDescription: value.description,
);
final existingIndex =
selectedFunctions.indexWhere(
(f) =>
f.function ==
selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
),
);
},
);
},
), ),
),
], ],
), ),
), ),
@ -141,55 +214,35 @@ class OneGangSwitchHelper {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
GestureDetector( TextButton(
onTap: () { onPressed: () => Navigator.pop(context),
Navigator.pop(context); child: Text(
}, 'Cancel',
child: Container( style: Theme.of(context)
height: 50, .textTheme
width: selectedFunction != null ? 299 : 179, .bodyMedium!
decoration: const BoxDecoration( .copyWith(color: ColorsManager.greyColor),
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
child: Text(
'Cancel',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: ColorsManager.greyColor),
),
),
), ),
), ),
GestureDetector( TextButton(
onTap: () { onPressed: selectedFunctions.isNotEmpty
if (selectedFunction != null && ? () {
selectedValue != null) { for (final function in selectedFunctions) {
Navigator.pop(context, { context
'function': selectedFunction, .read<RoutineBloc>()
'value': selectedValue, .add(AddFunction(function));
}); }
} Navigator.pop(context, true);
}, }
child: SizedBox( : null,
height: 50, child: Text(
width: selectedFunction != null ? 299 : 179, 'Confirm',
child: Center( style: Theme.of(context)
child: Text( .textTheme
'Confirm', .bodyMedium!
style: Theme.of(context) .copyWith(
.textTheme color: ColorsManager.primaryColorWithOpacity,
.bodyMedium! ),
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
),
), ),
), ),
], ],
@ -203,4 +256,78 @@ class OneGangSwitchHelper {
}, },
); );
} }
/// Build countdown selector for switch functions dialog
static Widget _buildCountDownSelector(
BuildContext context,
StateSetter setState,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildConditionToggle(
context,
setState,
selectedConditions,
onConditionSelected,
),
const SizedBox(height: 20),
Text(
'${selectedValue.toString()} sec',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
Slider(
value: selectedValue.toDouble(),
min: 0,
max: 300, // 5 minutes in seconds
divisions: 300,
onChanged: (value) {
setState(() {
onValueSelected(value.toInt());
});
},
),
],
);
}
/// Build condition toggle for AC functions dialog
static Widget _buildConditionToggle(
BuildContext context,
StateSetter setState,
List<bool> selectedConditions,
Function(String?) onConditionSelected,
) {
return ToggleButtons(
onPressed: (int index) {
setState(() {
for (int i = 0; i < selectedConditions.length; i++) {
selectedConditions[i] = i == index;
}
onConditionSelected(index == 0
? "<"
: index == 1
? "=="
: ">");
});
},
borderRadius: const BorderRadius.all(Radius.circular(8)),
selectedBorderColor: ColorsManager.primaryColorWithOpacity,
selectedColor: Colors.white,
fillColor: ColorsManager.primaryColorWithOpacity,
color: ColorsManager.primaryColorWithOpacity,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 40.0,
),
isSelected: selectedConditions,
children: const [Text("<"), Text("="), Text(">")],
);
}
} }

335
lib/pages/routiens/helper/three_gang_switch_helper.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart'; import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/three_gang_switch/three_gang_switch.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/three_gang_switch/three_gang_switch.dart';
@ -7,7 +9,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ThreeGangSwitchHelper { class ThreeGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog( static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async { BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions List<DeviceFunction<dynamic>> switchFunctions = functions
.where((f) => .where((f) =>
@ -18,10 +20,12 @@ class ThreeGangSwitchHelper {
f is ThreeGangCountdown2Function || f is ThreeGangCountdown2Function ||
f is ThreeGangCountdown3Function) f is ThreeGangCountdown3Function)
.toList(); .toList();
String? selectedFunction; Map<String, dynamic> selectedValues = {};
dynamic selectedValue; List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>( await showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return StatefulBuilder( return StatefulBuilder(
@ -29,7 +33,7 @@ class ThreeGangSwitchHelper {
return AlertDialog( return AlertDialog(
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
content: Container( content: Container(
width: selectedFunction != null ? 600 : 360, width: 600,
height: 450, height: 450,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
@ -55,21 +59,23 @@ class ThreeGangSwitchHelper {
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
), ),
), ),
Flexible( Expanded(
child: Row( child: Row(
children: [ children: [
// Left side: Function list
Expanded( Expanded(
child: ListView.separated( child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length, itemCount: switchFunctions.length,
separatorBuilder: (context, index) => separatorBuilder: (_, __) => const Divider(
const Divider(
color: ColorsManager.dividerColor, color: ColorsManager.dividerColor,
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final function = switchFunctions[index]; final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile( return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset( leading: SvgPicture.asset(
function.icon, function.icon,
width: 24, width: 24,
@ -79,62 +85,131 @@ class ThreeGangSwitchHelper {
function.operationName, function.operationName,
style: context.textTheme.bodyMedium, style: context.textTheme.bodyMedium,
), ),
trailing: const Icon( trailing: isSelected
Icons.arrow_forward_ios, ? Icon(
size: 16, Icons.check_circle,
color: ColorsManager.textGray, color: ColorsManager
), .primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () { onTap: () {
setState(() { if (isSelected) {
selectedFunction = function.code; selectedValues.remove(function.code);
selectedValue = null; selectedFunctions.removeWhere(
}); (f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
}, },
); );
}, },
), ),
), ),
if (selectedFunction != null) // Right side: Value selector
Expanded( Expanded(
child: Builder( child: Builder(
builder: (context) { builder: (context) {
final selectedFn = switchFunctions.firstWhere( final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction) (f) => selectedValues.containsKey(f.code),
as BaseSwitchFunction; orElse: () => switchFunctions.first,
final values = ) as BaseSwitchFunction;
selectedFn.getOperationalValues();
return ListView.builder( if (selectedFn is ThreeGangCountdown1Function ||
shrinkWrap: false, selectedFn is ThreeGangCountdown2Function ||
physics: selectedFn is ThreeGangCountdown3Function) {
const AlwaysScrollableScrollPhysics(), return _buildCountDownSelector(
itemCount: values.length, context,
itemBuilder: (context, index) { setState,
final value = values[index]; selectedValues[selectedFn.code] ?? 0,
return ListTile( selectedCondition,
leading: SvgPicture.asset( selectedConditions,
value.icon, (value) {
width: 24, selectedValues[selectedFn.code] = value;
height: 24, final functionData = DeviceFunctionData(
), entityId: selectedFn.deviceId,
title: Text( function: selectedFn.code,
value.description, operationName: selectedFn.operationName,
style: context.textTheme.bodyMedium, value: value,
), condition: selectedCondition,
trailing: Radio<dynamic>( valueDescription: '${value} sec',
value: value.value,
groupValue: selectedValue,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
),
); );
final existingIndex =
selectedFunctions.indexWhere((f) =>
f.function == selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
(condition) {
setState(() {
selectedCondition = condition;
});
}, },
); );
}, }
),
final values =
selectedFn.getOperationalValues();
return ListView.builder(
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
return ListTile(
leading: SvgPicture.asset(
value.icon,
width: 24,
height: 24,
),
title: Text(
value.description,
style: context.textTheme.bodyMedium,
),
trailing: Radio<dynamic>(
value: value.value,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
selectedValues[selectedFn.code] =
newValue;
final functionData =
DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName:
selectedFn.operationName,
value: newValue,
valueDescription: value.description,
);
final existingIndex =
selectedFunctions.indexWhere(
(f) =>
f.function ==
selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
),
);
},
);
},
), ),
),
], ],
), ),
), ),
@ -146,55 +221,35 @@ class ThreeGangSwitchHelper {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
GestureDetector( TextButton(
onTap: () { onPressed: () => Navigator.pop(context),
Navigator.pop(context); child: Text(
}, 'Cancel',
child: Container( style: Theme.of(context)
height: 50, .textTheme
width: selectedFunction != null ? 299 : 179, .bodyMedium!
decoration: const BoxDecoration( .copyWith(color: ColorsManager.greyColor),
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
child: Text(
'Cancel',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: ColorsManager.greyColor),
),
),
), ),
), ),
GestureDetector( TextButton(
onTap: () { onPressed: selectedFunctions.isNotEmpty
if (selectedFunction != null && ? () {
selectedValue != null) { for (final function in selectedFunctions) {
Navigator.pop(context, { context
'function': selectedFunction, .read<RoutineBloc>()
'value': selectedValue, .add(AddFunction(function));
}); }
} Navigator.pop(context, true);
}, }
child: SizedBox( : null,
height: 50, child: Text(
width: selectedFunction != null ? 299 : 179, 'Confirm',
child: Center( style: Theme.of(context)
child: Text( .textTheme
'Confirm', .bodyMedium!
style: Theme.of(context) .copyWith(
.textTheme color: ColorsManager.primaryColorWithOpacity,
.bodyMedium! ),
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
),
), ),
), ),
], ],
@ -208,4 +263,78 @@ class ThreeGangSwitchHelper {
}, },
); );
} }
/// Build countdown selector for switch functions dialog
static Widget _buildCountDownSelector(
BuildContext context,
StateSetter setState,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildConditionToggle(
context,
setState,
selectedConditions,
onConditionSelected,
),
const SizedBox(height: 20),
Text(
'${selectedValue.toString()} sec',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
Slider(
value: selectedValue.toDouble(),
min: 0,
max: 300, // 5 minutes in seconds
divisions: 300,
onChanged: (value) {
setState(() {
onValueSelected(value.toInt());
});
},
),
],
);
}
/// Build condition toggle for AC functions dialog
static Widget _buildConditionToggle(
BuildContext context,
StateSetter setState,
List<bool> selectedConditions,
Function(String?) onConditionSelected,
) {
return ToggleButtons(
onPressed: (int index) {
setState(() {
for (int i = 0; i < selectedConditions.length; i++) {
selectedConditions[i] = i == index;
}
onConditionSelected(index == 0
? "<"
: index == 1
? "=="
: ">");
});
},
borderRadius: const BorderRadius.all(Radius.circular(8)),
selectedBorderColor: ColorsManager.primaryColorWithOpacity,
selectedColor: Colors.white,
fillColor: ColorsManager.primaryColorWithOpacity,
color: ColorsManager.primaryColorWithOpacity,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 40.0,
),
isSelected: selectedConditions,
children: const [Text("<"), Text("="), Text(">")],
);
}
} }

334
lib/pages/routiens/helper/two_gang_switch_helper.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/models/device_functions.dart'; import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
import 'package:syncrow_web/pages/routiens/models/gang_switches/two_gang_switch/two_gang_switch.dart'; import 'package:syncrow_web/pages/routiens/models/gang_switches/two_gang_switch/two_gang_switch.dart';
@ -7,7 +9,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
class TwoGangSwitchHelper { class TwoGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog( static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async { BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions List<DeviceFunction<dynamic>> switchFunctions = functions
.where((f) => .where((f) =>
@ -16,10 +18,12 @@ class TwoGangSwitchHelper {
f is TwoGangCountdown1Function || f is TwoGangCountdown1Function ||
f is TwoGangCountdown2Function) f is TwoGangCountdown2Function)
.toList(); .toList();
String? selectedFunction; Map<String, dynamic> selectedValues = {};
dynamic selectedValue; List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>( await showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return StatefulBuilder( return StatefulBuilder(
@ -27,7 +31,7 @@ class TwoGangSwitchHelper {
return AlertDialog( return AlertDialog(
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
content: Container( content: Container(
width: selectedFunction != null ? 600 : 360, width: 600,
height: 450, height: 450,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
@ -53,21 +57,23 @@ class TwoGangSwitchHelper {
color: ColorsManager.greyColor, color: ColorsManager.greyColor,
), ),
), ),
Flexible( Expanded(
child: Row( child: Row(
children: [ children: [
// Left side: Function list
Expanded( Expanded(
child: ListView.separated( child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length, itemCount: switchFunctions.length,
separatorBuilder: (context, index) => separatorBuilder: (_, __) => const Divider(
const Divider(
color: ColorsManager.dividerColor, color: ColorsManager.dividerColor,
), ),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final function = switchFunctions[index]; final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile( return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset( leading: SvgPicture.asset(
function.icon, function.icon,
width: 24, width: 24,
@ -77,62 +83,130 @@ class TwoGangSwitchHelper {
function.operationName, function.operationName,
style: context.textTheme.bodyMedium, style: context.textTheme.bodyMedium,
), ),
trailing: const Icon( trailing: isSelected
Icons.arrow_forward_ios, ? Icon(
size: 16, Icons.check_circle,
color: ColorsManager.textGray, color: ColorsManager
), .primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () { onTap: () {
setState(() { if (isSelected) {
selectedFunction = function.code; selectedValues.remove(function.code);
selectedValue = null; selectedFunctions.removeWhere(
}); (f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
}, },
); );
}, },
), ),
), ),
if (selectedFunction != null) // Right side: Value selector
Expanded( Expanded(
child: Builder( child: Builder(
builder: (context) { builder: (context) {
final selectedFn = switchFunctions.firstWhere( final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction) (f) => selectedValues.containsKey(f.code),
as BaseSwitchFunction; orElse: () => switchFunctions.first,
final values = ) as BaseSwitchFunction;
selectedFn.getOperationalValues();
return ListView.builder( if (selectedFn is TwoGangCountdown1Function ||
shrinkWrap: false, selectedFn is TwoGangCountdown2Function) {
physics: return _buildCountDownSelector(
const AlwaysScrollableScrollPhysics(), context,
itemCount: values.length, setState,
itemBuilder: (context, index) { selectedValues[selectedFn.code] ?? 0,
final value = values[index]; selectedCondition,
return ListTile( selectedConditions,
leading: SvgPicture.asset( (value) {
value.icon, selectedValues[selectedFn.code] = value;
width: 24, final functionData = DeviceFunctionData(
height: 24, entityId: selectedFn.deviceId,
), function: selectedFn.code,
title: Text( operationName: selectedFn.operationName,
value.description, value: value,
style: context.textTheme.bodyMedium, condition: selectedCondition,
), valueDescription: '${value} sec',
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
onChanged: (newValue) {
setState(() {
selectedValue = newValue;
});
},
),
); );
final existingIndex =
selectedFunctions.indexWhere((f) =>
f.function == selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
(condition) {
setState(() {
selectedCondition = condition;
});
}, },
); );
}, }
),
final values =
selectedFn.getOperationalValues();
return ListView.builder(
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
return ListTile(
leading: SvgPicture.asset(
value.icon,
width: 24,
height: 24,
),
title: Text(
value.description,
style: context.textTheme.bodyMedium,
),
trailing: Radio<dynamic>(
value: value.value,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
selectedValues[selectedFn.code] =
newValue;
final functionData =
DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName:
selectedFn.operationName,
value: newValue,
valueDescription: value.description,
);
final existingIndex =
selectedFunctions.indexWhere(
(f) =>
f.function ==
selectedFn.code);
if (existingIndex != -1) {
selectedFunctions[existingIndex] =
functionData;
} else {
selectedFunctions.add(functionData);
}
(context as Element).markNeedsBuild();
},
),
);
},
);
},
), ),
),
], ],
), ),
), ),
@ -144,55 +218,35 @@ class TwoGangSwitchHelper {
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
GestureDetector( TextButton(
onTap: () { onPressed: () => Navigator.pop(context),
Navigator.pop(context); child: Text(
}, 'Cancel',
child: Container( style: Theme.of(context)
height: 50, .textTheme
width: selectedFunction != null ? 299 : 179, .bodyMedium!
decoration: const BoxDecoration( .copyWith(color: ColorsManager.greyColor),
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
child: Text(
'Cancel',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(color: ColorsManager.greyColor),
),
),
), ),
), ),
GestureDetector( TextButton(
onTap: () { onPressed: selectedFunctions.isNotEmpty
if (selectedFunction != null && ? () {
selectedValue != null) { for (final function in selectedFunctions) {
Navigator.pop(context, { context
'function': selectedFunction, .read<RoutineBloc>()
'value': selectedValue, .add(AddFunction(function));
}); }
} Navigator.pop(context, true);
}, }
child: SizedBox( : null,
height: 50, child: Text(
width: selectedFunction != null ? 299 : 179, 'Confirm',
child: Center( style: Theme.of(context)
child: Text( .textTheme
'Confirm', .bodyMedium!
style: Theme.of(context) .copyWith(
.textTheme color: ColorsManager.primaryColorWithOpacity,
.bodyMedium! ),
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
),
), ),
), ),
], ],
@ -206,4 +260,78 @@ class TwoGangSwitchHelper {
}, },
); );
} }
/// Build countdown selector for switch functions dialog
static Widget _buildCountDownSelector(
BuildContext context,
StateSetter setState,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildConditionToggle(
context,
setState,
selectedConditions,
onConditionSelected,
),
const SizedBox(height: 20),
Text(
'${selectedValue.toString()} sec',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
Slider(
value: selectedValue.toDouble(),
min: 0,
max: 300, // 5 minutes in seconds
divisions: 300,
onChanged: (value) {
setState(() {
onValueSelected(value.toInt());
});
},
),
],
);
}
/// Build condition toggle for AC functions dialog
static Widget _buildConditionToggle(
BuildContext context,
StateSetter setState,
List<bool> selectedConditions,
Function(String?) onConditionSelected,
) {
return ToggleButtons(
onPressed: (int index) {
setState(() {
for (int i = 0; i < selectedConditions.length; i++) {
selectedConditions[i] = i == index;
}
onConditionSelected(index == 0
? "<"
: index == 1
? "=="
: ">");
});
},
borderRadius: const BorderRadius.all(Radius.circular(8)),
selectedBorderColor: ColorsManager.primaryColorWithOpacity,
selectedColor: Colors.white,
fillColor: ColorsManager.primaryColorWithOpacity,
color: ColorsManager.primaryColorWithOpacity,
constraints: const BoxConstraints(
minHeight: 40.0,
minWidth: 40.0,
),
isSelected: selectedConditions,
children: const [Text("<"), Text("="), Text(">")],
);
}
} }

44
lib/pages/routiens/models/device_functions.dart
View File

@ -15,3 +15,47 @@ abstract class DeviceFunction<T> {
T execute(T currentStatus, dynamic newValue); T execute(T currentStatus, dynamic newValue);
} }
class DeviceFunctionData {
final String entityId;
final String actionExecutor;
final String function;
final String operationName;
final dynamic value;
final String? condition;
final String? valueDescription;
DeviceFunctionData({
required this.entityId,
this.actionExecutor = 'function',
required this.function,
required this.operationName,
required this.value,
this.condition,
this.valueDescription,
});
Map<String, dynamic> toJson() {
return {
'entityId': entityId,
'actionExecutor': actionExecutor,
'function': function,
'operationName': operationName,
'value': value,
if (condition != null) 'condition': condition,
if (valueDescription != null) 'valueDescription': valueDescription,
};
}
factory DeviceFunctionData.fromJson(Map<String, dynamic> json) {
return DeviceFunctionData(
entityId: json['entityId'],
actionExecutor: json['actionExecutor'] ?? 'function',
function: json['function'],
operationName: json['operationName'],
value: json['value'],
condition: json['condition'],
valueDescription: json['valueDescription'],
);
}
}

147
lib/pages/routiens/widgets/dragable_card.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc.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'; import 'package:syncrow_web/utils/extension/build_context_x.dart';
@ -46,51 +48,110 @@ class DraggableCard extends StatelessWidget {
} }
Widget _buildCardContent(BuildContext context) { Widget _buildCardContent(BuildContext context) {
return Card( return BlocBuilder<RoutineBloc, RoutineState>(
color: ColorsManager.whiteColors, builder: (context, state) {
child: SizedBox( // Filter functions for this device
height: 123, final deviceFunctions = state.selectedFunctions
width: 90, .where((f) => f.entityId == deviceData?['deviceId'])
child: Column( .toList();
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, return Card(
children: [ color: ColorsManager.whiteColors,
Container( child: SizedBox(
height: 50, width: 90,
width: 50, child: Column(
decoration: BoxDecoration( mainAxisSize: MainAxisSize.min,
color: ColorsManager.CircleImageBackground, mainAxisAlignment: MainAxisAlignment.center,
borderRadius: BorderRadius.circular(90), crossAxisAlignment: CrossAxisAlignment.center,
border: Border.all( children: [
color: ColorsManager.graysColor, SizedBox(
height: 123,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: ColorsManager.CircleImageBackground,
borderRadius: BorderRadius.circular(90),
border: Border.all(
color: ColorsManager.graysColor,
),
),
padding: const EdgeInsets.all(8),
child: imagePath.contains('.svg')
? SvgPicture.asset(
imagePath,
)
: Image.network(imagePath),
),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: Text(
title,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: context.textTheme.bodySmall?.copyWith(
color: titleColor ?? ColorsManager.blackColor,
fontSize: 12,
),
),
),
],
),
), ),
), if (deviceFunctions.isNotEmpty) ...[
padding: const EdgeInsets.all(8), const Divider(height: 1),
child: imagePath.contains('.svg') ListView.builder(
? SvgPicture.asset( shrinkWrap: true,
imagePath, physics: const NeverScrollableScrollPhysics(),
) padding:
: Image.network(imagePath), const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
itemCount: deviceFunctions.length,
itemBuilder: (context, index) {
final function = deviceFunctions[index];
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
'${function.operationName}: ${function.valueDescription}',
style: context.textTheme.bodySmall?.copyWith(
fontSize: 9,
color: ColorsManager.textGray,
height: 1.2,
),
overflow: TextOverflow.ellipsis,
),
),
InkWell(
onTap: () {
context.read<RoutineBloc>().add(
RemoveFunction(function),
);
},
child: const Padding(
padding: EdgeInsets.all(2),
child: Icon(
Icons.close,
size: 12,
color: ColorsManager.textGray,
),
),
),
],
);
},
),
],
],
), ),
const SizedBox( ),
height: 8, );
), },
Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: Text(
title,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: context.textTheme.bodySmall?.copyWith(
color: titleColor ?? ColorsManager.blackColor,
fontSize: 12,
),
),
),
],
),
),
); );
} }