petegregoryy/mileograph_flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 21 Wiki Activity

add filter panel to calculator

Browse Source
This commit is contained in:
Pete Gregory
2025-12-22 23:16:54 +00:00
parent 950978b021
commit d5d204dd19
6 changed files with 368 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
lib/components/calculator/calculator.dart
View File

@@ -133,6 +133,11 @@ class RouteCalculator extends StatefulWidget {
class _RouteCalculatorState extends State<RouteCalculator> {
List<Station> allStations = [];
List<String> _networks = [];
List<String> _countries = [];
List<String> _selectedNetworks = [];
List<String> _selectedCountries = [];
bool _loadingStations = false;
RouteResult? _routeResult;
RouteResult? get result => _routeResult;
@@ -150,14 +155,31 @@ class _RouteCalculatorState extends State<RouteCalculator> {
}
WidgetsBinding.instance.addPostFrameCallback((_) async {
final data = context.read<DataService>();
final result = await data.fetchStations();
if (mounted) {
setState(() => allStations = result);
}
await data.fetchStationFilters();
if (!mounted) return;
setState(() {
_networks = data.stationNetworks;
_countries = data.stationCountryNetworks.keys.toList();
});
await _loadStations();
});
}
}
Future<void> _loadStations() async {
setState(() => _loadingStations = true);
final data = context.read<DataService>();
final stations = await data.fetchStations(
countries: _selectedCountries,
networks: _selectedNetworks,
);
if (!mounted) return;
setState(() {
allStations = stations;
_loadingStations = false;
});
}
Future<void> _calculateRoute(List<String> stations) async {
setState(() {
_errorMessage = null;
@@ -215,6 +237,43 @@ class _RouteCalculatorState extends State<RouteCalculator> {
final data = context.watch<DataService>();
return Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
child: Wrap(
spacing: 12,
runSpacing: 12,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
_MultiSelectFilter(
label: 'Countries',
options: _countries,
selected: _selectedCountries,
onChanged: (vals) {
setState(() => _selectedCountries = vals);
_loadStations();
},
),
_MultiSelectFilter(
label: 'Networks',
options: _networks,
selected: _selectedNetworks,
onChanged: (vals) {
setState(() => _selectedNetworks = vals);
_loadStations();
},
),
if (_loadingStations)
const Padding(
padding: EdgeInsets.only(left: 8.0),
child: SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(strokeWidth: 2),
),
),
],
),
),
Expanded(
child: ReorderableListView(
buildDefaultDragHandles: false,
@@ -300,32 +359,27 @@ class _RouteCalculatorState extends State<RouteCalculator> {
else
SizedBox.shrink(),
const SizedBox(height: 10),
LayoutBuilder(
builder: (context, constraints) {
double screenWidth = constraints.maxWidth;
return Padding(
padding: EdgeInsets.only(right: screenWidth < 450 ? 70 : 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton.icon(
icon: const Icon(Icons.add),
label: const Text('Add Station'),
onPressed: _addStation,
),
const SizedBox(width: 16),
ElevatedButton.icon(
icon: const Icon(Icons.route),
label: const Text('Calculate Route'),
onPressed: () async {
await _calculateRoute(data.stations);
},
),
],
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 12,
runSpacing: 8,
children: [
ElevatedButton.icon(
icon: const Icon(Icons.add),
label: const Text('Add Station'),
onPressed: _addStation,
),
);
},
ElevatedButton.icon(
icon: const Icon(Icons.route),
label: const Text('Calculate Route'),
onPressed: () async {
await _calculateRoute(data.stations);
},
),
],
),
),
const SizedBox(height: 16),
@@ -350,3 +404,159 @@ Widget debugPanel(List<String> stations) {
),
);
}
class _MultiSelectFilter extends StatefulWidget {
const _MultiSelectFilter({
required this.label,
required this.options,
required this.selected,
required this.onChanged,
});
final String label;
final List<String> options;
final List<String> selected;
final ValueChanged<List<String>> onChanged;
@override
State<_MultiSelectFilter> createState() => _MultiSelectFilterState();
}
class _MultiSelectFilterState extends State<_MultiSelectFilter> {
late List<String> _tempSelected;
String _query = '';
@override
void initState() {
super.initState();
_tempSelected = List.from(widget.selected);
}
@override
void didUpdateWidget(covariant _MultiSelectFilter oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.selected != widget.selected) {
_tempSelected = List.from(widget.selected);
}
}
void _openPicker() async {
_tempSelected = List.from(widget.selected);
_query = '';
await showModalBottomSheet<void>(
context: context,
isScrollControlled: true,
builder: (ctx) {
return StatefulBuilder(
builder: (ctx, setModalState) {
final filtered = widget.options
.where((opt) =>
_query.isEmpty || opt.toLowerCase().contains(_query.toLowerCase()))
.toList();
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'Select ${widget.label.toLowerCase()}',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w700,
),
),
const Spacer(),
TextButton(
onPressed: () {
setModalState(() {
_tempSelected.clear();
});
Navigator.of(ctx).pop();
widget.onChanged(const []);
},
child: const Text('Clear'),
),
],
),
const SizedBox(height: 8),
TextField(
decoration: const InputDecoration(
labelText: 'Search',
border: OutlineInputBorder(),
),
onChanged: (val) {
setModalState(() {
_query = val;
});
},
),
const SizedBox(height: 12),
SizedBox(
height: 320,
child: ListView.builder(
itemCount: filtered.length,
itemBuilder: (_, index) {
final option = filtered[index];
final selected = _tempSelected.contains(option);
return CheckboxListTile(
value: selected,
title: Text(option),
onChanged: (val) {
setModalState(() {
if (val == true) {
if (!_tempSelected.contains(option)) {
_tempSelected.add(option);
}
} else {
_tempSelected.removeWhere((e) => e == option);
}
});
widget.onChanged(List.from(_tempSelected.toSet()));
},
);
},
),
),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: FilledButton.icon(
onPressed: () {
widget.onChanged(List.from(_tempSelected.toSet()));
Navigator.of(ctx).pop();
},
icon: const Icon(Icons.check),
label: const Text('Apply'),
),
),
],
),
),
);
},
);
},
);
}
@override
Widget build(BuildContext context) {
final hasSelection = widget.selected.isNotEmpty;
final display =
hasSelection ? widget.selected.join(', ') : 'Any ${widget.label.toLowerCase()}';
return OutlinedButton.icon(
onPressed: _openPicker,
icon: const Icon(Icons.filter_alt),
label: SizedBox(
width: 180,
child: Text(
'${widget.label}: $display',
overflow: TextOverflow.ellipsis,
),
),
);
}
}

