underpost 2.6.2

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

@@ -0,0 +1,259 @@
+import { AgGrid } from './AgGrid.js';
+import { BtnIcon } from './BtnIcon.js';
+import { darkTheme } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { ToggleSwitch } from './ToggleSwitch.js';
+import { Translate } from './Translate.js';
+import { htmls, s } from './VanillaJs.js';
+const logger = loggerFactory(import.meta);
+
+const fileFormDataFactory = (e, extensions) => {
+  const form = new FormData();
+  for (const keyFile of Object.keys(e.target.files)) {
+    if (extensions && !extensions.includes(e.target.files[keyFile].type)) {
+      logger.error('Invalid file extension', e.target.files[keyFile]);
+      continue;
+    }
+    form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+  }
+  return form;
+};
+
+const Input = {
+  Render: async function (options) {
+    const { id } = options;
+    options?.placeholder
+      ? options.placeholder === true
+        ? (options.placeholder = ' . . .')
+        : options.placeholder
+      : null;
+    setTimeout(() => {
+      s(`.input-container-${id}`).onclick = () => {
+        ['color'].includes(options.type) ? s(`.${id}`).click() : s(`.${id}`).focus();
+        ['datetime-local'].includes(options.type) ? s(`.${id}`).showPicker() : s(`.${id}`).focus();
+      };
+
+      if (s(`.btn-eye-${id}`))
+        s(`.btn-eye-${id}`).onclick = () => {
+          if (s(`.fa-eye-slash-${id}`).style.display === 'none') {
+            s(`.fa-eye-${id}`).style.display = 'none';
+            s(`.fa-eye-slash-${id}`).style.display = null;
+            s(`.${id}`).type = 'text';
+            return;
+          }
+          s(`.fa-eye-slash-${id}`).style.display = 'none';
+          s(`.fa-eye-${id}`).style.display = null;
+          s(`.${id}`).type = 'password';
+        };
+    });
+
+    const inputElement = html` <input
+        type="${options?.type ? options.type : 'text'}"
+        class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
+        ${options?.min !== undefined ? `min="${options.min}"` : ''}
+        placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
+        ${options?.value !== undefined ? `value="${options.value}"` : ''}
+        ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
+        ${options?.disabled ? `disabled` : ''}
+        ${options?.name !== undefined ? `name="${options.name}"` : ''}
+        ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
+        ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
+        ${options?.required ? ` required ` : ''}
+        ${options?.accept ? `accept="${options.accept}"` : ''}
+      />
+      <div class="${id}-input-extension input-info input-extension ${options?.extension ? '' : 'hide'}">
+        ${options?.extension ? await options.extension() : ''}
+      </div>`;
+
+    return html` <div class="${options?.containerClass ? options.containerClass + ' ' : ''} input-container-${id}">
+      <div class="in">
+        ${options?.label ? html`<div class="in input-label input-label-${id}">${options.label}</div>` : ''}
+        ${options.type === 'password' && !options.disabledEye
+          ? html`
+              <div class="fl input-row-${id}">
+                <div class="in fll" style="width: 80%;">${inputElement}</div>
+                <div class="in fll btn-eye-password btn-eye-${id}" style="width: 20%;">
+                  <i class="fas fa-eye fa-eye-${id} eye-password"></i>
+                  <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                </div>
+              </div>
+            `
+          : options?.placeholderIcon
+          ? html` <div class="fl input-row-${id}">${options.placeholderIcon} ${inputElement}</div> `
+          : inputElement}
+        <div class="in input-info input-info-${id}">&nbsp</div>
+      </div>
+    </div>`;
+  },
+  parseJsonEval: (selector) => {
+    try {
+      return JSON.parse(s(selector).value);
+    } catch (error) {
+      return s(selector).value;
+    }
+  },
+  getValues: function (formData) {
+    const obj = {};
+    for (const inputData of formData) {
+      switch (inputData.inputType) {
+        case 'checkbox':
+        case 'checkbox-on-off':
+          obj[inputData.model] = s(`.${inputData.id}-checkbox`).checked;
+          continue;
+          break;
+
+        default:
+          break;
+      }
+
+      if (!s(`.${inputData.id}`) || !s(`.${inputData.id}`).value || s(`.${inputData.id}`).value === 'undefined')
+        continue;
+      if ('model' in inputData) {
+        obj[inputData.model] = s(`.${inputData.id}`).value;
+      }
+    }
+    return obj;
+  },
+  cleanValues: function (formData) {
+    const obj = {};
+    for (const inputData of formData) {
+      if (!s(`.${inputData.id}`)) continue;
+
+      switch (inputData.inputType) {
+        case 'checkbox':
+        case 'checkbox-on-off':
+          if (s(`.${inputData.id}-checkbox`).checked) ToggleSwitch.Tokens[inputData.id].click();
+          continue;
+          break;
+
+        default:
+          break;
+      }
+
+      if ('model' in inputData) {
+        if (!['dropdown'].includes(inputData.inputType)) s(`.${inputData.id}`).value = '';
+      }
+      if (s(`.input-info-${inputData.id}`)) htmls(`.input-info-${inputData.id}`, html`&nbsp`);
+    }
+    return obj;
+  },
+};
+
+const InputFile = {
+  Render: async function ({ id, multiple }, on = { change: () => {}, clear: () => {} }) {
+    // drag drop multi file
+    const gridId = `ag-grid-input-file-${id}`;
+    setTimeout(() => {
+      s(`.btn-clear-input-file-${id}`).onclick = (e) => {
+        e.preventDefault();
+        s(`.${id}`).value = null;
+        AgGrid.grids[gridId].setGridOption('rowData', []);
+        if (on && typeof on.clear === 'function') on.clear();
+      };
+
+      ['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function (event) {
+        s(`.drop-zone-${id}`).addEventListener(event, function (e) {
+          e.preventDefault();
+          e.stopPropagation();
+        });
+      });
+      s(`.drop-zone-${id}`).addEventListener(
+        'dragover',
+        function (e) {
+          this.classList.add('drop-hover-container');
+        },
+        false,
+      );
+
+      s(`.drop-zone-${id}`).addEventListener(
+        'dragleave',
+        function (e) {
+          this.classList.remove('drop-hover-container');
+        },
+        false,
+      );
+      s(`.drop-zone-${id}`).addEventListener(
+        'drop',
+        function (e) {
+          this.classList.remove('drop-hover-container');
+          const files = e.dataTransfer.files;
+          const dataTransfer = new DataTransfer();
+
+          let countFiles = 0;
+          Array.prototype.forEach.call(files, (file) => {
+            // logger.info(file);
+            if (!multiple && countFiles == 1) return;
+            dataTransfer.items.add(file);
+            countFiles++;
+          });
+
+          s(`.${id}`).files = dataTransfer.files;
+          s(`.${id}`).onchange({ target: s(`.${id}`) });
+        },
+        false,
+      );
+
+      s(`.drop-zone-${id}`).addEventListener('click', function (e) {
+        s(`.${id}`).click();
+      });
+
+      s(`.${id}`).onchange = (e) => {
+        // logger.info('e', e);
+        const fileGridData = [];
+        Object.keys(e.target.files).forEach((fileKey, index) => {
+          const file = e.target.files[fileKey];
+          logger.info('Load file', file);
+          // Get raw:
+          // const read = new FileReader();
+          // read.readAsBinaryString(file);
+          // read.onloadend = () => {
+          //   console.log('Load File', e.target.files[fileKey], { fileKey, index }, read.result);
+          // };
+          fileGridData.push(file);
+        });
+        AgGrid.grids[gridId].setGridOption('rowData', fileGridData);
+        if (on && typeof on.change === 'function') on.change(e);
+      };
+    });
+    return html` <div class="fl">
+      <div class="in fll input-file-col">
+        <div class="in section-mp input-file-sub-col">
+          <input class="wfa ${id}" type="file" ${multiple ? `multiple="multiple"` : ''} />
+          <div class="in">
+            ${await BtnIcon.Render({
+              class: `wfa btn-clear-input-file-${id}`,
+              label: `<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
+            })}
+          </div>
+          <div class="in">
+            ${await AgGrid.Render({
+              id: gridId,
+              darkTheme,
+              style: {
+                height: '200px',
+              },
+              gridOptions: {
+                rowData: [],
+                columnDefs: [
+                  // { field: '_id', headerName: 'ID' },
+                  { field: 'name', headerName: 'Name' },
+                  { field: 'type', headerName: 'Type' },
+                ],
+              },
+            })}
+          </div>
+        </div>
+      </div>
+      <div class="in fll input-file-col">
+        <div class="in section-mp input-file-sub-col drop-zone-${id}">
+          <div class="abs center">
+            <i class="fas fa-cloud" style="font-size: 30px"></i><br />
+            ${Translate.Render('drop-file')}
+          </div>
+        </div>
+      </div>
+    </div>`;
+  },
+};
+
+export { Input, InputFile, fileFormDataFactory };

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

@@ -0,0 +1,77 @@
+import JoystickController from 'joystick-controller';
+import { getDirection, getId } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { append, getProxyPath, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const JoyStick = {
+  Tokens: {},
+  Render: async function (options = { id: '', callback: ({ joyDataSet }) => {}, callBackTime: 50 }) {
+    const { callback, callBackTime } = options;
+    const id = options.id ? options.id : getId(this.Tokens, 'joystick-');
+    this.Tokens[id] = { callback };
+    append(
+      'body',
+      html`
+        <style>
+          .dynamic-joystick-container-${id} {
+            /* border: 2px solid red; */
+            left: 5px;
+            bottom: 5px;
+            height: 200px;
+            width: 200px;
+            z-index: 3;
+          }
+          .joy-img-background-${id} {
+            width: 93%;
+            height: 93%;
+            opacity: 0.8;
+          }
+          .dynamic-joystick-container-${id}:hover .joy-img-background-${id} {
+            width: 97%;
+            height: 97%;
+            opacity: 1;
+          }
+        </style>
+        <div class="abs dynamic-joystick-container-${id}">
+          <img class="abs center joy-img-background-${id}" src="${getProxyPath()}assets/joy/joy_alpha.png" />
+        </div>
+      `,
+    );
+
+    this.Tokens[id].instance = new JoystickController(
+      {
+        maxRange: 70,
+        level: 10,
+        radius: 70,
+        joystickRadius: 50,
+        opacity: 0.5,
+        // containerClass: 'joystick-container',
+        // controllerClass: 'joystick-controller',
+        // joystickClass: 'joystick',
+        distortion: true,
+        dynamicPosition: true,
+        dynamicPositionTarget: s(`.dynamic-joystick-container-${id}`),
+        mouseClickButton: 'ALL',
+        hideContextMenu: true,
+        // x: '120px',
+        // y: '120px',
+      },
+      (args = { x, y, leveledX, leveledY, distance, angle }) => {
+        const { angle } = args;
+        if (angle === 0) return (this.Tokens[id].joyDataSet = undefined);
+        const radians = parseFloat(angle);
+        const direction = getDirection({ radians });
+        this.Tokens[id].joyDataSet = { ...args, radians, direction };
+        // logger.info(this.Tokens[id].joyDataSet, id);
+      },
+    );
+    setInterval(() => {
+      if (!this.Tokens[id].joyDataSet || !this.Tokens[id].joyDataSet.direction) return;
+      this.Tokens[id].callback({ joyDataSet: this.Tokens[id].joyDataSet });
+    }, callBackTime);
+  },
+};
+
+export { JoyStick };

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

@@ -0,0 +1,73 @@
+import { cap, getId } from './CommonJs.js';
+
+const Keyboard = {
+  ActiveKey: {},
+  Event: {},
+  Init: async function (options = { callBackTime: 50 }) {
+    const { callBackTime } = options;
+    window.onkeydown = (e = new KeyboardEvent()) => {
+      this.ActiveKey[e.key] = true;
+      // e.composedPath()
+      // if (['Tab'].includes(e.key)) {
+      //   e.preventDefault();
+      //   e.stopPropagation();
+      //   e.stopImmediatePropagation();
+      // }
+    };
+    window.onkeyup = (e = new KeyboardEvent()) => {
+      delete this.ActiveKey[e.key];
+    };
+    setInterval(() => {
+      Object.keys(this.Event).map((key) => {
+        Object.keys(this.ActiveKey).map((activeKey) => {
+          if (activeKey in this.Event[key]) this.Event[key][activeKey]();
+        });
+      });
+    }, callBackTime);
+  },
+  instanceMultiPressKeyTokens: {},
+  instanceMultiPressKey: (options = { keys: [], id, timePressDelay, eventCallBack: () => {} }) => {
+    if (typeof options.keys[0] === 'string') options.keys[0] = [options.keys[0]];
+    if (!options.id) options.id = getId(Keyboard.instanceMultiPressKeyTokens, 'key-press-');
+    if (!options.timePressDelay) options.timePressDelay = 500;
+    const { id, timePressDelay, keys, eventCallBack } = options;
+    Keyboard.instanceMultiPressKeyTokens[id] = { ...options };
+
+    let indexCombined = -1;
+    for (const combinedKeys of keys) {
+      indexCombined++;
+      const privateIndexCombined = indexCombined;
+      const multiPressKey = {};
+      const triggerMultiPressKey = () => {
+        for (const key of Object.keys(multiPressKey)) {
+          if (!multiPressKey[key].press) return;
+        }
+        eventCallBack();
+      };
+      Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`] = {};
+      for (const key of combinedKeys) {
+        multiPressKey[key] = {
+          press: false,
+          trigger: function () {
+            if (!multiPressKey[key].press) {
+              multiPressKey[key].press = true;
+              triggerMultiPressKey();
+              setTimeout(() => {
+                multiPressKey[key].press = false;
+              }, timePressDelay);
+            }
+          },
+        };
+
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key] = multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key.toLowerCase()] =
+          multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][key.toUpperCase()] =
+          multiPressKey[key].trigger;
+        Keyboard.Event[`instanceMultiPressKey-${id}-${privateIndexCombined}`][cap(key)] = multiPressKey[key].trigger;
+      }
+    }
+  },
+};
+
+export { Keyboard };

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

