feat: Adaptive Trials

app/lib/screens/study/dashboard/task_overview_tab/task_overview.dart

@@ -2,9 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 import 'package:studyu_app/routes.dart';
-import 'package:studyu_app/screens/study/dashboard/task_overview_tab/progress_row.dart';
 import 'package:studyu_app/screens/study/dashboard/task_overview_tab/task_box.dart';
-import 'package:studyu_app/theme.dart';
+import 'package:studyu_app/screens/study/onboarding/calendar_overview.dart';
 import 'package:studyu_app/widgets/intervention_card.dart';
 import 'package:studyu_core/core.dart';
 
@@ -75,54 +74,60 @@ class _TaskOverviewState extends State<TaskOverview> {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: <Widget>[
-        const SizedBox(height: 8),
-        ProgressRow(subject: widget.subject),
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              const SizedBox(height: 16),
-              Row(
-                children: [
-                  Expanded(
-                    child: Text(
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          const SizedBox(height: 8),
+          // ProgressRow(subject: widget.subject),
+
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Center(child: CalendarOverview(subject: widget.subject)),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(height: 16),
+                Row(
+                  children: [
+                    Text(
                       AppLocalizations.of(context)!.intervention_current,
                       style: theme.textTheme.titleLarge,
                     ),
-                  ),
-                  const Spacer(),
-                  Text(
-                    '${widget.subject!.daysLeftForPhase(widget.subject!.getInterventionIndexForDate(DateTime.now()))} ${AppLocalizations.of(context)!.days_left}',
-                    style: const TextStyle(color: primaryColor),
-                  ),
-                ],
-              ),
-              const SizedBox(height: 8),
-              InterventionCardTitle(
-                intervention:
-                    widget.subject!.getInterventionForDate(DateTime.now()),
-              ),
-              const SizedBox(height: 8),
-              Text(
-                AppLocalizations.of(context)!.today_tasks,
-                style: theme.textTheme.titleLarge,
-              ),
-            ],
-          ),
-        ),
-        // Todo: find good way to calculate duration of intervention and display it
-        Expanded(
-          child: ListView(
-            children: [
-              ...buildScheduleToday(context),
-            ],
+                    // const Spacer(),
+                    // Text(
+                    //   '${widget.subject!.daysLeftForPhase(widget.subject!.getInterventionIndexForDate(DateTime.now()))} ${AppLocalizations.of(context)!.days_left}',
+                    //   style: const TextStyle(color: primaryColor),
+                    // )
+                  ],
+                ),
+                const SizedBox(height: 8),
+                InterventionCardTitle(
+                  intervention:
+                      widget.subject!.getInterventionForDate(DateTime.now()),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  AppLocalizations.of(context)!.today_tasks,
+                  style: theme.textTheme.titleLarge,
+                ),
+              ],
+            ),
           ),
-        ),
-      ],
+          // Todo: find good way to calculate duration of intervention and display it
+          ...buildScheduleToday(context),
+          // Expanded(
+          //   child: ListView(
+          //     children: [
+          //       ...buildScheduleToday(context),
+          //     ],
+          //   ),
+          // ),
+        ],
+      ),
     );
   }
 }

app/lib/screens/study/onboarding/calendar_overview.dart

