Skip to content

Commit

Permalink
feat(ui): move definition and word info to side
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrewingWeasel
BrewingWeasel committed Jan 17, 2024
1 parent 2ed4710 commit e4cf8ff
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 139 deletions.
273 changes: 137 additions & 136 deletions src-ui/src/reader.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,162 +126,163 @@ pub fn ReaderView() -> impl IntoView {

</div>
<br/>
{move || {
if selected_word().is_some() {
view! {
<div class="wordinfo">
<input
class="selectedword"
type="text"
on:change=move |ev| {
conts
.update(|v| {
v
.as_mut()
.unwrap()
.get_mut(selected_word().unwrap())
.unwrap()
.lemma = event_target_value(&ev);
});
definition.refetch();
}
<div class="wordpanel">
{move || {
if selected_word().is_some() {
view! {
<div class="wordinfo">
<input
class="selectedword"
type="text"
on:change=move |ev| {
conts
.update(|v| {
v
.as_mut()
.unwrap()
.get_mut(selected_word().unwrap())
.unwrap()
.lemma = event_target_value(&ev);
});
definition.refetch();
}

prop:value=move || {
selected_word
prop:value=move || {
selected_word
.get()
.and_then(|i| {
let words = conts.get().unwrap();
words.get(i).cloned()
})
.map(|v| v.lemma)
}
/>

</div>

<div class="grammarinfo">
{move || {
conts
.get()
.and_then(|i| {
let words = conts.get().unwrap();
words.get(i).cloned()
.unwrap()[selected_word().unwrap()]
.morph
.iter()
.map(|(k, v)| {
view! {
<div class="grammarfeature">
<span class=k>{k}</span>
<span class="seperator">:</span>
<span class=v>{v}</span>
</div>
}
})
.map(|v| v.lemma)
}
/>
.collect_view()
}}

</div>

<div class="grammarinfo">
{move || {
conts
.get()
.unwrap()[selected_word().unwrap()]
.morph
.iter()
.map(|(k, v)| {
</div>
<div class="ratingchanger">
{(0..5)
.map(|level| {
view! {
<div class="grammarfeature">
<span class=k>{k}</span>
<span class="seperator">:</span>
<span class=v>{v}</span>
</div>
<button
on:click=move |_| {
spawn_local(async move {
update_word_knowledge(
&conts().unwrap()[selected_word().unwrap()].lemma,
level,
)
.await;
conts
.update(|v| {
v
.as_mut()
.unwrap()
.get_mut(selected_word().unwrap())
.unwrap()
.rating = level;
});
});
}

class=format!("ratingbutton rating-{level}")
>
{level + 1}
</button>
}
})
.collect_view()
}}

</div>
<div class="ratingchanger">
{(0..5)
.map(|level| {
view! {
.collect_view()}
</div>
<hr/>
}
.into_view()
} else {
view! {}.into_view()
}
}}
<Suspense fallback=move || {
view! { <p>"Loading..."</p> }
}>
{definition
.get()
.map(|data| {
data.iter()
.map(|d| {
match d {
SakinyjeResult::Ok(s) => {
view! {
<div class="definition" inner_html=s></div>
<br/>
}
.into_view()
}
SakinyjeResult::Err(v) => {
view! {
<div class="error">Err: {v}</div>
<br/>
}
.into_view()
}
}
})
.collect_view()
})}
{move || {
selected_word()
.map(|i| {
view! {
<div class="export">
<button
on:click=move |_| {
let cur_conts = conts().unwrap();
let lemma = cur_conts[i].lemma.clone();
console_log(&lemma);
spawn_local(async move {
update_word_knowledge(
&conts().unwrap()[selected_word().unwrap()].lemma,
level,
export_card(
&sentence(),
&lemma,
&definition()
.unwrap()
.into_iter()
.filter_map(|d| {
Into::<Result<String, String>>::into(d).ok()
})
.collect(),
)
.await;
conts
.update(|v| {
v
.as_mut()
.unwrap()
.get_mut(selected_word().unwrap())
.unwrap()
.rating = level;
});
});
}

class=format!("ratingbutton rating-{level}")
class="exportbutton"
>
{level + 1}
export to anki
</button>
}
})
.collect_view()}
</div>
<hr/>
}
.into_view()
} else {
view! {}.into_view()
}
}}

<Suspense fallback=move || {
view! { <p>"Loading..."</p> }
}>
{definition
.get()
.map(|data| {
data.iter()
.map(|d| {
match d {
SakinyjeResult::Ok(s) => {
view! {
<div class="definition" inner_html=s></div>
<br/>
}
.into_view()
}
SakinyjeResult::Err(v) => {
view! {
<div class="error">Err: {v}</div>
<br/>
}
.into_view()
}
</div>
}
})
.collect_view()
})}
{move || {
selected_word()
.map(|i| {
view! {
<div class="export">
<button
on:click=move |_| {
let cur_conts = conts().unwrap();
let lemma = cur_conts[i].lemma.clone();
console_log(&lemma);
spawn_local(async move {
export_card(
&sentence(),
&lemma,
&definition()
.unwrap()
.into_iter()
.filter_map(|d| {
Into::<Result<String, String>>::into(d).ok()
})
.collect(),
)
.await;
});
}
}}

class="exportbutton"
>
export to anki
</button>
</div>
}
})
}}

</Suspense>
</Suspense>
</div>
}
}

Expand Down
32 changes: 29 additions & 3 deletions src-ui/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,20 @@ hr {
width: 93%;
}


/* READER AREA */
.wordpanel {
height: 100%;
width: 460px;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
padding: 20px;
background-color: #2a273f;
}

/* # SETTINGS AREA */

.settings label {
Expand Down Expand Up @@ -157,13 +171,17 @@ select {
/* GENERAL STUFF */


.sentence, .wordinfo, .definition, .export, .grammarinfo {
.sentence, .wordinfo, .definition, .grammarinfo {
display: flex;
justify-content: center;
}

.sentence, .input {
margin-right: 460px;
}

.grammarinfo {
font-size: 18px;
font-size: 12px;
font-style: italic;
color: #908caa;
}
Expand Down Expand Up @@ -212,13 +230,21 @@ select {
border: none;
text-align: center;
text-decoration: none;
width: 15%;
width: 50%;
transition-duration: .2s;
padding: 10px;
border-radius: 6px;
border-width: 0;
}

.export {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding-bottom: 50px;
}

.exportbutton:hover {
Expand Down

0 comments on commit e4cf8ff

Please sign in to comment.