mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 15:17:31 +00:00
updated add device type
This commit is contained in:
@ -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
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||||
child: Scrollbar(
|
||||
controller: _scrollController,
|
||||
thumbVisibility: false,
|
||||
child: GridView.builder(
|
||||
controller: _scrollController,
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 6, // Display 6 items in a row
|
||||
crossAxisCount: 6,
|
||||
mainAxisSpacing: 10,
|
||||
crossAxisSpacing: 10,
|
||||
childAspectRatio: 0.7, // Adjust the aspect ratio
|
||||
childAspectRatio: 0.7,
|
||||
),
|
||||
itemCount: widget.products?.length ?? 0,
|
||||
itemBuilder: (context, index) {
|
||||
final deviceType = widget.products![index];
|
||||
return _buildDeviceTypeTile(deviceType);
|
||||
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: () {
|
||||
_buildActionButton('Cancel', ColorsManager.boxColor, ColorsManager.blackColor, () {
|
||||
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: () {
|
||||
}),
|
||||
_buildActionButton('Continue', ColorsManager.secondaryColor, Colors.white, () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
backgroundColor: ColorsManager.secondaryColor,
|
||||
foregroundColor: Colors.white,
|
||||
child: const Text('Continue'),
|
||||
),
|
||||
),
|
||||
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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user