lupine.api 1.0.41

package/admin/admin-resources.tsx

@@ -0,0 +1,385 @@
+import {
+  CssProps,
+  getRenderPageProps,
+  DomUtils,
+  formatBytes,
+  HtmlVar,
+  InputWithTitle,
+  MessageBox,
+  MessageBoxButtonProps,
+  NotificationColor,
+  NotificationMessage,
+  Progress,
+  ProgressHookProps,
+  uploadFile,
+  downloadStream,
+} from 'lupine.components';
+
+// https://www.toptal.com/designers/htmlarrows/symbols/
+const ResourcesList = (props: {
+  results: any;
+  onDownload: (name: string) => void;
+  onUploadLocal: (name: string) => void;
+  onNewFolder: (name: string) => void;
+  onRename: (fPath: string, fName: string) => void;
+  onRemove: (name: string) => void;
+  onRemoveDir: (name: string) => void;
+  onListFolder: (folder: string) => void;
+  resourcesFullPath: string;
+}) => {
+  const listFolder = (results: any, parentFolder = '') => {
+    return results.map((result: any) => (
+      <div>
+        <div
+          class={`row-box mt-m` + (typeof result.size === 'undefined' ? ' f-folder' : '')}
+          onClick={() => props.onListFolder(parentFolder + result.name)}
+        >
+          <label class='label mr-m f-name'>{result.name}</label>
+          <label class='label mr-m f-time'>{result.time}</label>
+          <label class='label mr-m f-size'>{typeof result.size !== 'undefined' && formatBytes(result.size)}</label>
+          {typeof result.size !== 'undefined' && (
+            <div>
+              <button
+                title='Download remote file'
+                onClick={() => props.onDownload(parentFolder + result.name)}
+                class='button-base button-s'
+              >
+                &#8681;
+              </button>
+              <button
+                title='Rename remote file'
+                onClick={() => props.onRename(parentFolder + result.name, result.name)}
+                class='button-base button-s'
+              >
+                &#8654;
+              </button>
+              <button
+                title='Delete remote file'
+                onClick={() => props.onRemove(parentFolder + result.name)}
+                class='button-base button-s color-red'
+              >
+                &#10008;
+              </button>
+            </div>
+          )}
+          {typeof result.size === 'undefined' && (
+            <div>
+              <button onClick={() => props.onListFolder(parentFolder + result.name)} class='button-base button-s'>
+                &#8680;
+              </button>
+              <button
+                title='Choose a local file to upload to remote'
+                onClick={() => props.onUploadLocal(parentFolder + result.name)}
+                class='button-base button-s mr-m'
+              >
+                &#8686;
+              </button>
+
+              <button
+                title='Rename remote file'
+                onClick={() => props.onRename(parentFolder + result.name, result.name)}
+                class='button-base button-s'
+              >
+                &#8654;
+              </button>
+              <button
+                title='Delete remote file'
+                onClick={() => props.onRemoveDir(parentFolder + result.name)}
+                class='button-base button-s color-red'
+              >
+                &#10008;
+              </button>
+            </div>
+          )}
+        </div>
+        {result.items && <div class='pl-ll'>{listFolder(result.items, result.name + '/')}</div>}
+      </div>
+    ));
+  };
+  const css: CssProps = {
+    '.f-folder': {
+      textDecoration: 'underline',
+      cursor: 'pointer',
+    },
+    '.f-name': {
+      width: '200px',
+    },
+    '.f-size span, .f-time span': {
+      color: 'red',
+    },
+  };
+  return (
+    <div css={css}>
+      <div class='row-box mt-m mr-s'>
+        <button title='Go up' onClick={() => props.onListFolder('..')} class='button-base button-s mr-m'>
+          &#8678;
+        </button>
+        <button title='Refresh' onClick={() => props.onListFolder('')} class='button-base button-s'>
+          &#8691;
+        </button>
+        <button
+          title='Choose a local file to upload to remote'
+          onClick={() => props.onUploadLocal('')}
+          class='button-base button-s mr-m'
+        >
+          &#8686;
+        </button>
+
+        <button title='Create a sub folder' onClick={() => props.onNewFolder('')} class='button-base button-s'>
+          &#9874;
+        </button>
+      </div>
+      <div class='label mx-m f-name'>{props.resourcesFullPath}</div>
+      {listFolder(props.results)}
+    </div>
+  );
+};
+export const AdminResourcesPage = () => {
+  const domLog = HtmlVar('');
+  const domUpdate = HtmlVar('');
+
+  let resourcesFullPath = '';
+  const onResources = async () => {
+    loasResources('/');
+  };
+  const loasResources = async (folder: string) => {
+    const onListFolder = (folder: string) => {
+      loasResources(resourcesFullPath + folder);
+    };
+
+    let pathForUpload = '';
+    const uploadFile = async (fPath: string) => {
+      pathForUpload = fPath;
+      const fDom = DomUtils.bySelector('.up-file') as HTMLInputElement;
+      fDom.click();
+    };
+    const onUploadLocal = (fPath: string) => {
+      MessageBox.show({
+        title: 'Override remote file',
+        buttonType: MessageBoxButtonProps.YesNo,
+        contentMinWidth: '300px',
+        handleClicked: (index: number, close) => {
+          if (index === 0) {
+            uploadFile(fPath);
+          }
+          close();
+        },
+        children: <div>Do you upload local files that may overwrite remote file [{fPath}]?</div>,
+      });
+    };
+    const onNewFolder = async (fPath: string) => {
+      let newName = '';
+      const content = InputWithTitle('New folder name:', '', (value: string) => {
+        newName = value;
+      });
+      MessageBox.show({
+        title: 'Input new folder name',
+        buttonType: MessageBoxButtonProps.OkCancel,
+        contentMinWidth: '300px',
+        handleClicked: async (index: number, close) => {
+          if (index === 0) {
+            await newFolder(fPath, newName);
+          }
+          close();
+        },
+        children: content,
+      });
+    };
+
+    const onDownload = async (name: string) => {
+      const response = await getRenderPageProps().renderPageFunctions.fetchData(
+        '/api/admin/resources/download',
+        {
+          resource: resourcesFullPath + name,
+        },
+        true
+      );
+      if (!response || !response.blob) {
+        NotificationMessage.sendMessage('Failed to get resource', NotificationColor.Error);
+        return;
+      }
+
+      downloadStream(await response.blob(), name);
+    };
+
+    const newFolder = async (fPath: string, fName: string) => {
+      const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/resources/newFolder', {
+        resource: resourcesFullPath + fPath,
+        newName: fName,
+      });
+      const dataResponse = await response.json;
+      if (!dataResponse || dataResponse.status !== 'ok') {
+        NotificationMessage.sendMessage(dataResponse.message || 'Failed to create a folder', NotificationColor.Error);
+        return;
+      }
+      NotificationMessage.sendMessage(
+        'Folder created successfully, you need to refresh the page',
+        NotificationColor.Success
+      );
+    };
+    const renameFile = async (fPath: string, fName: string, fNewName: string) => {
+      const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/resources/rename', {
+        resource: resourcesFullPath + fPath,
+        oldName: fName,
+        newName: fNewName,
+      });
+      const dataResponse = await response.json;
+      if (!dataResponse || dataResponse.status !== 'ok') {
+        NotificationMessage.sendMessage(dataResponse.message || 'Failed to rename resource', NotificationColor.Error);
+        return;
+      }
+      NotificationMessage.sendMessage(
+        'Resource renamed successfully, you need to refresh the page',
+        NotificationColor.Success
+      );
+    };
+    const onRename = async (fPath: string, fName: string) => {
+      let newName = '';
+      const content = InputWithTitle('Reanme to:', fName, (value: string) => {
+        newName = value;
+      });
+      MessageBox.show({
+        title: 'Input new name',
+        buttonType: MessageBoxButtonProps.OkCancel,
+        contentMinWidth: '300px',
+        handleClicked: async (index: number, close) => {
+          if (index === 0) {
+            await renameFile(fPath, fName, newName);
+          }
+          close();
+        },
+        children: content,
+      });
+    };
+    const removeFile = async (name: string) => {
+      const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/resources/remove', {
+        resource: resourcesFullPath + name,
+      });
+      const dataResponse = await response.json;
+      if (!dataResponse || dataResponse.status !== 'ok') {
+        NotificationMessage.sendMessage(dataResponse.message || 'Failed to remove resource', NotificationColor.Error);
+        return;
+      }
+      NotificationMessage.sendMessage(
+        'Resource removed successfully, you need to refresh the page',
+        NotificationColor.Success
+      );
+    };
+    const removeDir = async (name: string) => {
+      const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/resources/removeDir', {
+        resource: resourcesFullPath + name,
+      });
+      const dataResponse = await response.json;
+      if (!dataResponse || dataResponse.status !== 'ok') {
+        NotificationMessage.sendMessage(dataResponse.message || 'Failed to remove resource', NotificationColor.Error);
+        return;
+      }
+      NotificationMessage.sendMessage(
+        'Resource removed successfully, you need to refresh the page',
+        NotificationColor.Success
+      );
+    };
+    const onRemove = async (name: string) => {
+      MessageBox.show({
+        title: 'Remove file',
+        buttonType: MessageBoxButtonProps.YesNo,
+        contentMinWidth: '300px',
+        handleClicked: (index: number, close) => {
+          if (index === 0) {
+            removeFile(name);
+          }
+          close();
+        },
+        children: <div>Do you really want to remove the remote file [{name}]?</div>,
+      });
+    };
+    const onRemoveDir = async (name: string) => {
+      MessageBox.show({
+        title: 'Remove directory',
+        buttonType: MessageBoxButtonProps.YesNo,
+        contentMinWidth: '300px',
+        handleClicked: (index: number, close) => {
+          if (index === 0) {
+            removeDir(name);
+          }
+          close();
+        },
+        children: <div>Do you really want to remove the remote directory [{name}]?</div>,
+      });
+    };
+
+    const response = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/resources/data', {
+      folder,
+    });
+    const dataResponse = await response.json;
+    if (!dataResponse || dataResponse.status !== 'ok') {
+      NotificationMessage.sendMessage(dataResponse.message || 'Failed to get resources', NotificationColor.Error);
+      return;
+    }
+
+    // dataResponse.results' first item has the fullPath
+    resourcesFullPath = dataResponse.results[0].fullPath;
+    if (!resourcesFullPath.endsWith('/') && !resourcesFullPath.endsWith('\\')) {
+      resourcesFullPath += '/';
+    }
+    domUpdate.value = (
+      <ResourcesList
+        results={dataResponse.results.slice(1)}
+        onDownload={onDownload}
+        onUploadLocal={onUploadLocal}
+        onNewFolder={onNewFolder}
+        onRename={onRename}
+        onRemove={onRemove}
+        onRemoveDir={onRemoveDir}
+        onListFolder={onListFolder}
+        resourcesFullPath={resourcesFullPath}
+      />
+    );
+    domLog.value = <pre>{JSON.stringify(dataResponse, null, 2)}</pre>;
+  };
+
+  const progressUpdate: ProgressHookProps = {};
+  const onUploadProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
+    progressUpdate.onProgress?.(percentage, chunkNumber, totalChunks);
+  };
+  const onFileChange = async (e: Event) => {
+    const target = e.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (!file) return;
+
+    progressUpdate.onShow?.(true, 'Uploading resource');
+    progressUpdate.onProgress?.(0, 0, 100);
+    const uploadResult = await uploadFile(
+      file,
+      '/api/admin/resources/upload?n=' + file.name + '&p=' + resourcesFullPath,
+      onUploadProgress
+    );
+
+    setTimeout(() => {
+      progressUpdate.onShow?.(false);
+    }, 1000);
+
+    if (uploadResult !== true) {
+      NotificationMessage.sendMessage('Failed to upload resource', NotificationColor.Error);
+      return;
+    }
+    NotificationMessage.sendMessage(
+      'Resource uploaded successfully, you need to refresh the page',
+      NotificationColor.Success
+    );
+  };
+  const css: CssProps = {};
+  return (
+    <div css={css} class='admin-release-top'>
+      <div class='row-box mt1 mb1'>
+        <button onClick={onResources} class='button-base'>
+          Resources
+        </button>
+      </div>
+      {domUpdate.node}
+      {domLog.node}
+      <Progress hook={progressUpdate} />
+      <input type='file' class='d-none up-file' onChange={onFileChange} accept='.*' />
+    </div>
+  );
+};

