129 lines
5.2 KiB
TypeScript
129 lines
5.2 KiB
TypeScript
import * as React from "react";
|
|
|
|
import List from "@material-ui/core/List";
|
|
import ListItem from "@material-ui/core/ListItem";
|
|
import ListItemText from "@material-ui/core/ListItemText";
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import Card from "@material-ui/core/Card";
|
|
import CardContent from "@material-ui/core/CardContent";
|
|
|
|
import { IVocab } from "../models/vocab";
|
|
|
|
interface IProps {
|
|
id: string;
|
|
|
|
levelVocab: (id: string) => IVocab[];
|
|
};
|
|
|
|
interface IState {
|
|
currentVocab: IVocab;
|
|
lookedAt: number[];
|
|
};
|
|
|
|
export default class LevelPage extends React.Component<IProps, IState> {
|
|
private uid = 0;
|
|
|
|
constructor(props: any) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
currentVocab: this.props.levelVocab(this.props.id)[0],
|
|
lookedAt: [0],
|
|
};
|
|
}
|
|
|
|
genUID = (): string => {
|
|
return "LEVELPAGE" + this.uid++;
|
|
}
|
|
|
|
renderVocabListItem = (vocab: IVocab): any => {
|
|
// Check if the vocab was already looked at
|
|
const lookedAt = this.state.lookedAt.find((el) => el === vocab.id) || vocab.id === 0;
|
|
|
|
// TODO: Actually update the "Vocab View" when clicking
|
|
return <ListItem button key={this.genUID()} onClick={() => {
|
|
// Prevent the user from using too much memory by always clicking on the elements
|
|
// Show the clicked at vocab word
|
|
this.setState({
|
|
currentVocab: vocab,
|
|
lookedAt: this.state.lookedAt.concat(vocab.id),
|
|
});
|
|
}}>
|
|
<ListItemText>
|
|
{`${vocab.latin} ${lookedAt ? "✔" : ""}`}
|
|
</ListItemText>
|
|
</ListItem>;
|
|
}
|
|
|
|
render() {
|
|
const { currentVocab } = this.state;
|
|
|
|
return <div>
|
|
<Grid container direction="row">
|
|
<Grid item xs={3}>
|
|
<List>
|
|
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
|
|
{/* TODO*/}
|
|
<ListItem button onClick={() => alert("Übung")}>
|
|
<ListItemText>
|
|
Zur Übung
|
|
</ListItemText>
|
|
</ListItem>
|
|
</List>
|
|
</Grid>
|
|
<Grid item lg={7} xs={9}>
|
|
<Grid container direction="column">
|
|
<Grid item style={{ margin: 12 }}>
|
|
<Card>
|
|
<CardContent>
|
|
<Typography gutterBottom variant="headline" component="h2">
|
|
{currentVocab.latin}
|
|
</Typography>
|
|
<Typography gutterBottom variant="headline" component="h3">
|
|
{currentVocab.german}
|
|
</Typography>
|
|
{
|
|
currentVocab.hint ? (
|
|
<div style={{
|
|
border: "dashed",
|
|
borderColor: "red",
|
|
padding: 12,
|
|
}}>
|
|
<Typography variant="subheading" component="p">
|
|
<b>Tipp:</b>
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
{currentVocab.hint}
|
|
</Typography>
|
|
</div>
|
|
) : undefined
|
|
}
|
|
{
|
|
currentVocab.mnemonic ? (
|
|
<div style={{
|
|
border: "dashed",
|
|
borderColor: "#f1c40f",
|
|
marginTop: 12,
|
|
padding: 12,
|
|
}}>
|
|
<Typography variant="subheading" component="p">
|
|
<b>Eselsbrücke:</b>
|
|
</Typography>
|
|
<Typography variant="body2">
|
|
{currentVocab.mnemonic}
|
|
</Typography>
|
|
</div>
|
|
) : undefined
|
|
}
|
|
</CardContent>
|
|
{/*TODO: Maybe "next" and "prev" buttons?*/}
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</div>;
|
|
}
|
|
};
|