ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

space widget

Browse Source
This commit is contained in:
hannathkadher
2024-10-08 13:48:00 +04:00
parent 062daa6c77
commit 76229788b3
1 changed files with 188 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
lib/pages/spaces_management/view/spaces_management_page.dart
View File

@ -1,14 +1,19 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/common/buttons/add_space_button.dart'; import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
import 'package:syncrow_web/pages/spaces_management/bloc/space_management_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.dart';
import 'package:syncrow_web/pages/spaces_management/bloc/space_management_state.dart';
import 'package:syncrow_web/pages/spaces_management/model/community_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
import 'package:syncrow_web/pages/spaces_management/model/space_model.dart'; import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
import 'package:syncrow_web/pages/spaces_management/view/curved_line_painter.dart'; import 'package:syncrow_web/pages/spaces_management/view/curved_line_painter.dart';
import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart'; import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
import 'package:syncrow_web/pages/spaces_management/view/sidebar_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/sidebar_widget.dart';
import 'package:syncrow_web/pages/spaces_management/view/space_card_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/space_card_widget.dart';
import 'package:syncrow_web/pages/spaces_management/view/space_container_widget.dart'; import 'package:syncrow_web/pages/spaces_management/widgets/space_container_widget.dart';
import 'package:syncrow_web/services/space_mana_api.dart'; import 'package:syncrow_web/services/space_mana_api.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';
class SpaceManagementPage extends StatefulWidget { class SpaceManagementPage extends StatefulWidget {
@override @override
@ -29,213 +34,207 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_loadCommunityAndSpacesData();
} }
// Function to load all communities and their respective spaces
void _loadCommunityAndSpacesData() async {
try {
// Fetch all communities
List<CommunityModel> communities = await _api.fetchCommunities();
for (CommunityModel community in communities) {
// Fetch spaces hierarchy for each community
List<SpaceModel> spaces = await _api.getSpaceHierarchy(community.uuid);
// Store the result in the communitySpaces map
community.spaces = spaces;
}
// Update the state to reflect loaded data
setState(() {
// Optionally, you can initialize something here based on the loaded data
});
} catch (e) {
debugPrint('Error loading communities and spaces: $e');
}
}
void _handleCommunitySelection(String community) {
// Handle community selection here
print("Selected Community: $community");
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size; Size screenSize = MediaQuery.of(context).size;
return Scaffold( return BlocProvider(
backgroundColor: ColorsManager.whiteColors, create: (context) => SpaceManagementBloc(CommunitySpaceManagementApi())
appBar: AppBar( ..add(LoadCommunityAndSpacesEvent()),
title: const Text('Space Management'), child: WebScaffold(
appBarTitle: Text(
'Space Management',
style: Theme.of(context).textTheme.headlineLarge,
),
enableMenuSideba: false,
scaffoldBody: BlocBuilder<SpaceManagementBloc, SpaceManagementState>(
builder: (context, state) {
if (state is SpaceManagementLoading) {
return const Center(child: CircularProgressIndicator());
} else if (state is SpaceManagementLoaded) {
return _buildLoadedState(
context, screenSize, state.communitySpaces);
} else if (state is SpaceManagementError) {
return Center(child: Text('Error: ${state.errorMessage}'));
}
return Container();
},
),
), ),
body: Stack( );
clipBehavior: Clip.none, }
children: [
Row( Widget _buildLoadedState(BuildContext context, Size screenSize,
children: [ Map<String, List<SpaceModel>> communitySpaces) {
// Sidebar for navigation and community list return Stack(
SidebarWidget( clipBehavior: Clip.none,
communitySpaces: communitySpaces, // Pass communitySpaces here children: [
onCommunitySelected: _handleCommunitySelection, Row(
), children: [
// Right Side: Community Structure Area SidebarWidget(
Expanded( communitySpaces: communitySpaces,
child: Container( onCommunitySelected: (community) {
decoration: const BoxDecoration( context.read<SpaceManagementBloc>().add(
color: ColorsManager.whiteColors, LoadCommunityAndSpacesEvent(), // Re-fetch or perform community-specific actions
border: Border( );
left: BorderSide( },
color: ColorsManager.whiteColors, ),
width: 1.0), // Light left border to match Expanded(
), child: _buildCommunityStructureArea(context, screenSize),
),
],
),
_buildGradientBorder(),
],
);
}
Widget _buildCommunityStructureArea(BuildContext context, Size screenSize) {
return Expanded(
child: Container(
decoration: const BoxDecoration(
color: ColorsManager.whiteColors,
border: Border(
left: BorderSide(
color: ColorsManager.whiteColors,
width: 1.0), // Light left border to match
),
),
// Background color for canvas
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0),
width: double.infinity,
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
boxShadow: [
BoxShadow(
color: ColorsManager.shadowBlackColor, // Subtle shadow
spreadRadius: 0, // No spread
blurRadius: 8, // Softer shadow edges
offset: Offset(0, 4), // Shadow only on the bottom
), ),
// Background color for canvas ],
child: Column( ),
crossAxisAlignment: CrossAxisAlignment.start, child: Text(
'Community Structure',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
// Use Expanded to ensure InteractiveViewer takes the available space
Flexible(
child: InteractiveViewer(
boundaryMargin: const EdgeInsets.all(500), // Adjusted to 500
minScale: 0.5, // Minimum zoom scale
maxScale: 2.5, // Maximum zoom scale
panEnabled: true, // Enable panning
scaleEnabled: true, // Enable zooming
child: Container(
width: 2000, // Large canvas
height: 2000, // Large canvas
color:
ColorsManager.transparentColor, // Transparent background
child: Stack(
clipBehavior: Clip.none,
children: [ children: [
Container( // Draw lines using a CustomPaint widget
padding: CustomPaint(
const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 27.0), size: Size(2000, 2000), // Explicit canvas size
width: double.infinity, painter: CurvedLinePainter(connections),
decoration: BoxDecoration(
color: ColorsManager.whiteColors,
boxShadow: [
BoxShadow(
color: ColorsManager
.shadowBlackColor, // Subtle shadow
spreadRadius: 0, // No spread
blurRadius: 8, // Softer shadow edges
offset: Offset(0, 4), // Shadow only on the bottom
),
],
),
child: Text(
'Community Structure',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
), ),
// Use Expanded to ensure InteractiveViewer takes the available space Center(
Expanded( child: spaces.isEmpty
child: InteractiveViewer( ? AddSpaceButton(
boundaryMargin: onTap: () {
const EdgeInsets.all(500), // Adjusted to 500 _showCreateSpaceDialog(screenSize);
minScale: 0.5, // Minimum zoom scale },
maxScale: 2.5, // Maximum zoom scale )
panEnabled: true, // Enable panning : Stack(
scaleEnabled: true, // Enable zooming children: spaces
child: Container( .asMap()
width: 2000, // Large canvas .entries
height: 2000, // Large canvas .map((entry) => SpaceCardWidget(
color: ColorsManager index: entry.key,
.transparentColor, // Transparent background screenSize: screenSize,
child: Stack( position: spaces[entry.key].position,
clipBehavior: Clip.none, isHovered:
children: [ spaces[entry.key].isHovered,
// Draw lines using a CustomPaint widget onPanUpdate:
CustomPaint( (int index, Offset delta) {
size: setState(() {
Size(2000, 2000), // Explicit canvas size spaces[index].position += delta;
painter: CurvedLinePainter(connections), });
),
Center(
child: spaces.isEmpty
? AddSpaceButton(
onTap: () {
_showCreateSpaceDialog(screenSize);
}, },
) onHoverChanged:
: Stack( (int index, bool isHovered) {
children: spaces setState(() {
.asMap() spaces[index].isHovered =
.entries isHovered;
.map((entry) => SpaceCardWidget( });
index: entry.key, },
screenSize: screenSize, onButtonTap: (int index,
position: spaces[entry.key] Offset newPosition,
.position, String direction) {
isHovered: spaces[entry.key] _showCreateSpaceDialog(
.isHovered, screenSize,
onPanUpdate: (int index, position: spaces[index].position +
Offset delta) { newPosition,
setState(() { parentIndex: index,
spaces[index] direction: direction,
.position += delta; );
}); },
}, buildSpaceContainer: (int index) {
onHoverChanged: (int index, return SpaceContainerWidget(
bool isHovered) { index: index,
setState(() { icon: spaces[index].icon,
spaces[index] name: spaces[index].name,
.isHovered = );
isHovered; },
}); ))
}, .toList(),
onButtonTap: (int index, ),
Offset newPosition,
String direction) {
_showCreateSpaceDialog(
screenSize,
position: spaces[index]
.position +
newPosition,
parentIndex: index,
direction: direction,
);
},
buildSpaceContainer:
(int index) {
return SpaceContainerWidget(
index: index,
icon:
spaces[index].icon,
name:
spaces[index].name,
);
},
))
.toList(),
),
),
],
),
),
),
), ),
], ],
), ),
), ),
), ),
),
],
),
),
);
}
Widget _buildGradientBorder() {
return Positioned(
top: 0,
bottom: 0,
left: 300,
width: 8,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
ColorsManager.semiTransparentBlackColor.withOpacity(0.1),
ColorsManager.transparentColor,
], ],
), ),
Positioned( ),
top: 0,
bottom: 0,
left: 300, // Align with the sidebar's width
width: 8, // Width of the gradient border
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
ColorsManager.semiTransparentBlackColor
.withOpacity(0.1), // Light gray
ColorsManager.transparentColor, // Transparent fade
],
),
),
),
),
],
), ),
); );
} }
// Function to open the Create Space dialog
void _showCreateSpaceDialog(Size screenSize, void _showCreateSpaceDialog(Size screenSize,
{Offset? position, int? parentIndex, String? direction}) { {Offset? position, int? parentIndex, String? direction}) {
showDialog( showDialog(
@ -272,6 +271,8 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
} }
} }
// Function to open the Create Space dialog
// Model for storing space information // Model for storing space information
class SpaceData { class SpaceData {
final String name; final String name;
@ -298,4 +299,3 @@ class Connection {
required this.endSpace, required this.endSpace,
required this.direction}); required this.direction});
} }