Added toast function for creating toast notifications

This commit is contained in:
xeovalyte 2024-03-12 15:42:40 +01:00
parent abad7e2b40
commit 57aa1a356c
No known key found for this signature in database
7 changed files with 101 additions and 0 deletions

View File

@ -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"] }

View File

@ -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;
}

View File

@ -1 +1,2 @@
pub mod navbar;
pub mod toast;

View 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>
}
}

View File

@ -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>

View File

@ -1 +1,2 @@
pub mod surrealdb;
pub mod toast;

View 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);
}