PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement a summary screen

Browse Source
This commit is contained in:
Alexander Polynomdivision
2018-09-12 19:23:00 +02:00
parent 2c9a2e88c7
commit 4e0506f607
8 changed files with 273 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/dashboard.tsx
View File

@@ -8,12 +8,15 @@ import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Scoreboard from "../components/scoreboard";
import SummaryTable from "../components/SummaryTable";
import { ILevel } from "../models/level";
import { ILearner } from "../models/learner";
import { IReviewMetadata } from "../models/review";
interface IProps {
nextLevel: () => ILevel;
lastReview: () => IReviewMetadata;
learners: ILearner[];
}
@@ -72,8 +75,11 @@ export default class Dashboard extends React.Component<IProps, IState> {
</Grid>
<Grid item lg={4}>
<Paper className="paper">
Some stuff
</Paper>
<Typography variant="title">
Letzte Wiederholung
</Typography>
<SummaryTable reviewMeta={this.props.lastReview()} />
</Paper>
</Grid>
</Grid>
</div>;

13
src/pages/level.tsx
View File

@@ -60,6 +60,15 @@ export default class LevelPage extends React.Component<IProps, IState> {
</ListItem>;
}
toReview = () => {
// Only go to the review if all vocabulary item have been looked at
if (this.props.levelVocab().length === this.state.lookedAt.length) {
this.setState({
toReview: true,
});
}
}
render() {
const { currentVocab } = this.state;
@@ -69,9 +78,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
<List>
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
{/* TODO*/}
<ListItem button onClick={() => this.setState({
toReview: true,
})}>
<ListItem button onClick={this.toReview}>
<ListItemText>
Zur Übung
</ListItemText>

116
src/pages/review.tsx
View File

@@ -1,12 +1,17 @@
import * as React from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Popover from "@material-ui/core/Popover";
import Paper from "@material-ui/core/Paper";
import { IVocab, ReviewMode } from "../models/vocab";
import { Redirect } from "react-router-dom";
import { IVocab, ReviewMode, VocabType } from "../models/vocab";
interface IProps {
levelId: number;
@@ -16,25 +21,38 @@ interface IProps {
interface IState {
input: string;
current: number;
toSummary: boolean;
popoverOpen: boolean;
popoverText: string;
popoverColor: string;
}
export default class ReviewPage extends React.Component<IProps> {
export default class ReviewPage extends React.Component<IProps, IState> {
private vocab: IVocab[] = [];
// Used for positioning the popover
private buttonRef: HTMLButtonElement;
constructor(props: any) {
super(props);
this.state = {
input: "",
current: 0,
toSummary: false,
popoverOpen: false,
popoverText: "",
popoverColor: "red",
};
const { vocabByLevel, levelId } = this.props;
this.vocab = vocabByLevel(levelId);
this.currentVocab = this.currentVocab.bind(this);
}
currentVocab() {
currentVocab = () => {
return this.vocab[this.state.current];
}
@@ -43,45 +61,91 @@ export default class ReviewPage extends React.Component<IProps> {
// Check if the user's answer was correct
// TODO: Levensthein-Distance?
if (this.state.input === current.german) {
if (this.state.input.toLowerCase() === current.german.toLowerCase()) {
// TODO: Show it's correct
console.log("Hell yeah");
// Show the next vocab word
if (this.state.current + 1 >= this.vocab.length) {
// TODO: Go to a summary screen
// TODO: Set some data that the summary screen will show
this.setState({
toSummary: true,
});
} else {
// Increase the vocab
this.setState({
current: this.state.current + 1,
input: "",
});
}
} else {
// TODO: Show it's wrong
console.log("Hell no");
this.setState({
popoverOpen: true,
popoverText: "Das war nicht richtig",
popoverColor: "red",
// TODO: Or maybe don't reset the text
input: "",
});
}
// TODO: Show a snackbar for showing the updated score
// TODO(?): Show a snackbar for showing the updated score
}
render() {
return <div style={{ margin: 12 }}>
return <div>
{
this.state.toSummary ? (
<Redirect to="/review/summary" />
) : undefined
}
<Grid container justify="center">
<Grid item>
<Card>
<Grid container direction="column">
<h1>
{this.vocab[this.state.current].latin}
</h1>
<TextField
value={this.state.input}
onChange={(ev) => this.setState({
input: ev.target.value,
})} />
<Button onClick={this.checkInput}>
Prüfen
<CardContent>
<Grid container direction="column">
<Typography variant="display2">
{this.currentVocab().latin}
</Typography>
<TextField
margin="normal"
fullWidth={true}
value={this.state.input}
onChange={(ev) => this.setState({
input: ev.target.value,
})}
onKeyPress={(ev) => {
// Allow checking of the answer by pressing Enter
if (ev.key === "Enter")
this.checkInput();
}} />
<Popover
open={this.state.popoverOpen}
anchorOrigin={{
vertical: "center",
horizontal: "left"
}}
transformOrigin={{
vertical: "bottom",
horizontal: "left"
}}
anchorEl={this.buttonRef}
onClose={() => this.setState({
popoverOpen: false,
})}
PaperProps={{
style: {
backgroundColor: this.state.popoverColor,
padding: 10,
color: "white"
}
}}>
<Typography variant="button" color="inherit">
{this.state.popoverText}
</Typography>
</Popover>
<Button onClick={this.checkInput} buttonRef={node => this.buttonRef = node}>
Prüfen
</Button>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>

60
src/pages/summary.tsx Normal file
View File

@@ -0,0 +1,60 @@
import * as React from "react";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import SummaryTable from "../components/SummaryTable";
import { Redirect } from "react-router-dom";
import { IReviewMetadata } from "../models/review";
interface IProps {
reviewMeta: () => IReviewMetadata;
}
interface IState {
toDashboard: boolean;
}
export default class SummaryPage extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
toDashboard: false,
};
}
render() {
return <div>
{
this.state.toDashboard ? (
<Redirect to="/dashboard" />
) : undefined
}
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Paper className="paper">
<Typography variant="title">Zusammenfassung</Typography>
<Grid container direction="column">
<SummaryTable reviewMeta={this.props.reviewMeta} />
<Button onClick={() => this.setState({
toDashboard: true,
})}>
Zum Dashboard
</Button>
</Grid>
</Paper>
</Grid>
</Grid>
</div>;
}
}