minor page tweaks
This commit is contained in:
@@ -133,6 +133,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
bool _loadingStations = false;
|
||||
|
||||
RouteResult? _routeResult;
|
||||
List<String>? _calculatedStations;
|
||||
RouteResult? get result => _routeResult;
|
||||
String? _errorMessage;
|
||||
|
||||
@@ -178,6 +179,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
if (cleaned.length < 2) {
|
||||
setState(() {
|
||||
_routeResult = null;
|
||||
_calculatedStations = null;
|
||||
_errorMessage = 'Add at least two stations before calculating.';
|
||||
});
|
||||
return;
|
||||
@@ -185,6 +187,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
setState(() {
|
||||
_errorMessage = null;
|
||||
_routeResult = null;
|
||||
_calculatedStations = null;
|
||||
});
|
||||
final api = context.read<ApiService>(); // context is valid here
|
||||
try {
|
||||
@@ -195,6 +198,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
if (res is Map && res['error'] == false) {
|
||||
setState(() {
|
||||
_routeResult = RouteResult.fromJson(Map<String, dynamic>.from(res));
|
||||
_calculatedStations = List.from(cleaned);
|
||||
});
|
||||
final distance = (_routeResult?.distance ?? 0);
|
||||
widget.onDistanceComputed?.call(distance);
|
||||
@@ -205,17 +209,30 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
).msg;
|
||||
});
|
||||
} else {
|
||||
setState(() => _errorMessage = 'Failed to calculate route.');
|
||||
setState(() {
|
||||
_errorMessage = 'Failed to calculate route.';
|
||||
_calculatedStations = null;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
setState(() => _errorMessage = 'Failed to calculate route: $e');
|
||||
setState(() {
|
||||
_errorMessage = 'Failed to calculate route: $e';
|
||||
_calculatedStations = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void _markRouteDirty() {
|
||||
_routeResult = null;
|
||||
_calculatedStations = null;
|
||||
_errorMessage = null;
|
||||
}
|
||||
|
||||
void _addStation() {
|
||||
final data = context.read<DataService>();
|
||||
setState(() {
|
||||
data.stations.add('');
|
||||
_markRouteDirty();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -223,6 +240,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
final data = context.read<DataService>();
|
||||
setState(() {
|
||||
data.stations.removeAt(index);
|
||||
_markRouteDirty();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -230,6 +248,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
final data = context.read<DataService>();
|
||||
setState(() {
|
||||
data.stations[index] = value;
|
||||
_markRouteDirty();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -237,14 +256,91 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
final data = context.read<DataService>();
|
||||
setState(() {
|
||||
data.stations = [''];
|
||||
_routeResult = null;
|
||||
_errorMessage = null;
|
||||
_markRouteDirty();
|
||||
});
|
||||
}
|
||||
|
||||
bool _isResultCurrent(List<String> stations) {
|
||||
if (_routeResult == null || _calculatedStations == null) return false;
|
||||
final cleaned = stations.where((s) => s.trim().isNotEmpty).toList();
|
||||
if (cleaned.length != _calculatedStations!.length) return false;
|
||||
for (var i = 0; i < cleaned.length; i++) {
|
||||
if (cleaned[i] != _calculatedStations![i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final data = context.watch<DataService>();
|
||||
final isCompact = MediaQuery.of(context).size.width < 600;
|
||||
final showApply =
|
||||
widget.onApplyRoute != null && _isResultCurrent(data.stations);
|
||||
final primaryPadding = EdgeInsets.symmetric(
|
||||
horizontal: isCompact ? 14 : 20,
|
||||
vertical: isCompact ? 10 : 14,
|
||||
);
|
||||
final secondaryPadding = EdgeInsets.symmetric(
|
||||
horizontal: isCompact ? 10 : 16,
|
||||
vertical: isCompact ? 8 : 12,
|
||||
);
|
||||
final primaryStyle = FilledButton.styleFrom(
|
||||
padding: primaryPadding,
|
||||
minimumSize: Size(0, isCompact ? 38 : 46),
|
||||
);
|
||||
final secondaryStyle = OutlinedButton.styleFrom(
|
||||
padding: secondaryPadding,
|
||||
minimumSize: Size(0, isCompact ? 34 : 42),
|
||||
);
|
||||
|
||||
Widget buildSecondaryButton({
|
||||
required IconData icon,
|
||||
required String label,
|
||||
required VoidCallback onPressed,
|
||||
}) {
|
||||
if (isCompact) {
|
||||
return Tooltip(
|
||||
message: label,
|
||||
child: OutlinedButton(
|
||||
onPressed: onPressed,
|
||||
style: secondaryStyle,
|
||||
child: Icon(icon, size: 20),
|
||||
),
|
||||
);
|
||||
}
|
||||
return OutlinedButton.icon(
|
||||
onPressed: onPressed,
|
||||
icon: Icon(icon, size: 20),
|
||||
label: Text(label),
|
||||
style: secondaryStyle,
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildPrimaryAction({required bool fullWidth}) {
|
||||
final button = showApply
|
||||
? FilledButton.icon(
|
||||
onPressed: () => widget.onApplyRoute!(_routeResult!),
|
||||
icon: const Icon(Icons.check),
|
||||
label: const Text('Apply to entry'),
|
||||
style: primaryStyle,
|
||||
)
|
||||
: FilledButton.icon(
|
||||
onPressed: () async {
|
||||
await _calculateRoute(data.stations);
|
||||
},
|
||||
icon: const Icon(Icons.route),
|
||||
label: const Text('Calculate Route'),
|
||||
style: primaryStyle,
|
||||
);
|
||||
final key =
|
||||
ValueKey<String>(showApply ? 'apply-primary-action' : 'calc-primary-action');
|
||||
if (!fullWidth) return KeyedSubtree(key: key, child: button);
|
||||
return KeyedSubtree(
|
||||
key: key,
|
||||
child: SizedBox(width: double.infinity, child: button),
|
||||
);
|
||||
}
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
Align(
|
||||
@@ -301,6 +397,7 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
setState(() {
|
||||
final moved = data.stations.removeAt(oldIndex);
|
||||
data.stations.insert(newIndex, moved);
|
||||
_markRouteDirty();
|
||||
});
|
||||
},
|
||||
children: List.generate(data.stations.length, (index) {
|
||||
@@ -364,56 +461,94 @@ class _RouteCalculatorState extends State<RouteCalculator> {
|
||||
context.push('/calculator/details', extra: result);
|
||||
},
|
||||
),
|
||||
if (widget.onApplyRoute != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: ElevatedButton.icon(
|
||||
onPressed: () => widget.onApplyRoute!(_routeResult!),
|
||||
icon: const Icon(Icons.check),
|
||||
label: const Text('Apply to entry'),
|
||||
),
|
||||
),
|
||||
]
|
||||
else
|
||||
SizedBox.shrink(),
|
||||
const SizedBox(height: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.center,
|
||||
spacing: 12,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
...(() {
|
||||
final reverseButton = ElevatedButton.icon(
|
||||
icon: const Icon(Icons.swap_horiz),
|
||||
label: const Text('Reverse route'),
|
||||
onPressed: () async {
|
||||
setState(() {
|
||||
data.stations = data.stations.reversed.toList();
|
||||
});
|
||||
await _calculateRoute(data.stations);
|
||||
},
|
||||
);
|
||||
final addButton = ElevatedButton.icon(
|
||||
icon: const Icon(Icons.add),
|
||||
label: const Text('Add Station'),
|
||||
onPressed: _addStation,
|
||||
);
|
||||
final calculateButton = ElevatedButton.icon(
|
||||
icon: const Icon(Icons.route),
|
||||
label: const Text('Calculate Route'),
|
||||
onPressed: () async {
|
||||
await _calculateRoute(data.stations);
|
||||
},
|
||||
);
|
||||
final isMobile = MediaQuery.of(context).size.width < 600;
|
||||
return isMobile
|
||||
? [addButton, reverseButton, calculateButton]
|
||||
: [reverseButton, addButton, calculateButton];
|
||||
})(),
|
||||
],
|
||||
),
|
||||
child: isCompact
|
||||
? Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
buildSecondaryButton(
|
||||
icon: Icons.swap_horiz,
|
||||
label: 'Reverse route',
|
||||
onPressed: () async {
|
||||
setState(() {
|
||||
data.stations = data.stations.reversed.toList();
|
||||
});
|
||||
await _calculateRoute(data.stations);
|
||||
},
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
buildSecondaryButton(
|
||||
icon: Icons.add,
|
||||
label: 'Add station',
|
||||
onPressed: _addStation,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 220),
|
||||
transitionBuilder: (child, animation) {
|
||||
final curved = CurvedAnimation(
|
||||
parent: animation,
|
||||
curve: Curves.easeOutBack,
|
||||
);
|
||||
return ScaleTransition(
|
||||
scale:
|
||||
Tween<double>(begin: 0.94, end: 1.0).animate(curved),
|
||||
child: FadeTransition(opacity: animation, child: child),
|
||||
);
|
||||
},
|
||||
child: buildPrimaryAction(fullWidth: true),
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: Wrap(
|
||||
alignment: WrapAlignment.center,
|
||||
spacing: 12,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
buildSecondaryButton(
|
||||
icon: Icons.swap_horiz,
|
||||
label: 'Reverse route',
|
||||
onPressed: () async {
|
||||
setState(() {
|
||||
data.stations = data.stations.reversed.toList();
|
||||
});
|
||||
await _calculateRoute(data.stations);
|
||||
},
|
||||
),
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 220),
|
||||
transitionBuilder: (child, animation) {
|
||||
final curved = CurvedAnimation(
|
||||
parent: animation,
|
||||
curve: Curves.easeOutBack,
|
||||
);
|
||||
return ScaleTransition(
|
||||
scale:
|
||||
Tween<double>(begin: 0.94, end: 1.0).animate(curved),
|
||||
child: FadeTransition(opacity: animation, child: child),
|
||||
);
|
||||
},
|
||||
child: buildPrimaryAction(fullWidth: false),
|
||||
),
|
||||
buildSecondaryButton(
|
||||
icon: Icons.add,
|
||||
label: 'Add station',
|
||||
onPressed: _addStation,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
Reference in New Issue
Block a user