toast

mstgnz · Jul 7, 2024 · 6fe677a · 6fe677a
1 parent 725c386
commit 6fe677a
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 31 deletions.
diff --git 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;
 }
diff --git 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 });
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -143,6 +143,8 @@
         {{block "content" .}}{{end}}
     </main>
 
+    <div id="toast"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>