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

updated add device type

Browse Source
This commit is contained in:
hannathkadher
2024-11-23 20:24:15 +04:00
parent 42a7ee22b2
commit 797133e16e
1 changed files with 107 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
lib/pages/spaces_management/widgets/add_device_type_widget.dart
View File

@ -13,24 +13,27 @@ class AddDeviceWidget extends StatefulWidget {
final ValueChanged<List<SelectedProduct>>? onProductsSelected;
final List<SelectedProduct>? initialSelectedProducts;
const AddDeviceWidget(
{super.key, this.products, this.initialSelectedProducts, this.onProductsSelected});
const AddDeviceWidget({
super.key,
this.products,
this.initialSelectedProducts,
this.onProductsSelected,
});
@override
_AddDeviceWidgetState createState() => _AddDeviceWidgetState();
}
class _AddDeviceWidgetState extends State<AddDeviceWidget> {
late ScrollController _scrollController;
List<SelectedProduct> productCounts = [];
late final ScrollController _scrollController;
late List<SelectedProduct> productCounts;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
if (widget.initialSelectedProducts != null && widget.initialSelectedProducts!.isNotEmpty) {
productCounts = List.from(widget.initialSelectedProducts!);
}
productCounts =
widget.initialSelectedProducts != null ? List.from(widget.initialSelectedProducts!) : [];
}
@override
@ -41,86 +44,72 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
final size = MediaQuery.of(context).size;
return AlertDialog(
title: const Text('Add Devices'),
backgroundColor: ColorsManager.whiteColors,
content: Container(
width: size.width * 0.65,
height: size.height * 0.57, // Set width for the dialog
height: size.height * 0.57,
color: ColorsManager.textFieldGreyColor,
child: Column(
children: [
const SizedBox(height: 16.0),
const SizedBox(height: 16),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0), // Add horizontal padding
child: Scrollbar(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Scrollbar(
controller: _scrollController,
thumbVisibility: false,
child: GridView.builder(
controller: _scrollController,
thumbVisibility: false,
child: GridView.builder(
controller: _scrollController,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6, // Display 6 items in a row
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7, // Adjust the aspect ratio
),
itemCount: widget.products?.length ?? 0,
itemBuilder: (context, index) {
final deviceType = widget.products![index];
return _buildDeviceTypeTile(deviceType);
},
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7,
),
)),
itemCount: widget.products?.length ?? 0,
itemBuilder: (context, index) {
final product = widget.products![index];
return _buildDeviceTypeTile(product);
},
),
),
),
),
],
),
),
actions: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween, // Align cancel to the left and continue to the right
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 200, // Define a specific width for the button
child: DefaultButton(
onPressed: () {
Navigator.of(context).pop();
},
backgroundColor: ColorsManager.boxColor,
foregroundColor: ColorsManager.blackColor,
child: const Text('Cancel'),
),
),
SizedBox(
width: 200, // Define a specific width for the button
child: DefaultButton(
onPressed: () {
Navigator.of(context).pop();
},
backgroundColor: ColorsManager.secondaryColor,
foregroundColor: Colors.white,
child: const Text('Continue'),
),
),
_buildActionButton('Cancel', ColorsManager.boxColor, ColorsManager.blackColor, () {
Navigator.of(context).pop();
}),
_buildActionButton('Continue', ColorsManager.secondaryColor, Colors.white, () {
Navigator.of(context).pop();
if (widget.onProductsSelected != null) {
widget.onProductsSelected!(productCounts);
}
}),
],
),
],
);
}
Widget _buildDeviceTypeTile(ProductModel? deviceType) {
SelectedProduct? existingProduct = productCounts.firstWhere(
(product) => product.productId == deviceType?.uuid,
orElse: () => SelectedProduct(productId: deviceType!.uuid, count: 0),
Widget _buildDeviceTypeTile(ProductModel product) {
final selectedProduct = productCounts.firstWhere(
(p) => p.productId == product.uuid,
orElse: () => SelectedProduct(productId: product.uuid, count: 0),
);
return SizedBox(
width: 75,
height: 90, // Increase height if needed
height: 90,
child: Card(
elevation: 2,
color: ColorsManager.whiteColors,
@ -132,53 +121,25 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Fixed height container for the icon
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle, // Make it circular
color: ColorsManager.textFieldGreyColor, // Background color of the circle
border: Border.all(
color: ColorsManager.neutralGray, // Border color
width: 2, // Border width
),
), // Fixed height for the icon
child: Center(
child: SvgPicture.asset(
deviceType?.icon ?? Assets.sensors,
width: 45,
height: 45,
),
),
),
_buildDeviceIcon(product),
const SizedBox(height: 8),
// Fixed height container for the name
SizedBox(
height: 35, // Fixed height for the text (adjust as needed)
child: Text(
deviceType?.name ?? '',
style: context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor),
textAlign: TextAlign.center,
maxLines: 2, // Allow up to 2 lines for long names
overflow: TextOverflow.ellipsis, // Handle overflow
),
),
_buildDeviceName(product),
const SizedBox(height: 8),
// The custom counter widget aligned at the bottom
CounterWidget(
initialCount: existingProduct.count,
initialCount: selectedProduct.count,
onCountChanged: (newCount) {
setState(() {
if (newCount > 0) {
if (!productCounts.contains(existingProduct)) {
productCounts.add(SelectedProduct(productId: deviceType!.uuid, count: newCount));
if (!productCounts.contains(selectedProduct)) {
productCounts
.add(SelectedProduct(productId: product.uuid, count: newCount));
} else {
existingProduct.count = newCount;
selectedProduct.count = newCount;
}
} else {
productCounts.remove(deviceType!.uuid);
productCounts.removeWhere((p) => p.productId == product.uuid);
}
if (widget.onProductsSelected != null) {
widget.onProductsSelected!(productCounts);
}
@ -191,4 +152,56 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
),
);
}
Widget _buildDeviceIcon(ProductModel product) {
return Container(
height: 80,
width: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: ColorsManager.textFieldGreyColor,
border: Border.all(
color: ColorsManager.neutralGray,
width: 2,
),
),
child: Center(
child: SvgPicture.asset(
product.icon ?? Assets.sensors,
width: 45,
height: 45,
),
),
);
}
Widget _buildDeviceName(ProductModel product) {
return SizedBox(
height: 35,
child: Text(
product.name ?? '',
style: context.textTheme.bodySmall?.copyWith(color: ColorsManager.blackColor),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
);
}
Widget _buildActionButton(
String label,
Color backgroundColor,
Color foregroundColor,
VoidCallback onPressed,
) {
return SizedBox(
width: 200,
child: DefaultButton(
onPressed: onPressed,
backgroundColor: backgroundColor,
foregroundColor: foregroundColor,
child: Text(label),
),
);
}
}