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"
|
||||
serde = "1.0.196"
|
||||
serde_json = "1.0.113"
|
||||
rand = "0.8.5"
|
||||
|
||||
# utils
|
||||
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
|
||||
|
@ -110,3 +110,40 @@ form {
|
||||
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 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.
|
||||
provide_meta_context();
|
||||
util::surrealdb::init_surrealdb();
|
||||
util::toast::init_toast();
|
||||
|
||||
let websocket = expect_context::<util::surrealdb::SurrealContext>();
|
||||
let _participants = use_context::<util::surrealdb::ParticipantsContext>()
|
||||
@ -58,6 +59,7 @@ pub fn App() -> impl IntoView {
|
||||
}
|
||||
>
|
||||
<Router>
|
||||
<components::toast::Toasts />
|
||||
<components::navbar::Navbar />
|
||||
<main>
|
||||
<Routes>
|
||||
|
@ -1 +1,2 @@
|
||||
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