underpost 2.8.883 → 2.8.885

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

@@ -1,3 +1,11 @@
+/**
+ * Utility class for managing Progressive Web App (PWA) worker functionalities,
+ * including service worker registration, caching, and notification management.
+ * This class is designed to be used as a singleton instance (exported as 'Worker').
+ * @module src/client/components/core/Worker.js
+ * @namespace PwaWorker
+ */
+
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
 import { EventsUI } from './EventsUI.js';
@@ -9,11 +17,64 @@ import { s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 const logger = loggerFactory(import.meta);
 
-const Worker = {
-  devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
-  instance: async function ({ router, render }) {
-    Worker.title = `${s('title').textContent}`;
-    // logger.warn('Init worker', Worker.title);
+/**
+ * Manages the PWA lifecycle, service workers, and related client-side events.
+ * @memberof PwaWorker
+ */
+class PwaWorker {
+  /**
+   * The application title, usually from the <title> tag content.
+   * @type {string}
+   */
+  title = '';
+
+  /**
+   * Tracks if notification permission has been granted and is active.
+   * @type {boolean}
+   */
+  notificationActive = false;
+
+  /**
+   * A function reference to the service worker's update method (registration.update()),
+   * dynamically set upon successful registration status check.
+   * @type {function(): Promise<void>}
+   */
+  updateServiceWorker = async () => {};
+
+  /**
+   * Router instance reference, initialized during the `instance` call.
+   * @type {object | null}
+   */
+  RouterInstance = null;
+
+  /**
+   * Creates an instance of PwaWorker and initializes the application title.
+   * @memberof PwaWorker
+   */
+  constructor() {
+    this.title = `${s('title').textContent}`;
+  }
+
+  /**
+   * Checks if the application is running in development mode (localhost or 127.0.0.1).
+   * @memberof PwaWorker
+   * @returns {boolean} True if in development mode.
+   */
+  devMode() {
+    return location.origin.match('localhost') || location.origin.match('127.0.0.1');
+  }
+
+  /**
+   * Initializes the PWA worker, registers global/worker event listeners,
+   * checks service worker status, and renders the initial content.
+   * This is the main entry point for the worker setup.
+   * @memberof PwaWorker
+   * @param {object} options - Configuration options.
+   * @param {function(): object} options.router - Function to get the router instance.
+   * @param {function(): Promise<void>} options.render - Function to render the application's UI.
+   * @returns {Promise<void>}
+   */
+  async instance({ router, render }) {
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -23,13 +84,15 @@ const Worker = {
     setTimeout(() => {
       if ('onLine' in navigator && navigator.onLine) window.ononline();
     });
+
     if ('serviceWorker' in navigator) {
       navigator.serviceWorker.addEventListener('controllerchange', () => {
         logger.info('The controller of current browsing context has changed.');
       });
       navigator.serviceWorker.ready.then((worker) => {
-        logger.info('Ready', worker);
-        // event message
+        logger.info('Service Worker Ready', worker);
+
+        // event message listener
         navigator.serviceWorker.addEventListener('message', (event) => {
           logger.info('Received event message', event.data);
           const { status } = event.data;
@@ -68,36 +131,53 @@ const Worker = {
     LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
     if (this.devMode()) {
-      const delayLiveReload = 1250;
-      // Dev mode
-
-      window.addEventListener('visibilitychange', (event) => {
-        // if (document.visibilityState === 'visible') {
-        //   Worker.reload(delayLiveReload);
-        // }
-      });
-      window.addEventListener('focus', function () {
-        // Worker.reload(delayLiveReload);
-      });
+      // const delayLiveReload = 1250;
+      // window.addEventListener('visibilitychange', () => {
+      //   if (document.visibilityState === 'visible') {
+      //     this.reload(delayLiveReload);
+      //   }
+      // });
+      // window.addEventListener('focus', () => {
+      //   this.reload(delayLiveReload);
+      // });
     }
     window.serviceWorkerReady = true;
-  },
+  }
+
+  /**
+   * Gets the current service worker registration.
+   * @memberof PwaWorker
+   * @returns {Promise<ServiceWorkerRegistration | undefined>} The service worker registration object, or undefined.
+   */
+  async getRegistration() {
+    return navigator.serviceWorker.getRegistration();
+  }
 
-  // Get the current service worker registration.
-  getRegistration: async function () {
-    return await navigator.serviceWorker.getRegistration();
-  },
-  reload: async function (timeOut = 3000) {
-    return await new Promise((resolve) => {
-      if (navigator.serviceWorker && navigator.serviceWorker.controller)
+  /**
+   * Forces the current service worker to skip waiting and reloads the page
+   * to apply the new service worker immediately.
+   * @memberof PwaWorker
+   * @param {number} [timeOut=3000] - Delay in milliseconds before reloading the page.
+   * @returns {Promise<void>} A promise that resolves after the page is reloaded.
+   */
+  async reload(timeOut = 3000) {
+    return new Promise((resolve) => {
+      if (navigator.serviceWorker && navigator.serviceWorker.controller) {
         navigator.serviceWorker.controller.postMessage({
           status: 'skipWaiting',
         });
-      // (location.href = `${location.origin}${location.pathname}${location.search}`)
+      }
       setTimeout(() => resolve(location.reload()), timeOut);
     });
-  },
-  update: async function () {
+  }
+
+  /**
+   * Updates the application by clearing specific caches and running the service worker update logic.
+   * Cache names matching 'components/', 'services/', or '.index.js' are deleted.
+   * @memberof PwaWorker
+   * @returns {Promise<void>}
+   */
+  async update() {
     const isInstall = await this.status();
     if (isInstall) {
       const cacheNames = await caches.keys();
@@ -108,11 +188,17 @@ const Worker = {
       }
       await this.updateServiceWorker();
     }
-  },
-  updateServiceWorker: async function () {},
-  status: function () {
+  }
+
+  /**
+   * Checks the current status of all service worker registrations and sets the
+   * `updateServiceWorker` function reference if an active worker is found.
+   * @memberof PwaWorker
+   * @returns {Promise<boolean>} True if at least one service worker is registered.
+   */
+  status() {
     let status = false;
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
           .getRegistrations()
@@ -122,81 +208,87 @@ const Worker = {
               else if (registration.waiting) logger.info('waiting', registration);
               else if (registration.active) {
                 logger.info('active', registration);
+                // Dynamically set the update function
                 this.updateServiceWorker = async () => await registration.update();
               }
             }
             if (registrations.length > 0) status = true;
+            resolve(status);
           })
           .catch((...args) => {
-            logger.error(...args);
-            return resolve(false);
-          })
-          .finally((...args) => {
-            logger.info('Finally status', args);
-            return resolve(status);
+            logger.error('Error getting service worker registrations:', ...args);
+            resolve(false);
           });
       } else {
-        logger.warn('Disabled');
-        return resolve(false);
+        logger.warn('Service Worker Disabled in browser');
+        resolve(false);
       }
     });
-  },
-  install: function () {
-    return new Promise((resolve, reject) => {
+  }
+
+  /**
+   * Registers the service worker (`sw.js`) with the browser.
+   * @memberof PwaWorker
+   * @returns {Promise<Array<any>>} A promise that resolves with the registration arguments.
+   */
+  install() {
+    return new Promise((resolve) => {
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker
           .register(`${getProxyPath()}sw.js`, {
-            // scope: getProxyPath(),
-            // scope: '/',
             type: 'module',
           })
           .then((...args) => {
-            logger.warn('Already Registered', args);
+            logger.warn('Service Worker Registered', args);
+            resolve(args);
           })
           .catch((...args) => {
-            logger.error(...args);
-            return resolve(args);
-          })
-          .finally((...args) => {
-            logger.info('Finally install', args);
-            return resolve(args);
+            logger.error('Error registering service worker:', ...args);
+            resolve(args);
           });
       } else {
-        logger.warn('Disabled');
-        return resolve();
+        logger.warn('Service Worker Disabled in browser');
+        resolve([]);
       }
     });
-  },
-  uninstall: function () {
-    return new Promise(async (resolve, reject) => {
+  }
+
+  /**
+   * Unregisters all service workers and deletes all application caches.
+   * @memberof PwaWorker
+   * @returns {Promise<Array<any>>} A promise that resolves after uninstallation.
+   */
+  uninstall() {
+    return new Promise(async (resolve) => {
       if ('serviceWorker' in navigator) {
-        navigator.serviceWorker
-          .getRegistrations()
-          .then(async (registrations) => {
-            const cacheNames = await caches.keys();
-            for (const cacheName of cacheNames) await caches.delete(cacheName);
-            for (const registration of registrations) {
-              logger.info('remove', registration);
-              registration.unregister();
-            }
-          })
-          .catch((...args) => {
-            logger.error(...args);
-            return resolve(args);
-          })
-          .finally((...args) => {
-            logger.info('Finally uninstall', args);
-            return resolve(args);
-          });
+        try {
+          const registrations = await navigator.serviceWorker.getRegistrations();
+          const cacheNames = await caches.keys();
+          for (const cacheName of cacheNames) await caches.delete(cacheName);
+          for (const registration of registrations) {
+            logger.info('Removing service worker registration', registration);
+            registration.unregister();
+          }
+          resolve([]);
+        } catch (error) {
+          logger.error('Error during service worker uninstallation:', error);
+          resolve([error]);
+        }
       } else {
-        logger.warn('Disabled');
-        return resolve();
+        logger.warn('Service Worker Disabled in browser');
+        resolve([]);
       }
     });
-  },
-  notificationActive: false,
-  notificationRequestPermission: function () {
-    return new Promise((resolve, reject) =>
+  }
+
+  /**
+   * Requests permission from the user to display notifications.
+   * Sets the internal `notificationActive` state.
+   * @memberof PwaWorker
+   * @returns {Promise<boolean>} True if permission is granted, false otherwise.
+   */
+  notificationRequestPermission() {
+    return new Promise((resolve) =>
       Notification.requestPermission().then((result) => {
         if (result === 'granted') {
           this.notificationActive = true;
@@ -207,8 +299,14 @@ const Worker = {
         }
       }),
     );
-  },
-  notificationShow: function () {
+  }
+
+  /**
+   * Shows a sample notification if permission is granted.
+   * @memberof PwaWorker
+   * @returns {void}
+   */
+  notificationShow() {
     Notification.requestPermission().then((result) => {
       if (result === 'granted') {
         navigator.serviceWorker.ready.then((registration) => {
@@ -217,18 +315,25 @@ const Worker = {
             icon: '../images/touch/chrome-touch-icon.png',
             vibrate: [200, 100, 200, 100, 200, 100, 200],
             tag: 'vibration-sample',
-            requireInteraction: true, //  boolean to manually close the notification
+            requireInteraction: true,
           });
         });
       }
     });
-  },
-  // TODO: GPS management
-  RenderSetting: async function () {
+  }
+
+  /**
+   * Renders the UI for PWA settings, including buttons for cleaning cache and worker management.
+   * It also attaches the click handler for the 'clean-cache' button.
+   * @memberof PwaWorker
+   * @returns {Promise<string>} The HTML string for the settings section.
+   */
+  async RenderSetting() {
     setTimeout(() => {
+      // Event listener for the clean cache button
       EventsUI.onClick(`.btn-clean-cache`, async (e) => {
         e.preventDefault();
-        // await this.update();
+        // Clear local storage, uninstall the worker, and reload
         localStorage.clear();
         await this.uninstall();
         await this.reload();
@@ -252,33 +357,15 @@ const Worker = {
         label: html`<i class="fas fa-sync-alt"></i> ${Translate.Render('Reload')}`,
       })}
     </div>`;
-    return;
-    s(`.btn-uninstall-service-controller`).classList.add('hide');
-    EventsUI.onClick(`.btn-install-service-controller`, async (e) => {
-      e.preventDefault();
-      const result = await this.install();
-      s(`.btn-install-service-controller`).classList.add('hide');
-      s(`.btn-uninstall-service-controller`).classList.remove('hide');
-    });
-    EventsUI.onClick(`.btn-uninstall-service-controller`, async (e) => {
-      e.preventDefault();
-      const result = await this.uninstall();
-      s(`.btn-uninstall-service-controller`).classList.add('hide');
-      s(`.btn-install-service-controller`).classList.remove('hide');
-    });
-    EventsUI.onClick(`.btn-reload`, async (e) => {
-      e.preventDefault();
-      location.reload();
-    });
-    const workerStatus = await this.status();
-    if (workerStatus) {
-      s(`.btn-install-service-controller`).classList.add('hide');
-      s(`.btn-uninstall-service-controller`).classList.remove('hide');
-    } else {
-      s(`.btn-uninstall-service-controller`).classList.add('hide');
-      s(`.btn-install-service-controller`).classList.remove('hide');
-    }
-  },
-};
+  }
+}
+
+// Create the singleton instance
+const PwaWorkerInstance = new PwaWorker();
+
+// Export the new class name for modern usage
+export { PwaWorker };
 
-export { Worker };
+// Export the instance with the old name (`Worker`) for backward compatibility,
+// ensuring existing code consuming the module continues to work.
+export { PwaWorkerInstance as Worker };

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

@@ -186,6 +186,7 @@ const MenuDefault = {
           })}
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-chat',
+            useMenuBtn: true,
             label: html`${renderMenuLabel({
               icon: html`<i class="far fa-comments"></i>`,
               text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,

package/src/client.dev.js

@@ -6,16 +6,19 @@
 import dotenv from 'dotenv';
 import { loggerFactory } from './server/logger.js';
 import { ProcessController } from './server/process.js';
-import { Config } from './server/conf.js';
+import { Config, buildClientStaticConf } from './server/conf.js';
 import { createClientDevServer } from './server/client-dev-server.js';
-dotenv.config();
 
-await Config.build();
+dotenv.config();
 
 const logger = loggerFactory(import.meta);
 
 await logger.setUpInfo();
 
+await buildClientStaticConf();
+
+await Config.build();
+
 await createClientDevServer();
 
 ProcessController.init(logger);

package/src/db/DataBaseProvider.js

@@ -1,29 +1,73 @@
 import { MongooseDB } from './mongo/MongooseDB.js';
 import { loggerFactory } from '../server/logger.js';
 
+/**
+ * Module for managing and loading various database connections (e.g., Mongoose, MariaDB).
+ * @module src/db/DataBaseProvider.js
+ * @namespace DataBaseProviderNamespace
+ */
+
 const logger = loggerFactory(import.meta);
 
-const DataBaseProvider = {
-  instance: {},
-  load: async function (options = { apis: [], host: '', path: '', db: {} }) {
+/**
+ * @class
+ * @alias DataBaseProviderService
+ * @memberof DataBaseProviderNamespace
+ * @classdesc Centralized service for loading, managing, and accessing multiple database connections
+ * based on application configuration (host, path, provider type).
+ */
+class DataBaseProviderService {
+  /**
+   * Internal storage for database connection instances, keyed by host+path.
+   * @type {object.<string, object>}
+   * @private
+   */
+  #instance = {};
+
+  /**
+   * Retrieves the internal instance storage for direct access (used for backward compatibility).
+   * @returns {object.<string, object>} The internal connection instance map.
+   */
+  get instance() {
+    return this.#instance;
+  }
+
+  /**
+   * Loads and initializes a database provider based on the configuration.
+   * If the connection is already loaded for the given host/path, it returns the existing instance.
+   *
+   * @async
+   * @param {object} [options] - Configuration for the database connection.
+   * @param {Array<string>} [options.apis=[]] - List of APIs whose models should be loaded (for Mongoose).
+   * @param {string} [options.host=''] - The host part of the application context (e.g., domain).
+   * @param {string} [options.path=''] - The path part of the application context.
+   * @param {object} [options.db={}] - The specific database configuration object.
+   * @param {string} options.db.provider - The name of the database provider ('mongoose', 'mariadb', etc.).
+   * @param {string} options.db.host - The database server host.
+   * @param {string} options.db.name - The database name.
+   * @returns {Promise<object|undefined>} A promise that resolves to the initialized provider object
+   * or `undefined` on error or if the provider is already loaded.
+   */
+  async load(options = { apis: [], host: '', path: '', db: {} }) {
     try {
       const { apis, host, path, db } = options;
+      const key = `${host}${path}`;
 
-      if (!this.instance[`${host}${path}`]) this.instance[`${host}${path}`] = {};
+      if (!this.#instance[key]) this.#instance[key] = {};
 
-      if (!db || this.instance[`${host}${path}`][db.provider]) return;
+      if (!db || this.#instance[key][db.provider]) return this.#instance[key][db.provider];
 
-      // logger.info(`Load ${db.provider} provider`, `${host}${path}`);
+      // logger.info(`Load ${db.provider} provider`, key);
       switch (db.provider) {
         case 'mongoose':
           {
             const conn = await MongooseDB.connect(db.host, db.name);
-            this.instance[`${host}${path}`][db.provider] = {
+            this.#instance[key][db.provider] = {
               models: await MongooseDB.loadModels({ conn, apis }),
               connection: conn,
               close: async () => {
                 return await new Promise((resolve) => {
-                  DataBaseProvider.instance[`${host}${path}`][db.provider].connection.close().then(() => {
+                  this.#instance[key][db.provider].connection.close().then(() => {
                     // logger.info('Mongoose connection is disconnected', db);
                     return resolve();
                   });
@@ -35,11 +79,20 @@ const DataBaseProvider = {
         default:
           break;
       }
-      return this.instance[`${host}${path}`][db.provider];
+      return this.#instance[key][db.provider];
     } catch (error) {
       logger.error(error, { error: error.stack, options });
       return undefined;
     }
-  },
-};
-export { DataBaseProvider };
+  }
+}
+
+/**
+ * Singleton instance of the DataBaseProviderService class for backward compatibility.
+ * @alias DataBaseProvider
+ * @memberof DataBaseProviderNamespace
+ * @type {DataBaseProviderService}
+ */
+const DataBaseProvider = new DataBaseProviderService();
+
+export { DataBaseProvider, DataBaseProviderService as DataBaseProviderClass };

package/src/db/mariadb/MariaDB.js

@@ -2,10 +2,35 @@ import mariadb from 'mariadb';
 
 import { loggerFactory } from '../../server/logger.js';
 
+/**
+ * Module for interacting with MariaDB/MySQL databases using the mariadb connector.
+ * @module src/db/MariaDB.js
+ * @namespace MariaDBNamespace
+ */
+
 const logger = loggerFactory(import.meta);
 
-const MariaDB = {
-  query: async (options) => {
+/**
+ * @class
+ * @alias MariaDBService
+ * @memberof MariaDBNamespace
+ * @classdesc Provides a simplified interface for executing queries against a MariaDB/MySQL database
+ * using a connection pool, ensuring connection management (acquisition and release).
+ */
+class MariaDBService {
+  /**
+   * Executes a SQL query against the MariaDB database.
+   *
+   * @async
+   * @param {object} options - The database connection and query options.
+   * @param {string} [options.host='127.0.0.1'] - The database host.
+   * @param {number} [options.port=3306] - The database port.
+   * @param {string} [options.user='root'] - The database user.
+   * @param {string} [options.password=''] - The database password.
+   * @param {string} options.query - The SQL query string to execute.
+   * @returns {Promise<any>} The result of the database query.
+   */
+  async query(options) {
     const { host, port, user, password, query } = options;
     const pool = mariadb.createPool({
       host: 'host' in options ? host : '127.0.0.1',
@@ -22,12 +47,20 @@ const MariaDB = {
       if (error.stack.startsWith('TypeError: Do not know how to serialize a BigInt')) return;
       logger.error(error, error.stack);
     } finally {
-      if (conn) conn.release(); //release to pool
+      if (conn) conn.release(); // release to pool
       await pool.end();
     }
 
     return result;
-  },
-};
+  }
+}
+
+/**
+ * Singleton instance of the MariaDBService class for backward compatibility.
+ * @alias MariaDB
+ * @memberof MariaDBNamespace
+ * @type {MariaDBService}
+ */
+const MariaDB = new MariaDBService();
 
-export { MariaDB };
+export { MariaDB, MariaDBService as MariaDBClass };