underpost 2.8.844 → 2.8.846

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';
@@ -365,9 +366,7 @@ const Panel = {
                         data: await getDataFromInputFile(file),
                       },
                     },
-                    aHrefOptions: {
-                      disable: true,
-                    },
+
                     raw: true,
                   })}
                   <div class="in" style="overflow: hidden">${file.name}</div>`;
@@ -515,37 +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;
-          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, renderTitle, setQueryPath } from './Router.js';
 
 const PanelForm = {
   Data: {},
@@ -425,15 +425,22 @@ const PanelForm = {
       });
     let firsUpdateEvent = false;
     let lastCid;
-    console.warn('------------->  updatePanel 1');
+    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 () => {
-      console.warn('------------->  updatePanel 2');
       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());
       await getPanelData();
+      if (this.Data[idPanel].data.length === 1) renderTitle(this.Data[idPanel].data[0].title);
       htmls(
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),
@@ -454,6 +461,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/Router.js

@@ -1,16 +1,20 @@
 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 logger = loggerFactory(import.meta);
 
+const renderTitle = (title, nameApp) => htmls('title', html`${title} | ${nameApp ?? Worker.RouterInstance.NameApp}`);
+
 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}`);
+  renderTitle(title, NameApp);
   {
     const routeId = route === '' ? 'home' : route;
     if (s(`.main-btn-${routeId}`)) {
@@ -75,4 +79,61 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-export { Router, setDocTitle, LoadRouter, RouterEvents, setQueryPath, listenQueryPathInstance };
+const closeModalRouteChangeEvents = {};
+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);
+        Modal.setTopModalCallback(subIdModal);
+        return setDocTitle({ ...RouterInstance, route: Modal.Data[subIdModal].options.route });
+      }
+    }
+    newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
+    triggerCloseModalRouteChangeEvents(newPath);
+    setPath(newPath);
+    return setDocTitle({ ...RouterInstance, route: '' });
+  }
+};
+
+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({ ...RouterInstance, route });
+  }
+};
+
+export {
+  Router,
+  setDocTitle,
+  LoadRouter,
+  RouterEvents,
+  setQueryPath,
+  listenQueryPathInstance,
+  closeModalRouteChangeEvent,
+  handleModalViewRoute,
+  closeModalRouteChangeEvents,
+  renderTitle,
+};

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/default/MenuDefault.js

@@ -1,7 +1,7 @@
 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 { Css, darkTheme, extractBackgroundImageUrl, ThemeEvents, Themes } from '../core/Css.js';
 import { EventsUI } from '../core/EventsUI.js';
 import { LogIn } from '../core/LogIn.js';
 import { LogOut } from '../core/LogOut.js';
@@ -178,6 +178,32 @@ const MenuDefault = {
       htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
     });
 
+    ThemeEvents['ssr-background-image'] = () => {
+      if (darkTheme) {
+        const backgroundImage = `${getProxyPath()}assets/background/dark.jpg`;
+        htmls(
+          `.style-ssr-background-image`,
+          css`
+            .ssr-background-image {
+              background-image: url('${backgroundImage}');
+            }
+          `,
+        );
+      } else {
+        const backgroundImage = `${getProxyPath()}assets/background/white0-min.jpg`;
+        htmls(
+          `.style-ssr-background-image`,
+          css`
+            .ssr-background-image {
+              background-image: url('${backgroundImage}');
+            }
+          `,
+        );
+      }
+    };
+
+    setTimeout(ThemeEvents['ssr-background-image']);
+
     this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
       animation: 150,
       group: `menu-sortable`,

package/src/client/public/default/safari-pinned-tab.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="269.000000pt" height="269.000000pt" viewBox="0 0 269.000000 269.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,269.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M980 2475 l0 -65 65 0 65 0 0 65 0 65 -65 0 -65 0 0 -65z"/>
+<path d="M1700 2475 l0 -65 65 0 65 0 0 65 0 65 -65 0 -65 0 0 -65z"/>
+<path d="M1110 2325 l0 -65 -85 0 -85 0 0 -140 0 -140 -60 0 -60 0 0 -160 0
+-160 75 0 75 0 0 -100 0 -100 95 0 95 0 0 -40 0 -40 -240 0 -240 0 0 -445 0
+-445 -65 0 -65 0 0 -135 0 -135 65 0 65 0 0 -55 0 -55 65 0 65 0 0 475 0 475
+85 0 85 0 0 -425 0 -425 425 0 425 0 0 425 0 425 85 0 85 0 0 -475 0 -475 65
+0 65 0 0 55 0 55 60 0 60 0 0 135 0 135 -60 0 -60 0 0 445 0 445 -240 0 -240
+0 0 35 0 35 95 0 95 0 0 105 0 105 75 0 75 0 0 160 0 160 -60 0 -60 0 0 140 0
+140 -85 0 -85 0 0 65 0 65 -75 0 -75 0 0 -65 0 -65 -145 0 -145 0 0 65 0 65
+-75 0 -75 0 0 -65z m210 -505 l0 -110 -110 0 -110 0 0 110 0 110 110 0 110 0
+0 -110z m390 0 l0 -70 -70 0 -70 0 0 70 0 70 70 0 70 0 0 -70z"/>
+</g>
+</svg>

package/src/client/ssr/body/DefaultSplashScreen.js

@@ -1,12 +1,12 @@
 SrrComponent = ({ backgroundImage, metadata }) => html`
   ${backgroundImage
-    ? html`<style>
+    ? html`<style class="style-ssr-background-image">
         .ssr-background-image {
           background-image: url('${backgroundImage}');
         }
       </style>`
     : metadata?.themeColor
-    ? html`<style>
+    ? html`<style class="style-ssr-background-image">
         .ssr-background-image {
           background: ${metadata.themeColor};
         }

package/src/index.js

@@ -34,7 +34,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.844';
+  static version = 'v2.8.846';
   /**
    * Repository cli API
    * @static