feat: Display all vocabulary data

frontend/src/models/vocab.ts

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

frontend/src/pages/level.tsx

@@ -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={{