Vocab v2 (#1402)
* starting to change vocab analytics page * couple extra details * Add enum for lemma categories * Set up vocab v2 card * Adds basic lemma definition page * Added more elements to definition page * Add more definition page features * Add tooltips to definition page icons * Get forms + examples working * Add scrolling, edit POS retrieval * Added POS clarification to duplicate lemmas * Add comments, minor fix to dots * fix: dart format and remove duplicate functions --------- Co-authored-by: wcjord <32568597+wcjord@users.noreply.github.com> Co-authored-by: ggurdin <ggurdin@gmail.com> Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>pull/1593/head
Kelrap
10 months ago
committed by
GitHub
parent
496a789030
commit
f021e3deb2
@ -0,0 +1,60 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/pangea/constants/analytics_constants.dart';
|
||||
|
||||
enum LemmaCategoryEnum {
|
||||
flowers,
|
||||
greens,
|
||||
seeds,
|
||||
}
|
||||
|
||||
extension LemmaCategoryExtension on LemmaCategoryEnum {
|
||||
Color get color {
|
||||
switch (this) {
|
||||
case LemmaCategoryEnum.flowers:
|
||||
return Color.lerp(AppConfig.primaryColor, Colors.white, 0.6) ??
|
||||
AppConfig.primaryColor;
|
||||
case LemmaCategoryEnum.greens:
|
||||
return Color.lerp(AppConfig.success, Colors.white, 0.6) ??
|
||||
AppConfig.success;
|
||||
case LemmaCategoryEnum.seeds:
|
||||
return Color.lerp(AppConfig.gold, Colors.white, 0.6) ?? AppConfig.gold;
|
||||
}
|
||||
}
|
||||
|
||||
Color get darkColor {
|
||||
switch (this) {
|
||||
case LemmaCategoryEnum.flowers:
|
||||
return Color.lerp(AppConfig.primaryColor, Colors.white, 0.3) ??
|
||||
AppConfig.primaryColor;
|
||||
case LemmaCategoryEnum.greens:
|
||||
return Color.lerp(AppConfig.success, Colors.black, 0.3) ??
|
||||
AppConfig.success;
|
||||
case LemmaCategoryEnum.seeds:
|
||||
return Color.lerp(AppConfig.gold, Colors.black, 0.3) ?? AppConfig.gold;
|
||||
}
|
||||
}
|
||||
|
||||
String get emoji {
|
||||
switch (this) {
|
||||
case LemmaCategoryEnum.flowers:
|
||||
return AnalyticsConstants.emojiForFlower;
|
||||
case LemmaCategoryEnum.greens:
|
||||
return AnalyticsConstants.emojiForGreen;
|
||||
case LemmaCategoryEnum.seeds:
|
||||
return AnalyticsConstants.emojiForSeed;
|
||||
}
|
||||
}
|
||||
|
||||
String get xpString {
|
||||
switch (this) {
|
||||
case LemmaCategoryEnum.flowers:
|
||||
return ">${AnalyticsConstants.xpForFlower}";
|
||||
case LemmaCategoryEnum.greens:
|
||||
return ">${AnalyticsConstants.xpForGreens}";
|
||||
case LemmaCategoryEnum.seeds:
|
||||
return "<${AnalyticsConstants.xpForGreens}";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/pangea/enum/construct_type_enum.dart';
|
||||
import 'package:fluffychat/pangea/enum/progress_indicators_enum.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/construct_use_model.dart';
|
||||
import 'package:fluffychat/pangea/utils/grammar/get_grammar_copy.dart';
|
||||
|
||||
class ConstructUsesXPTile extends StatelessWidget {
|
||||
final ConstructUses constructUses;
|
||||
|
||||
const ConstructUsesXPTile(
|
||||
this.constructUses, {
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ProgressIndicatorEnum indicator =
|
||||
constructUses.constructType == ConstructTypeEnum.morph
|
||||
? ProgressIndicatorEnum.morphsUsed
|
||||
: ProgressIndicatorEnum.wordsUsed;
|
||||
|
||||
return Tooltip(
|
||||
message:
|
||||
"${constructUses.points} / ${constructUses.constructType.maxXPPerLemma}",
|
||||
child: ListTile(
|
||||
onTap: () {},
|
||||
title: Text(
|
||||
constructUses.constructType == ConstructTypeEnum.morph
|
||||
? getGrammarCopy(
|
||||
category: constructUses.category,
|
||||
lemma: constructUses.lemma,
|
||||
context: context,
|
||||
) ??
|
||||
constructUses.lemma
|
||||
: constructUses.lemma,
|
||||
),
|
||||
subtitle: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: LinearProgressIndicator(
|
||||
value: constructUses.points /
|
||||
constructUses.constructType.maxXPPerLemma,
|
||||
minHeight: 20,
|
||||
borderRadius: const BorderRadius.all(
|
||||
Radius.circular(AppConfig.borderRadius),
|
||||
),
|
||||
color: indicator.color(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text("${constructUses.points}xp"),
|
||||
],
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,310 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/pangea/constants/analytics_constants.dart';
|
||||
import 'package:fluffychat/pangea/enum/construct_type_enum.dart';
|
||||
import 'package:fluffychat/pangea/enum/lemma_category_enum.dart';
|
||||
import 'package:fluffychat/pangea/enum/progress_indicators_enum.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/construct_list_model.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/construct_use_model.dart';
|
||||
import 'package:fluffychat/pangea/utils/grammar/get_grammar_copy.dart';
|
||||
import 'package:fluffychat/pangea/widgets/chat_list/analytics_summary/vocab_analytics_popup/vocab_definition_popup.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
|
||||
/// Displays vocab analytics, sorted into categories
|
||||
/// (flowers, greens, and seeds) by points
|
||||
class VocabAnalyticsPopup extends StatefulWidget {
|
||||
const VocabAnalyticsPopup({
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
VocabAnalyticsPopupState createState() => VocabAnalyticsPopupState();
|
||||
}
|
||||
|
||||
class VocabAnalyticsPopupState extends State<VocabAnalyticsPopup> {
|
||||
ConstructListModel get _constructsModel =>
|
||||
MatrixState.pangeaController.getAnalytics.constructListModel;
|
||||
|
||||
/// Sort entries alphabetically, to better detect duplicates
|
||||
List<ConstructUses> get _sortedEntries {
|
||||
final entries =
|
||||
_constructsModel.constructList(type: ConstructTypeEnum.vocab);
|
||||
entries
|
||||
.sort((a, b) => a.lemma.toLowerCase().compareTo(b.lemma.toLowerCase()));
|
||||
return entries;
|
||||
}
|
||||
|
||||
/// Produces list of chips with lemma content,
|
||||
/// and assigns them to flowers, greens, and seeds tiles
|
||||
Widget get dialogContent {
|
||||
if (_constructsModel.constructList(type: ConstructTypeEnum.vocab).isEmpty) {
|
||||
return Center(child: Text(L10n.of(context).noDataFound));
|
||||
}
|
||||
final sortedEntries = _sortedEntries;
|
||||
|
||||
// Get lists of lemmas by category
|
||||
final List<Widget> flowerLemmas = [];
|
||||
final List<Widget> greenLemmas = [];
|
||||
final List<Widget> seedLemmas = [];
|
||||
for (int i = 0; i < sortedEntries.length; i++) {
|
||||
final construct = sortedEntries[i];
|
||||
if (construct.lemma.isEmpty) {
|
||||
continue;
|
||||
}
|
||||
final int points = construct.points;
|
||||
String? displayText;
|
||||
|
||||
// Check if previous or next entry has same lemma as this entry
|
||||
if ((i > 0 && sortedEntries[i - 1].lemma.equals(construct.lemma)) ||
|
||||
((i < sortedEntries.length - 1 &&
|
||||
sortedEntries[i + 1].lemma.equals(construct.lemma)))) {
|
||||
final String pos = getGrammarCopy(
|
||||
category: "pos",
|
||||
lemma: construct.category,
|
||||
context: context,
|
||||
) ??
|
||||
construct.category;
|
||||
displayText = "${sortedEntries[i].lemma} (${pos.toLowerCase()})";
|
||||
}
|
||||
|
||||
// Add VocabChip for lemma to relevant widget list, followed by comma
|
||||
if (points < AnalyticsConstants.xpForGreens) {
|
||||
seedLemmas.add(
|
||||
VocabChip(
|
||||
construct: construct,
|
||||
displayText: displayText,
|
||||
onTap: () {
|
||||
showDialog<VocabDefinitionPopup>(
|
||||
context: context,
|
||||
builder: (c) => VocabDefinitionPopup(
|
||||
construct: construct,
|
||||
type: LemmaCategoryEnum.seeds,
|
||||
points: points,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
seedLemmas.add(
|
||||
const Text(
|
||||
", ",
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else if (points >= AnalyticsConstants.xpForFlower) {
|
||||
flowerLemmas.add(
|
||||
VocabChip(
|
||||
construct: construct,
|
||||
displayText: displayText,
|
||||
onTap: () {
|
||||
showDialog<VocabDefinitionPopup>(
|
||||
context: context,
|
||||
builder: (c) => VocabDefinitionPopup(
|
||||
construct: construct,
|
||||
type: LemmaCategoryEnum.flowers,
|
||||
points: points,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
flowerLemmas.add(
|
||||
const Text(
|
||||
", ",
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
greenLemmas.add(
|
||||
VocabChip(
|
||||
construct: construct,
|
||||
displayText: displayText,
|
||||
onTap: () {
|
||||
showDialog<VocabDefinitionPopup>(
|
||||
context: context,
|
||||
builder: (c) => VocabDefinitionPopup(
|
||||
construct: construct,
|
||||
type: LemmaCategoryEnum.greens,
|
||||
points: points,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
greenLemmas.add(
|
||||
const Text(
|
||||
", ",
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Pass sorted lemmas to background tile widgets
|
||||
final Widget flowers =
|
||||
dialogWidget(LemmaCategoryEnum.flowers, flowerLemmas);
|
||||
final Widget greens = dialogWidget(LemmaCategoryEnum.greens, greenLemmas);
|
||||
final Widget seeds = dialogWidget(LemmaCategoryEnum.seeds, seedLemmas);
|
||||
|
||||
return ListView(
|
||||
children: [flowers, greens, seeds],
|
||||
);
|
||||
}
|
||||
|
||||
/// Tile that contains flowers, greens, or seeds chips
|
||||
Widget dialogWidget(LemmaCategoryEnum type, List<Widget> lemmaList) {
|
||||
// Remove extraneous commas from lemmaList
|
||||
if (lemmaList.isNotEmpty) {
|
||||
lemmaList.removeLast();
|
||||
} else {
|
||||
lemmaList.add(
|
||||
const Text(
|
||||
"No lemmas",
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
|
||||
child: Material(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(AppConfig.borderRadius)),
|
||||
color: type.color,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(
|
||||
10,
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
backgroundColor:
|
||||
Theme.of(context).brightness == Brightness.light
|
||||
? Colors.white
|
||||
: Colors.black,
|
||||
radius: 16,
|
||||
child: Text(
|
||||
" ${type.emoji}",
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
" ${type.xpString} XP",
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
Wrap(
|
||||
spacing: 0,
|
||||
runSpacing: 0,
|
||||
children: lemmaList,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Dialog(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 400,
|
||||
maxHeight: 600,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(ProgressIndicatorEnum.wordsUsed.tooltip(context)),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: Navigator.of(context).pop,
|
||||
),
|
||||
// TODO: add search and training buttons?
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20),
|
||||
child: dialogContent,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A simple chip with the text of the lemma
|
||||
// TODO: highlights on hover
|
||||
// callback on click
|
||||
// has some padding to separate from other chips
|
||||
// otherwise, is very visually simple with transparent border/background/etc
|
||||
class VocabChip extends StatelessWidget {
|
||||
final ConstructUses construct;
|
||||
final String? displayText;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const VocabChip({
|
||||
super.key,
|
||||
required this.construct,
|
||||
required this.onTap,
|
||||
this.displayText,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Text(
|
||||
displayText ?? construct.lemma,
|
||||
style: const TextStyle(
|
||||
// Workaround to add space between text and underline
|
||||
color: Colors.transparent,
|
||||
shadows: [
|
||||
Shadow(
|
||||
color: Colors.black,
|
||||
offset: Offset(0, -3),
|
||||
),
|
||||
],
|
||||
decoration: TextDecoration.underline,
|
||||
decorationStyle: TextDecorationStyle.dashed,
|
||||
decorationColor: Colors.black,
|
||||
decorationThickness: 1,
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,583 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import 'package:fluffychat/config/themes.dart';
|
||||
import 'package:fluffychat/pangea/constants/language_constants.dart';
|
||||
import 'package:fluffychat/pangea/constants/morph_categories_and_labels.dart';
|
||||
import 'package:fluffychat/pangea/enum/construct_use_type_enum.dart';
|
||||
import 'package:fluffychat/pangea/enum/lemma_category_enum.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/construct_list_model.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/construct_use_model.dart';
|
||||
import 'package:fluffychat/pangea/models/analytics/constructs_model.dart';
|
||||
import 'package:fluffychat/pangea/models/lemma.dart';
|
||||
import 'package:fluffychat/pangea/models/pangea_token_model.dart';
|
||||
import 'package:fluffychat/pangea/models/pangea_token_text_model.dart';
|
||||
import 'package:fluffychat/pangea/repo/lemma_info/lemma_info_repo.dart';
|
||||
import 'package:fluffychat/pangea/repo/lemma_info/lemma_info_request.dart';
|
||||
import 'package:fluffychat/pangea/repo/lemma_info/lemma_info_response.dart';
|
||||
import 'package:fluffychat/pangea/utils/grammar/get_grammar_copy.dart';
|
||||
import 'package:fluffychat/pangea/widgets/chat/tts_controller.dart';
|
||||
import 'package:fluffychat/pangea/widgets/practice_activity/word_audio_button.dart';
|
||||
import 'package:fluffychat/utils/platform_infos.dart';
|
||||
import 'package:fluffychat/widgets/matrix.dart';
|
||||
|
||||
/// Displays information about selected lemma, and its usage
|
||||
class VocabDefinitionPopup extends StatefulWidget {
|
||||
final ConstructUses construct;
|
||||
final LemmaCategoryEnum type;
|
||||
final int points;
|
||||
|
||||
const VocabDefinitionPopup({
|
||||
super.key,
|
||||
required this.construct,
|
||||
required this.type,
|
||||
required this.points,
|
||||
});
|
||||
|
||||
@override
|
||||
VocabDefinitionPopupState createState() => VocabDefinitionPopupState();
|
||||
}
|
||||
|
||||
class VocabDefinitionPopupState extends State<VocabDefinitionPopup> {
|
||||
String? exampleEventID;
|
||||
LemmaInfoResponse? res;
|
||||
late Future<String?> definition;
|
||||
String? emoji;
|
||||
PangeaToken? token;
|
||||
String? morphFeature;
|
||||
// Lists of lemma uses for the given exercise types; true if positive XP
|
||||
List<bool> writingUses = [];
|
||||
List<bool> hearingUses = [];
|
||||
List<bool> readingUses = [];
|
||||
late Future<List<Widget>> writingExamples;
|
||||
Set<String>? forms;
|
||||
String? formString;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
definition = getDefinition();
|
||||
writingExamples = getExamples(loadUses());
|
||||
|
||||
// Get possible forms of lemma
|
||||
final ConstructListModel constructsModel =
|
||||
MatrixState.pangeaController.getAnalytics.constructListModel;
|
||||
forms = (constructsModel.lemmasToUses())[widget.construct.lemma]
|
||||
?.first
|
||||
.uses
|
||||
.map((e) => e.form)
|
||||
.whereType<String>()
|
||||
.toSet();
|
||||
|
||||
// Save forms as string
|
||||
if (forms != null) {
|
||||
formString = " ";
|
||||
for (final String form in forms!) {
|
||||
if (form.isNotEmpty) {
|
||||
formString = "${formString!}$form, ";
|
||||
}
|
||||
}
|
||||
if (formString!.length <= 2) {
|
||||
formString = null;
|
||||
} else {
|
||||
formString = formString!.substring(0, formString!.length - 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Find selected emoji, if applicable, using PangeaToken.getEmoji
|
||||
emoji = PangeaToken(
|
||||
text: PangeaTokenText(
|
||||
offset: 0,
|
||||
content: widget.construct.lemma,
|
||||
length: widget.construct.lemma.length,
|
||||
),
|
||||
lemma: Lemma(
|
||||
text: widget.construct.lemma,
|
||||
saveVocab: false,
|
||||
form: widget.construct.lemma,
|
||||
),
|
||||
pos: widget.construct.category,
|
||||
morph: {},
|
||||
).getEmoji();
|
||||
|
||||
exampleEventID = widget.construct.uses
|
||||
.firstWhereOrNull((e) => e.metadata.eventId != null)
|
||||
?.metadata
|
||||
.eventId;
|
||||
super.initState();
|
||||
}
|
||||
|
||||
/// Sort uses of lemma associated with writing, reading, and listening.
|
||||
List<OneConstructUse> loadUses() {
|
||||
final List<OneConstructUse> writingUsesDetailed = [];
|
||||
for (final OneConstructUse use in widget.construct.uses) {
|
||||
if (use.useType.pointValue == 0) {
|
||||
continue;
|
||||
}
|
||||
final bool positive = use.useType.pointValue > 0;
|
||||
final ConstructUseTypeEnum activityType = use.useType;
|
||||
switch (activityType) {
|
||||
case ConstructUseTypeEnum.wa:
|
||||
case ConstructUseTypeEnum.ga:
|
||||
case ConstructUseTypeEnum.unk:
|
||||
case ConstructUseTypeEnum.corIt:
|
||||
case ConstructUseTypeEnum.ignIt:
|
||||
case ConstructUseTypeEnum.incIt:
|
||||
case ConstructUseTypeEnum.corIGC:
|
||||
case ConstructUseTypeEnum.ignIGC:
|
||||
case ConstructUseTypeEnum.incIGC:
|
||||
case ConstructUseTypeEnum.corL:
|
||||
case ConstructUseTypeEnum.ignL:
|
||||
case ConstructUseTypeEnum.incL:
|
||||
case ConstructUseTypeEnum.corM:
|
||||
case ConstructUseTypeEnum.ignM:
|
||||
case ConstructUseTypeEnum.incM:
|
||||
writingUses.add(positive);
|
||||
writingUsesDetailed.add(use);
|
||||
break;
|
||||
case ConstructUseTypeEnum.corWL:
|
||||
case ConstructUseTypeEnum.ignWL:
|
||||
case ConstructUseTypeEnum.incWL:
|
||||
case ConstructUseTypeEnum.corHWL:
|
||||
case ConstructUseTypeEnum.ignHWL:
|
||||
case ConstructUseTypeEnum.incHWL:
|
||||
hearingUses.add(positive);
|
||||
break;
|
||||
case ConstructUseTypeEnum.corPA:
|
||||
case ConstructUseTypeEnum.ignPA:
|
||||
case ConstructUseTypeEnum.incPA:
|
||||
readingUses.add(positive);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Save writing uses to find usage examples
|
||||
return writingUsesDetailed;
|
||||
}
|
||||
|
||||
/// Returns a wrapping row of dots - green if positive usage, red if negative
|
||||
Widget getUsageDots(List<bool> uses) {
|
||||
final List<Widget> dots = [];
|
||||
for (final bool use in uses) {
|
||||
dots.add(
|
||||
Container(
|
||||
width: 15.0,
|
||||
height: 15.0,
|
||||
decoration: BoxDecoration(
|
||||
color: use ? AppConfig.success : Colors.red,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
// Clips content (and enables scrolling) if there are 5 or more rows of dots
|
||||
return ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
// TODO: May need different maxWidth for android devices
|
||||
maxWidth: PlatformInfos.isMobile ? 250 : 350,
|
||||
maxHeight: 90,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
child: Wrap(
|
||||
spacing: 3,
|
||||
runSpacing: 5,
|
||||
children: dots,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Get examples of messages that uses this lemma
|
||||
Future<List<Widget>> getExamples(
|
||||
List<OneConstructUse> writingUsesDetailed,
|
||||
) async {
|
||||
final Set<String> exampleText = {};
|
||||
final List<Widget> examples = [];
|
||||
for (final OneConstructUse use in writingUsesDetailed) {
|
||||
if (use.metadata.eventId == null) {
|
||||
continue;
|
||||
}
|
||||
final Room? room = MatrixState.pangeaController.matrixState.client
|
||||
.getRoomById(use.metadata.roomId);
|
||||
final Event? event = await room?.getEventById(use.metadata.eventId!);
|
||||
final String? messageText = event?.text;
|
||||
|
||||
if (messageText != null) {
|
||||
// Save text to set, to avoid duplicate entries
|
||||
exampleText.add(messageText);
|
||||
if (exampleText.length >= 3) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Turn message text into widgets:
|
||||
for (final String text in exampleText) {
|
||||
examples.add(
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
);
|
||||
examples.add(
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: widget.type.color,
|
||||
borderRadius: BorderRadius.circular(
|
||||
4,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: FluffyThemes.columnWidth * 1.5,
|
||||
),
|
||||
child: Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return examples;
|
||||
}
|
||||
|
||||
/// Fetch the meaning of the lemma
|
||||
Future<String?> getDefinition() async {
|
||||
final lang2 =
|
||||
MatrixState.pangeaController.languageController.userL2?.langCode;
|
||||
if (lang2 == null) {
|
||||
debugPrint("No lang2, cannot retrieve definition");
|
||||
return L10n.of(context).meaningNotFound;
|
||||
}
|
||||
|
||||
final LemmaInfoRequest lemmaDefReq = LemmaInfoRequest(
|
||||
partOfSpeech: widget.construct.category,
|
||||
lemmaLang: lang2,
|
||||
userL1:
|
||||
MatrixState.pangeaController.languageController.userL1?.langCode ??
|
||||
LanguageKeys.defaultLanguage,
|
||||
lemma: widget.construct.lemma,
|
||||
);
|
||||
res = await LemmaInfoRepo.get(lemmaDefReq);
|
||||
return res?.meaning;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Color textColor = Theme.of(context).brightness != Brightness.light
|
||||
? widget.type.color
|
||||
: widget.type.darkColor;
|
||||
|
||||
return Dialog(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 400,
|
||||
maxHeight: 600,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20.0),
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (emoji != null)
|
||||
Text(
|
||||
emoji!,
|
||||
),
|
||||
if (emoji == null)
|
||||
Tooltip(
|
||||
message: L10n.of(context).noEmojiSelectedTooltip,
|
||||
child: Icon(
|
||||
Icons.add_reaction_outlined,
|
||||
size: 25,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 7,
|
||||
),
|
||||
Text(
|
||||
widget.construct.lemma,
|
||||
style: TextStyle(
|
||||
color: textColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
centerTitle: true,
|
||||
leading: IconButton(
|
||||
icon: Icon(Icons.adaptive.arrow_back_outlined),
|
||||
color: textColor,
|
||||
tooltip: MaterialLocalizations.of(context).backButtonTooltip,
|
||||
onPressed: Navigator.of(context).pop,
|
||||
),
|
||||
actions: (exampleEventID != null)
|
||||
? [
|
||||
Column(
|
||||
children: [
|
||||
const SizedBox(height: 6),
|
||||
WordAudioButton(
|
||||
text: widget.construct.lemma,
|
||||
ttsController: TtsController(),
|
||||
eventID: exampleEventID!,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
]
|
||||
: [],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: L10n.of(context).grammarCopyPOS,
|
||||
child: Icon(
|
||||
(morphFeature != null)
|
||||
? getIconForMorphFeature(morphFeature!)
|
||||
: Symbols.toys_and_games,
|
||||
size: 23,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 5,
|
||||
),
|
||||
Text(
|
||||
getGrammarCopy(
|
||||
category: "pos",
|
||||
lemma: widget.construct.category,
|
||||
context: context,
|
||||
) ??
|
||||
widget.construct.category,
|
||||
style: TextStyle(
|
||||
color: textColor,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
|
||||
Align(
|
||||
alignment: Alignment.topLeft,
|
||||
child: FutureBuilder(
|
||||
future: definition,
|
||||
builder: (
|
||||
BuildContext context,
|
||||
AsyncSnapshot<String?> snapshot,
|
||||
) {
|
||||
if (snapshot.hasData) {
|
||||
return RichText(
|
||||
text: TextSpan(
|
||||
style: TextStyle(
|
||||
color:
|
||||
Theme.of(context).colorScheme.onSurface,
|
||||
fontSize: 16,
|
||||
),
|
||||
children: <TextSpan>[
|
||||
TextSpan(
|
||||
text: L10n.of(context).meaningSectionHeader,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
TextSpan(text: " ${snapshot.data!}"),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return Wrap(
|
||||
children: [
|
||||
Text(
|
||||
L10n.of(context).meaningSectionHeader,
|
||||
style: TextStyle(
|
||||
color:
|
||||
Theme.of(context).colorScheme.onSurface,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 10,
|
||||
),
|
||||
const CircularProgressIndicator.adaptive(
|
||||
strokeWidth: 2,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
|
||||
Align(
|
||||
alignment: Alignment.topLeft,
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
fontSize: 16,
|
||||
),
|
||||
children: <TextSpan>[
|
||||
TextSpan(
|
||||
text: L10n.of(context).formSectionHeader,
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
TextSpan(
|
||||
text: formString ??
|
||||
" ${L10n.of(context).formsNotFound}",
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
Divider(
|
||||
height: 3,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
Text(
|
||||
"${widget.type.emoji} ${widget.points} XP",
|
||||
style: TextStyle(
|
||||
color: textColor,
|
||||
fontSize: 20,
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
// Writing exercise section
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: L10n.of(context).writingExercisesTooltip,
|
||||
child: Icon(
|
||||
Symbols.edit_square,
|
||||
size: 25,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 7,
|
||||
),
|
||||
getUsageDots(writingUses),
|
||||
],
|
||||
),
|
||||
|
||||
FutureBuilder(
|
||||
future: writingExamples,
|
||||
builder: (
|
||||
BuildContext context,
|
||||
AsyncSnapshot<List<Widget>> snapshot,
|
||||
) {
|
||||
if (snapshot.hasData) {
|
||||
return Align(
|
||||
alignment: Alignment.topLeft,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: snapshot.data!,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return const Column(
|
||||
children: [
|
||||
SizedBox(height: 10),
|
||||
CircularProgressIndicator.adaptive(
|
||||
strokeWidth: 2,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
// Listening exercise section
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: L10n.of(context).listeningExercisesTooltip,
|
||||
child: Icon(
|
||||
Icons.hearing,
|
||||
size: 25,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 7,
|
||||
),
|
||||
getUsageDots(hearingUses),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
// Reading exercise section
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Tooltip(
|
||||
message: L10n.of(context).readingExercisesTooltip,
|
||||
child: Icon(
|
||||
Symbols.two_pager,
|
||||
size: 25,
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
width: 7,
|
||||
),
|
||||
getUsageDots(readingUses),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue