underpost 2.7.91 → 2.7.93

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

@@ -827,6 +827,7 @@ const Modal = {
                   heightTopBar: originHeightTopBar,
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
+                  observer: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -1339,6 +1340,9 @@ const Modal = {
             backMenuButtonEvent();
           }
           s(`.btn-close-modal-menu`).click();
+          if (window.location.pathname !== (getProxyPath() === '/' ? getProxyPath() : `${getProxyPath()}/`))
+            setPath(getProxyPath());
+          setDocTitle({ ...options.RouterInstance, route: '' });
         };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
@@ -1531,20 +1535,18 @@ const Modal = {
         Responsive.Event['h-ui-hide-' + idModal] = () => {
           setTimeout(() => {
             if (!s(`.${idModal}`) || !s(`.main-body-btn-ui-close`)) return;
-            s(`.${idModal}`).style.height =
-              s(`.main-body-btn-ui-close`).classList.contains('hide') &&
-              s(`.btn-restore-${idModal}`).style.display !== 'none'
+            if (s(`.btn-restore-${idModal}`).style.display !== 'none') {
+              s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
                 ? `${window.innerHeight}px`
                 : `${
                     window.innerHeight -
                     (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
                     (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
                   }px`;
-            s(`.${idModal}`).style.top =
-              s(`.main-body-btn-ui-close`).classList.contains('hide') &&
-              s(`.btn-restore-${idModal}`).style.display !== 'none'
+              s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
                 ? `0px`
                 : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+            }
           });
         };
         Responsive.Event['h-ui-hide-' + idModal]();

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

@@ -1,4 +1,5 @@
-import { s } from './VanillaJs.js';
+import { borderChar } from './Css.js';
+import { append, s } from './VanillaJs.js';
 
 const Scroll = {
   data: {},
@@ -29,6 +30,69 @@ const Scroll = {
       behavior: options.behavior || 'smooth',
     });
   },
+  pullTopRefresh: function () {
+    append(
+      'body',
+      html` <style>
+          .pull-refresh-icon-container {
+            height: 60px;
+            width: 100%;
+            z-index: 10;
+            transition: 0.3s;
+            left: 0px;
+          }
+          .pull-refresh-icon {
+            width: 60px;
+            height: 60px;
+            margin: auto;
+            color: white;
+            font-size: 30px;
+          }
+        </style>
+        ${borderChar(2, 'black', [' .pull-refresh-icon-container'])}
+        <div style="top: -60px" class="abs pull-refresh-icon-container">
+          <div class="in pull-refresh-icon">
+            <div class="abs center"><i class="fa-solid fa-arrows-rotate"></i></div>
+          </div>
+        </div>`,
+    );
+
+    let touchstartY = 0;
+    let reload = false;
+    const minHeightDragReload = 3;
+    const maxHeightDragReload = 20;
+
+    document.addEventListener('touchstart', (e) => {
+      touchstartY = e.touches[0].clientY;
+      // console.warn('touchstart', touchstartY);
+    });
+
+    document.addEventListener('touchmove', (e) => {
+      const touchY = e.touches[0].clientY;
+      const touchDiff = touchY - touchstartY;
+
+      // console.warn('touchDiff', touchDiff, maxHeightDragReload);
+
+      if (touchDiff > maxHeightDragReload)
+        s(`.pull-refresh-icon-container`).style.top = 60 + maxHeightDragReload + 'px';
+      else s(`.pull-refresh-icon-container`).style.top = 60 + touchDiff + 'px';
+
+      if (touchDiff > minHeightDragReload && window.scrollY === 0) {
+        reload = true;
+      } else {
+        reload = false;
+      }
+    });
+    document.addEventListener('touchend', (e) => {
+      // console.warn('touchend');
+      s(`.pull-refresh-icon-container`).style.top = '-60px';
+      if (reload) {
+        location.reload();
+        // console.warn('reload');
+      }
+      reload = false;
+    });
+  },
 };
 
 export { Scroll };

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

