Skip to content

Commit d6f5069

Browse files
mrzzymrzzy
committed
refactor(mobile): move congestion point graph & image view to CongestionPointView
1 parent 494cd09 commit d6f5069

File tree

2 files changed

+249
-185
lines changed

2 files changed

+249
-185
lines changed

‎lib/screens/congestionRating.dart‎

Lines changed: 5 additions & 185 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import 'package:flowmotion/models/rating_point.dart';
2-
import 'package:flowmotion/widgets/imageViewerWithSlider.dart';
2+
import 'package:flowmotion/widgets/congestionPointView.dart';
3+
import 'package:flowmotion_api/flowmotion_api.dart';
34
import 'package:flutter/material.dart';
45
import 'package:flutter_map/flutter_map.dart';
56
import 'package:google_polyline_algorithm/google_polyline_algorithm.dart';
67
import 'package:latlong2/latlong.dart';
7-
import '../models/RouteData.dart';
8+
89
import '../models/congestion_rating.dart';
910
import '../utilities/firebase_calls.dart';
10-
import 'package:flowmotion_api/flowmotion_api.dart';
11-
import 'package:fl_chart/fl_chart.dart';
12-
import 'package:intl/intl.dart';
13-
1411
import '../widgets/navigationBar.dart';
1512

1613
final FirebaseCalls firebaseCalls = FirebaseCalls();
@@ -485,60 +482,8 @@ class _CongestionRatingScreenState extends State<CongestionRatingScreen> {
485482

486483
_buildCongestionAndRecommendedBoxes(widget.congestionPoints, widget.allInstructions, context),
487484
SizedBox(height: 20),
488-
if (selectedIndex != null) ...[
489-
FutureBuilder<void>(
490-
future: fetchGraphRatings(
491-
congestedCamera[selectedIndex!],
492-
'hour', // groupby
493-
formatToSingaporeTime(DateTime.now().subtract(Duration(hours: 10))),
494-
formatToSingaporeTime(DateTime.now())
495-
),
496-
builder: (context, snapshot) {
497-
if (snapshot.connectionState == ConnectionState.waiting) {
498-
return CircularProgressIndicator();
499-
} else if (snapshot.hasError) {
500-
return Text("Error: ${snapshot.error}");
501-
} else {
502-
if (historyRatings.isNotEmpty) {
503-
return Column(
504-
crossAxisAlignment: CrossAxisAlignment.start,
505-
children: [
506-
_buildHourlyCongestionRatingGraph(historyRatings),
507-
SizedBox(height: 20), // spacing between graph and images
508-
ImageViewerWithSlider(data: historyRatings),
509-
],
510-
);
511-
} else {
512-
return Text("No data available");
513-
}
514-
}
515-
},
516-
),
517-
SizedBox(height: 20),
518-
FutureBuilder<void>(
519-
future: fetchGraphRatings(
520-
congestedCamera[selectedIndex!], // cameraID
521-
'day', // groupby
522-
formatToSingaporeTime(DateTime.now().subtract(Duration(days: 5))), // start time
523-
formatToSingaporeTime(DateTime.now()) // end time
524-
),
525-
builder: (context, snapshot) {
526-
if (snapshot.connectionState == ConnectionState.waiting) {
527-
return CircularProgressIndicator();
528-
} else if (snapshot.hasError) {
529-
return Text("Error: ${snapshot.error}");
530-
} else {
531-
// Use historyRatings, which should contain the updated List<RatingPoint> after fetchGraphRatings completes
532-
if (historyRatings.isNotEmpty) {
533-
return _buildCongestionHistoryGraph(historyRatings);
534-
} else {
535-
return Text("No data available");
536-
}
537-
}
538-
},
539-
),
540-
]
541-
// Additional rows for congestion ratings and history...
485+
if (selectedIndex != null)
486+
CongestionPointView(cameraId: congestedCamera[selectedIndex!])
542487
],
543488
),
544489
),
@@ -787,129 +732,4 @@ class _CongestionRatingScreenState extends State<CongestionRatingScreen> {
787732
),
788733
);
789734
}
790-
791-
// Placeholder methods for graphs
792-
Widget _buildHourlyCongestionRatingGraph(List<RatingPoint> data) {
793-
return Column(
794-
crossAxisAlignment: CrossAxisAlignment.stretch,
795-
children: [
796-
Center(
797-
child: Padding(
798-
padding: const EdgeInsets.only(bottom: 8.0),
799-
child: Text(
800-
'Today\'s Hourly Congestion Graph',
801-
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
802-
textAlign: TextAlign.center,
803-
),
804-
),
805-
),
806-
Container(
807-
height: 200,
808-
child: LineChart(
809-
LineChartData(
810-
minY: 0,
811-
maxY: 1,
812-
gridData: FlGridData(show: false),
813-
titlesData: FlTitlesData(
814-
leftTitles: AxisTitles(
815-
sideTitles: SideTitles(showTitles: true),
816-
),
817-
bottomTitles: AxisTitles(
818-
sideTitles: SideTitles(
819-
showTitles: true,
820-
getTitlesWidget: (value, meta) {
821-
final index = value.toInt();
822-
if (index >= 0 && index < data.length) {
823-
final formattedTime = _formatToHour(data[index].ratedOn);
824-
return Text(formattedTime);
825-
}
826-
return const SizedBox.shrink();
827-
},
828-
),
829-
),
830-
),
831-
borderData: FlBorderData(show: true),
832-
lineBarsData: [
833-
LineChartBarData(
834-
spots: data
835-
.asMap()
836-
.entries
837-
.map((entry) => FlSpot(entry.key.toDouble(), entry.value.value.toDouble()))
838-
.toList(),
839-
isCurved: true,
840-
color: Colors.red,
841-
belowBarData: BarAreaData(show: false),
842-
),
843-
],
844-
),
845-
),
846-
)
847-
]
848-
);
849-
}
850-
851-
// format DateTime to Xpm/Xam for hourly graphs
852-
String _formatToHour(DateTime dateTime) {
853-
return DateFormat.j().format(dateTime); // e.g., "1 PM"
854-
}
855-
856-
Widget _buildCongestionHistoryGraph(List<RatingPoint> data) {
857-
return Column(
858-
crossAxisAlignment: CrossAxisAlignment.stretch,
859-
children: [
860-
Center(
861-
child: Padding(
862-
padding: const EdgeInsets.only(bottom: 8.0),
863-
child: Text(
864-
'Historical Congestion Graph - Past 5 days',
865-
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
866-
textAlign: TextAlign.center,
867-
),
868-
),
869-
),
870-
Container(
871-
height: 150,
872-
child: BarChart(
873-
BarChartData(
874-
minY: 0,
875-
maxY: 1,
876-
barGroups: data
877-
.asMap()
878-
.entries
879-
.map((entry) => BarChartGroupData(
880-
x: entry.key,
881-
barRods: [
882-
BarChartRodData(toY: entry.value.value.toDouble(), color: Colors.blue),
883-
],
884-
))
885-
.toList(),
886-
titlesData: FlTitlesData(
887-
leftTitles: AxisTitles(
888-
sideTitles: SideTitles(showTitles: true),
889-
),
890-
bottomTitles: AxisTitles(
891-
sideTitles: SideTitles(
892-
showTitles: true,
893-
getTitlesWidget: (value, meta) {
894-
final index = value.toInt();
895-
if (index >= 0 && index < data.length) {
896-
final formattedDate = _formatToDayMonth(data[index].ratedOn);
897-
return Text(formattedDate);
898-
}
899-
return const SizedBox.shrink();
900-
},
901-
),
902-
),
903-
),
904-
),
905-
),
906-
)
907-
]
908-
);
909-
}
910-
911-
// format DateTime to X month for history graph
912-
String _formatToDayMonth(DateTime dateTime) {
913-
return DateFormat('d MMM').format(dateTime); // e.g., "1 Nov"
914-
}
915735
}

0 commit comments

Comments
 (0)