HM-101. Добавлен сервис для вывода уведомлений (#41)

src/app.html

@@ -369,6 +369,25 @@
         </div>
     </template>
 
+    <!-- Шаблон уведомления -->
+    <template id="notify-message">
+        <div class="toast Notify__element" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+                <img class="rounded mr-2 Notify__icon" alt="toast_icon">
+                <strong class="mr-auto Notify__title"></strong>
+                <button type="button" class="ml-2 mb-1 close Notify__closeButton" data-dismiss="toast" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="toast-body Notify__message"></div>
+        </div>
+    </template>
+
+    <!-- Контейнер для уведомлений -->
+    <template id="notify-container">
+        <div class="NotifyContainer"></div>
+    </template>
+
 </body>
 
 </html>

src/components/notify-container/NotifyContainer.css

@@ -0,0 +1,5 @@
+.NotifyContainer {
+    position: absolute;
+    bottom: 24px;
+    right: 24px;
+}

src/components/notify-container/NotifyContainer.js

@@ -0,0 +1,12 @@
+import Component from '../component';
+import './NotifyContainer.css';
+
+class NotifyContainer extends Component {
+    constructor () {
+        super('#notify-container', document.body);
+    }
+}
+
+const notifyContainer = new NotifyContainer();
+
+export default notifyContainer;

src/components/notify-container/index.js

@@ -0,0 +1,3 @@
+import NotifyContainer from './NotifyContainer';
+
+export default NotifyContainer;

src/components/notify-message/NotifyMessage.css

@@ -0,0 +1,3 @@
+.Notify__element {
+    min-width: 240px;
+}

src/components/notify-message/NotifyMessage.js

@@ -0,0 +1,39 @@
+import Component from '../component';
+import notifyContainer from '../notify-container';
+import './NotifyMessage.css';
+
+class NotifyMessage extends Component {
+    constructor ({
+        title,
+        message,
+        icon,
+        autohide,
+    } = {}) {
+        super('#notify-message', notifyContainer.mainNode);
+
+        this.title = this.mainNode.querySelector('.Notify__title');
+        this.message = this.mainNode.querySelector('.Notify__message');
+
+        this.iconImage = this.mainNode.querySelector('.Notify__icon');
+        this.closeButton = this.mainNode.querySelector('.Notify__closeButton');
+
+        this.title.textContent = title;
+        this.message.textContent = message;
+
+        if (icon) {
+            this.iconImage.src = icon;
+        } else {
+            this.iconImage.remove();
+        }
+
+        if (autohide) {
+            this.closeButton.remove();
+        } else {
+            this.addEventListener(this.closeButton, 'click', () => {
+                this.mainNode.remove();
+            });
+        }
+    }
+}
+
+export default NotifyMessage;

src/components/notify-message/index.js

@@ -0,0 +1,3 @@
+import NotifyMessage from './NotifyMessage';
+
+export default NotifyMessage;

src/img/notify_icon_info.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg width="20px" height="20px" data-name="Layer 1" id="Layer_1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#7dccfc;}</style></defs><title/><path class="cls-1" d="M16,1A15,15,0,1,0,31,16,15,15,0,0,0,16,1Zm2,22a2,2,0,0,1-4,0V16a2,2,0,0,1,4,0ZM16,12.19A2.19,2.19,0,1,1,18.19,10,2.19,2.19,0,0,1,16,12.19Z"/></svg>

src/img/notify_icon_success.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg width="20px" height="20px" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#31AF91;}
+	.st1{fill:#FFFFFF;}
+</style><g><circle class="st0" cx="64" cy="64" r="64"/></g><g><path class="st1" d="M54.3,97.2L24.8,67.7c-0.4-0.4-0.4-1,0-1.4l8.5-8.5c0.4-0.4,1-0.4,1.4,0L55,78.1l38.2-38.2   c0.4-0.4,1-0.4,1.4,0l8.5,8.5c0.4,0.4,0.4,1,0,1.4L55.7,97.2C55.3,97.6,54.7,97.6,54.3,97.2z"/></g></svg>

src/img/notify_icon_warn.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="20" width="20" style="overflow:visible;enable-background:new 0 0 32 32" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g id="Error_1_"><g id="Error"><circle cx="16" cy="16" id="BG" r="16" style="fill:#D72828;"/><path d="M14.5,25h3v-3h-3V25z M14.5,6v13h3V6H14.5z" id="Exclamatory_x5F_Sign" style="fill:#E6E6E6;"/></g></g></g></svg>

src/services/EmitService.js

@@ -1,5 +1,6 @@
 /**
  * Класс для создвания объектов с генерацией событий
+ * @class EmitService
  */
 class EmitService {
     /**

src/services/NotifyService.js

@@ -0,0 +1,94 @@
+import * as bootstrap from 'bootstrap';
+import NotifyMessage from '../components/notify-message';
+import InfoIcon from '../img/notify_icon_info.svg';
+import WarnIcon from '../img/notify_icon_warn.svg';
+import SuccessIcon from '../img/notify_icon_success.svg';
+
+/**
+ * @interface NotifyConfig
+ * @type {Object}
+ * @property {string} title - если надо установить свой заголовок
+ * @property {boolean} notHide - установить true, чтобы сообщение не закрывалось автоматически
+ * @property {number} delay - стандартно 3000 мс, можно установить свое значение
+ */
+
+/**
+ * Класс для работы с уведомлениями
+ * @class NotifyService
+ */
+class NotifyService {
+    /**
+     * Общий метод для отображения уведомлений
+     * @private
+     */
+    _show = ({icon, title, message, autohide = false, delay = 3000}) => {
+        const messageElement = new NotifyMessage({
+            title,
+            message,
+            icon,
+            autohide,
+        });
+        const toast = new bootstrap.Toast(messageElement.mainNode, {
+            autohide,
+            delay,
+        });
+        if (autohide) {
+            setTimeout(() => {
+                messageElement.mainNode.remove();
+            }, delay + 500);
+        }
+        toast.show();
+    }
+
+    /**
+     * Сообщение со значкем Warning и заголовком "Внимание!", использовать для ошибок и предупреждений
+     * @param {string} message - сообщение уведомления
+     * @param {NotifyConfig} config - дополнительные настройки
+     */
+    warn = (message, config = {}) => {
+        const {notHide, delay, title} = config;
+        this._show({
+            icon: WarnIcon,
+            title: title || 'Внимание!',
+            message,
+            autohide: !notHide,
+            delay,
+        });
+    }
+
+    /**
+     * Сообщение со значкем Info и заголовком "Сообщение", использовать для информационных сообщений
+     * @param {string} message - сообщение уведомления
+     * @param {NotifyConfig} config - дополнительные настройки
+     */
+    info = (message, config = {}) => {
+        const {notHide, delay, title} = config;
+        this._show({
+            icon: InfoIcon,
+            title: title || 'Сообщение',
+            message,
+            autohide: !notHide,
+            delay,
+        });
+    }
+
+    /**
+     * Сообщение со значкем Success и заголовком "Выполнено!", использовать для сообщений об успешном действии
+     * @param {string} message - сообщение уведомления
+     * @param {NotifyConfig} config - дополнительные настройки
+     */
+    success = (message, config = {}) => {
+        const {notHide, delay, title} = config;
+        this._show({
+            icon: SuccessIcon,
+            title: title || 'Выполнено!',
+            message,
+            autohide: !notHide,
+            delay,
+        });
+    }
+}
+
+const notify = new NotifyService();
+
+export default notify;