add pages and level grouping for the browser

This commit is contained in:
Rene Kievits
2025-10-28 20:13:46 +01:00
parent da48b3973e
commit bef4519ab5
4 changed files with 215 additions and 43 deletions

View File

@@ -1,4 +1,3 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/kanji_item.dart';
@@ -14,31 +13,59 @@ class BrowseScreen extends StatefulWidget {
class _BrowseScreenState extends State<BrowseScreen>
with SingleTickerProviderStateMixin {
late TabController _tabController;
late PageController _kanjiPageController;
late PageController _vocabPageController;
List<KanjiItem> _kanjiDeck = [];
List<VocabularyItem> _vocabDeck = [];
Map<int, List<KanjiItem>> _kanjiByLevel = {};
Map<int, List<VocabularyItem>> _vocabByLevel = {};
List<int> _kanjiSortedLevels = [];
List<int> _vocabSortedLevels = [];
bool _loading = true;
String _status = 'Loading...';
int _currentKanjiPage = 0;
int _currentVocabPage = 0;
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
_kanjiPageController = PageController();
_vocabPageController = PageController();
_tabController.addListener(() {
setState(() {}); // Rebuild to update the level selector
});
_kanjiPageController.addListener(() {
if (_kanjiPageController.page?.round() != _currentKanjiPage) {
setState(() {
_currentKanjiPage = _kanjiPageController.page!.round();
});
}
});
_vocabPageController.addListener(() {
if (_vocabPageController.page?.round() != _currentVocabPage) {
setState(() {
_currentVocabPage = _vocabPageController.page!.round();
});
}
});
_loadDecks();
}
Future<void> _loadDecks() async {
setState(() {
_loading = true;
_status = 'Loading decks...';
});
setState(() => _loading = true);
try {
final repo = Provider.of<DeckRepository>(context, listen: false);
await repo.loadApiKey();
final apiKey = repo.apiKey;
if (apiKey == null || apiKey.isEmpty) {
// Optionally, navigate to settings or show an error
setState(() {
_status = 'API key not set.';
_loading = false;
@@ -47,22 +74,25 @@ class _BrowseScreenState extends State<BrowseScreen>
}
var kanji = await repo.loadKanji();
if (kanji.isEmpty) {
if (kanji.isEmpty || kanji.every((k) => k.level == 0)) {
setState(() => _status = 'Fetching kanji from WaniKani...');
kanji = await repo.fetchAndCacheFromWk(apiKey);
}
var vocab = await repo.loadVocabulary();
if (vocab.isEmpty) {
if (vocab.isEmpty || vocab.every((v) => v.level == 0)) {
setState(() => _status = 'Fetching vocabulary from WaniKani...');
vocab = await repo.fetchAndCacheVocabularyFromWk(apiKey);
}
_kanjiDeck = kanji;
_vocabDeck = vocab;
_groupItemsByLevel();
setState(() {
_kanjiDeck = kanji;
_vocabDeck = vocab;
_loading = false;
_status = 'Loaded ${_kanjiDeck.length} kanji and ${_vocabDeck.length} vocabulary.';
_status =
'Loaded ${_kanjiDeck.length} kanji and ${_vocabDeck.length} vocabulary.';
});
} catch (e) {
setState(() {
@@ -72,6 +102,24 @@ class _BrowseScreenState extends State<BrowseScreen>
}
}
void _groupItemsByLevel() {
_kanjiByLevel = {};
for (final item in _kanjiDeck) {
if (item.level > 0) {
(_kanjiByLevel[item.level] ??= []).add(item);
}
}
_kanjiSortedLevels = _kanjiByLevel.keys.toList()..sort();
_vocabByLevel = {};
for (final item in _vocabDeck) {
if (item.level > 0) {
(_vocabByLevel[item.level] ??= []).add(item);
}
}
_vocabSortedLevels = _vocabByLevel.keys.toList()..sort();
}
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -80,6 +128,16 @@ class _BrowseScreenState extends State<BrowseScreen>
title: const Text('Browse Items'),
backgroundColor: const Color(0xFF1F1F1F),
foregroundColor: Colors.white,
bottom: TabBar(
controller: _tabController,
tabs: const [
Tab(text: 'Kanji'),
Tab(text: 'Vocabulary'),
],
labelColor: Colors.blueAccent,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.blueAccent,
),
),
body: _loading
? Center(
@@ -98,27 +156,107 @@ class _BrowseScreenState extends State<BrowseScreen>
child: TabBarView(
controller: _tabController,
children: [
_buildGridView(_kanjiDeck),
_buildListView(_vocabDeck),
_buildPaginatedView(
_kanjiByLevel,
_kanjiSortedLevels,
_kanjiPageController,
(items) => _buildGridView(items.cast<KanjiItem>())),
_buildPaginatedView(
_vocabByLevel,
_vocabSortedLevels,
_vocabPageController,
(items) => _buildListView(items.cast<VocabularyItem>())),
],
),
),
SafeArea(
top: false,
child: _buildLevelSelector(),
),
],
),
bottomNavigationBar: TabBar(
controller: _tabController,
tabs: const [
Tab(text: 'Kanji'),
Tab(text: 'Vocabulary'),
],
labelColor: Colors.blueAccent,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.blueAccent,
);
}
Widget _buildPaginatedView(
Map<int, List<dynamic>> groupedItems,
List<int> sortedLevels,
PageController pageController,
Widget Function(List<dynamic>) buildPageContent) {
if (sortedLevels.isEmpty) {
return const Center(
child:
Text('No items to display.', style: TextStyle(color: Colors.white)),
);
}
return PageView.builder(
controller: pageController,
itemCount: sortedLevels.length,
itemBuilder: (context, index) {
final level = sortedLevels[index];
final levelItems = groupedItems[level]!;
return Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'Level $level',
style: const TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Expanded(child: buildPageContent(levelItems)),
],
);
},
);
}
Widget _buildLevelSelector() {
final isKanji = _tabController.index == 0;
final levels = isKanji ? _kanjiSortedLevels : _vocabSortedLevels;
final controller = isKanji ? _kanjiPageController : _vocabPageController;
final currentPage = isKanji ? _currentKanjiPage : _currentVocabPage;
if (levels.isEmpty) return const SizedBox.shrink();
return Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
color: const Color(0xFF1F1F1F),
height: 60,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(levels.length, (index) {
final level = levels[index];
final isSelected = index == currentPage;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: ElevatedButton(
onPressed: () {
controller.animateToPage(index, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
},
style: ElevatedButton.styleFrom(
backgroundColor: isSelected ? Colors.blueAccent : const Color(0xFF333333),
foregroundColor: Colors.white,
shape: const CircleBorder(),
padding: const EdgeInsets.all(12),
),
child: Text(level.toString()),
),
);
}),
),
),
);
}
Widget _buildGridView(List<dynamic> items) {
Widget _buildGridView(List<KanjiItem> items) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150,
@@ -129,15 +267,11 @@ class _BrowseScreenState extends State<BrowseScreen>
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
if (item is KanjiItem) {
return GestureDetector(
onTap: () => _showReadingsDialog(item),
child: _buildSrsItemCard(item.characters, item.srsItems.values.toList()),
);
} else if (item is VocabularyItem) {
return _buildSrsItemCard(item.characters, item.srsItems.values.toList());
}
return const SizedBox.shrink();
return GestureDetector(
onTap: () => _showReadingsDialog(item),
child:
_buildSrsItemCard(item.characters, item.srsItems.values.toList()),
);
},
padding: const EdgeInsets.all(8),
);
@@ -155,7 +289,9 @@ class _BrowseScreenState extends State<BrowseScreen>
Widget _buildVocabListTile(VocabularyItem item) {
final avgSrsStage = item.srsItems.isNotEmpty
? item.srsItems.values.map((s) => s.srsStage).reduce((a, b) => a + b) /
? item.srsItems.values
.map((s) => s.srsStage)
.reduce((a, b) => a + b) /
item.srsItems.length
: 0.0;
@@ -196,7 +332,8 @@ class _BrowseScreenState extends State<BrowseScreen>
Widget _buildSrsItemCard(String characters, List<dynamic> srsItems) {
final avgSrsStage = srsItems.isNotEmpty
? srsItems.map((s) => s.srsStage).reduce((a, b) => a + b) / srsItems.length
? srsItems.map((s) => s.srsStage).reduce((a, b) => a + b) /
srsItems.length
: 0.0;
return Card(
@@ -255,13 +392,18 @@ class _BrowseScreenState extends State<BrowseScreen>
return AlertDialog(
backgroundColor: const Color(0xFF1E1E1E),
title: Text(
'Readings for ${kanji.characters}',
'Details for ${kanji.characters}',
style: const TextStyle(color: Colors.white),
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Level: ${kanji.level}',
style: const TextStyle(color: Colors.white),
),
const SizedBox(height: 16),
if (kanji.meanings.isNotEmpty)
Text(
'Meanings: ${kanji.meanings.join(', ')}',
@@ -288,10 +430,20 @@ class _BrowseScreenState extends State<BrowseScreen>
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Close', style: TextStyle(color: Colors.blueAccent)),
child: const Text('Close',
style: TextStyle(color: Colors.blueAccent)),
),
],
);
},
);
}}
}
@override
void dispose() {
_tabController.dispose();
_kanjiPageController.dispose();
_vocabPageController.dispose();
super.dispose();
}
}