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

add custom scroll view to access managment screen and devices screen

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-08-27 03:29:35 +03:00
parent 7d700f47dd
commit 56edcaf788
8 changed files with 403 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
lib/pages/access_management/view/access_management.dart
View File

@ -15,6 +15,7 @@ import 'package:syncrow_web/web_layout/web_scaffold.dart';
class AccessManagementPage extends StatelessWidget { class AccessManagementPage extends StatelessWidget {
const AccessManagementPage({super.key}); const AccessManagementPage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;
@ -38,250 +39,34 @@ class AccessManagementPage extends StatelessWidget {
), ),
], ],
scaffoldBody: BlocProvider( scaffoldBody: BlocProvider(
create: (BuildContext context) => create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
AccessBloc()..add(FetchTableData()),
child: BlocConsumer<AccessBloc, AccessState>( child: BlocConsumer<AccessBloc, AccessState>(
listener: (context, state) {}, listener: (context, state) {},
builder: (context, state) { builder: (context, state) {
final accessBloc = BlocProvider.of<AccessBloc>(context); final accessBloc = BlocProvider.of<AccessBloc>(context);
final filteredData = accessBloc.filteredData; final filteredData = accessBloc.filteredData;
return state is AccessLoaded return state is AccessLoaded
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Container( : CustomScrollView(
padding: EdgeInsets.all(30), slivers: [
height: size.height, SliverToBoxAdapter(
width: size.width, child: Padding(
padding: const EdgeInsets.all(30),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( _buildTabSelector(context, accessBloc, size),
decoration: containerDecoration, const SizedBox(height: 20),
height: size.height * 0.05, _buildSearchFilters(context, accessBloc, size),
child: Flexible( const SizedBox(height: 20),
child: ListView.builder( _buildActionButtons(context, accessBloc, size),
scrollDirection: Axis.horizontal, const SizedBox(height: 20),
itemCount:
BlocProvider.of<AccessBloc>(context)
.tabs
.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected = index ==
BlocProvider.of<AccessBloc>(context)
.selectedIndex;
return InkWell(
onTap: () {
BlocProvider.of<AccessBloc>(context)
.add(TabChangedEvent(index));
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected
? Colors.blue
: Colors.transparent,
width: 2.0,
),
borderRadius: index == 0
? const BorderRadius.only(
topLeft:
Radius.circular(10),
bottomLeft:
Radius.circular(10))
: index == 3
? const BorderRadius.only(
topRight:
Radius.circular(10),
bottomRight:
Radius.circular(10))
: null,
),
padding: const EdgeInsets.only(
left: 10, right: 10),
child: Center(
child: Text(
BlocProvider.of<AccessBloc>(
context)
.tabs[index],
style: TextStyle(
color: isSelected
? Colors.blue
: Colors.black,
),
),
),
),
);
},
),
),
),
const SizedBox(
height: 20,
),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'Name',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: Colors.black,
fontSize: 13),
),
const SizedBox(
height: 5,
),
Container(
height: 43,
width: size.width * 0.15,
decoration: containerDecoration,
child: TextFormField(
controller: accessBloc.passwordName,
style: const TextStyle(
color: Colors.black),
decoration: textBoxDecoration()!
.copyWith(
hintText: 'Please enter'),
)),
], ],
), ),
const SizedBox(
width: 15,
),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: size,
endTime: () {
accessBloc.add(SelectTime(
context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(
context: context, isStart: true));
},
firstString:
BlocProvider.of<AccessBloc>(context)
.startTime,
secondString:
BlocProvider.of<AccessBloc>(context)
.endTime,
),
const SizedBox(
width: 15,
),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex: BlocProvider
.of<AccessBloc>(
context)
.selectedIndex, // Pass the selected tab index
passwordName: accessBloc
.passwordName.text
.toLowerCase(),
startTime: accessBloc
.effectiveTimeTimeStamp,
endTime: accessBloc
.expirationTimeTimeStamp));
},
borderRadius: 9,
child: const Text('Search'))),
),
const SizedBox(
width: 10,
),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(ResetSearch());
},
backgroundColor:
ColorsManager.whiteColors,
borderRadius: 9,
child: Text(
'Reset',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
), ),
), ),
), SliverFillRemaining(
),
],
),
const SizedBox(
height: 20,
),
Wrap(
children: [
Container(
width: size.width * 0.15,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: const Text(
'+ Create Visitor Password ')),
),
const SizedBox(
width: 10,
),
Container(
width: size.width * 0.12,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor:
ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
)))
],
),
const SizedBox(
height: 20,
),
Expanded(
child: DynamicTable( child: DynamicTable(
isEmpty: filteredData.isEmpty, isEmpty: filteredData.isEmpty,
withCheckBox: false, withCheckBox: false,
@ -307,12 +92,202 @@ class AccessManagementPage extends StatelessWidget {
item.passwordStatus.value item.passwordStatus.value
]; ];
}).toList(), }).toList(),
) ),
// : const Center(child: CircularProgressIndicator()), ),
)
], ],
);
},
),
), ),
); );
}))); }
Widget _buildTabSelector(
BuildContext context, AccessBloc accessBloc, Size size) {
return Container(
decoration: containerDecoration,
height: size.height * 0.05,
child: Flexible(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: accessBloc.tabs.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected = index == accessBloc.selectedIndex;
return InkWell(
onTap: () {
accessBloc.add(TabChangedEvent(index));
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected ? Colors.blue : Colors.transparent,
width: 2.0,
),
borderRadius: index == 0
? const BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10))
: index == accessBloc.tabs.length - 1
? const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10))
: null,
),
padding: const EdgeInsets.only(left: 10, right: 10),
child: Center(
child: Text(
accessBloc.tabs[index],
style: TextStyle(
color: isSelected ? Colors.blue : Colors.black,
),
),
),
),
);
},
),
),
);
}
Widget _buildSearchFilters(
BuildContext context, AccessBloc accessBloc, Size size) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.end,
textBaseline: TextBaseline.ideographic,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Name',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black, fontSize: 13),
),
const SizedBox(height: 5),
Container(
height: 43,
width: size.width * 0.15,
decoration: containerDecoration,
child: TextFormField(
controller: accessBloc.passwordName,
style: const TextStyle(color: Colors.black),
decoration:
textBoxDecoration()!.copyWith(hintText: 'Please enter'),
),
),
],
),
const SizedBox(width: 15),
DateTimeWebWidget(
icon: Assets.calendarIcon,
isRequired: false,
title: 'Access Time',
size: size,
endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false));
},
startTime: () {
accessBloc.add(SelectTime(context: context, isStart: true));
},
firstString: accessBloc.startTime,
secondString: accessBloc.endTime,
),
const SizedBox(width: 15),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(FilterDataEvent(
selectedTabIndex:
accessBloc.selectedIndex, // Pass the selected tab index
passwordName: accessBloc.passwordName.text.toLowerCase(),
startTime: accessBloc.effectiveTimeTimeStamp,
endTime: accessBloc.expirationTimeTimeStamp,
));
},
borderRadius: 9,
child: const Text('Search'),
),
),
),
const SizedBox(width: 10),
SizedBox(
height: 45,
width: size.width * 0.06,
child: Container(
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
accessBloc.add(ResetSearch());
},
backgroundColor: ColorsManager.whiteColors,
borderRadius: 9,
child: Text(
'Reset',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
),
),
],
);
}
Widget _buildActionButtons(
BuildContext context, AccessBloc accessBloc, Size size) {
return Wrap(
children: [
Container(
width: size.width * 0.15,
decoration: containerDecoration,
child: DefaultButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return const VisitorPasswordDialog();
},
).then((v) {
if (v != null) {
accessBloc.add(FetchTableData());
}
});
},
borderRadius: 8,
child: const Text('+ Create Visitor Password '),
),
),
const SizedBox(width: 10),
Container(
width: size.width * 0.12,
decoration: containerDecoration,
child: DefaultButton(
borderRadius: 8,
backgroundColor: ColorsManager.whiteColors,
child: Text(
'Admin Password',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: Colors.black),
),
),
)
],
);
} }
} }

