feat: Display all vocabulary data
This commit is contained in:
parent
18fb797fc9
commit
2b0d472754
@ -26,8 +26,8 @@ export interface IVerbData {
|
||||
|
||||
export interface IAdjektivData {
|
||||
grundform: string;
|
||||
nominativ_a: string;
|
||||
nominativ_b: string;
|
||||
endung_f: string;
|
||||
endung_n: string;
|
||||
};
|
||||
|
||||
export interface IVocab {
|
||||
|
@ -12,7 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
import { withRouter } from "react-router-dom";
|
||||
|
||||
import { IVocab } from "../models/vocab";
|
||||
import { IVocab, VocabType, INomenData, IVerbData, IAdjektivData } from "../models/vocab";
|
||||
|
||||
interface IProps {
|
||||
id: string;
|
||||
@ -97,6 +97,43 @@ const LevelPageWithRouter = withRouter(
|
||||
}
|
||||
}
|
||||
|
||||
vocabSpecificInformation(vocab: IVocab) {
|
||||
switch (vocab.type) {
|
||||
case VocabType.NOMEN:
|
||||
const nData = vocab.latin as INomenData;
|
||||
return <div>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>Genitiv:</b> {nData.genitiv}
|
||||
</Typography>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>Genus:</b> {nData.genus}
|
||||
</Typography>
|
||||
</div>;
|
||||
case VocabType.VERB:
|
||||
const vData = vocab.latin as IVerbData;
|
||||
return <div>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>1. Person Präsens:</b> {vData.praesens}
|
||||
</Typography>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>1. Person Perfekt:</b> {vData.perfekt}
|
||||
</Typography>
|
||||
</div>;
|
||||
case VocabType.ADJEKTIV:
|
||||
const aData = vocab.latin as IAdjektivData;
|
||||
return <div>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>Endung feminin:</b> {aData.endung_f}
|
||||
</Typography>
|
||||
<Typography variant="subheading" component="p">
|
||||
<b>Endung neutrum:</b> {aData.endung_n}
|
||||
</Typography>
|
||||
</div>;
|
||||
default:
|
||||
return <div />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.loading) {
|
||||
return <div>
|
||||
@ -119,6 +156,13 @@ const LevelPageWithRouter = withRouter(
|
||||
</div>;
|
||||
}
|
||||
|
||||
const vocabTypeToStr = {
|
||||
[VocabType.NOMEN]: "Nomen",
|
||||
[VocabType.VERB]: "Verb",
|
||||
[VocabType.ADJEKTIV]: "Adjektiv",
|
||||
[VocabType.ADVERB]: "Adverb",
|
||||
};
|
||||
|
||||
const { currentVocab } = this.props;
|
||||
return <div>
|
||||
<Grid container direction="row">
|
||||
@ -139,11 +183,12 @@ const LevelPageWithRouter = withRouter(
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="headline" component="h2">
|
||||
{currentVocab.latin.grundform}
|
||||
{`${currentVocab.latin.grundform} (${vocabTypeToStr[currentVocab.type]})`}
|
||||
</Typography>
|
||||
<Typography gutterBottom variant="headline" component="h3">
|
||||
{currentVocab.german.join(", ")}
|
||||
</Typography>
|
||||
{this.vocabSpecificInformation(currentVocab)}
|
||||
{
|
||||
currentVocab.hint ? (
|
||||
<div style={{
|
||||
|
Reference in New Issue
Block a user