Added toast function for creating toast notifications
This commit is contained in:
parent
abad7e2b40
commit
57aa1a356c
@ -16,6 +16,7 @@ console_error_panic_hook = "0.1"
|
|||||||
leptos-use = "0.10.2"
|
leptos-use = "0.10.2"
|
||||||
serde = "1.0.196"
|
serde = "1.0.196"
|
||||||
serde_json = "1.0.113"
|
serde_json = "1.0.113"
|
||||||
|
rand = "0.8.5"
|
||||||
|
|
||||||
# utils
|
# utils
|
||||||
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
|
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
|
||||||
|
@ -110,3 +110,40 @@ form {
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toastcontainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
gap: 10px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastcontainer span {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 300px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toastcontainer span:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
background-color: #f29826;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: #d9534f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-color: #2181d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
background-color: #4bb24b;
|
||||||
|
}
|
||||||
|
@ -1 +1,2 @@
|
|||||||
pub mod navbar;
|
pub mod navbar;
|
||||||
|
pub mod toast;
|
||||||
|
18
application/src/components/toast.rs
Normal file
18
application/src/components/toast.rs
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
use crate::util;
|
||||||
|
use leptos::*;
|
||||||
|
|
||||||
|
/// Navigation bar
|
||||||
|
#[component]
|
||||||
|
pub fn Toasts() -> impl IntoView {
|
||||||
|
let notifications = expect_context::<util::toast::NotificationsContext>();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="toastcontainer">
|
||||||
|
{move || notifications.notifications.get().into_iter()
|
||||||
|
.map(|n| view! {
|
||||||
|
<span on:click=move |_| util::toast::remove_toast((*n.id).to_string()) class=n.option>{n.text}</span>
|
||||||
|
}
|
||||||
|
).collect_view()}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
@ -20,6 +20,7 @@ pub fn App() -> impl IntoView {
|
|||||||
// Provides context that manages stylesheets, titles, meta tags, etc.
|
// Provides context that manages stylesheets, titles, meta tags, etc.
|
||||||
provide_meta_context();
|
provide_meta_context();
|
||||||
util::surrealdb::init_surrealdb();
|
util::surrealdb::init_surrealdb();
|
||||||
|
util::toast::init_toast();
|
||||||
|
|
||||||
let websocket = expect_context::<util::surrealdb::SurrealContext>();
|
let websocket = expect_context::<util::surrealdb::SurrealContext>();
|
||||||
let _participants = use_context::<util::surrealdb::ParticipantsContext>()
|
let _participants = use_context::<util::surrealdb::ParticipantsContext>()
|
||||||
@ -58,6 +59,7 @@ pub fn App() -> impl IntoView {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Router>
|
<Router>
|
||||||
|
<components::toast::Toasts />
|
||||||
<components::navbar::Navbar />
|
<components::navbar::Navbar />
|
||||||
<main>
|
<main>
|
||||||
<Routes>
|
<Routes>
|
||||||
|
@ -1 +1,2 @@
|
|||||||
pub mod surrealdb;
|
pub mod surrealdb;
|
||||||
|
pub mod toast;
|
||||||
|
41
application/src/util/toast.rs
Normal file
41
application/src/util/toast.rs
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
use leptos::*;
|
||||||
|
use rand::distributions::{Alphanumeric, DistString};
|
||||||
|
|
||||||
|
#[derive(Clone)]
|
||||||
|
pub struct NotificationsContext {
|
||||||
|
pub notifications: ReadSignal<Vec<ToastNotification>>,
|
||||||
|
pub set_notifications: WriteSignal<Vec<ToastNotification>>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone)]
|
||||||
|
pub struct ToastNotification {
|
||||||
|
pub text: String,
|
||||||
|
pub option: String, // error, warning, info, success
|
||||||
|
pub id: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn init_toast() {
|
||||||
|
let (notifications, set_notifications) = create_signal::<Vec<ToastNotification>>(vec![]);
|
||||||
|
provide_context(NotificationsContext {
|
||||||
|
notifications,
|
||||||
|
set_notifications,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn add_toast(text: String, option: String) {
|
||||||
|
let context = expect_context::<NotificationsContext>();
|
||||||
|
|
||||||
|
let id = Alphanumeric.sample_string(&mut rand::thread_rng(), 4);
|
||||||
|
|
||||||
|
let mut vec = context.notifications.get();
|
||||||
|
vec.push(ToastNotification { text, option, id });
|
||||||
|
context.set_notifications.set(vec);
|
||||||
|
}
|
||||||
|
|
||||||
|
pub fn remove_toast(id: String) {
|
||||||
|
let context = expect_context::<NotificationsContext>();
|
||||||
|
|
||||||
|
let mut vec = context.notifications.get();
|
||||||
|
vec.retain(|x| x.id != id);
|
||||||
|
context.set_notifications.set(vec);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user