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

adding basic widget for device managment

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-08-21 00:47:56 +03:00
parent bb959bcc61
commit f773c9e52c
12 changed files with 356 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lib/core/extension/build_context_x.dart Normal file
View File

@ -0,0 +1,17 @@
import 'package:flutter/material.dart';
extension BuildContextExt on BuildContext {
ThemeData get theme => Theme.of(this);
TextTheme get textTheme => Theme.of(this).textTheme;
AppBarTheme get appBarTheme => Theme.of(this).appBarTheme;
Size get screenSize => MediaQuery.of(this).size;
double get screenWidth => MediaQuery.of(this).size.width;
double get screenHeight => MediaQuery.of(this).size.height;
double get textScale => MediaQuery.textScalerOf(this).scale(1);
}

71
lib/main.dart
View File

@ -28,39 +28,44 @@ class MyApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MultiBlocProvider( return MultiBlocProvider(
providers: [ providers: [
BlocProvider(create: (context) => HomeBloc()), BlocProvider(create: (context) => HomeBloc()),
], ],
child: MaterialApp( child: MaterialApp(
debugShowCheckedModeBanner: false, // Hide debug banner debugShowCheckedModeBanner: false, // Hide debug banner
scrollBehavior: const MaterialScrollBehavior().copyWith( scrollBehavior: const MaterialScrollBehavior().copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.stylus, PointerDeviceKind.stylus,
PointerDeviceKind.unknown, PointerDeviceKind.unknown,
}, },
), ),
theme: ThemeData(
textTheme: const TextTheme(
bodySmall: TextStyle(
fontSize: 13,
color: ColorsManager.whiteColors,
fontWeight: FontWeight.bold),
bodyMedium: TextStyle(color: Colors.black87, fontSize: 14),
bodyLarge: TextStyle(fontSize: 16, color: Colors.white),
headlineSmall: TextStyle(color: Colors.black87, fontSize: 18),
headlineMedium: TextStyle(color: Colors.black87, fontSize: 20),
headlineLarge: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
theme: ThemeData( colorScheme: ColorScheme.fromSeed(
textTheme: const TextTheme( seedColor: Colors.deepPurple), // Set up color scheme
bodySmall: TextStyle(fontSize: 13, color: ColorsManager.whiteColors, fontWeight: FontWeight.bold), useMaterial3: true, // Enable Material 3
bodyMedium: TextStyle(color: Colors.black87, fontSize: 14), ),
bodyLarge: TextStyle(fontSize: 16, color: Colors.white), // home: AddDeviceDialog()
headlineSmall: TextStyle(color: Colors.black87, fontSize: 18), // home:isLoggedIn == 'Success' ?
headlineMedium: TextStyle(color: Colors.black87, fontSize: 20), home: const HomePage()
headlineLarge: TextStyle( // : const LoginPage(),
color: Colors.white, ));
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // Set up color scheme
useMaterial3: true, // Enable Material 3
),
// home: AddDeviceDialog()
home:isLoggedIn == 'Success' ? const HomePage() : const LoginPage(),
));
} }
} }

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

