more formatting on the review page
This commit is contained in:
parent
b34bfee629
commit
fb9d068bd0
4 changed files with 111 additions and 33 deletions
|
@ -122,6 +122,8 @@ fn default_batch_size() -> u32 {
|
|||
|
||||
#[derive(Debug, Serialize, Deserialize)]
|
||||
pub struct SrsEntry {
|
||||
current_grade: u32,
|
||||
meanings: Vec<String>,
|
||||
associated_kanji: String,
|
||||
}
|
||||
|
||||
|
@ -136,6 +138,7 @@ pub async fn generate_review_batch(
|
|||
r#"
|
||||
SELECT * FROM SrsEntrySet
|
||||
WHERE AssociatedKanji IS NOT NULL
|
||||
AND CurrentGrade < 8
|
||||
ORDER BY RANDOM()
|
||||
LIMIT ?
|
||||
"#,
|
||||
|
@ -147,8 +150,14 @@ pub async fn generate_review_batch(
|
|||
|
||||
let result = result
|
||||
.into_iter()
|
||||
.map(|row| SrsEntry {
|
||||
associated_kanji: row.get("AssociatedKanji"),
|
||||
.map(|row| {
|
||||
let meanings: String = row.get("Meanings");
|
||||
let meanings = meanings.split(",").map(|s| s.to_owned()).collect();
|
||||
SrsEntry {
|
||||
current_grade: row.get("CurrentGrade"),
|
||||
meanings,
|
||||
associated_kanji: row.get("AssociatedKanji"),
|
||||
}
|
||||
})
|
||||
.collect();
|
||||
|
||||
|
|
|
@ -42,12 +42,13 @@ $navLinkColor: hsl(203, 91%, 91%);
|
|||
-webkit-user-drag: none;
|
||||
|
||||
&:not(.link-active):hover {
|
||||
border-top-color: transparent;
|
||||
background-color: #f4f4f4;
|
||||
border-top-color: #f4f4f4;
|
||||
background: linear-gradient(#f4f4f4, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.link-active {
|
||||
border-top-color: $navLinkAccentColor;
|
||||
background-color: $navLinkColor;
|
||||
// background-color: $navLinkColor;
|
||||
background: linear-gradient($navLinkColor, transparent);
|
||||
}
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
.main {
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-top: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: lighten(#0c9, 55%);
|
||||
background-color: lighten(#393, 45%);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
@ -17,6 +18,5 @@
|
|||
}
|
||||
|
||||
.input-box {
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -1,9 +1,26 @@
|
|||
import { Button, Container, Input, Progress, Spinner } from "@chakra-ui/react";
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputRightElement,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Progress,
|
||||
Spinner,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import styles from "./SrsReviewPane.module.scss";
|
||||
import { useEffect, useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/tauri";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowBackIcon } from "@chakra-ui/icons";
|
||||
import { ArrowBackIcon, CheckIcon } from "@chakra-ui/icons";
|
||||
import { FormEvent } from "react";
|
||||
|
||||
export interface SrsEntry {
|
||||
associated_kanji: string;
|
||||
|
@ -11,20 +28,38 @@ export interface SrsEntry {
|
|||
|
||||
const startingSize = 10;
|
||||
|
||||
function Done() {
|
||||
return (
|
||||
<>
|
||||
<p>oh Shit you're done!!! poggerse</p>
|
||||
<Link to="/">
|
||||
<Button colorScheme="blue">
|
||||
<ArrowBackIcon /> Return
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SrsReviewPane() {
|
||||
const [reviewBatch, setReviewBatch] = useState<SrsEntry[] | null>(null);
|
||||
const [currentAnswer, setCurrentAnswer] = useState("");
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
useEffect(() => {
|
||||
if (!reviewBatch) {
|
||||
invoke<SrsEntry[]>("generate_review_batch").then((result) => {
|
||||
console.log(result);
|
||||
setReviewBatch(result);
|
||||
});
|
||||
invoke<SrsEntry[]>("generate_review_batch")
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
setReviewBatch(result);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("fuck!", err);
|
||||
});
|
||||
}
|
||||
}, [reviewBatch, setReviewBatch]);
|
||||
|
||||
const formSubmit = (evt) => {
|
||||
const formSubmit = (evt: FormEvent) => {
|
||||
evt.preventDefault();
|
||||
if (reviewBatch == null) return;
|
||||
|
||||
|
@ -39,17 +74,7 @@ export default function SrsReviewPane() {
|
|||
const renderInside = () => {
|
||||
if (!reviewBatch) return <Spinner />;
|
||||
|
||||
if (reviewBatch.length == 0)
|
||||
return (
|
||||
<>
|
||||
<p>oh Shit you're done!!! poggerse</p>
|
||||
<Link to="/">
|
||||
<Button colorScheme="blue">
|
||||
<ArrowBackIcon /> Return
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
if (reviewBatch.length == 0) return <Done />;
|
||||
|
||||
const progressValue = startingSize - reviewBatch.length;
|
||||
const nextItem = reviewBatch[0];
|
||||
|
@ -66,13 +91,27 @@ export default function SrsReviewPane() {
|
|||
|
||||
<h1 className={styles["test-word"]}>{nextItem.associated_kanji}</h1>
|
||||
|
||||
<details>
|
||||
<summary>Debug</summary>
|
||||
<pre>{JSON.stringify(nextItem, null, 2)}</pre>
|
||||
</details>
|
||||
|
||||
<form onSubmit={formSubmit}>
|
||||
<Input
|
||||
className={styles["input-box"]}
|
||||
placeholder="Enter your answer..."
|
||||
value={currentAnswer}
|
||||
onChange={(evt) => setCurrentAnswer(evt.target.value)}
|
||||
/>
|
||||
<InputGroup>
|
||||
<Input
|
||||
autoFocus
|
||||
className={styles["input-box"]}
|
||||
placeholder="Enter your answer..."
|
||||
value={currentAnswer}
|
||||
spellCheck={false}
|
||||
backgroundColor={"white"}
|
||||
onChange={(evt) => setCurrentAnswer(evt.target.value)}
|
||||
/>
|
||||
|
||||
<InputRightElement>
|
||||
<CheckIcon color="green.500" />
|
||||
</InputRightElement>
|
||||
</InputGroup>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
|
@ -80,7 +119,36 @@ export default function SrsReviewPane() {
|
|||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<Container className={styles.container}>{renderInside()}</Container>
|
||||
<Container>
|
||||
<Button onClick={onOpen}>
|
||||
<ArrowBackIcon />
|
||||
Back
|
||||
</Button>
|
||||
<div className={styles.container}>{renderInside()}</div>
|
||||
</Container>
|
||||
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Confirm Quit</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
Are you sure you want to go back? Your current progress into this batch will not be
|
||||
saved.
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<Button variant="ghost" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Link to="/">
|
||||
<Button colorScheme="red" mr={3}>
|
||||
Close
|
||||
</Button>
|
||||
</Link>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue