@underpostnet/cyberia 3.2.80

package/src/client/components/default/AppStoreDefault.js

@@ -0,0 +1,5 @@
+import { AppStore } from '../core/AppStore.js';
+
+const AppStoreDefault = AppStore.create();
+
+export { AppStoreDefault };

package/src/client/components/default/CommonDefault.js

@@ -0,0 +1,29 @@
+const ModelElement = {
+  user: () => {
+    return {
+      user: {
+        _id: '',
+      },
+    };
+  },
+};
+
+const BaseElement = () => {
+  return {
+    user: {
+      main: {
+        model: {
+          ...ModelElement.user(),
+        },
+      },
+    },
+    chat: {},
+    mailer: {},
+  };
+};
+
+const DefaultParams = {
+  EVENT_CALLBACK_TIME: 45,
+};
+
+export { BaseElement, ModelElement, DefaultParams };

package/src/client/components/default/CssDefault.js

@@ -0,0 +1,27 @@
+import { subThemeManager } from '../core/Css.js';
+
+const CssCommonDefault = async () => {
+  // use  #4f46e5, #7c3aed);
+  subThemeManager.setDarkTheme('#7c3aed');
+  subThemeManager.setLightTheme('#7c3aed');
+
+  return html``;
+};
+
+class CssDefaultDark {
+  static theme = 'default-dark';
+  static dark = true;
+  static render = async () => {
+    return (await CssCommonDefault()) + html``;
+  };
+}
+
+class CssDefaultLight {
+  static theme = 'default-light';
+  static dark = false;
+  static render = async () => {
+    return (await CssCommonDefault()) + html``;
+  };
+}
+
+export { CssDefaultDark, CssCommonDefault, CssDefaultLight };

package/src/client/components/default/LogInDefault.js

@@ -0,0 +1,16 @@
+import { Auth } from '../core/Auth.js';
+import { LogIn } from '../core/LogIn.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
+
+class LogInDefault {
+  static async instance() {
+  LogIn.onLogin(async (options) => {
+    const { token, user } = options;
+    AppStoreDefault.Data.user.main.model.user = user;
+  }, { key: 'LogInDefault' });
+  const { user } = await Auth.sessionIn();
+  AppStoreDefault.Data.user.main.model.user = user;
+  }
+}
+
+export { LogInDefault };

package/src/client/components/default/LogOutDefault.js

@@ -0,0 +1,12 @@
+import { LogOut } from '../core/LogOut.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
+
+class LogOutDefault {
+  static async instance() {
+  LogOut.onLogout(async (result = { user: { _id: '' } }) => {
+    AppStoreDefault.Data.user.main.model.user = result.user;
+  }, { key: 'LogOutDefault' });
+  }
+}
+
+export { LogOutDefault };

package/src/client/components/default/RouterDefault.js

@@ -0,0 +1,47 @@
+import { loggerFactory } from '../core/Logger.js';
+import { Modal } from '../core/Modal.js';
+import { s } from '../core/VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const BannerAppTemplate = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
+
+class RouterDefault {
+  static routes() {
+    return {
+      '/': {
+        title: 'Home',
+        render: () => Modal.onHomeRouterEvent(),
+      },
+      '/home': { title: 'home', render: () => Modal.onHomeRouterEvent() },
+      '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
+      '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click() },
+      '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click() },
+      '/log-out': {
+        title: 'log-out',
+        render: () => s(`.main-btn-log-out`).click(),
+      },
+      '/account': {
+        title: 'account',
+        render: () => s(`.main-btn-account`).click(),
+      },
+      '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+      '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+      '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
+      '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
+      '/default-management': {
+        title: 'default-management',
+        render: () => s(`.main-btn-default-management`).click(),
+      },
+      '/u': { title: 'public-profile', render: () => s(`.main-btn-public-profile`).click() },
+      '/404': { title: '404 Not Found', render: () => s(`.main-btn-404`).click() },
+      '/500': { title: '500 Server Error', render: () => s(`.main-btn-500`).click() },
+    };
+  }
+
+  static instance() {
+    return { Routes: RouterDefault.routes };
+  }
+}
+
+export { RouterDefault, BannerAppTemplate };

package/src/client/components/default/SettingsDefault.js

@@ -0,0 +1,16 @@
+import { Css } from '../core/Css.js';
+import { FullScreen } from '../core/FullScreen.js';
+import { Translate } from '../core/Translate.js';
+import { Worker } from '../core/Worker.js';
+
+class SettingsDefault {
+  static async instance() {
+    let render = await FullScreen.RenderSetting();
+    render += await Css.RenderSetting();
+    render += await Translate.RenderSetting();
+    render += await Worker.RenderSetting();
+    return render;
+  }
+}
+
+export { SettingsDefault };