@@ -0,0 +1,251 @@
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:studyu_core/core.dart';
+import 'package:table_calendar/table_calendar.dart';
+
+class CalendarOverview extends StatefulWidget {
+  final StudySubject? subject;
+
+  const CalendarOverview({required this.subject, super.key});
+
+  @override
+  _CalendarOverviewState createState() => _CalendarOverviewState();
+}
+
+class _CalendarOverviewState extends State<CalendarOverview> {
+  DateTime _focusedDay = DateTime.now();
+
+  // init
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  int _dayOfYear(DateTime date) {
+    return normalizeDate(date).difference(DateTime.utc(date.year)).inDays + 1;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final kToday = DateTime.now();
+    final kFirstDay = DateTime(kToday.year, kToday.month - 3, kToday.day);
+    final kLastDay = DateTime(kToday.year, kToday.month + 3, kToday.day);
+    final List<List<Color>> colorScheme = [
+      [
+        const Color.fromRGBO(15, 174, 40, 1),
+        const Color.fromRGBO(176, 255, 189, 1),
+      ],
+      [
+        const Color.fromRGBO(92, 54, 173, 1),
+        const Color.fromRGBO(211, 191, 255, 1),
+      ],
+      [
+        const Color.fromRGBO(173, 73, 208, 1),
+        const Color.fromRGBO(237, 186, 255, 1),
+      ],
+      [
+        const Color.fromRGBO(222, 183, 45, 1),
+        const Color.fromRGBO(255, 239, 181, 1),
+      ]
+    ];
+
+    final schedule = widget.subject?.study.mp23Schedule;
+    if (schedule == null) {
+      throw Exception('Something went wrong, we need a schedule here');
+    }
+
+    final interventions = widget.subject!.study.interventions;
+    final segments = widget.subject!.study.mp23Schedule.segments;
+
+    // function for building
+// BuildContext, DateTime, DateTime
+    Widget buildCalendarDay(
+      BuildContext context,
+      DateTime day,
+      DateTime focusedDay, [
+      bool today = false,
+    ]) {
+      final text = DateFormat.d().format(day);
+
+      DateTime studyStartDay = widget.subject!.startedAt ?? DateTime.now();
+
+      studyStartDay = studyStartDay.add(const Duration(days: 1));
+
+      final nthDay = _dayOfYear(day) - _dayOfYear(studyStartDay);
+
+      StudyScheduleSegment? segment;
+
+      try {
+        segment = widget.subject?.study.getSegmentForDay(nthDay).$1;
+      } catch (e) {
+        print(e);
+      }
+
+      List<Color> colors = [
+        const Color.fromARGB(0, 0, 0, 0),
+        if (today) Colors.blue[600]! else Colors.grey[400]!,
+      ];
+
+      // gradient
+      Gradient? gradient;
+
+      if (segment is BaselineScheduleSegment) {
+        colors = [const Color.fromARGB(255, 228, 228, 228), Colors.black];
+      } else if (segment is ThompsonSamplingScheduleSegment) {
+        // TODO_NOW if day is in past, show the actual intervention
+        if (isSameDay(day, DateTime.now()) ||
+            isBeforeDay(day, DateTime.now())) {
+          print(
+            "isSameDay($day, ${DateTime.now()}: ${isSameDay(day, DateTime.now())}",
+          );
+          print(
+            "isBeforeDay($day, ${DateTime.now()}: ${isBeforeDay(day, DateTime.now())}",
+          );
+          final intervention = widget.subject!.getInterventionForDate(day)!;
+          // final intervention = schedule.getInterventionForDay(nthDay, [])!;
+          if (widget.subject != null) {
+            final index =
+                widget.subject!.study.interventions.indexOf(intervention);
+            colors = colorScheme[index % colorScheme.length];
+          }
+        } else {
+          colors = [Colors.white, Colors.white];
+          final List<Color> gradientColors = [];
+
+          for (int i = 0; i < widget.subject!.study.interventions.length; i++) {
+            gradientColors.add(colorScheme[i % colorScheme.length][0]);
+          }
+
+          gradient = LinearGradient(
+            colors: gradientColors,
+            transform: const GradientRotation(1),
+          );
+        }
+      } else if (segment is AlternatingScheduleSegment) {
+        colors = colorScheme[0];
+        final interventionOnDay =
+            widget.subject?.study.getInterventionForDay(nthDay, []);
+
+        if (interventionOnDay != null) {
+          final index =
+              widget.subject!.study.interventions.indexOf(interventionOnDay);
+          colors = colorScheme[index % colorScheme.length];
+        }
+      }
+
+      final decoration = gradient != null
+          ? BoxDecoration(
+              gradient: gradient,
+              shape: today ? BoxShape.circle : BoxShape.rectangle,
+            )
+          : BoxDecoration(
+              color: colors[0],
+              shape: today ? BoxShape.circle : BoxShape.rectangle,
+            );
+
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4),
+        child: AspectRatio(
+          aspectRatio: 1.0,
+          child: Container(
+            decoration: decoration,
+            child: Padding(
+              padding: EdgeInsets.zero,
+              child: Center(
+                child: Text(
+                  text,
+                  style: TextStyle(color: colors[1]),
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    // init
+    return Container(
+      constraints: const BoxConstraints(maxWidth: 400),
+      child: Column(
+        children: [
+          TableCalendar(
+            firstDay: kFirstDay,
+            lastDay: kLastDay,
+            focusedDay: _focusedDay,
+            headerStyle: const HeaderStyle(titleCentered: true),
+            availableCalendarFormats: const {
+              CalendarFormat.month: 'Month',
+            },
+            calendarBuilders: CalendarBuilders(
+              selectedBuilder: buildCalendarDay,
+              todayBuilder: (context, day, focusedDay) =>
+                  buildCalendarDay(context, day, focusedDay, true),
+              defaultBuilder: buildCalendarDay,
+              outsideBuilder: (context, day, focusedDay) {
+                final text = DateFormat.d().format(day);
+
+                return Center(
+                  child: Text(
+                    text,
+                    style: const TextStyle(color: Color.fromARGB(0, 0, 0, 0)),
+                  ),
+                );
+              },
+            ),
+            onPageChanged: (focusedDay) {
+              _focusedDay = focusedDay;
+            },
+          ),
+          if (segments.any((s) => s is BaselineScheduleSegment))
+            const Label(
+              color: Color.fromARGB(255, 228, 228, 228),
+              text: "Baseline",
+            ),
+          for (int i = 0; i < interventions.length; i++)
+            Label(
+              color: colorScheme[i % colorScheme.length][0],
+              text: interventions[i].name ?? '',
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+// class for rendering labels
+
+class Label extends StatelessWidget {
+  final String text;
+  final Color color;
+  final Color? borderColor;
+
+  const Label({
+    required this.text,
+    required this.color,
+    this.borderColor,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: Row(
+        children: [
+          Container(
+            width: 20,
+            height: 20,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: color,
+              border:
+                  borderColor != null ? Border.all(color: borderColor!) : null,
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text(text),
+        ],
+      ),
+    );
+  }
+}

app/lib/screens/study/onboarding/journey_overview.dart

@@ -5,6 +5,7 @@ import 'package:material_design_icons_flutter/material_design_icons_flutter.dart
 import 'package:provider/provider.dart';
 import 'package:studyu_app/models/app_state.dart';
 import 'package:studyu_app/routes.dart';
+import 'package:studyu_app/screens/study/onboarding/calendar_overview.dart';
 import 'package:studyu_app/screens/study/onboarding/onboarding_progress.dart';
 import 'package:studyu_app/widgets/bottom_onboarding_navigation.dart';
 import 'package:studyu_core/core.dart';
@@ -61,7 +62,8 @@ class _JourneyOverviewScreen extends State<JourneyOverviewScreen> {
             child: Column(
               children: [
                 //StudyTile.fromUserStudy(study: study),
-                Timeline(subject: subject),
+                // Timeline(subject: subject),
+                CalendarOverview(subject: subject),
               ],
             ),
           ),

app/lib/util/datetime.dart

@@ -0,0 +1,6 @@
+bool isBeforeDay(DateTime a, DateTime b) {
+  final numA = "${a.year}${a.month}${a.day}";
+  final numB = "${b.year}${b.month}${b.day}";
+
+  return int.parse(numA) < int.parse(numB);
+}