ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix device status display in Control modal to reflect actual status

Browse Source
This commit is contained in:
mohammad
2025-07-02 10:14:54 +03:00
parent 423ad6e687
commit 7750290be4
1 changed files with 206 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,6 +50,9 @@ class _DynamicTableState extends State<DynamicTable> {
bool _selectAll = false; bool _selectAll = false;
final ScrollController _verticalScrollController = ScrollController(); final ScrollController _verticalScrollController = ScrollController();
final ScrollController _horizontalScrollController = ScrollController(); final ScrollController _horizontalScrollController = ScrollController();
static const double _fixedRowHeight = 60;
static const double _checkboxColumnWidth = 50;
static const double _settingsColumnWidth = 100;
@override @override
void initState() { void initState() {
@ -67,7 +70,6 @@ class _DynamicTableState extends State<DynamicTable> {
bool _compareListOfLists( bool _compareListOfLists(
List<List<dynamic>> oldList, List<List<dynamic>> newList) { List<List<dynamic>> oldList, List<List<dynamic>> newList) {
// Check if the old and new lists are the same
if (oldList.length != newList.length) return false; if (oldList.length != newList.length) return false;
for (int i = 0; i < oldList.length; i++) { for (int i = 0; i < oldList.length; i++) {
@ -104,73 +106,130 @@ class _DynamicTableState extends State<DynamicTable> {
context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows)); context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
} }
double get _totalTableWidth {
final hasSettings = widget.headers.contains('Settings');
final base = (widget.withCheckBox ? _checkboxColumnWidth : 0) +
(hasSettings ? _settingsColumnWidth : 0);
final regularCount = widget.headers.length - (hasSettings ? 1 : 0);
final regularWidth = (widget.size.width - base) / regularCount;
return base + regularCount * regularWidth;
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
width: widget.size.width,
height: widget.size.height,
decoration: widget.cellDecoration, decoration: widget.cellDecoration,
child: Scrollbar( child: ScrollConfiguration(
controller: _verticalScrollController, behavior: const ScrollBehavior().copyWith(scrollbars: false),
thumbVisibility: true,
trackVisibility: true,
child: Scrollbar( child: Scrollbar(
//fixed the horizontal scrollbar issue
controller: _horizontalScrollController, controller: _horizontalScrollController,
thumbVisibility: true, thumbVisibility: true,
trackVisibility: true, trackVisibility: true,
notificationPredicate: (notif) => notif.depth == 1, notificationPredicate: (notif) =>
notif.metrics.axis == Axis.horizontal,
child: SingleChildScrollView( child: SingleChildScrollView(
controller: _verticalScrollController, controller: _horizontalScrollController,
child: SingleChildScrollView( scrollDirection: Axis.horizontal,
controller: _horizontalScrollController, child: SizedBox(
scrollDirection: Axis.horizontal, width: _totalTableWidth,
child: SizedBox( child: Column(
width: widget.size.width, children: [
child: Column( Container(
children: [ height: _fixedRowHeight,
Container( decoration: widget.headerDecoration ??
decoration: widget.headerDecoration ?? const BoxDecoration(color: ColorsManager.boxColor),
const BoxDecoration( child: Row(
color: ColorsManager.boxColor, children: [
if (widget.withCheckBox)
_buildSelectAllCheckbox(_checkboxColumnWidth),
for (var i = 0; i < widget.headers.length; i++)
_buildTableHeaderCell(
widget.headers[i],
widget.headers[i] == 'Settings'
? _settingsColumnWidth
: (_totalTableWidth -
(widget.withCheckBox
? _checkboxColumnWidth
: 0) -
(widget.headers.contains('Settings')
? _settingsColumnWidth
: 0)) /
(widget.headers.length -
(widget.headers.contains('Settings')
? 1
: 0)),
), ),
child: Row( ],
children: [
if (widget.withCheckBox) _buildSelectAllCheckbox(),
...List.generate(widget.headers.length, (index) {
return _buildTableHeaderCell(
widget.headers[index], index);
})
//...widget.headers.map((header) => _buildTableHeaderCell(header)),
],
),
), ),
SizedBox( ),
width: widget.size.width,
child: widget.isEmpty Expanded(
? _buildEmptyState() child: widget.isEmpty
: Column( ? _buildEmptyState()
children: : Scrollbar(
List.generate(widget.data.length, (rowIndex) { controller: _verticalScrollController,
thumbVisibility: true,
trackVisibility: true,
notificationPredicate: (notif) =>
notif.metrics.axis == Axis.vertical,
child: ListView.builder(
controller: _verticalScrollController,
itemCount: widget.data.length,
itemBuilder: (_, rowIndex) {
final row = widget.data[rowIndex]; final row = widget.data[rowIndex];
return Row( return SizedBox(
children: [ height: _fixedRowHeight,
if (widget.withCheckBox) child: Row(
_buildRowCheckbox( children: [
rowIndex, widget.size.height * 0.08), if (widget.withCheckBox)
...row.asMap().entries.map((entry) { _buildRowCheckbox(
return _buildTableCell( rowIndex,
entry.value.toString(), _checkboxColumnWidth,
widget.size.height * 0.08, ),
rowIndex: rowIndex, for (var colIndex = 0;
columnIndex: entry.key, colIndex < row.length;
); colIndex++)
}).toList(), widget.headers[colIndex] == 'Settings'
], ? buildSettingsIcon(
width: _settingsColumnWidth,
onTap: () => widget
.onSettingsPressed
?.call(rowIndex),
)
: _buildTableCell(
row[colIndex].toString(),
width: widget.headers[
colIndex] ==
'Settings'
? _settingsColumnWidth
: (_totalTableWidth -
(widget.withCheckBox
? _checkboxColumnWidth
: 0) -
(widget.headers
.contains(
'Settings')
? _settingsColumnWidth
: 0)) /
(widget.headers.length -
(widget.headers
.contains(
'Settings')
? 1
: 0)),
rowIndex: rowIndex,
columnIndex: colIndex,
),
],
),
); );
}), },
), ),
), ),
], ),
), ],
), ),
), ),
), ),
@ -210,9 +269,10 @@ class _DynamicTableState extends State<DynamicTable> {
], ],
), ),
); );
Widget _buildSelectAllCheckbox() {
Widget _buildSelectAllCheckbox(double width) {
return Container( return Container(
width: 50, width: width,
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border.symmetric( border: Border.symmetric(
vertical: BorderSide(color: ColorsManager.boxDivider), vertical: BorderSide(color: ColorsManager.boxDivider),
@ -227,11 +287,11 @@ class _DynamicTableState extends State<DynamicTable> {
); );
} }
Widget _buildRowCheckbox(int index, double size) { Widget _buildRowCheckbox(int index, double width) {
return Container( return Container(
width: 50, width: width,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
height: size, height: _fixedRowHeight,
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border( border: Border(
bottom: BorderSide( bottom: BorderSide(
@ -253,50 +313,47 @@ class _DynamicTableState extends State<DynamicTable> {
); );
} }
Widget _buildTableHeaderCell(String title, int index) { Widget _buildTableHeaderCell(String title, double width) {
return Expanded( return Container(
child: Container( width: width,
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border.symmetric( border: Border.symmetric(
vertical: BorderSide(color: ColorsManager.boxDivider), vertical: BorderSide(color: ColorsManager.boxDivider),
),
), ),
constraints: const BoxConstraints.expand(height: 40), ),
alignment: Alignment.centerLeft, constraints: BoxConstraints(minHeight: 40, maxHeight: _fixedRowHeight),
child: Padding( alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric( child: Padding(
horizontal: index == widget.headers.length - 1 ? 12 : 8.0, padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
vertical: 4), child: Text(
child: Text( title,
title, style: context.textTheme.titleSmall!.copyWith(
style: context.textTheme.titleSmall!.copyWith( color: ColorsManager.grayColor,
color: ColorsManager.grayColor, fontSize: 12,
fontSize: 12, fontWeight: FontWeight.w400,
fontWeight: FontWeight.w400,
),
maxLines: 2,
), ),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
), ),
); );
} }
Widget _buildTableCell(String content, double size, Widget _buildTableCell(String content,
{required int rowIndex, required int columnIndex}) { {required double width,
required int rowIndex,
required int columnIndex}) {
bool isBatteryLevel = content.endsWith('%'); bool isBatteryLevel = content.endsWith('%');
double? batteryLevel; double? batteryLevel;
if (isBatteryLevel) { if (isBatteryLevel) {
batteryLevel = double.tryParse(content.replaceAll('%', '').trim()); batteryLevel = double.tryParse(content.replaceAll('%', '').trim());
} }
bool isSettingsColumn = widget.headers[columnIndex] == 'Settings'; bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
if (isSettingsColumn) { if (isSettingsColumn) {
return buildSettingsIcon( return buildSettingsIcon(
width: 120, width: width, onTap: () => widget.onSettingsPressed?.call(rowIndex));
height: 60,
iconSize: 40,
onTap: () => widget.onSettingsPressed?.call(rowIndex),
);
} }
Color? statusColor; Color? statusColor;
@ -320,92 +377,82 @@ class _DynamicTableState extends State<DynamicTable> {
statusColor = Colors.black; statusColor = Colors.black;
} }
return Expanded( return Container(
child: Container( width: width,
height: size, height: _fixedRowHeight,
padding: const EdgeInsets.all(5.0), padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
decoration: const BoxDecoration( decoration: const BoxDecoration(
border: Border( border: Border(
bottom: BorderSide( bottom: BorderSide(
color: ColorsManager.boxDivider, color: ColorsManager.boxDivider,
width: 1.0, width: 1.0,
),
), ),
color: Colors.white,
), ),
alignment: Alignment.centerLeft, color: Colors.white,
child: Text( ),
content, alignment: Alignment.centerLeft,
style: TextStyle( child: Text(
color: (batteryLevel != null && batteryLevel < 20) content,
? ColorsManager.red style: TextStyle(
: (batteryLevel != null && batteryLevel > 20) color: (batteryLevel != null && batteryLevel < 20)
? ColorsManager.green ? ColorsManager.red
: statusColor, : (batteryLevel != null && batteryLevel > 20)
fontSize: 13, ? ColorsManager.green
fontWeight: FontWeight.w400), : statusColor,
maxLines: 2, fontSize: 13,
fontWeight: FontWeight.w400,
), ),
maxLines: 2,
overflow: TextOverflow.ellipsis,
), ),
); );
} }
Widget buildSettingsIcon( Widget buildSettingsIcon({required double width, VoidCallback? onTap}) {
{double width = 120, return Container(
double height = 60, width: width,
double iconSize = 40, height: _fixedRowHeight,
VoidCallback? onTap}) { padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
return Column( decoration: const BoxDecoration(
children: [ color: ColorsManager.whiteColors,
Container( border: Border(
padding: const EdgeInsets.only(top: 10, bottom: 15, left: 10), bottom: BorderSide(
margin: const EdgeInsets.only(right: 15), color: ColorsManager.boxDivider,
decoration: const BoxDecoration( width: 1.0,
color: ColorsManager.whiteColors,
border: Border(
bottom: BorderSide(
color: ColorsManager.boxDivider,
width: 1.0,
),
),
), ),
width: width, ),
child: Padding( ),
padding: const EdgeInsets.only( child: Align(
right: 16.0, alignment: Alignment.centerLeft,
left: 17.0, child: Container(
), width: 50,
child: Container( decoration: BoxDecoration(
width: 50, color: const Color(0xFFF7F8FA),
decoration: BoxDecoration( borderRadius: BorderRadius.circular(20),
color: const Color(0xFFF7F8FA), boxShadow: [
borderRadius: BorderRadius.circular(height / 2), BoxShadow(
boxShadow: [ color: Colors.black.withOpacity(0.17),
BoxShadow( blurRadius: 14,
color: Colors.black.withOpacity(0.17), offset: const Offset(0, 4),
blurRadius: 14,
offset: const Offset(0, 4),
),
],
), ),
child: InkWell( ],
onTap: onTap, ),
child: Padding( child: InkWell(
padding: const EdgeInsets.all(8.0), onTap: onTap,
child: Center( child: Padding(
child: SvgPicture.asset( padding: EdgeInsets.all(8.0),
Assets.settings, child: Center(
width: 40, child: SvgPicture.asset(
height: 22, Assets.settings,
color: ColorsManager.primaryColor, width: 40,
), height: 20,
), color: ColorsManager.primaryColor,
), ),
), ),
), ),
), ),
), ),
], ),
); );
} }
} }