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

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

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