feat: Display all vocabulary data

This commit is contained in:
Alexander Polynomdivision 2018-10-02 13:10:33 +02:00
parent 18fb797fc9
commit 2b0d472754
2 changed files with 49 additions and 4 deletions

View File

@ -26,8 +26,8 @@ export interface IVerbData {
export interface IAdjektivData { export interface IAdjektivData {
grundform: string; grundform: string;
nominativ_a: string; endung_f: string;
nominativ_b: string; endung_n: string;
}; };
export interface IVocab { export interface IVocab {

View File

@ -12,7 +12,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { IVocab } from "../models/vocab"; import { IVocab, VocabType, INomenData, IVerbData, IAdjektivData } from "../models/vocab";
interface IProps { interface IProps {
id: string; 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() { render() {
if (this.props.loading) { if (this.props.loading) {
return <div> return <div>
@ -119,6 +156,13 @@ const LevelPageWithRouter = withRouter(
</div>; </div>;
} }
const vocabTypeToStr = {
[VocabType.NOMEN]: "Nomen",
[VocabType.VERB]: "Verb",
[VocabType.ADJEKTIV]: "Adjektiv",
[VocabType.ADVERB]: "Adverb",
};
const { currentVocab } = this.props; const { currentVocab } = this.props;
return <div> return <div>
<Grid container direction="row"> <Grid container direction="row">
@ -139,11 +183,12 @@ const LevelPageWithRouter = withRouter(
<Card> <Card>
<CardContent> <CardContent>
<Typography gutterBottom variant="headline" component="h2"> <Typography gutterBottom variant="headline" component="h2">
{currentVocab.latin.grundform} {`${currentVocab.latin.grundform} (${vocabTypeToStr[currentVocab.type]})`}
</Typography> </Typography>
<Typography gutterBottom variant="headline" component="h3"> <Typography gutterBottom variant="headline" component="h3">
{currentVocab.german.join(", ")} {currentVocab.german.join(", ")}
</Typography> </Typography>
{this.vocabSpecificInformation(currentVocab)}
{ {
currentVocab.hint ? ( currentVocab.hint ? (
<div style={{ <div style={{