underpost 2.6.2

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

@@ -0,0 +1,389 @@
+import { Account } from '../core/Account.js';
+import { BtnIcon } from '../core/BtnIcon.js';
+import { getId, newInstance } from '../core/CommonJs.js';
+import { Css, 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 { getProxyPath, htmls, s } from '../core/VanillaJs.js';
+import { ElementsDefault } from './ElementsDefault.js';
+import Sortable from 'sortablejs';
+import { RouterDefault } from './RoutesDefault.js';
+import { SettingsDefault } from './SettingsDefault.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';
+
+const MenuDefault = {
+  Data: {},
+  Render: async function (options = { htmlMainBody: () => html`` }) {
+    const id = getId(this.Data, 'menu-');
+    this.Data[id] = {};
+    const RouterInstance = RouterDefault();
+    const { NameApp } = RouterInstance;
+    const { barConfig } = await Themes[Css.currentTheme]();
+    const heightTopBar = 50;
+    const heightBottomBar = 50;
+    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
+    const barMode = undefined; // 'top-bottom-bar';
+    await Modal.Render({
+      id: 'modal-menu',
+      html: html`
+        <div class="fl menu-btn-container">
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-home"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
+            }),
+            // style: 'display: none',
+            attrs: `data-id="home"`,
+            tabHref: `${getProxyPath()}`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('home')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-log-in',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sign-in-alt"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
+            }),
+            attrs: `data-id="log-in"`,
+            tabHref: `${getProxyPath()}log-in`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-in')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-sign-up',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-user-plus"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
+            }),
+            attrs: `data-id="sign-up"`,
+            tabHref: `${getProxyPath()}sign-up`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('sign-up')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-log-out',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sign-out-alt"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
+            }),
+            attrs: `data-id="log-out"`,
+            style: 'display: none',
+            tabHref: `${getProxyPath()}log-out`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-out')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-account',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-user-circle"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
+            }),
+            style: 'display: none',
+            attrs: `data-id="account"`,
+            tabHref: `${getProxyPath()}account`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('account')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-settings',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sliders-h"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
+            }),
+            attrs: `data-id="settings"`,
+            tabHref: `${getProxyPath()}settings`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-docs hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-book"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('docs')}</span>`,
+            }),
+            attrs: `data-id="docs"`,
+            tabHref: `${getProxyPath()}docs`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-recover hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
+            }),
+            attrs: `data-id="recover"`,
+            tabHref: `${getProxyPath()}recover`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('recover')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-default-management',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('default-management')}</span>`,
+            }),
+            attrs: `data-id="default-management"`,
+            tabHref: `${getProxyPath()}default-management`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
+          })}
+        </div>
+      `,
+      barConfig: newInstance(barConfig),
+      title: NameApp,
+      // titleClass: 'hide',
+      titleRender: () => {
+        setTimeout(() => {
+          htmls(`.action-btn-app-icon-render`, html`APP`);
+        });
+        return '';
+      },
+      mode: 'slide-menu',
+      heightTopBar,
+      heightBottomBar,
+      htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
+    });
+
+    this.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.Render({
+        id: 'modal-sign-up',
+        route: 'sign-up',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-user-plus"></i>`,
+          text: Translate.Render('sign-up'),
+        }),
+        html: async () => await SignUp.Render({ idModal: 'modal-sign-up' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-out`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-log-out',
+        route: 'log-out',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-sign-out-alt"></i>`,
+          text: Translate.Render('log-out'),
+        }),
+        html: async () => await LogOut.Render(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-in`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-log-in',
+        route: 'log-in',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-sign-in-alt"></i>`,
+          text: Translate.Render('log-in'),
+        }),
+        html: async () => await LogIn.Render(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-account`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-account',
+        route: 'account',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-user-circle"></i>`,
+          text: Translate.Render('account'),
+        }),
+        html: async () =>
+          await Account.Render({
+            idModal: 'modal-account',
+            user: ElementsDefault.Data.user.main.model.user,
+            disabled: [],
+          }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-settings`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-settings',
+        route: 'settings',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="fas fa-sliders-h"></i>`,
+          text: Translate.Render('settings'),
+        }),
+        html: async () => await SettingsDefault.Render({ idModal: 'modal-settings' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-docs`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-docs',
+        route: 'docs',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-book"></i>`,
+          text: Translate.Render('docs'),
+        }),
+        html: async () =>
+          await Docs.Init({
+            idModal: 'modal-docs',
+            modalOptions: {
+              barMode: undefined,
+            },
+          }),
+        handleType: 'bar',
+        observer: true,
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-recover`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-recover',
+        route: 'recover',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+          text: Translate.Render('recover'),
+        }),
+        html: async () =>
+          await Recover.Render({ idModal: 'modal-recover', user: ElementsDefault.Data.user.main.model.user }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-default-management`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-default-management',
+        route: 'default-management',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
+          text: Translate.Render('default-management'),
+        }),
+        html: async () => await DefaultManagement.RenderTable(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+  },
+};
+
+export { MenuDefault };

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

