From 57aa1a356ce81dfd63d2183de74692d8ab9df03f Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Tue, 12 Mar 2024 15:42:40 +0100
Subject: [PATCH] Added toast function for creating toast notifications

---
 application/Cargo.toml              |  1 +
 application/public/styles.scss      | 37 ++++++++++++++++++++++++++
 application/src/components/mod.rs   |  1 +
 application/src/components/toast.rs | 18 +++++++++++++
 application/src/lib.rs              |  2 ++
 application/src/util/mod.rs         |  1 +
 application/src/util/toast.rs       | 41 +++++++++++++++++++++++++++++
 7 files changed, 101 insertions(+)
 create mode 100644 application/src/components/toast.rs
 create mode 100644 application/src/util/toast.rs

diff --git a/application/Cargo.toml b/application/Cargo.toml
index 4b12627..2148ed8 100644
--- a/application/Cargo.toml
+++ b/application/Cargo.toml
@@ -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"] }
diff --git a/application/public/styles.scss b/application/public/styles.scss
index 6dfbded..0a0ef13 100644
--- a/application/public/styles.scss
+++ b/application/public/styles.scss
@@ -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;
+}
diff --git a/application/src/components/mod.rs b/application/src/components/mod.rs
index 302260f..1679cad 100644
--- a/application/src/components/mod.rs
+++ b/application/src/components/mod.rs
@@ -1 +1,2 @@
 pub mod navbar;
+pub mod toast;
diff --git a/application/src/components/toast.rs b/application/src/components/toast.rs
new file mode 100644
index 0000000..4245d3d
--- /dev/null
+++ b/application/src/components/toast.rs
@@ -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>
+    }
+}
diff --git a/application/src/lib.rs b/application/src/lib.rs
index 8f74d53..d229040 100644
--- a/application/src/lib.rs
+++ b/application/src/lib.rs
@@ -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>
diff --git a/application/src/util/mod.rs b/application/src/util/mod.rs
index 9538350..659d17f 100644
--- a/application/src/util/mod.rs
+++ b/application/src/util/mod.rs
@@ -1 +1,2 @@
 pub mod surrealdb;
+pub mod toast;
diff --git a/application/src/util/toast.rs b/application/src/util/toast.rs
new file mode 100644
index 0000000..860e430
--- /dev/null
+++ b/application/src/util/toast.rs
@@ -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);
+}