adding fucntions and values to routine bloc

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

View File

@ -1,5 +1,6 @@
import 'package:bloc/bloc.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/services/routines_api.dart';
@ -14,27 +15,55 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
on<AddToThenContainer>(_onAddToThenContainer);
on<LoadScenes>(_onLoadScenes);
on<LoadAutomation>(_onLoadAutomation);
on<AddFunction>(_onAddFunction);
on<RemoveFunction>(_onRemoveFunction);
on<ClearFunctions>(_onClearFunctions);
}
void _onAddToIfContainer(AddToIfContainer event, Emitter<RoutineState> emit) {
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));
}
}
void _onAddToThenContainer(AddToThenContainer event, Emitter<RoutineState> emit) {
void _onAddToThenContainer(
AddToThenContainer event, Emitter<RoutineState> emit) {
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));
}
}
bool _isDuplicate(List<Map<String, dynamic>> items, Map<String, dynamic> newItem) {
return items.any((item) => item['imagePath'] == newItem['imagePath'] && item['title'] == newItem['title']);
void _onAddFunction(AddFunction event, Emitter<RoutineState> emit) {
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));
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));
try {

View File

@ -42,3 +42,19 @@ class LoadAutomation extends RoutineEvent {
@override
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 {}

View File

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

View File

@ -1,62 +1,28 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/device_functions.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
class ACHelper {
static Future<Map<String, dynamic>?> showACFunctionsDialog(
static Future<void> showACFunctionsDialog(
BuildContext context,
List<DeviceFunction<dynamic>> functions,
) async {
List<ACFunction> acFunctions = functions.whereType<ACFunction>().toList();
String? selectedFunction;
dynamic selectedValue = 20;
String? selectedCondition = "==";
List<bool> _selectedConditions = [false, true, false];
// Track multiple selections using a map
Map<String, dynamic> selectedValues = {};
List<DeviceFunctionData> selectedFunctions = [];
return showDialog<Map<String, dynamic>?>(
await showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: _buildDialogContent(
context,
setState,
acFunctions,
selectedFunction,
selectedValue,
selectedCondition,
_selectedConditions,
(fn) => selectedFunction = fn,
(val) => selectedValue = val,
(cond) => selectedCondition = cond,
),
);
},
);
},
);
}
/// Build dialog content for AC functions dialog
static Widget _buildDialogContent(
BuildContext context,
StateSetter setState,
List<ACFunction> acFunctions,
String? selectedFunction,
dynamic selectedValue,
String? selectedCondition,
List<bool> selectedConditions,
Function(String?) onFunctionSelected,
Function(dynamic) onValueSelected,
Function(String?) onConditionSelected,
) {
return Container(
width: selectedFunction != null ? 600 : 360,
return Dialog(
child: Container(
width: 600,
height: 450,
decoration: BoxDecoration(
color: Colors.white,
@ -65,86 +31,39 @@ class ACHelper {
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',
'AC Functions',
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: ColorsManager.primaryColorWithOpacity,
fontWeight: FontWeight.bold,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 50),
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(
Expanded(
child: Row(
children: [
Expanded(
child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: acFunctions.length,
separatorBuilder: (context, index) => const Divider(
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,
@ -154,258 +73,147 @@ class ACHelper {
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: const Icon(
trailing: isSelected
? Icon(
Icons.check_circle,
color:
ColorsManager.primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () => setState(() => onFunctionSelected(function.code)),
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);
}
/// Build value selector for AC functions dialog
static Widget _buildValueSelector(
BuildContext context,
StateSetter setState,
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,
),
(context as Element).markNeedsBuild();
},
);
}
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),
),
Container(
height: 1,
width: double.infinity,
color: ColorsManager.greyColor,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'${selectedValue ?? 20}°C',
style: context.textTheme.headlineMedium!.copyWith(
'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,
),
),
),
],
),
],
),
),
);
}
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(
static Widget _buildValueSelector(
BuildContext context,
StateSetter setState,
List<dynamic> values,
ACFunction function,
dynamic selectedValue,
Function(dynamic) onValueSelected,
) {
return ListView.builder(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
final values = function.getOperationalValues();
return Container(
height: 200,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: 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>(
return RadioListTile<dynamic>(
value: value.value,
groupValue: selectedValue,
onChanged: (newValue) {
setState(() => onValueSelected(newValue));
},
),
onChanged: onValueSelected,
title: Text(value.description),
);
},
);
}
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,
),
),
),
),
);
static String _getValueDescription(ACFunction function, dynamic value) {
final values = function.getOperationalValues();
final selectedValue = values.firstWhere((v) => v.value == value);
return selectedValue.description;
}
}