package/src/client/components/default/SignUpDefault.js

@@ -0,0 +1,11 @@
+import { SignUp } from '../core/SignUp.js';
+
+class SignUpDefault {
+  static instance() {
+  SignUp.onSignup(async (options) => {
+    const { user } = options;
+  }, { key: 'SignUpDefault' });
+  }
+}
+
+export { SignUpDefault };

package/src/client/components/default/SocketIoDefault.js

@@ -0,0 +1,6 @@
+import { SocketIoHandlerProvider } from '../core/SocketIoHandler.js';
+import { AppStoreDefault } from './AppStoreDefault.js';
+
+const SocketIoDefault = SocketIoHandlerProvider.create(AppStoreDefault);
+
+export { SocketIoDefault };

package/src/client/components/default/TranslateDefault.js

@@ -0,0 +1,7 @@
+import { Translate } from '../core/Translate.js';
+
+class TranslateDefault {
+  static async instance() {}
+}
+
+export { TranslateDefault };

package/src/client/components/itemledger/AppShellItemledger.js

@@ -0,0 +1,353 @@
+import { Account } from '../core/Account.js';
+import { BtnIcon } from '../core/BtnIcon.js';
+import { getId, newInstance } from '../core/CommonJs.js';
+import { Css, darkTheme, ThemeEvents, Themes } from '../core/Css.js';
+import { EventsUI } from '../core/EventsUI.js';
+import { LogIn } from '../core/LogIn.js';
+import { LogOut } from '../core/LogOut.js';
+import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
+import { SignUp } from '../core/SignUp.js';
+import { Translate } from '../core/Translate.js';
+import { htmls, s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
+import { AppStoreItemledger } from './AppStoreItemledger.js';
+import Sortable from 'sortablejs';
+import { RouterItemledger, BannerAppTemplate } from './RouterItemledger.js';
+import { SettingsItemledger } from './SettingsItemledger.js';
+import { Badge } from '../core/Badge.js';
+import { Docs } from '../core/Docs.js';
+import { Recover } from '../core/Recover.js';
+import { DefaultManagement } from '../../services/default/default.management.js';
+
+class AppShellItemledger {
+  static Data = {};
+  static async instance(options = { htmlMainBody: () => html`` }) {
+    const id = getId(AppShellItemledger.Data, 'menu-');
+    AppShellItemledger.Data[id] = {};
+    const RouterInstance = RouterItemledger.instance();
+
+    const { barConfig } = await Themes[Css.currentTheme]();
+
+    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
+    const barMode = undefined; // 'top-bottom-bar';
+    await Modal.instance({
+      id: 'modal-menu',
+      html: html`
+        <div class="fl menu-btn-container">
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/home.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('home')}</span>`,
+            }),
+            // style: 'display: none',
+            attrs: `data-id="home"`,
+            tabHref: `${getProxyPath()}`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('home')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-log-in',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/log-in.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-in')}</span>`,
+            }),
+            attrs: `data-id="log-in"`,
+            tabHref: `${getProxyPath()}log-in`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-in')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-sign-up',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/sign-up.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('sign-up')}</span>`,
+            }),
+            attrs: `data-id="sign-up"`,
+            tabHref: `${getProxyPath()}sign-up`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('sign-up')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-log-out',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/log-out.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('log-out')}</span>`,
+            }),
+            attrs: `data-id="log-out"`,
+            style: 'display: none',
+            tabHref: `${getProxyPath()}log-out`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('log-out')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-account',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/account.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('account')}</span>`,
+            }),
+            style: 'display: none',
+            attrs: `data-id="account"`,
+            tabHref: `${getProxyPath()}account`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('account')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-settings',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<img class="inl itemledger-menu-icon" src="${getProxyPath()}assets/ui-icons/settings.png" />`,
+              text: html`<span class="menu-label-text">${Translate.instance('settings')}</span>`,
+            }),
+            attrs: `data-id="settings"`,
+            tabHref: `${getProxyPath()}settings`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('settings')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-docs hide',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-book"></i>`,
+              text: html`<span class="menu-label-text">${Translate.instance('docs')}</span>`,
+            }),
+            attrs: `data-id="docs"`,
+            tabHref: `${getProxyPath()}docs`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('docs')),
+          })}
+          ${await BtnIcon.instance({
+            class: 'in wfa main-btn-menu main-btn-recover hide',
+            useMenuBtn: true,
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+              text: html`<span class="menu-label-text">${Translate.instance('recover')}</span>`,
+            }),
+            attrs: `data-id="recover"`,
+            tabHref: `${getProxyPath()}recover`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption('recover')),
+          })}
+        </div>
+      `,
+      barConfig: newInstance(barConfig),
+      title: BannerAppTemplate,
+      // titleClass: 'hide',
+      titleRender: () => {
+        ThemeEvents['titleRender'] = () => {
+          const srcLogo = `${getProxyPath()}assets/ui-icons/itemledger.png`;
+          htmls('.action-btn-app-icon-render', html`<img class="inl top-bar-app-icon" src="${srcLogo}" />`);
+        };
+        setTimeout(ThemeEvents['titleRender']);
+        return '';
+      },
+      mode: 'slide-menu',
+      RouterInstance,
+      htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
+      searchCustomImgClass: 'itemledger-menu-icon',
+    });
+
+    AppShellItemledger.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
+      animation: 150,
+      group: `menu-sortable`,
+      forceFallback: true,
+      fallbackOnBody: true,
+      handle: '.handle-btn-container',
+      store: {
+        /**
+         * Get the order of elements. Called once during initialization.
+         * @param   {Sortable}  sortable
+         * @returns {Array}
+         */
+        get: function (sortable) {
+          const order = localStorage.getItem(sortable.options.group.name);
+          return order ? order.split('|') : [];
+        },
+
+        /**
+         * Save the order of elements. Called onEnd (when the item is dropped).
+         * @param {Sortable}  sortable
+         */
+        set: function (sortable) {
+          const order = sortable.toArray();
+          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        },
+      },
+      // chosenClass: 'css-class',
+      // ghostClass: 'css-class',
+      // Element dragging ended
+      onEnd: function (/**Event*/ evt) {
+        // console.log('Sortable onEnd', evt);
+        // console.log('evt.oldIndex', evt.oldIndex);
+        // console.log('evt.newIndex', evt.newIndex);
+        const slotId = Array.from(evt.item.classList).pop();
+        // console.log('slotId', slotId);
+        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+
+        // var itemEl = evt.item; // dragged HTMLElement
+        // evt.to; // target list
+        // evt.from; // previous list
+        // evt.oldIndex; // element's old index within old parent
+        // evt.newIndex; // element's new index within new parent
+        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        // evt.clone; // the clone element
+        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    });
+
+    EventsUI.onClick(`.main-btn-sign-up`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-sign-up',
+        route: 'sign-up',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl itemledger-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/sign-up.png" />`,
+          text: `<span class='inl itemledger-text-title-modal'>${Translate.instance('sign-up')}</span>`,
+        }),
+        html: async () => await SignUp.instance({ idModal: 'modal-sign-up' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-out`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-log-out',
+        route: 'log-out',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl itemledger-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/log-out.png" />`,
+          text: `<span class='inl itemledger-text-title-modal'>${Translate.instance('log-out')}</span>`,
+        }),
+        html: async () => await LogOut.instance(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-in`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-log-in',
+        route: 'log-in',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl itemledger-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/log-in.png" />`,
+          text: `<span class='inl itemledger-text-title-modal'>${Translate.instance('log-in')}</span>`,
+        }),
+        html: async () => await LogIn.instance(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-account`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-account',
+        route: 'account',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl itemledger-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/account.png" />`,
+          text: `<span class='inl itemledger-text-title-modal'>${Translate.instance('account')}</span>`,
+        }),
+        html: async () =>
+          await Account.instance({
+            idModal: 'modal-account',
+            user: AppStoreItemledger.Data.user.main.model.user,
+            disabled: [],
+          }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-settings`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-settings',
+        route: 'settings',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img
+            class="inl itemledger-menu-icon-modal"
+            src="${getProxyPath()}assets/ui-icons/settings.png"
+          />`,
+          text: `<span class='inl itemledger-text-title-modal'>${Translate.instance('settings')}</span>`,
+        }),
+        html: async () => await SettingsItemledger.instance({ idModal: 'modal-settings' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-docs`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-docs',
+        route: 'docs',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-book"></i>`,
+          text: Translate.instance('docs'),
+        }),
+        html: async () =>
+          await Docs.instance({
+            idModal: 'modal-docs',
+          }),
+        handleType: 'bar',
+        observer: true,
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-recover`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.instance({
+        id: 'modal-recover',
+        route: 'recover',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+          text: Translate.instance('recover'),
+        }),
+        html: async () =>
+          await Recover.instance({ idModal: 'modal-recover', user: AppStoreItemledger.Data.user.main.model.user }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+  }
+}
+
+export { AppShellItemledger };

package/src/client/components/itemledger/AppStoreItemledger.js

@@ -0,0 +1,5 @@
+import { AppStore } from '../core/AppStore.js';
+
+const AppStoreItemledger = AppStore.create();
+
+export { AppStoreItemledger };