Polish modal windows

examples/tapme/css/components/error.modal.component.css

@@ -0,0 +1,40 @@
+.error-modal-window__container {
+    margin: auto;
+    background-color: rgb(255, 255, 255);
+    width: 600px;
+    padding: 50px;
+    border-radius: 20px;
+    color: black;
+}
+
+body:has(.page--dark) .error-modal-window__container {
+    background-color: #d3d3d3;
+}
+
+.error-modal-window__container h1 {
+    text-align: center;
+}
+
+.error-modal-window__container div {
+    display: grid;
+    grid-template-columns: auto;
+    justify-items: center;
+}
+
+.error-modal-window__ok_button {
+    font-size: 30px;
+    margin-top: 50px;
+    height: 70px;
+    border: none;
+    width: 150px;
+    border-radius: 10px;
+    cursor: pointer;
+    background-color: #74bb74;
+    color: white;
+    transition-duration: 0.5s;
+}
+
+.error-modal-window__ok_button:hover {
+    border-radius: 30px;
+    transition-duration: 0.5s;
+}

examples/tapme/css/components/index.css

@@ -7,3 +7,4 @@
 @import "switcher.component.css";
 @import "modal-window.component.css";
 @import "switch-theme.component.css";
+@import "error.modal.component.css";

examples/tapme/index.html

@@ -46,6 +46,7 @@
         <script src="./js/pages/tracker/model/tracker.page.model.js"></script>
 
         <!-- import shared components-->
+        <script src="./js/shared/components/error.modal.component.js"></script>
         <script src="./js/shared/components/range.component.js"></script>
         <script src="./js/shared/components/modal-window.component.js"></script>
         <script src="./js/shared/components/switcher.component.js"></script>

examples/tapme/js/pages/chart/model/chart.model.js

@@ -87,11 +87,15 @@ class ChartModel extends BaseModel {
     }
 
     async selectFiles() {
-        const days = await ChartFileReaderService.readFiles();
-
-        this._setDays(days);
-        this._updateChartData();
-        this._saveToStorage();
+        try {
+            const days = await ChartFileReaderService.readFiles();
+
+            this._setDays(days);
+            this._updateChartData();
+            this._saveToStorage();
+        } catch (error) {
+            modalWindowModel.openModal('ErrorModalComponent', 'Error on reading files');
+        }
     }
 
     /**

examples/tapme/js/pages/tracker/components/buttons-line/clear-active-tasks-button.component.js

@@ -3,7 +3,7 @@ class ClearActiveTasksButtonComponent extends Component {
         return t`
             <div
                 class="icon-button icon-button--red icon-button--big"
-                onclick="${() => modalWindowModel.openModal(DeleteActiveTasksModalWindowComponent)}"
+                onclick="${() => modalWindowModel.openModal('DeleteActiveTasksModalWindowComponent')}"
             >
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g id="trash_24">

examples/tapme/js/pages/tracker/components/modal-windows/delete-active-tasks-modal-window.component.js

@@ -21,8 +21,10 @@ class DeleteActiveTasksModalWindowComponent extends Component {
                     >
                         No, close window
                     </button>
-                <div>
+                </div>
             </div>
         `;
     }
 }
+
+modalWindowModel.registerModal('DeleteActiveTasksModalWindowComponent', DeleteActiveTasksModalWindowComponent);

examples/tapme/js/shared/components/error.modal.component.js

@@ -0,0 +1,28 @@
+class ErrorModalComponent extends Component {
+    /**
+     * @param {string} message
+     */
+    constructor(message) {
+        super();
+
+        this.message = message;
+    }
+
+    toHtml() {
+        return t`
+            <div class="error-modal-window__container">
+                <h1>${this.message}</h1>
+                <div>
+                    <button
+                        class="error-modal-window__ok_button"
+                        onclick="${() => modalWindowModel.closeModal()}"
+                    >
+                        Ok
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+}
+
+modalWindowModel.registerModal('ErrorModalComponent', ErrorModalComponent);

examples/tapme/js/shared/models/modal-window.model.js

@@ -2,16 +2,34 @@ class ModalWindowModel extends BaseModel {
     constructor() {
         super();
 
+        this.modalWindowsMapping = new Map();
+
         this.modalWindowComponent = this.createObservable(undefined, 'modalWindowComponent');
 
         document.addEventListener('keydown', (event) => this._onKeyDown(event));
     }
 
+    registerModal(modalWindowName, componentClass) {
+        this.modalWindowsMapping.set(modalWindowName, componentClass);
+    }
+
     /**
-     * @param {Component} component
+     * @param {string} modalWindowName
+     * @param {object} [props]
      */
-    openModal(component) {
-        this.modalWindowComponent = component;
+    openModal(modalWindowName, props) {
+        if (this.modalWindowComponent) {
+            return;
+        }
+
+        const componentClass = this.modalWindowsMapping.get(modalWindowName);
+        if (!componentClass) {
+            console.warn(`Modal window is not registered: ${modalWindowName}`);
+
+            return;
+        }
+
+        this.modalWindowComponent = new componentClass(props);
     }
 
     closeModal() {