ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-16 01:56:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented side tree to devices and rountines screen

Browse Source
This commit is contained in:
Abdullah Alassaf
2025-01-04 17:45:15 +03:00
parent 0341844ea9
commit a98f7e77a3
88 changed files with 1551 additions and 1202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,44 @@
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:go_router/go_router.dart';
import 'package:graphview/GraphView.dart';
// import 'package:graphview/GraphView.dart';
import 'package:syncrow_web/pages/auth/model/user_model.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/home_model/home_item_model.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/services/home_api.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/routes_const.dart';
class HomeBloc extends Bloc<HomeEvent, HomeState> {
final Graph graph = Graph()..isTree = true;
final BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
List<Node> sourcesList = [];
List<Node> destinationsList = [];
// final Graph graph = Graph()..isTree = true;
// final BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
// List<Node> sourcesList = [];
// List<Node> destinationsList = [];
UserModel? user;
HomeBloc() : super((HomeInitial())) {
on<CreateNewNode>(_createNode);
// on<CreateNewNode>(_createNode);
on<FetchUserInfo>(_fetchUserInfo);
}
void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
emit(HomeInitial());
sourcesList.add(event.sourceNode);
destinationsList.add(event.destinationNode);
for (int i = 0; i < sourcesList.length; i++) {
graph.addEdge(sourcesList[i], destinationsList[i]);
}
// void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
// emit(HomeInitial());
// sourcesList.add(event.sourceNode);
// destinationsList.add(event.destinationNode);
// for (int i = 0; i < sourcesList.length; i++) {
// graph.addEdge(sourcesList[i], destinationsList[i]);
// }
builder
..siblingSeparation = (100)
..levelSeparation = (150)
..subtreeSeparation = (150)
..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
emit(HomeUpdateTree(graph: graph, builder: builder));
}
// builder
// ..siblingSeparation = (100)
// ..levelSeparation = (150)
// ..subtreeSeparation = (150)
// ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
// emit(HomeUpdateTree(graph: graph, builder: builder));
// }
Future _fetchUserInfo(FetchUserInfo event, Emitter<HomeState> emit) async {
try {

20
lib/pages/home/bloc/home_event.dart
View File

@ -1,5 +1,5 @@
import 'package:equatable/equatable.dart';
import 'package:graphview/GraphView.dart';
// import 'package:graphview/GraphView.dart';
abstract class HomeEvent extends Equatable {
const HomeEvent();
@ -8,16 +8,16 @@ abstract class HomeEvent extends Equatable {
List<Object> get props => [];
}
class CreateNewNode extends HomeEvent {
final Node sourceNode;
final Node destinationNode;
const CreateNewNode(
{required this.sourceNode, required this.destinationNode});
// class CreateNewNode extends HomeEvent {
// final Node sourceNode;
// final Node destinationNode;
// const CreateNewNode(
// {required this.sourceNode, required this.destinationNode});
@override
List<Object> get props => [sourceNode, destinationNode];
}
// @override
// List<Object> get props => [sourceNode, destinationNode];
// }
class FetchUserInfo extends HomeEvent {
const FetchUserInfo();
}
}

24
lib/pages/home/bloc/home_state.dart
View File

@ -1,5 +1,5 @@
import 'package:equatable/equatable.dart';
import 'package:graphview/GraphView.dart';
// import 'package:graphview/GraphView.dart';
abstract class HomeState extends Equatable {
const HomeState();
@ -10,17 +10,17 @@ abstract class HomeState extends Equatable {
class HomeInitial extends HomeState {}
class HomeCounterState extends HomeState {
final int counter;
const HomeCounterState(this.counter);
}
// class HomeCounterState extends HomeState {
// final int counter;
// const HomeCounterState(this.counter);
// }
class HomeUpdateTree extends HomeState {
final Graph graph;
final BuchheimWalkerConfiguration builder;
// class HomeUpdateTree extends HomeState {
// final Graph graph;
// final BuchheimWalkerConfiguration builder;
const HomeUpdateTree({required this.graph, required this.builder});
// const HomeUpdateTree({required this.graph, required this.builder});
@override
List<Object> get props => [graph, builder];
}
// @override
// List<Object> get props => [graph, builder];
// }

67
lib/pages/home/view/home_page_mobile.dart
View File

@ -41,8 +41,7 @@ class HomeMobilePage extends StatelessWidget {
SizedBox(height: size.height * 0.05),
const Text(
'ACCESS YOUR APPS',
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
),
const SizedBox(height: 30),
Expanded(
@ -51,9 +50,8 @@ class HomeMobilePage extends StatelessWidget {
height: size.height * 0.6,
width: size.width * 0.68,
child: GridView.builder(
itemCount: 8,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
itemCount: 3,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
@ -65,8 +63,7 @@ class HomeMobilePage extends StatelessWidget {
active: homeItems[index]['active'],
name: homeItems[index]['title'],
img: homeItems[index]['icon'],
onTap: () =>
homeBloc.homeItems[index].onPress(context),
onTap: () => homeBloc.homeItems[index].onPress(context),
);
},
),
@ -97,33 +94,33 @@ class HomeMobilePage extends StatelessWidget {
'icon': Assets.devicesIcon,
'active': true,
},
{
'title': 'Move in',
'icon': Assets.moveinIcon,
'active': false,
},
{
'title': 'Construction',
'icon': Assets.constructionIcon,
'active': false,
},
{
'title': 'Energy',
'icon': Assets.energyIcon,
'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
'active': false,
},
{
'title': 'Integrations',
'icon': Assets.integrationsIcon,
'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
'active': false,
},
{
'title': 'Asset',
'icon': Assets.assetIcon,
'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
'active': false,
},
// {
// 'title': 'Move in',
// 'icon': Assets.moveinIcon,
// 'active': false,
// },
// {
// 'title': 'Construction',
// 'icon': Assets.constructionIcon,
// 'active': false,
// },
// {
// 'title': 'Energy',
// 'icon': Assets.energyIcon,
// 'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
// 'active': false,
// },
// {
// 'title': 'Integrations',
// 'icon': Assets.integrationsIcon,
// 'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
// 'active': false,
// },
// {
// 'title': 'Asset',
// 'icon': Assets.assetIcon,
// 'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
// 'active': false,
// },
];
}

73
lib/pages/home/view/home_page_web.dart
View File

@ -32,43 +32,48 @@ class HomeWebPage extends StatelessWidget {
scaffoldBody: SizedBox(
height: size.height,
width: size.width,
child: Column(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: size.height * 0.1),
Text(
'ACCESS YOUR APPS',
style: Theme.of(context)
.textTheme
.headlineLarge!
.copyWith(color: Colors.black, fontSize: 40),
),
const SizedBox(height: 30),
Expanded(
flex: 4,
child: SizedBox(
height: size.height * 0.6,
width: size.width * 0.68,
child: GridView.builder(
itemCount: 3, //8
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
childAspectRatio: 1.5,
),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeBloc.homeItems[index].active!,
name: homeBloc.homeItems[index].title!,
img: homeBloc.homeItems[index].icon!,
onTap: () => homeBloc.homeItems[index].onPress(context),
);
},
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: size.height * 0.1),
Text(
'ACCESS YOUR APPS',
style: Theme.of(context)
.textTheme
.headlineLarge!
.copyWith(color: Colors.black, fontSize: 40),
),
),
const SizedBox(height: 30),
Expanded(
flex: 4,
child: SizedBox(
height: size.height * 0.6,
width: size.width * 0.68,
child: GridView.builder(
itemCount: 3, //8
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
childAspectRatio: 1.5,
),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeBloc.homeItems[index].active!,
name: homeBloc.homeItems[index].title!,
img: homeBloc.homeItems[index].icon!,
onTap: () => homeBloc.homeItems[index].onPress(context),
);
},
),
),
),
],
),
],
),

