historic page

Sources/justMUSIC/lib/components/historic_component.dart

@@ -1,8 +1,16 @@
 import 'package:flutter/Material.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:justmusic/main.dart';
+import 'package:justmusic/values/constants.dart';
+import 'package:tuple/tuple.dart';
+
+import '../model/Music.dart';
 
 class HistoricComponent extends StatefulWidget {
   final int month;
-  const HistoricComponent({super.key, required this.month});
+  final int year;
+  const HistoricComponent({super.key, required this.month, required this.year});
 
   @override
   State<HistoricComponent> createState() => _HistoricComponentState();
@@ -17,27 +25,74 @@ class _HistoricComponentState extends State<HistoricComponent> {
     return DateTime(year, month + 1, 0).day;
   }
 
+  getHistoric() {}
+  List<Tuple2<int, Music>> historic = [
+    Tuple2(1, MyApp.postViewModel.bestPosts.first.music),
+    Tuple2(3, MyApp.postViewModel.bestPosts.first.music),
+    Tuple2(11, MyApp.postViewModel.bestPosts.first.music)
+  ];
+
   @override
   Widget build(BuildContext context) {
-    return Wrap(
+    return FutureBuilder(
-      spacing: 14,
+      future: ,
-      runSpacing: 14,
+        builder: (context, snapshot){
-      children: List.generate(getNumberOfDaysInMonth(DateTime.now().year, widget.month), (index) {
+      if(snapshot.hasData){
-        // Generate widgets
+        return Wrap(
-        return LimitedBox(
+          spacing: 14,
-          maxWidth: MediaQuery.of(context).size.width - 40 / 5,
+          runSpacing: 14,
-          child: Container(
+          children: List.generate(getNumberOfDaysInMonth(widget.year, widget.month), (index) {
-            decoration: BoxDecoration(
+            Tuple2<int, Music>? checkCapsule;
-                gradient: LinearGradient(colors: [
+            for (var element in historic) {
-                  Color(0xFF1E1E1E).withOpacity(0.7),
+              if (element.item1 == index + 1) {
-                  Color(0xFF1E1E1E).withOpacity(0),
+                checkCapsule = element;
-                ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
+              }
-                borderRadius: BorderRadius.circular(3)),
+            }
-            height: 60,
+            if ((widget.year > DateTime.now().year || widget.month > DateTime.now().month) ||
-            width: 60,
+                (widget.year == DateTime.now().year &&
-          ),
+                    widget.month == DateTime.now().month &&
+                    index > DateTime.now().day)) {
+              return Container(
+                decoration: BoxDecoration(
+                    gradient: LinearGradient(colors: [
+                      Color(0xFF1E1E1E).withOpacity(0.7),
+                      Color(0xFF1E1E1E).withOpacity(0),
+                    ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
+                    borderRadius: BorderRadius.circular(5)),
+                height: 60,
+                width: 60,
+              );
+            }
+            if (checkCapsule != null) {
+              return Container(
+                decoration: BoxDecoration(
+                    image: DecorationImage(image: NetworkImage((checkCapsule.item2.cover)!)),
+                    borderRadius: BorderRadius.circular(5)),
+                height: 60,
+                width: 60,
+              );
+            } else {
+              return Container(
+                color: bgColor,
+                height: 60,
+                width: 60,
+                child: Center(
+                  child: Text(
+                    (index + 1).toString(),
+                    style: GoogleFonts.plusJakartaSans(color: Colors.white, fontSize: 22, fontWeight: FontWeight.w800),
+                  ),
+                ),
+              );
+            }
+
+            // Generate widgets
+          }),
         );
-      }),
+      }
-    );
+      else{
+        return CupertinoActivityIndicator();
+      }
+
+    });
   }
 }

Sources/justMUSIC/lib/main.dart

@@ -26,6 +26,9 @@ import 'package:justmusic/view_model/UserViewModel.dart';
 import 'package:justmusic/model/User.dart' as userJustMusic;
 import 'firebase_options.dart';
 import 'package:timezone/data/latest.dart' as tz;
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:intl/date_symbol_data_local.dart';
 
 Future<void> main() async {
   tz.initializeTimeZones();
@@ -33,6 +36,7 @@ Future<void> main() async {
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
+  await initializeDateFormatting('fr_FR', null);
   await FirebaseMessaging.instance.requestPermission(sound: true);
   runApp(const MyApp());
 }

Sources/justMUSIC/lib/screens/capsule_historic_screen.dart

@@ -3,6 +3,7 @@ import 'package:google_fonts/google_fonts.dart';
 
 import '../components/historic_component.dart';
 import '../values/constants.dart';
+import 'package:intl/intl.dart';
 
 class CapsuleHistoricScreen extends StatefulWidget {
   const CapsuleHistoricScreen({super.key});
@@ -12,6 +13,20 @@ class CapsuleHistoricScreen extends StatefulWidget {
 }
 
 class _CapsuleHistoricScreenState extends State<CapsuleHistoricScreen> {
+  DateTime date = DateTime.now();
+
+  _reduceMonth() {
+    setState(() {
+      date = DateTime(date.year, date.month - 1, date.day);
+    });
+  }
+
+  _addMonth() {
+    setState(() {
+      date = DateTime(date.year, date.month + 1, date.day);
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -60,30 +75,73 @@ class _CapsuleHistoricScreenState extends State<CapsuleHistoricScreen> {
             padding: const EdgeInsets.symmetric(horizontal: settingPadding),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Padding(
-                  padding: EdgeInsets.only(top: 30, bottom: 40),
+                  padding: const EdgeInsets.only(top: 80, left: 60, right: 60),
-                  child: SizedBox(
+                  child: Align(
-                    width: double.infinity,
+                    alignment: Alignment.center,
-                    child: Stack(
+                    child: Row(
-                      alignment: Alignment.center,
+                      mainAxisSize: MainAxisSize.max,
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        Container(
+                        GestureDetector(
-                          padding: EdgeInsets.symmetric(horizontal: 15),
+                          child: Container(
-                          constraints: BoxConstraints(maxWidth: 600),
+                            padding: EdgeInsets.symmetric(horizontal: 10),
-                          child: Column(
+                            height: 30,
-                            children: [
+                            width: 30,
-                              HistoricComponent(
+                            child: Image(
-                                month: DateTime.now().month,
+                              image: AssetImage("assets/images/return_icon.png"),
-                              ),
+                              height: 8,
-                            ],
+                            ),
+                          ),
+                          onTap: _reduceMonth,
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 30),
+                          child: Text(
+                            '${DateFormat.MMMM('fr_FR').format(date)[0].toUpperCase()}${DateFormat.MMMM('fr_FR').format(date).substring(1)} ${date.year}',
+                            style: GoogleFonts.plusJakartaSans(
+                                color: Colors.white, fontWeight: FontWeight.w600, fontSize: 16),
                           ),
+                        ),
+                        GestureDetector(
+                          onTap: _addMonth,
+                          child: Transform(
+                              alignment: Alignment.center,
+                              transform: Matrix4.rotationY(3.14159265),
+                              child: Container(
+                                padding: EdgeInsets.symmetric(horizontal: 10),
+                                height: 30,
+                                width: 30,
+                                child: Image(
+                                  image: AssetImage("assets/images/return_icon.png"),
+                                  height: 8,
+                                ),
+                              )),
                         )
                       ],
                     ),
                   ),
                 ),
+                Padding(
+                  padding: EdgeInsets.only(top: 30, bottom: 40),
+                  child: SizedBox(
+                      width: double.infinity,
+                      child: Container(
+                        padding: EdgeInsets.symmetric(horizontal: 15),
+                        constraints: BoxConstraints(maxWidth: 600),
+                        child: Column(
+                          children: [
+                            HistoricComponent(
+                              month: date.month,
+                              year: date.year,
+                            ),
+                          ],
+                        ),
+                      )),
+                ),
               ],
             ),
           ),