This commit is contained in:
2025-10-16 17:42:46 +02:00
parent dc86955721
commit 2e3a69a23e
12 changed files with 1421 additions and 604 deletions
+145 -269
View File
@@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../services/google_calendar_service.dart';
import '../utils/translations.dart';
class CalendarScreen extends StatefulWidget {
const CalendarScreen({super.key});
@@ -16,14 +18,28 @@ class _CalendarScreenState extends State<CalendarScreen> {
List<CalendarEvent> _events = [];
String? _errorMessage;
String _bulletColor = 'Blue';
String _selectedLanguage = 'English';
@override
void initState() {
super.initState();
initializeDateFormatting('sl_SI', null); // Initialize Slovenian locale
_loadBulletColor();
_loadLanguage();
_loadEvents();
}
String _t(String key) {
return AppTranslations.translate(key, _selectedLanguage);
}
Future<void> _loadLanguage() async {
final prefs = await SharedPreferences.getInstance();
setState(() {
_selectedLanguage = prefs.getString('language') ?? 'English';
});
}
@override
void dispose() {
_calendarService.dispose();
@@ -128,15 +144,21 @@ class _CalendarScreenState extends State<CalendarScreen> {
return a.startTime!.compareTo(b.startTime!);
});
setState(() {
_events = filteredEvents;
});
if (mounted) {
setState(() {
_events = filteredEvents;
});
}
} catch (e) {
setState(() {
_errorMessage = 'Error loading events: $e';
});
if (mounted) {
setState(() {
_errorMessage = 'Error loading events: $e';
});
}
} finally {
setState(() => _isLoading = false);
if (mounted) {
setState(() => _isLoading = false);
}
}
}
@@ -172,7 +194,7 @@ class _CalendarScreenState extends State<CalendarScreen> {
ElevatedButton.icon(
onPressed: _loadEvents,
icon: const Icon(Icons.refresh),
label: const Text('Retry'),
label: Text(_t('Retry')),
style: ElevatedButton.styleFrom(
backgroundColor: accentColor,
foregroundColor: Colors.white,
@@ -199,13 +221,13 @@ class _CalendarScreenState extends State<CalendarScreen> {
children: [
Icon(Icons.event_available, size: 64, color: Colors.grey[400]),
const SizedBox(height: 16),
const Text(
'No upcoming events',
style: TextStyle(fontSize: 16, color: Colors.grey),
Text(
_t('No upcoming events'),
style: const TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 8),
Text(
'Pull down to refresh',
_t('Pull down to refresh'),
style: TextStyle(fontSize: 14, color: Colors.grey[400]),
),
],
@@ -229,15 +251,6 @@ class _CalendarScreenState extends State<CalendarScreen> {
final startTime = event.startTime;
final isAllDay = event.isAllDay;
String timeText;
if (isAllDay) {
timeText = 'All day';
} else if (startTime != null) {
timeText = DateFormat('HH:mm').format(startTime.toLocal());
} else {
timeText = '';
}
// Format the date for display
String dateText = '';
bool isToday = false;
@@ -248,300 +261,163 @@ class _CalendarScreenState extends State<CalendarScreen> {
final difference = eventDay.difference(today).inDays;
if (difference == 0) {
dateText = 'Today';
dateText = _t('Today');
isToday = true;
} else if (difference == 1) {
dateText = 'Tomorrow';
dateText = _t('Tomorrow');
} else {
dateText = DateFormat('EEEE, MMMM d').format(startTime);
// Use locale based on selected language
final locale = _selectedLanguage == 'Slovenian' ? 'sl_SI' : 'en_US';
dateText = DateFormat('EEEE, MMMM d', locale).format(startTime);
// Capitalize first letter of day and month
if (dateText.isNotEmpty) {
dateText = dateText[0].toUpperCase() + dateText.substring(1);
}
}
}
return Container(
margin: const EdgeInsets.symmetric(vertical: 6, horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
color: Colors.grey[300],
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () => _showEventDetails(event, accentColor),
borderRadius: BorderRadius.circular(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Date header
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isToday
? accentColor.withValues(alpha: 0.15)
: Colors.grey[50],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Date header
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isToday
? accentColor.withValues(alpha: 0.15)
: Colors.grey[200],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
child: Row(
children: [
// Small colored indicator
Container(
width: 4,
height: 16,
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(2),
),
),
child: Row(
children: [
Container(
width: 4,
height: 16,
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(width: 8),
Text(
dateText,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: isToday ? accentColor : Colors.black87,
),
),
if (isToday) ...[
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'NOW',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
],
const SizedBox(width: 8),
Text(
dateText,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: isToday ? accentColor : Colors.black87,
),
),
),
// Time and title
Padding(
padding: const EdgeInsets.all(16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Time indicator with accent color
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: accentColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(12),
),
child: Center(
child: Text(
timeText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: isAllDay ? 12 : 14,
fontWeight: FontWeight.bold,
color: accentColor,
),
),
if (isToday) ...[
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(8),
),
child: Text(
_t('NOW'),
style: const TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(width: 16),
// Title
),
],
],
),
),
// Main content
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title with icon
Row(
children: [
Icon(Icons.event, size: 20, color: accentColor),
const SizedBox(width: 8),
Expanded(
child: Text(
event.summary ?? 'Untitled Event',
event.summary ?? _t('Untitled Event'),
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.black87,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: 8),
// Arrow icon
Icon(
Icons.arrow_forward_ios,
size: 16,
color: Colors.grey[400],
),
],
),
),
],
),
),
),
);
}
void _showEventDetails(CalendarEvent event, Color accentColor) {
final startTime = event.startTime;
final endTime = event.endTime;
final isAllDay = event.isAllDay;
showDialog(
context: context,
builder: (context) => Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: Container(
constraints: const BoxConstraints(maxWidth: 400),
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 4,
height: 24,
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(2),
),
const SizedBox(height: 8),
// Time range (if not all day)
if (!isAllDay && startTime != null && event.endTime != null) ...[
_buildDetailRowInline(
icon: Icons.access_time,
value: '${DateFormat('HH:mm').format(startTime.toLocal())} - ${DateFormat('HH:mm').format(event.endTime!.toLocal())}',
accentColor: accentColor,
),
const SizedBox(width: 12),
Expanded(
child: Text(
event.summary ?? 'Event Details',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const SizedBox(height: 6),
],
if (isAllDay) ...[
_buildDetailRowInline(
icon: Icons.access_time,
value: _t('All day'),
accentColor: accentColor,
),
const SizedBox(height: 6),
],
// Location
if (event.location != null && event.location!.isNotEmpty) ...[
_buildDetailRowInline(
icon: Icons.location_on,
value: event.location!,
accentColor: accentColor,
),
],
),
const SizedBox(height: 24),
if (startTime != null) ...[
_buildDetailRow(
icon: Icons.calendar_today,
label: 'Date',
value: DateFormat('EEEE, MMMM d, y').format(startTime),
accentColor: accentColor,
),
const SizedBox(height: 16),
],
if (!isAllDay && startTime != null && endTime != null) ...[
_buildDetailRow(
icon: Icons.access_time,
label: 'Time',
value:
'${DateFormat('HH:mm').format(startTime.toLocal())} - ${DateFormat('HH:mm').format(endTime.toLocal())}',
accentColor: accentColor,
),
const SizedBox(height: 16),
],
if (isAllDay) ...[
_buildDetailRow(
icon: Icons.access_time,
label: 'Duration',
value: 'All day event',
accentColor: accentColor,
),
const SizedBox(height: 16),
],
if (event.location != null && event.location!.isNotEmpty) ...[
_buildDetailRow(
icon: Icons.location_on,
label: 'Location',
value: event.location!,
accentColor: accentColor,
),
const SizedBox(height: 16),
],
if (event.description != null && event.description!.isNotEmpty) ...[
_buildDetailRow(
icon: Icons.notes,
label: 'Notes',
value: event.description!,
accentColor: accentColor,
),
const SizedBox(height: 16),
],
const SizedBox(height: 8),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
style: ElevatedButton.styleFrom(
backgroundColor: accentColor,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: const Text(
'Close',
style: TextStyle(fontWeight: FontWeight.w600),
),
),
),
],
),
),
),
],
),
);
}
Widget _buildDetailRow({
Widget _buildDetailRowInline({
required IconData icon,
required String label,
required String value,
required Color accentColor,
}) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: accentColor.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, size: 20, color: accentColor),
),
const SizedBox(width: 12),
Icon(icon, size: 16, color: accentColor),
const SizedBox(width: 6),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.grey[600],
),
),
const SizedBox(height: 4),
Text(
value,
style: const TextStyle(
fontSize: 14,
color: Colors.black87,
),
),
],
child: Text(
value,
style: const TextStyle(
fontSize: 13,
color: Colors.black87,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
);
}
}