From 6fe677ae182a6012b55725bb52cd40f638aac0df Mon Sep 17 00:00:00 2001
From: Mesut GENEZ <genezmesut@gmail.com>
Date: Sun, 7 Jul 2024 23:29:20 +0300
Subject: [PATCH] toast

---
 assets/css/custom.css                    | 13 +++++++++++++
 assets/js/custom.js                      | 19 +++++++++++++++++++
 handler/web/notification.go              | 12 ++++++------
 handler/web/request.go                   |  8 ++++----
 handler/web/schedule.go                  |  4 ++--
 handler/web/webhook.go                   |  4 ++--
 views/components/group/list.gohtml       |  3 +--
 views/components/group/new.gohtml        |  1 -
 views/components/notification/new.gohtml |  9 +++------
 views/components/request/new.gohtml      |  6 ++----
 views/components/schedule/new.gohtml     |  3 +--
 views/components/setting/user-new.gohtml |  3 +--
 views/index.gohtml                       |  2 ++
 13 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index acdf7e2..7f84b66 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,3 +1,16 @@
 * {
     box-shadow: none !important
+}
+
+#toast {
+    position: fixed;
+    padding: 10px;
+    width: 30%;
+    left: 35%;
+    bottom: 20px;
+    border-radius: 10px;
+    border: solid 1px #ddd;
+    color: brown;
+    text-transform: lowercase;
+    display: none;
 }
