You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemm-flutter-app/lib/ui/marathon/marathon_screen.dart

407 lines
21 KiB
Dart

import 'dart:async';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:mohem_flutter_app/app_state/app_state.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/consts.dart';
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
import 'package:mohem_flutter_app/classes/lottie_consts.dart';
import 'package:mohem_flutter_app/config/routes.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/models/marathon/question_model.dart';
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_progress_container.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_qualifiers_container.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
import 'package:mohem_flutter_app/ui/marathon/widgets/question_card_builder.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
import 'package:mohem_flutter_app/widgets/button/default_button.dart';
import 'package:mohem_flutter_app/widgets/dialogs/confirm_dialog.dart';
import 'package:provider/provider.dart';
class MarathonScreen extends StatelessWidget {
const MarathonScreen({Key? key}) : super(key: key);
Widget getSuccessWidget({required int? gapType, required String? gapImage, required String? gapText}) {
if (gapType == 1) {
if (gapText == null) {
return Image.asset(MyLottieConsts.congratsGif, height: 200);
}
return gapText.toText18(color: MyColors.darkTextColor, isCentered: true);
}
if (gapType == 0) {
if (gapImage == null) {
return Image.asset(MyLottieConsts.congratsGif, height: 200);
}
return Image.network(ApiConsts.marathonBaseUrlServices + gapImage, height: 200);
}
return Image.asset(MyLottieConsts.congratsGif, height: 200);
}
Widget getDemoWinnerWidget(BuildContext context, {required MarathonProvider provider}) {
return provider.isUserOutOfGame
? Column(
children: <Widget>[
Lottie.asset(MyLottieConsts.noWinnerLottie),
Center(
child: LocaleKeys.noWinner.tr().toText18(color: MyColors.grey3AColor, isCentered: true),
),
],
)
: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: SvgPicture.asset("assets/images/winner_ribbon.svg", height: 50),
),
Align(
alignment: Alignment.center,
child: LocaleKeys.winner.tr().toText32(color: MyColors.white, isBold: true, isCentered: true).paddingOnly(top: 07),
)
],
),
),
16.height,
Column(
children: <Widget>[
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.demoMarathonDetailModel.selectedLanguage!,
arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
englishContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn ?? "",
).toText22(
color: MyColors.grey3AColor,
isCentered: true,
),
8.height,
AppState().memberInformationList!.eMPLOYEENUMBER!.toText22(color: MyColors.grey57Color),
],
),
60.height,
if (provider.demoMarathonDetailModel.sponsors != null && provider.demoMarathonDetailModel.sponsors!.isNotEmpty) ...<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
"${LocaleKeys.sponsoredBy.tr()} ".toText14(color: MyColors.grey77Color),
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.demoMarathonDetailModel.selectedLanguage!,
englishContent: provider.demoMarathonDetailModel.sponsors!.first.nameEn!,
arabicContent: provider.demoMarathonDetailModel.sponsors!.first.nameAr!,
).toText14(
color: MyColors.darkTextColor,
isBold: true,
),
],
),
5.height,
Image.network(
ApiConsts.marathonBaseUrlServices + provider.demoMarathonDetailModel.sponsors!.first.logo!,
height: 50,
width: 150,
fit: BoxFit.contain,
errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
return Image.asset("assets/images/logos/main_mohemm_logo.png", height: 50, width: 150);
},
)
],
],
),
Lottie.asset(MyLottieConsts.celebrate1Lottie),
],
);
}
Widget getWinnerWidget(BuildContext context, {required MarathonProvider provider}) {
return Container(
width: double.infinity,
decoration: MyDecorations.shadowDecoration,
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
child: (AppState().getIsDemoMarathon)
? getDemoWinnerWidget(context, provider: provider)
: provider.selectedWinners == null || (provider.selectedWinners!.isEmpty && !provider.iAmWinner)
? Column(
children: <Widget>[
Lottie.asset(MyLottieConsts.noWinnerLottie),
Center(
child: LocaleKeys.noWinner.tr().toText18(color: MyColors.grey3AColor, isCentered: true),
),
],
)
: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: SvgPicture.asset("assets/images/winner_ribbon.svg", height: 50),
),
Align(
alignment: Alignment.center,
child: ((provider.selectedWinners!.length == 1 && !provider.iAmWinner) || (provider.selectedWinners!.isEmpty && provider.iAmWinner)
? LocaleKeys.winner.tr()
: LocaleKeys.winners.tr())
.toText32(color: MyColors.white, isBold: true, isCentered: true)
.paddingOnly(top: 07),
)
],
),
),
16.height,
provider.iAmWinner
? Column(
children: <Widget>[
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
englishContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn ?? "",
).toText24(
color: MyColors.grey3AColor,
isCentered: true,
),
8.height,
AppState().memberInformationList!.eMPLOYEENUMBER!.toText22(color: MyColors.grey57Color),
],
)
: const SizedBox(),
if (provider.selectedWinners != null) ...<Widget>[
provider.selectedWinners!.length == 1 && !provider.iAmWinner
? Column(
children: <Widget>[
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
arabicContent: provider.selectedWinners![0].nameAr ?? "",
englishContent: provider.selectedWinners![0].nameEn ?? "",
).toText24(
color: MyColors.grey3AColor,
isCentered: true,
),
8.height,
provider.selectedWinners![0].employeeId!.toText22(color: MyColors.grey57Color),
],
)
: ListView.separated(
shrinkWrap: true,
itemCount: provider.selectedWinners!.length,
separatorBuilder: (BuildContext context, int index) {
return const Divider();
},
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.marathonDetailModel.selectedLanguage ?? 0,
arabicContent: provider.selectedWinners![index].nameAr ?? "",
englishContent: provider.selectedWinners![index].nameEn ?? "",
).toText16(
color: MyColors.grey3AColor,
),
provider.selectedWinners![index].employeeId!.toText16(color: MyColors.grey57Color),
],
);
},
),
],
60.height,
if (provider.marathonDetailModel.sponsors != null && provider.marathonDetailModel.sponsors!.isNotEmpty) ...<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
"${LocaleKeys.sponsoredBy.tr()} ".toText14(color: MyColors.grey77Color),
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: provider.marathonDetailModel.selectedLanguage!,
arabicContent: provider.marathonDetailModel.sponsors!.first.nameAr ?? "",
englishContent: provider.marathonDetailModel.sponsors!.first.nameEn ?? "",
).toText14(
color: MyColors.darkTextColor,
isBold: true,
),
],
),
5.height,
Image.network(
ApiConsts.marathonBaseUrlServices + provider.marathonDetailModel.sponsors!.first.logo!,
height: 50,
width: 150,
fit: BoxFit.contain,
errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
return Image.asset("assets/images/logos/main_mohemm_logo.png", height: 50, width: 150);
},
)
],
],
),
Lottie.asset(MyLottieConsts.celebrate1Lottie),
],
),
);
}
Widget getNameContainer(BuildContext context, MarathonProvider provider) {
return Container(
height: 50,
padding: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: MyColors.greenColor,
borderRadius: BorderRadius.circular(15),
boxShadow: <BoxShadow>[BoxShadow(color: const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3))],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
displayLocalizedContent(
isPhoneLangArabic: AppState().isArabic(context),
selectedLanguage: (!AppState().getIsDemoMarathon ? provider.marathonDetailModel.selectedLanguage : provider.demoMarathonDetailModel.selectedLanguage) ?? 0,
arabicContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEAr ?? "",
englishContent: AppState().memberInformationList!.eMPLOYEEDISPLAYNAMEEn ?? "",
).toText17(isBold: true, color: MyColors.white),
AppState().memberInformationList!.eMPLOYEENUMBER!.toText17(isBold: true, color: MyColors.white),
],
),
).paddingOnly(left: 20, right: 20, top: 12, bottom: 10);
}
@override
Widget build(BuildContext context) {
MarathonProvider provider = context.watch<MarathonProvider>();
return WillPopScope(
child: Scaffold(
appBar: AppBarWidget(
context,
title: LocaleKeys.brainMarathon.tr(),
onHomeTapped: () {
if (provider.questionCardStatus == QuestionCardStatus.winnerFound) {
provider.resetValues();
provider.getMarathonDetailsFromApi();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
} else {
showDialog(
context: context,
builder: (BuildContext context) => ConfirmDialog(
message: LocaleKeys.youWantToLeaveMarathon.tr(),
onTap: () {
provider.resetValues();
provider.getMarathonDetailsFromApi();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
},
),
);
}
},
onBackTapped: () {
if (provider.questionCardStatus == QuestionCardStatus.winnerFound) {
provider.resetValues();
provider.getMarathonDetailsFromApi();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
} else {
showDialog(
context: context,
builder: (BuildContext context) => ConfirmDialog(
message: LocaleKeys.youWantToLeaveMarathon.tr(),
onTap: () {
provider.resetValues();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
},
),
);
}
},
),
body: Column(
children: <Widget>[
ListView(
children: <Widget>[
10.height,
if (provider.questionCardStatus == QuestionCardStatus.findingWinner) ...<Widget>[
QualifiersContainer(provider: provider).paddingOnly(left: 21, right: 21),
] else if (provider.questionCardStatus == QuestionCardStatus.winnerFound)
...<Widget>[]
else ...<Widget>[
MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
],
if (provider.questionCardStatus == QuestionCardStatus.findingWinner && !provider.isUserOutOfGame) ...<Widget>[
getNameContainer(context, provider),
],
QuestionCardBuilder(
onQuestion: (BuildContext context) => const QuestionCard(),
onCompleted: (BuildContext context) => CustomStatusWidget(
asset: Lottie.asset(MyLottieConsts.allQuestions, height: 200),
title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
subTitle: LocaleKeys.allQuestionsCorrect.toText18(color: MyColors.darkTextColor, isCentered: true),
),
onCorrectAnswer: (BuildContext context) => CustomStatusWidget(
asset: getSuccessWidget(gapType: provider.gapTimeType, gapImage: provider.gapTimeImage, gapText: provider.gapTimeText),
title: LocaleKeys.congrats.tr().toText22(color: MyColors.greenColor),
subTitle: LocaleKeys.yourAnswerCorrect.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
),
onWinner: (BuildContext context) => getWinnerWidget(context, provider: provider),
onWrongAnswer: (BuildContext context) => CustomStatusWidget(
asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
title: LocaleKeys.oops.tr().toText22(color: MyColors.redColor),
subTitle: LocaleKeys.wrongAnswer.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
),
onSkippedAnswer: (BuildContext context) => CustomStatusWidget(
asset: Image.asset(MyLottieConsts.wrongAnswerGif, height: 200),
title: LocaleKeys.oops.tr().toText22(color: MyColors.redColor),
subTitle: LocaleKeys.youMissedTheQuestion.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
),
onFindingWinner: (BuildContext context) => CustomStatusWidget(
asset: Lottie.asset(MyLottieConsts.winnerLottie, height: 168, reverse: false, repeat: true),
title: LocaleKeys.fingersCrossed.tr().toText22(color: MyColors.greenColor),
subTitle: LocaleKeys.winnerSelectedRandomly.tr().toText18(color: MyColors.darkTextColor, isCentered: true),
),
questionCardStatus: provider.questionCardStatus,
).paddingOnly(top: 12, left: 21, right: 21),
],
).expanded,
provider.questionCardStatus == QuestionCardStatus.winnerFound
? DefaultButton(LocaleKeys.ok.tr(), () {
provider.resetValues();
provider.getMarathonDetailsFromApi();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
}).insideContainer
: const SizedBox()
],
),
),
onWillPop: () {
showDialog(
context: context,
builder: (BuildContext context) => ConfirmDialog(
message: LocaleKeys.youWantToLeaveMarathon.tr(),
onTap: () {
provider.resetValues();
Navigator.of(context).popUntil(ModalRoute.withName(AppRoutes.dashboard));
},
),
);
return Future<bool>.value(false);
},
);
}
}