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

Refactor toast notifications and modal dialog implementation

Browse source 
- Updated SCSS for toast notifications to support multiple toast types (success, info, warning, error) and improved layout.
- Added new SVG icons for error, info, success, and warning notifications.
- Created separate HTML templates for toast notifications and modal dialogs.
- Enhanced the dev panel with buttons to test different toast notifications and modal dialogs.
This commit is contained in:
Greg Burri 2025-04-27 12:49:39 +02:00
parent 7b9df97a32
commit cf9c6b2a3f
15 changed files with 399 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/pages/dev_panel.rs
View file

@ -1,7 +1,7 @@
use gloo::{console::log, events::EventListener};
use gloo::{console::log, events::EventListener, utils::document};
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::spawn_local;
use web_sys::{Element, HtmlInputElement};
use web_sys::{Element, HtmlElement, HtmlInputElement};
use crate::{
calendar, modal_dialog,
@ -13,10 +13,56 @@ use crate::{
pub fn setup_page() {
EventListener::new(&by_id("test-toast"), "click", move |_event| {
toast::show_message(Level::Info, "This is a message");
toast::show_message("This is a message");
})
.forget();
EventListener::new(&by_id("test-toast-success"), "click", move |_event| {
toast::show_message_level(Level::Success, "This is a success message");
})
.forget();
EventListener::new(&by_id("test-toast-error"), "click", move |_event| {
toast::show_message_level(Level::Error, "This is a error message");
})
.forget();
EventListener::new(&by_id("test-toast-info"), "click", move |_event| {
toast::show_message_level(Level::Info, "This is an info message");
})
.forget();
EventListener::new(&by_id("test-toast-warning"), "click", move |_event| {
toast::show_message_level(Level::Warning, "This is a warning message");
})
.forget();
EventListener::new(
&by_id("test-toast-success-content"),
"click",
move |_event| {
toast::show_element_level(Level::Success, "#hidden-templates .toast-test-content");
},
)
.forget();
EventListener::new(
&by_id("test-toast-success-content-initializer"),
"click",
move |_event| {
toast::show_element_level_and_initialize(
Level::Success,
"#hidden-templates .toast-test-content",
|element| {
let new_span = document().create_element("span").unwrap();
new_span.set_inner_html("Item 3");
element.append_child(&new_span).unwrap();
},
);
},
)
.forget();
EventListener::new(&by_id("test-modal-dialog"), "click", move |_event| {
spawn_local(async move {
modal_dialog::show("#hidden-templates").await;

4
frontend/src/pages/recipe_edit.rs
View file

@ -76,7 +76,6 @@ pub fn setup_page(recipe_id: i64) {
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)
@ -108,7 +107,6 @@ pub fn setup_page(recipe_id: i64) {
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)
@ -708,7 +706,7 @@ async fn reload_recipes_list(current_recipe_id: i64) {
.await
{
Err(error) => {
toast::show_message(Level::Info, &format!("Internal server error: {}", error));
toast::show_message_level(Level::Error, &format!("Internal server error: {}", error));
}
Ok(response) => {
let list = document().get_element_by_id("recipes-list").unwrap();

2
frontend/src/pages/recipe_view.rs
View file

@ -52,7 +52,7 @@ pub fn setup_page(recipe_id: i64, is_user_logged: bool, first_day_of_the_week: W
.shedule_recipe(recipe_id, date, servings, add_ingredients_to_shopping_list)
.await
{
toast::show_element_and_initialize(
toast::show_element_level_and_initialize(
match result {
ScheduleRecipeResult::Ok => Level::Success,
ScheduleRecipeResult::RecipeAlreadyScheduledAtThisDate => {