\ No newline at end of file
diff --git a/assets/js/custom.js b/assets/js/custom.js
index e69de29..5df2074 100644
--- a/assets/js/custom.js
+++ b/assets/js/custom.js
@@ -0,0 +1,19 @@
+let toastTimeout;
+const toast = document.getElementById('toast');
+const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+            // Display toast
+            toast.style.display = 'block';
+            // Clear previous timeout if any
+            if (toastTimeout) {
+                clearTimeout(toastTimeout);
+            }
+            // Hide toast after 5 seconds
+            toastTimeout = setTimeout(() => {
+                toast.style.display = 'none';
+            }, 5000);
+        }
+    }
+});
+observer.observe(toast, { childList: true });
\ No newline at end of file
diff --git a/handler/web/notification.go b/handler/web/notification.go
index 89e303e..14f54c3 100644
--- a/handler/web/notification.go
+++ b/handler/web/notification.go
@@ -92,7 +92,7 @@ func (h *NotificationHandler) EditHandler(w http.ResponseWriter, r *http.Request
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/notifications/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/notifications/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td><input name="title" class="form-control" value="%s"></td>
             <td><input name="content" class="form-control" value="%s"></td>
@@ -112,7 +112,7 @@ func (h *NotificationHandler) EditHandler(w http.ResponseWriter, r *http.Request
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/notifications">Cancel</button>
+				<button class="btn btn-warning" hx-get="/notifications-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/notifications/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
@@ -421,7 +421,7 @@ func (h *NotificationHandler) EmailEditHandler(w http.ResponseWriter, r *http.Re
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/notifications/email/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/notifications/email/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td>%s</td>
             <td><input name="email" class="form-control" value="%s" /></td>
@@ -433,7 +433,7 @@ func (h *NotificationHandler) EmailEditHandler(w http.ResponseWriter, r *http.Re
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/notifications">Cancel</button>
+				<button class="btn btn-warning" hx-get="/notifications-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/notifications/email/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
@@ -610,7 +610,7 @@ func (h *NotificationHandler) MessageEditHandler(w http.ResponseWriter, r *http.
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/notifications/message/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/notifications/message/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td>%s</td>
             <td><input name="text" class="form-control" value="%s" /></td>
@@ -622,7 +622,7 @@ func (h *NotificationHandler) MessageEditHandler(w http.ResponseWriter, r *http.
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/notifications">Cancel</button>
+				<button class="btn btn-warning" hx-get="/notifications-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/notifications/message/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
diff --git a/handler/web/request.go b/handler/web/request.go
index fe84240..1939d20 100644
--- a/handler/web/request.go
+++ b/handler/web/request.go
@@ -83,7 +83,7 @@ func (h *RequestHandler) EditHandler(w http.ResponseWriter, r *http.Request) err
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/requests/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/requests/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td><input name="url" class="form-control" value="%s"></td>
             <td><select class="form-select" name="method">
@@ -102,7 +102,7 @@ func (h *RequestHandler) EditHandler(w http.ResponseWriter, r *http.Request) err
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/requests">Cancel</button>
+				<button class="btn btn-warning" hx-get="/requests-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/requests/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
@@ -398,7 +398,7 @@ func (h *RequestHandler) HeaderEditHandler(w http.ResponseWriter, r *http.Reques
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/requests/headers/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/requests/headers/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td><input name="key" class="form-control" value="%s" /></td>
             <td><input name="value" class="form-control" value="%s" /></td>
@@ -410,7 +410,7 @@ func (h *RequestHandler) HeaderEditHandler(w http.ResponseWriter, r *http.Reques
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/requests">Cancel</button>
+				<button class="btn btn-warning" hx-get="/requests-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/requests/headers/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
diff --git a/handler/web/schedule.go b/handler/web/schedule.go
index 2290e59..9bec194 100644
--- a/handler/web/schedule.go
+++ b/handler/web/schedule.go
@@ -104,7 +104,7 @@ func (h *ScheduleHandler) EditHandler(w http.ResponseWriter, r *http.Request) er
 	}
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/schedules/%d" hx-trigger='cancel' hx-ext="json-enc" class='editing'>
+		<tr hx-put="/schedules/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td>%s</td>
             <td>%s</td>
@@ -121,7 +121,7 @@ func (h *ScheduleHandler) EditHandler(w http.ResponseWriter, r *http.Request) er
             <td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/schedules">Cancel</button>
+				<button class="btn btn-warning" hx-get="/schedules-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/schedules/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
diff --git a/handler/web/webhook.go b/handler/web/webhook.go
index c853fe1..c802e3e 100644
--- a/handler/web/webhook.go
+++ b/handler/web/webhook.go
@@ -81,7 +81,7 @@ func (h *WebhookHandler) EditHandler(w http.ResponseWriter, r *http.Request) err
 	scheduleList += "</select>"
 
 	form := fmt.Sprintf(`
-		<tr hx-put="/webhooks/%d" hx-trigger='cancel'  hx-ext="json-enc" class='editing'>
+		<tr hx-put="/webhooks/%d" hx-trigger='cancel' hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" class='editing'>
 			<th scope="row">%d</th>
             <td>%s</td>
             <td>%s</td>
@@ -93,7 +93,7 @@ func (h *WebhookHandler) EditHandler(w http.ResponseWriter, r *http.Request) err
 			<td>%s</td>
 			<td>
 				<div class="hstack gap-1">
-				<button class="btn btn-warning" hx-get="/webhooks">Cancel</button>
+				<button class="btn btn-warning" hx-get="/webhooks-pagination" hx-target="#tbody" hx-swap="innerHTML">Cancel</button>
 				<button class="btn btn-danger" hx-put="/webhooks/%d" hx-include="closest tr">Save</button>
 				</div>
 			</td>
diff --git a/views/components/group/list.gohtml b/views/components/group/list.gohtml
index cc2f122..b2d172e 100644
--- a/views/components/group/list.gohtml
+++ b/views/components/group/list.gohtml
@@ -41,7 +41,7 @@
                 <h5 class="modal-title">Group Update</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <form hx-put="/groups/0" hx-target="#change-toast" hx-ext="json-enc" novalidate autocomplete="off">
+            <form hx-put="/groups/0" hx-target="#toast" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="modal-body">
                 <div class="form-floating mb-2">
                     <input type="text" class="form-control" name="name" placeholder="Name" required>
@@ -63,7 +63,6 @@
                     </select>
                     <label for="active">Status</label>
                 </div>
-                <span id="change-toast"></span>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
diff --git a/views/components/group/new.gohtml b/views/components/group/new.gohtml
index 889252b..d85619c 100644
--- a/views/components/group/new.gohtml
+++ b/views/components/group/new.gohtml
@@ -25,7 +25,6 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Save</button>
-            <span id="toast"></span>
         </form>
     </div>
 </div>
diff --git a/views/components/notification/new.gohtml b/views/components/notification/new.gohtml
index f2805f3..47bfdab 100644
--- a/views/components/notification/new.gohtml
+++ b/views/components/notification/new.gohtml
@@ -4,7 +4,7 @@
 
 <div class="row">
     <div class="col-4 mt-2">
-        <form hx-post="/notifications" hx-target="#notification-toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/notifications" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <input type="text" class="form-control" name="title" placeholder="title" required>
                 <label for="title">title</label>
@@ -35,11 +35,10 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Notification Save</button>
-            <span id="notification-toast"></span>
         </form>
     </div>
     <div class="col-4 mt-2">
-        <form hx-post="/notifications/email" hx-target="#email-toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/notifications/email" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <select class="form-select" name="notification_id" required>
                     <option value="0" selected>Choose Notification</option>
@@ -61,11 +60,10 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Email Save</button>
-            <span id="email-toast"></span>
         </form>
     </div>
     <div class="col-4 mt-2">
-        <form hx-post="/notifications/message" hx-target="#message-toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/notifications/message" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <select class="form-select" name="notification_id" required>
                     <option value="0" selected>Choose Notification</option>
@@ -87,7 +85,6 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Message Save</button>
-            <span id="message-toast"></span>
         </form>
     </div>
 </div>
diff --git a/views/components/request/new.gohtml b/views/components/request/new.gohtml
index fb632fe..54a14d3 100644
--- a/views/components/request/new.gohtml
+++ b/views/components/request/new.gohtml
@@ -3,7 +3,7 @@
 {{define "requestNew" }}
 <div class="row">
     <div class="col-6 mt-2">
-        <form hx-post="/requests" hx-target="#request-toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/requests" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <input type="text" class="form-control" name="url" placeholder="Url" required>
                 <label for="url">Url</label>
@@ -30,11 +30,10 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Request Save</button>
-            <span id="request-toast"></span>
         </form>
     </div>
     <div class="col-6 mt-2">
-        <form hx-post="/requests/headers" hx-target="#header-toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/requests/headers" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <select class="form-select" name="request_id" required>
                     <option value="0" selected>Choose Request</option>
@@ -60,7 +59,6 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Header Save</button>
-            <span id="header-toast"></span>
         </form>
     </div>
 </div>
diff --git a/views/components/schedule/new.gohtml b/views/components/schedule/new.gohtml
index e439488..24a92e7 100644
--- a/views/components/schedule/new.gohtml
+++ b/views/components/schedule/new.gohtml
@@ -3,7 +3,7 @@
 {{define "scheduleNew" }}
 <div class="row justify-content-center mt-2">
     <div class="col-8">
-        <form hx-post="/schedules" hx-target="#schedule" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/schedules" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <select class="form-select" name="group_id" required>
                     <option value="0" selected>Choose Group</option>
@@ -51,7 +51,6 @@
                 <label for="active">Status</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Schedule Save</button>
-            <span id="schedule"></span>
         </form>
     </div>
 </div>
diff --git a/views/components/setting/user-new.gohtml b/views/components/setting/user-new.gohtml
index 45ba0ef..8791615 100644
--- a/views/components/setting/user-new.gohtml
+++ b/views/components/setting/user-new.gohtml
@@ -3,7 +3,7 @@
 {{define "userNew" }}
 <div class="row justify-content-center">
     <div class="col-6 p-5">
-        <form hx-post="/settings/users/signup" hx-target="#toast" hx-ext="json-enc" novalidate autocomplete="off">
+        <form hx-post="/settings/users/signup" hx-target="#toast" hx-swap="innerHTML" hx-ext="json-enc" novalidate autocomplete="off">
             <div class="form-floating mb-2">
                 <input type="text" class="form-control" name="fullname" placeholder="Firstname Lastname" required>
                 <label for="fullname">Fullname</label>
@@ -21,7 +21,6 @@
                 <label for="password">Password</label>
             </div>
             <button type="submit" class="btn btn-primary w-100 py-2 mb-1">Sign up</button>
-            <span id="toast"></span>
         </form>
     </div>
 </div>
diff --git a/views/index.gohtml b/views/index.gohtml
index a922529..a186675 100644
--- a/views/index.gohtml
+++ b/views/index.gohtml
@@ -143,6 +143,8 @@
         {{block "content" .}}{{end}}
     </main>
 
+    <div id="toast"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>