diff --git a/refilc_mobile_ui/lib/pages/home/home_page.dart b/refilc_mobile_ui/lib/pages/home/home_page.dart index 40a8618..3a0e886 100644 --- a/refilc_mobile_ui/lib/pages/home/home_page.dart +++ b/refilc_mobile_ui/lib/pages/home/home_page.dart @@ -195,6 +195,23 @@ class HomePageState extends State with TickerProviderStateMixin { // ]; // String? selectedValue; + // DateTime now = DateTime.now(); + DateTime now = DateTime(2024, 4, 22, 5, 55); + LiveCardState currentState = LiveCardState.empty; + + if (now.isBefore(DateTime(now.year, DateTime.august, 31)) && + now.isAfter(DateTime(now.year, DateTime.june, 14))) { + currentState = LiveCardState.summary; + } else if (now.hour >= 12 && now.hour < 20) { + currentState = LiveCardState.afternoon; + } else if (now.hour >= 20) { + currentState = LiveCardState.night; + } else if (now.hour >= 5 && now.hour <= 10) { + currentState = LiveCardState.morning; + } else { + currentState = LiveCardState.empty; + } + return Scaffold( body: Stack( children: [ @@ -301,7 +318,11 @@ class HomePageState extends State with TickerProviderStateMixin { ), ], - expandedHeight: _liveCardAnimation.value * 238.0, + // expandedHeight: _liveCardAnimation.value * 238.0, + expandedHeight: _liveCardAnimation.value * + (currentState == LiveCardState.morning + ? 280.0 + : 238.0), // Live Card flexibleSpace: FlexibleSpaceBar( @@ -309,8 +330,10 @@ class HomePageState extends State with TickerProviderStateMixin { padding: EdgeInsets.only( left: 24.0, right: 24.0, - top: - 62.0 + MediaQuery.of(context).padding.top, + top: (currentState == LiveCardState.morning + ? 0.0 + : 62.0) + + MediaQuery.of(context).padding.top, bottom: 52.0, ), child: Transform.scale( diff --git a/refilc_mobile_ui/lib/pages/home/live_card/live_card.dart b/refilc_mobile_ui/lib/pages/home/live_card/live_card.dart index 1807d0b..9526c51 100644 --- a/refilc_mobile_ui/lib/pages/home/live_card/live_card.dart +++ b/refilc_mobile_ui/lib/pages/home/live_card/live_card.dart @@ -3,9 +3,9 @@ import 'package:refilc/api/providers/user_provider.dart'; import 'package:refilc/helpers/subject.dart'; import 'package:refilc/icons/filc_icons.dart'; import 'package:refilc/models/settings.dart'; -import 'package:refilc_mobile_ui/common/round_border_icon.dart'; import 'package:refilc_mobile_ui/common/splitted_panel/splitted_panel.dart'; import 'package:refilc_mobile_ui/pages/home/live_card/heads_up_countdown.dart'; +import 'package:refilc_mobile_ui/pages/home/live_card/segmented_countdown.dart'; import 'package:refilc_mobile_ui/screens/summary/summary_screen.dart'; import 'package:flutter/material.dart'; import 'package:refilc/utils/format.dart'; @@ -58,6 +58,8 @@ class LiveCardStateA extends State { // test liveCard.currentState = LiveCardState.morning; + final dt = DateTime(2024, 3, 22, 17, 12, 1, 1, 1); + switch (liveCard.currentState) { case LiveCardState.summary: child = LiveCardWidget( @@ -170,8 +172,17 @@ class LiveCardStateA extends State { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('Hamarosan kezdődik az első órád!'), - Text('1 óra 32 perc 26 másodperc'), + Text( + 'Hamarosan kezdődik az első órád!'.i18n, + style: const TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16.0, + ), + ), + const SizedBox( + height: 5.0, + ), + SegmentedCountdown(date: dt) ], ), Row( diff --git a/refilc_mobile_ui/lib/pages/home/live_card/live_card.i18n.dart b/refilc_mobile_ui/lib/pages/home/live_card/live_card.i18n.dart index 2dbca77..f15069b 100644 --- a/refilc_mobile_ui/lib/pages/home/live_card/live_card.i18n.dart +++ b/refilc_mobile_ui/lib/pages/home/live_card/live_card.i18n.dart @@ -17,6 +17,10 @@ extension Localization on String { "first_lesson_2": " in room ", "first_lesson_3": ", at ", "first_lesson_4": ".", + // segmented countdown + "h": "hour(s)", + "m": "minute(s)", + "s": "sec(s)", }, "hu_hu": { "next": "Következő", @@ -32,6 +36,10 @@ extension Localization on String { "first_lesson_2": " lesz, a ", "first_lesson_3": " teremben, ", "first_lesson_4": "-kor.", + // segmented countdown + "h": "óra", + "m": "perc", + "s": "másodperc", }, "de_de": { "next": "Nächste", @@ -47,6 +55,10 @@ extension Localization on String { "first_lesson_2": ", in Raum ", "first_lesson_3": ", um ", "first_lesson_4": " Uhr.", + // segmented countdown + "h": "óra", + "m": "perc", + "s": "másodperc", }, }; diff --git a/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart b/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart index 90f5cdf..07f3933 100644 --- a/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart +++ b/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart @@ -1,4 +1,3 @@ -import 'package:i18n_extension/i18n_extension.dart'; import 'package:refilc/models/settings.dart'; import 'package:refilc/theme/colors/colors.dart'; import 'package:refilc_mobile_ui/common/progress_bar.dart'; diff --git a/refilc_mobile_ui/lib/pages/home/live_card/segmented_countdown.dart b/refilc_mobile_ui/lib/pages/home/live_card/segmented_countdown.dart new file mode 100644 index 0000000..4089047 --- /dev/null +++ b/refilc_mobile_ui/lib/pages/home/live_card/segmented_countdown.dart @@ -0,0 +1,152 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:refilc/theme/colors/colors.dart'; +import 'live_card.i18n.dart'; + +class SegmentedCountdown extends StatefulWidget { + const SegmentedCountdown({super.key, required this.date}); + + final DateTime date; + + @override + SegmentedCountdownState createState() => SegmentedCountdownState(); +} + +class SegmentedCountdownState extends State { + @override + Widget build(BuildContext context) { + Duration diffDate = widget.date.difference(DateTime.now()); + + String diffHours = (diffDate.inHours % 24).toString(); + String diffMins = (diffDate.inMinutes % 60).toString(); + String diffSecs = (diffDate.inSeconds % 60).toString(); + + return Row( + children: [ + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary.withOpacity(0.05), + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(vertical: 2.0), + width: 20.0, + alignment: Alignment.center, + child: Text( + diffHours, + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + ), + ), + ), + const SizedBox( + width: 7.0, + ), + Text( + 'h'.i18n, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: AppColors.of(context).text.withOpacity(0.6), + ), + ), + const SizedBox( + width: 7.0, + ), + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary.withOpacity(0.05), + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(vertical: 2.0), + width: 20.0, + alignment: Alignment.center, + child: Text( + diffMins[0], + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + ), + ), + ), + if (diffMins.length == 2) + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary.withOpacity(0.05), + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(vertical: 2.0), + margin: const EdgeInsets.only(left: 4.0), + width: 20.0, + alignment: Alignment.center, + child: Text( + diffMins[1], + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + ), + ), + ), + const SizedBox( + width: 7.0, + ), + Text( + 'm'.i18n, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: AppColors.of(context).text.withOpacity(0.6), + ), + ), + const SizedBox( + width: 7.0, + ), + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary.withOpacity(0.05), + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(vertical: 2.0), + width: 20.0, + alignment: Alignment.center, + child: Text( + diffSecs[0], + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + ), + ), + ), + if (diffSecs.length == 2) + Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondary.withOpacity(0.05), + borderRadius: BorderRadius.circular(8.0), + ), + padding: const EdgeInsets.symmetric(vertical: 2.0), + margin: const EdgeInsets.only(left: 4.0), + width: 20.0, + alignment: Alignment.center, + child: Text( + diffSecs[1], + style: const TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w600, + ), + ), + ), + const SizedBox( + width: 7.0, + ), + Text( + 's'.i18n, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: AppColors.of(context).text.withOpacity(0.6), + ), + ), + ], + ); + } +}