@ -6,6 +6,7 @@ import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
import 'package:syncrow_web/pages/common/custom_table.dart'; import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/date_time_widget.dart'; import 'package:syncrow_web/pages/common/date_time_widget.dart';
import 'package:syncrow_web/pages/common/default_button.dart'; import 'package:syncrow_web/pages/common/default_button.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart'; import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/const.dart'; import 'package:syncrow_web/utils/constants/const.dart';
@ -36,8 +37,11 @@ class AccessManagementPage extends StatelessWidget {
.copyWith(color: Colors.white), .copyWith(color: Colors.white),
), ),
], ],
scaffoldBody: BlocProvider(create: (BuildContext context) => AccessBloc()..add(FetchTableData()), scaffoldBody: BlocProvider(
child: BlocConsumer<AccessBloc, AccessState>(listener: (context, state) { create: (BuildContext context) =>
AccessBloc()..add(FetchTableData()),
child: BlocConsumer<AccessBloc, AccessState>(
listener: (context, state) {
if (state is FailedState) { if (state is FailedState) {
// CustomSnackBar.displaySnackBar( // CustomSnackBar.displaySnackBar(
// state.errorMessage // state.errorMessage
@ -52,60 +56,20 @@ class AccessManagementPage extends StatelessWidget {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Container( FilterWidget(
decoration: containerDecoration, size: size,
height: size.height * 0.05, tabs: accessBloc.tabs,
child: Flexible( selectedIndex: accessBloc.selectedIndex,
child: ListView.builder( onTabChanged: (index) {
scrollDirection: Axis.horizontal, accessBloc.add(TabChangedEvent(index));
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( const SizedBox(
height: 20, height: 20,
), ),
Row( Row(
children: [ children: [
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
@ -126,37 +90,43 @@ class AccessManagementPage extends StatelessWidget {
), ),
DateTimeWebWidget( DateTimeWebWidget(
isRequired: false, isRequired: false,
title: 'Access Time', title: 'Access Time',
size: size, size: size,
endTime: () { endTime: () {
accessBloc.add(SelectTime(context: context, isStart: false)); accessBloc.add(
}, SelectTime(context: context, isStart: false));
startTime: () { },
accessBloc.add(SelectTime(context: context, isStart: true)); startTime: () {
}, accessBloc.add(
firstString:BlocProvider.of<AccessBloc>(context).startTime , SelectTime(context: context, isStart: true));
secondString:BlocProvider.of<AccessBloc>(context).endTime , },
) , firstString:
BlocProvider.of<AccessBloc>(context).startTime,
secondString:
BlocProvider.of<AccessBloc>(context).endTime,
),
const SizedBox( const SizedBox(
width: 15, width: 15,
), ),
SizedBox( SizedBox(
width: size.width * 0.06, width: size.width * 0.06,
child: Column( child: Column(
children: [ children: [
Text(''), Text(''),
Container( Container(
decoration: containerDecoration, decoration: containerDecoration,
child: DefaultButton( child: DefaultButton(
onPressed: () { onPressed: () {
accessBloc.add(FilterDataEvent( accessBloc.add(FilterDataEvent(
passwordName: accessBloc.passwordName.text, passwordName:
startTime: accessBloc.effectiveTimeTimeStamp, accessBloc.passwordName.text,
endTime: accessBloc.expirationTimeTimeStamp startTime: accessBloc
)); .effectiveTimeTimeStamp,
}, borderRadius: 9, endTime: accessBloc
child: const Text('Search'))), .expirationTimeTimeStamp));
},
borderRadius: 9,
child: const Text('Search'))),
], ],
), ),
), ),
@ -198,18 +168,19 @@ class AccessManagementPage extends StatelessWidget {
Container( Container(
width: size.width * 0.15, width: size.width * 0.15,
decoration: containerDecoration, decoration: containerDecoration,
child: DefaultButton( child: DefaultButton(
onPressed: () { onPressed: () {
showDialog( showDialog(
context: context, context: context,
barrierDismissible: false, barrierDismissible: false,
builder: (BuildContext context) { builder: (BuildContext context) {
return const VisitorPasswordDialog(); return const VisitorPasswordDialog();
}, },
); );
}, },
borderRadius: 8, borderRadius: 8,
child: const Text('+ Create Visitor Password ')), child:
const Text('+ Create Visitor Password ')),
), ),
const SizedBox( const SizedBox(
width: 10, width: 10,
@ -234,41 +205,39 @@ class AccessManagementPage extends StatelessWidget {
), ),
Expanded( Expanded(
child: state is TableLoaded child: state is TableLoaded
? DynamicTable( ? DynamicTable(
withCheckBox: false, withCheckBox: false,
size: size, size: size,
cellDecoration: containerDecoration, cellDecoration: containerDecoration,
headers: const [ headers: const [
'Name', 'Name',
'Access Type', 'Access Type',
'Access Period', 'Access Period',
'Device Id', 'Device Id',
'Authorizer', 'Authorizer',
'Authorization Date & Time', 'Authorization Date & Time',
'Access Status' 'Access Status'
], ],
data: state.data.map((item) { data: state.data.map((item) {
return [ return [
item.passwodName.toString(), item.passwodName.toString(),
item.passwordType.value, item.passwordType.value,
('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'), ('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
item.deviceUuid.toString(), item.deviceUuid.toString(),
'', '',
'', '',
'' ''
]; ];
}).toList(), }).toList(),
) )
: const Center(child: CircularProgressIndicator()), : const Center(child: CircularProgressIndicator()),
) )
], ],
), ),
); );
}))); })));
} }
// Container TableWidget(Size size, TableLoaded state,AccessBloc accessBloc) { // Container TableWidget(Size size, TableLoaded state,AccessBloc accessBloc) {
// return Container( // return Container(
// decoration: containerDecoration, // decoration: containerDecoration,
@ -339,5 +308,3 @@ class AccessManagementPage extends StatelessWidget {
// ); // );
// } // }
} }

73
lib/pages/common/filter/filter_widget.dart Normal file
View File

@ -0,0 +1,73 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/style.dart';
class FilterWidget extends StatelessWidget {
const FilterWidget({
super.key,
required this.size,
required this.tabs,
required this.selectedIndex,
required this.onTabChanged,
});
final Size size;
final List<String> tabs;
final int selectedIndex;
final Function(int) onTabChanged;
@override
Widget build(BuildContext context) {
return Container(
decoration: containerDecoration,
height: size.height * 0.05,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tabs.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final isSelected = index == selectedIndex;
return InkWell(
onTap: () {
onTabChanged(index);
},
child: Container(
decoration: BoxDecoration(
color: ColorsManager.boxColor,
border: Border.all(
color: isSelected ? Colors.blue : Colors.transparent,
width: 2.0,
),
borderRadius: _getBorderRadius(index),
),
padding: const EdgeInsets.only(left: 10, right: 10),
child: Center(
child: Text(
tabs[index],
style: TextStyle(
color: isSelected ? Colors.blue : Colors.black,
),
),
),
),
);
},
),
);
}
BorderRadius? _getBorderRadius(int index) {
if (index == 0) {
return const BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
);
} else if (index == tabs.length - 1) {
return const BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
);
}
return null;
}
}

