mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
clean up some examples, ensuring stuff works
This commit is contained in:
parent
2995647e99
commit
bb5ecd779f
5 changed files with 59 additions and 109 deletions
|
@ -7,6 +7,7 @@ fn main() {
|
|||
}
|
||||
|
||||
fn app() -> Element {
|
||||
let mut loading = use_signal(|| "".to_string());
|
||||
let mut api = use_signal(|| "".to_string());
|
||||
let mut prompt = use_signal(|| "".to_string());
|
||||
let mut n_image = use_signal(|| 1.to_string());
|
||||
|
@ -14,7 +15,6 @@ fn app() -> Element {
|
|||
created: 0,
|
||||
data: Vec::new(),
|
||||
});
|
||||
let mut loading = use_signal(|| "".to_string());
|
||||
|
||||
let mut generate_images = use_resource(move || async move {
|
||||
let api_key = api.peek().clone();
|
||||
|
@ -26,79 +26,54 @@ fn app() -> Element {
|
|||
}
|
||||
|
||||
loading.set("is-loading".to_string());
|
||||
let images = request(api_key, prompt, number_of_images).await;
|
||||
match images {
|
||||
Ok(imgz) => {
|
||||
image.set(imgz);
|
||||
}
|
||||
Err(e) => {
|
||||
println!("Error: {:?}", e);
|
||||
}
|
||||
|
||||
match request(api_key, prompt, number_of_images).await {
|
||||
Ok(imgz) => image.set(imgz),
|
||||
Err(e) => println!("Error: {:?}", e),
|
||||
}
|
||||
|
||||
loading.set("".to_string());
|
||||
});
|
||||
|
||||
rsx! {
|
||||
head {
|
||||
link {
|
||||
rel: "stylesheet",
|
||||
href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css",
|
||||
}
|
||||
}
|
||||
head { link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" } }
|
||||
div { class: "container",
|
||||
div { class: "columns",
|
||||
div { class: "column",
|
||||
input { class: "input is-primary mt-4",
|
||||
value:"{api}",
|
||||
r#type: "text",
|
||||
placeholder: "API",
|
||||
oninput: move |evt| {
|
||||
api.set(evt.value().clone());
|
||||
},
|
||||
}
|
||||
|
||||
input { class: "input is-primary mt-4",
|
||||
placeholder: "MAX 1000 Dgts",
|
||||
r#type: "text",
|
||||
value:"{prompt}",
|
||||
oninput: move |evt| {
|
||||
prompt.set(evt.value().clone());
|
||||
},
|
||||
}
|
||||
|
||||
input { class: "input is-primary mt-4",
|
||||
r#type: "number",
|
||||
min:"1",
|
||||
max:"10",
|
||||
value:"{n_image}",
|
||||
oninput: move |evt| {
|
||||
n_image.set(evt.value().clone());
|
||||
},
|
||||
div { class: "columns",
|
||||
div { class: "column",
|
||||
input { class: "input is-primary mt-4",
|
||||
value: "{api}",
|
||||
r#type: "text",
|
||||
placeholder: "API",
|
||||
oninput: move |evt| api.set(evt.value()),
|
||||
}
|
||||
input { class: "input is-primary mt-4",
|
||||
placeholder: "MAX 1000 Dgts",
|
||||
r#type: "text",
|
||||
value:"{prompt}",
|
||||
oninput: move |evt| prompt.set(evt.value())
|
||||
}
|
||||
input { class: "input is-primary mt-4",
|
||||
r#type: "number",
|
||||
min:"1",
|
||||
max:"10",
|
||||
value:"{n_image}",
|
||||
oninput: move |evt| n_image.set(evt.value()),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button { class: "button is-primary {loading}",
|
||||
onclick: move |_| {
|
||||
generate_images.restart();
|
||||
},
|
||||
"Generate image"
|
||||
}
|
||||
br {
|
||||
}
|
||||
}
|
||||
{image.read().data.iter().map(|image| {
|
||||
rsx!(
|
||||
button { class: "button is-primary {loading}",
|
||||
onclick: move |_| generate_images.restart(),
|
||||
"Generate image"
|
||||
}
|
||||
br {}
|
||||
for image in image.read().data.as_slice() {
|
||||
section { class: "is-flex",
|
||||
div { class: "container is-fluid",
|
||||
div { class: "container has-text-centered",
|
||||
div { class: "is-justify-content-center",
|
||||
div { class: "level",
|
||||
div { class: "level-item",
|
||||
figure { class: "image",
|
||||
img {
|
||||
alt: "",
|
||||
src: "{image.url}",
|
||||
div { class: "container is-fluid",
|
||||
div { class: "container has-text-centered",
|
||||
div { class: "is-justify-content-center",
|
||||
div { class: "level",
|
||||
div { class: "level-item",
|
||||
figure { class: "image", img { alt: "", src: "{image.url}", } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -107,9 +82,7 @@ fn app() -> Element {
|
|||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
} }
|
||||
}
|
||||
}
|
||||
async fn request(api: String, prompt: String, n_image: String) -> Result<ImageResponse, Error> {
|
||||
let client = reqwest::Client::new();
|
||||
|
|
|
@ -131,7 +131,7 @@ fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
|
|||
placeholder: "What needs to be done?",
|
||||
value: "{draft}",
|
||||
autofocus: "true",
|
||||
oninput: move |evt| draft.set(evt.value().clone()),
|
||||
oninput: move |evt| draft.set(evt.value()),
|
||||
onkeydown,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,18 +16,14 @@ fn app() -> Element {
|
|||
id: 2950159,
|
||||
});
|
||||
|
||||
let current_weather =
|
||||
use_resource(move || async move { get_weather(&country.read().clone()).await });
|
||||
let current_weather = use_resource(move || async move { get_weather(&country()).await });
|
||||
|
||||
rsx! {
|
||||
link {
|
||||
rel: "stylesheet",
|
||||
href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css"
|
||||
}
|
||||
link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
|
||||
div { class: "mx-auto p-4 bg-gray-100 h-screen flex justify-center",
|
||||
div { class: "flex items-center justify-center flex-row",
|
||||
div { class: "flex items-start justify-center flex-row",
|
||||
SearchBox { country: country }
|
||||
SearchBox { country }
|
||||
div { class: "flex flex-wrap w-full px-2",
|
||||
div { class: "bg-gray-900 text-white relative min-w-0 break-words rounded-lg overflow-hidden shadow-sm mb-4 w-full bg-white dark:bg-gray-600",
|
||||
div { class: "px-6 py-6 relative",
|
||||
|
@ -36,14 +32,9 @@ fn app() -> Element {
|
|||
country: country.read().clone(),
|
||||
weather: weather.clone(),
|
||||
}
|
||||
Forecast {
|
||||
weather: weather.clone(),
|
||||
}
|
||||
|
||||
Forecast { weather: weather.clone() }
|
||||
} else {
|
||||
p {
|
||||
"Loading.."
|
||||
}
|
||||
p { "Loading.." }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -93,6 +84,7 @@ fn Forecast(weather: WeatherResponse) -> Element {
|
|||
let past_tomorrow = (weather.daily.temperature_2m_max.get(2).unwrap()
|
||||
+ weather.daily.temperature_2m_max.get(2).unwrap())
|
||||
/ 2.0;
|
||||
|
||||
rsx! {
|
||||
div { class: "px-6 pt-4 relative",
|
||||
div { class: "w-full h-px bg-gray-100 mb-4" }
|
||||
|
@ -119,10 +111,7 @@ fn Forecast(weather: WeatherResponse) -> Element {
|
|||
fn SearchBox(mut country: Signal<WeatherLocation>) -> Element {
|
||||
let mut input = use_signal(|| "".to_string());
|
||||
|
||||
let locations = use_resource(move || async move {
|
||||
let current_location = input.read().clone();
|
||||
get_locations(¤t_location).await
|
||||
});
|
||||
let locations = use_resource(move || async move { get_locations(&input()).await });
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
|
@ -150,27 +139,17 @@ fn SearchBox(mut country: Signal<WeatherLocation>) -> Element {
|
|||
}
|
||||
}
|
||||
ul { class: "bg-white border border-gray-100 w-full mt-2 max-h-72 overflow-auto",
|
||||
{
|
||||
if let Some(Ok(locs)) = locations.read().as_ref() {
|
||||
rsx! {
|
||||
{
|
||||
locs.iter().cloned().map(move |wl| {
|
||||
rsx! {
|
||||
li { class: "pl-8 pr-2 py-1 border-b-2 border-gray-100 relative cursor-pointer hover:bg-yellow-50 hover:text-gray-900",
|
||||
onclick: move |_| country.set(wl.clone()),
|
||||
MapIcon {}
|
||||
b {
|
||||
"{wl.name}"
|
||||
}
|
||||
" · {wl.country}"
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if let Some(Ok(locs)) = locations.read().as_ref() {
|
||||
for wl in locs.iter().take(5).cloned() {
|
||||
li { class: "pl-8 pr-2 py-1 border-b-2 border-gray-100 relative cursor-pointer hover:bg-yellow-50 hover:text-gray-900",
|
||||
onclick: move |_| country.set(wl.clone()),
|
||||
MapIcon {}
|
||||
b { "{wl.name}" }
|
||||
" · {wl.country}"
|
||||
}
|
||||
} else {
|
||||
rsx! { "loading locations..." }
|
||||
}
|
||||
} else {
|
||||
"loading locations..."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
use dioxus::prelude::*;
|
||||
|
||||
fn main() {
|
||||
launch_desktop(app);
|
||||
launch(app);
|
||||
}
|
||||
|
||||
fn app() -> Element {
|
||||
|
|
|
@ -13,8 +13,6 @@ fn main() {
|
|||
return;
|
||||
}
|
||||
|
||||
panic!("Hashes match, no need to update bindings. {expected} != {hash}",);
|
||||
|
||||
// Otherwise, generate the bindings and write the new hash to disk
|
||||
// Generate the bindings for both native and web
|
||||
gen_bindings("common", "common");
|
||||
|
|
Loading…
Reference in a new issue