underpost 2.8.84 → 2.8.85

package/src/client/components/core/Panel.js

@@ -3,6 +3,7 @@ import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
 import { Responsive } from '../core/Responsive.js';
+import { darkTheme, ThemeEvents } from './Css.js';
 import { append, getDataFromInputFile, getQueryParams, htmls, prepend, s } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Translate } from './Translate.js';
@@ -119,10 +120,11 @@ const Panel = {
         });
         s(`.a-${payload._id}`).onclick = async (e) => {
           e.preventDefault();
+          if (options.onClick) await options.onClick({ payload });
         };
         s(`.container-${idPanel}-${id}`).onclick = async (e) => {
           e.preventDefault();
-          if (options.onClick) await options.onClick({ payload });
+          // if (options.onClick) await options.onClick({ payload });
         };
       });
       if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
@@ -364,9 +366,7 @@ const Panel = {
                         data: await getDataFromInputFile(file),
                       },
                     },
-                    aHrefOptions: {
-                      disable: true,
-                    },
+
                     raw: true,
                   })}
                   <div class="in" style="overflow: hidden">${file.name}</div>`;
@@ -514,38 +514,24 @@ const Panel = {
       }
     }
 
+    // Add theme change handler
+    const themeChangeHandler = () => {
+      const styleElement = s(`.${idPanel}-styles`);
+      if (styleElement) {
+        styleElement.textContent = darkTheme
+          ? getDarkStyles(idPanel, scrollClassContainer)
+          : getLightStyles(idPanel, scrollClassContainer);
+      }
+    };
+
+    // Add theme change listener
+    ThemeEvents[`${idPanel}-theme`] = themeChangeHandler;
+
+    // Initial styles
+    setTimeout(ThemeEvents[`${idPanel}-theme`]);
+
     return html`
       <style>
-        .${scrollClassContainer} {
-          scroll-behavior: smooth;
-        }
-        .${idPanel}-form-container {
-          padding-bottom: 20px;
-          top: 0px;
-          z-index: 1;
-          overflow: auto;
-        }
-        .${idPanel}-form {
-          max-width: 900px;
-        }
-        .${idPanel}-cell {
-          min-height: 200px;
-        }
-        .${idPanel}-container {
-        }
-        .${idPanel} {
-          margin: 10px;
-          transition: 0.3s;
-          border-radius: 10px;
-          background: #f6f6f6;
-          color: black;
-          padding: 10px;
-          cursor: pointer;
-          min-height: 400px;
-        }
-        .${idPanel}:hover {
-          background: #ffffff;
-        }
         .${idPanel}-head {
           /* background: white; */
           margin-bottom: 10px;
@@ -610,6 +596,7 @@ const Panel = {
           font-size: 17px !important;
         }
       </style>
+      <style class="${idPanel}-styles"></style>
       <div class="${idPanel}-container">
         <div class="in modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}">
           <div class="in ${idPanel}-form-header">
@@ -643,4 +630,141 @@ const Panel = {
   },
 };
 
+// Function to generate base styles
+function getBaseStyles(idPanel, scrollClassContainer) {
+  return css`
+    .${scrollClassContainer} {
+      scroll-behavior: smooth;
+    }
+    .${idPanel}-form-container {
+      padding-bottom: 20px;
+      top: 0px;
+      z-index: 1;
+      overflow: auto;
+    }
+    .${idPanel}-form {
+      max-width: 900px;
+    }
+    .${idPanel}-cell {
+      min-height: 200px;
+    }
+    .${idPanel}-container {
+    }
+    .${idPanel} {
+      margin: 10px;
+      transition: 0.3s;
+      border-radius: 10px;
+      padding: 10px;
+      min-height: 400px;
+    }
+    .${idPanel}-head {
+      margin-bottom: 10px;
+    }
+    .img-${idPanel} {
+      width: 100%;
+    }
+    .${idPanel}-row {
+      padding: 5px;
+      margin: 5px;
+      font-size: 16px;
+    }
+    .${idPanel}-subtitle {
+      font-size: 17px;
+      margin-left: 20px;
+      top: -7px;
+    }
+    .${idPanel}-tags {
+      font-size: 17px;
+      margin-left: 10px;
+      top: -7px;
+    }
+    .${idPanel}-form-body {
+      transition: 0.3s;
+    }
+    .btn-${idPanel}-add {
+      padding: 10px;
+      font-size: 20px;
+    }
+    .${idPanel}-dropdown {
+      min-height: 100px;
+    }
+  `;
+}
+
+// Function to generate light theme styles
+function getLightStyles(idPanel, scrollClassContainer) {
+  return css`
+    ${getBaseStyles(idPanel, scrollClassContainer)}
+
+    .${idPanel} {
+      background: #f6f6f6;
+      color: black;
+    }
+    .${idPanel}:hover {
+      background: #ffffff;
+    }
+    .${idPanel}-title {
+      color: rgba(109, 104, 255, 1);
+      font-size: 24px;
+      padding: 5px;
+    }
+    .a-title-${idPanel} {
+      color: rgba(109, 104, 255, 1);
+    }
+    .a-title-${idPanel}:hover {
+      color: #e89f4c;
+    }
+    .${idPanel}-row-pin-value {
+      font-size: 20px;
+      color: rgb(19 190 84);
+    }
+    .${idPanel}-btn-tool {
+      background: none !important;
+      color: #c4c4c4 !important;
+    }
+    .${idPanel}-btn-tool:hover {
+      color: #000000 !important;
+      font-size: 17px !important;
+    }
+  `;
+}
+
+// Function to generate dark theme styles
+function getDarkStyles(idPanel, scrollClassContainer) {
+  return css`
+    ${getBaseStyles(idPanel, scrollClassContainer)}
+
+    .${idPanel} {
+      background: #2d2d2d;
+      color: #e0e0e0;
+    }
+    .${idPanel}:hover {
+      background: #3a3a3a;
+    }
+    .${idPanel}-title {
+      color: #8a85ff;
+      font-size: 24px;
+      padding: 5px;
+    }
+    .a-title-${idPanel} {
+      color: #8a85ff;
+    }
+    .a-title-${idPanel}:hover {
+      color: #ffb74d;
+    }
+    .${idPanel}-row-pin-value {
+      font-size: 20px;
+      color: #4caf50;
+    }
+    .${idPanel}-btn-tool {
+      background: none !important;
+      color: #666666 !important;
+    }
+    .${idPanel}-btn-tool:hover {
+      color: #ffffff !important;
+      font-size: 17px !important;
+    }
+  `;
+}
+
 export { Panel };

