489 lines
18 KiB
Rust
489 lines
18 KiB
Rust
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, Event, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
|
|
|
|
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) {
|
|
match Request::get("/fragments/recipes_list")
|
|
.query([("current_recipe_id", current_recipe_id.to_string())])
|
|
.send()
|
|
.await
|
|
{
|
|
Err(error) => {
|
|
toast::show(Level::Info, &format!("Internal server error: {}", error));
|
|
}
|
|
Ok(response) => {
|
|
let list = document().get_element_by_id("recipes-list").unwrap();
|
|
list.set_outer_html(&response.text().await.unwrap());
|
|
}
|
|
}
|
|
}
|
|
|
|
pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|
// Title.
|
|
{
|
|
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 {
|
|
recipe_id,
|
|
title: title.value(),
|
|
};
|
|
spawn_local(async move {
|
|
let _ = request::put::<(), _>("recipe/set_title", body).await;
|
|
reload_recipes_list(recipe_id).await;
|
|
});
|
|
}
|
|
})
|
|
.forget();
|
|
}
|
|
|
|
// Description.
|
|
{
|
|
let description: HtmlTextAreaElement = by_id("text-area-description");
|
|
let mut current_description = description.value();
|
|
let on_input_description_blur =
|
|
EventListener::new(&description.clone(), "blur", move |_event| {
|
|
if description.value() != current_description {
|
|
current_description = description.value();
|
|
let body = ron_api::SetRecipeDescription {
|
|
recipe_id,
|
|
description: description.value(),
|
|
};
|
|
spawn_local(async move {
|
|
let _ = request::put::<(), _>("recipe/set_description", body).await;
|
|
});
|
|
}
|
|
});
|
|
on_input_description_blur.forget();
|
|
}
|
|
|
|
// Estimated time.
|
|
{
|
|
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(&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 {
|
|
// 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 = n;
|
|
let body = ron_api::SetRecipeEstimatedTime {
|
|
recipe_id,
|
|
estimated_time: time,
|
|
};
|
|
spawn_local(async move {
|
|
let _ = request::put::<(), _>("recipe/set_estimated_time", body).await;
|
|
});
|
|
}
|
|
});
|
|
on_input_estimated_time_blur.forget();
|
|
}
|
|
|
|
// Difficulty.
|
|
{
|
|
let difficulty: HtmlSelectElement = by_id("select-difficulty");
|
|
let mut current_difficulty = difficulty.value();
|
|
let on_select_difficulty_blur =
|
|
EventListener::new(&difficulty.clone(), "blur", move |_event| {
|
|
if difficulty.value() != current_difficulty {
|
|
current_difficulty = difficulty.value();
|
|
|
|
let body = ron_api::SetRecipeDifficulty {
|
|
recipe_id,
|
|
difficulty: ron_api::Difficulty::try_from(
|
|
current_difficulty.parse::<u32>().unwrap(),
|
|
)
|
|
.unwrap(),
|
|
};
|
|
spawn_local(async move {
|
|
let _ = request::put::<(), _>("recipe/set_difficulty", body).await;
|
|
});
|
|
}
|
|
});
|
|
on_select_difficulty_blur.forget();
|
|
}
|
|
|
|
// Language.
|
|
{
|
|
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;
|
|
});
|
|
}
|
|
});
|
|
on_select_language_blur.forget();
|
|
}
|
|
|
|
// Is published.
|
|
{
|
|
let is_published: HtmlInputElement = by_id("input-is-published");
|
|
let on_input_is_published_blur =
|
|
EventListener::new(&is_published.clone(), "input", move |_event| {
|
|
let body = ron_api::SetIsPublished {
|
|
recipe_id,
|
|
is_published: is_published.checked(),
|
|
};
|
|
spawn_local(async move {
|
|
let _ = request::put::<(), _>("recipe/set_is_published", body).await;
|
|
reload_recipes_list(recipe_id).await;
|
|
});
|
|
});
|
|
on_input_is_published_blur.forget();
|
|
}
|
|
|
|
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_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();
|
|
|
|
// Add step button.
|
|
let add_step_button: HtmlInputElement = group_element.select(".input-add-step");
|
|
EventListener::new(&add_step_button, "click", move |_event| {
|
|
spawn_local(async move {
|
|
let body = ron_api::AddRecipeStep { group_id };
|
|
let response: ron_api::AddRecipeStepResult =
|
|
request::post("recipe/add_step", body).await.unwrap();
|
|
create_step_element(
|
|
&by_id::<Element>(&format!("group-{}", group_id)),
|
|
&ron_api::Step {
|
|
id: response.step_id,
|
|
action: "".to_string(),
|
|
ingredients: vec![],
|
|
},
|
|
);
|
|
});
|
|
})
|
|
.forget();
|
|
|
|
group_element
|
|
}
|
|
|
|
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();
|
|
|
|
// 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();
|
|
|
|
// Add ingredient button.
|
|
let add_ingredient_button: HtmlInputElement = step_element.select(".input-add-ingredient");
|
|
EventListener::new(&add_ingredient_button, "click", move |_event| {
|
|
spawn_local(async move {
|
|
let body = ron_api::AddRecipeIngredient { step_id };
|
|
let response: ron_api::AddRecipeIngredientResult =
|
|
request::post("recipe/add_ingredient", body).await.unwrap();
|
|
create_ingredient_element(
|
|
&by_id::<Element>(&format!("step-{}", step_id)),
|
|
&ron_api::Ingredient {
|
|
id: response.ingredient_id,
|
|
name: "".to_string(),
|
|
comment: "".to_string(),
|
|
quantity_value: None,
|
|
quantity_unit: "".to_string(),
|
|
},
|
|
);
|
|
});
|
|
})
|
|
.forget();
|
|
|
|
step_element
|
|
}
|
|
|
|
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!("ingredient-{}", ingredient.id))
|
|
.unwrap();
|
|
step_element.append_child(&ingredient_element).unwrap();
|
|
|
|
// 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
|
|
.map_or("".to_string(), |q| q.to_string()),
|
|
);
|
|
let mut current_quantity = quantity.value_as_number();
|
|
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.
|
|
{
|
|
spawn_local(async move {
|
|
let groups: Vec<common::ron_api::Group> =
|
|
request::get("recipe/get_groups", [("recipe_id", &recipe_id.to_string())])
|
|
.await
|
|
.unwrap();
|
|
|
|
for group in groups {
|
|
let group_element = create_group_element(&group);
|
|
|
|
for step in group.steps {
|
|
let step_element = create_step_element(&group_element, &step);
|
|
|
|
for ingredient in step.ingredients {
|
|
create_ingredient_element(&step_element, &ingredient);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add a new group.
|
|
{
|
|
let button_add_group: HtmlInputElement = by_id("input-add-group");
|
|
let on_click_add_group = EventListener::new(&button_add_group, "click", move |_event| {
|
|
let body = ron_api::AddRecipeGroup { recipe_id };
|
|
spawn_local(async move {
|
|
let response: ron_api::AddRecipeGroupResult =
|
|
request::post("recipe/add_group", body).await.unwrap();
|
|
create_group_element(&ron_api::Group {
|
|
id: response.group_id,
|
|
name: "".to_string(),
|
|
comment: "".to_string(),
|
|
steps: vec![],
|
|
});
|
|
});
|
|
});
|
|
on_click_add_group.forget();
|
|
}
|
|
|
|
Ok(())
|
|
}
|
|
|
|
// pub fn user_edit(doc: Document) -> Result<(), JsValue> {
|
|
// log!("user_edit");
|
|
|
|
// let button = doc
|
|
// .query_selector("#user-edit input[type='button']")?
|
|
// .unwrap();
|
|
|
|
// let on_click_submit = EventListener::new(&button, "click", move |_event| {
|
|
// log!("Click!");
|
|
|
|
// let input_name = doc.get_element_by_id("input-name").unwrap();
|
|
// let name = input_name.dyn_ref::<HtmlInputElement>().unwrap().value();
|
|
|
|
// let update_data = common::ron_api::UpdateProfile {
|
|
// name: Some(name),
|
|
// email: None,
|
|
// password: None,
|
|
// };
|
|
|
|
// let body = common::ron_api::to_string(update_data);
|
|
|
|
// let doc = doc.clone();
|
|
// spawn_local(async move {
|
|
// match Request::put("/ron-api/user/update")
|
|
// .header("Content-Type", "application/ron")
|
|
// .body(body)
|
|
// .unwrap()
|
|
// .send()
|
|
// .await
|
|
// {
|
|
// Ok(resp) => {
|
|
// log!("Status code: {}", resp.status());
|
|
// if resp.status() == 200 {
|
|
// toast::show(Level::Info, "Profile saved");
|
|
// } else {
|
|
// toast::show(
|
|
// Level::Error,
|
|
// &format!(
|
|
// "Status code: {} {}",
|
|
// resp.status(),
|
|
// resp.text().await.unwrap()
|
|
// ),
|
|
// );
|
|
// }
|
|
// }
|
|
// Err(error) => {
|
|
// toast::show(Level::Info, &format!("Internal server error: {}", error));
|
|
// }
|
|
// }
|
|
// });
|
|
// });
|
|
|
|
// on_click_submit.forget();
|
|
|
|
// Ok(())
|
|
// }
|