import 'dart:html'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import 'package:manager_app/Models/managerContext.dart'; import 'package:manager_app/Models/menu.dart'; import 'package:manager_app/Models/menuSection.dart'; import 'package:manager_app/Screens/Configurations/configurations_screen.dart'; import 'package:manager_app/Screens/Devices/devices_screen.dart'; import 'package:manager_app/Screens/Main/components/background.dart'; import 'package:manager_app/Screens/Resources/resources_screen.dart'; import 'package:manager_app/Screens/login_screen.dart'; import 'package:manager_app/app_context.dart'; import 'package:manager_app/constants.dart'; import 'package:manager_app/main.dart'; import 'package:manager_api_new/api.dart'; import 'package:provider/provider.dart'; class Body extends StatefulWidget { final InstanceDTO instance; Body({Key? key, required this.instance}) : super(key: key); @override _BodyState createState() => _BodyState(); } class _BodyState extends State { late int currentPosition; late MenuSection devices; late MenuSection configurations; late MenuSection resources; Menu menu = Menu(title: "MyInfoMate"); @override void initState() { super.initState(); devices = MenuSection(name: "Applications", type: "devices", menuId: 0, subMenu: []); if (widget.instance.isMobile!) devices.subMenu.add(MenuSection(name: "Mobile", type: "mobile", menuId: 1, subMenu: [])); if (widget.instance.isTablet!) devices.subMenu.add(MenuSection(name: "Kiosk", type: "kiosk", menuId: 2, subMenu: [])); if (widget.instance.isWeb!) devices.subMenu.add(MenuSection(name: "Web", type: "web", menuId: 3, subMenu: [])); if (widget.instance.isVR!) devices.subMenu.add(MenuSection(name: "VR", type: "vr", menuId: 4, subMenu: [])); configurations = MenuSection(name: "Configurations", type: "configurations", menuId: 5, subMenu: []); resources = MenuSection(name: "Ressources", type: "resources", menuId: 6, subMenu: []); menu.sections = [devices, configurations, resources]; } Widget buildMenu(BuildContext context, AppContext appContext, ManagerAppContext managerAppContext, bool isDrawer) { return Container( width: isDrawer ? null : 250, // fixed width on sidebar, null on drawer for full width color: kSecond, child: Column( children: [ DrawerHeader( child: Text( menu.title, style: TextStyle(color: kPrimaryColor, fontSize: 30, fontWeight: FontWeight.w400, fontFamily: "Helvetica"), ), ), Expanded( child: ListView( padding: EdgeInsets.zero, children: menu.sections!.map((section) { if (section.subMenu.isEmpty) { return ListTile( title: Text(section.name, style: TextStyle(color: section.menuId == currentPosition ? kPrimaryColor : kBodyTextColor, fontSize: 20)), selected: currentPosition == section.menuId, onTap: () { setState(() { currentPosition = section.menuId; selectedElement = initElementToShow(currentPosition, menu); managerAppContext.currentPositionMenu = currentPosition; appContext.setContext(managerAppContext); }); if (isDrawer) Navigator.of(context).pop(); // Close drawer on mobile }, ); } else { return ExpansionTile( iconColor: currentPosition >= 1 && currentPosition <= 4 ? kPrimaryColor : kBodyTextColor, collapsedIconColor: currentPosition >= 1 && currentPosition <= 4 ? kPrimaryColor : kBodyTextColor, title: Text(section.name, style: TextStyle(color: currentPosition >= 1 && currentPosition <= 4 ? kPrimaryColor : kBodyTextColor, fontSize: 20)), children: section.subMenu.map((subSection) { return ListTile( title: Padding( padding: const EdgeInsets.only(left: 16.0), child: Text(subSection.name, style: TextStyle(color: subSection.menuId == currentPosition ? kPrimaryColor : kBodyTextColor, fontSize: 18)), ), selected: currentPosition == subSection.menuId, onTap: () { setState(() { currentPosition = subSection.menuId; selectedElement = initElementToShow(currentPosition, menu); managerAppContext.currentPositionMenu = currentPosition; appContext.setContext(managerAppContext); }); if (isDrawer) Navigator.of(context).pop(); }, ); }).toList(), ); } }).toList(), ), ), // Footer: Email + Logout button Padding( padding: const EdgeInsets.all(8.0), child: Column( children: [ AutoSizeText( (appContext.getContext() as ManagerAppContext).email ?? "", style: TextStyle(color: kBodyTextColor, fontSize: 16, fontWeight: FontWeight.w300, fontFamily: "Helvetica"), maxLines: 1, ), IconButton( icon: Icon(Icons.logout, color: kPrimaryColor), onPressed: () async { var session = await loadJsonSessionFile(); setState(() { Storage localStorage = window.localStorage; localStorage.clear(); ManagerAppContext managerAppContext = appContext.getContext(); managerAppContext.accessToken = null; appContext.setContext(managerAppContext); Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => LoginScreen(session: session)), (route) => false, ); }); }, ) ], ), ), ], ), ); } late Widget selectedElement; @override Widget build(BuildContext context) { final appContext = Provider.of(context); ManagerAppContext managerAppContext = appContext.getContext(); if(managerAppContext.currentPositionMenu == null) { if (widget.instance.isMobile!) { currentPosition = 1; } else if (widget.instance.isTablet!) { currentPosition = 2; } else if (widget.instance.isWeb!) { currentPosition = 3; } else { currentPosition = 4; } } else { currentPosition = managerAppContext.currentPositionMenu!; } selectedElement = initElementToShow(currentPosition, menu); Size size = MediaQuery.of(context).size; bool isMobile = size.width < 700; return Scaffold( appBar: isMobile ? AppBar( title: Text(menu.title, style: TextStyle(color: kPrimaryColor)), backgroundColor: kSecond, leading: Builder( builder: (context) => IconButton( icon: Icon(Icons.menu, color: kPrimaryColor), onPressed: () => Scaffold.of(context).openDrawer(), ), ), ) : null, drawer: isMobile ? Drawer(child: buildMenu(context, appContext, managerAppContext, true)) : null, body: Row( children: [ if (!isMobile) buildMenu(context, appContext, managerAppContext, false), Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: selectedElement, ), ), ], ), ); } } initElementToShow(int currentPosition, Menu menu) { MenuSection? elementToShow = menu.sections!.firstWhereOrNull((s) => s.menuId == currentPosition); if(elementToShow == null) { elementToShow = menu.sections![0].subMenu.where((s) => s.menuId == currentPosition).first; } switch (elementToShow.type) { case 'mobile' : return Padding( padding: const EdgeInsets.all(8.0), child: Text("TODO mobile") ); case 'kiosk' : return Padding( padding: const EdgeInsets.all(8.0), child: DevicesScreen() ); case 'web' : return Padding( padding: const EdgeInsets.all(8.0), child: Text("TODO web") ); case 'vr' : return Padding( padding: const EdgeInsets.all(8.0), child: Text("TODO vr") ); case 'configurations' : return Padding( padding: const EdgeInsets.all(8.0), child: ConfigurationsScreen() ); case 'resources' : return Padding( padding: const EdgeInsets.all(8.0), child: ResourcesScreen( resourceTypes: [ ResourceType.Audio, ResourceType.Image, ResourceType.ImageUrl, ResourceType.Video, ResourceType.VideoUrl, ResourceType.Pdf, ResourceType.Json, ResourceType.JsonUrl ] ) ); default: return Text('Hellow default'); } }