gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Recipe edit (WIP): all form fields are now saved

Browse source
This commit is contained in:
Greg Burri 2024-12-27 00:39:23 +01:00
parent 07b7ff425e
commit 6876a254e1
12 changed files with 563 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

384
frontend/src/handles.rs
View file

@ -1,13 +1,14 @@
use gloo::{console::log, events::EventListener, net::http::Request, utils::document};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::{Element, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
use web_sys::{Element, Event, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
use common::ron_api;
use common::ron_api::{self, Ingredient};
use crate::{
request,
toast::{self, Level},
utils::{by_id, select, select_and_clone, SelectExt},
};
async fn reload_recipes_list(current_recipe_id: i64) {
@ -29,14 +30,9 @@ async fn reload_recipes_list(current_recipe_id: i64) {
pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
// Title.
{
let input_title = document().get_element_by_id("input-title").unwrap();
let mut current_title = input_title.dyn_ref::<HtmlInputElement>().unwrap().value();
let on_input_title_blur = EventListener::new(&input_title, "blur", move |_event| {
let title = document()
.get_element_by_id("input-title")
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
let title: HtmlInputElement = by_id("input-title");
let mut current_title = title.value();
EventListener::new(&title.clone(), "blur", move |_event| {
if title.value() != current_title {
current_title = title.value();
let body = ron_api::SetRecipeTitle {
@ -48,26 +44,16 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
reload_recipes_list(recipe_id).await;
});
}
});
on_input_title_blur.forget();
})
.forget();
}
// Description.
{
let text_area_description = document()
.get_element_by_id("text-area-description")
.unwrap();
let mut current_description = text_area_description
.dyn_ref::<HtmlTextAreaElement>()
.unwrap()
.value();
let description: HtmlTextAreaElement = by_id("text-area-description");
let mut current_description = description.value();
let on_input_description_blur =
EventListener::new(&text_area_description, "blur", move |_event| {
let description = document()
.get_element_by_id("text-area-description")
.unwrap()
.dyn_into::<HtmlTextAreaElement>()
.unwrap();
EventListener::new(&description.clone(), "blur", move |_event| {
if description.value() != current_description {
current_description = description.value();
let body = ron_api::SetRecipeDescription {
@ -84,31 +70,24 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
// Estimated time.
{
let input_estimated_time = document()
.get_element_by_id("input-estimated-time")
.unwrap();
let mut current_time = input_estimated_time
.dyn_ref::<HtmlInputElement>()
.unwrap()
.value();
let estimated_time: HtmlInputElement = by_id("input-estimated-time");
let mut current_time = estimated_time.value_as_number();
let on_input_estimated_time_blur =
EventListener::new(&input_estimated_time, "blur", move |_event| {
let estimated_time = document()
.get_element_by_id("input-estimated-time")
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
if estimated_time.value() != current_time {
let time = if estimated_time.value().is_empty() {
EventListener::new(&estimated_time.clone(), "blur", move |_event| {
let n = estimated_time.value_as_number();
if n.is_nan() {
estimated_time.set_value("");
}
if n != current_time {
let time = if n.is_nan() {
None
} else if let Ok(t) = estimated_time.value().parse::<u32>() {
Some(t)
} else {
estimated_time.set_value(&current_time);
return;
// TODO: Find a better way to validate integer numbers.
let n = n as u32;
estimated_time.set_value_as_number(n as f64);
Some(n)
};
current_time = estimated_time.value();
current_time = n;
let body = ron_api::SetRecipeEstimatedTime {
recipe_id,
estimated_time: time,
@ -123,18 +102,10 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
// Difficulty.
{
let select_difficulty = document().get_element_by_id("select-difficulty").unwrap();
let mut current_difficulty = select_difficulty
.dyn_ref::<HtmlSelectElement>()
.unwrap()
.value();
let difficulty: HtmlSelectElement = by_id("select-difficulty");
let mut current_difficulty = difficulty.value();
let on_select_difficulty_blur =
EventListener::new(&select_difficulty, "blur", move |_event| {
let difficulty = document()
.get_element_by_id("select-difficulty")
.unwrap()
.dyn_into::<HtmlSelectElement>()
.unwrap();
EventListener::new(&difficulty.clone(), "blur", move |_event| {
if difficulty.value() != current_difficulty {
current_difficulty = difficulty.value();
@ -155,43 +126,30 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
// Language.
{
let select_language = document().get_element_by_id("select-language").unwrap();
let mut current_language = select_language
.dyn_ref::<HtmlSelectElement>()
.unwrap()
.value();
let on_select_language_blur = EventListener::new(&select_language, "blur", move |_event| {
let language = document()
.get_element_by_id("select-language")
.unwrap()
.dyn_into::<HtmlSelectElement>()
.unwrap();
if language.value() != current_language {
current_language = language.value();
let language: HtmlSelectElement = by_id("select-language");
let mut current_language = language.value();
let on_select_language_blur =
EventListener::new(&language.clone(), "blur", move |_event| {
if language.value() != current_language {
current_language = language.value();
let body = ron_api::SetRecipeLanguage {
recipe_id,
lang: language.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_language", body).await;
});
}
});
let body = ron_api::SetRecipeLanguage {
recipe_id,
lang: language.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_language", body).await;
});
}
});
on_select_language_blur.forget();
}
// Is published.
{
let input_is_published = document().get_element_by_id("input-is-published").unwrap();
let is_published: HtmlInputElement = by_id("input-is-published");
let on_input_is_published_blur =
EventListener::new(&input_is_published, "input", move |_event| {
let is_published = document()
.get_element_by_id("input-is-published")
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
EventListener::new(&is_published.clone(), "input", move |_event| {
let body = ron_api::SetIsPublished {
recipe_id,
is_published: is_published.checked(),
@ -204,62 +162,185 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
on_input_is_published_blur.forget();
}
// let groups_container = document().get_element_by_id("groups-container").unwrap();
// if !groups_container.has_child_nodes() {
// }
fn create_group_element(group_id: i64) -> Element {
let group_html = document()
.query_selector("#hidden-templates .group")
.unwrap()
.unwrap()
.clone_node_with_deep(true)
.unwrap()
.dyn_into::<Element>()
.unwrap();
group_html
.set_attribute("id", &format!("group-{}", group_id))
fn create_group_element(group: &ron_api::Group) -> Element {
let group_id = group.id;
let group_element: Element = select_and_clone("#hidden-templates .group");
group_element
.set_attribute("id", &format!("group-{}", group.id))
.unwrap();
let groups_container = document().get_element_by_id("groups-container").unwrap();
groups_container.append_child(&group_html).unwrap();
group_html
groups_container.append_child(&group_element).unwrap();
// Group name.
let name = group_element.select::<HtmlInputElement>(".input-group-name");
name.set_value(&group.name);
let mut current_name = group.name.clone();
EventListener::new(&name.clone(), "blur", move |_event| {
if name.value() != current_name {
current_name = name.value();
let body = ron_api::SetGroupName {
group_id,
name: name.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_group_name", body).await;
})
}
})
.forget();
// Group comment.
let comment: HtmlInputElement = group_element.select(".input-group-comment");
comment.set_value(&group.comment);
let mut current_comment = group.comment.clone();
EventListener::new(&comment.clone(), "blur", move |_event| {
if comment.value() != current_comment {
current_comment = comment.value();
let body = ron_api::SetGroupComment {
group_id,
comment: comment.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_group_comment", body).await;
});
}
})
.forget();
// Delete button.
// TODO: add a user confirmation.
let delete_button: HtmlInputElement = group_element.select(".input-group-delete");
EventListener::new(&delete_button, "click", move |_event| {
spawn_local(async move {
let body = ron_api::RemoveRecipeGroup { group_id };
let _ = request::delete::<(), _>("recipe/remove_group", body).await;
by_id::<Element>(&format!("group-{}", group_id)).remove();
});
})
.forget();
group_element
}
fn create_step_element(group_element: &Element, step_id: i64) -> Element {
let step_html = document()
.query_selector("#hidden-templates .step")
.unwrap()
.unwrap()
.clone_node_with_deep(true)
.unwrap()
.dyn_into::<Element>()
.unwrap();
step_html
.set_attribute("id", &format!("step-{}", step_id))
fn create_step_element(group_element: &Element, step: &ron_api::Step) -> Element {
let step_id = step.id;
let step_element: Element = select_and_clone("#hidden-templates .step");
step_element
.set_attribute("id", &format!("step-{}", step.id))
.unwrap();
group_element.append_child(&step_element).unwrap();
group_element.append_child(&step_html).unwrap();
step_html
// Step action.
let action: HtmlTextAreaElement = step_element.select(".text-area-step-action");
action.set_value(&step.action);
let mut current_action = step.action.clone();
EventListener::new(&action.clone(), "blur", move |_event| {
if action.value() != current_action {
current_action = action.value();
let body = ron_api::SetStepAction {
step_id,
action: action.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_step_action", body).await;
});
}
})
.forget();
step_element
}
fn create_ingredient_element(step_element: &Element, ingredient_id: i64) -> Element {
let ingredient_html = document()
.query_selector("#hidden-templates .ingredient")
.unwrap()
.unwrap()
.clone_node_with_deep(true)
.unwrap()
.dyn_into::<Element>()
.unwrap();
ingredient_html
.set_attribute("id", &format!("step-{}", ingredient_id))
fn create_ingredient_element(
step_element: &Element,
ingredient: &ron_api::Ingredient,
) -> Element {
let ingredient_id = ingredient.id;
let ingredient_element: Element = select_and_clone("#hidden-templates .ingredient");
ingredient_element
.set_attribute("id", &format!("step-{}", ingredient.id))
.unwrap();
step_element.append_child(&ingredient_element).unwrap();
step_element.append_child(&ingredient_html).unwrap();
ingredient_html
// Ingredient name.
let name: HtmlInputElement = ingredient_element.select(".input-ingredient-name");
name.set_value(&ingredient.name);
let mut current_name = ingredient.name.clone();
EventListener::new(&name.clone(), "blur", move |_event| {
if name.value() != current_name {
current_name = name.value();
let body = ron_api::SetIngredientName {
ingredient_id,
name: name.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_ingredient_name", body).await;
});
}
})
.forget();
// Ingredient comment.
let comment: HtmlInputElement = ingredient_element.select(".input-ingredient-comment");
comment.set_value(&ingredient.comment);
let mut current_comment = ingredient.comment.clone();
EventListener::new(&comment.clone(), "blur", move |_event| {
if comment.value() != current_comment {
current_comment = comment.value();
let body = ron_api::SetIngredientComment {
ingredient_id,
comment: comment.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_ingredient_comment", body).await;
});
}
})
.forget();
// Ingredient quantity.
let quantity: HtmlInputElement = ingredient_element.select(".input-ingredient-quantity");
quantity.set_value(&ingredient.quantity_value.to_string());
let mut current_quantity = ingredient.quantity_value;
EventListener::new(&quantity.clone(), "blur", move |_event| {
let n = quantity.value_as_number();
if n.is_nan() {
quantity.set_value("");
}
if n != current_quantity {
let q = if n.is_nan() { None } else { Some(n) };
current_quantity = n;
let body = ron_api::SetIngredientQuantity {
ingredient_id,
quantity: q,
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_ingredient_quantity", body).await;
});
}
})
.forget();
// Ingredient unit.
let unit: HtmlInputElement = ingredient_element.select(".input-ingredient-unit");
unit.set_value(&ingredient.quantity_unit);
let mut current_unit = ingredient.quantity_unit.clone();
EventListener::new(&unit.clone(), "blur", move |_event| {
if unit.value() != current_unit {
current_unit = unit.value();
let body = ron_api::SetIngredientUnit {
ingredient_id,
unit: unit.value(),
};
spawn_local(async move {
let _ = request::put::<(), _>("recipe/set_ingredient_unit", body).await;
});
}
})
.forget();
ingredient_element
}
// Load initial groups, steps and ingredients.
@ -271,42 +352,16 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
.unwrap();
for group in groups {
let group_element = create_group_element(group.id);
let input_name = group_element
.query_selector(".input-group-name")
.unwrap()
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
input_name.set_value(&group.name);
// document().get_element_by_id(&format!("group-{}", group_id))
let group_element = create_group_element(&group);
for step in group.steps {
let step_element = create_step_element(&group_element, step.id);
let text_area_action = step_element
.query_selector(".text-area-step-action")
.unwrap()
.unwrap()
.dyn_into::<HtmlTextAreaElement>()
.unwrap();
text_area_action.set_value(&step.action);
let step_element = create_step_element(&group_element, &step);
for ingredient in step.ingredients {
let ingredient_element =
create_ingredient_element(&step_element, ingredient.id);
let input_name = ingredient_element
.query_selector(".input-ingredient-name")
.unwrap()
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
input_name.set_value(&ingredient.name);
create_ingredient_element(&step_element, &ingredient);
}
}
}
// log!(format!("{:?}", groups));
});
}
@ -320,7 +375,12 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
spawn_local(async move {
let response: ron_api::AddRecipeGroupResult =
request::post("recipe/add_group", body).await.unwrap();
create_group_element(response.group_id);
create_group_element(&ron_api::Group {
id: response.group_id,
name: "".to_string(),
comment: "".to_string(),
steps: vec![],
});
// group_html.set_attribute("id", "test").unwrap();
});
});

72
frontend/src/utils.rs
View file

@ -1,19 +1,59 @@
// use web_sys::console;
use gloo::utils::document;
use wasm_bindgen::prelude::*;
use web_sys::Element;
pub fn set_panic_hook() {
// When the `console_error_panic_hook` feature is enabled, we can call the
// `set_panic_hook` function at least once during initialization, and then
// we will get better error messages if our code ever panics.
//
// For more details see
// https://github.com/rustwasm/console_error_panic_hook#readme
#[cfg(feature = "console_error_panic_hook")]
console_error_panic_hook::set_once();
pub trait SelectExt {
fn select<T>(&self, selectors: &str) -> T
where
T: JsCast;
}
// #[macro_export]
// macro_rules! console_log {
// // Note that this is using the `log` function imported above during
// // `bare_bones`
// ($($t:tt)*) => (console::log_1(&format_args!($($t)*).to_string().into()))
// }
impl SelectExt for Element {
fn select<T>(&self, selectors: &str) -> T
where
T: JsCast,
{
self.query_selector(selectors)
.unwrap()
.unwrap()
.dyn_into::<T>()
.unwrap()
}
}
pub fn select<T>(selectors: &str) -> T
where
T: JsCast,
{
document()
.query_selector(selectors)
.unwrap()
.unwrap()
.dyn_into::<T>()
.unwrap()
}
pub fn select_and_clone<T>(selectors: &str) -> T
where
T: JsCast,
{
document()
.query_selector(selectors)
.unwrap()
.unwrap()
.clone_node_with_deep(true)
.unwrap()
.dyn_into::<T>()
.unwrap()
}
pub fn by_id<T>(element_id: &str) -> T
where
T: JsCast,
{
document()
.get_element_by_id(element_id)
.unwrap()
.dyn_into::<T>()
.unwrap()
}