362
lib/pages/home/view/tree_page.dart
View File

@ -1,185 +1,185 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:graphview/GraphView.dart';
import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_event.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
// import 'package:flutter/material.dart';
// import 'package:flutter_bloc/flutter_bloc.dart';
// import 'package:graphview/GraphView.dart';
// import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
// import 'package:syncrow_web/pages/home/bloc/home_event.dart';
// import 'package:syncrow_web/pages/home/bloc/home_state.dart';
class TreeWidget extends StatelessWidget {
const TreeWidget({super.key});
// class TreeWidget extends StatelessWidget {
// const TreeWidget({super.key});
@override
Widget build(BuildContext context) {
// final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
String firstNodeName = '';
String secondNodeName = '';
// @override
// Widget build(BuildContext context) {
// // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
// String firstNodeName = '';
// String secondNodeName = '';
return SafeArea(
child: Container(
padding: const EdgeInsets.all(24),
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height,
alignment: AlignmentDirectional.center,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
if (state is HomeInitial) {
return Wrap(
children: [
SizedBox(
width: 100,
child: TextFormField(
decoration: const InputDecoration(
labelText: "Subtree separation"),
onChanged: (text) {
firstNodeName = text;
},
),
),
const SizedBox(
width: 8,
),
Container(
width: 100,
child: TextFormField(
decoration: InputDecoration(labelText: "Node Name"),
onChanged: (text) {
secondNodeName = text;
},
),
),
ElevatedButton(
onPressed: () {
final node1 = Node.Id(firstNodeName);
final node2 = Node.Id(secondNodeName);
context.read<HomeBloc>().add(CreateNewNode(
sourceNode: node1, destinationNode: node2));
},
child: Text("Add"),
)
],
);
}
if (state is HomeUpdateTree) {
return Expanded(
child: InteractiveViewer(
constrained: false,
boundaryMargin: const EdgeInsets.all(100),
minScale: 0.01,
maxScale: 5.6,
child: GraphView(
graph: state.graph,
algorithm: BuchheimWalkerAlgorithm(
state.builder, TreeEdgeRenderer(state.builder)),
paint: Paint()
..color = Colors.green
..strokeWidth = 1
..style = PaintingStyle.stroke,
builder: (Node node) {
// I can decide what widget should be shown here based on the id
var nodeName = node.key!.value;
return rectangleWidget(nodeName, node, context);
},
)),
);
} else {
return Container();
}
})
],
),
),
);
}
}
// return SafeArea(
// child: Container(
// padding: const EdgeInsets.all(24),
// width: MediaQuery.sizeOf(context).width,
// height: MediaQuery.sizeOf(context).height,
// alignment: AlignmentDirectional.center,
// child: Column(
// mainAxisSize: MainAxisSize.max,
// crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisAlignment: MainAxisAlignment.center,
// children: [
// BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
// if (state is HomeInitial) {
// return Wrap(
// children: [
// SizedBox(
// width: 100,
// child: TextFormField(
// decoration: const InputDecoration(
// labelText: "Subtree separation"),
// onChanged: (text) {
// firstNodeName = text;
// },
// ),
// ),
// const SizedBox(
// width: 8,
// ),
// Container(
// width: 100,
// child: TextFormField(
// decoration: InputDecoration(labelText: "Node Name"),
// onChanged: (text) {
// secondNodeName = text;
// },
// ),
// ),
// ElevatedButton(
// onPressed: () {
// final node1 = Node.Id(firstNodeName);
// final node2 = Node.Id(secondNodeName);
// context.read<HomeBloc>().add(CreateNewNode(
// sourceNode: node1, destinationNode: node2));
// },
// child: Text("Add"),
// )
// ],
// );
// }
// if (state is HomeUpdateTree) {
// return Expanded(
// child: InteractiveViewer(
// constrained: false,
// boundaryMargin: const EdgeInsets.all(100),
// minScale: 0.01,
// maxScale: 5.6,
// child: GraphView(
// graph: state.graph,
// algorithm: BuchheimWalkerAlgorithm(
// state.builder, TreeEdgeRenderer(state.builder)),
// paint: Paint()
// ..color = Colors.green
// ..strokeWidth = 1
// ..style = PaintingStyle.stroke,
// builder: (Node node) {
// // I can decide what widget should be shown here based on the id
// var nodeName = node.key!.value;
// return rectangleWidget(nodeName, node, context);
// },
// )),
// );
// } else {
// return Container();
// }
// })
// ],
// ),
// ),
// );
// }
// }
Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
String nodeName = '';
return InkWell(
onTap: () {
showDialog(
context: blocContext,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Add a child'),
content: TextField(
decoration:
const InputDecoration(hintText: 'Enter your text here'),
onChanged: (value) {
nodeName = value;
},
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
TextButton(
onPressed: () {
if (nodeName.isNotEmpty) {
final newNode = Node.Id(nodeName);
blocContext.read<HomeBloc>().add(CreateNewNode(
sourceNode: node, destinationNode: newNode));
}
Navigator.of(context).pop();
},
child: Text('Add'),
),
],
);
},
);
},
child: Container(
width: MediaQuery.of(blocContext).size.width * 0.2,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Row(
children: [
const SizedBox(
child: Icon(
Icons.location_on,
color: Colors.blue,
size: 40.0,
),
),
const SizedBox(width: 10.0),
SizedBox(
child: Text(
text,
style: const TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
const Spacer(),
Container(
child: const Icon(
Icons.add_circle_outline,
color: Colors.grey,
size: 24.0,
),
),
],
),
),
);
}
// Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
// String nodeName = '';
// return InkWell(
// onTap: () {
// showDialog(
// context: blocContext,
// builder: (BuildContext context) {
// return AlertDialog(
// title: const Text('Add a child'),
// content: TextField(
// decoration:
// const InputDecoration(hintText: 'Enter your text here'),
// onChanged: (value) {
// nodeName = value;
// },
// ),
// actions: <Widget>[
// TextButton(
// onPressed: () {
// Navigator.of(context).pop();
// },
// child: Text('Close'),
// ),
// TextButton(
// onPressed: () {
// if (nodeName.isNotEmpty) {
// final newNode = Node.Id(nodeName);
// blocContext.read<HomeBloc>().add(CreateNewNode(
// sourceNode: node, destinationNode: newNode));
// }
// Navigator.of(context).pop();
// },
// child: Text('Add'),
// ),
// ],
// );
// },
// );
// },
// child: Container(
// width: MediaQuery.of(blocContext).size.width * 0.2,
// margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
// padding: EdgeInsets.all(20.0),
// decoration: BoxDecoration(
// color: Colors.white,
// borderRadius: BorderRadius.circular(10.0),
// boxShadow: [
// BoxShadow(
// color: Colors.grey.withOpacity(0.5),
// spreadRadius: 2,
// blurRadius: 5,
// offset: Offset(0, 3), // changes position of shadow
// ),
// ],
// ),
// child: Row(
// children: [
// const SizedBox(
// child: Icon(
// Icons.location_on,
// color: Colors.blue,
// size: 40.0,
// ),
// ),
// const SizedBox(width: 10.0),
// SizedBox(
// child: Text(
// text,
// style: const TextStyle(
// fontSize: 24.0,
// fontWeight: FontWeight.bold,
// ),
// ),
// ),
// const Spacer(),
// Container(
// child: const Icon(
// Icons.add_circle_outline,
// color: Colors.grey,
// size: 24.0,
// ),
// ),
// ],
// ),
// ),
// );
// }