13
lib/pages/device_managment/bloc/device_managment_bloc.dart Normal file
View File

@ -0,0 +1,13 @@
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
part 'device_managment_event.dart';
part 'device_managment_state.dart';
class DeviceManagmentBloc extends Bloc<DeviceManagmentEvent, DeviceManagmentState> {
DeviceManagmentBloc() : super(DeviceManagmentInitial()) {
on<DeviceManagmentEvent>((event, emit) {
// TODO: implement event handler
});
}
}

8
lib/pages/device_managment/bloc/device_managment_event.dart Normal file
View File

@ -0,0 +1,8 @@
part of 'device_managment_bloc.dart';
sealed class DeviceManagmentEvent extends Equatable {
const DeviceManagmentEvent();
@override
List<Object> get props => [];
}

10
lib/pages/device_managment/bloc/device_managment_state.dart Normal file
View File

@ -0,0 +1,10 @@
part of 'device_managment_bloc.dart';
sealed class DeviceManagmentState extends Equatable {
const DeviceManagmentState();
@override
List<Object> get props => [];
}
final class DeviceManagmentInitial extends DeviceManagmentState {}

23
lib/pages/device_managment/view/device_managment_page.dart Normal file
View File

@ -0,0 +1,23 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/pages/device_managment/widgets/device_managment_body.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';
class DeviceManagementPage extends StatelessWidget {
const DeviceManagementPage({super.key});
@override
Widget build(BuildContext context) {
return WebScaffold(
enableMenuSideba: true,
appBarTitle: Row(
children: [
Text(
'Device Management',
style: Theme.of(context).textTheme.headlineLarge,
)
],
),
scaffoldBody: const DeviceManagementBody(),
);
}
}

57
lib/pages/device_managment/widgets/device_managment_body.dart Normal file
View File

@ -0,0 +1,57 @@
import 'package:flutter/material.dart';
import 'package:syncrow_web/core/extension/build_context_x.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/utils/style.dart';
class DeviceManagementBody extends StatelessWidget {
const DeviceManagementBody({super.key});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(30),
height: context.screenHeight,
width: context.screenWidth,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FilterWidget(
size: context.screenSize,
tabs: ['All', 'Online', 'Offline', 'Low Battery'],
selectedIndex: 0,
onTabChanged: (index) {},
),
const SizedBox(
height: 20,
),
Wrap(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Community',
style: context.textTheme.bodyMedium!.copyWith(
fontWeight: FontWeight.w400,
color: const Color(0xff000000)),
),
Container(
width: context.screenWidth * 0.15,
margin: const EdgeInsets.only(top: 8),
decoration: containerDecoration,
child: TextFormField(
//: accessBloc.passwordName,
style: const TextStyle(color: Colors.black),
decoration: textBoxDecoration()!
.copyWith(hintText: 'Please enter'),
)),
],
),
],
)
],
),
);
}
}

27
lib/pages/home/bloc/home_bloc.dart
View File

