option to change custom timetable event colors

lib/api/mhsl/customTimetableEvent/customTimetableEvent.dart

@@ -13,6 +13,7 @@ class CustomTimetableEvent {
   DateTime startDate;
   @JsonKey(toJson: MhslApi.dateTimeToJson, fromJson: MhslApi.dateTimeFromJson)
   DateTime endDate;
+  String? color;
   String rrule;
   @JsonKey(toJson: MhslApi.dateTimeToJson, fromJson: MhslApi.dateTimeFromJson)
   DateTime createdAt;
@@ -20,7 +21,7 @@ class CustomTimetableEvent {
   DateTime updatedAt;
 
   CustomTimetableEvent({required this.id, required this.title, required this.description, required this.startDate,
-    required this.endDate, required this.rrule, required this.createdAt, required this.updatedAt});
+    required this.endDate, required this.color, required this.rrule, required this.createdAt, required this.updatedAt});
 
   factory CustomTimetableEvent.fromJson(Map<String, dynamic> json) => _$CustomTimetableEventFromJson(json);
   Map<String, dynamic> toJson() => _$CustomTimetableEventToJson(this);

lib/api/mhsl/customTimetableEvent/customTimetableEvent.g.dart

@@ -14,6 +14,7 @@ CustomTimetableEvent _$CustomTimetableEventFromJson(
       description: json['description'] as String,
       startDate: MhslApi.dateTimeFromJson(json['startDate'] as String),
       endDate: MhslApi.dateTimeFromJson(json['endDate'] as String),
+      color: json['color'] as String?,
       rrule: json['rrule'] as String,
       createdAt: MhslApi.dateTimeFromJson(json['createdAt'] as String),
       updatedAt: MhslApi.dateTimeFromJson(json['updatedAt'] as String),
@@ -27,6 +28,7 @@ Map<String, dynamic> _$CustomTimetableEventToJson(
       'description': instance.description,
       'startDate': MhslApi.dateTimeToJson(instance.startDate),
       'endDate': MhslApi.dateTimeToJson(instance.endDate),
+      'color': instance.color,
       'rrule': instance.rrule,
       'createdAt': MhslApi.dateTimeToJson(instance.createdAt),
       'updatedAt': MhslApi.dateTimeToJson(instance.updatedAt),

lib/view/pages/timetable/customTimetableEventEditDialog.dart

@@ -4,6 +4,7 @@ import 'dart:developer';
 import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:marianum_mobile/extensions/dateTime.dart';
+import 'package:marianum_mobile/view/pages/timetable/custonTimetableColors.dart';
 import 'package:provider/provider.dart';
 import 'package:rrule_generator/rrule_generator.dart';
 import 'package:time_range_picker/time_range_picker.dart';
@@ -32,6 +33,10 @@ class _AddCustomTimetableEventDialogState extends State<CustomTimetableEventEdit
   late final TextEditingController _eventName = TextEditingController(text: widget.existingEvent?.title);
   late final TextEditingController _eventDescription = TextEditingController(text: widget.existingEvent?.description);
   late String _recurringRule = widget.existingEvent?.rrule ?? "";
+  late CustomTimetableColors _customTimetableColor = CustomTimetableColors.values.firstWhere(
+    (element) => element.name == widget.existingEvent?.color,
+    orElse: () => CustomTimetableColors.orange
+  );
 
   late bool isEditingExisting = widget.existingEvent != null;
 
@@ -77,6 +82,7 @@ class _AddCustomTimetableEventDialogState extends State<CustomTimetableEventEdit
             ),
             const Divider(),
             ListTile(
+              leading: const Icon(Icons.date_range_outlined),
               title: Text(Jiffy.parseFromDateTime(_date).yMMMd),
               subtitle: const Text("Datum"),
               onTap: () async {
@@ -94,6 +100,7 @@ class _AddCustomTimetableEventDialogState extends State<CustomTimetableEventEdit
               },
             ),
             ListTile(
+              leading: const Icon(Icons.access_time_outlined),
               title: Text("${_startTime.format(context).toString()} - ${_endTime.format(context).toString()}"),
               subtitle: const Text("Zeitraum"),
               onTap: () async {
@@ -120,6 +127,31 @@ class _AddCustomTimetableEventDialogState extends State<CustomTimetableEventEdit
               },
             ),
             const Divider(),
+            ListTile(
+              leading: const Icon(Icons.color_lens_outlined),
+              title: const Text("Farbgebung"),
+              trailing: DropdownButton<CustomTimetableColors>(
+                value: _customTimetableColor,
+                icon: const Icon(Icons.arrow_drop_down),
+                items: CustomTimetableColors.values.map((e) => DropdownMenuItem<CustomTimetableColors>(
+                  value: e,
+                  enabled: e != _customTimetableColor,
+                  child: Row(
+                    children: [
+                      Icon(Icons.circle, color: TimetableColors.getDisplayOptions(e).color),
+                      const SizedBox(width: 10),
+                      Text(TimetableColors.getDisplayOptions(e).displayName),
+                    ],
+                  ),
+                )).toList(),
+                onChanged: (e) {
+                  setState(() {
+                    _customTimetableColor = e!;
+                  });
+                },
+              ),
+            ),
+            const Divider(),
             RRuleGenerator(
               config: RRuleGeneratorConfig(
                 headerEnabled: true,
@@ -156,6 +188,7 @@ class _AddCustomTimetableEventDialogState extends State<CustomTimetableEventEdit
               description: _eventDescription.text,
               startDate: _date.withTime(_startTime),
               endDate: _date.withTime(_endTime),
+              color: _customTimetableColor.name,
               rrule: _recurringRule,
               createdAt: DateTime.now(),
               updatedAt: DateTime.now(),

lib/view/pages/timetable/custonTimetableColors.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:marianum_mobile/theming/darkAppTheme.dart';
+
+enum CustomTimetableColors{
+  orange,
+  red,
+  green,
+  blue
+}
+
+class TimetableColors {
+  static ColorModeDisplay getDisplayOptions(CustomTimetableColors color) {
+    switch(color) {
+      case CustomTimetableColors.green:
+        return ColorModeDisplay(color: Colors.green, displayName: "Grün");
+
+      case CustomTimetableColors.blue:
+        return ColorModeDisplay(color: Colors.blue, displayName: "Blau");
+
+      case CustomTimetableColors.orange:
+        return ColorModeDisplay(color: Colors.orange.shade800, displayName: "Orange");
+
+      case CustomTimetableColors.red:
+        return ColorModeDisplay(color: DarkAppTheme.marianumRed, displayName: "Rot");
+
+    }
+  }
+
+  static Color getColorFromString(String color){
+    return getDisplayOptions(CustomTimetableColors.values.firstWhere((element) => element.name == color)).color;
+  }
+}
+
+class ColorModeDisplay {
+  final Color color;
+  final String displayName;
+
+  ColorModeDisplay({required this.color, required this.displayName});
+}

lib/view/pages/timetable/timetable.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:marianum_mobile/extensions/dateTime.dart';
+import 'package:marianum_mobile/view/pages/timetable/custonTimetableColors.dart';
 import 'package:provider/provider.dart';
 import 'package:syncfusion_flutter_calendar/calendar.dart';
 
@@ -289,7 +290,7 @@ class _TimetableState extends State<Timetable> {
         location: customEvent.description,
         subject: customEvent.title,
         recurrenceRule: customEvent.rrule,
-        color: Colors.deepOrange.shade800,
+        color: TimetableColors.getColorFromString(customEvent.color ?? CustomTimetableColors.orange.name),
         startTimeZone: '',
         endTimeZone: '',
       );