View File

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

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/gang_switches/base_switch_function.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';
class OneGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions
.where(
(f) => f is OneGangSwitchFunction || f is OneGangCountdownFunction)
.toList();
String? selectedFunction;
dynamic selectedValue;
Map<String, dynamic> selectedValues = {};
List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>(
await showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
@ -24,7 +28,7 @@ class OneGangSwitchHelper {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
width: selectedFunction != null ? 600 : 360,
width: 600,
height: 450,
decoration: BoxDecoration(
color: Colors.white,
@ -50,21 +54,23 @@ class OneGangSwitchHelper {
color: ColorsManager.greyColor,
),
),
Flexible(
Expanded(
child: Row(
children: [
// Left side: Function list
Expanded(
child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length,
separatorBuilder: (context, index) =>
const Divider(
separatorBuilder: (_, __) => const Divider(
color: ColorsManager.dividerColor,
),
itemBuilder: (context, index) {
final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset(
function.icon,
width: 24,
@ -74,34 +80,79 @@ class OneGangSwitchHelper {
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: const Icon(
trailing: isSelected
? Icon(
Icons.check_circle,
color: ColorsManager
.primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () {
setState(() {
selectedFunction = function.code;
selectedValue = null;
});
if (isSelected) {
selectedValues.remove(function.code);
selectedFunctions.removeWhere(
(f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
},
);
},
),
),
if (selectedFunction != null)
// Right side: Value selector
Expanded(
child: Builder(
builder: (context) {
final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction)
as BaseSwitchFunction;
(f) => selectedValues.containsKey(f.code),
orElse: () => switchFunctions.first,
) as BaseSwitchFunction;
if (selectedFn is OneGangCountdownFunction) {
return _buildCountDownSelector(
context,
setState,
selectedValues[selectedFn.code] ?? 0,
selectedCondition,
selectedConditions,
(value) {
selectedValues[selectedFn.code] = value;
final functionData = DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName: selectedFn.operationName,
value: value,
condition: selectedCondition,
valueDescription: '${value} sec',
);
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(
shrinkWrap: false,
physics:
const AlwaysScrollableScrollPhysics(),
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
@ -117,11 +168,33 @@ class OneGangSwitchHelper {
),
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
setState(() {
selectedValue = 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,20 +214,8 @@ class OneGangSwitchHelper {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
height: 50,
width: selectedFunction != null ? 299 : 179,
decoration: const BoxDecoration(
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Cancel',
style: Theme.of(context)
@ -163,32 +224,24 @@ class OneGangSwitchHelper {
.copyWith(color: ColorsManager.greyColor),
),
),
),
),
GestureDetector(
onTap: () {
if (selectedFunction != null &&
selectedValue != null) {
Navigator.pop(context, {
'function': selectedFunction,
'value': selectedValue,
});
TextButton(
onPressed: selectedFunctions.isNotEmpty
? () {
for (final function in selectedFunctions) {
context
.read<RoutineBloc>()
.add(AddFunction(function));
}
},
child: SizedBox(
height: 50,
width: selectedFunction != null ? 299 : 179,
child: Center(
Navigator.pop(context, true);
}
: null,
child: Text(
'Confirm',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
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(">")],
);
}
}

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/gang_switches/base_switch_function.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';
class ThreeGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions
.where((f) =>
@ -18,10 +20,12 @@ class ThreeGangSwitchHelper {
f is ThreeGangCountdown2Function ||
f is ThreeGangCountdown3Function)
.toList();
String? selectedFunction;
dynamic selectedValue;
Map<String, dynamic> selectedValues = {};
List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>(
await showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
@ -29,7 +33,7 @@ class ThreeGangSwitchHelper {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
width: selectedFunction != null ? 600 : 360,
width: 600,
height: 450,
decoration: BoxDecoration(
color: Colors.white,
@ -55,21 +59,23 @@ class ThreeGangSwitchHelper {
color: ColorsManager.greyColor,
),
),
Flexible(
Expanded(
child: Row(
children: [
// Left side: Function list
Expanded(
child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length,
separatorBuilder: (context, index) =>
const Divider(
separatorBuilder: (_, __) => const Divider(
color: ColorsManager.dividerColor,
),
itemBuilder: (context, index) {
final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset(
function.icon,
width: 24,
@ -79,34 +85,81 @@ class ThreeGangSwitchHelper {
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: const Icon(
trailing: isSelected
? Icon(
Icons.check_circle,
color: ColorsManager
.primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () {
setState(() {
selectedFunction = function.code;
selectedValue = null;
});
if (isSelected) {
selectedValues.remove(function.code);
selectedFunctions.removeWhere(
(f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
},
);
},
),
),
if (selectedFunction != null)
// Right side: Value selector
Expanded(
child: Builder(
builder: (context) {
final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction)
as BaseSwitchFunction;
(f) => selectedValues.containsKey(f.code),
orElse: () => switchFunctions.first,
) as BaseSwitchFunction;
if (selectedFn is ThreeGangCountdown1Function ||
selectedFn is ThreeGangCountdown2Function ||
selectedFn is ThreeGangCountdown3Function) {
return _buildCountDownSelector(
context,
setState,
selectedValues[selectedFn.code] ?? 0,
selectedCondition,
selectedConditions,
(value) {
selectedValues[selectedFn.code] = value;
final functionData = DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName: selectedFn.operationName,
value: value,
condition: selectedCondition,
valueDescription: '${value} sec',
);
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(
shrinkWrap: false,
physics:
const AlwaysScrollableScrollPhysics(),
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
@ -122,11 +175,33 @@ class ThreeGangSwitchHelper {
),
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
setState(() {
selectedValue = 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,20 +221,8 @@ class ThreeGangSwitchHelper {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
height: 50,
width: selectedFunction != null ? 299 : 179,
decoration: const BoxDecoration(
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Cancel',
style: Theme.of(context)
@ -168,32 +231,24 @@ class ThreeGangSwitchHelper {
.copyWith(color: ColorsManager.greyColor),
),
),
),
),
GestureDetector(
onTap: () {
if (selectedFunction != null &&
selectedValue != null) {
Navigator.pop(context, {
'function': selectedFunction,
'value': selectedValue,
});
TextButton(
onPressed: selectedFunctions.isNotEmpty
? () {
for (final function in selectedFunctions) {
context
.read<RoutineBloc>()
.add(AddFunction(function));
}
},
child: SizedBox(
height: 50,
width: selectedFunction != null ? 299 : 179,
child: Center(
Navigator.pop(context, true);
}
: null,
child: Text(
'Confirm',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
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(">")],
);
}
}

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/gang_switches/base_switch_function.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';
class TwoGangSwitchHelper {
static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
static Future<void> showSwitchFunctionsDialog(
BuildContext context, List<DeviceFunction<dynamic>> functions) async {
List<DeviceFunction<dynamic>> switchFunctions = functions
.where((f) =>
@ -16,10 +18,12 @@ class TwoGangSwitchHelper {
f is TwoGangCountdown1Function ||
f is TwoGangCountdown2Function)
.toList();
String? selectedFunction;
dynamic selectedValue;
Map<String, dynamic> selectedValues = {};
List<DeviceFunctionData> selectedFunctions = [];
String? selectedCondition = "<";
List<bool> selectedConditions = [true, false, false];
return showDialog<Map<String, dynamic>?>(
await showDialog(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
@ -27,7 +31,7 @@ class TwoGangSwitchHelper {
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Container(
width: selectedFunction != null ? 600 : 360,
width: 600,
height: 450,
decoration: BoxDecoration(
color: Colors.white,
@ -53,21 +57,23 @@ class TwoGangSwitchHelper {
color: ColorsManager.greyColor,
),
),
Flexible(
Expanded(
child: Row(
children: [
// Left side: Function list
Expanded(
child: ListView.separated(
shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: switchFunctions.length,
separatorBuilder: (context, index) =>
const Divider(
separatorBuilder: (_, __) => const Divider(
color: ColorsManager.dividerColor,
),
itemBuilder: (context, index) {
final function = switchFunctions[index];
final isSelected =
selectedValues.containsKey(function.code);
return ListTile(
tileColor:
isSelected ? Colors.grey.shade100 : null,
leading: SvgPicture.asset(
function.icon,
width: 24,
@ -77,34 +83,80 @@ class TwoGangSwitchHelper {
function.operationName,
style: context.textTheme.bodyMedium,
),
trailing: const Icon(
trailing: isSelected
? Icon(
Icons.check_circle,
color: ColorsManager
.primaryColorWithOpacity,
size: 20,
)
: const Icon(
Icons.arrow_forward_ios,
size: 16,
color: ColorsManager.textGray,
),
onTap: () {
setState(() {
selectedFunction = function.code;
selectedValue = null;
});
if (isSelected) {
selectedValues.remove(function.code);
selectedFunctions.removeWhere(
(f) => f.function == function.code);
}
(context as Element).markNeedsBuild();
},
);
},
),
),
if (selectedFunction != null)
// Right side: Value selector
Expanded(
child: Builder(
builder: (context) {
final selectedFn = switchFunctions.firstWhere(
(f) => f.code == selectedFunction)
as BaseSwitchFunction;
(f) => selectedValues.containsKey(f.code),
orElse: () => switchFunctions.first,
) as BaseSwitchFunction;
if (selectedFn is TwoGangCountdown1Function ||
selectedFn is TwoGangCountdown2Function) {
return _buildCountDownSelector(
context,
setState,
selectedValues[selectedFn.code] ?? 0,
selectedCondition,
selectedConditions,
(value) {
selectedValues[selectedFn.code] = value;
final functionData = DeviceFunctionData(
entityId: selectedFn.deviceId,
function: selectedFn.code,
operationName: selectedFn.operationName,
value: value,
condition: selectedCondition,
valueDescription: '${value} sec',
);
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(
shrinkWrap: false,
physics:
const AlwaysScrollableScrollPhysics(),
itemCount: values.length,
itemBuilder: (context, index) {
final value = values[index];
@ -120,11 +172,33 @@ class TwoGangSwitchHelper {
),
trailing: Radio<dynamic>(
value: value.value,
groupValue: selectedValue,
groupValue:
selectedValues[selectedFn.code],
onChanged: (newValue) {
setState(() {
selectedValue = 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,20 +218,8 @@ class TwoGangSwitchHelper {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
height: 50,
width: selectedFunction != null ? 299 : 179,
decoration: const BoxDecoration(
border: Border(
right:
BorderSide(color: ColorsManager.greyColor),
),
),
child: Center(
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Cancel',
style: Theme.of(context)
@ -166,32 +228,24 @@ class TwoGangSwitchHelper {
.copyWith(color: ColorsManager.greyColor),
),
),
),
),
GestureDetector(
onTap: () {
if (selectedFunction != null &&
selectedValue != null) {
Navigator.pop(context, {
'function': selectedFunction,
'value': selectedValue,
});
TextButton(
onPressed: selectedFunctions.isNotEmpty
? () {
for (final function in selectedFunctions) {
context
.read<RoutineBloc>()
.add(AddFunction(function));
}
},
child: SizedBox(
height: 50,
width: selectedFunction != null ? 299 : 179,
child: Center(
Navigator.pop(context, true);
}
: null,
child: Text(
'Confirm',
style: Theme.of(context)
.textTheme
.bodyMedium!
.copyWith(
color:
ColorsManager.primaryColorWithOpacity,
),
),
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(">")],
);
}
}

View File

@ -15,3 +15,47 @@ abstract class DeviceFunction<T> {
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'],
);
}
}

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.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/extension/build_context_x.dart';
@ -46,14 +48,26 @@ class DraggableCard extends StatelessWidget {
}
Widget _buildCardContent(BuildContext context) {
return BlocBuilder<RoutineBloc, RoutineState>(
builder: (context, state) {
// Filter functions for this device
final deviceFunctions = state.selectedFunctions
.where((f) => f.entityId == deviceData?['deviceId'])
.toList();
return Card(
color: ColorsManager.whiteColors,
child: SizedBox(
height: 123,
width: 90,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 123,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
@ -72,9 +86,7 @@ class DraggableCard extends StatelessWidget {
)
: Image.network(imagePath),
),
const SizedBox(
height: 8,
),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 3),
child: Text(
@ -91,6 +103,55 @@ class DraggableCard extends StatelessWidget {
],
),
),
if (deviceFunctions.isNotEmpty) ...[
const Divider(height: 1),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding:
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,
),
),
),
],
);
},
),
],
],
),
),
);
},
);
}