@underpostnet/underpost/src/client/components/core/NotificationManager.js

Underpost Platform — end-to-end CI/CD and application-delivery toolchain CLI. Covers bare metal, Kubernetes, K3s, kubeadm, LXD, container/image orchestration, secrets, databases, cron jobs, monitoring, SSH, runners, PWA + Workbox delivery, and release orc

import { getId, getIsoDate } from './CommonJs.js';
import { Css, Themes } from './Css.js';
import { Modal } from './Modal.js';
import { append, prepend, s } from './VanillaJs.js';
class NotificationManager {
  static Types = ['success', 'error', 'warning', 'info'];
  static async RenderBoard(options) {
    NotificationManager.options = options;
    append(
      'body',
      html`
        <style>
          .notification-board-container {
            right: 5px !important;
            width: 300px !important;
            bottom: ${5 + (options?.heightBottomBar ? options.heightBottomBar : 0)}px !important;
            z-index: 11 !important;
          }
          .notification-board-title {
            padding: 11px !important;
          }
          .notification-manager-date {
            font-size: 20px !important;
            color: #7a7a7a !important;
          }
        </style>
        <div class="fix notification-board-container"></div>
      `,
    );
  }
  static Tokens = {};
  static async Push(options = { status: '', html: '' }) {
    const { barConfig } = await Themes[Css.currentTheme](); // newInstance
    barConfig.buttons.maximize.disabled = true;
    barConfig.buttons.minimize.disabled = true;
    barConfig.buttons.restore.disabled = true;
    barConfig.buttons.menu.disabled = true;
    const idNotification = getId(NotificationManager.Tokens, 'board-notification-');
    NotificationManager.Tokens[idNotification] = {};
    await Modal.instance({
      title: html`<div class="in notification-manager-date">${getIsoDate(new Date())}</div>
        ${options.html}`,
      html: '',
      id: idNotification,
      selector: `.notification-board-container`,
      class: 'in',
      titleClass: 'notification-board-title',
      renderType: 'prepend',
      barConfig,
      style: {
        width: '300px',
      },
      mode: 'dropNotification',
      status: options.status,
    });
    setTimeout(() => {
      if (s(`.btn-close-${idNotification}`)) s(`.btn-close-${idNotification}`).click();
    }, 2000);
  }
  static NotificationScheme = {
    // Visual Options
    body: '<String>',
    icon: '<URL String>',
    image: '<URL String>',
    badge: '<URL String>',
    dir: "<String of 'auto' | 'ltr' | 'rtl'>",
    timestamp: '<Long>',
    // Both visual & behavioral options
    actions: '<Array of Strings>',
    data: '<Anything>',
    // Behavioral Options
    tag: '<String>',
    requireInteraction: '<boolean>',
    renotify: '<Boolean>',
    vibrate: '<Array of Integers>',
    sound: '<URL String>',
    silent: '<Boolean>',
  };
}
export { NotificationManager };