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

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

@ -15,304 +15,279 @@ import 'package:syncrow_web/web_layout/web_scaffold.dart';
class AccessManagementPage extends StatelessWidget {
const AccessManagementPage({super.key});
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return WebScaffold(
enableMenuSideba: false,
appBarTitle: Row(
children: [
Text(
'Access Management',
style: Theme.of(context).textTheme.headlineLarge,
)
],
),
appBarBody: [
enableMenuSideba: false,
appBarTitle: Row(
children: [
Text(
'Physical Access',
style: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(color: Colors.white),
),
'Access Management',
style: Theme.of(context).textTheme.headlineLarge,
)
],
scaffoldBody: BlocProvider(
create: (BuildContext context) =>
AccessBloc()..add(FetchTableData()),
child: BlocConsumer<AccessBloc, AccessState>(
listener: (context, state) {},
builder: (context, state) {
final accessBloc = BlocProvider.of<AccessBloc>(context);
final filteredData = accessBloc.filteredData;
return state is AccessLoaded
? const Center(child: CircularProgressIndicator())
: Container(
padding: EdgeInsets.all(30),
height: size.height,
width: size.width,
),
appBarBody: [
Text(
'Physical Access',
style: Theme.of(context)
.textTheme
.headlineMedium!
.copyWith(color: Colors.white),
),
],
scaffoldBody: BlocProvider(
create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
child: BlocConsumer<AccessBloc, AccessState>(
listener: (context, state) {},
builder: (context, state) {
final accessBloc = BlocProvider.of<AccessBloc>(context);
final filteredData = accessBloc.filteredData;
return state is AccessLoaded
? const Center(child: CircularProgressIndicator())
: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: containerDecoration,
height: size.height * 0.05,
child: Flexible(
child: ListView.builder(
scrollDirection: Axis.horizontal,
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),
),
),
),
),
],
),
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(
isEmpty: filteredData.isEmpty,
withCheckBox: false,
size: size,
cellDecoration: containerDecoration,
headers: const [
'Name',
'Access Type',
'Access Period',
'Accessible Device',
'Authorizer',
'Authorization Date & Time',
'Access Status'
],
data: filteredData.map((item) {
return [
item.passwordName.toString(),
item.passwordType.value,
('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
item.deviceUuid.toString(),
'',
'',
item.passwordStatus.value
];
}).toList(),
)
// : const Center(child: CircularProgressIndicator()),
)
_buildTabSelector(context, accessBloc, size),
const SizedBox(height: 20),
_buildSearchFilters(context, accessBloc, size),
const SizedBox(height: 20),
_buildActionButtons(context, accessBloc, size),
const SizedBox(height: 20),
],
),
);
})));
),
),
SliverFillRemaining(
child: DynamicTable(
isEmpty: filteredData.isEmpty,
withCheckBox: false,
size: size,
cellDecoration: containerDecoration,
headers: const [
'Name',
'Access Type',
'Access Period',
'Accessible Device',
'Authorizer',
'Authorization Date & Time',
'Access Status'
],
data: filteredData.map((item) {
return [
item.passwordName.toString(),
item.passwordType.value,
('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
item.deviceUuid.toString(),
'',
'',
item.passwordStatus.value
];
}).toList(),
),
),
],
);
},
),
),
);
}
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),
),
),
)
],
);
}
}

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

