From 84e5c926df457bbb800a68721d65889c67208d99 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Thu, 15 Jun 2023 00:32:12 -0500 Subject: [PATCH] more vocab work --- src-tauri/src/kanji.rs | 3 +- src-tauri/src/vocab.rs | 69 ++++++++++++++++--- src/components/DashboardItemStats.module.scss | 3 +- src/components/KanjiDisplay.module.scss | 3 + src/components/VocabList.module.scss | 20 +++++- src/components/VocabList.tsx | 12 +++- src/lib/vocab.ts | 10 ++- src/panes/SrsReviewPane.module.scss | 9 ++- src/panes/SrsReviewPane.tsx | 2 +- 9 files changed, 111 insertions(+), 20 deletions(-) diff --git a/src-tauri/src/kanji.rs b/src-tauri/src/kanji.rs index d2b042d..92db128 100644 --- a/src-tauri/src/kanji.rs +++ b/src-tauri/src/kanji.rs @@ -151,8 +151,7 @@ pub async fn get_kanji( if let Some(character) = &opts.character { query = query.bind(character.clone()); } - query = query.bind(opts.skip); - query = query.bind(opts.how_many); + query = query.bind(opts.skip).bind(opts.how_many); let result = query .fetch_all(&kanji_db.0) diff --git a/src-tauri/src/vocab.rs b/src-tauri/src/vocab.rs index d6fa55e..8f1848c 100644 --- a/src-tauri/src/vocab.rs +++ b/src-tauri/src/vocab.rs @@ -5,14 +5,15 @@ use crate::kanji::KanjiDb; #[derive(Debug, Serialize, Deserialize)] pub struct Vocab { + id: u32, kanji_writing: String, kana_writing: String, furigana: String, is_common: bool, - jlpt_level: u32, - wanikani_level: u32, - frequency_rank: u32, + jlpt_level: Option, + wanikani_level: Option, + frequency_rank: Option, } #[derive(Debug, Derivative, Serialize, Deserialize)] @@ -20,6 +21,21 @@ pub struct Vocab { pub struct GetVocabOptions { #[serde(default)] kanji_id: Option, + + #[serde(default = "default_skip")] + #[derivative(Default(value = "0"))] + skip: u32, + + #[serde(default = "default_how_many")] + #[derivative(Default(value = "40"))] + how_many: u32, +} + +fn default_skip() -> u32 { + 0 +} +fn default_how_many() -> u32 { + 40 } #[derive(Debug, Serialize, Deserialize)] @@ -35,19 +51,55 @@ pub async fn get_vocab( ) -> Result { let opts = options.unwrap_or_default(); + let kanji_filter_clause = match opts.kanji_id { + Some(_) => format!( + r#" + JOIN KanjiEntityVocabEntity ON KanjiEntityVocabEntity.Vocabs_ID = VocabSet.ID + WHERE KanjiEntityVocabEntity.Kanji_ID = ? + "# + ), + None => String::new(), + }; let query_string = format!( r#" + SELECT * FROM VocabSet + {kanji_filter_clause} + LIMIT ?, ? "# ); + let mut query = sqlx::query(&query_string); + if let Some(kanji_id) = opts.kanji_id { + query = query.bind(kanji_id); + } + query = query.bind(opts.skip).bind(opts.how_many); + + let rows = query + .fetch_all(&kanji_db.0) + .await + .map_err(|err| err.to_string())?; + let vocab = rows + .into_iter() + .map(|row| Vocab { + id: row.get("ID"), + kanji_writing: row.get("KanjiWriting"), + kana_writing: row.get("KanaWriting"), + furigana: row.get("Furigana"), + is_common: row.get("IsCommon"), + + jlpt_level: row.get("JlptLevel"), + wanikani_level: row.get("WkLevel"), + frequency_rank: row.get("FrequencyRank"), + }) + .collect(); // Count query let count = { let kanji_filter_clause = match opts.kanji_id { Some(_) => format!( r#" - JOIN KanjiEntityVocabEntity ON KanjiEntityVocabEntity.Vocabs_ID = VocabSet.ID - WHERE KanjiEntityVocabEntity.Kanji_ID = ? - "# + JOIN KanjiEntityVocabEntity ON KanjiEntityVocabEntity.Vocabs_ID = VocabSet.ID + WHERE KanjiEntityVocabEntity.Kanji_ID = ? + "# ), None => String::new(), }; @@ -73,8 +125,5 @@ pub async fn get_vocab( row.get("Count") }; - Ok(GetVocabResult { - count, - vocab: vec![], - }) + Ok(GetVocabResult { count, vocab }) } diff --git a/src/components/DashboardItemStats.module.scss b/src/components/DashboardItemStats.module.scss index 10ef08d..ea74a28 100644 --- a/src/components/DashboardItemStats.module.scss +++ b/src/components/DashboardItemStats.module.scss @@ -20,7 +20,7 @@ .groupHeader { h1 { font-size: 2.5em; - text-shadow: 1px 1px black; + text-shadow: 1px 2px black; } } @@ -30,6 +30,7 @@ justify-content: space-evenly; h3 { + border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.25); } diff --git a/src/components/KanjiDisplay.module.scss b/src/components/KanjiDisplay.module.scss index 4357583..752f11d 100644 --- a/src/components/KanjiDisplay.module.scss +++ b/src/components/KanjiDisplay.module.scss @@ -82,6 +82,8 @@ $kanjiDisplaySize: 120px; .vocabSection { flex-grow: 1; + min-height: 0; + display: flex; flex-direction: column; gap: 8px; @@ -92,5 +94,6 @@ $kanjiDisplaySize: 120px; .vocabList { flex-grow: 1; + min-height: 0; } } diff --git a/src/components/VocabList.module.scss b/src/components/VocabList.module.scss index cd32d8d..6473b73 100644 --- a/src/components/VocabList.module.scss +++ b/src/components/VocabList.module.scss @@ -1,3 +1,5 @@ +$vocabColor: rgb(228, 251, 215); + .main { width: 100%; height: 100%; @@ -7,9 +9,25 @@ gap: 8px; } +.searchBar { + flex-shrink: 0; +} + .vocabList { flex-grow: 1; border: 1px solid lightgray; padding: 12px; - overflow-y: scroll; + overflow-y: auto; + + display: flex; + flex-direction: column; + gap: 12px; +} + +.vocabEntry { + padding: 8px; + background-color: $vocabColor; + border: 1px solid darken($vocabColor, 10%); + border-radius: 4px; + // box-shadow: 0 1px 2px darken($vocabColor, 50%); } diff --git a/src/components/VocabList.tsx b/src/components/VocabList.tsx index b8a19bb..8e64e2d 100644 --- a/src/components/VocabList.tsx +++ b/src/components/VocabList.tsx @@ -24,13 +24,21 @@ export default function VocabList({ className, kanjiId }: VocabListProps) { return (
- +
Displaying {data.vocab.length} of {data.count} results. ({kanjiId})
-
+
+ {data.vocab.map((vocab) => ( +
+ {vocab.kanji_writing} +
+ {vocab.kana_writing} +
+ ))} +
); } diff --git a/src/lib/vocab.ts b/src/lib/vocab.ts index 0baee90..9b9b767 100644 --- a/src/lib/vocab.ts +++ b/src/lib/vocab.ts @@ -3,4 +3,12 @@ export interface GetVocabResult { vocab: Vocab[]; } -export interface Vocab {} +export interface Vocab { + id: number; + kanji_writing: string; + kana_writing: string; + furigana: string; + + jlpt_level?: number; + wanikani_level?: number; +} diff --git a/src/panes/SrsReviewPane.module.scss b/src/panes/SrsReviewPane.module.scss index 6566f1b..27608bb 100644 --- a/src/panes/SrsReviewPane.module.scss +++ b/src/panes/SrsReviewPane.module.scss @@ -10,7 +10,7 @@ padding: 16px; } -.test-word { +.testWord { width: 100%; text-align: center; font-size: 4em; @@ -19,9 +19,11 @@ .needHelp { margin-top: 16px; + display: flex; summary { cursor: pointer; + margin-bottom: 8px; } } @@ -36,5 +38,8 @@ .possibleAnswer { border: 1px solid rgba(0, 0, 0, 0.25); font-size: 1.1em; - padding: 4px 8px; + padding: 4px 12px; + border-radius: 4px; + background-color: rgba(255, 255, 255, 0.25); + cursor: pointer; } diff --git a/src/panes/SrsReviewPane.tsx b/src/panes/SrsReviewPane.tsx index 2e8a500..3ca6e00 100644 --- a/src/panes/SrsReviewPane.tsx +++ b/src/panes/SrsReviewPane.tsx @@ -147,7 +147,7 @@ export function Component() { /> )} -

{nextItem.challenge}

+

{nextItem.challenge}