Recipe edit (WIP): forms to edit groups, steps and ingredients
This commit is contained in:
parent
dd05a673d9
commit
07b7ff425e
25 changed files with 881 additions and 203 deletions
|
|
@ -1,24 +1,21 @@
|
|||
use gloo::{console::log, events::EventListener, net::http::Request, utils::document};
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen_futures::spawn_local;
|
||||
use web_sys::{Document, HtmlInputElement, HtmlSelectElement};
|
||||
use web_sys::{Element, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement};
|
||||
|
||||
use crate::toast::{self, Level};
|
||||
use common::ron_api;
|
||||
|
||||
async fn api_request(body: String, api_name: &str) {
|
||||
if let Err(error) = Request::put(&format!("/ron-api/recipe/{}", api_name))
|
||||
.header("Content-Type", "application/ron")
|
||||
.body(body)
|
||||
.unwrap()
|
||||
use crate::{
|
||||
request,
|
||||
toast::{self, Level},
|
||||
};
|
||||
|
||||
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
|
||||
{
|
||||
toast::show(Level::Info, &format!("Internal server error: {}", error));
|
||||
}
|
||||
}
|
||||
|
||||
async fn reload_recipes_list() {
|
||||
match Request::get("/fragments/recipes_list").send().await {
|
||||
Err(error) => {
|
||||
toast::show(Level::Info, &format!("Internal server error: {}", error));
|
||||
}
|
||||
|
|
@ -35,17 +32,20 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
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 input_title = document().get_element_by_id("input-title").unwrap();
|
||||
let title = input_title.dyn_ref::<HtmlInputElement>().unwrap();
|
||||
let title = document()
|
||||
.get_element_by_id("input-title")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlInputElement>()
|
||||
.unwrap();
|
||||
if title.value() != current_title {
|
||||
current_title = title.value();
|
||||
let body = common::ron_api::to_string(common::ron_api::SetRecipeTitle {
|
||||
let body = ron_api::SetRecipeTitle {
|
||||
recipe_id,
|
||||
title: title.value(),
|
||||
});
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_title").await;
|
||||
reload_recipes_list().await;
|
||||
let _ = request::put::<(), _>("recipe/set_title", body).await;
|
||||
reload_recipes_list(recipe_id).await;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -54,23 +54,28 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
|
||||
// Description.
|
||||
{
|
||||
let input_description = document().get_element_by_id("input-description").unwrap();
|
||||
let mut current_description = input_description
|
||||
.dyn_ref::<HtmlInputElement>()
|
||||
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 on_input_description_blur =
|
||||
EventListener::new(&input_description, "blur", move |_event| {
|
||||
let input_description = document().get_element_by_id("input-description").unwrap();
|
||||
let description = input_description.dyn_ref::<HtmlInputElement>().unwrap();
|
||||
EventListener::new(&text_area_description, "blur", move |_event| {
|
||||
let description = document()
|
||||
.get_element_by_id("text-area-description")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlTextAreaElement>()
|
||||
.unwrap();
|
||||
if description.value() != current_description {
|
||||
current_description = description.value();
|
||||
let body = common::ron_api::to_string(common::ron_api::SetRecipeDescription {
|
||||
let body = ron_api::SetRecipeDescription {
|
||||
recipe_id,
|
||||
description: description.value(),
|
||||
});
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_description").await;
|
||||
let _ = request::put::<(), _>("recipe/set_description", body).await;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -88,30 +93,28 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
.value();
|
||||
let on_input_estimated_time_blur =
|
||||
EventListener::new(&input_estimated_time, "blur", move |_event| {
|
||||
let input_estimated_time = document()
|
||||
let estimated_time = document()
|
||||
.get_element_by_id("input-estimated-time")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlInputElement>()
|
||||
.unwrap();
|
||||
let estimated_time = input_estimated_time.dyn_ref::<HtmlInputElement>().unwrap();
|
||||
if estimated_time.value() != current_time {
|
||||
let time = if estimated_time.value().is_empty() {
|
||||
None
|
||||
} else if let Ok(t) = estimated_time.value().parse::<u32>() {
|
||||
Some(t)
|
||||
} else {
|
||||
if let Ok(t) = estimated_time.value().parse::<u32>() {
|
||||
Some(t)
|
||||
} else {
|
||||
estimated_time.set_value(¤t_time);
|
||||
return;
|
||||
}
|
||||
estimated_time.set_value(¤t_time);
|
||||
return;
|
||||
};
|
||||
|
||||
current_time = estimated_time.value();
|
||||
let body =
|
||||
common::ron_api::to_string(common::ron_api::SetRecipeEstimatedTime {
|
||||
recipe_id,
|
||||
estimated_time: time,
|
||||
});
|
||||
let body = ron_api::SetRecipeEstimatedTime {
|
||||
recipe_id,
|
||||
estimated_time: time,
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_estimated_time").await;
|
||||
let _ = request::put::<(), _>("recipe/set_estimated_time", body).await;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -127,20 +130,23 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
.value();
|
||||
let on_select_difficulty_blur =
|
||||
EventListener::new(&select_difficulty, "blur", move |_event| {
|
||||
let select_difficulty = document().get_element_by_id("select-difficulty").unwrap();
|
||||
let difficulty = select_difficulty.dyn_ref::<HtmlSelectElement>().unwrap();
|
||||
let difficulty = document()
|
||||
.get_element_by_id("select-difficulty")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlSelectElement>()
|
||||
.unwrap();
|
||||
if difficulty.value() != current_difficulty {
|
||||
current_difficulty = difficulty.value();
|
||||
|
||||
let body = common::ron_api::to_string(common::ron_api::SetRecipeDifficulty {
|
||||
let body = ron_api::SetRecipeDifficulty {
|
||||
recipe_id,
|
||||
difficulty: common::ron_api::Difficulty::try_from(
|
||||
difficulty: ron_api::Difficulty::try_from(
|
||||
current_difficulty.parse::<u32>().unwrap(),
|
||||
)
|
||||
.unwrap(),
|
||||
});
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_difficulty").await;
|
||||
let _ = request::put::<(), _>("recipe/set_difficulty", body).await;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -155,17 +161,20 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
.unwrap()
|
||||
.value();
|
||||
let on_select_language_blur = EventListener::new(&select_language, "blur", move |_event| {
|
||||
let select_language = document().get_element_by_id("select-language").unwrap();
|
||||
let difficulty = select_language.dyn_ref::<HtmlSelectElement>().unwrap();
|
||||
if difficulty.value() != current_language {
|
||||
current_language = difficulty.value();
|
||||
let language = document()
|
||||
.get_element_by_id("select-language")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlSelectElement>()
|
||||
.unwrap();
|
||||
if language.value() != current_language {
|
||||
current_language = language.value();
|
||||
|
||||
let body = common::ron_api::to_string(common::ron_api::SetRecipeLanguage {
|
||||
let body = ron_api::SetRecipeLanguage {
|
||||
recipe_id,
|
||||
lang: difficulty.value(),
|
||||
});
|
||||
lang: language.value(),
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_language").await;
|
||||
let _ = request::put::<(), _>("recipe/set_language", body).await;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -177,22 +186,147 @@ pub fn recipe_edit(recipe_id: i64) -> Result<(), JsValue> {
|
|||
let input_is_published = document().get_element_by_id("input-is-published").unwrap();
|
||||
let on_input_is_published_blur =
|
||||
EventListener::new(&input_is_published, "input", move |_event| {
|
||||
let input_is_published =
|
||||
document().get_element_by_id("input-is-published").unwrap();
|
||||
let is_published = input_is_published.dyn_ref::<HtmlInputElement>().unwrap();
|
||||
let is_published = document()
|
||||
.get_element_by_id("input-is-published")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlInputElement>()
|
||||
.unwrap();
|
||||
|
||||
let body = common::ron_api::to_string(common::ron_api::SetIsPublished {
|
||||
let body = ron_api::SetIsPublished {
|
||||
recipe_id,
|
||||
is_published: is_published.checked(),
|
||||
});
|
||||
};
|
||||
spawn_local(async move {
|
||||
api_request(body, "set_is_published").await;
|
||||
reload_recipes_list().await;
|
||||
let _ = request::put::<(), _>("recipe/set_is_published", body).await;
|
||||
reload_recipes_list(recipe_id).await;
|
||||
});
|
||||
});
|
||||
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))
|
||||
.unwrap();
|
||||
|
||||
let groups_container = document().get_element_by_id("groups-container").unwrap();
|
||||
groups_container.append_child(&group_html).unwrap();
|
||||
group_html
|
||||
}
|
||||
|
||||
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))
|
||||
.unwrap();
|
||||
|
||||
group_element.append_child(&step_html).unwrap();
|
||||
step_html
|
||||
}
|
||||
|
||||
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))
|
||||
.unwrap();
|
||||
|
||||
step_element.append_child(&ingredient_html).unwrap();
|
||||
ingredient_html
|
||||
}
|
||||
|
||||
// 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.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))
|
||||
|
||||
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);
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// log!(format!("{:?}", groups));
|
||||
});
|
||||
}
|
||||
|
||||
// Add a new group.
|
||||
{
|
||||
let button_add_group = document().get_element_by_id("button-add-group").unwrap();
|
||||
let on_click_add_group = EventListener::new(&button_add_group, "click", move |_event| {
|
||||
log!("Click!");
|
||||
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(response.group_id);
|
||||
// group_html.set_attribute("id", "test").unwrap();
|
||||
});
|
||||
});
|
||||
on_click_add_group.forget();
|
||||
}
|
||||
|
||||
Ok(())
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue