Added error display

via modal window instead of alert func
KikyTokamuro · Feb 26, 2023 · 4615e4e · 4615e4e
1 parent 12d785a
commit 4615e4e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 24 deletions.
diff --git a/index.lisp b/index.lisp
@@ -61,4 +61,6 @@
 		  (:img :src "./static/images/save.svg")
 		  "Save changes"))
       (:div :class "todolist-statistics-modal" :style "display:none" :title "Statistics")
+      (:div :class "todolist-error-modal" :style "display:none" :title "Error"
+	    (:div :class "todolist-error-text"))
       (:script :type "module" :src "./static/app.js")))))
diff --git a/static/style.css b/static/style.css
@@ -5,6 +5,16 @@ body {
     display: flex;
     justify-content: center;
     margin: 0 auto;
+}
+
+body, 
+#search-input, 
+#task-input, 
+#task-group, 
+.send-task-button, 
+.edit-task-button, 
+.ui-dialog .ui-dialog-title, 
+.todolist-error-text {
     font-family: "Ubuntu Mono";
     font-size: 14px;
     font-style: normal;
@@ -148,20 +158,12 @@ body {
     height: 20px;
     border: none;
     color: rgba(0, 0, 0, 1);
-    font-family: "Ubuntu Mono";
-    font-size: 14px;
-    font-style: normal;
-    font-variant: normal;
     text-align: center;
 }
 
 #task-input {
 	width: 100%;
 	color: rgba(0, 0, 0, 1);
-	font-family: "Ubuntu Mono";
-	font-size: 14px;
-	font-style: normal;
-	font-variant: normal;
 	text-align: center;
 	resize: none;
 	border-radius: 3px;
@@ -251,10 +253,6 @@ body {
 	height: 23px;
 	width: 100%;
 	color: rgba(0, 0, 0, 1);
-	font-family: "Ubuntu Mono";
-	font-size: 14px;
-	font-style: normal;
-	font-variant: normal;
 	text-align: center;
 	border-radius: 3px;
 	background: #fff;
@@ -414,10 +412,6 @@ body {
 
 .edit-task-button {
     height: 23px;
-    font-family: "Ubuntu Mono";
-    font-size: 14px;
-    font-style: normal;
-    font-variant: normal;
     border-radius: 3px;
     background: #fff;
     border: 1px solid rgba(34, 60, 80, 0.18);
@@ -457,6 +451,19 @@ body {
     margin-bottom: 10px;
 }
 
+.todolist-error-text {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+}
+
+.todolist-error-dialog .ui-dialog-titlebar {
+    background: #E7475A4D !important;
+}
+
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected, 
 .ql-snow .ql-toolbar .ql-picker-item:hover, 
 .ql-snow .ql-toolbar .ql-picker-label.ql-active, 

diff --git a/static/ui.js b/static/ui.js
@@ -61,6 +61,24 @@ export class TodolistUI {
         });
     };
 
+    /**
+     * Show error message
+     * 
+     * @param {string} err 
+     */
+    showError(err) {
+        // Show modal window
+        $(".todolist-error-modal").dialog({
+            height: window.innerHeight / 4,
+            width: window.innerWidth / 3,
+            modal: true,
+            dialogClass: 'todolist-error-dialog',
+            open: function( event, ui ) {
+                $(event.target).find(".todolist-error-text").text(err);
+            }
+        });
+    }
+
     /**
      * Show create task modal window
      */
@@ -105,7 +123,7 @@ export class TodolistUI {
             .toLowerCase();
 
         if (taskText == "" || taskGroup == "") {
-            alert("The task or its group cannot be empty");
+            this.showError("The task or its group cannot be empty");
             return;
         }
 
@@ -125,7 +143,7 @@ export class TodolistUI {
                 // Close modal
                 $(".todolist-create-task-modal").dialog("close");
             } else {
-                alert(data.ERROR);
+                this.showError(data.ERROR);
             }
         });
     };
@@ -300,7 +318,7 @@ export class TodolistUI {
                 $(`.todolist-group-button[group="${group}"]`).remove();
                 $(`.todolist-group-button[group="all"] span`).click();
             } else {
-                alert(data.ERROR);
+                this.showError(data.ERROR);
             }
         });
     };
@@ -319,7 +337,7 @@ export class TodolistUI {
             if (data.ERROR == undefined) {
                 $(`.task-element[todo-id="${data.ID}"][group="${data.GROUP}"]`).remove();
             } else {
-                alert(data.ERROR);
+                this.showError(data.ERROR);
             }
         });
     };
@@ -371,14 +389,14 @@ export class TodolistUI {
                                             // Close modal
                                             $(".todolist-edit-task-modal").dialog("close");
                                         } else {
-                                            alert(data.ERROR);
+                                            this.showError(data.ERROR);
                                         }
                                     });
                             });
                     }
                 });
             } else {
-                alert(data.ERROR);
+                this.showError(data.ERROR);
             }
         });
     };
@@ -412,7 +430,7 @@ export class TodolistUI {
                 // Change status on element
                 $(element).attr("status", newStatus);
             } else {
-                alert(data.ERROR);
+                this.showError(data.ERROR);
             }
         });
     };

diff --git a/todolist.asd b/todolist.asd
@@ -4,7 +4,7 @@
   :description "Todolist with web UI"
   :author "Daniil Archangelsky <[email protected]>"
   :license  "MIT"
-  :version "2.0.1"
+  :version "2.1.0"
   :serial t
   :depends-on (#:hunchentoot #:spinneret #:jonathan #:mito)
   :components ((:file "package")