package/admin/admin-shell.tsx

@@ -0,0 +1,89 @@
+import { CssProps, getRenderPageProps, NotificationColor, NotificationMessage, RefProps } from 'lupine.components';
+
+export const AdminShellPage = () => {
+  let socket: WebSocket | undefined;
+  const getSocket = () => {
+    if (!socket) {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      socket = new WebSocket(`${protocol}//${location.host}/debug/client`);
+
+      socket.onopen = () => {
+        printMsg('Connection opened', true);
+      };
+      socket.onmessage = (message) => {
+        printMsg(message.data.toString());
+      };
+      socket.onclose = () => {
+        printMsg('Connection closed', true);
+      };
+      socket.onerror = (error) => {
+        printMsg('Connection error: ' + error, true);
+        socket?.close();
+        socket = undefined;
+      };
+    }
+    return socket;
+  };
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    '.admin-shell-box': {},
+    '.a-shell-out': {
+      maxHeight: '100%',
+    },
+  };
+  const onSend = async () => {
+    if (socket?.readyState !== WebSocket.OPEN) {
+      printMsg('Connection is not open', true);
+      return;
+    }
+    const cmd = ref.$('.a-shell-input').value;
+    socket.send(JSON.stringify({ message: 'shell', cmd }));
+    ref.$('.a-shell-input').value = '';
+  };
+  const onConnect = async () => {
+    getSocket();
+  };
+  const ref: RefProps = {
+    onUnload: async (el: Element) => {
+      socket?.close();
+    },
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onSend();
+    }
+  };
+  const printMsg = (msg: string, clear: boolean = false) => {
+    const outDom = ref.$('.a-shell-out');
+    if (clear) {
+      outDom.value = '';
+    }
+    outDom.value += msg + '\n';
+    outDom.scrollTop = outDom.scrollHeight;
+  };
+  return (
+    <div css={css} class='admin-shell-box' ref={ref}>
+      <div class='row-box pb-m'>
+        <div class='row-box flex-1 pr-m'>
+          <input class='input-base a-shell-input w-100p' onKeyDown={onKeyDown} />
+        </div>
+        <button onClick={onSend} class='button-base mr-m'>
+          Send
+        </button>
+      </div>
+      <div class='row-box pb-m'>
+        <button onClick={onConnect} class='button-base button-ss mr-s'>
+          Connect
+        </button>
+        <button onClick={() => printMsg('', true)} class='button-base button-ss'>
+          Clear Log
+        </button>
+      </div>
+      <div class='row-box flex-1'>
+        <textarea class='input-base a-shell-out w-100p h-100p' readOnly={true}></textarea>
+      </div>
+    </div>
+  );
+};

