@underpostnet/cyberia 3.2.80

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

@@ -0,0 +1,238 @@
+// https://www.ag-grid.com/javascript-data-grid/getting-started/
+// https://www.ag-grid.com/javascript-data-grid/themes/
+import { ThemeEvents, darkTheme } from './Css.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
+import './Pagination.js';
+import { Modal } from './Modal.js';
+class AgGrid {
+  static grids = {};
+  static theme = `ag-theme-alpine`;
+  static async instance(options) {
+    let { id, paginationOptions } = options;
+    setTimeout(() => {
+      // Normalize rowSelection from deprecated string form to object form (AG Grid v32.2.1+)
+      let gridOptionsOverrides = { ...(options.gridOptions || {}) };
+      if (typeof gridOptionsOverrides.rowSelection === 'string') {
+        const mode = gridOptionsOverrides.rowSelection; // 'single' or 'multiple'
+        gridOptionsOverrides.rowSelection = {
+          mode: mode === 'multiple' ? 'multiRow' : 'singleRow',
+        };
+      }
+      // Grid Options: Contains all of the grid configurations
+      const gridOptions = {
+        // Use legacy CSS theme mode to avoid conflict with Theming API (AG Grid v33+)
+        theme: 'legacy',
+        // Row Data: The data to be displayed.
+        pagination: false, // Disabled by default, will be handled by the management view
+        // paginationPageSize: 100,
+        // suppressPaginationPanel: true, // We are using our own custom pagination component
+        // rowHeight: 60,
+        // enableCellChangeFlash was removed in v35; use enableCellChangeFlash on defaultColDef instead
+        defaultColDef: {
+          editable: false,
+          flex: 1,
+          minWidth: 50,
+          filter: true,
+          autoHeight: true,
+          enableCellChangeFlash: true,
+        },
+        rowClassRules: {
+          'row-new-highlight': (params) => {
+            // a temporary flag we can set on new rows to highlight them
+            return params.data && params.data._new;
+          },
+        },
+        onGridReady: options?.onGridReady,
+        // Cell rendering events
+        onFirstDataRendered: options?.onFirstDataRendered,
+        onViewportChanged: options?.onViewportChanged,
+        onModelUpdated: options?.onModelUpdated,
+        onVirtualRowRemoved: options?.onVirtualRowRemoved,
+        // Cell interaction events
+        onCellClicked: options?.onCellClicked,
+        onCellDoubleClicked: options?.onCellDoubleClicked,
+        onCellFocused: options?.onCellFocused,
+        onCellMouseOver: options?.onCellMouseOver,
+        onCellMouseOut: options?.onCellMouseOut,
+        onCellValueChanged: options?.onCellValueChanged,
+        onFilterChanged: options?.onFilterChanged,
+        onSortChanged: options?.onSortChanged,
+        // set background colour on every row, this is probably bad, should be using CSS classes
+        // rowStyle: { background: 'black' },
+        // set background colour on even rows again, this looks bad, should be using CSS classes
+        // getRowStyle: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return { background: 'red' };
+        //   }
+        // },
+        // all rows assigned CSS class 'my-green-class'
+        // rowClass: 'my-green-class',
+        // all even rows assigned 'my-shaded-effect'
+        // getRowClass: (params) => {
+        //   if (params.node.rowIndex % 2 === 0) {
+        //     return 'my-shaded-effect';
+        //   }
+        // },
+        // domLayout: 'autoHeight', || 'normal'
+        // Column Definitions: Defines & controls grid columns.
+        columnDefs: options?.gridOptions?.rowData?.[0]
+          ? Object.keys(options.gridOptions.rowData[0]).map((field) => {
+              return { field };
+            })
+          : [],
+        ...gridOptionsOverrides,
+      };
+      // Your Javascript code to create the grid
+      const myGridElement = s(`.${id}`);
+      if (AgGrid.grids[id]) AgGrid.grids[id].destroy();
+      AgGrid.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
+      // myGridElement.style.setProperty('width', '100%');
+      ThemeEvents[id] = () => {
+        if (s(`.${id}`)) {
+          // darkTheme has already been updated by Css.js when this event fires
+          // If darkTheme is true: remove light class, add dark class
+          // If darkTheme is false: remove dark class, add light class
+          s(`.${id}`).classList.remove(AgGrid.theme, AgGrid.theme + '-dark');
+          s(`.${id}`).classList.add(darkTheme ? AgGrid.theme + '-dark' : AgGrid.theme);
+        } else {
+          // console.warn('change theme: grid not found');
+          delete ThemeEvents[id];
+        }
+      };
+      if (!options.style || !options.style.height) {
+        if (options.parentModal && Modal.Data[options.parentModal].options.observer) {
+          Modal.Data[options.parentModal].onObserverListener[id + '-observer'] = ({ width, height }) => {
+            if (s(`.${id}`))
+              s(`.${id}`).style.height =
+                `${height - 180 + (options.customHeightOffset ? options.customHeightOffset : 0)}px`;
+            else delete Modal.Data[options.parentModal].onObserverListener[id + '-observer'];
+          };
+          s(`.${id}`).style.height = `${s(`.${options.parentModal}`).offsetHeight - 180}px`;
+        } else s(`.${id}`).style.height = '500px';
+      }
+    });
+    const usePagination = options?.usePagination;
+    const limitOptionsAttr = paginationOptions?.limitOptions
+      ? `limit-options='${JSON.stringify(paginationOptions.limitOptions)}'`
+      : '';
+    return html`
+      <div
+        class="${id} ${darkTheme ? AgGrid.theme + '-dark' : AgGrid.theme}"
+        style="${options?.style
+          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+          : ''}"
+      ></div>
+      ${usePagination ? `<ag-pagination id="ag-pagination-${id}" ${limitOptionsAttr}></ag-pagination>` : ''}
+    `;
+  }
+  static async RenderStyle(
+    options = {
+      eventThemeId: 'AgGrid',
+      style: {
+        'font-family': '',
+        'font-size': '',
+        'no-cell-focus-style': false,
+        'row-cursor': '',
+      },
+    },
+  ) {
+    /*
+         --ag-foreground-color: rgb(126, 46, 132);
+         --ag-background-color: rgb(249, 245, 227);
+         --ag-header-foreground-color: rgb(204, 245, 172);
+         --ag-header-background-color: rgb(209, 64, 129);
+         --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
+         --ag-header-column-resize-handle-color: rgb(126, 46, 132);
+    
+         --ag-font-size: 17px;
+         */
+    if (!s(`.ag-grid-base-style`))
+      append(
+        'head',
+        html`<link
+            class="ag-grid-base-style"
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/ag-grid.min.css"
+          /><link
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/${AgGrid.theme}.min.css"
+          />`,
+      );
+    ThemeEvents[options.eventThemeId] = () => {
+      htmls(
+        `.ag-grid-style`,
+        html` ${options.style['font-family']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-family: '{{ag-font-family}}';
+                }
+              </style>`.replaceAll('{{ag-font-family}}', options.style['font-family'])
+            : ''}
+          ${options.style['font-size']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-size: '{{ag-font-size}}';
+                }
+              </style>`.replaceAll('{{ag-font-size}}', options.style['font-size'])
+            : ''}
+          ${options.style['no-cell-focus-style']
+            ? html`<style>
+                .ag-has-focus .ag-cell-focus {
+                  border: none !important;
+                }
+              </style>`
+            : ''}
+          ${options.style['row-cursor']
+            ? html`<style>
+                .ag-row {
+                  cursor: '{{ag-row-cursor}}';
+                }
+              </style>`.replaceAll(`'{{ag-row-cursor}}'`, options.style['row-cursor'])
+            : ''}
+
+          <style>
+            .ag-btn-renderer {
+              font-size: 16px;
+              min-width: 90px;
+              min-height: 90px;
+            }
+          </style>
+          ${darkTheme
+            ? html`
+                <style>
+                  .row-new-highlight,
+                  .ag-row.row-new-highlight {
+                    background-color: #6d68ff !important;
+                    transition: background-color 1s ease-out;
+                  }
+                  .ag-cell-data-changed,
+                  .ag-cell-data-changed-animation {
+                    background-color: #6d68ff !important;
+                    background: #6d68ff !important;
+                    color: #e4e4e4 !important;
+                  }
+                </style>
+              `
+            : html`<style>
+                .row-new-highlight,
+                .ag-row.row-new-highlight {
+                  background-color: #d0eaf8 !important;
+                  transition: background-color 1s ease-out;
+                }
+                .ag-cell-data-changed,
+                .ag-cell-data-changed-animation {
+                  background-color: #d1d1d1 !important;
+                  background: #d1d1d1 !important;
+                  color: #2e2e2e !important;
+                }
+              </style>`}`,
+      );
+    };
+  }
+}
+export { AgGrid };

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

