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

Recipe edit (WIP): forms to edit groups, steps and ingredients

Browse source
This commit is contained in:
Greg Burri 2024-12-26 01:39:07 +01:00
parent dd05a673d9
commit 07b7ff425e
25 changed files with 881 additions and 203 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/Cargo.toml
View file

@ -13,6 +13,10 @@ default = ["console_error_panic_hook"]
[dependencies]
common = { path = "../common" }
ron = "0.8"
serde = { version = "1.0", features = ["derive"] }
thiserror = "2"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = [
@ -26,6 +30,7 @@ web-sys = { version = "0.3", features = [
"EventTarget",
"HtmlLabelElement",
"HtmlInputElement",
"HtmlTextAreaElement",
"HtmlSelectElement",
] }

260
frontend/src/handles.rs
View file

@ -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(&current_time);
return;
}
estimated_time.set_value(&current_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(())
}

13
frontend/src/lib.rs
View file

@ -1,10 +1,10 @@
mod handles;
mod request;
mod toast;
mod utils;
use gloo::{console::log, events::EventListener, utils::window};
use gloo::utils::window;
use wasm_bindgen::prelude::*;
use web_sys::console;
// #[wasm_bindgen]
// extern "C" {
@ -27,17 +27,14 @@ pub fn main() -> Result<(), JsValue> {
let location = window().location().pathname()?;
let path: Vec<&str> = location.split('/').skip(1).collect();
match path[..] {
["recipe", "edit", id] => {
let id = id.parse::<i64>().unwrap(); // TODO: remove unwrap.
handles::recipe_edit(id)?;
}
if let ["recipe", "edit", id] = path[..] {
let id = id.parse::<i64>().unwrap(); // TODO: remove unwrap.
handles::recipe_edit(id)?;
// Disable: user editing data are now submitted as classic form data.
// ["user", "edit"] => {
// handles::user_edit(document)?;
// }
_ => (),
}
Ok(())

132
frontend/src/request.rs Normal file
View file

@ -0,0 +1,132 @@
use gloo::net::http::{Request, RequestBuilder};
use serde::{de::DeserializeOwned, Serialize};
use thiserror::Error;
use common::ron_api;
use crate::toast::{self, Level};
#[derive(Error, Debug)]
pub enum Error {
#[error("Gloo error: {0}")]
Gloo(#[from] gloo::net::Error),
#[error("RON Spanned error: {0}")]
Ron(#[from] ron::error::SpannedError),
#[error("HTTP error: {0}")]
Http(String),
#[error("Unknown error: {0}")]
Other(String),
}
type Result<T> = std::result::Result<T, Error>;
const CONTENT_TYPE: &str = "Content-Type";
const CONTENT_TYPE_RON: &str = "application/ron";
async fn req_with_body<T, U>(
api_name: &str,
body: U,
method_fn: fn(&str) -> RequestBuilder,
) -> Result<T>
where
T: DeserializeOwned,
U: Serialize,
{
let url = format!("/ron-api/{}", api_name);
let request_builder = method_fn(&url).header(CONTENT_TYPE, CONTENT_TYPE_RON);
send_req(request_builder.body(ron_api::to_string(body))?).await
}
async fn req_with_params<'a, T, U, V>(
api_name: &str,
params: U,
method_fn: fn(&str) -> RequestBuilder,
) -> Result<T>
where
T: DeserializeOwned,
U: IntoIterator<Item = (&'a str, V)>,
V: AsRef<str>,
{
let url = format!("/ron-api/{}", api_name);
let request_builder = method_fn(&url)
.header(CONTENT_TYPE, CONTENT_TYPE_RON)
.query(params);
send_req(request_builder.build()?).await
}
async fn send_req<T>(request: Request) -> Result<T>
where
T: DeserializeOwned,
{
match request.send().await {
Err(error) => {
toast::show(Level::Info, &format!("Internal server error: {}", error));
Err(Error::Gloo(error))
}
Ok(response) => {
if !response.ok() {
toast::show(
Level::Info,
&format!("HTTP error: {}", response.status_text()),
);
Err(Error::Http(response.status_text()))
} else {
// Ok(())
Ok(ron::de::from_bytes::<T>(&response.binary().await?)?)
}
}
}
}
pub async fn put<T, U>(api_name: &str, body: U) -> Result<T>
where
T: DeserializeOwned,
U: Serialize,
{
req_with_body(api_name, body, Request::put).await
}
pub async fn post<T, U>(api_name: &str, body: U) -> Result<T>
where
T: DeserializeOwned,
U: Serialize,
{
req_with_body(api_name, body, Request::post).await
}
pub async fn delete<T, U>(api_name: &str, body: U) -> Result<T>
where
T: DeserializeOwned,
U: Serialize,
{
req_with_body(api_name, body, Request::delete).await
}
pub async fn get<'a, T, U, V>(api_name: &str, params: U) -> Result<T>
where
T: DeserializeOwned,
U: IntoIterator<Item = (&'a str, V)>,
V: AsRef<str>,
{
req_with_params(api_name, params, Request::get).await
}
// pub async fn api_request_get<T>(api_name: &str, params: QueryParams) -> Result<T, String>
// where
// T: DeserializeOwned,
// {
// match Request::get(&format!("/ron-api/recipe/{}?{}", api_name, params))
// .header("Content-Type", "application/ron")
// .send()
// .await
// {
// Err(error) => {
// toast::show(Level::Info, &format!("Internal server error: {}", error));
// Err(error.to_string())
// }
// Ok(response) => Ok(ron::de::from_bytes::<T>(&response.binary().await.unwrap()).unwrap()),
// }
// }

3
frontend/src/toast.rs
View file

@ -1,5 +1,4 @@
use gloo::{console::log, timers::callback::Timeout, utils::document};
use web_sys::{console, Document, HtmlInputElement};
use gloo::{timers::callback::Timeout, utils::document};
pub enum Level {
Success,