18
lib/pages/common/custom_table.dart
View File

@ -47,11 +47,9 @@ class _DynamicTableState extends State<DynamicTable> {
void _toggleRowSelection(int index) { void _toggleRowSelection(int index) {
setState(() { setState(() {
// Deselect all rows
for (int i = 0; i < _selected.length; i++) { for (int i = 0; i < _selected.length; i++) {
_selected[i] = false; _selected[i] = false;
} }
// Select the clicked row
_selected[index] = true; _selected[index] = true;
if (widget.onRowSelected != null) { if (widget.onRowSelected != null) {
@ -64,12 +62,9 @@ class _DynamicTableState extends State<DynamicTable> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
decoration: widget.cellDecoration, decoration: widget.cellDecoration,
child: Padding( child: SingleChildScrollView(
padding: const EdgeInsets.all(2.0),
child: ListView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
children: [ child: SizedBox(
SizedBox(
width: widget.size.width, width: widget.size.width,
child: Column( child: Column(
children: [ children: [
@ -142,15 +137,13 @@ class _DynamicTableState extends State<DynamicTable> {
], ],
), ),
), ),
],
),
), ),
); );
} }
Widget _buildSelectAllCheckbox() { Widget _buildSelectAllCheckbox() {
return Container( return Container(
width: 50, // Fixed width to align with the checkbox column width: 50,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border.symmetric( border: Border.symmetric(
@ -159,14 +152,14 @@ class _DynamicTableState extends State<DynamicTable> {
), ),
child: Checkbox( child: Checkbox(
value: _selected.every((element) => element == true), value: _selected.every((element) => element == true),
onChanged: null, // Disabling the toggle as we're not using select all onChanged: null,
), ),
); );
} }
Widget _buildRowCheckbox(int index, double size) { Widget _buildRowCheckbox(int index, double size) {
return Container( return Container(
width: 50, // Fixed width to align with the checkbox column width: 50,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
height: size, height: size,
decoration: const BoxDecoration( decoration: const BoxDecoration(
@ -214,7 +207,6 @@ class _DynamicTableState extends State<DynamicTable> {
} }
Widget _buildTableCell(String content, double size) { Widget _buildTableCell(String content, double size) {
// Check if the content is a battery level percentage
bool isBatteryLevel = content.endsWith('%'); bool isBatteryLevel = content.endsWith('%');
double? batteryLevel; double? batteryLevel;

2
lib/pages/device_managment/ac/view/ac_device_control.dart
View File

@ -36,7 +36,7 @@ class AcDeviceControl extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

25
lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
View File

@ -48,12 +48,13 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
'Low Battery ($lowBatteryCount)', 'Low Battery ($lowBatteryCount)',
]; ];
return Container( return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
padding: isLargeScreenSize(context) padding: isLargeScreenSize(context)
? const EdgeInsets.all(30) ? const EdgeInsets.all(30)
: const EdgeInsets.all(15), : const EdgeInsets.all(15),
height: context.screenHeight,
width: context.screenWidth,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -77,8 +78,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
child: Center( child: Center(
child: DefaultButton( child: DefaultButton(
onPressed: () { onPressed: () {
final selectedDevice = final selectedDevice = context
context.read<DeviceManagementBloc>().selectedDevice; .read<DeviceManagementBloc>()
.selectedDevice;
if (selectedDevice != null) { if (selectedDevice != null) {
showDialog( showDialog(
context: context, context: context,
@ -92,8 +94,15 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
), ),
), ),
), ),
const SizedBox(height: 12), ],
Expanded( ),
),
),
SliverFillRemaining(
child: Padding(
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
child: DynamicTable( child: DynamicTable(
cellDecoration: containerDecoration, cellDecoration: containerDecoration,
onRowSelected: (index, isSelected, row) { onRowSelected: (index, isSelected, row) {
@ -136,8 +145,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
isEmpty: devicesToShow.isEmpty, isEmpty: devicesToShow.isEmpty,
), ),
), ),
],
), ),
],
); );
}, },
); );

18
lib/pages/device_managment/ceiling_sensor/view/ceiling_sensor_controls.dart
View File

@ -45,14 +45,18 @@ class CeilingSensorControls extends StatelessWidget
); );
}, },
onClose: () { onClose: () {
context.read<CeilingSensorBloc>().add(BackToCeilingGridViewEvent()); context
.read<CeilingSensorBloc>()
.add(BackToCeilingGridViewEvent());
}, },
); );
} else if (state is ShowCeilingDescriptionState) { } else if (state is ShowCeilingDescriptionState) {
return DescriptionView( return DescriptionView(
description: state.description, description: state.description,
onClose: () { onClose: () {
context.read<CeilingSensorBloc>().add(BackToCeilingGridViewEvent()); context
.read<CeilingSensorBloc>()
.add(BackToCeilingGridViewEvent());
}, },
); );
} else if (state is CeilingReportsFailedState) { } else if (state is CeilingReportsFailedState) {
@ -77,7 +81,7 @@ class CeilingSensorControls extends StatelessWidget
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),
@ -125,16 +129,14 @@ class CeilingSensorControls extends StatelessWidget
), ),
), ),
PresenceUpdateData( PresenceUpdateData(
value: value: (model.noBodyTime.toDouble() / 3600).roundToDouble(),
(model.noBodyTime.toDouble() / 3600).roundToDouble(),
title: 'Nobody Time:', title: 'Nobody Time:',
minValue: 0, minValue: 0,
maxValue: 300000, maxValue: 300000,
steps: 5000, steps: 5000,
description: 'hr', description: 'hr',
action: (int value) => context action: (int value) =>
.read<CeilingSensorBloc>() context.read<CeilingSensorBloc>().add(CeilingChangeValueEvent(
.add(CeilingChangeValueEvent(
code: 'none_body_time', code: 'none_body_time',
value: value, value: value,
))), ))),

2
lib/pages/device_managment/gateway/view/gateway_view.dart
View File

@ -34,7 +34,7 @@ class GateWayControls extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

2
lib/pages/device_managment/living_room_switch/view/living_room_device_control.dart
View File

@ -47,7 +47,7 @@ class LivingRoomDeviceControl extends StatelessWidget
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),

2
lib/pages/device_managment/wall_sensor/view/wall_sensor_conrtols.dart
View File

@ -75,7 +75,7 @@ class WallSensorControls extends StatelessWidget with HelperResponsiveLayout {
: isMedium : isMedium
? 2 ? 2
: 1, : 1,
mainAxisExtent: 133, mainAxisExtent: 140,
crossAxisSpacing: 12, crossAxisSpacing: 12,
mainAxisSpacing: 12, mainAxisSpacing: 12,
), ),