diff --git a/lib/Modele/user.dart b/lib/Modele/user.dart index e0adfcf..289622d 100644 --- a/lib/Modele/user.dart +++ b/lib/Modele/user.dart @@ -2,8 +2,8 @@ import 'package:flutter/material.dart'; import 'package:smartfit_app_mobile/Modele/activity.dart'; class User extends ChangeNotifier { - String? username; - String? email; - String? token; + String username = "VOID"; + String email = "VOID"; + String token = "VOID"; List? listActivity; } diff --git a/lib/Modele/utile/login_user.dart b/lib/Modele/utile/login_user.dart new file mode 100644 index 0000000..d07ce10 --- /dev/null +++ b/lib/Modele/utile/login_user.dart @@ -0,0 +1,35 @@ +import 'dart:convert'; + +import 'package:crypto/crypto.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; +import 'package:smartfit_app_mobile/Modele/Api/i_data_strategy.dart'; +import 'package:smartfit_app_mobile/Modele/Api/request_api.dart'; +import 'package:smartfit_app_mobile/Modele/user.dart'; +import 'package:tuple/tuple.dart'; + +class Login { + final IDataStrategy api = RequestApi(); + + Future> checkLoginAndPassword( + String email, String password) async { + Tuple2 result = await api.connexion( + email, sha256.convert(utf8.encode(password)).toString()); + return result; + } + + Future>> getUserInfo(String token) async { + Tuple2 result = await api.getInfoUser(token); + if (result.item1 == false) { + return const Tuple2(false, {"Empty": "Empty"}); + } + return Tuple2(true, result.item2); + } + + void fillUser(BuildContext context, Map map, String token) { + context.read().email = map["email"]; + context.read().username = map["username"]; + context.read().token = token; + context.read().listActivity = List.empty(growable: true); + } +} diff --git a/lib/Modele/utile/signup_user.dart b/lib/Modele/utile/signup_user.dart new file mode 100644 index 0000000..b9d26f4 --- /dev/null +++ b/lib/Modele/utile/signup_user.dart @@ -0,0 +1,16 @@ +import 'dart:convert'; + +import 'package:crypto/crypto.dart'; +import 'package:smartfit_app_mobile/Modele/Api/i_data_strategy.dart'; +import 'package:smartfit_app_mobile/Modele/Api/request_api.dart'; +import 'package:tuple/tuple.dart'; + +class SignUp { + final IDataStrategy api = RequestApi(); + + Future> createUser( + String email, String username, String password) async { + return await api.postUser( + email, sha256.convert(utf8.encode(password)).toString(), username); + } +} diff --git a/lib/View/home/home_view.dart b/lib/View/home/home_view.dart index ea65d98..3779dbd 100644 --- a/lib/View/home/home_view.dart +++ b/lib/View/home/home_view.dart @@ -1,15 +1,7 @@ -import 'package:dotted_dashed_line/dotted_dashed_line.dart'; -import 'package:smartfit_app_mobile/common_widget/round_button.dart'; -import 'package:fl_chart/fl_chart.dart'; import 'package:flutter/material.dart'; -import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; -import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart'; -import 'package:smartfit_app_mobile/view/home/activity_tracker.dart'; -import 'package:smartfit_app_mobile/view/home/notification_view.dart'; -import '../../common/colo_extension.dart'; -//import 'activity_tracker_view.dart'; -//import 'finished_workout_view.dart'; -//import 'notification_view.dart'; +import 'package:responsive_builder/responsive_builder.dart'; +import 'package:smartfit_app_mobile/View/home/mobile/mobile_homeview.dart'; +import 'package:smartfit_app_mobile/View/home/web/web_homeview.dart'; class HomeView extends StatefulWidget { const HomeView({super.key}); @@ -19,1052 +11,11 @@ class HomeView extends StatefulWidget { } class _HomeViewState extends State { - List lastWorkoutArr = [ - { - "name": "Full Body Workout", - "image": "assets/img/Workout1.png", - "kcal": "180", - "time": "20", - "progress": 0.3 - }, - { - "name": "Lower Body Workout", - "image": "assets/img/Workout2.png", - "kcal": "200", - "time": "30", - "progress": 0.4 - }, - { - "name": "Ab Workout", - "image": "assets/img/Workout3.png", - "kcal": "300", - "time": "40", - "progress": 0.7 - }, - ]; - List showingTooltipOnSpots = [0]; - - List allSpots = [FlSpot(0, 20)]; - - List waterArr = [ - {"title": "6am - 8am", "subtitle": "600ml"}, - {"title": "9am - 11am", "subtitle": "500ml"}, - {"title": "11am - 2pm", "subtitle": "1000ml"}, - {"title": "2pm - 4pm", "subtitle": "700ml"}, - {"title": "4pm - now", "subtitle": "900ml"}, - ]; - @override Widget build(BuildContext context) { - var media = MediaQuery.of(context).size; - - final lineBarsData = [ - LineChartBarData( - showingIndicators: showingTooltipOnSpots, - spots: allSpots, - isCurved: false, - barWidth: 2, - belowBarData: BarAreaData( - show: true, - gradient: LinearGradient(colors: [ - TColor.secondaryColor1.withOpacity(0.4), - TColor.secondaryColor2.withOpacity(0.1), - ], begin: Alignment.topCenter, end: Alignment.bottomCenter), - ), - dotData: FlDotData(show: false), - gradient: LinearGradient( - colors: TColor.secondaryG, - ), - ), - ]; - - final tooltipsOnBar = lineBarsData[0]; - - return Scaffold( - backgroundColor: TColor.white, - body: SingleChildScrollView( - child: SafeArea( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 15), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Bienvenue,", - style: TextStyle(color: TColor.gray, fontSize: 12), - ), - Text( - "Benjelloun Othmane", - style: TextStyle( - color: TColor.black, - fontSize: 20, - fontWeight: FontWeight.w700), - ), - ], - ), - IconButton( - onPressed: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const NotificationView(), - ), - ); - }, - icon: Image.asset( - "assets/img/notification_active.png", - width: 25, - height: 25, - fit: BoxFit.fitHeight, - )) - ], - ), - SizedBox( - height: media.width * 0.05, - ), - Container( - height: media.width * 0.4, - decoration: BoxDecoration( - gradient: LinearGradient(colors: TColor.primaryG), - borderRadius: BorderRadius.circular(media.width * 0.075)), - child: Stack(alignment: Alignment.center, children: [ - Image.asset( - "assets/img/bg_dots.png", - height: media.width * 0.4, - width: double.maxFinite, - fit: BoxFit.fitHeight, - ), - Padding( - padding: const EdgeInsets.symmetric( - vertical: 25, horizontal: 25), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Graph 1", - style: TextStyle( - color: TColor.white, - fontSize: 14, - fontWeight: FontWeight.w700), - ), - Text( - "Sous titre 1", - style: TextStyle( - color: TColor.white.withOpacity(0.7), - fontSize: 12), - ), - SizedBox( - height: media.width * 0.05, - ), - SizedBox( - width: 120, - height: 35, - child: RoundButton( - title: "Voir plus", - type: RoundButtonType.bgSGradient, - fontSize: 12, - fontWeight: FontWeight.w400, - onPressed: () {})) - ], - ), - AspectRatio( - aspectRatio: 1, - child: PieChart( - PieChartData( - pieTouchData: PieTouchData( - touchCallback: - (FlTouchEvent event, pieTouchResponse) {}, - ), - startDegreeOffset: 250, - borderData: FlBorderData( - show: false, - ), - sectionsSpace: 1, - centerSpaceRadius: 0, - sections: showingSections(), - ), - ), - ), - ], - ), - ) - ]), - ), - SizedBox( - height: media.width * 0.05, - ), - Container( - padding: - const EdgeInsets.symmetric(vertical: 15, horizontal: 15), - decoration: BoxDecoration( - color: TColor.primaryColor2.withOpacity(0.3), - borderRadius: BorderRadius.circular(15), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "Suivi d'activité", - style: TextStyle( - color: TColor.black, - fontSize: 14, - fontWeight: FontWeight.w700), - ), - SizedBox( - width: 70, - height: 25, - child: RoundButton( - title: "Voir", - type: RoundButtonType.bgGradient, - fontSize: 12, - fontWeight: FontWeight.w400, - onPressed: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => - const ActivityTrackerView(), - ), - ); - }, - ), - ) - ], - ), - ), - SizedBox( - height: media.width * 0.05, - ), - Text( - "Status d'activité", - style: TextStyle( - color: TColor.black, - fontSize: 16, - fontWeight: FontWeight.w700), - ), - SizedBox( - height: media.width * 0.02, - ), - ClipRRect( - borderRadius: BorderRadius.circular(25), - child: Container( - height: media.width * 0.4, - width: double.maxFinite, - decoration: BoxDecoration( - color: TColor.primaryColor2.withOpacity(0.3), - borderRadius: BorderRadius.circular(25), - ), - child: Stack( - alignment: Alignment.topLeft, - children: [ - Padding( - padding: const EdgeInsets.symmetric( - vertical: 20, horizontal: 20), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Graph 2 ( rhythme cardiaque )", - style: TextStyle( - color: TColor.black, - fontSize: 16, - fontWeight: FontWeight.w700), - ), - ShaderMask( - blendMode: BlendMode.srcIn, - shaderCallback: (bounds) { - return LinearGradient( - colors: TColor.primaryG, - begin: Alignment.centerLeft, - end: Alignment.centerRight) - .createShader(Rect.fromLTRB( - 0, 0, bounds.width, bounds.height)); - }, - child: Text( - "78 BPM", - style: TextStyle( - color: - TColor.primaryColor1.withOpacity(0.7), - fontWeight: FontWeight.w700, - fontSize: 18), - ), - ), - ], - ), - ), - LineChart( - LineChartData( - showingTooltipIndicators: - showingTooltipOnSpots.map((index) { - return ShowingTooltipIndicators([ - LineBarSpot( - tooltipsOnBar, - lineBarsData.indexOf(tooltipsOnBar), - tooltipsOnBar.spots[index], - ), - ]); - }).toList(), - lineTouchData: LineTouchData( - enabled: true, - handleBuiltInTouches: false, - touchCallback: (FlTouchEvent event, - LineTouchResponse? response) { - if (response == null || - response.lineBarSpots == null) { - return; - } - if (event is FlTapUpEvent) { - final spotIndex = - response.lineBarSpots!.first.spotIndex; - showingTooltipOnSpots.clear(); - setState(() { - showingTooltipOnSpots.add(spotIndex); - }); - } - }, - mouseCursorResolver: (FlTouchEvent event, - LineTouchResponse? response) { - if (response == null || - response.lineBarSpots == null) { - return SystemMouseCursors.basic; - } - return SystemMouseCursors.click; - }, - getTouchedSpotIndicator: - (LineChartBarData barData, - List spotIndexes) { - return spotIndexes.map((index) { - return TouchedSpotIndicatorData( - FlLine( - color: TColor.secondaryColor1, - ), - FlDotData( - show: true, - getDotPainter: - (spot, percent, barData, index) => - FlDotCirclePainter( - radius: 3, - color: Colors.white, - strokeWidth: 3, - strokeColor: TColor.secondaryColor1, - ), - ), - ); - }).toList(); - }, - touchTooltipData: LineTouchTooltipData( - tooltipBgColor: TColor.secondaryColor1, - tooltipRoundedRadius: 20, - getTooltipItems: - (List lineBarsSpot) { - return lineBarsSpot.map((lineBarSpot) { - return LineTooltipItem( - "il y a ${lineBarSpot.x.toInt()} minutes", - const TextStyle( - color: Colors.white, - fontSize: 10, - fontWeight: FontWeight.bold, - ), - ); - }).toList(); - }, - ), - ), - lineBarsData: lineBarsData, - minY: 0, - maxY: 130, - titlesData: FlTitlesData( - show: false, - ), - gridData: FlGridData(show: false), - borderData: FlBorderData( - show: true, - border: Border.all( - color: Colors.transparent, - ), - ), - ), - ) - ], - ), - ), - ), - SizedBox( - height: media.width * 0.05, - ), - Row( - children: [ - Expanded( - child: Container( - height: media.width * 0.95, - padding: const EdgeInsets.symmetric( - vertical: 25, horizontal: 20), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(25), - boxShadow: const [ - BoxShadow(color: Colors.black12, blurRadius: 2) - ]), - child: Row( - children: [ - SimpleAnimationProgressBar( - height: media.width * 0.85, - width: media.width * 0.07, - backgroundColor: Colors.grey.shade100, - foregrondColor: Colors.purple, - ratio: 0.5, - direction: Axis.vertical, - curve: Curves.fastLinearToSlowEaseIn, - duration: const Duration(seconds: 3), - borderRadius: BorderRadius.circular(15), - gradientColor: LinearGradient( - colors: TColor.primaryG, - begin: Alignment.bottomCenter, - end: Alignment.topCenter), - ), - const SizedBox( - width: 10, - ), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Graph 3", - style: TextStyle( - color: TColor.black, - fontSize: 12, - fontWeight: FontWeight.w700), - ), - ShaderMask( - blendMode: BlendMode.srcIn, - shaderCallback: (bounds) { - return LinearGradient( - colors: TColor.primaryG, - begin: Alignment.centerLeft, - end: Alignment.centerRight) - .createShader(Rect.fromLTRB( - 0, 0, bounds.width, bounds.height)); - }, - child: Text( - "ex : objectif", - style: TextStyle( - color: TColor.white.withOpacity(0.7), - fontWeight: FontWeight.w700, - fontSize: 14), - ), - ), - const SizedBox( - height: 10, - ), - Text( - "Mis à jour en temps réel", - style: TextStyle( - color: TColor.gray, - fontSize: 12, - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: waterArr.map((wObj) { - var isLast = wObj == waterArr.last; - return Row( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Column( - mainAxisAlignment: - MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.center, - children: [ - Container( - margin: - const EdgeInsets.symmetric( - vertical: 4), - width: 10, - height: 10, - decoration: BoxDecoration( - color: TColor.secondaryColor1 - .withOpacity(0.5), - borderRadius: - BorderRadius.circular(5), - ), - ), - if (!isLast) - DottedDashedLine( - height: media.width * 0.078, - width: 0, - dashColor: TColor - .secondaryColor1 - .withOpacity(0.5), - axis: Axis.vertical) - ], - ), - const SizedBox( - width: 10, - ), - Column( - mainAxisAlignment: - MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - wObj["title"].toString(), - style: TextStyle( - color: TColor.gray, - fontSize: 10, - ), - ), - ShaderMask( - blendMode: BlendMode.srcIn, - shaderCallback: (bounds) { - return LinearGradient( - colors: - TColor.secondaryG, - begin: Alignment - .centerLeft, - end: Alignment - .centerRight) - .createShader(Rect.fromLTRB( - 0, - 0, - bounds.width, - bounds.height)); - }, - child: Text( - wObj["subtitle"].toString(), - style: TextStyle( - color: TColor.white - .withOpacity(0.7), - fontSize: 12), - ), - ), - ], - ) - ], - ); - }).toList(), - ) - ], - )) - ], - ), - ), - ), - SizedBox( - width: media.width * 0.05, - ), - Expanded( - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Container( - width: double.maxFinite, - height: media.width * 0.45, - padding: const EdgeInsets.symmetric( - vertical: 25, horizontal: 20), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(25), - boxShadow: const [ - BoxShadow(color: Colors.black12, blurRadius: 2) - ]), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Graph 4", - style: TextStyle( - color: TColor.black, - fontSize: 12, - fontWeight: FontWeight.w700), - ), - ShaderMask( - blendMode: BlendMode.srcIn, - shaderCallback: (bounds) { - return LinearGradient( - colors: TColor.primaryG, - begin: Alignment.centerLeft, - end: Alignment.centerRight) - .createShader(Rect.fromLTRB( - 0, 0, bounds.width, bounds.height)); - }, - child: Text( - "durée", - style: TextStyle( - color: TColor.white.withOpacity(0.7), - fontWeight: FontWeight.w700, - fontSize: 14), - ), - ), - const Spacer(), - Image.asset("assets/img/sleep_graph.png", - width: double.maxFinite, - height: 80, - fit: BoxFit.fitWidth) - ]), - ), - SizedBox( - height: media.width * 0.05, - ), - Container( - width: double.maxFinite, - height: media.width * 0.45, - padding: const EdgeInsets.symmetric( - vertical: 25, horizontal: 20), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(25), - boxShadow: const [ - BoxShadow(color: Colors.black12, blurRadius: 2) - ]), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - "Calories", - style: TextStyle( - color: TColor.black, - fontSize: 12, - fontWeight: FontWeight.w700), - ), - ShaderMask( - blendMode: BlendMode.srcIn, - shaderCallback: (bounds) { - return LinearGradient( - colors: TColor.primaryG, - begin: Alignment.centerLeft, - end: Alignment.centerRight) - .createShader(Rect.fromLTRB( - 0, 0, bounds.width, bounds.height)); - }, - child: Text( - "760 kCal", - style: TextStyle( - color: TColor.white.withOpacity(0.7), - fontWeight: FontWeight.w700, - fontSize: 14), - ), - ), - const Spacer(), - Container( - alignment: Alignment.center, - child: SizedBox( - width: media.width * 0.2, - height: media.width * 0.2, - child: Stack( - alignment: Alignment.center, - children: [ - Container( - width: media.width * 0.15, - height: media.width * 0.15, - alignment: Alignment.center, - decoration: BoxDecoration( - gradient: LinearGradient( - colors: TColor.primaryG), - borderRadius: BorderRadius.circular( - media.width * 0.075), - ), - child: FittedBox( - child: Text( - "230kCal\nrestantes", - textAlign: TextAlign.center, - style: TextStyle( - color: TColor.white, - fontSize: 11), - ), - ), - ), - SimpleCircularProgressBar( - progressStrokeWidth: 10, - backStrokeWidth: 10, - progressColors: TColor.primaryG, - backColor: Colors.grey.shade100, - valueNotifier: ValueNotifier(50), - startAngle: -180, - ), - ], - ), - ), - ) - ]), - ), - ], - )) - ], - ), - SizedBox( - height: media.width * 0.1, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - "graph 5", - style: TextStyle( - color: TColor.black, - fontSize: 16, - fontWeight: FontWeight.w700), - ), - Container( - height: 30, - padding: const EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - gradient: LinearGradient(colors: TColor.primaryG), - borderRadius: BorderRadius.circular(15), - ), - child: DropdownButtonHideUnderline( - child: DropdownButton( - items: ["Semaine", "Mois"] - .map((name) => DropdownMenuItem( - value: name, - child: Text( - name, - style: TextStyle( - color: TColor.gray, fontSize: 14), - ), - )) - .toList(), - onChanged: (value) {}, - icon: Icon(Icons.expand_more, color: TColor.white), - hint: Text( - "Semaine", - textAlign: TextAlign.center, - style: - TextStyle(color: TColor.white, fontSize: 12), - ), - ), - )), - ], - ), - SizedBox( - height: media.width * 0.05, - ), - Container( - padding: const EdgeInsets.only(left: 15), - height: media.width * 0.5, - width: double.maxFinite, - child: LineChart( - LineChartData( - showingTooltipIndicators: - showingTooltipOnSpots.map((index) { - return ShowingTooltipIndicators([ - LineBarSpot( - tooltipsOnBar, - lineBarsData.indexOf(tooltipsOnBar), - tooltipsOnBar.spots[index], - ), - ]); - }).toList(), - lineTouchData: LineTouchData( - enabled: true, - handleBuiltInTouches: false, - touchCallback: (FlTouchEvent event, - LineTouchResponse? response) { - if (response == null || - response.lineBarSpots == null) { - return; - } - if (event is FlTapUpEvent) { - final spotIndex = - response.lineBarSpots!.first.spotIndex; - showingTooltipOnSpots.clear(); - setState(() { - showingTooltipOnSpots.add(spotIndex); - }); - } - }, - mouseCursorResolver: (FlTouchEvent event, - LineTouchResponse? response) { - if (response == null || - response.lineBarSpots == null) { - return SystemMouseCursors.basic; - } - return SystemMouseCursors.click; - }, - getTouchedSpotIndicator: (LineChartBarData barData, - List spotIndexes) { - return spotIndexes.map((index) { - return TouchedSpotIndicatorData( - FlLine( - color: Colors.transparent, - ), - FlDotData( - show: true, - getDotPainter: - (spot, percent, barData, index) => - FlDotCirclePainter( - radius: 3, - color: Colors.white, - strokeWidth: 3, - strokeColor: TColor.secondaryColor1, - ), - ), - ); - }).toList(); - }, - touchTooltipData: LineTouchTooltipData( - tooltipBgColor: TColor.secondaryColor1, - tooltipRoundedRadius: 20, - getTooltipItems: (List lineBarsSpot) { - return lineBarsSpot.map((lineBarSpot) { - return LineTooltipItem( - "il y a ${lineBarSpot.x.toInt()} minutes", - const TextStyle( - color: Colors.white, - fontSize: 10, - fontWeight: FontWeight.bold, - ), - ); - }).toList(); - }, - ), - ), - lineBarsData: lineBarsData1, - minY: -0.5, - maxY: 110, - titlesData: FlTitlesData( - show: true, - leftTitles: AxisTitles(), - topTitles: AxisTitles(), - bottomTitles: AxisTitles( - sideTitles: bottomTitles, - ), - rightTitles: AxisTitles( - sideTitles: rightTitles, - )), - gridData: FlGridData( - show: true, - drawHorizontalLine: true, - horizontalInterval: 25, - drawVerticalLine: false, - getDrawingHorizontalLine: (value) { - return FlLine( - color: TColor.gray.withOpacity(0.15), - strokeWidth: 2, - ); - }, - ), - borderData: FlBorderData( - show: true, - border: Border.all( - color: Colors.transparent, - ), - ), - ), - )), - SizedBox( - height: media.width * 0.05, - ), - SizedBox( - height: media.width * 0.1, - ), - ], - ), - ), - ), - ), - ); - } - - void updateChartData(List newData) { - setState(() { - allSpots = newData; - }); - } - - List showingSections() { - return List.generate( - 2, - (i) { - var color0 = TColor.secondaryColor1; - - switch (i) { - case 0: - return PieChartSectionData( - color: color0, - value: 33, - title: '', - radius: 55, - titlePositionPercentageOffset: 0.55, - badgeWidget: const Text( - "20,1", - style: TextStyle( - color: Colors.white, - fontSize: 12, - fontWeight: FontWeight.w700), - )); - case 1: - return PieChartSectionData( - color: Colors.white, - value: 75, - title: '', - radius: 45, - titlePositionPercentageOffset: 0.55, - ); - - default: - throw Error(); - } - }, - ); - } - - LineTouchData get lineTouchData1 => LineTouchData( - handleBuiltInTouches: true, - touchTooltipData: LineTouchTooltipData( - tooltipBgColor: Colors.blueGrey.withOpacity(0.8), - ), - ); - - List get lineBarsData1 => [ - lineChartBarData1_1, - lineChartBarData1_2, - ]; - - LineChartBarData get lineChartBarData1_1 => LineChartBarData( - isCurved: true, - gradient: LinearGradient(colors: [ - TColor.primaryColor2.withOpacity(0.5), - TColor.primaryColor1.withOpacity(0.5), - ]), - barWidth: 4, - isStrokeCapRound: true, - dotData: FlDotData(show: false), - belowBarData: BarAreaData(show: false), - spots: const [ - FlSpot(1, 35), - FlSpot(2, 70), - FlSpot(3, 40), - FlSpot(4, 80), - FlSpot(5, 25), - FlSpot(6, 70), - FlSpot(7, 35), - ], - ); - - LineChartBarData get lineChartBarData1_2 => LineChartBarData( - isCurved: true, - gradient: LinearGradient(colors: [ - TColor.secondaryColor2.withOpacity(0.5), - TColor.secondaryColor1.withOpacity(0.5), - ]), - barWidth: 2, - isStrokeCapRound: true, - dotData: FlDotData(show: false), - belowBarData: BarAreaData( - show: false, - ), - spots: const [ - FlSpot(1, 80), - FlSpot(2, 50), - FlSpot(3, 90), - FlSpot(4, 40), - FlSpot(5, 80), - FlSpot(6, 35), - FlSpot(7, 60), - ], - ); - - SideTitles get rightTitles => SideTitles( - getTitlesWidget: rightTitleWidgets, - showTitles: true, - interval: 20, - reservedSize: 40, - ); - - Widget rightTitleWidgets(double value, TitleMeta meta) { - String text; - switch (value.toInt()) { - case 0: - text = '0%'; - break; - case 20: - text = '20%'; - break; - case 40: - text = '40%'; - break; - case 60: - text = '60%'; - break; - case 80: - text = '80%'; - break; - case 100: - text = '100%'; - break; - default: - return Container(); - } - - return Text(text, - style: TextStyle( - color: TColor.gray, - fontSize: 12, - ), - textAlign: TextAlign.center); - } - - SideTitles get bottomTitles => SideTitles( - showTitles: true, - reservedSize: 32, - interval: 1, - getTitlesWidget: bottomTitleWidgets, - ); - - Widget bottomTitleWidgets(double value, TitleMeta meta) { - var style = TextStyle( - color: TColor.gray, - fontSize: 12, - ); - Widget text; - switch (value.toInt()) { - case 1: - text = Text('Dim', style: style); - break; - case 2: - text = Text('Lun', style: style); - break; - case 3: - text = Text('Mar', style: style); - break; - case 4: - text = Text('Mer', style: style); - break; - case 5: - text = Text('Jeu', style: style); - break; - case 6: - text = Text('Ven', style: style); - break; - case 7: - text = Text('Sam', style: style); - break; - default: - text = Text('', style: style); - break; - } - - return SideTitleWidget( - axisSide: meta.axisSide, - space: 10, - child: text, + return ScreenTypeLayout.builder( + mobile: (_) => const MobileHomeView(), + desktop: (_) => const WebHomeView(), ); } } diff --git a/lib/View/home/mobile/mobile_homeview.dart b/lib/View/home/mobile/mobile_homeview.dart new file mode 100644 index 0000000..2c836c1 --- /dev/null +++ b/lib/View/home/mobile/mobile_homeview.dart @@ -0,0 +1,1070 @@ +import 'package:dotted_dashed_line/dotted_dashed_line.dart'; +import 'package:fl_chart/fl_chart.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; +import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; +import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart'; +import 'package:smartfit_app_mobile/Modele/user.dart'; +import 'package:smartfit_app_mobile/common/colo_extension.dart'; +import 'package:smartfit_app_mobile/common_widget/round_button.dart'; +import 'package:smartfit_app_mobile/view/home/activity_tracker.dart'; +import 'package:smartfit_app_mobile/view/home/notification_view.dart'; + +class MobileHomeView extends StatefulWidget { + const MobileHomeView({super.key}); + + @override + State createState() => _MobileHomeView(); +} + +class _MobileHomeView extends State { + List lastWorkoutArr = [ + { + "name": "Full Body Workout", + "image": "assets/img/Workout1.png", + "kcal": "180", + "time": "20", + "progress": 0.3 + }, + { + "name": "Lower Body Workout", + "image": "assets/img/Workout2.png", + "kcal": "200", + "time": "30", + "progress": 0.4 + }, + { + "name": "Ab Workout", + "image": "assets/img/Workout3.png", + "kcal": "300", + "time": "40", + "progress": 0.7 + }, + ]; + List showingTooltipOnSpots = [0]; + + List allSpots = [FlSpot(0, 20)]; + + List waterArr = [ + {"title": "6am - 8am", "subtitle": "600ml"}, + {"title": "9am - 11am", "subtitle": "500ml"}, + {"title": "11am - 2pm", "subtitle": "1000ml"}, + {"title": "2pm - 4pm", "subtitle": "700ml"}, + {"title": "4pm - now", "subtitle": "900ml"}, + ]; + + @override + Widget build(BuildContext context) { + var media = MediaQuery.of(context).size; + User user = context.watch(); + + final lineBarsData = [ + LineChartBarData( + showingIndicators: showingTooltipOnSpots, + spots: allSpots, + isCurved: false, + barWidth: 2, + belowBarData: BarAreaData( + show: true, + gradient: LinearGradient(colors: [ + TColor.secondaryColor1.withOpacity(0.4), + TColor.secondaryColor2.withOpacity(0.1), + ], begin: Alignment.topCenter, end: Alignment.bottomCenter), + ), + dotData: FlDotData(show: false), + gradient: LinearGradient( + colors: TColor.secondaryG, + ), + ), + ]; + + final tooltipsOnBar = lineBarsData[0]; + + return Scaffold( + backgroundColor: TColor.white, + body: SingleChildScrollView( + child: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Bienvenue,", + style: TextStyle(color: TColor.gray, fontSize: 12), + ), + Text( + user.username, + style: TextStyle( + color: TColor.black, + fontSize: 20, + fontWeight: FontWeight.w700), + ), + ], + ), + IconButton( + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const NotificationView(), + ), + ); + }, + icon: Image.asset( + "assets/img/notification_active.png", + width: 25, + height: 25, + fit: BoxFit.fitHeight, + )) + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + height: media.width * 0.4, + decoration: BoxDecoration( + gradient: LinearGradient(colors: TColor.primaryG), + borderRadius: BorderRadius.circular(media.width * 0.075)), + child: Stack(alignment: Alignment.center, children: [ + Image.asset( + "assets/img/bg_dots.png", + height: media.width * 0.4, + width: double.maxFinite, + fit: BoxFit.fitHeight, + ), + Padding( + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 25), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 1", + style: TextStyle( + color: TColor.white, + fontSize: 14, + fontWeight: FontWeight.w700), + ), + Text( + "Sous titre 1", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontSize: 12), + ), + SizedBox( + height: media.width * 0.05, + ), + SizedBox( + width: 120, + height: 35, + child: RoundButton( + title: "Voir plus", + type: RoundButtonType.bgSGradient, + fontSize: 12, + fontWeight: FontWeight.w400, + onPressed: () {})) + ], + ), + AspectRatio( + aspectRatio: 1, + child: PieChart( + PieChartData( + pieTouchData: PieTouchData( + touchCallback: + (FlTouchEvent event, pieTouchResponse) {}, + ), + startDegreeOffset: 250, + borderData: FlBorderData( + show: false, + ), + sectionsSpace: 1, + centerSpaceRadius: 0, + sections: showingSections(), + ), + ), + ), + ], + ), + ) + ]), + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + padding: + const EdgeInsets.symmetric(vertical: 15, horizontal: 15), + decoration: BoxDecoration( + color: TColor.primaryColor2.withOpacity(0.3), + borderRadius: BorderRadius.circular(15), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Suivi d'activité", + style: TextStyle( + color: TColor.black, + fontSize: 14, + fontWeight: FontWeight.w700), + ), + SizedBox( + width: 70, + height: 25, + child: RoundButton( + title: "Voir", + type: RoundButtonType.bgGradient, + fontSize: 12, + fontWeight: FontWeight.w400, + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + const ActivityTrackerView(), + ), + ); + }, + ), + ) + ], + ), + ), + SizedBox( + height: media.width * 0.05, + ), + Text( + "Status d'activité", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + SizedBox( + height: media.width * 0.02, + ), + ClipRRect( + borderRadius: BorderRadius.circular(25), + child: Container( + height: media.width * 0.4, + width: double.maxFinite, + decoration: BoxDecoration( + color: TColor.primaryColor2.withOpacity(0.3), + borderRadius: BorderRadius.circular(25), + ), + child: Stack( + alignment: Alignment.topLeft, + children: [ + Padding( + padding: const EdgeInsets.symmetric( + vertical: 20, horizontal: 20), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 2 ( rhythme cardiaque )", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "78 BPM", + style: TextStyle( + color: + TColor.primaryColor1.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 18), + ), + ), + ], + ), + ), + LineChart( + LineChartData( + showingTooltipIndicators: + showingTooltipOnSpots.map((index) { + return ShowingTooltipIndicators([ + LineBarSpot( + tooltipsOnBar, + lineBarsData.indexOf(tooltipsOnBar), + tooltipsOnBar.spots[index], + ), + ]); + }).toList(), + lineTouchData: LineTouchData( + enabled: true, + handleBuiltInTouches: false, + touchCallback: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return; + } + if (event is FlTapUpEvent) { + final spotIndex = + response.lineBarSpots!.first.spotIndex; + showingTooltipOnSpots.clear(); + setState(() { + showingTooltipOnSpots.add(spotIndex); + }); + } + }, + mouseCursorResolver: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return SystemMouseCursors.basic; + } + return SystemMouseCursors.click; + }, + getTouchedSpotIndicator: + (LineChartBarData barData, + List spotIndexes) { + return spotIndexes.map((index) { + return TouchedSpotIndicatorData( + FlLine( + color: TColor.secondaryColor1, + ), + FlDotData( + show: true, + getDotPainter: + (spot, percent, barData, index) => + FlDotCirclePainter( + radius: 3, + color: Colors.white, + strokeWidth: 3, + strokeColor: TColor.secondaryColor1, + ), + ), + ); + }).toList(); + }, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: TColor.secondaryColor1, + tooltipRoundedRadius: 20, + getTooltipItems: + (List lineBarsSpot) { + return lineBarsSpot.map((lineBarSpot) { + return LineTooltipItem( + "il y a ${lineBarSpot.x.toInt()} minutes", + const TextStyle( + color: Colors.white, + fontSize: 10, + fontWeight: FontWeight.bold, + ), + ); + }).toList(); + }, + ), + ), + lineBarsData: lineBarsData, + minY: 0, + maxY: 130, + titlesData: FlTitlesData( + show: false, + ), + gridData: FlGridData(show: false), + borderData: FlBorderData( + show: true, + border: Border.all( + color: Colors.transparent, + ), + ), + ), + ) + ], + ), + ), + ), + SizedBox( + height: media.width * 0.05, + ), + Row( + children: [ + Expanded( + child: Container( + height: media.width * 0.95, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Row( + children: [ + SimpleAnimationProgressBar( + height: media.width * 0.85, + width: media.width * 0.07, + backgroundColor: Colors.grey.shade100, + foregrondColor: Colors.purple, + ratio: 0.5, + direction: Axis.vertical, + curve: Curves.fastLinearToSlowEaseIn, + duration: const Duration(seconds: 3), + borderRadius: BorderRadius.circular(15), + gradientColor: LinearGradient( + colors: TColor.primaryG, + begin: Alignment.bottomCenter, + end: Alignment.topCenter), + ), + const SizedBox( + width: 10, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 3", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "ex : objectif", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const SizedBox( + height: 10, + ), + Text( + "Mis à jour en temps réel", + style: TextStyle( + color: TColor.gray, + fontSize: 12, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: waterArr.map((wObj) { + var isLast = wObj == waterArr.last; + return Row( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Column( + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.center, + children: [ + Container( + margin: + const EdgeInsets.symmetric( + vertical: 4), + width: 10, + height: 10, + decoration: BoxDecoration( + color: TColor.secondaryColor1 + .withOpacity(0.5), + borderRadius: + BorderRadius.circular(5), + ), + ), + if (!isLast) + DottedDashedLine( + height: media.width * 0.078, + width: 0, + dashColor: TColor + .secondaryColor1 + .withOpacity(0.5), + axis: Axis.vertical) + ], + ), + const SizedBox( + width: 10, + ), + Column( + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Text( + wObj["title"].toString(), + style: TextStyle( + color: TColor.gray, + fontSize: 10, + ), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: + TColor.secondaryG, + begin: Alignment + .centerLeft, + end: Alignment + .centerRight) + .createShader(Rect.fromLTRB( + 0, + 0, + bounds.width, + bounds.height)); + }, + child: Text( + wObj["subtitle"].toString(), + style: TextStyle( + color: TColor.white + .withOpacity(0.7), + fontSize: 12), + ), + ), + ], + ) + ], + ); + }).toList(), + ) + ], + )) + ], + ), + ), + ), + SizedBox( + width: media.width * 0.05, + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: double.maxFinite, + height: media.width * 0.45, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 4", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "durée", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const Spacer(), + Image.asset("assets/img/sleep_graph.png", + width: double.maxFinite, + height: 80, + fit: BoxFit.fitWidth) + ]), + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + width: double.maxFinite, + height: media.width * 0.45, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Calories", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "760 kCal", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const Spacer(), + Container( + alignment: Alignment.center, + child: SizedBox( + width: media.width * 0.2, + height: media.width * 0.2, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: media.width * 0.15, + height: media.width * 0.15, + alignment: Alignment.center, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: TColor.primaryG), + borderRadius: BorderRadius.circular( + media.width * 0.075), + ), + child: FittedBox( + child: Text( + "230kCal\nrestantes", + textAlign: TextAlign.center, + style: TextStyle( + color: TColor.white, + fontSize: 11), + ), + ), + ), + SimpleCircularProgressBar( + progressStrokeWidth: 10, + backStrokeWidth: 10, + progressColors: TColor.primaryG, + backColor: Colors.grey.shade100, + valueNotifier: ValueNotifier(50), + startAngle: -180, + ), + ], + ), + ), + ) + ]), + ), + ], + )) + ], + ), + SizedBox( + height: media.width * 0.1, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "graph 5", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + Container( + height: 30, + padding: const EdgeInsets.symmetric(horizontal: 8), + decoration: BoxDecoration( + gradient: LinearGradient(colors: TColor.primaryG), + borderRadius: BorderRadius.circular(15), + ), + child: DropdownButtonHideUnderline( + child: DropdownButton( + items: ["Semaine", "Mois"] + .map((name) => DropdownMenuItem( + value: name, + child: Text( + name, + style: TextStyle( + color: TColor.gray, fontSize: 14), + ), + )) + .toList(), + onChanged: (value) {}, + icon: Icon(Icons.expand_more, color: TColor.white), + hint: Text( + "Semaine", + textAlign: TextAlign.center, + style: + TextStyle(color: TColor.white, fontSize: 12), + ), + ), + )), + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + padding: const EdgeInsets.only(left: 15), + height: media.width * 0.5, + width: double.maxFinite, + child: LineChart( + LineChartData( + showingTooltipIndicators: + showingTooltipOnSpots.map((index) { + return ShowingTooltipIndicators([ + LineBarSpot( + tooltipsOnBar, + lineBarsData.indexOf(tooltipsOnBar), + tooltipsOnBar.spots[index], + ), + ]); + }).toList(), + lineTouchData: LineTouchData( + enabled: true, + handleBuiltInTouches: false, + touchCallback: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return; + } + if (event is FlTapUpEvent) { + final spotIndex = + response.lineBarSpots!.first.spotIndex; + showingTooltipOnSpots.clear(); + setState(() { + showingTooltipOnSpots.add(spotIndex); + }); + } + }, + mouseCursorResolver: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return SystemMouseCursors.basic; + } + return SystemMouseCursors.click; + }, + getTouchedSpotIndicator: (LineChartBarData barData, + List spotIndexes) { + return spotIndexes.map((index) { + return TouchedSpotIndicatorData( + FlLine( + color: Colors.transparent, + ), + FlDotData( + show: true, + getDotPainter: + (spot, percent, barData, index) => + FlDotCirclePainter( + radius: 3, + color: Colors.white, + strokeWidth: 3, + strokeColor: TColor.secondaryColor1, + ), + ), + ); + }).toList(); + }, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: TColor.secondaryColor1, + tooltipRoundedRadius: 20, + getTooltipItems: (List lineBarsSpot) { + return lineBarsSpot.map((lineBarSpot) { + return LineTooltipItem( + "il y a ${lineBarSpot.x.toInt()} minutes", + const TextStyle( + color: Colors.white, + fontSize: 10, + fontWeight: FontWeight.bold, + ), + ); + }).toList(); + }, + ), + ), + lineBarsData: lineBarsData1, + minY: -0.5, + maxY: 110, + titlesData: FlTitlesData( + show: true, + leftTitles: AxisTitles(), + topTitles: AxisTitles(), + bottomTitles: AxisTitles( + sideTitles: bottomTitles, + ), + rightTitles: AxisTitles( + sideTitles: rightTitles, + )), + gridData: FlGridData( + show: true, + drawHorizontalLine: true, + horizontalInterval: 25, + drawVerticalLine: false, + getDrawingHorizontalLine: (value) { + return FlLine( + color: TColor.gray.withOpacity(0.15), + strokeWidth: 2, + ); + }, + ), + borderData: FlBorderData( + show: true, + border: Border.all( + color: Colors.transparent, + ), + ), + ), + )), + SizedBox( + height: media.width * 0.05, + ), + SizedBox( + height: media.width * 0.1, + ), + ], + ), + ), + ), + ), + ); + } + + void updateChartData(List newData) { + setState(() { + allSpots = newData; + }); + } + + List showingSections() { + return List.generate( + 2, + (i) { + var color0 = TColor.secondaryColor1; + + switch (i) { + case 0: + return PieChartSectionData( + color: color0, + value: 33, + title: '', + radius: 55, + titlePositionPercentageOffset: 0.55, + badgeWidget: const Text( + "20,1", + style: TextStyle( + color: Colors.white, + fontSize: 12, + fontWeight: FontWeight.w700), + )); + case 1: + return PieChartSectionData( + color: Colors.white, + value: 75, + title: '', + radius: 45, + titlePositionPercentageOffset: 0.55, + ); + + default: + throw Error(); + } + }, + ); + } + + LineTouchData get lineTouchData1 => LineTouchData( + handleBuiltInTouches: true, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: Colors.blueGrey.withOpacity(0.8), + ), + ); + + List get lineBarsData1 => [ + lineChartBarData1_1, + lineChartBarData1_2, + ]; + + LineChartBarData get lineChartBarData1_1 => LineChartBarData( + isCurved: true, + gradient: LinearGradient(colors: [ + TColor.primaryColor2.withOpacity(0.5), + TColor.primaryColor1.withOpacity(0.5), + ]), + barWidth: 4, + isStrokeCapRound: true, + dotData: FlDotData(show: false), + belowBarData: BarAreaData(show: false), + spots: const [ + FlSpot(1, 35), + FlSpot(2, 70), + FlSpot(3, 40), + FlSpot(4, 80), + FlSpot(5, 25), + FlSpot(6, 70), + FlSpot(7, 35), + ], + ); + + LineChartBarData get lineChartBarData1_2 => LineChartBarData( + isCurved: true, + gradient: LinearGradient(colors: [ + TColor.secondaryColor2.withOpacity(0.5), + TColor.secondaryColor1.withOpacity(0.5), + ]), + barWidth: 2, + isStrokeCapRound: true, + dotData: FlDotData(show: false), + belowBarData: BarAreaData( + show: false, + ), + spots: const [ + FlSpot(1, 80), + FlSpot(2, 50), + FlSpot(3, 90), + FlSpot(4, 40), + FlSpot(5, 80), + FlSpot(6, 35), + FlSpot(7, 60), + ], + ); + + SideTitles get rightTitles => SideTitles( + getTitlesWidget: rightTitleWidgets, + showTitles: true, + interval: 20, + reservedSize: 40, + ); + + Widget rightTitleWidgets(double value, TitleMeta meta) { + String text; + switch (value.toInt()) { + case 0: + text = '0%'; + break; + case 20: + text = '20%'; + break; + case 40: + text = '40%'; + break; + case 60: + text = '60%'; + break; + case 80: + text = '80%'; + break; + case 100: + text = '100%'; + break; + default: + return Container(); + } + + return Text(text, + style: TextStyle( + color: TColor.gray, + fontSize: 12, + ), + textAlign: TextAlign.center); + } + + SideTitles get bottomTitles => SideTitles( + showTitles: true, + reservedSize: 32, + interval: 1, + getTitlesWidget: bottomTitleWidgets, + ); + + Widget bottomTitleWidgets(double value, TitleMeta meta) { + var style = TextStyle( + color: TColor.gray, + fontSize: 12, + ); + Widget text; + switch (value.toInt()) { + case 1: + text = Text('Dim', style: style); + break; + case 2: + text = Text('Lun', style: style); + break; + case 3: + text = Text('Mar', style: style); + break; + case 4: + text = Text('Mer', style: style); + break; + case 5: + text = Text('Jeu', style: style); + break; + case 6: + text = Text('Ven', style: style); + break; + case 7: + text = Text('Sam', style: style); + break; + default: + text = Text('', style: style); + break; + } + + return SideTitleWidget( + axisSide: meta.axisSide, + space: 10, + child: text, + ); + } +} diff --git a/lib/View/home/web/web_homeview.dart b/lib/View/home/web/web_homeview.dart new file mode 100644 index 0000000..85f360c --- /dev/null +++ b/lib/View/home/web/web_homeview.dart @@ -0,0 +1,1070 @@ +import 'package:dotted_dashed_line/dotted_dashed_line.dart'; +import 'package:fl_chart/fl_chart.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; +import 'package:simple_animation_progress_bar/simple_animation_progress_bar.dart'; +import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart'; +import 'package:smartfit_app_mobile/Modele/user.dart'; +import 'package:smartfit_app_mobile/common/colo_extension.dart'; +import 'package:smartfit_app_mobile/common_widget/round_button.dart'; +import 'package:smartfit_app_mobile/view/home/activity_tracker.dart'; +import 'package:smartfit_app_mobile/view/home/notification_view.dart'; + +class WebHomeView extends StatefulWidget { + const WebHomeView({super.key}); + + @override + State createState() => _WebHomeView(); +} + +class _WebHomeView extends State { + List lastWorkoutArr = [ + { + "name": "Full Body Workout", + "image": "assets/img/Workout1.png", + "kcal": "180", + "time": "20", + "progress": 0.3 + }, + { + "name": "Lower Body Workout", + "image": "assets/img/Workout2.png", + "kcal": "200", + "time": "30", + "progress": 0.4 + }, + { + "name": "Ab Workout", + "image": "assets/img/Workout3.png", + "kcal": "300", + "time": "40", + "progress": 0.7 + }, + ]; + List showingTooltipOnSpots = [0]; + + List allSpots = [FlSpot(0, 20)]; + + List waterArr = [ + {"title": "6am - 8am", "subtitle": "600ml"}, + {"title": "9am - 11am", "subtitle": "500ml"}, + {"title": "11am - 2pm", "subtitle": "1000ml"}, + {"title": "2pm - 4pm", "subtitle": "700ml"}, + {"title": "4pm - now", "subtitle": "900ml"}, + ]; + + @override + Widget build(BuildContext context) { + var media = MediaQuery.of(context).size; + User user = context.watch(); + + final lineBarsData = [ + LineChartBarData( + showingIndicators: showingTooltipOnSpots, + spots: allSpots, + isCurved: false, + barWidth: 2, + belowBarData: BarAreaData( + show: true, + gradient: LinearGradient(colors: [ + TColor.secondaryColor1.withOpacity(0.4), + TColor.secondaryColor2.withOpacity(0.1), + ], begin: Alignment.topCenter, end: Alignment.bottomCenter), + ), + dotData: FlDotData(show: false), + gradient: LinearGradient( + colors: TColor.secondaryG, + ), + ), + ]; + + final tooltipsOnBar = lineBarsData[0]; + + return Scaffold( + backgroundColor: TColor.white, + body: SingleChildScrollView( + child: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Bienvenue,", + style: TextStyle(color: TColor.gray, fontSize: 12), + ), + Text( + user.email, + style: TextStyle( + color: TColor.black, + fontSize: 20, + fontWeight: FontWeight.w700), + ), + ], + ), + IconButton( + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const NotificationView(), + ), + ); + }, + icon: Image.asset( + "assets/img/notification_active.png", + width: 25, + height: 25, + fit: BoxFit.fitHeight, + )) + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + height: media.width * 0.4, + decoration: BoxDecoration( + gradient: LinearGradient(colors: TColor.primaryG), + borderRadius: BorderRadius.circular(media.width * 0.075)), + child: Stack(alignment: Alignment.center, children: [ + Image.asset( + "assets/img/bg_dots.png", + height: media.width * 0.4, + width: double.maxFinite, + fit: BoxFit.fitHeight, + ), + Padding( + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 25), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 1", + style: TextStyle( + color: TColor.white, + fontSize: 14, + fontWeight: FontWeight.w700), + ), + Text( + "Sous titre 1", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontSize: 12), + ), + SizedBox( + height: media.width * 0.05, + ), + SizedBox( + width: 120, + height: 35, + child: RoundButton( + title: "Voir plus", + type: RoundButtonType.bgSGradient, + fontSize: 12, + fontWeight: FontWeight.w400, + onPressed: () {})) + ], + ), + AspectRatio( + aspectRatio: 1, + child: PieChart( + PieChartData( + pieTouchData: PieTouchData( + touchCallback: + (FlTouchEvent event, pieTouchResponse) {}, + ), + startDegreeOffset: 250, + borderData: FlBorderData( + show: false, + ), + sectionsSpace: 1, + centerSpaceRadius: 0, + sections: showingSections(), + ), + ), + ), + ], + ), + ) + ]), + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + padding: + const EdgeInsets.symmetric(vertical: 15, horizontal: 15), + decoration: BoxDecoration( + color: TColor.primaryColor2.withOpacity(0.3), + borderRadius: BorderRadius.circular(15), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "Suivi d'activité", + style: TextStyle( + color: TColor.black, + fontSize: 14, + fontWeight: FontWeight.w700), + ), + SizedBox( + width: 70, + height: 25, + child: RoundButton( + title: "Voir", + type: RoundButtonType.bgGradient, + fontSize: 12, + fontWeight: FontWeight.w400, + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + const ActivityTrackerView(), + ), + ); + }, + ), + ) + ], + ), + ), + SizedBox( + height: media.width * 0.05, + ), + Text( + "Status d'activité", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + SizedBox( + height: media.width * 0.02, + ), + ClipRRect( + borderRadius: BorderRadius.circular(25), + child: Container( + height: media.width * 0.4, + width: double.maxFinite, + decoration: BoxDecoration( + color: TColor.primaryColor2.withOpacity(0.3), + borderRadius: BorderRadius.circular(25), + ), + child: Stack( + alignment: Alignment.topLeft, + children: [ + Padding( + padding: const EdgeInsets.symmetric( + vertical: 20, horizontal: 20), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 2 ( rhythme cardiaque )", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "78 BPM", + style: TextStyle( + color: + TColor.primaryColor1.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 18), + ), + ), + ], + ), + ), + LineChart( + LineChartData( + showingTooltipIndicators: + showingTooltipOnSpots.map((index) { + return ShowingTooltipIndicators([ + LineBarSpot( + tooltipsOnBar, + lineBarsData.indexOf(tooltipsOnBar), + tooltipsOnBar.spots[index], + ), + ]); + }).toList(), + lineTouchData: LineTouchData( + enabled: true, + handleBuiltInTouches: false, + touchCallback: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return; + } + if (event is FlTapUpEvent) { + final spotIndex = + response.lineBarSpots!.first.spotIndex; + showingTooltipOnSpots.clear(); + setState(() { + showingTooltipOnSpots.add(spotIndex); + }); + } + }, + mouseCursorResolver: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return SystemMouseCursors.basic; + } + return SystemMouseCursors.click; + }, + getTouchedSpotIndicator: + (LineChartBarData barData, + List spotIndexes) { + return spotIndexes.map((index) { + return TouchedSpotIndicatorData( + FlLine( + color: TColor.secondaryColor1, + ), + FlDotData( + show: true, + getDotPainter: + (spot, percent, barData, index) => + FlDotCirclePainter( + radius: 3, + color: Colors.white, + strokeWidth: 3, + strokeColor: TColor.secondaryColor1, + ), + ), + ); + }).toList(); + }, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: TColor.secondaryColor1, + tooltipRoundedRadius: 20, + getTooltipItems: + (List lineBarsSpot) { + return lineBarsSpot.map((lineBarSpot) { + return LineTooltipItem( + "il y a ${lineBarSpot.x.toInt()} minutes", + const TextStyle( + color: Colors.white, + fontSize: 10, + fontWeight: FontWeight.bold, + ), + ); + }).toList(); + }, + ), + ), + lineBarsData: lineBarsData, + minY: 0, + maxY: 130, + titlesData: FlTitlesData( + show: false, + ), + gridData: FlGridData(show: false), + borderData: FlBorderData( + show: true, + border: Border.all( + color: Colors.transparent, + ), + ), + ), + ) + ], + ), + ), + ), + SizedBox( + height: media.width * 0.05, + ), + Row( + children: [ + Expanded( + child: Container( + height: media.width * 0.95, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Row( + children: [ + SimpleAnimationProgressBar( + height: media.width * 0.85, + width: media.width * 0.07, + backgroundColor: Colors.grey.shade100, + foregrondColor: Colors.purple, + ratio: 0.5, + direction: Axis.vertical, + curve: Curves.fastLinearToSlowEaseIn, + duration: const Duration(seconds: 3), + borderRadius: BorderRadius.circular(15), + gradientColor: LinearGradient( + colors: TColor.primaryG, + begin: Alignment.bottomCenter, + end: Alignment.topCenter), + ), + const SizedBox( + width: 10, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 3", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "ex : objectif", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const SizedBox( + height: 10, + ), + Text( + "Mis à jour en temps réel", + style: TextStyle( + color: TColor.gray, + fontSize: 12, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: waterArr.map((wObj) { + var isLast = wObj == waterArr.last; + return Row( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Column( + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.center, + children: [ + Container( + margin: + const EdgeInsets.symmetric( + vertical: 4), + width: 10, + height: 10, + decoration: BoxDecoration( + color: TColor.secondaryColor1 + .withOpacity(0.5), + borderRadius: + BorderRadius.circular(5), + ), + ), + if (!isLast) + DottedDashedLine( + height: media.width * 0.078, + width: 0, + dashColor: TColor + .secondaryColor1 + .withOpacity(0.5), + axis: Axis.vertical) + ], + ), + const SizedBox( + width: 10, + ), + Column( + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Text( + wObj["title"].toString(), + style: TextStyle( + color: TColor.gray, + fontSize: 10, + ), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: + TColor.secondaryG, + begin: Alignment + .centerLeft, + end: Alignment + .centerRight) + .createShader(Rect.fromLTRB( + 0, + 0, + bounds.width, + bounds.height)); + }, + child: Text( + wObj["subtitle"].toString(), + style: TextStyle( + color: TColor.white + .withOpacity(0.7), + fontSize: 12), + ), + ), + ], + ) + ], + ); + }).toList(), + ) + ], + )) + ], + ), + ), + ), + SizedBox( + width: media.width * 0.05, + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: double.maxFinite, + height: media.width * 0.45, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Graph 4", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "durée", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const Spacer(), + Image.asset("assets/img/sleep_graph.png", + width: double.maxFinite, + height: 80, + fit: BoxFit.fitWidth) + ]), + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + width: double.maxFinite, + height: media.width * 0.45, + padding: const EdgeInsets.symmetric( + vertical: 25, horizontal: 20), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(25), + boxShadow: const [ + BoxShadow(color: Colors.black12, blurRadius: 2) + ]), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Calories", + style: TextStyle( + color: TColor.black, + fontSize: 12, + fontWeight: FontWeight.w700), + ), + ShaderMask( + blendMode: BlendMode.srcIn, + shaderCallback: (bounds) { + return LinearGradient( + colors: TColor.primaryG, + begin: Alignment.centerLeft, + end: Alignment.centerRight) + .createShader(Rect.fromLTRB( + 0, 0, bounds.width, bounds.height)); + }, + child: Text( + "760 kCal", + style: TextStyle( + color: TColor.white.withOpacity(0.7), + fontWeight: FontWeight.w700, + fontSize: 14), + ), + ), + const Spacer(), + Container( + alignment: Alignment.center, + child: SizedBox( + width: media.width * 0.2, + height: media.width * 0.2, + child: Stack( + alignment: Alignment.center, + children: [ + Container( + width: media.width * 0.15, + height: media.width * 0.15, + alignment: Alignment.center, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: TColor.primaryG), + borderRadius: BorderRadius.circular( + media.width * 0.075), + ), + child: FittedBox( + child: Text( + "230kCal\nrestantes", + textAlign: TextAlign.center, + style: TextStyle( + color: TColor.white, + fontSize: 11), + ), + ), + ), + SimpleCircularProgressBar( + progressStrokeWidth: 10, + backStrokeWidth: 10, + progressColors: TColor.primaryG, + backColor: Colors.grey.shade100, + valueNotifier: ValueNotifier(50), + startAngle: -180, + ), + ], + ), + ), + ) + ]), + ), + ], + )) + ], + ), + SizedBox( + height: media.width * 0.1, + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "graph 5", + style: TextStyle( + color: TColor.black, + fontSize: 16, + fontWeight: FontWeight.w700), + ), + Container( + height: 30, + padding: const EdgeInsets.symmetric(horizontal: 8), + decoration: BoxDecoration( + gradient: LinearGradient(colors: TColor.primaryG), + borderRadius: BorderRadius.circular(15), + ), + child: DropdownButtonHideUnderline( + child: DropdownButton( + items: ["Semaine", "Mois"] + .map((name) => DropdownMenuItem( + value: name, + child: Text( + name, + style: TextStyle( + color: TColor.gray, fontSize: 14), + ), + )) + .toList(), + onChanged: (value) {}, + icon: Icon(Icons.expand_more, color: TColor.white), + hint: Text( + "Semaine", + textAlign: TextAlign.center, + style: + TextStyle(color: TColor.white, fontSize: 12), + ), + ), + )), + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Container( + padding: const EdgeInsets.only(left: 15), + height: media.width * 0.5, + width: double.maxFinite, + child: LineChart( + LineChartData( + showingTooltipIndicators: + showingTooltipOnSpots.map((index) { + return ShowingTooltipIndicators([ + LineBarSpot( + tooltipsOnBar, + lineBarsData.indexOf(tooltipsOnBar), + tooltipsOnBar.spots[index], + ), + ]); + }).toList(), + lineTouchData: LineTouchData( + enabled: true, + handleBuiltInTouches: false, + touchCallback: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return; + } + if (event is FlTapUpEvent) { + final spotIndex = + response.lineBarSpots!.first.spotIndex; + showingTooltipOnSpots.clear(); + setState(() { + showingTooltipOnSpots.add(spotIndex); + }); + } + }, + mouseCursorResolver: (FlTouchEvent event, + LineTouchResponse? response) { + if (response == null || + response.lineBarSpots == null) { + return SystemMouseCursors.basic; + } + return SystemMouseCursors.click; + }, + getTouchedSpotIndicator: (LineChartBarData barData, + List spotIndexes) { + return spotIndexes.map((index) { + return TouchedSpotIndicatorData( + FlLine( + color: Colors.transparent, + ), + FlDotData( + show: true, + getDotPainter: + (spot, percent, barData, index) => + FlDotCirclePainter( + radius: 3, + color: Colors.white, + strokeWidth: 3, + strokeColor: TColor.secondaryColor1, + ), + ), + ); + }).toList(); + }, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: TColor.secondaryColor1, + tooltipRoundedRadius: 20, + getTooltipItems: (List lineBarsSpot) { + return lineBarsSpot.map((lineBarSpot) { + return LineTooltipItem( + "il y a ${lineBarSpot.x.toInt()} minutes", + const TextStyle( + color: Colors.white, + fontSize: 10, + fontWeight: FontWeight.bold, + ), + ); + }).toList(); + }, + ), + ), + lineBarsData: lineBarsData1, + minY: -0.5, + maxY: 110, + titlesData: FlTitlesData( + show: true, + leftTitles: AxisTitles(), + topTitles: AxisTitles(), + bottomTitles: AxisTitles( + sideTitles: bottomTitles, + ), + rightTitles: AxisTitles( + sideTitles: rightTitles, + )), + gridData: FlGridData( + show: true, + drawHorizontalLine: true, + horizontalInterval: 25, + drawVerticalLine: false, + getDrawingHorizontalLine: (value) { + return FlLine( + color: TColor.gray.withOpacity(0.15), + strokeWidth: 2, + ); + }, + ), + borderData: FlBorderData( + show: true, + border: Border.all( + color: Colors.transparent, + ), + ), + ), + )), + SizedBox( + height: media.width * 0.05, + ), + SizedBox( + height: media.width * 0.1, + ), + ], + ), + ), + ), + ), + ); + } + + void updateChartData(List newData) { + setState(() { + allSpots = newData; + }); + } + + List showingSections() { + return List.generate( + 2, + (i) { + var color0 = TColor.secondaryColor1; + + switch (i) { + case 0: + return PieChartSectionData( + color: color0, + value: 33, + title: '', + radius: 55, + titlePositionPercentageOffset: 0.55, + badgeWidget: const Text( + "20,1", + style: TextStyle( + color: Colors.white, + fontSize: 12, + fontWeight: FontWeight.w700), + )); + case 1: + return PieChartSectionData( + color: Colors.white, + value: 75, + title: '', + radius: 45, + titlePositionPercentageOffset: 0.55, + ); + + default: + throw Error(); + } + }, + ); + } + + LineTouchData get lineTouchData1 => LineTouchData( + handleBuiltInTouches: true, + touchTooltipData: LineTouchTooltipData( + tooltipBgColor: Colors.blueGrey.withOpacity(0.8), + ), + ); + + List get lineBarsData1 => [ + lineChartBarData1_1, + lineChartBarData1_2, + ]; + + LineChartBarData get lineChartBarData1_1 => LineChartBarData( + isCurved: true, + gradient: LinearGradient(colors: [ + TColor.primaryColor2.withOpacity(0.5), + TColor.primaryColor1.withOpacity(0.5), + ]), + barWidth: 4, + isStrokeCapRound: true, + dotData: FlDotData(show: false), + belowBarData: BarAreaData(show: false), + spots: const [ + FlSpot(1, 35), + FlSpot(2, 70), + FlSpot(3, 40), + FlSpot(4, 80), + FlSpot(5, 25), + FlSpot(6, 70), + FlSpot(7, 35), + ], + ); + + LineChartBarData get lineChartBarData1_2 => LineChartBarData( + isCurved: true, + gradient: LinearGradient(colors: [ + TColor.secondaryColor2.withOpacity(0.5), + TColor.secondaryColor1.withOpacity(0.5), + ]), + barWidth: 2, + isStrokeCapRound: true, + dotData: FlDotData(show: false), + belowBarData: BarAreaData( + show: false, + ), + spots: const [ + FlSpot(1, 80), + FlSpot(2, 50), + FlSpot(3, 90), + FlSpot(4, 40), + FlSpot(5, 80), + FlSpot(6, 35), + FlSpot(7, 60), + ], + ); + + SideTitles get rightTitles => SideTitles( + getTitlesWidget: rightTitleWidgets, + showTitles: true, + interval: 20, + reservedSize: 40, + ); + + Widget rightTitleWidgets(double value, TitleMeta meta) { + String text; + switch (value.toInt()) { + case 0: + text = '0%'; + break; + case 20: + text = '20%'; + break; + case 40: + text = '40%'; + break; + case 60: + text = '60%'; + break; + case 80: + text = '80%'; + break; + case 100: + text = '100%'; + break; + default: + return Container(); + } + + return Text(text, + style: TextStyle( + color: TColor.gray, + fontSize: 12, + ), + textAlign: TextAlign.center); + } + + SideTitles get bottomTitles => SideTitles( + showTitles: true, + reservedSize: 32, + interval: 1, + getTitlesWidget: bottomTitleWidgets, + ); + + Widget bottomTitleWidgets(double value, TitleMeta meta) { + var style = TextStyle( + color: TColor.gray, + fontSize: 12, + ); + Widget text; + switch (value.toInt()) { + case 1: + text = Text('Dim', style: style); + break; + case 2: + text = Text('Lun', style: style); + break; + case 3: + text = Text('Mar', style: style); + break; + case 4: + text = Text('Mer', style: style); + break; + case 5: + text = Text('Jeu', style: style); + break; + case 6: + text = Text('Ven', style: style); + break; + case 7: + text = Text('Sam', style: style); + break; + default: + text = Text('', style: style); + break; + } + + return SideTitleWidget( + axisSide: meta.axisSide, + space: 10, + child: text, + ); + } +} diff --git a/lib/View/login/Mobile/android_login_view.dart b/lib/View/login/Mobile/android_login_view.dart index c624567..38ab17e 100644 --- a/lib/View/login/Mobile/android_login_view.dart +++ b/lib/View/login/Mobile/android_login_view.dart @@ -1,38 +1,42 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:smartfit_app_mobile/Modele/utile/login_user.dart'; import 'package:smartfit_app_mobile/View/main_tab/main_tab_view.dart'; import 'package:smartfit_app_mobile/common/colo_extension.dart'; import 'package:smartfit_app_mobile/common_widget/round_button.dart'; import 'package:smartfit_app_mobile/common_widget/round_text_field.dart'; import 'package:tuple/tuple.dart'; -class AndroidLoginView extends StatelessWidget { - AndroidLoginView( - this._obscureText, - this._errorLogin, - this._msgError, - this._toggle, - this._printMsgError, - this.getUserInfo, - this.checkLoginAndPassword, - this.fillUser, - {super.key}); +class MobileLoginView extends StatefulWidget { + const MobileLoginView({super.key}); - bool _obscureText; - bool _errorLogin; - final String _msgError; + @override + State createState() => _MobileLoginView(); +} + +class _MobileLoginView extends State { + final Login util = Login(); + + bool _obscureText = true; + bool _errorLogin = false; + String _msgError = ""; final controllerTextEmail = TextEditingController(); final controllerTextPassword = TextEditingController(); - // ---- Fonction --- // - final void Function() _toggle; - final Future> Function(String email, String password) - checkLoginAndPassword; - final Future Function(String token) getUserInfo; - final void Function(String msgError) _printMsgError; - final void Function( - BuildContext context, Map map, String token) fillUser; + // Toggles the password show status + void _toggle() { + setState(() { + _obscureText = !_obscureText; + }); + } + + void _printMsgError(String msgError) { + setState(() { + _msgError = msgError; + _errorLogin = true; + }); + } @override Widget build(BuildContext context) { @@ -48,7 +52,7 @@ class AndroidLoginView extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( - "Bienvenue, Android", + "Bienvenue", style: TextStyle(color: TColor.gray, fontSize: 16), ), Text( @@ -114,19 +118,20 @@ class AndroidLoginView extends StatelessWidget { RoundButton( title: "Se connecter", onPressed: () async { - Tuple2 result = await checkLoginAndPassword( - controllerTextEmail.text, - controllerTextPassword.text); + Tuple2 result = + await util.checkLoginAndPassword( + controllerTextEmail.text, + controllerTextPassword.text); if (result.item1 == true) { - Tuple2 infoUser = await getUserInfo(result.item2); + Tuple2 infoUser = await util.getUserInfo(result.item2); if (infoUser.item1 == false) { //print("Erreur - Impossible de récupéré les données de l'utilisateur"); _printMsgError( "Impossible de récupéré les données de l'utilisateur - {$infoUser.item2}"); } else { - fillUser(context, infoUser.item2, result.item2); + util.fillUser(context, infoUser.item2, result.item2); Navigator.push( context, diff --git a/lib/View/login/Mobile/android_signup_view.dart b/lib/View/login/Mobile/android_signup_view.dart new file mode 100644 index 0000000..a503692 --- /dev/null +++ b/lib/View/login/Mobile/android_signup_view.dart @@ -0,0 +1,275 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:smartfit_app_mobile/Modele/utile/signup_user.dart'; +import 'package:smartfit_app_mobile/View/login/login_view.dart'; +import 'package:smartfit_app_mobile/common/colo_extension.dart'; +import 'package:smartfit_app_mobile/common_widget/round_button.dart'; +import 'package:smartfit_app_mobile/common_widget/round_text_field.dart'; +import 'package:tuple/tuple.dart'; + +class MobileSignUpView extends StatefulWidget { + const MobileSignUpView({super.key}); + + @override + State createState() => _MobileSignUpView(); +} + +class _MobileSignUpView extends State { + final SignUp util = SignUp(); + + bool _obscureText = true; + bool _errorCreateUser = false; + bool _isCheck = false; + String _msgError = ""; + + final controllerTextEmail = TextEditingController(); + final controllerUsername = TextEditingController(); + final controllerTextPassword = TextEditingController(); + + // Toggles the password show status + void _toggle() { + setState(() { + _obscureText = !_obscureText; + }); + } + + void _printMsgError(String msgError) { + setState(() { + _msgError = msgError; + _errorCreateUser = true; + }); + } + + void _check() { + setState(() { + _isCheck = !_isCheck; + }); + } + + @override + Widget build(BuildContext context) { + var media = MediaQuery.of(context).size; + return Scaffold( + backgroundColor: TColor.white, + body: SingleChildScrollView( + child: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + "Bienvenue,", + style: TextStyle(color: TColor.gray, fontSize: 16), + ), + Text( + "Créer un compte", + style: TextStyle( + color: TColor.black, + fontSize: 20, + fontWeight: FontWeight.w700), + ), + SizedBox( + height: media.width * 0.05, + ), + RoundTextField( + hitText: "Prénom", + icon: "assets/img/user_text.svg", + controller: controllerUsername, + ), + SizedBox( + height: media.width * 0.04, + ), + RoundTextField( + hitText: "Email", + icon: "assets/img/email.svg", + keyboardType: TextInputType.emailAddress, + controller: controllerTextEmail, + ), + SizedBox( + height: media.width * 0.04, + ), + RoundTextField( + hitText: "Mot de passe", + icon: "assets/img/lock.svg", + obscureText: _obscureText, + controller: controllerTextPassword, + rigtIcon: TextButton( + onPressed: _toggle, + child: Container( + alignment: Alignment.center, + width: 20, + height: 20, + child: SvgPicture.asset( + "assets/img/show_password.svg", + width: 20, + height: 20, + fit: BoxFit.contain, + ))), + ), + Row( + // crossAxisAlignment: CrossAxisAlignment., + children: [ + IconButton( + onPressed: () { + _check(); + }, + icon: Icon( + _isCheck + ? Icons.check_box_outlined + : Icons.check_box_outline_blank_outlined, + color: TColor.gray, + size: 20, + ), + ), + Padding( + padding: const EdgeInsets.only(top: 8), + child: Text( + "En continuant, vous acceptez notre Politique de\nconfidentialité et nos Conditions d'utilisation.", + style: TextStyle(color: TColor.gray, fontSize: 10), + ), + ) + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Visibility( + visible: _errorCreateUser, + child: Text("Error - $_msgError", + style: TextStyle(color: TColor.red))), + SizedBox( + height: media.width * 0.4, + ), + RoundButton( + title: "Créer un compte", + onPressed: () async { + Tuple2 result = await util.createUser( + controllerTextEmail.text, + controllerUsername.text, + controllerTextPassword.text); + if (result.item1) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const LoginView())); + } else { + _printMsgError(result.item2); + } + }), + SizedBox( + height: media.width * 0.04, + ), + Row( + // crossAxisAlignment: CrossAxisAlignment., + children: [ + Expanded( + child: Container( + height: 1, + color: TColor.gray.withOpacity(0.5), + )), + Text( + " Ou ", + style: TextStyle(color: TColor.black, fontSize: 12), + ), + Expanded( + child: Container( + height: 1, + color: TColor.gray.withOpacity(0.5), + )), + ], + ), + SizedBox( + height: media.width * 0.04, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GestureDetector( + onTap: () {}, + child: Container( + width: 50, + height: 50, + alignment: Alignment.center, + decoration: BoxDecoration( + color: TColor.white, + border: Border.all( + width: 1, + color: TColor.gray.withOpacity(0.4), + ), + borderRadius: BorderRadius.circular(15), + ), + child: Image.asset( + "assets/img/google.png", + width: 20, + height: 20, + ), + ), + ), + SizedBox( + width: media.width * 0.04, + ), + GestureDetector( + onTap: () {}, + child: Container( + width: 50, + height: 50, + alignment: Alignment.center, + decoration: BoxDecoration( + color: TColor.white, + border: Border.all( + width: 1, + color: TColor.gray.withOpacity(0.4), + ), + borderRadius: BorderRadius.circular(15), + ), + child: Image.asset( + "assets/img/suunto.png", + width: 35, + height: 35, + ), + ), + ) + ], + ), + SizedBox( + height: media.width * 0.04, + ), + TextButton( + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const LoginView())); + }, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + "Vous avez déjà un compte ? ", + style: TextStyle( + color: TColor.black, + fontSize: 14, + ), + ), + Text( + "Se connecter", + style: TextStyle( + color: TColor.black, + fontSize: 14, + fontWeight: FontWeight.w700), + ) + ], + ), + ), + SizedBox( + height: media.width * 0.04, + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/lib/View/login/login_view.dart b/lib/View/login/login_view.dart index 1563917..1290373 100644 --- a/lib/View/login/login_view.dart +++ b/lib/View/login/login_view.dart @@ -1,32 +1,7 @@ -import 'dart:convert'; -import 'dart:io'; -import 'package:crypto/crypto.dart'; -import 'package:flutter/foundation.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:provider/provider.dart'; -import 'package:smartfit_app_mobile/Modele/Api/i_data_strategy.dart'; -import 'package:smartfit_app_mobile/Modele/Api/request_api.dart'; -import 'package:smartfit_app_mobile/Modele/user.dart'; +import 'package:responsive_builder/responsive_builder.dart'; import 'package:smartfit_app_mobile/View/login/Mobile/android_login_view.dart'; import 'package:smartfit_app_mobile/View/login/web/web_login_view.dart'; import 'package:flutter/material.dart'; -import 'package:tuple/tuple.dart'; - -String getPlatforme() { - if (kIsWeb) { - return "Web"; - } - if (Platform.isAndroid) { - return "Android"; - } - if (Platform.isWindows) { - return "Windows"; - } - if (Platform.isMacOS) { - return "MacOS"; - } - return "Null"; -} class LoginView extends StatefulWidget { const LoginView({super.key}); @@ -36,54 +11,10 @@ class LoginView extends StatefulWidget { } class _LoginViewState extends State { - bool _obscureText = true; - String _msgError = ""; - bool _errorLogin = false; - IDataStrategy api = RequestApi(); - String platforme = getPlatforme(); - - Future> checkLoginAndPassword( - String email, String password) async { - Tuple2 result = await api.connexion( - email, sha256.convert(utf8.encode(password)).toString()); - return result; - } - - Future>> getUserInfo(String token) async { - Tuple2 result = await api.getInfoUser(token); - if (result.item1 == false) { - return const Tuple2(false, {"Empty": "Empty"}); - } - return Tuple2(true, result.item2); - } - - void fillUser(BuildContext context, Map map, String token) { - context.read().email = map["email"]; - context.read().username = map["username"]; - context.read().token = token; - context.read().listActivity = List.empty(growable: true); - } - - // Toggles the password show status - void _toggle() { - setState(() { - _obscureText = !_obscureText; - }); - } - - void _printMsgError(String msgError) { - _msgError = msgError; - _errorLogin = true; - } - @override Widget build(BuildContext context) { - if (platforme == "Android") { - return AndroidLoginView(_obscureText, _errorLogin, _msgError, _toggle, - _printMsgError, getUserInfo, checkLoginAndPassword, fillUser); - } else { - return WebLoginView(_obscureText, _errorLogin, _msgError, _toggle, - _printMsgError, getUserInfo, checkLoginAndPassword, fillUser); - } + return ScreenTypeLayout.builder( + mobile: (_) => const MobileLoginView(), + desktop: (_) => const WebLoginView()); } } diff --git a/lib/View/login/signup_view.dart b/lib/View/login/signup_view.dart index 7d0aab5..b4630df 100644 --- a/lib/View/login/signup_view.dart +++ b/lib/View/login/signup_view.dart @@ -1,14 +1,7 @@ -import 'dart:convert'; -import 'package:crypto/crypto.dart'; -import 'package:flutter_svg/svg.dart'; -import 'package:smartfit_app_mobile/Modele/Api/i_data_strategy.dart'; -import 'package:smartfit_app_mobile/Modele/Api/request_api.dart'; -import 'package:smartfit_app_mobile/View/login/login_view.dart'; -import 'package:smartfit_app_mobile/common/colo_extension.dart'; -import 'package:smartfit_app_mobile/common_widget/round_button.dart'; -import 'package:smartfit_app_mobile/common_widget/round_text_field.dart'; +import 'package:responsive_builder/responsive_builder.dart'; +import 'package:smartfit_app_mobile/View/login/Mobile/android_signup_view.dart'; import 'package:flutter/material.dart'; -import 'package:tuple/tuple.dart'; +import 'package:smartfit_app_mobile/View/login/web/web_signup_view.dart'; class SignUpView extends StatefulWidget { const SignUpView({super.key}); @@ -18,255 +11,11 @@ class SignUpView extends StatefulWidget { } class _SignUpViewState extends State { - bool _obscureText = true; - bool _errorCreateUser = false; - bool isCheck = false; - String _msgError = ""; - IDataStrategy api = RequestApi(); - - final controllerTextEmail = TextEditingController(); - final controllerTextUsername = TextEditingController(); - final controllerTextPassword = TextEditingController(); - - Future> createUser() async { - return await api.postUser( - controllerTextEmail.text, - sha256.convert(utf8.encode(controllerTextPassword.text)).toString(), - controllerTextUsername.text); - } - - // Toggles the password show status - void _toggle() { - setState(() { - _obscureText = !_obscureText; - }); - } - @override Widget build(BuildContext context) { - var media = MediaQuery.of(context).size; - return Scaffold( - backgroundColor: TColor.white, - body: SingleChildScrollView( - child: SafeArea( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - "Bienvenue,", - style: TextStyle(color: TColor.gray, fontSize: 16), - ), - Text( - "Créer un compte", - style: TextStyle( - color: TColor.black, - fontSize: 20, - fontWeight: FontWeight.w700), - ), - SizedBox( - height: media.width * 0.05, - ), - const RoundTextField( - hitText: "Prénom", - icon: "assets/img/user_text.svg", - ), - SizedBox( - height: media.width * 0.04, - ), - RoundTextField( - hitText: "Email", - icon: "assets/img/email.svg", - keyboardType: TextInputType.emailAddress, - controller: controllerTextEmail, - ), - SizedBox( - height: media.width * 0.04, - ), - RoundTextField( - hitText: "Mot de passe", - icon: "assets/img/lock.svg", - obscureText: _obscureText, - controller: controllerTextPassword, - rigtIcon: TextButton( - onPressed: _toggle, - child: Container( - alignment: Alignment.center, - width: 20, - height: 20, - child: SvgPicture.asset( - "assets/img/show_password.svg", - width: 20, - height: 20, - fit: BoxFit.contain, - ))), - ), - Row( - // crossAxisAlignment: CrossAxisAlignment., - children: [ - IconButton( - onPressed: () { - setState(() { - isCheck = !isCheck; - }); - }, - icon: Icon( - isCheck - ? Icons.check_box_outlined - : Icons.check_box_outline_blank_outlined, - color: TColor.gray, - size: 20, - ), - ), - Padding( - padding: const EdgeInsets.only(top: 8), - child: Text( - "En continuant, vous acceptez notre Politique de\nconfidentialité et nos Conditions d'utilisation.", - style: TextStyle(color: TColor.gray, fontSize: 10), - ), - ) - ], - ), - SizedBox( - height: media.width * 0.05, - ), - Visibility( - visible: _errorCreateUser, - child: Text("Error - $_msgError", - style: TextStyle(color: TColor.red))), - SizedBox( - height: media.width * 0.4, - ), - RoundButton( - title: "Créer un compte", - onPressed: () async { - Tuple2 result = await createUser(); - if (result.item1) { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const LoginView())); - } else { - setState(() { - _errorCreateUser = true; - _msgError = result.item2; - }); - } - }), - SizedBox( - height: media.width * 0.04, - ), - Row( - // crossAxisAlignment: CrossAxisAlignment., - children: [ - Expanded( - child: Container( - height: 1, - color: TColor.gray.withOpacity(0.5), - )), - Text( - " Ou ", - style: TextStyle(color: TColor.black, fontSize: 12), - ), - Expanded( - child: Container( - height: 1, - color: TColor.gray.withOpacity(0.5), - )), - ], - ), - SizedBox( - height: media.width * 0.04, - ), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - GestureDetector( - onTap: () {}, - child: Container( - width: 50, - height: 50, - alignment: Alignment.center, - decoration: BoxDecoration( - color: TColor.white, - border: Border.all( - width: 1, - color: TColor.gray.withOpacity(0.4), - ), - borderRadius: BorderRadius.circular(15), - ), - child: Image.asset( - "assets/img/google.png", - width: 20, - height: 20, - ), - ), - ), - SizedBox( - width: media.width * 0.04, - ), - GestureDetector( - onTap: () {}, - child: Container( - width: 50, - height: 50, - alignment: Alignment.center, - decoration: BoxDecoration( - color: TColor.white, - border: Border.all( - width: 1, - color: TColor.gray.withOpacity(0.4), - ), - borderRadius: BorderRadius.circular(15), - ), - child: Image.asset( - "assets/img/suunto.png", - width: 35, - height: 35, - ), - ), - ) - ], - ), - SizedBox( - height: media.width * 0.04, - ), - TextButton( - onPressed: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const LoginView())); - }, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - "Vous avez déjà un compte ? ", - style: TextStyle( - color: TColor.black, - fontSize: 14, - ), - ), - Text( - "Se connecter", - style: TextStyle( - color: TColor.black, - fontSize: 14, - fontWeight: FontWeight.w700), - ) - ], - ), - ), - SizedBox( - height: media.width * 0.04, - ), - ], - ), - ), - ), - ), + return ScreenTypeLayout.builder( + mobile: (_) => const MobileSignUpView(), + desktop: (_) => const WebSignUpView(), ); } } diff --git a/lib/View/login/web/web_login_view.dart b/lib/View/login/web/web_login_view.dart index d5eedf6..8ee22cd 100644 --- a/lib/View/login/web/web_login_view.dart +++ b/lib/View/login/web/web_login_view.dart @@ -1,38 +1,43 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:provider/provider.dart'; +import 'package:smartfit_app_mobile/Modele/user.dart'; +import 'package:smartfit_app_mobile/Modele/utile/login_user.dart'; import 'package:smartfit_app_mobile/View/main_tab/main_tab_view.dart'; import 'package:smartfit_app_mobile/common/colo_extension.dart'; import 'package:smartfit_app_mobile/common_widget/round_button.dart'; import 'package:smartfit_app_mobile/common_widget/round_text_field.dart'; import 'package:tuple/tuple.dart'; -class WebLoginView extends StatelessWidget { - WebLoginView( - this._obscureText, - this._errorLogin, - this._msgError, - this._toggle, - this._printMsgError, - this.getUserInfo, - this.checkLoginAndPassword, - this.fillUser, - {super.key}); +class WebLoginView extends StatefulWidget { + const WebLoginView({super.key}); - bool _obscureText; - bool _errorLogin; - final String _msgError; + @override + State createState() => _WebLoginView(); +} + +class _WebLoginView extends State { + final Login util = Login(); + bool _obscureText = true; + bool _errorLogin = false; + String _msgError = ""; final controllerTextEmail = TextEditingController(); final controllerTextPassword = TextEditingController(); - // ---- Fonction --- // - final void Function() _toggle; - final Future> Function(String email, String password) - checkLoginAndPassword; - final Future Function(String token) getUserInfo; - final void Function(String msgError) _printMsgError; - final void Function( - BuildContext context, Map map, String token) fillUser; + // Toggles the password show status + void _toggle() { + setState(() { + _obscureText = !_obscureText; + }); + } + + void _printMsgError(String msgError) { + setState(() { + _msgError = msgError; + _errorLogin = true; + }); + } @override Widget build(BuildContext context) { @@ -48,7 +53,7 @@ class WebLoginView extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( - "Bienvenue, Web", + "Bienvenue", style: TextStyle(color: TColor.gray, fontSize: 16), ), Text( @@ -114,20 +119,20 @@ class WebLoginView extends StatelessWidget { RoundButton( title: "Se connecter", onPressed: () async { - Tuple2 result = await checkLoginAndPassword( - controllerTextEmail.text, - controllerTextPassword.text); + Tuple2 result = + await util.checkLoginAndPassword( + controllerTextEmail.text, + controllerTextPassword.text); if (result.item1 == true) { - Tuple2 infoUser = await getUserInfo(result.item2); + Tuple2 infoUser = await util.getUserInfo(result.item2); if (infoUser.item1 == false) { //print("Erreur - Impossible de récupéré les données de l'utilisateur"); _printMsgError( "Impossible de récupéré les données de l'utilisateur - {$infoUser.item2}"); } else { - fillUser(context, infoUser.item2, result.item2); - + util.fillUser(context, infoUser.item2, result.item2); Navigator.push( context, MaterialPageRoute( diff --git a/lib/View/login/web/web_signup_view.dart b/lib/View/login/web/web_signup_view.dart new file mode 100644 index 0000000..a580fbd --- /dev/null +++ b/lib/View/login/web/web_signup_view.dart @@ -0,0 +1,275 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:smartfit_app_mobile/Modele/utile/signup_user.dart'; +import 'package:smartfit_app_mobile/View/login/login_view.dart'; +import 'package:smartfit_app_mobile/common/colo_extension.dart'; +import 'package:smartfit_app_mobile/common_widget/round_button.dart'; +import 'package:smartfit_app_mobile/common_widget/round_text_field.dart'; +import 'package:tuple/tuple.dart'; + +class WebSignUpView extends StatefulWidget { + const WebSignUpView({super.key}); + + @override + State createState() => _WebSignUpView(); +} + +class _WebSignUpView extends State { + final SignUp util = SignUp(); + + bool _obscureText = true; + bool _errorCreateUser = false; + bool _isCheck = false; + String _msgError = ""; + + final controllerTextEmail = TextEditingController(); + final controllerUsername = TextEditingController(); + final controllerTextPassword = TextEditingController(); + + // Toggles the password show status + void _toggle() { + setState(() { + _obscureText = !_obscureText; + }); + } + + void _printMsgError(String msgError) { + setState(() { + _msgError = msgError; + _errorCreateUser = true; + }); + } + + void _check() { + setState(() { + _isCheck = !_isCheck; + }); + } + + @override + Widget build(BuildContext context) { + var media = MediaQuery.of(context).size; + return Scaffold( + backgroundColor: TColor.white, + body: SingleChildScrollView( + child: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + "Bienvenue,", + style: TextStyle(color: TColor.gray, fontSize: 16), + ), + Text( + "Créer un compte", + style: TextStyle( + color: TColor.black, + fontSize: 20, + fontWeight: FontWeight.w700), + ), + SizedBox( + height: media.width * 0.05, + ), + RoundTextField( + hitText: "Prénom", + icon: "assets/img/user_text.svg", + controller: controllerUsername, + ), + SizedBox( + height: media.width * 0.04, + ), + RoundTextField( + hitText: "Email", + icon: "assets/img/email.svg", + keyboardType: TextInputType.emailAddress, + controller: controllerTextEmail, + ), + SizedBox( + height: media.width * 0.04, + ), + RoundTextField( + hitText: "Mot de passe", + icon: "assets/img/lock.svg", + obscureText: _obscureText, + controller: controllerTextPassword, + rigtIcon: TextButton( + onPressed: _toggle, + child: Container( + alignment: Alignment.center, + width: 20, + height: 20, + child: SvgPicture.asset( + "assets/img/show_password.svg", + width: 20, + height: 20, + fit: BoxFit.contain, + ))), + ), + Row( + // crossAxisAlignment: CrossAxisAlignment., + children: [ + IconButton( + onPressed: () { + _check(); + }, + icon: Icon( + _isCheck + ? Icons.check_box_outlined + : Icons.check_box_outline_blank_outlined, + color: TColor.gray, + size: 20, + ), + ), + Padding( + padding: const EdgeInsets.only(top: 8), + child: Text( + "En continuant, vous acceptez notre Politique de\nconfidentialité et nos Conditions d'utilisation.", + style: TextStyle(color: TColor.gray, fontSize: 10), + ), + ) + ], + ), + SizedBox( + height: media.width * 0.05, + ), + Visibility( + visible: _errorCreateUser, + child: Text("Error - $_msgError", + style: TextStyle(color: TColor.red))), + SizedBox( + height: media.width * 0.4, + ), + RoundButton( + title: "Créer un compte", + onPressed: () async { + Tuple2 result = await util.createUser( + controllerTextEmail.text, + controllerUsername.text, + controllerTextPassword.text); + if (result.item1) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const LoginView())); + } else { + _printMsgError(result.item2); + } + }), + SizedBox( + height: media.width * 0.04, + ), + Row( + // crossAxisAlignment: CrossAxisAlignment., + children: [ + Expanded( + child: Container( + height: 1, + color: TColor.gray.withOpacity(0.5), + )), + Text( + " Ou ", + style: TextStyle(color: TColor.black, fontSize: 12), + ), + Expanded( + child: Container( + height: 1, + color: TColor.gray.withOpacity(0.5), + )), + ], + ), + SizedBox( + height: media.width * 0.04, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GestureDetector( + onTap: () {}, + child: Container( + width: 50, + height: 50, + alignment: Alignment.center, + decoration: BoxDecoration( + color: TColor.white, + border: Border.all( + width: 1, + color: TColor.gray.withOpacity(0.4), + ), + borderRadius: BorderRadius.circular(15), + ), + child: Image.asset( + "assets/img/google.png", + width: 20, + height: 20, + ), + ), + ), + SizedBox( + width: media.width * 0.04, + ), + GestureDetector( + onTap: () {}, + child: Container( + width: 50, + height: 50, + alignment: Alignment.center, + decoration: BoxDecoration( + color: TColor.white, + border: Border.all( + width: 1, + color: TColor.gray.withOpacity(0.4), + ), + borderRadius: BorderRadius.circular(15), + ), + child: Image.asset( + "assets/img/suunto.png", + width: 35, + height: 35, + ), + ), + ) + ], + ), + SizedBox( + height: media.width * 0.04, + ), + TextButton( + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => const LoginView())); + }, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + "Vous avez déjà un compte ? ", + style: TextStyle( + color: TColor.black, + fontSize: 14, + ), + ), + Text( + "Se connecter", + style: TextStyle( + color: TColor.black, + fontSize: 14, + fontWeight: FontWeight.w700), + ) + ], + ), + ), + SizedBox( + height: media.width * 0.04, + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/lib/View/main_tab/main_tab_view.dart b/lib/View/main_tab/main_tab_view.dart index 85e45f1..5075863 100644 --- a/lib/View/main_tab/main_tab_view.dart +++ b/lib/View/main_tab/main_tab_view.dart @@ -1,10 +1,10 @@ +import 'package:smartfit_app_mobile/View/test/page_test.dart'; import 'package:smartfit_app_mobile/common/colo_extension.dart'; import 'package:smartfit_app_mobile/common_widget/tab_button.dart'; import 'package:smartfit_app_mobile/view/activity/activity.dart'; import 'package:smartfit_app_mobile/view/home/home_view.dart'; import 'package:flutter/material.dart'; import 'package:smartfit_app_mobile/view/map/my_map.dart'; -import 'package:smartfit_app_mobile/view/page_test.dart'; import 'package:smartfit_app_mobile/view/profile/profile_view.dart'; class MainTabView extends StatefulWidget { diff --git a/lib/View/main_tab/select_view.dart b/lib/View/main_tab/select_view.dart index 02c70c1..4ecad70 100644 --- a/lib/View/main_tab/select_view.dart +++ b/lib/View/main_tab/select_view.dart @@ -5,7 +5,7 @@ import 'package:flutter/material.dart'; import 'package:smartfit_app_mobile/view/home/blank_view.dart'; //import '../sleep_tracker/sleep_tracker_view.dart'; - +/* class SelectView extends StatelessWidget { const SelectView({super.key}); @@ -61,3 +61,4 @@ class SelectView extends StatelessWidget { ); } } +*/ \ No newline at end of file diff --git a/lib/View/test/page_test.dart b/lib/View/test/page_test.dart index 4ed6b01..94cdf95 100644 --- a/lib/View/test/page_test.dart +++ b/lib/View/test/page_test.dart @@ -6,10 +6,12 @@ import 'package:flutter/material.dart'; import 'package:http/http.dart'; import 'package:path_provider/path_provider.dart'; import 'package:file_picker/file_picker.dart'; +import 'package:provider/provider.dart'; import 'dart:io'; import 'package:smartfit_app_mobile/Modele/Api/i_data_strategy.dart'; import 'package:smartfit_app_mobile/Modele/Api/request_api.dart'; import 'package:smartfit_app_mobile/Modele/manager_file.dart'; +import 'package:smartfit_app_mobile/Modele/user.dart'; import 'package:smartfit_app_mobile/View/login/signup_view.dart'; import 'package:tuple/tuple.dart'; @@ -191,6 +193,8 @@ class _TestPage extends State { @override Widget build(BuildContext context) { + User w = context.watch(); + return Scaffold( body: Column( children: [ @@ -230,7 +234,10 @@ class _TestPage extends State { onPressed: getOneFile, child: const Text("Get One File")), ElevatedButton( onPressed: getInfoUser, child: const Text("Get info User")), - Text(platforme) + Text(platforme), + Text(w.email), + Text(context.watch().username), + Text(Provider.of(context).username) ], ), ); diff --git a/pubspec.yaml b/pubspec.yaml index cfd00f8..7c9fbd9 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -54,6 +54,7 @@ dependencies: provider: ^6.0.5 tuple: ^2.0.2 crypto: ^3.0.3 + responsive_builder: ^0.7.0 dev_dependencies: flutter_test: