diff --git a/index.lisp b/index.lisp index 4cee0a9..bacf987 100644 --- 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 index a214947..5626cff 100644 --- 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 index 33d0976..5f5e83d 100644 --- 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 index 142c209..997917e 100644 --- a/todolist.asd +++ b/todolist.asd @@ -4,7 +4,7 @@ :description "Todolist with web UI" :author "Daniil Archangelsky " :license "MIT" - :version "2.0.1" + :version "2.1.0" :serial t :depends-on (#:hunchentoot #:spinneret #:jonathan #:mito) :components ((:file "package")