@@ -0,0 +1,76 @@
+import { Translate } from './Translate.js';
+const maintenance = async () => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate.instance('server-maintenance')}
+  </div>`;
+};
+const noInternet = async () => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M10 18q.128 0 .254-.004a5.5 5.5 0 0 1-.698-1.083c-.536-.207-1.098-.793-1.578-1.821A9.3 9.3 0 0 1 7.42 13.5h1.672q.096-.52.284-1h-2.17A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.092.541.156 1.115.186 1.713q.48-.138.992-.188a16 16 0 0 0-.165-1.525h2.733c.251.656.406 1.36.448 2.094q.543.276 1.008.66A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate.instance('no-internet-connection')}
+  </div>`;
+};
+const e404 = async () => {
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M15.097 5.904A6.5 6.5 0 0 0 4 10.504l.001 1h-2v-1a8.5 8.5 0 1 1 15.176 5.258l5.344 5.345l-1.414 1.414l-5.344-5.345A8.48 8.48 0 0 1 10.5 19h-1v-2h1a6.5 6.5 0 0 0 4.596-11.096M1.672 13.257L4.5 16.086l2.829-2.829l1.414 1.415L5.915 17.5l2.828 2.828l-1.414 1.415L4.5 18.914l-2.828 2.829l-1.414-1.415L3.086 17.5L.258 14.672z"
+      />
+    </svg>
+  `;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">404</span>
+    <br />
+    <br />${Translate.instance('page-not-found')} <br />
+    <br />
+    <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
+  </div>`;
+};
+const e500 = async () => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M6 2a2 2 0 0 0-2 2v5.207a5.5 5.5 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.5 5.5 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">500</span>
+    <br />
+    <br />${Translate.instance('page-broken')} <br />
+    <br />
+    <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
+  </div>`;
+};
+class Alert {
+  static maintenance = maintenance;
+  static noInternet = noInternet;
+  static e404 = e404;
+  static e500 = e500;
+}
+export { Alert };

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

@@ -0,0 +1,69 @@
+/**
+ * Core per-app state store for WebSocket channel data.
+ *
+ * @module client/core/AppStore
+ * @namespace AppStore
+ */
+
+/**
+ * @class AppStore
+ * @classdesc Per-app singleton state store for WebSocket channel data and authenticated user state.
+ *
+ * Usage: `AppStoreX.Data.user.main.model.user` — the authenticated user object.
+ * `AppStoreX.Data` keys (`chat`, `mailer`, `stream`, etc.) — channel definitions for `SocketIo.instance`.
+ * @memberof AppStore
+ */
+class AppStore {
+  /**
+   * Channel data map, keyed by channel name (e.g. `user`, `chat`, `mailer`).
+   * The `user` channel always contains `{ main: { model: { user: { _id: '' } } } }`.
+   *
+   * @type {Object.<string, Object>}
+   */
+  Data;
+
+  /** @private @type {function(): Object} */
+  #initialStateFactory;
+
+  /**
+   * Creates a new AppStore instance.
+   *
+   * @param {function(): Object} initialStateFactory - Factory function returning the initial data shape.
+   *   Must return at least `{ user: { main: { model: { user: { _id: '' } } } } }`.
+   */
+  constructor(initialStateFactory) {
+    this.#initialStateFactory = initialStateFactory;
+    this.Data = initialStateFactory();
+  }
+
+  /**
+   * Resets `Data` to its initial state.
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.Data = this.#initialStateFactory();
+  }
+
+  /**
+   * Creates an AppStore with the standard channel layout.
+   * Always includes `user`, `chat`, and `mailer` channels.
+   *
+   * @static
+   * @param {...string} extraChannels - Additional channel names (e.g. `'stream'`).
+   * @returns {AppStore}
+   */
+  static create(...extraChannels) {
+    return new AppStore(() => {
+      const state = {
+        user: { main: { model: { user: { _id: '' } } } },
+        chat: {},
+        mailer: {},
+      };
+      for (const ch of extraChannels) state[ch] = {};
+      return state;
+    });
+  }
+}
+
+export { AppStore };