package/src/client/components/core/PanelForm.js

@@ -15,7 +15,7 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { listenQueryPathInstance, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath } from './Router.js';
 
 const PanelForm = {
   Data: {},
@@ -92,7 +92,7 @@ const PanelForm = {
       },
     ];
 
-    const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
+    const titleIcon = html`<i class="fa-solid fa-quote-left title-icon-${idPanel}"></i>`;
     const panelRender = async ({ data }) =>
       await Panel.Render({
         idPanel,
@@ -425,9 +425,17 @@ const PanelForm = {
       });
     let firsUpdateEvent = false;
     let lastCid;
+    let lastUserId;
+    closeModalRouteChangeEvents[idPanel] = (newPath) => {
+      if (newPath.split('?')[0] === '/' && PanelForm.Data[idPanel].data && PanelForm.Data[idPanel].data.length === 0) {
+        this.Data[idPanel].updatePanel();
+      }
+    };
     this.Data[idPanel].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      if (lastCid === cid) return;
+      const forceUpdate = lastUserId !== Elements.Data.user.main.model.user._id;
+      if (lastCid === cid && !forceUpdate) return;
+      lastUserId = newInstance(Elements.Data.user.main.model.user._id);
       lastCid = cid;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
@@ -452,6 +460,7 @@ const PanelForm = {
       if (!options.parentIdModal)
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
+          lastUserId = undefined;
           setQueryPath({ path: options.route, queryPath: '' });
           await this.Data[idPanel].updatePanel();
         };

package/src/client/components/core/Recover.js

@@ -62,7 +62,7 @@ const Recover = {
 
     setTimeout(async () => {
       if (user && user.email) {
-        s(`.recover-email`).value = user.email;
+        s(`.recover-email`).value = user.role === 'guest' ? '' : user.email;
         if (user.emailConfirmed) s(`.recover-email`).setAttribute('disabled', '');
       }
 

package/src/client/components/core/Router.js

@@ -1,29 +1,34 @@
 import { titleFormatted } from './CommonJs.js';
 import { loggerFactory } from './Logger.js';
 import { getProxyPath, getQueryParams, htmls, s, setPath } from './VanillaJs.js';
+import { Modal } from './Modal.js';
+import { Worker } from './Worker.js';
 
 // Router
 
+const RouterEvents = {};
+const closeModalRouteChangeEvents = {};
+
 const logger = loggerFactory(import.meta);
 
-const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
-  const { Routes, route, NameApp } = options;
-  let title = titleFormatted(Routes()[`/${route}`].title);
-  if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
-  htmls('title', html`${title} | ${NameApp}`);
-  {
-    const routeId = route === '' ? 'home' : route;
-    if (s(`.main-btn-${routeId}`)) {
-      if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
-      if (s(`.main-btn-${routeId}`)) s(`.main-btn-${routeId}`).classList.add(`main-btn-menu-active`);
-    }
+const sanitizeRoute = (route) =>
+  !route || route === '/' || route === `\\`
+    ? 'home'
+    : route.toLowerCase().replaceAll('/', '').replaceAll(`\\`, '').replaceAll(' ', '-');
+
+const setDocTitle = (route) => {
+  const _route = sanitizeRoute(route);
+  // logger.warn('setDocTitle', _route);
+  const title = titleFormatted(_route);
+  htmls('title', html`${title}${title.match(Worker.title.toLowerCase()) ? '' : ` | ${Worker.title}`}`);
+  if (s(`.main-btn-${_route}`)) {
+    if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
+    if (s(`.main-btn-${_route}`)) s(`.main-btn-${_route}`).classList.add(`main-btn-menu-active`);
   }
 };
 
-const RouterEvents = {};
-
-const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), NameApp: '' }) {
-  const { e, Routes, NameApp } = options;
+const Router = function (options = { Routes: () => {}, e: new PopStateEvent() }) {
+  const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
   logger.info(options);
@@ -39,7 +44,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), N
 
     if (path === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
-      setDocTitle({ Routes, route, NameApp });
+      setDocTitle(route);
       return Routes()[`/${route}`].render();
     }
   }
@@ -75,4 +80,59 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-export { Router, setDocTitle, LoadRouter, RouterEvents, setQueryPath, listenQueryPathInstance };
+const triggerCloseModalRouteChangeEvents = (newPath) => {
+  console.warn('[closeModalRouteChangeEvent]', newPath);
+  for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
+};
+
+const closeModalRouteChangeEvent = (options = {}) => {
+  const { route, RouterInstance, homeCid } = options;
+  if (!route) return;
+
+  let path = window.location.pathname;
+  if (path[path.length - 1] !== '/') path = `${path}/`;
+  let newPath = `${getProxyPath()}`;
+
+  if (path !== newPath) {
+    for (const subIdModal of Object.keys(Modal.Data).reverse()) {
+      if (Modal.Data[subIdModal]?.options?.route) {
+        newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
+        triggerCloseModalRouteChangeEvents(newPath);
+        setPath(newPath);
+        setDocTitle(newPath);
+        Modal.setTopModalCallback(subIdModal);
+      }
+    }
+    newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
+    triggerCloseModalRouteChangeEvents(newPath);
+    setPath(newPath);
+    setDocTitle(newPath);
+  }
+};
+
+const handleModalViewRoute = (options = {}) => {
+  const { route, RouterInstance } = options;
+  if (!route) return;
+
+  let path = window.location.pathname;
+  if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
+  const proxyPath = getProxyPath();
+  const newPath = `${proxyPath}${route}`;
+
+  if (path !== newPath) {
+    setPath(newPath);
+    setDocTitle(newPath);
+  }
+};
+
+export {
+  Router,
+  setDocTitle,
+  LoadRouter,
+  RouterEvents,
+  setQueryPath,
+  listenQueryPathInstance,
+  closeModalRouteChangeEvent,
+  handleModalViewRoute,
+  closeModalRouteChangeEvents,
+};

package/src/client/components/core/SocketIo.js

@@ -21,11 +21,11 @@ const SocketIo = {
   },
   Init: async function (options) {
     if (this.socket) this.socket.disconnect();
-    this.host = getWsBaseUrl({ wsBasePath: '' });
+    this.host = options.host ?? getWsBaseUrl({ wsBasePath: '' });
     logger.info(`ws host:`, this.host);
-    const path = getWsBasePath();
+    const path = typeof options.path === 'string' ? options.path : getWsBasePath();
     const connectOptions = {
-      path,
+      path: path === '/' ? undefined : path,
       // auth: {
       //   token: '',
       // },

package/src/client/components/core/Translate.js

@@ -60,10 +60,10 @@ const Translate = {
     this.Parse(language);
     if (s(`.action-btn-lang-render`)) htmls(`.action-btn-lang-render`, s('html').lang);
   },
-  RenderSetting: async function () {
+  RenderSetting: async function (id) {
     return html` <div class="in section-mp">
       ${await DropDown.Render({
-        id: 'settings-lang',
+        id: id ?? 'settings-lang',
         value: s('html').lang ? s('html').lang : 'en',
         label: html`${Translate.Render('lang')}`,
         data: ['en', 'es'].map((language) => {
@@ -512,6 +512,10 @@ const TranslateCore = {
       en: 'Your session has expired. Please log in again.',
       es: 'Su sesión ha expirado. Por favor, inicie sesión de nuevo.',
     };
+    Translate.Data['cron-management'] = {
+      en: 'Cron Management',
+      es: 'Gestion de cron jobs',
+    };
   },
 };
 

package/src/client/components/core/VanillaJs.js

@@ -31,8 +31,6 @@ VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner
 
 */
 
-// Docs by https://mintlify.com
-
 /**
  * Query selector.
  *
@@ -355,7 +353,6 @@ const getBlobFromUint8ArrayFile = (data = [[]], mimetype = 'application/octet-st
  * @memberof VanillaJS
  */
 const getProxyPath = () => {
-  // warning: evaluates headers html source
   let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
   if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
   return path;

package/src/client/components/core/Worker.js

@@ -12,7 +12,8 @@ const logger = loggerFactory(import.meta);
 const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
-    logger.warn('Init');
+    Worker.title = `${s('title').textContent}`;
+    // logger.warn('Init worker', Worker.title);
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -81,6 +82,7 @@ const Worker = {
     }
     window.serviceWorkerReady = true;
   },
+
   // Get the current service worker registration.
   getRegistration: async function () {
     return await navigator.serviceWorker.getRegistration();

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

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