ElnuDev/dyesub-tool
1
0
Fork 0
generated from ElnuDev/rust-project
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: ElnuDev:77e31d9ffff8dae008dd75b7fc455d22cc05dfa7
Branches Tags
ElnuDev:main
...
compare: ElnuDev:ff53f33d565655b2427bac693ea0727b591fc4fb
Branches Tags
ElnuDev:main

3 commits
77e31d9fff ... ff53f33d56

Author SHA1 Message Date
ElnuDev
ff53f33d56 cargo fmt 2023-08-21 15:12:36 -07:00
ElnuDev
127639355f Remove load button 2023-08-21 15:11:08 -07:00
ElnuDev
e58fca9fa6 Add close button to result component 2023-08-21 15:05:21 -07:00
2 changed files with 35 additions and 22 deletions
Show stats Expand all files Collapse all files

1
dyesub-tool/index.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dyesub-tool</title>
<link data-trunk rel="css" href="missing.min.css"> <!-- 1.0.9 -->
<style>:root { cursor: inherit } button, input[type="submit"] { cursor: pointer }</style>
</head>
<body>
<main>

56
dyesub-tool/src/main.rs
View file

@ -3,12 +3,12 @@
mod render;
pub mod svg;
use class_list::class_list;
use derive_more::From;
use leptos::{ev::SubmitEvent, html::Input, *};
use strum_macros::IntoStaticStr;
use wasm_bindgen::{JsCast, JsValue};
use web_sys::File;
use class_list::class_list;
#[derive(Clone)]
struct ResultMessageData {
@ -35,12 +35,24 @@ enum Colorway {
#[component]
fn ResultMessage(cx: Scope, message: ReadSignal<Option<ResultMessageData>>) -> impl IntoView {
move || message().map(|ResultMessageData { title, message, colorway }| view! { cx,
<div class=class_list!["box", <Colorway as Into<&str>>::into(colorway)]>
<h3>{title}</h3>
<p>{message}</p>
</div>
})
let (open, set_open) = create_signal(cx, true);
create_effect(cx, move |_| {
message.track();
set_open(true);
});
move || {
view! { cx,
<Show when=move || open() fallback=|_| ()>
{move || message().map(|ResultMessageData { title, message, colorway }| view! { cx,
<div class=class_list!["box", <Colorway as Into<&str>>::into(colorway)] style="position: relative">
<strong class="block titlebar">{title}</strong>
<button class="iconbutton" on:click=move |_| set_open(false) style="position: absolute; bottom: 0.5em; right: 0.5em">"×"</button>
<p>{message}</p>
</div>
})}
</Show>
}
}
}
#[derive(From, IntoStaticStr)]
@ -94,8 +106,7 @@ fn KeyboardFromFile(
let file_input = create_node_ref::<Input>(cx);
let (file, set_file) = create_signal(cx, Option::<File>::None);
let (result_message, set_result_message) = create_signal(cx, Option::<ResultMessageData>::None);
let on_submit = move |e: SubmitEvent| {
e.prevent_default();
let on_submit = move || {
spawn_local(async move {
match read_kle_from_file(&file).await {
Ok(keyboard) => {
@ -109,34 +120,35 @@ fn KeyboardFromFile(
}));
set_keyboard(Some(keyboard));
}
Err(err) => set_result_message(Some(ResultMessageData {
message: view! { cx,
{
err.to_string()
Err(err) => {
set_result_message(Some(ResultMessageData {
message: view! { cx,
{
err.to_string()
}
}
}
.into_view(cx),
title: <ReadKleError as Into<&str>>::into(err).to_string(),
colorway: Colorway::Bad,
})),
.into_view(cx),
title: <ReadKleError as Into<&str>>::into(err).to_string(),
colorway: Colorway::Bad,
}));
file_input().unwrap().set_value("");
}
}
});
};
view! { cx,
<h3>"Load KLE JSON from file"</h3>
<ResultMessage message=result_message />
<form class="f-row align-items:center" on:submit=on_submit>
<form class="f-row align-items:center">
<input
type="file"
accept="application/json"
node_ref=file_input
on:change=move |_| {
set_file(file_input().unwrap().files().map(|files| files.get(0)).flatten());
on_submit();
}
/>
<Show when=move || file().is_some() fallback=move |_| {}>
<input type="submit" value="Load" />
</Show>
</form>
}
}