package/admin/admin-table-data.tsx

@@ -0,0 +1,146 @@
+import {
+  CssProps,
+  RefProps,
+  bindGlobalStyles,
+  getRenderPageProps,
+  getDefaultPageLimit,
+  HtmlVar,
+  PagingLink,
+  escapeHtml,
+} from 'lupine.components';
+
+const loadData = async (
+  onLinkClick: (index: number) => Promise<void>,
+  index: number,
+  tableName: string,
+  update?: TableDataUpdateProps
+) => {
+  // this is only executed in the FE
+  const pageIndex = index ?? getRenderPageProps().query['pg_i'];
+  const pageLimit = getRenderPageProps().query['pg_l'] || getDefaultPageLimit();
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(
+    `/api/admin/db/table/data/${tableName}/${pageIndex}/${pageLimit}`
+  );
+  return data && data.json && data.json.result && data.json.result.length > 0 ? (
+    <div class='table-box-outer'>
+      <PagingLink
+        itemsCount={data && data.json && data.json.itemsCount}
+        pageIndex={data && data.json && data.json.pageIndex}
+        baseLink=''
+        onClick={onLinkClick}
+      ></PagingLink>
+      <div class='table-box'>
+        <div class='fields bg-gray'></div>
+        <div class='table'>
+          <div class='fields bg-gray'>
+            {Object.keys(data.json.result[0]).map((field: any, index: number) => {
+              return <div class='p1 item'>{escapeHtml(field)}</div>;
+            })}
+            {update && update.onDelete && update.onEdit && <div class='p1 item'>Action</div>}
+          </div>
+
+          {data.json.result.map((item: any) => {
+            return (
+              <div class='values'>
+                {Object.keys(item).map((field: any, index: number) => {
+                  return <div class='p1 item'>{escapeHtml(item[field])}</div>;
+                })}
+                {update && update.onDelete && update.onEdit && (
+                  <div class='p1 item'>
+                    <button
+                      class='button-base button-s'
+                      onClick={() => {
+                        update.onEdit!(item);
+                      }}
+                    >
+                      Edit
+                    </button>
+                    <button
+                      class='button-base button-s'
+                      onClick={() => {
+                        update.onDelete!(item);
+                      }}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <PagingLink
+        itemsCount={data && data.json && data.json.itemsCount}
+        pageIndex={data && data.json && data.json.pageIndex}
+        baseLink=''
+        onClick={onLinkClick}
+      ></PagingLink>
+    </div>
+  ) : (
+    <div>No data.</div>
+  );
+};
+
+export type TableDataUpdateProps = {
+  refreshRef?: Function;
+  onDelete?: Function;
+  onEdit?: Function;
+};
+export const AdminTableData = (props: { tableName: string; update?: TableDataUpdateProps }) => {
+  const css: CssProps = {
+    '.table-box': {
+      overflowX: 'auto',
+      overflowY: 'hidden',
+    },
+    '.table': {
+      borderCollapse: 'collapse',
+      display: 'table',
+    },
+    '.table-box .fields, .table-box .values': {
+      display: 'table-row',
+    },
+    '.table-box .fields .item, .table-box .values .item': {
+      display: 'table-cell',
+      border: 'solid 1px gray',
+    },
+  };
+
+  const onPageClick = async (index: number) => {
+    console.log('onPageClick', index);
+    dom.value = await loadData(onPageClick, index, props.tableName, props.update);
+  };
+  const refresh = async () => {
+    dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
+    // mountComponents(ref.current, dom);
+  };
+  const ref: RefProps = {
+    onLoad: async () => {
+      // const self = ref.current;
+      dom.value = await loadData(onPageClick, 0, props.tableName, props.update);
+      // mountComponents(self, dom);
+    },
+  };
+  if (props.update) {
+    props.update.refreshRef = refresh;
+  }
+  bindGlobalStyles('admin-table-data', '.admin-table-data', css);
+  const dom = HtmlVar('');
+  return (
+    <div className='admin-table-data' ref={ref}>
+      <button class='button-base button-s' onClick={refresh}>
+        Refresh
+      </button>
+      {dom.node}
+    </div>
+  );
+};
+
+export const TableDataPage = (tableName: string) => {
+  return (
+    <div>
+      table: {tableName}
+      <AdminTableData tableName={tableName}></AdminTableData>
+    </div>
+  );
+};