@@ -0,0 +1,48 @@
+import { loggerFactory } from '../core/Logger.js';
+import { getProxyPath, s } from '../core/VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const NameApp = html`Default`;
+
+// Router
+const RoutesDefault = () => {
+  return {
+    '/': {
+      title: 'Home',
+      render: () => s(`.main-btn-home`).click(),
+      upperCase: false,
+    },
+    '/home': { title: 'home', render: () => s(`.main-btn-home`).click() },
+    '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click(), translateTitle: true },
+    '/log-in': { title: 'log-in', render: () => s(`.main-btn-log-in`).click(), translateTitle: true },
+    '/sign-up': { title: 'sign-up', render: () => s(`.main-btn-sign-up`).click(), translateTitle: true },
+    '/log-out': {
+      title: 'log-out',
+      render: () => s(`.main-btn-log-out`).click(),
+      hideDisplay: true,
+      translateTitle: true,
+    },
+    '/account': {
+      title: 'account',
+      render: () => s(`.main-btn-account`).click(),
+      hideDisplay: true,
+      translateTitle: true,
+    },
+    '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click(), translateTitle: true },
+    '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click(), translateTitle: true },
+    '/default-management': {
+      title: 'default-management',
+      render: () => s(`.main-btn-default-management`).click(),
+      translateTitle: true,
+    },
+  };
+};
+
+window.Routes = RoutesDefault;
+
+const RouterDefault = () => {
+  return { Routes: RoutesDefault, NameApp };
+};
+
+export { RoutesDefault, RouterDefault, NameApp };

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';
+
+const SettingsDefault = {
+  Render: async function () {
+    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,9 @@
+import { SignUp } from '../core/SignUp.js';
+
+const SignUpDefault = function () {
+  SignUp.Event['SignUpDefault'] = async (options) => {
+    const { user } = options;
+  };
+};
+
+export { SignUpDefault };

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

@@ -0,0 +1,54 @@
+import { Account } from '../core/Account.js';
+import { Chat } from '../core/Chat.js';
+import { s4 } from '../core/CommonJs.js';
+import { loggerFactory } from '../core/Logger.js';
+import { SocketIo } from '../core/SocketIo.js';
+import { s } from '../core/VanillaJs.js';
+import { ElementsDefault } from './ElementsDefault.js';
+
+const logger = loggerFactory(import.meta);
+
+const SocketIoDefault = {
+  Init: function () {
+    return new Promise((resolve) => {
+      for (const type of Object.keys(ElementsDefault.Data)) {
+        SocketIo.Event[type][s4()] = async (args) => {
+          args = JSON.parse(args[0]);
+          switch (type) {
+            case 'chat':
+              {
+                const idModal = 'modal-chat';
+                if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
+              }
+              break;
+
+            default:
+              break;
+          }
+          const { status } = args;
+
+          switch (status) {
+            case 'email-confirmed': {
+              const newUser = { ...ElementsDefault.Data.user.main.model.user, emailConfirmed: true };
+              Account.renderVerifyEmailStatus(newUser);
+              Account.triggerUpdateEvent({ user: newUser });
+              break;
+            }
+
+            default:
+              break;
+          }
+        };
+      }
+      SocketIo.Event.connect[s4()] = async (reason) => {
+        // ElementsDefault.Init({ type, id, element });
+      };
+      SocketIo.Event.disconnect[s4()] = async (reason) => {
+        // ElementsDefault.removeAll();
+      };
+      return resolve();
+    });
+  },
+};
+
+export { SocketIoDefault };

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

@@ -0,0 +1,7 @@
+import { Translate } from '../core/Translate.js';
+
+const TranslateDefault = {
+  Init: async function () {},
+};
+
+export { TranslateDefault };