From 2b0d472754f7959f75059e1384a08013a4833268 Mon Sep 17 00:00:00 2001
From: Alexander Polynomdivision <digitalmail555@googlemail.com>
Date: Tue, 2 Oct 2018 13:10:33 +0200
Subject: [PATCH] feat: Display all vocabulary data

---
 frontend/src/models/vocab.ts |  4 +--
 frontend/src/pages/level.tsx | 49 ++++++++++++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/frontend/src/models/vocab.ts b/frontend/src/models/vocab.ts
index 3e12e85..3339912 100644
--- a/frontend/src/models/vocab.ts
+++ b/frontend/src/models/vocab.ts
@@ -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 {
diff --git a/frontend/src/pages/level.tsx b/frontend/src/pages/level.tsx
index 218acdd..4b0f14e 100644
--- a/frontend/src/pages/level.tsx
+++ b/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={{