@ -5,6 +5,7 @@ import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:graphview/GraphView.dart'; import 'package:graphview/GraphView.dart';
import 'package:syncrow_web/pages/access_management/view/access_management.dart'; import 'package:syncrow_web/pages/access_management/view/access_management.dart';
import 'package:syncrow_web/pages/auth/model/user_model.dart'; import 'package:syncrow_web/pages/auth/model/user_model.dart';
import 'package:syncrow_web/pages/device_managment/view/device_managment_page.dart';
import 'package:syncrow_web/pages/home/bloc/home_event.dart'; import 'package:syncrow_web/pages/home/bloc/home_event.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart'; import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/pages/home/home_model/home_item_model.dart'; import 'package:syncrow_web/pages/home/home_model/home_item_model.dart';
@ -22,7 +23,6 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
HomeBloc() : super((HomeInitial())) { HomeBloc() : super((HomeInitial())) {
on<CreateNewNode>(_createNode); on<CreateNewNode>(_createNode);
fetchUserInfo(); fetchUserInfo();
} }
void _createNode(CreateNewNode event, Emitter<HomeState> emit) async { void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
@ -41,12 +41,10 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
emit(HomeUpdateTree(graph: graph, builder: builder)); emit(HomeUpdateTree(graph: graph, builder: builder));
} }
Future fetchUserInfo() async { Future fetchUserInfo() async {
try { try {
var uuid = var uuid =
await const FlutterSecureStorage().read(key: UserModel.userUuidKey); await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
user = await HomeApi().fetchUserInfo(uuid); user = await HomeApi().fetchUserInfo(uuid);
emit(HomeUserInfoLoaded(user!)); // Emit state after fetching user info emit(HomeUserInfoLoaded(user!)); // Emit state after fetching user info
} catch (e) { } catch (e) {
@ -70,8 +68,7 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
title: 'Space\nManagement', title: 'Space\nManagement',
icon: Assets.spaseManagementIcon, icon: Assets.spaseManagementIcon,
active: true, active: true,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.primaryColor, color: ColorsManager.primaryColor,
), ),
HomeItemModel( HomeItemModel(
@ -79,6 +76,9 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
icon: Assets.devicesIcon, icon: Assets.devicesIcon,
active: true, active: true,
onPress: (context) { onPress: (context) {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const DeviceManagementPage()),
);
}, },
color: ColorsManager.primaryColor, color: ColorsManager.primaryColor,
), ),
@ -86,40 +86,35 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
title: 'Move in', title: 'Move in',
icon: Assets.moveinIcon, icon: Assets.moveinIcon,
active: false, active: false,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.primaryColor, color: ColorsManager.primaryColor,
), ),
HomeItemModel( HomeItemModel(
title: 'Construction', title: 'Construction',
icon: Assets.constructionIcon, icon: Assets.constructionIcon,
active: false, active: false,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.primaryColor, color: ColorsManager.primaryColor,
), ),
HomeItemModel( HomeItemModel(
title: 'Energy', title: 'Energy',
icon: Assets.energyIcon, icon: Assets.energyIcon,
active: false, active: false,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.slidingBlueColor.withOpacity(0.2), color: ColorsManager.slidingBlueColor.withOpacity(0.2),
), ),
HomeItemModel( HomeItemModel(
title: 'Integrations', title: 'Integrations',
icon: Assets.integrationsIcon, icon: Assets.integrationsIcon,
active: false, active: false,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.slidingBlueColor.withOpacity(0.2), color: ColorsManager.slidingBlueColor.withOpacity(0.2),
), ),
HomeItemModel( HomeItemModel(
title: 'Asset', title: 'Asset',
icon: Assets.assetIcon, icon: Assets.assetIcon,
active: false, active: false,
onPress: (context) { onPress: (context) {},
},
color: ColorsManager.slidingBlueColor.withOpacity(0.2), color: ColorsManager.slidingBlueColor.withOpacity(0.2),
), ),
]; ];

16
lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart Normal file
View File

@ -0,0 +1,16 @@
import 'package:flutter/material.dart';
mixin HelperResponsiveLayout {
bool isSmallScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width < 700;
}
bool isMediumScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 700 &&
MediaQuery.of(context).size.width < 1200;
}
bool isLargeScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 1200;
}
}

24
lib/web_layout/web_app_bar.dart
View File

@ -12,11 +12,10 @@ class WebAppBar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) { return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
return Container( return Container(
height: 100, height: 100,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor), decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
child: Expanded(
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -52,17 +51,16 @@ class WebAppBar extends StatelessWidget {
const SizedBox( const SizedBox(
width: 10, width: 10,
), ),
if(HomeBloc.user!=null) if (HomeBloc.user != null)
Text( Text(
'${HomeBloc.user!.firstName.toString() ?? ''} ${HomeBloc.user!.lastName.toString() ?? ''} ', '${HomeBloc.user!.firstName.toString()} ${HomeBloc.user!.lastName.toString()} ',
style: Theme.of(context).textTheme.bodyLarge, style: Theme.of(context).textTheme.bodyLarge,
), ),
], ],
) )
], ],
), ),
), );
); });
});
} }
} }