@underpostnet/underpost 2.7.82

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

@@ -0,0 +1,468 @@
+import { getCapVariableName, getId, newInstance, random, range, timer, uniqueArray } from './CommonJs.js';
+import { marked } from 'marked';
+import {
+  getBlobFromUint8ArrayFile,
+  getDataFromInputFile,
+  getQueryParams,
+  getRawContentFile,
+  htmls,
+} from './VanillaJs.js';
+import { Panel } from './Panel.js';
+import { NotificationManager } from './NotificationManager.js';
+import { DocumentService } from '../../services/document/document.service.js';
+import { FileService } from '../../services/file/file.service.js';
+import { getSrcFromFileData } from './Input.js';
+import { Auth } from './Auth.js';
+import { imageShimmer, renderCssAttr } from './Css.js';
+import { Translate } from './Translate.js';
+import { Modal } from './Modal.js';
+import { listenQueryPathInstance, setQueryPath } from './Router.js';
+
+const PanelForm = {
+  Data: {},
+  instance: async function (
+    options = {
+      idPanel: '',
+      heightTopBar: 50,
+      heightBottomBar: 50,
+      defaultUrlImage: '',
+      Elements: {},
+      parentIdModal: undefined,
+      route: 'home',
+    },
+  ) {
+    const { idPanel, heightTopBar, heightBottomBar, defaultUrlImage, Elements } = options;
+
+    let prefixTags = [idPanel, 'public'];
+    this.Data[idPanel] = {
+      originData: [],
+      data: [],
+      filesData: [],
+    };
+
+    const formData = [
+      {
+        id: 'panel-title',
+        model: 'title',
+        inputType: 'text',
+        rules: [{ type: 'isEmpty' }],
+        panel: { type: 'title' },
+      },
+      {
+        id: 'panel-createdAt',
+        model: 'createdAt',
+        inputType: 'datetime-local',
+        panel: { type: 'subtitle' },
+        rules: [{ type: 'isEmpty' }],
+        disableRender: true,
+      },
+      {
+        id: 'panel-fileId',
+        model: 'fileId',
+        inputType: 'file',
+        rules: [],
+        panel: {},
+      },
+      {
+        id: 'panel-tags',
+        model: 'tags',
+        label: {
+          disabled: true,
+        },
+        inputType: 'text',
+        panel: { type: 'tags' },
+        // panel: {
+        //   type: 'info-row-pin',
+        //   icon: {
+        //     value: html``,
+        //   },
+        // },
+        rules: [{ type: 'isEmpty' }],
+      },
+      {
+        id: 'panel-mdFileId',
+        model: 'mdFileId',
+        inputType: 'md',
+        panel: { type: 'info-row' },
+        rules: [],
+        label: {
+          disabled: true,
+        },
+      },
+    ];
+    const dateFormat = (date) =>
+      html`<span
+        style="${renderCssAttr({
+          style: {
+            'font-size': '14px',
+            color: '#888',
+          },
+        })}"
+        >${new Date(date).toLocaleString().replaceAll(',', '')}</span
+      >`;
+    const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
+    const panelRender = async ({ data }) =>
+      await Panel.Render({
+        idPanel,
+        formData,
+        heightTopBar,
+        heightBottomBar,
+        data,
+        parentIdModal: options.parentIdModal,
+        originData: () => PanelForm.Data[idPanel].originData,
+        filesData: () => PanelForm.Data[idPanel].filesData,
+        scrollClassContainer: options.scrollClassContainer ? options.scrollClassContainer : 'main-body',
+        titleIcon,
+        formContainerClass: 'session-in-log-in',
+        onClick: async function ({ payload }) {
+          if (options.route) {
+            setQueryPath({ path: options.route, queryPath: payload._id });
+            if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
+            if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+          }
+        },
+        callBackPanelRender: async function (options) {
+          if (options.data.ssr) {
+            return await options.htmlRender({
+              render: imageShimmer(),
+            });
+          }
+          if (!options.data.fileId)
+            return await options.htmlRender({
+              render: html`
+                <img
+                  class="abs center"
+                  style="${renderCssAttr({
+                    style: {
+                      width: '100px',
+                      height: '100px',
+                      opacity: 0.2,
+                    },
+                  })}"
+                  src="${defaultUrlImage}"
+                />
+              `,
+            });
+          return await options.fileRender({
+            file: PanelForm.Data[idPanel].filesData.find((f) => f._id === options.data._id).fileId.fileBlob,
+            style: {
+              overflow: 'auto',
+              width: '100%',
+              height: 'auto',
+            },
+          });
+        },
+        on: {
+          remove: async function ({ e, data }) {
+            e.preventDefault();
+            const confirmResult = await Modal.RenderConfirm({
+              html: async () => {
+                return html`
+                  <div class="in section-mp" style="text-align: center">
+                    ${Translate.Render('confirm-delete-item')}
+                    <br />
+                    "${data.title}"
+                  </div>
+                `;
+              },
+              id: `delete-${idPanel}`,
+            });
+            if (confirmResult.status === 'confirm') {
+              const { status, message } = await DocumentService.delete({
+                id: data._id,
+              });
+              NotificationManager.Push({
+                html: status,
+                status,
+              });
+              if (getQueryParams().cid === data.id) {
+                setQueryPath({ path: options.route, queryPath: '' });
+                if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+              }
+
+              return { status };
+            }
+            return { status: 'error' };
+          },
+          add: async function ({ data, editId }) {
+            let mdFileId;
+            const mdFileName = `${getCapVariableName(data.title)}.md`;
+            const location = `${prefixTags.join('/')}`;
+            const blob = new Blob([data.mdFileId], { type: 'text/markdown' });
+            const md = new File([blob], mdFileName, { type: 'text/markdown' });
+            const tags = uniqueArray(
+              data.tags
+                .replaceAll('/', ',')
+                .replaceAll('-', ',')
+                .replaceAll(' ', ',')
+                .split(',')
+                .map((t) => t.trim())
+                .filter((t) => t)
+                .concat(prefixTags),
+            );
+            let originObj, originFileObj, indexOriginObj;
+            if (editId) {
+              indexOriginObj = PanelForm.Data[idPanel].originData.findIndex((d) => d._id === editId);
+              if (indexOriginObj > -1) {
+                originObj = PanelForm.Data[idPanel].originData[indexOriginObj];
+                originFileObj = PanelForm.Data[idPanel].filesData.find((d) => d._id === editId);
+              }
+            }
+
+            const mdBlob = {
+              data: {
+                data: await getDataFromInputFile(md),
+              },
+              mimetype: md.type,
+              name: md.name,
+            };
+            const mdPlain = await getRawContentFile(getBlobFromUint8ArrayFile(mdBlob.data.data, mdBlob.mimetype));
+            const baseNewDoc = newInstance(data);
+            baseNewDoc.tags = tags.filter((t) => !prefixTags.includes(t));
+            baseNewDoc.mdFileId = marked.parse(data.mdFileId);
+            baseNewDoc.userId = Elements.Data.user.main.model.user._id;
+            baseNewDoc.tools = true;
+
+            const documents = [];
+            let message = '';
+            let status = 'success';
+            let indexFormDoc = -1;
+            const filesData = data.fileId ? data.fileId : [null];
+
+            for (const file of filesData) {
+              indexFormDoc++;
+              let fileId;
+
+              await (async () => {
+                const body = new FormData();
+                body.append('md', md);
+                if (file) body.append('file', file);
+                const { status, data } = await FileService.post({ body });
+                // await timer(3000);
+                NotificationManager.Push({
+                  html: Translate.Render(`${status}-upload-file`),
+                  status,
+                });
+                if (status === 'success') {
+                  mdFileId = data[0]._id;
+                  if (data[1]) fileId = data[1]._id;
+                }
+              })();
+              const body = {
+                location,
+                tags,
+                fileId,
+                mdFileId,
+                title: data.title,
+              };
+              const {
+                status: documentStatus,
+                message: documentMessage,
+                data: documentData,
+              } = originObj && indexFormDoc === 0
+                ? await DocumentService.put({ id: originObj._id, body })
+                : await DocumentService.post({
+                    body,
+                  });
+
+              const newDoc = {
+                ...baseNewDoc,
+                fileId: file ? URL.createObjectURL(file) : undefined,
+                _id: documentData._id,
+                id: documentData._id,
+                createdAt: dateFormat(documentData.createdAt),
+              };
+
+              if (documentStatus === 'error') status = 'error';
+              if (message) message += `${indexFormDoc === 0 ? '' : ', '}${documentMessage}`;
+
+              const filesData = {
+                id: documentData._id,
+                _id: documentData._id,
+                mdFileId: { mdBlob, mdPlain },
+                fileId: {
+                  fileBlob: file
+                    ? {
+                        data: {
+                          data: await getDataFromInputFile(file),
+                        },
+                        mimetype: file.type,
+                        name: file.name,
+                      }
+                    : undefined,
+                  filePlain: undefined,
+                },
+              };
+
+              if (originObj && indexFormDoc === 0) {
+                PanelForm.Data[idPanel].originData[indexOriginObj] = documentData;
+                PanelForm.Data[idPanel].data[indexOriginObj] = newDoc;
+                PanelForm.Data[idPanel].filesData[indexOriginObj] = filesData;
+              } else {
+                PanelForm.Data[idPanel].originData.push(documentData);
+                PanelForm.Data[idPanel].data.push(newDoc);
+                PanelForm.Data[idPanel].filesData.push(filesData);
+              }
+              documents.push(newDoc);
+            }
+
+            NotificationManager.Push({
+              html:
+                status === 'success'
+                  ? originObj
+                    ? Translate.Render('success-edit-post')
+                    : Translate.Render('success-add-post')
+                  : message,
+              status: status,
+            });
+
+            setQueryPath({ path: options.route, queryPath: documents.map((d) => d._id).join(',') });
+            if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
+
+            return { data: documents, status, message };
+          },
+        },
+      });
+
+    const getPanelData = async () => {
+      const result = await DocumentService.get({
+        id: `public/?tags=${prefixTags.join(',')}${getQueryParams().cid ? `&cid=${getQueryParams().cid}` : ''}`,
+      });
+
+      NotificationManager.Push({
+        html: result.status === 'success' ? Translate.Render('success-get-posts') : result.message,
+        status: result.status,
+      });
+      if (result.status === 'success') {
+        PanelForm.Data[idPanel].originData = newInstance(result.data);
+        PanelForm.Data[idPanel].filesData = [];
+        PanelForm.Data[idPanel].data = [];
+        for (const documentObject of result.data) {
+          let mdFileId, fileId;
+          let mdBlob, fileBlob;
+          let mdPlain, filePlain;
+
+          {
+            const {
+              data: [file],
+              status,
+            } = await FileService.get({ id: documentObject.mdFileId });
+
+            // const ext = file.name.split('.')[file.name.split('.').length - 1];
+            mdBlob = file;
+            mdPlain = await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+            mdFileId = newInstance(mdPlain);
+          }
+          if (documentObject.fileId) {
+            const {
+              data: [file],
+              status,
+            } = await FileService.get({ id: documentObject.fileId._id });
+
+            // const ext = file.name.split('.')[file.name.split('.').length - 1];
+            fileBlob = file;
+            filePlain = undefined;
+            fileId = getSrcFromFileData(file);
+          }
+
+          PanelForm.Data[idPanel].filesData.push({
+            id: documentObject._id,
+            _id: documentObject._id,
+            mdFileId: { mdBlob, mdPlain },
+            fileId: { fileBlob, filePlain },
+          });
+
+          PanelForm.Data[idPanel].data.push({
+            id: documentObject._id,
+            title: documentObject.title,
+            createdAt: dateFormat(documentObject.createdAt),
+            tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
+            mdFileId: marked.parse(mdFileId),
+            userId: documentObject.userId._id,
+            fileId,
+            tools: Elements.Data.user.main.model.user._id === documentObject.userId._id,
+            _id: documentObject._id,
+          });
+        }
+      }
+    };
+    const renderSrrPanelData = async () =>
+      await panelRender({
+        data: range(0, 5).map((i) => ({
+          id: i,
+          title: html`<div class="fl">
+            <div
+              class="in fll ssr-shimmer-search-box"
+              style="${renderCssAttr({
+                style: {
+                  width: '80%',
+                  height: '30px',
+                  top: '-13px',
+                  left: '10px',
+                },
+              })}"
+            ></div>
+          </div>`,
+          createdAt: html`<div class="fl">
+            <div
+              class="in fll ssr-shimmer-search-box"
+              style="${renderCssAttr({
+                style: {
+                  width: '50%',
+                  height: '30px',
+                  left: '-5px',
+                },
+              })}"
+            ></div>
+          </div>`,
+          mdFileId: html`<div class="fl section-mp">
+            <div
+              class="in fll ssr-shimmer-search-box"
+              style="${renderCssAttr({
+                style: {
+                  width: '80%',
+                  height: '30px',
+                },
+              })}"
+            ></div>
+          </div>`.repeat(random(2, 4)),
+          ssr: true,
+        })),
+      });
+
+    let lastCid;
+    let lasUserId;
+    this.Data[idPanel].updatePanel = async () => {
+      const cid = getQueryParams().cid ? getQueryParams().cid : '';
+      if (lastCid === cid && lasUserId === Elements.Data.user.main.model.user._id) return;
+      if (options.route === 'home') Modal.homeCid = newInstance(cid);
+      lastCid = cid;
+      lasUserId = newInstance(Elements.Data.user.main.model.user._id);
+      htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
+      await getPanelData();
+      htmls(
+        `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
+        await panelRender({ data: this.Data[idPanel].data }),
+      );
+    };
+    if (options.route)
+      listenQueryPathInstance({
+        id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
+        routeId: options.route,
+        event: async (path) => {
+          await this.Data[idPanel].updatePanel();
+        },
+      });
+
+    if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
+
+    if (options.parentIdModal) {
+      htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());
+      return '';
+    }
+
+    return await renderSrrPanelData();
+  },
+};
+
+export { PanelForm };

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

@@ -0,0 +1,162 @@
+// https://underpost.net/cube.php
+
+import { BtnIcon } from './BtnIcon.js';
+import { getId, random } from './CommonJs.js';
+import { dynamicCol } from './Css.js';
+import { htmls, s } from './VanillaJs.js';
+
+// https://css-loaders.com/3d/
+
+const Polyhedron = {
+  Tokens: {},
+  Render: async function (options) {
+    const id = options?.id ? options.id : getId(this.Tokens, 'polyhedron-');
+    if (!this.Tokens[id])
+      this.Tokens[id] = {
+        cr: [-25, -57, 90],
+        ct: [0, 0, 0],
+        dim: 150,
+        interval: null,
+      };
+    const renderTransform = () => {
+      s(
+        `.polyhedron-${id}`,
+      ).style.transform = `rotateX(${this.Tokens[id].cr[0]}deg) rotateY(${this.Tokens[id].cr[1]}deg) rotateZ(${this.Tokens[id].cr[2]}deg)
+      translateX(${this.Tokens[id].ct[0]}px) translateY(${this.Tokens[id].ct[1]}px) translateZ(${this.Tokens[id].ct[2]}px)`;
+      s(`.polyhedron-${id}`).style.left = `${s(`.scene-${id}`).offsetWidth / 2 - this.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.top = `${s(`.scene-${id}`).offsetHeight / 2 - this.Tokens[id].dim / 2}px`;
+      s(`.polyhedron-${id}`).style.width = `${this.Tokens[id].dim}px`;
+      s(`.polyhedron-${id}`).style.height = `${this.Tokens[id].dim}px`;
+      /* rotate Y */
+      s(`.face_front-${id}`).style.transform = `rotateY(0deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_back-${id}`).style.transform = `rotateY(-180deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_left-${id}`).style.transform = `rotateY(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_right-${id}`).style.transform = `rotateY(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      /* rotate X */
+      s(`.face_top-${id}`).style.transform = `rotateX(-90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+      s(`.face_bottom-${id}`).style.transform = `rotateX(90deg) translateZ(${this.Tokens[id].dim / 2}px)`;
+    };
+    if (this.Tokens[id].interval) clearInterval(this.Tokens[id].interval);
+    this.Tokens[id].interval = setInterval(() => {
+      if (s(`.polyhedron-${id}`)) renderTransform();
+      else return clearInterval(this.Tokens[id].interval);
+    }, 200);
+
+    setTimeout(() => {
+      renderTransform();
+      s(`.polyhedron-${id}`).style.transition = `.4s`;
+
+      s(`.btn-polyhedron-rotate-down-${id}`).onclick = () => {
+        this.Tokens[id].cr[0] += 45;
+      };
+      s(`.btn-polyhedron-rotate-up-${id}`).onclick = () => {
+        this.Tokens[id].cr[0] -= 45;
+      };
+      s(`.btn-polyhedron-rotate-left-${id}`).onclick = () => {
+        this.Tokens[id].cr[1] += 45;
+      };
+      s(`.btn-polyhedron-rotate-right-${id}`).onclick = () => {
+        this.Tokens[id].cr[1] -= 45;
+      };
+
+      s(`.btn-polyhedron-add-zoom-${id}`).onclick = () => {
+        this.Tokens[id].dim += 25;
+      };
+      s(`.btn-polyhedron-remove-zoom-${id}`).onclick = () => {
+        this.Tokens[id].dim -= 25;
+      };
+    });
+    return html`
+      <style>
+        .scene-${id} {
+          height: 500px;
+          background: #c7c7c7;
+          overflow: hidden;
+          /* perspective: 10000px; */
+        }
+        .polyhedron-${id} {
+          transform-style: preserve-3d;
+          cursor: pointer;
+        }
+        .face-${id} {
+          width: 100%;
+          height: 100%;
+        }
+
+        ${options?.style?.face
+          ? css`
+              .face-${id} {
+                ${Object.keys(options.style.face)
+                  .map((styleKey) => `${styleKey} : ${options.style.face[styleKey]};`)
+                  .join('')}
+              }
+            `
+          : css``}
+          ${options?.style?.scene
+          ? css`
+              .scene-${id} {
+                ${Object.keys(options.style.scene)
+                  .map((styleKey) => `${styleKey} : ${options.style.scene[styleKey]};`)
+                  .join('')}
+              }
+            `
+          : css``}
+      </style>
+      <!--
+      <style class="polyhedron-animation-${id}"></style>
+      -->
+
+      ${dynamicCol({ containerSelector: options.idModal, id: `polyhedron-${id}` })}
+      <div class="fl">
+        <div class="in fll polyhedron-${id}-col-a">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-arrows-spin"></i> Rotate</div>
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-up-${id}`,
+              label: html`<i class="fa-solid fa-angle-up"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-down-${id}`,
+              label: html`<i class="fa-solid fa-angle-down"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-left-${id}`,
+              label: html`<i class="fa-solid fa-angle-left"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-rotate-right-${id}`,
+              label: html`<i class="fa-solid fa-angle-right"></i>`,
+            })}
+
+            <div class="in sub-title-modal"><i class="fa-solid fa-magnifying-glass"></i> Zoom</div>
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-add-zoom-${id}`,
+              label: html`<i class="fa-solid fa-plus"></i>`,
+            })}
+            ${await BtnIcon.Render({
+              class: `inl section-mp btn-custom btn-polyhedron-remove-zoom-${id}`,
+              label: html`<i class="fa-solid fa-minus"></i>`,
+            })}
+          </div>
+        </div>
+        <div class="in fll polyhedron-${id}-col-b">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-vector-square"></i> Render</div>
+            <div class="in scene-${id}">
+              <div class="abs polyhedron-${id}">
+                <div class="abs face-${id} face_front-${id} ${id}-0"><div class="abs center">1</div></div>
+                <div class="abs face-${id} face_bottom-${id} ${id}-1"><div class="abs center">2</div></div>
+                <div class="abs face-${id} face_back-${id} ${id}-2"><div class="abs center">3</div></div>
+                <div class="abs face-${id} face_top-${id} ${id}-3"><div class="abs center">4</div></div>
+                <div class="abs face-${id} face_right-${id} ${id}-4"><div class="abs center">5</div></div>
+                <div class="abs face-${id} face_left-${id} ${id}-5"><div class="abs center">6</div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  },
+};
+
+export { Polyhedron };