@ -47,11 +47,9 @@ class _DynamicTableState extends State<DynamicTable> {
void _toggleRowSelection(int index) {
setState(() {
// Deselect all rows
for (int i = 0; i < _selected.length; i++) {
_selected[i] = false;
}
// Select the clicked row
_selected[index] = true;
if (widget.onRowSelected != null) {
@ -64,85 +62,80 @@ class _DynamicTableState extends State<DynamicTable> {
Widget build(BuildContext context) {
return Container(
decoration: widget.cellDecoration,
child: Padding(
padding: const EdgeInsets.all(2.0),
child: ListView(
scrollDirection: Axis.horizontal,
children: [
SizedBox(
width: widget.size.width,
child: Column(
children: [
Container(
decoration: widget.headerDecoration ??
BoxDecoration(color: Colors.grey[200]),
child: Row(
children: [
if (widget.withCheckBox) _buildSelectAllCheckbox(),
...widget.headers
.map((header) => _buildTableHeaderCell(header))
.toList(),
],
),
),
widget.isEmpty
? Expanded(
child: Column(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: widget.size.width,
child: Column(
children: [
Container(
decoration: widget.headerDecoration ??
BoxDecoration(color: Colors.grey[200]),
child: Row(
children: [
if (widget.withCheckBox) _buildSelectAllCheckbox(),
...widget.headers
.map((header) => _buildTableHeaderCell(header))
.toList(),
],
),
),
widget.isEmpty
? Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
Column(
children: [
Column(
children: [
SvgPicture.asset(Assets.emptyTable),
const SizedBox(
height: 15,
),
Text(
'No Devices',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor),
)
],
SvgPicture.asset(Assets.emptyTable),
const SizedBox(
height: 15,
),
Text(
'No Devices',
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager.grayColor),
)
],
),
],
),
)
: Expanded(
child: Container(
color: Colors.white,
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.data.length,
itemBuilder: (context, index) {
final row = widget.data[index];
return Row(
children: [
if (widget.withCheckBox)
_buildRowCheckbox(
index, widget.size.height * 0.10),
...row
.map((cell) => _buildTableCell(
cell.toString(),
widget.size.height * 0.10))
.toList(),
],
);
},
),
),
],
),
)
: Expanded(
child: Container(
color: Colors.white,
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.data.length,
itemBuilder: (context, index) {
final row = widget.data[index];
return Row(
children: [
if (widget.withCheckBox)
_buildRowCheckbox(
index, widget.size.height * 0.10),
...row
.map((cell) => _buildTableCell(
cell.toString(),
widget.size.height * 0.10))
.toList(),
],
);
},
),
],
),
),
],
),
),
],
),
),
),
);
@ -150,7 +143,7 @@ class _DynamicTableState extends State<DynamicTable> {
Widget _buildSelectAllCheckbox() {
return Container(
width: 50, // Fixed width to align with the checkbox column
width: 50,
padding: const EdgeInsets.all(8.0),
decoration: const BoxDecoration(
border: Border.symmetric(
@ -159,14 +152,14 @@ class _DynamicTableState extends State<DynamicTable> {
),
child: Checkbox(
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) {
return Container(
width: 50, // Fixed width to align with the checkbox column
width: 50,
padding: const EdgeInsets.all(8.0),
height: size,
decoration: const BoxDecoration(
@ -214,7 +207,6 @@ class _DynamicTableState extends State<DynamicTable> {
}
Widget _buildTableCell(String content, double size) {
// Check if the content is a battery level percentage
bool isBatteryLevel = content.endsWith('%');
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
? 2
: 1,
mainAxisExtent: 133,
mainAxisExtent: 140,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
),

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

@ -48,52 +48,61 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
'Low Battery ($lowBatteryCount)',
];
return Container(
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
height: context.screenHeight,
width: context.screenWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FilterWidget(
size: MediaQuery.of(context).size,
tabs: tabs,
selectedIndex: selectedIndex,
onTabChanged: (index) {
context
.read<DeviceManagementBloc>()
.add(SelectedFilterChanged(index));
},
),
const SizedBox(height: 20),
const DeviceSearchFilters(),
const SizedBox(height: 12),
Container(
height: 43,
width: isSmallScreenSize(context) ? double.infinity : 100,
decoration: containerDecoration,
child: Center(
child: DefaultButton(
onPressed: () {
final selectedDevice =
context.read<DeviceManagementBloc>().selectedDevice;
if (selectedDevice != null) {
showDialog(
context: context,
builder: (context) =>
DeviceControlDialog(device: selectedDevice),
);
}
},
borderRadius: 9,
child: const Text('Control'),
),
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FilterWidget(
size: MediaQuery.of(context).size,
tabs: tabs,
selectedIndex: selectedIndex,
onTabChanged: (index) {
context
.read<DeviceManagementBloc>()
.add(SelectedFilterChanged(index));
},
),
const SizedBox(height: 20),
const DeviceSearchFilters(),
const SizedBox(height: 12),
Container(
height: 43,
width: isSmallScreenSize(context) ? double.infinity : 100,
decoration: containerDecoration,
child: Center(
child: DefaultButton(
onPressed: () {
final selectedDevice = context
.read<DeviceManagementBloc>()
.selectedDevice;
if (selectedDevice != null) {
showDialog(
context: context,
builder: (context) =>
DeviceControlDialog(device: selectedDevice),
);
}
},
borderRadius: 9,
child: const Text('Control'),
),
),
),
],
),
),
const SizedBox(height: 12),
Expanded(
),
SliverFillRemaining(
child: Padding(
padding: isLargeScreenSize(context)
? const EdgeInsets.all(30)
: const EdgeInsets.all(15),
child: DynamicTable(
cellDecoration: containerDecoration,
onRowSelected: (index, isSelected, row) {
@ -136,8 +145,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
isEmpty: devicesToShow.isEmpty,
),
),
],
),
),
],
);
},
);

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

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

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

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