Feat: Macht die Trend-Seite funktional

lib/Pages/Misc/InputFields/date_range_picker.dart

@@ -0,0 +1,111 @@
+import 'package:flutter/material.dart';
+
+import '../../Dialog/dialog_action.dart';
+import '../../Dialog/dialog_input_field.dart';
+import '../../Dialog/dialog_input_field_type_enum.dart';
+import '../../Dialog/dynamic_dialog.dart';
+
+/// Stellt einen DateRange-Picker als Input-Feld dar
+class DateRangePicker extends StatefulWidget {
+  /// Initialisiert eine neue Instanz dieser Klasse
+  const DateRangePicker({
+    this.autofocus = false,
+    super.key,
+    this.decoration,
+    this.initialValue,
+    this.onChanged,
+  });
+
+  /// Der Initiale Wert des Input-Feldes
+  final DateTimeRange? initialValue;
+
+  /// Ob das Feld automatisch ausgewählt werden soll
+  final bool autofocus;
+
+  /// Die Funktion, die bei Veränderung des Wertes aufgerufen wird
+  final Function(DateTimeRange?)? onChanged;
+
+  /// Die Dekoration, wie das Feld aussehen soll
+  final InputDecoration? decoration;
+
+  @override
+  State<StatefulWidget> createState() => _DateRangePicker();
+}
+
+class _DateRangePicker extends State<DateRangePicker> {
+  final ValueNotifier<DateTimeRange?> _value = ValueNotifier(null);
+
+  @override
+  void initState() {
+    super.initState();
+
+    _value.value = widget.initialValue;
+    _value.addListener(() {
+      widget.onChanged?.call(_value.value);
+    });
+  }
+
+  @override
+  Widget build(final BuildContext context) => TextField(
+    readOnly: true,
+    controller: TextEditingController(
+      text: widget.initialValue != null
+          ? '${widget.initialValue!.start.day}'
+                '.${widget.initialValue!.start.month}'
+                '.${widget.initialValue!.start.year}'
+                ' - '
+                '${widget.initialValue!.end.day}'
+                '.${widget.initialValue!.end.month}'
+                '.${widget.initialValue!.end.year}'
+          : null,
+    ),
+    decoration: widget.decoration,
+    onTap: _pickDateRange,
+  );
+
+  Future<void> _pickDateRange() async {
+    await DynamicDialog(
+      title: 'Zeitraum auswählen',
+      inputFields: [
+        DialogInputField(
+          id: 'dateFrom',
+          label: 'Startdatum',
+          keyboardType: TextInputType.datetime,
+          inputType: DialogInputFieldTypeEnum.date,
+          initialValue: _value.value?.start,
+        ),
+        DialogInputField(
+          id: 'dateTo',
+          label: 'Enddatum',
+          keyboardType: TextInputType.datetime,
+          inputType: DialogInputFieldTypeEnum.date,
+          initialValue: _value.value?.end,
+        ),
+      ],
+      actions: [
+        DialogAction(label: 'Abbrechen'),
+        DialogAction(
+          label: 'Leeren',
+          onPressed: (_) {
+            _value.value = null;
+          },
+        ),
+        DialogAction(
+          label: 'Auswählen',
+          isPrimary: true,
+          onPressed: (final Map<String, dynamic> values) {
+            if (values['dateFrom'] != null &&
+                values['dateFrom'] is DateTime &&
+                values['dateTo'] != null &&
+                values['dateTo'] is DateTime) {
+              _value.value = DateTimeRange(
+                start: values['dateFrom'],
+                end: values['dateTo'],
+              );
+            }
+          },
+        ),
+      ],
+    ).show();
+  }
+}

lib/Pages/Misc/InputFields/dynamic_date_time_field.dart

@@ -0,0 +1,61 @@
+import 'package:date_field/date_field.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+/// Ein Feld mit Popup über welches man Datumsfelder auswählen kann
+class DynamicDateTimeField extends StatefulWidget {
+  /// Initialisiert eine neue Instanz dieser Klasse
+  const DynamicDateTimeField({
+    this.initialValue,
+    this.mode = DateTimeFieldPickerMode.date,
+    this.autofocus = false,
+    this.onChanged,
+    this.decoration,
+    super.key,
+  });
+
+  /// Der Initiale Wert des Input-Feldes
+  final DateTime? initialValue;
+
+  /// Der Modus des Datums-Feldes
+  final DateTimeFieldPickerMode mode;
+
+  /// Ob das Feld automatisch ausgewählt werden soll
+  final bool autofocus;
+
+  /// Die Funktion, die bei Veränderung des Wertes aufgerufen wird
+  final Function(DateTime?)? onChanged;
+
+  /// Die Dekoration, wie das Feld aussehen soll
+  final InputDecoration? decoration;
+
+  @override
+  State<StatefulWidget> createState() => _DynamicDateTimeFieldState();
+}
+
+class _DynamicDateTimeFieldState extends State<DynamicDateTimeField> {
+  DateTime? _value;
+
+  @override
+  void initState() {
+    super.initState();
+    _value = widget.initialValue;
+  }
+
+  @override
+  Widget build(final BuildContext context) => DateTimeField(
+    initialPickerDateTime: widget.initialValue,
+    dateFormat: DateFormat('d.M.y'),
+    value: _value,
+    mode: widget.mode,
+    autofocus: widget.autofocus,
+    onChanged: (final value) {
+      widget.onChanged?.call(value);
+
+      setState(() {
+        _value = value;
+      });
+    },
+    decoration: widget.decoration,
+  );
+}