@@ -0,0 +1,157 @@
+import { CoreService } from '../../services/core/core.service.js';
+import { s4 } from './CommonJs.js';
+import { darkTheme } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const LoadingAnimation = {
+  bar: {
+    tokens: {},
+    getId: (id) => `bar-progress-${id.slice(1)}`,
+    play: async function (container) {
+      const id = this.getId(container);
+      const idEvent = s4() + s4() + s4();
+      this.tokens[container] = `${idEvent}`;
+      // diagonal-bar-background-animation
+      // #6d68ff #790079
+      append(
+        'body',
+        html`
+          <div
+            class="fix progress-bar box-shadow ${id}"
+            style="left: -100%; background: ${darkTheme
+              ? LoadingAnimation.darkColor
+                ? LoadingAnimation.darkColor
+                : `#c9c9c9`
+              : LoadingAnimation.lightColor
+              ? LoadingAnimation.lightColor
+              : `#515151`};"
+          ></div>
+        `,
+      );
+      for (const frame of [
+        { time: 500, value: 35 },
+        { time: 1250, value: 15 },
+        { time: 3000, value: 5 },
+        { time: 5000, value: 1 },
+      ])
+        setTimeout(() => {
+          if (this.tokens[container] === idEvent && s(`.${id}`)) {
+            s(`.${id}`).style.left = `-${frame.value}%`;
+            // const percentageRender = html`${100 - frame.value}%`;
+          }
+        }, frame.time);
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      delete this.tokens[container];
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).style.left = '0%';
+      s(`.${id}`).style.opacity = 1;
+      setTimeout(() => (s(`.${id}`).style.opacity = 0));
+      setTimeout(() => s(`.${id}`).remove(), 400);
+    },
+  },
+  spinner: {
+    spinners: {},
+    getId: (id) => `spinner-progress-${id.slice(1)}`,
+    spinnerSrcValidator: async function (spinner) {
+      if (!this.spinners[spinner]) {
+        const url = getProxyPath() + 'dist/loadingio/' + spinner + '/index.html';
+        this.spinners[spinner] = {
+          url,
+          html: await CoreService.getRaw({ url }),
+        };
+        append(
+          'head',
+          html`<link
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}dist/loadingio/${spinner}/index.min.css"
+          />`,
+        );
+      }
+    },
+    play: async function (container, spinner = 'dual-ring') {
+      await this.spinnerSrcValidator(spinner);
+      const id = this.getId(container);
+      if (s(container))
+        append(
+          container,
+          html` <div class="in ${id} loading-animation-container">${this.spinners[spinner].html}</div> `,
+        );
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).remove();
+    },
+  },
+  img: {
+    tokens: {},
+    load: function ({ key, src, classes, style }) {
+      this.tokens[key] = { src, classes, style };
+    },
+    play: function (container, key) {
+      append(
+        container,
+        html`<img
+          ${this.tokens[key].classes ? `class="${this.tokens[key].classes}"` : ''}
+          ${this.tokens[key].style ? `style="${this.tokens[key].style}"` : ''}
+          src="${getProxyPath()}${this.tokens[key].src}"
+        />`,
+      );
+    },
+  },
+  barLevel: {
+    append: () => {
+      s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
+      append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+    clear: () => {
+      htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+  },
+  removeSplashScreen: function () {
+    if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
+    if (s('.ssr-background'))
+      setTimeout(() => {
+        s('.ssr-background').style.opacity = 0;
+        setTimeout(async () => {
+          s('.ssr-background').style.display = 'none';
+        }, 300);
+      });
+  },
+  lightColor: null,
+  setLightColor: function (color) {
+    this.lightColor = color;
+  },
+  darkColor: null,
+  setDarkColor: function (color) {
+    this.darkColor = color;
+  },
+  RenderCurrentSrcLoad: function (event) {
+    if (s(`.ssr-loading-info`)) {
+      let nameSrcLoad = event.data.path;
+      if (nameSrcLoad) {
+        if (nameSrcLoad.match('assets'))
+          nameSrcLoad =
+            location.hostname +
+            location.pathname +
+            (location.pathname[location.pathname.length - 1] !== '/' ? '/' : '') +
+            'assets';
+        else if (!nameSrcLoad.match('api')) nameSrcLoad = undefined;
+        if (nameSrcLoad)
+          htmls(
+            `.ssr-loading-info`,
+            html`<span style="color: white">Download </span> <br />
+              <br />
+              ...${nameSrcLoad.slice(-30)}`,
+          );
+      }
+    }
+  },
+};
+export { LoadingAnimation };