19
lib/components/pages/traction/traction_page.dart
View File

@@ -513,21 +513,10 @@ class _TractionPageState extends State<TractionPage> {
if (widget.selectionMode) {
return Scaffold(
appBar: AppBar(
leadingWidth: 140,
leading: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: TextButton.icon(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.arrow_back),
label: const Text('Back'),
style: TextButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 10,
),
foregroundColor: Theme.of(context).colorScheme.onSurface,
),
),
leadingWidth: 56,
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.of(context).pop(),
),
title: null,
),

87
lib/components/traction/traction_card.dart
View File

@@ -82,39 +82,68 @@ class TractionCard extends StatelessWidget {
],
),
const SizedBox(height: 8),
Row(
children: [
TextButton.icon(
onPressed: onShowInfo,
icon: const Icon(Icons.info_outline),
label: const Text('Details'),
),
const SizedBox(width: 8),
TextButton.icon(
onPressed: onOpenTimeline,
icon: const Icon(Icons.timeline),
label: const Text('Timeline'),
),
if (hasMileageOrTrips && onOpenLegs != null) ...[
const SizedBox(width: 8),
LayoutBuilder(
builder: (context, constraints) {
final isNarrow = constraints.maxWidth < 520;
final buttons = [
TextButton.icon(
onPressed: onOpenLegs,
icon: const Icon(Icons.view_list),
label: const Text('Legs'),
onPressed: onShowInfo,
icon: const Icon(Icons.info_outline),
label: const Text('Details'),
),
],
const Spacer(),
if (selectionMode && onToggleSelect != null)
TextButton.icon(
onPressed: onToggleSelect,
icon: Icon(
isSelected
? Icons.remove_circle_outline
: Icons.add_circle_outline,
onPressed: onOpenTimeline,
icon: const Icon(Icons.timeline),
label: const Text('Timeline'),
),
if (hasMileageOrTrips && onOpenLegs != null)
TextButton.icon(
onPressed: onOpenLegs,
icon: const Icon(Icons.view_list),
label: const Text('Legs'),
),
label: Text(isSelected ? 'Remove' : 'Add to entry'),
),
],
];
final addButton = selectionMode && onToggleSelect != null
? TextButton.icon(
onPressed: onToggleSelect,
icon: Icon(
isSelected
? Icons.remove_circle_outline
: Icons.add_circle_outline,
),
label: Text(isSelected ? 'Remove' : 'Add to entry'),
)
: null;
if (isNarrow) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 8,
runSpacing: 4,
children: buttons,
),
if (addButton != null) ...[
const SizedBox(height: 6),
addButton,
],
],
);
}
return Row(
children: [
...buttons.expand((btn) sync* {
yield btn;
yield const SizedBox(width: 8);
}).take(buttons.length * 2 - 1),
const Spacer(),
if (addButton != null) addButton,
],
);
},
),
Wrap(
spacing: 8,