@@ -66,11 +66,7 @@ const Translate = {
 
 const TranslateCore = {
   Init: async function () {
-    s('html').lang = localStorage.getItem('lang')
-      ? localStorage.getItem('lang')
-      : getLang() && getLang().match('es')
-      ? 'es'
-      : 'en';
+    s('html').lang = getLang();
     Translate.Data = {
       ...Translate.Data,
       isEmpty: {
@@ -252,6 +248,26 @@ const TranslateCore = {
           en: 'Comments',
           es: 'Comentarios',
         },
+        ['server-maintenance']: {
+          en: "The server is under maintenance <br> we'll be back soon.",
+          es: 'El servidor está en mantenimiento <br> volveremos pronto.',
+        },
+        ['no-internet-connection']: {
+          en: 'No internet connection <br> verify your network',
+          es: 'Sin conexión a internet <br> verifica tu red',
+        },
+        ['page-not-found']: {
+          en: 'Page not found',
+          es: 'Página no encontrada',
+        },
+        ['page-broken']: {
+          es: 'Algo salio mal',
+          en: 'Something went wrong',
+        },
+        ['back']: {
+          en: 'Back to <br>  homepage',
+          es: 'Volver a  <br> la pagina principal',
+        },
       },
     };
     Translate.Data['warning-upload-no-selects-file'] = {

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

@@ -428,7 +428,10 @@ const isDevInstance = () => location.origin.match('localhost') && location.port;
 
 const getDataFromInputFile = async (file) => Array.from(new Uint8Array(await file.arrayBuffer()));
 
-const getLang = () => navigator.language || navigator.userLanguage;
+const getLang = () =>
+  (localStorage.getItem('lang') || navigator.language || navigator.userLanguage || s('html').lang)
+    .slice(0, 2)
+    .toLowerCase();
 
 export {
   s,

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

@@ -13,6 +13,15 @@ const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
     logger.warn('Init');
+    window.ononline = async () => {
+      logger.warn('ononline');
+    };
+    window.onoffline = async () => {
+      logger.warn('onoffline');
+    };
+    setTimeout(() => {
+      if ('onLine' in navigator && navigator.onLine) window.ononline();
+    });
     navigator.serviceWorker.addEventListener('controllerchange', () => {
       logger.info('The controller of current browsing context has changed.');
     });
@@ -48,12 +57,9 @@ const Worker = {
       // channel.postMessage({ title: 'Hello from Client broadcast message' });
       // channel.close();
     });
+    this.RouterInstance = router();
     const isInstall = await this.status();
     if (!isInstall) await this.install();
-    else await this.update();
-    await this.updateOfflineSrc();
-    // else if (location.hostname === 'localhost') await this.update();
-    this.RouterInstance = router();
     await render();
     LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
@@ -212,13 +218,6 @@ const Worker = {
       }
     });
   },
-  updateOfflineSrc: async function () {
-    try {
-      await fetch(`${getProxyPath()}offline.html`);
-    } catch (error) {
-      logger.error('error');
-    }
-  },
   // TODO: GPS management
   RenderSetting: async function () {
     setTimeout(() => {

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

@@ -17,6 +17,8 @@ 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';
+import { Page500 } from '../core/500.js';
+import { Page404 } from '../core/404.js';
 
 const MenuDefault = {
   Data: {},
@@ -136,6 +138,28 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-404 hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('404')}</span>`,
+            }),
+            attrs: `data-id="404"`,
+            tabHref: `${getProxyPath()}404`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('404')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-500 hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('500')}</span>`,
+            }),
+            attrs: `data-id="500"`,
+            tabHref: `${getProxyPath()}500`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -148,6 +172,7 @@ const MenuDefault = {
         return '';
       },
       mode: 'slide-menu',
+      RouterInstance,
       heightTopBar,
       heightBottomBar,
       htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
@@ -383,6 +408,50 @@ const MenuDefault = {
         heightBottomBar,
       });
     });
+
+    EventsUI.onClick(`.main-btn-404`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-404',
+        route: '404',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-triangle-exclamation"></i>`,
+          text: Translate.Render('404'),
+        }),
+        html: async () => await Page404.Render({ idModal: 'modal-404' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        observer: true,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-500`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-500',
+        route: '500',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-circle-exclamation"></i>`,
+          text: Translate.Render('500'),
+        }),
+        html: async () => await Page500.Render({ idModal: 'modal-500' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        observer: true,
+      });
+    });
   },
 };
 

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

@@ -36,6 +36,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-default-management`).click(),
       translateTitle: true,
     },
+    '/404': { title: '404 Not Found', render: () => s(`.main-btn-404`).click() },
+    '/500': { title: '500 Server Error', render: () => s(`.main-btn-500`).click() },
   };
 };