Update to Axum 0.8
This commit is contained in:
parent
975d1ceee2
commit
e355800f98
20 changed files with 1377 additions and 1199 deletions
|
|
@ -50,9 +50,6 @@ gloo = "0.11"
|
|||
# code size when deploying.
|
||||
console_error_panic_hook = { version = "0.1", optional = true }
|
||||
|
||||
# [dev-dependencies]
|
||||
# wasm-bindgen-test = "0.3"
|
||||
|
||||
[profile.release]
|
||||
# Tell `rustc` to optimize for small code size.
|
||||
opt-level = "s"
|
||||
|
|
|
|||
|
|
@ -1,875 +0,0 @@
|
|||
use gloo::{
|
||||
console::log,
|
||||
events::{EventListener, EventListenerOptions},
|
||||
net::http::Request,
|
||||
utils::{document, window},
|
||||
};
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen_futures::spawn_local;
|
||||
use web_sys::{
|
||||
DragEvent, Element, HtmlDivElement, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement,
|
||||
KeyboardEvent,
|
||||
};
|
||||
|
||||
use common::ron_api;
|
||||
|
||||
use crate::{
|
||||
modal_dialog, request,
|
||||
toast::{self, Level},
|
||||
utils::{by_id, selector, selector_all, selector_and_clone, SelectorExt},
|
||||
};
|
||||
|
||||
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 Some(title) = document().get_element_by_id("input-title") else {
|
||||
return Err(JsValue::from_str("Unable to find 'input-title' element"));
|
||||
};
|
||||
|
||||
let title: HtmlInputElement = title.dyn_into().unwrap();
|
||||
|
||||
// Check if the recipe has been loaded.
|
||||
|
||||
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();
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Servings.
|
||||
{
|
||||
let servings: HtmlInputElement = by_id("input-servings");
|
||||
let mut current_servings = servings.value_as_number();
|
||||
EventListener::new(&servings.clone(), "input", move |_event| {
|
||||
let n = servings.value_as_number();
|
||||
if n.is_nan() {
|
||||
servings.set_value("");
|
||||
}
|
||||
if n != current_servings {
|
||||
let servings = if n.is_nan() {
|
||||
None
|
||||
} else {
|
||||
// TODO: Find a better way to validate integer numbers.
|
||||
let n = n as u32;
|
||||
servings.set_value_as_number(n as f64);
|
||||
Some(n)
|
||||
};
|
||||
current_servings = n;
|
||||
let body = ron_api::SetRecipeServings {
|
||||
recipe_id,
|
||||
servings,
|
||||
};
|
||||
spawn_local(async move {
|
||||
let _ = request::put::<(), _>("recipe/set_servings", body).await;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Estimated time.
|
||||
{
|
||||
let estimated_time: HtmlInputElement = by_id("input-estimated-time");
|
||||
let mut current_time = estimated_time.value_as_number();
|
||||
|
||||
EventListener::new(&estimated_time.clone(), "input", 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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Difficulty.
|
||||
{
|
||||
let difficulty: HtmlSelectElement = by_id("select-difficulty");
|
||||
let mut current_difficulty = difficulty.value();
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Tags.
|
||||
{
|
||||
spawn_local(async move {
|
||||
let tags: ron_api::Tags =
|
||||
request::get("recipe/get_tags", [("recipe_id", &recipe_id.to_string())])
|
||||
.await
|
||||
.unwrap();
|
||||
create_tag_elements(recipe_id, &tags.tags);
|
||||
});
|
||||
|
||||
fn add_tags(recipe_id: i64, tags: String) {
|
||||
spawn_local(async move {
|
||||
let tag_list: Vec<String> = tags.split_whitespace().map(String::from).collect();
|
||||
if !tag_list.is_empty() {
|
||||
let body = ron_api::Tags {
|
||||
recipe_id,
|
||||
tags: tag_list.clone(),
|
||||
};
|
||||
let _ = request::post::<(), _>("recipe/add_tags", body).await;
|
||||
create_tag_elements(recipe_id, &tag_list);
|
||||
}
|
||||
by_id::<HtmlInputElement>("input-tags").set_value("");
|
||||
});
|
||||
}
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "input", move |_event| {
|
||||
let tags = input_tags.value();
|
||||
if tags.ends_with(' ') {
|
||||
add_tags(recipe_id, tags);
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "keypress", move |event| {
|
||||
if let Some(keyboard_event) = event.dyn_ref::<KeyboardEvent>() {
|
||||
if keyboard_event.key_code() == 13 {
|
||||
let tags = input_tags.value();
|
||||
add_tags(recipe_id, tags);
|
||||
}
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "blur", move |_event| {
|
||||
let tags = input_tags.value();
|
||||
add_tags(recipe_id, tags);
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Language.
|
||||
{
|
||||
let language: HtmlSelectElement = by_id("select-language");
|
||||
let mut current_language = language.value();
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Is published.
|
||||
{
|
||||
let is_published: HtmlInputElement = by_id("input-is-published");
|
||||
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;
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Delete recipe button.
|
||||
let delete_button: HtmlInputElement = by_id("input-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let title: HtmlInputElement = by_id("input-title");
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!(
|
||||
"Are you sure to delete the recipe '{}'",
|
||||
title.value()
|
||||
))
|
||||
.await
|
||||
{
|
||||
let body = ron_api::Remove { recipe_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove", body).await;
|
||||
window().location().set_href("/").unwrap();
|
||||
|
||||
// by_id::<Element>(&format!("group-{}", group_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
let group_dropzone: Element = selector(".dropzone-group");
|
||||
setup_dragzone_events(&group_dropzone);
|
||||
|
||||
fn setup_dragzone_events(dropzone: &Element) {
|
||||
EventListener::new_with_options(
|
||||
dropzone,
|
||||
"dragover",
|
||||
EventListenerOptions::enable_prevent_default(),
|
||||
|event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with("group") {
|
||||
event.prevent_default();
|
||||
// event.data_transfer().unwrap().set_effect_allowed("move");
|
||||
log!("drag over");
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_class_name("dropzone-group hover");
|
||||
}
|
||||
},
|
||||
)
|
||||
.forget();
|
||||
|
||||
EventListener::new(dropzone, "dragleave", |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with("group") {
|
||||
log!("drag leave");
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_class_name("dropzone-group active");
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(dropzone, "drop", |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with("group") {
|
||||
let id: i64 = drag_data[6..].parse().unwrap();
|
||||
let target: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
let group: Element = by_id(&format!("group-{}", id));
|
||||
let group_dropzone: Element = by_id(&format!("dropzone-group-{}", id));
|
||||
target.after_with_node_1(&group).unwrap();
|
||||
group.after_with_node_1(&group_dropzone).unwrap();
|
||||
|
||||
send_groups_order();
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
fn send_groups_order() {
|
||||
spawn_local(async move {
|
||||
let group_ids = by_id::<Element>("groups-container")
|
||||
.selector_all::<Element>(".group")
|
||||
.into_iter()
|
||||
.map(|e| e.get_attribute("id").unwrap()[6..].parse::<i64>().unwrap())
|
||||
.collect();
|
||||
|
||||
let body = ron_api::SetGroupOrders { group_ids };
|
||||
let _ = request::put::<(), _>("recipe/set_groups_order", body).await;
|
||||
});
|
||||
}
|
||||
|
||||
fn create_tag_elements<T>(recipe_id: i64, tags: &[T])
|
||||
where
|
||||
T: AsRef<str>,
|
||||
{
|
||||
let tags_span: Element = selector("#container-tags .tags");
|
||||
|
||||
// Collect current tags to avoid re-adding an existing tag.
|
||||
let mut current_tags: Vec<String> = vec![];
|
||||
let mut current_tag_element = tags_span.first_child();
|
||||
while let Some(element) = current_tag_element {
|
||||
current_tags.push(
|
||||
element
|
||||
.dyn_ref::<Element>()
|
||||
.unwrap()
|
||||
.text_content()
|
||||
.unwrap(),
|
||||
);
|
||||
current_tag_element = element.next_sibling();
|
||||
}
|
||||
|
||||
for tag in tags {
|
||||
let tag = tag.as_ref().to_string();
|
||||
if current_tags.contains(&tag) {
|
||||
continue;
|
||||
}
|
||||
let tag_span = document().create_element("span").unwrap();
|
||||
tag_span.set_inner_html(&tag);
|
||||
let delete_tag_button: HtmlInputElement = document()
|
||||
.create_element("input")
|
||||
.unwrap()
|
||||
.dyn_into()
|
||||
.unwrap();
|
||||
delete_tag_button.set_attribute("type", "button").unwrap();
|
||||
delete_tag_button.set_attribute("value", "X").unwrap();
|
||||
tag_span.append_child(&delete_tag_button).unwrap();
|
||||
tags_span.append_child(&tag_span).unwrap();
|
||||
|
||||
EventListener::new(&delete_tag_button, "click", move |_event| {
|
||||
let tag_span = tag_span.clone();
|
||||
let tag = tag.clone();
|
||||
spawn_local(async move {
|
||||
let body = ron_api::Tags {
|
||||
recipe_id,
|
||||
tags: vec![tag],
|
||||
};
|
||||
let _ = request::delete::<(), _>("recipe/rm_tags", body).await;
|
||||
tag_span.remove();
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
}
|
||||
|
||||
fn create_group_element(group: &ron_api::Group) -> Element {
|
||||
let group_id = group.id;
|
||||
let group_element: Element = selector_and_clone("#hidden-templates .group");
|
||||
group_element
|
||||
.set_attribute("id", &format!("group-{}", group.id))
|
||||
.unwrap();
|
||||
|
||||
let groups_container: Element = by_id("groups-container");
|
||||
groups_container.append_child(&group_element).unwrap();
|
||||
|
||||
let dropzone_group: Element = selector_and_clone(".dropzone-group");
|
||||
dropzone_group
|
||||
.set_attribute("id", &format!("dropzone-group-{}", group.id))
|
||||
.unwrap();
|
||||
groups_container.append_child(&dropzone_group).unwrap();
|
||||
setup_dragzone_events(&dropzone_group);
|
||||
|
||||
let drag_handle: Element = group_element.selector(".drag-handle");
|
||||
EventListener::new(&drag_handle, "mousedown", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "true")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&drag_handle, "mouseup", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&group_element, "dragstart", |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
if target_element.get_attribute("class").unwrap() == "group" {
|
||||
// Highlight where the group can be droppped.
|
||||
for dp in selector_all::<HtmlDivElement>(".dropzone-group") {
|
||||
dp.set_class_name("dropzone-group active");
|
||||
}
|
||||
event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.set_data("text/plain", &target_element.get_attribute("id").unwrap())
|
||||
.unwrap();
|
||||
event.data_transfer().unwrap().set_effect_allowed("move");
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&group_element, "dragend", |event| {
|
||||
// let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
|
||||
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
if target_element.get_attribute("class").unwrap() == "group" {
|
||||
for dp in selector_all::<HtmlDivElement>(".dropzone-group") {
|
||||
dp.set_class_name("dropzone-group");
|
||||
}
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Group name.
|
||||
let name = group_element.selector::<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.selector(".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.
|
||||
let group_element_cloned = group_element.clone();
|
||||
let delete_button: HtmlInputElement = group_element.selector(".input-group-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let name = group_element_cloned
|
||||
.selector::<HtmlInputElement>(".input-group-name")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the group '{}'", name)).await
|
||||
{
|
||||
let body = ron_api::RemoveRecipeGroup { group_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_group", body).await;
|
||||
by_id::<Element>(&format!("group-{}", group_id)).remove();
|
||||
by_id::<Element>(&format!("dropzone-group-{}", group_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Add step button.
|
||||
let add_step_button: HtmlInputElement = group_element.selector(".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(
|
||||
&selector::<Element>(&format!("#group-{} .steps", 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 = selector_and_clone("#hidden-templates .step");
|
||||
step_element
|
||||
.set_attribute("id", &format!("step-{}", step.id))
|
||||
.unwrap();
|
||||
group_element.append_child(&step_element).unwrap();
|
||||
|
||||
let dropzone_step: Element = selector_and_clone(".dropzone-step");
|
||||
dropzone_step
|
||||
.set_attribute("id", &format!("dropzone-step-{}", step.id))
|
||||
.unwrap();
|
||||
group_element.append_child(&dropzone_step).unwrap();
|
||||
|
||||
let drag_handle: Element = step_element.selector(".drag-handle");
|
||||
|
||||
EventListener::new(&drag_handle, "mousedown", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "true")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&drag_handle, "mouseup", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&step_element, "dragstart", |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
// let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
// if target_element.get_attribute("class").unwrap() == "step" {
|
||||
// Highlight where the step can be droppped.
|
||||
log!("START DRAG STEP");
|
||||
// log!(event);
|
||||
// }
|
||||
})
|
||||
.forget();
|
||||
EventListener::new(&step_element, "dragend", |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
// let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
// if target_element.get_attribute("class").unwrap() == "step" {
|
||||
// Highlight where the step can be droppped.
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
|
||||
log!("STOP DRAG STEP");
|
||||
// log!(event);
|
||||
// }
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Step action.
|
||||
let action: HtmlTextAreaElement = step_element.selector(".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();
|
||||
|
||||
// Delete button.
|
||||
let step_element_cloned = step_element.clone();
|
||||
let delete_button: HtmlInputElement = step_element.selector(".input-step-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let action = step_element_cloned
|
||||
.selector::<HtmlTextAreaElement>(".text-area-step-action")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the step '{}'", action))
|
||||
.await
|
||||
{
|
||||
let body = ron_api::RemoveRecipeStep { step_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_step", body).await;
|
||||
by_id::<Element>(&format!("step-{}", step_id)).remove();
|
||||
by_id::<Element>(&format!("dropzone-step-{}", step_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Add ingredient button.
|
||||
let add_ingredient_button: HtmlInputElement =
|
||||
step_element.selector(".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(
|
||||
&selector::<Element>(&format!("#step-{} .ingredients", 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 = selector_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.selector(".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.selector(".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.selector(".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(), "input", 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.selector(".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();
|
||||
|
||||
// Delete button.
|
||||
let ingredient_element_cloned = ingredient_element.clone();
|
||||
let delete_button: HtmlInputElement =
|
||||
ingredient_element.selector(".input-ingredient-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let name = ingredient_element_cloned
|
||||
.selector::<HtmlInputElement>(".input-ingredient-name")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the ingredient '{}'", name))
|
||||
.await
|
||||
{
|
||||
let body = ron_api::RemoveRecipeIngredient { ingredient_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_ingredient", body).await;
|
||||
by_id::<Element>(&format!("ingredient-{}", ingredient_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.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.selector(".steps"), &step);
|
||||
|
||||
for ingredient in step.ingredients {
|
||||
create_ingredient_element(
|
||||
&step_element.selector(".ingredients"),
|
||||
&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(())
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
mod handles;
|
||||
mod modal_dialog;
|
||||
mod on_click;
|
||||
mod recipe_edit;
|
||||
mod request;
|
||||
mod toast;
|
||||
mod utils;
|
||||
|
|
@ -22,7 +22,7 @@ pub fn main() -> Result<(), JsValue> {
|
|||
|
||||
if let ["recipe", "edit", id] = path[..] {
|
||||
let id = id.parse::<i64>().unwrap(); // TODO: remove unwrap.
|
||||
if let Err(error) = handles::recipe_edit(id) {
|
||||
if let Err(error) = recipe_edit::setup_page(id) {
|
||||
log!(error);
|
||||
}
|
||||
|
||||
|
|
|
|||
849
frontend/src/recipe_edit.rs
Normal file
849
frontend/src/recipe_edit.rs
Normal file
|
|
@ -0,0 +1,849 @@
|
|||
use std::rc;
|
||||
|
||||
use gloo::{
|
||||
console::log,
|
||||
events::{EventListener, EventListenerOptions},
|
||||
net::http::Request,
|
||||
utils::{document, window},
|
||||
};
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen_futures::spawn_local;
|
||||
use web_sys::{
|
||||
DragEvent, Element, HtmlDivElement, HtmlInputElement, HtmlSelectElement, HtmlTextAreaElement,
|
||||
KeyboardEvent,
|
||||
};
|
||||
|
||||
use common::ron_api;
|
||||
|
||||
use crate::{
|
||||
modal_dialog, request,
|
||||
toast::{self, Level},
|
||||
utils::{by_id, selector, selector_all, selector_and_clone, SelectorExt},
|
||||
};
|
||||
|
||||
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 setup_page(recipe_id: i64) -> Result<(), JsValue> {
|
||||
// Title.
|
||||
{
|
||||
let Some(title) = document().get_element_by_id("input-title") else {
|
||||
return Err(JsValue::from_str("Unable to find 'input-title' element"));
|
||||
};
|
||||
|
||||
let title: HtmlInputElement = title.dyn_into().unwrap();
|
||||
|
||||
// Check if the recipe has been loaded.
|
||||
|
||||
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();
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Servings.
|
||||
{
|
||||
let servings: HtmlInputElement = by_id("input-servings");
|
||||
let mut current_servings = servings.value_as_number();
|
||||
EventListener::new(&servings.clone(), "input", move |_event| {
|
||||
let n = servings.value_as_number();
|
||||
if n.is_nan() {
|
||||
servings.set_value("");
|
||||
}
|
||||
if n != current_servings {
|
||||
let servings = if n.is_nan() {
|
||||
None
|
||||
} else {
|
||||
// TODO: Find a better way to validate integer numbers.
|
||||
let n = n as u32;
|
||||
servings.set_value_as_number(n as f64);
|
||||
Some(n)
|
||||
};
|
||||
current_servings = n;
|
||||
let body = ron_api::SetRecipeServings {
|
||||
recipe_id,
|
||||
servings,
|
||||
};
|
||||
spawn_local(async move {
|
||||
let _ = request::put::<(), _>("recipe/set_servings", body).await;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Estimated time.
|
||||
{
|
||||
let estimated_time: HtmlInputElement = by_id("input-estimated-time");
|
||||
let mut current_time = estimated_time.value_as_number();
|
||||
|
||||
EventListener::new(&estimated_time.clone(), "input", 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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Difficulty.
|
||||
{
|
||||
let difficulty: HtmlSelectElement = by_id("select-difficulty");
|
||||
let mut current_difficulty = difficulty.value();
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Tags.
|
||||
{
|
||||
spawn_local(async move {
|
||||
let tags: ron_api::Tags =
|
||||
request::get("recipe/get_tags", [("recipe_id", &recipe_id.to_string())])
|
||||
.await
|
||||
.unwrap();
|
||||
create_tag_elements(recipe_id, &tags.tags);
|
||||
});
|
||||
|
||||
fn add_tags(recipe_id: i64, tags: String) {
|
||||
spawn_local(async move {
|
||||
let tag_list: Vec<String> = tags.split_whitespace().map(String::from).collect();
|
||||
if !tag_list.is_empty() {
|
||||
let body = ron_api::Tags {
|
||||
recipe_id,
|
||||
tags: tag_list.clone(),
|
||||
};
|
||||
let _ = request::post::<(), _>("recipe/add_tags", body).await;
|
||||
create_tag_elements(recipe_id, &tag_list);
|
||||
}
|
||||
by_id::<HtmlInputElement>("input-tags").set_value("");
|
||||
});
|
||||
}
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "input", move |_event| {
|
||||
let tags = input_tags.value();
|
||||
if tags.ends_with(' ') {
|
||||
add_tags(recipe_id, tags);
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "keypress", move |event| {
|
||||
if let Some(keyboard_event) = event.dyn_ref::<KeyboardEvent>() {
|
||||
if keyboard_event.key_code() == 13 {
|
||||
let tags = input_tags.value();
|
||||
add_tags(recipe_id, tags);
|
||||
}
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let input_tags: HtmlInputElement = by_id("input-tags");
|
||||
EventListener::new(&input_tags.clone(), "blur", move |_event| {
|
||||
let tags = input_tags.value();
|
||||
add_tags(recipe_id, tags);
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Language.
|
||||
{
|
||||
let language: HtmlSelectElement = by_id("select-language");
|
||||
let mut current_language = language.value();
|
||||
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;
|
||||
});
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Is published.
|
||||
{
|
||||
let is_published: HtmlInputElement = by_id("input-is-published");
|
||||
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;
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
// Delete recipe button.
|
||||
let delete_button: HtmlInputElement = by_id("input-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let title: HtmlInputElement = by_id("input-title");
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!(
|
||||
"Are you sure to delete the recipe '{}'",
|
||||
title.value()
|
||||
))
|
||||
.await
|
||||
{
|
||||
let body = ron_api::Remove { recipe_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove", body).await;
|
||||
window().location().set_href("/").unwrap();
|
||||
|
||||
// by_id::<Element>(&format!("group-{}", group_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
// let group_dropzone: Element = selector(".dropzone-group");
|
||||
// setup_dragzone_events(&group_dropzone);
|
||||
|
||||
// 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.selector(".steps"), &step);
|
||||
|
||||
for ingredient in step.ingredients {
|
||||
create_ingredient_element(
|
||||
&step_element.selector(".ingredients"),
|
||||
&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(())
|
||||
}
|
||||
|
||||
fn create_group_element(group: &ron_api::Group) -> Element {
|
||||
let group_id = group.id;
|
||||
let group_element: Element = selector_and_clone("#hidden-templates .group");
|
||||
group_element
|
||||
.set_attribute("id", &format!("group-{}", group.id))
|
||||
.unwrap();
|
||||
|
||||
let groups_container: Element = by_id("groups-container");
|
||||
groups_container.append_child(&group_element).unwrap();
|
||||
|
||||
set_draggable(&group_element, "group", |_element| {
|
||||
spawn_local(async move {
|
||||
let group_ids = by_id::<Element>("groups-container")
|
||||
.selector_all::<Element>(".group")
|
||||
.into_iter()
|
||||
.map(|e| e.get_attribute("id").unwrap()[6..].parse::<i64>().unwrap())
|
||||
.collect();
|
||||
|
||||
let body = ron_api::SetGroupOrders { group_ids };
|
||||
let _ = request::put::<(), _>("recipe/set_groups_order", body).await;
|
||||
});
|
||||
});
|
||||
|
||||
// Group name.
|
||||
let name = group_element.selector::<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.selector(".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.
|
||||
let group_element_cloned = group_element.clone();
|
||||
let delete_button: HtmlInputElement = group_element.selector(".input-group-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let name = group_element_cloned
|
||||
.selector::<HtmlInputElement>(".input-group-name")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the group '{}'", name)).await {
|
||||
let body = ron_api::RemoveRecipeGroup { group_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_group", body).await;
|
||||
by_id::<Element>(&format!("group-{}", group_id)).remove();
|
||||
by_id::<Element>(&format!("dropzone-group-{}", group_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Add step button.
|
||||
let add_step_button: HtmlInputElement = group_element.selector(".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(
|
||||
&selector::<Element>(&format!("#group-{} .steps", group_id)),
|
||||
&ron_api::Step {
|
||||
id: response.step_id,
|
||||
action: "".to_string(),
|
||||
ingredients: vec![],
|
||||
},
|
||||
);
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
group_element
|
||||
}
|
||||
|
||||
fn create_tag_elements<T>(recipe_id: i64, tags: &[T])
|
||||
where
|
||||
T: AsRef<str>,
|
||||
{
|
||||
let tags_span: Element = selector("#container-tags .tags");
|
||||
|
||||
// Collect current tags to avoid re-adding an existing tag.
|
||||
let mut current_tags: Vec<String> = vec![];
|
||||
let mut current_tag_element = tags_span.first_child();
|
||||
while let Some(element) = current_tag_element {
|
||||
current_tags.push(
|
||||
element
|
||||
.dyn_ref::<Element>()
|
||||
.unwrap()
|
||||
.text_content()
|
||||
.unwrap(),
|
||||
);
|
||||
current_tag_element = element.next_sibling();
|
||||
}
|
||||
|
||||
for tag in tags {
|
||||
let tag = tag.as_ref().to_string();
|
||||
if current_tags.contains(&tag) {
|
||||
continue;
|
||||
}
|
||||
let tag_span = document().create_element("span").unwrap();
|
||||
tag_span.set_inner_html(&tag);
|
||||
let delete_tag_button: HtmlInputElement = document()
|
||||
.create_element("input")
|
||||
.unwrap()
|
||||
.dyn_into()
|
||||
.unwrap();
|
||||
delete_tag_button.set_attribute("type", "button").unwrap();
|
||||
delete_tag_button.set_attribute("value", "X").unwrap();
|
||||
tag_span.append_child(&delete_tag_button).unwrap();
|
||||
tags_span.append_child(&tag_span).unwrap();
|
||||
|
||||
EventListener::new(&delete_tag_button, "click", move |_event| {
|
||||
let tag_span = tag_span.clone();
|
||||
let tag = tag.clone();
|
||||
spawn_local(async move {
|
||||
let body = ron_api::Tags {
|
||||
recipe_id,
|
||||
tags: vec![tag],
|
||||
};
|
||||
let _ = request::delete::<(), _>("recipe/rm_tags", body).await;
|
||||
tag_span.remove();
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
}
|
||||
|
||||
fn create_step_element(group_element: &Element, step: &ron_api::Step) -> Element {
|
||||
let step_id = step.id;
|
||||
let step_element: Element = selector_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.selector(".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();
|
||||
|
||||
// Delete button.
|
||||
let step_element_cloned = step_element.clone();
|
||||
let delete_button: HtmlInputElement = step_element.selector(".input-step-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let action = step_element_cloned
|
||||
.selector::<HtmlTextAreaElement>(".text-area-step-action")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the step '{}'", action)).await {
|
||||
let body = ron_api::RemoveRecipeStep { step_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_step", body).await;
|
||||
by_id::<Element>(&format!("step-{}", step_id)).remove();
|
||||
by_id::<Element>(&format!("dropzone-step-{}", step_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
// Add ingredient button.
|
||||
let add_ingredient_button: HtmlInputElement = step_element.selector(".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(
|
||||
&selector::<Element>(&format!("#step-{} .ingredients", 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 = selector_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.selector(".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.selector(".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.selector(".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(), "input", 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.selector(".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();
|
||||
|
||||
// Delete button.
|
||||
let ingredient_element_cloned = ingredient_element.clone();
|
||||
let delete_button: HtmlInputElement = ingredient_element.selector(".input-ingredient-delete");
|
||||
EventListener::new(&delete_button, "click", move |_event| {
|
||||
let name = ingredient_element_cloned
|
||||
.selector::<HtmlInputElement>(".input-ingredient-name")
|
||||
.value();
|
||||
spawn_local(async move {
|
||||
if modal_dialog::show(&format!("Are you sure to delete the ingredient '{}'", name))
|
||||
.await
|
||||
{
|
||||
let body = ron_api::RemoveRecipeIngredient { ingredient_id };
|
||||
let _ = request::delete::<(), _>("recipe/remove_ingredient", body).await;
|
||||
by_id::<Element>(&format!("ingredient-{}", ingredient_id)).remove();
|
||||
}
|
||||
});
|
||||
})
|
||||
.forget();
|
||||
|
||||
ingredient_element
|
||||
}
|
||||
|
||||
/// Set an element as draggable and add an element before and after
|
||||
/// cloned from "#hidden-templates .dropzone".
|
||||
/// All elements set as draggable in a given container can be dragged
|
||||
/// After or before another element.
|
||||
/// 'element' must have a sub-element with the class '.drag-handle' which
|
||||
/// will be used to drag the element.
|
||||
fn set_draggable<T>(element: &Element, prefix: &str, dropped: T)
|
||||
where
|
||||
T: Fn(&Element) + 'static,
|
||||
{
|
||||
let dropped = rc::Rc::new(dropped);
|
||||
|
||||
// Add a drop zone before the given element if there is none.
|
||||
if element.previous_element_sibling().is_none() {
|
||||
let dropzone = selector_and_clone::<Element>("#hidden-templates .dropzone");
|
||||
element.before_with_node_1(&dropzone).unwrap();
|
||||
setup_dragzone_events(&dropzone, prefix, dropped.clone());
|
||||
}
|
||||
|
||||
let dropzone = selector_and_clone::<Element>("#hidden-templates .dropzone");
|
||||
element.after_with_node_1(&dropzone).unwrap();
|
||||
setup_dragzone_events(&dropzone, prefix, dropped.clone());
|
||||
|
||||
let drag_handle: Element = element.selector(".drag-handle");
|
||||
EventListener::new(&drag_handle, "mousedown", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "true")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
EventListener::new(&drag_handle, "mouseup", |event| {
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
})
|
||||
.forget();
|
||||
|
||||
let prefix_copied = prefix.to_string();
|
||||
EventListener::new(element, "dragstart", move |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
|
||||
if target_element
|
||||
.get_attribute("id")
|
||||
.unwrap()
|
||||
.starts_with(&prefix_copied)
|
||||
{
|
||||
// Highlight where the group can be droppped.
|
||||
// TODO: only select direct children.
|
||||
for dp in target_element
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.selector_all::<HtmlDivElement>(".dropzone")
|
||||
{
|
||||
dp.set_class_name("dropzone active");
|
||||
}
|
||||
event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.set_data("text/plain", &target_element.get_attribute("id").unwrap())
|
||||
.unwrap();
|
||||
event.data_transfer().unwrap().set_effect_allowed("move");
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let prefix_copied = prefix.to_string();
|
||||
EventListener::new(element, "dragend", move |event| {
|
||||
// let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_attribute("draggable", "false")
|
||||
.unwrap();
|
||||
|
||||
let target_element: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
if target_element
|
||||
.get_attribute("id")
|
||||
.unwrap()
|
||||
.starts_with(&prefix_copied)
|
||||
{
|
||||
for dp in target_element
|
||||
.parent_element()
|
||||
.unwrap()
|
||||
.selector_all::<HtmlDivElement>(".dropzone")
|
||||
{
|
||||
dp.set_class_name("dropzone");
|
||||
}
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
|
||||
fn setup_dragzone_events<T>(dropzone: &Element, prefix: &str, dropped: rc::Rc<T>)
|
||||
where
|
||||
T: Fn(&Element) + 'static,
|
||||
{
|
||||
let prefix_copied = prefix.to_string();
|
||||
EventListener::new_with_options(
|
||||
dropzone,
|
||||
"dragover",
|
||||
EventListenerOptions::enable_prevent_default(),
|
||||
move |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with(&prefix_copied) {
|
||||
event.prevent_default();
|
||||
// event.data_transfer().unwrap().set_effect_allowed("move");
|
||||
// log!("drag over");
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_class_name("dropzone hover");
|
||||
}
|
||||
},
|
||||
)
|
||||
.forget();
|
||||
|
||||
let prefix_copied = prefix.to_string();
|
||||
EventListener::new(dropzone, "dragleave", move |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with(&prefix_copied) {
|
||||
// log!("drag leave");
|
||||
event
|
||||
.target()
|
||||
.unwrap()
|
||||
.dyn_into::<Element>()
|
||||
.unwrap()
|
||||
.set_class_name("dropzone active");
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
|
||||
let prefix_copied = prefix.to_string();
|
||||
EventListener::new(dropzone, "drop", move |event| {
|
||||
let event: &DragEvent = event.dyn_ref::<DragEvent>().unwrap();
|
||||
let drag_data = event
|
||||
.data_transfer()
|
||||
.unwrap()
|
||||
.get_data("text/plain")
|
||||
.unwrap();
|
||||
|
||||
if drag_data.starts_with(&prefix_copied) {
|
||||
let id: i64 = drag_data[prefix_copied.len() + 1..].parse().unwrap();
|
||||
let target: Element = event.target().unwrap().dyn_into().unwrap();
|
||||
let element: Element = by_id(&format!("{}-{}", &prefix_copied, id));
|
||||
let group_dropzone: Element = element.next_element_sibling().unwrap(); // = by_id(&format!("dropzone-group-{}", id));
|
||||
target.after_with_node_1(&element).unwrap();
|
||||
element.after_with_node_1(&group_dropzone).unwrap();
|
||||
|
||||
dropped(&element);
|
||||
}
|
||||
})
|
||||
.forget();
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue