lupine.api 1.0.41

package/admin/admin-table-list.tsx

@@ -0,0 +1,231 @@
+import {
+  DomUtils,
+  NotificationColor,
+  NotificationMessage,
+  CssProps,
+  RefProps,
+  getRenderPageProps,
+  mountInnerComponent,
+  downloadLink,
+} from 'lupine.components';
+import { adminFrameProps } from './admin-frame-props';
+import { TableDataPage } from './admin-table-data';
+
+const fetchTableList = async () => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/db/tables/list');
+  return data.json;
+};
+const fetchTableDrop = async (tableName: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(`/api/admin/db/table/drop/${tableName}`);
+  return data.json;
+};
+const fetchTableTruncate = async (tableName: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/db/table/truncate/' + tableName);
+  return data.json;
+};
+const fetchTableTruncateAll = async () => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/db/tables/truncate');
+  return data.json;
+};
+
+export const TableListPage = () => {
+  const refUpdate = adminFrameProps.tabsHook;
+
+  const openTablePanel = async (tableName: string) => {
+    if (refUpdate?.getCount && refUpdate.getCount() > adminFrameProps.maxTabsCount) {
+      alert('You are opening too many pages');
+      return;
+    }
+    if (refUpdate?.findAndActivate && refUpdate.findAndActivate('Table: ' + tableName)) {
+      return;
+    }
+    refUpdate?.newPage && (await refUpdate.newPage('Table: ' + tableName, TableDataPage(tableName)));
+  };
+
+  const onDelete = async (tableName: string) => {
+    if (!confirm(`Are you really Deleting ${tableName}?`)) {
+      return;
+    }
+    const json = await fetchTableDrop(tableName);
+    console.log('====fetchTableDelete', json);
+    NotificationMessage.sendMessage('Deleted: ' + tableName);
+    onClick();
+  };
+
+  const onDownload = async (tableName: string) => {
+    downloadLink('/api/admin/db/table/download/' + tableName);
+  };
+
+  const onTruncate = async (tableName: string) => {
+    if (!confirm(`Are you really Removing all data for ${tableName}?`)) {
+      return;
+    }
+    const json = await fetchTableTruncate(tableName);
+    console.log('====fetchTableTruncate', json);
+    NotificationMessage.sendMessage('Truncated: ' + tableName);
+    onClick();
+  };
+
+  const onDownloadAll = async () => {
+    downloadLink('/api/admin/db/tables/download');
+  };
+
+  const onTruncateAll = async () => {
+    if (!confirm(`Are you really Removing all data for all tables? You can't revert it! (first confirm)`)) {
+      return;
+    }
+    if (
+      !confirm(`Are you really Removing all data for all tables? You may not be able to login again! (last confirm)`)
+    ) {
+      return;
+    }
+    await fetchTableTruncateAll();
+    NotificationMessage.sendMessage('Truncated all tables!');
+    onClick();
+  };
+
+  const onDropAll = async () => {
+    if (!confirm(`Are you really Dropping all tables? You can't revert it! (first confirm)`)) {
+      return;
+    }
+    if (!confirm(`Are you really Dropping all tables? You may not be able to login again! (last confirm)`)) {
+      return;
+    }
+    const data = await getRenderPageProps().renderPageFunctions.fetchData('/api/admin/db/tables/drop');
+    NotificationMessage.sendMessage('Dropped all tables!' + JSON.stringify(data.json, null, '    '));
+    onClick();
+  };
+
+  const onClick = async () => {
+    const search = refInput.current.value;
+    const json = await fetchTableList();
+    console.log('====fetchTableList', json);
+
+    if (!json || json.status !== 'ok') {
+      NotificationMessage.sendMessage(json.message, NotificationColor.Error);
+      return;
+    }
+    const dom =
+      json && json.status === 'ok' && json.result.length > 0 ? (
+        <div>
+          {json.result
+            .filter((item: { tbl_name: string | any[] }) => {
+              return !search || item.tbl_name.indexOf(search) >= 0;
+            })
+            .map((item: any, index: number) => {
+              return (
+                <div class={'row-' + (index % 2)}>
+                  <a href='javascript:void(0);' onClick={() => openTablePanel(item.tbl_name)}>
+                    {item.tbl_name}
+                  </a>
+                  , count: {item.count}
+                  <div>sql: {item.sql},</div>
+                  <div class={'row-box'}>
+                    <button onClick={() => openTablePanel(item.tbl_name)} class='button-base button-s'>
+                      Browse
+                    </button>
+                    <button onClick={() => onDownload(item.tbl_name)} class='button-base button-s'>
+                      Download
+                    </button>
+                    <button onClick={() => onTruncate(item.tbl_name)} class='button-base button-s red'>
+                      Truncate
+                    </button>
+                    <button onClick={() => onDelete(item.tbl_name)} class='button-base button-s red'>
+                      Drop
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      ) : (
+        <div>No Result</div>
+      );
+
+    await mountInnerComponent(document.querySelector('.admin-table-list'), dom);
+  };
+  const onUpload = async () => {
+    const domFile = document.querySelector('#upload_data') as HTMLInputElement;
+    if (!domFile.files || domFile.files.length !== 1) {
+      alert('Please select one and only one file.');
+      return;
+    }
+
+    const data = await fetch('/api/admin/db/tables/upload', {
+      method: 'POST',
+      body: new Uint8Array(await domFile.files[0].arrayBuffer()),
+      headers: {
+        'Content-type': domFile.files[0].type,
+      },
+    });
+    const result = await data.json();
+    domFile.value = '';
+    onClick();
+    // document.querySelector('.admin-table-log')!.innerHTML = JSON.stringify(result, null, ' ');
+    NotificationMessage.sendMessage(JSON.stringify(result, null, ' '), NotificationColor.Info, true);
+  };
+
+  const css: CssProps = {
+    '.admin-table-list > div > div': {
+      backgroundColor: 'var(--row-1-bg-color)', //'#95c998',
+      marginTop: '16px',
+    },
+    '.admin-table-list .row-1': {
+      backgroundColor: 'var(--row-2-bg-color)', //'#e8f8e8', //#95c998
+    },
+    '.admin-table-list > div > div:hover': {
+      backgroundColor: 'var(--row-hover-bg-color)',
+    },
+    '.admin-table-log': {
+      display: 'block',
+      unicodeBidi: 'embed',
+      fontFamily: 'monospace',
+      whiteSpace: 'pre',
+    },
+  };
+  let timeoutID: NodeJS.Timeout | undefined = undefined;
+  const refInput: RefProps = {};
+  const ref: RefProps = {
+    onLoad: onClick,
+  };
+  const onInput = () => {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      onClick();
+    }, 500);
+  };
+  return (
+    <div css={css} ref={ref}>
+      <div class='admin-sub-title'>Table List</div>
+      <div class='row-box'>
+        <div>
+          <input type='text' ref={refInput} class='input-base' placeholder='Search' onInput={onInput} />
+        </div>
+        <button onClick={onClick} class='button-base'>
+          Refresh List
+        </button>
+        <button onClick={onDownloadAll} class='button-base'>
+          Download all data
+        </button>
+        <button onClick={onTruncateAll} class='button-base red'>
+          Truncate all data
+        </button>
+        <button onClick={onDropAll} class='button-base red'>
+          Drop all table
+        </button>
+      </div>
+      <div class='row-box mt1'>
+        <div>
+          <input type='file' id='upload_data' class='input-base' />
+        </div>
+        <button onClick={onUpload} class='button-base'>
+          Upload
+        </button>
+      </div>
+      <div class='admin-table-log'></div>
+      <div class='admin-table-list'>(Table list)</div>
+    </div>
+  );
+};

package/admin/admin-test-animations.tsx

@@ -0,0 +1,379 @@
+import {
+  RefProps,
+  updateStyles,
+  ButtonPushAnimation,
+  ButtonPushAnimationSize,
+  HtmlVar,
+  PlayButton,
+  PlayButtonSize,
+  Progress,
+  ProgressHookProps,
+  Spinner01,
+  Spinner02,
+  Spinner03,
+  SpinnerSize,
+  TextGlow,
+  TextWave,
+  CssProps,
+} from 'lupine.components';
+
+const TestButton = () => {
+  const onClick = async () => {
+    dom.value = 'You clicked the button.';
+  };
+  const ref: RefProps = {
+    onLoad: async () => {
+      dom.value = 'This value is set in onLoad event.';
+    },
+  };
+  const dom = HtmlVar('');
+  return (
+    <div ref={ref} class='row-box pt-m'>
+      <button onClick={onClick} class='button-base'>
+        Click me!
+      </button>
+      <div class='pl-m'>{dom.node}</div>
+    </div>
+  );
+};
+
+const TestInput = () => {
+  const onInput = async (ev?: any) => {
+    // you can get value from: ev.target.value
+    dom.value = 'Your input: ' + refInput.current.value;
+  };
+  const onClick = async () => {
+    refInput.current.value = '';
+    refInput.current.dispatchEvent(new Event('input'));
+  };
+  const dom = HtmlVar('');
+  const refInput: RefProps = {};
+  return (
+    <div>
+      <div class='row-box pt-m'>
+        <input ref={refInput} class='input-base' type='input' onInput={onInput} />
+        <div class='pl-m'>{dom.node}</div>
+      </div>
+      <div class='row-box pt-m'>
+        <button onClick={onClick} class='button-base'>
+          Clear Input Value
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const TestMouse = () => {
+  const onClick = (ev: any) => {
+    dom.value = `Clicked: x: ${ev.clientX}, y: ${ev.clientY}`;
+  };
+  const onMMove = (ev: any) => {
+    dom.value = `Moving: x: ${ev.clientX}, y: ${ev.clientY}`;
+  };
+  const dom = HtmlVar('');
+  return (
+    <div style={{ border: 'solid 1px red' }} class='row-box p-m' onMouseMove={onMMove}>
+      <button onClick={onClick} class='button-base'>
+        Move your mouse
+      </button>
+      <div class='pt-m'>{dom.node}</div>
+    </div>
+  );
+};
+
+// You can use defaultMessageHub, or use the sample here
+type CommunicationProps = {
+  update: {
+    send: (obj: { id: string; message: string }) => { status: 'ok' | 'error'; message: string };
+    receive?: (obj: { id: string; message: string }) => { status: 'ok' | 'error'; message: string };
+  };
+};
+const TestCommunication = (props: CommunicationProps) => {
+  const onInput = async (ev: any) => {
+    const msg = ev.target.value;
+    const response = props.update.send({ id: 'msg', message: msg });
+    dom.value = `response, status: ${response.status}, msg: ${response.message}`;
+  };
+  props.update.receive = (obj: { id: string; message: string }) => {
+    dom.value = `received message, id: ${obj.id}, msg: ${obj.message}`;
+    return { status: 'ok', message: 'echo: ' + obj.message };
+  };
+  const dom = HtmlVar('');
+  return (
+    <div>
+      <div class='row-box pt-m'>
+        <label class='pr-m'>Send Message: </label>
+        <input class='input-base' type='input' onInput={onInput} />
+      </div>
+      <div class='row-box pt-m'>
+        <label class='pr-m'>Received Message: </label>
+        <div class='pl-m'>{dom.node}</div>
+      </div>
+    </div>
+  );
+};
+
+const TestHtmlVar = () => {
+  let count = 0;
+  const onClick = () => {
+    count++;
+    dom.value = defaultContent();
+  };
+  const defaultContent = () => {
+    // <></> is not needed, and here is used to test that <fragment> tag is not added
+    return (
+      <>
+        <div class='row-box pt-m'>
+          <label class='pr-m'>Count: {count}</label>
+          <button class='button-base' onClick={onClick}>Click me</button>
+        </div>
+      </>
+    );
+  };
+  const dom = HtmlVar(defaultContent());
+  const css: CssProps = {
+    backgroundColor: '#a1ffe8',
+    padding: '10px',
+  };
+  const ref: RefProps = {};
+  return (
+    <div ref={ref} css={css}>
+      {dom.node}
+    </div>
+  );
+};
+
+const TestMountInnerComponent = () => {
+  let count = 0;
+  const css: CssProps = {
+    backgroundColor: '#a1ffa7',
+    padding: '10px',
+  };
+  const ref: RefProps = {};
+  const onClick = () => {
+    count++;
+    ref.mountInnerComponent!(defaultContent());
+  };
+  const defaultContent = () => {
+    // <></> is not needed, and here is used to test that <fragment> tag is not added
+    return (
+      <>
+        <div class='row-box pt-m'>
+          <label class='pr-m'>Count: {count}</label>
+          <button class='button-base' onClick={onClick}>Click me</button>
+        </div>
+      </>
+    );
+  };
+  return (
+    <div ref={ref} css={css}>
+      {defaultContent()}
+    </div>
+  );
+};
+
+const TestStyles = () => {
+  const css: any = {
+    color: 'blue',
+    border: '1px solid red',
+    'font-size': 20,
+    '@keyframes spin': {
+      '0%': {
+        textShadow: '5px 5px 0 #ff005e, 5px 5px 0 #00d4ff',
+      },
+      '50%': {
+        textShadow: '-5px -5px 0 #00d4ff, -5px -5px 0 #ff005e',
+      },
+    },
+    '.text, .text2': {
+      'font-size': '15px',
+      animation: 'spin 5s infinite',
+    },
+    '.text2:hover': {
+      color: 'red',
+      border: '1px solid green',
+      'font-size': '15px',
+    },
+    '@media screen and (min-width: 768px)': {
+      '.text, .text2': {
+        color: 'blue',
+        'font-size': '20px',
+      },
+    },
+    '@media screen and (min-width: 1024px)': {
+      '.text': {
+        color: 'orange',
+        'font-size': '30px',
+      },
+    },
+  };
+  let ref: RefProps = { id: '' };
+  const onClick = () => {
+    css.color = css.color === 'blue' ? 'green' : 'blue';
+    updateStyles(`[${ref.id}]`, css);
+    console.log(`update styles`, css.color, css);
+  };
+  return (
+    <div ref={ref} css={css} style='padding:10px;' class='pt-m' onClick={onClick}>
+      Click to change styles, <span class='text'>Change window's width, </span>
+      <span class='text2'>Move mouse to here</span>
+    </div>
+  );
+};
+
+const TestProgress = () => {
+  const progressHook: ProgressHookProps = {};
+  return (
+    <div>
+      <div class='row-box mb-s'>
+        <Progress hook={progressHook} />
+      </div>
+      <button
+        class='button-base button-m m-m'
+        onClick={async () => {
+          progressHook.onShow?.(true, 'Test Progress');
+          for (let i = 0; i < 100; i++) {
+            progressHook.onProgress?.(i / 100, 1, 1);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+          }
+          progressHook.onShow?.(false);
+        }}
+      >
+        Test Progress
+      </button>
+    </div>
+  );
+};
+
+export const AdminTestAnimationsPage = () => {
+  const msg1: CommunicationProps = {
+    update: {
+      send: (obj: { id: string; message: string }) => {
+        return msg2.update.receive!(obj);
+      },
+    },
+  };
+  const msg2: CommunicationProps = {
+    update: {
+      send: (obj: { id: string; message: string }) => {
+        return msg1.update.receive!(obj);
+      },
+    },
+  };
+  return (
+    <div>
+      <div>
+        <div>Test the Button's onClick event.</div>
+        <TestButton />
+      </div>
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test the Input's onChange event.</div>
+        <TestInput />
+      </div>
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test Mouse event.</div>
+        <TestMouse />
+      </div>
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test Communication between components.</div>
+        <TestCommunication update={msg1.update} />
+        <TestCommunication update={msg2.update} />
+      </div>
+
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test HtmlVar</div>
+        <TestHtmlVar />
+      </div>
+
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test mountInnerComponent</div>
+        <TestMountInnerComponent />
+      </div>
+
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test Style.</div>
+        <TestStyles />
+      </div>
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test Text Glow.</div>
+        <TextGlow text='This is a sample of Text Glow' />
+      </div>
+      <div class='pt-m'>
+        <br />
+        <hr />
+        <br />
+        <div>Test Text Wave.</div>
+        <TextWave text='This is a sample of Text Wave' />
+      </div>
+
+      <div class='pt-m'>
+        PlayButton
+        <PlayButton size={PlayButtonSize.Small} />
+        <PlayButton size={PlayButtonSize.Medium} />
+        <PlayButton size={PlayButtonSize.Large} />
+      </div>
+
+      <div class='p2'>
+        <div class='row-box mb-s'>
+          <Spinner01 size={SpinnerSize.Small} />
+          <Spinner01 size={SpinnerSize.Medium} />
+          <Spinner01 size={SpinnerSize.Large} />
+          <Spinner01 size={SpinnerSize.LargeLarge} />
+        </div>
+        <div class='row-box mb-s'>
+          <Spinner02 size={SpinnerSize.Small} />
+          <Spinner02 size={SpinnerSize.Medium} />
+          <Spinner02 size={SpinnerSize.Large} />
+          <Spinner02 size={SpinnerSize.LargeLarge} />
+        </div>
+        <div class='row-box mb-s'>
+          <Spinner03 size={SpinnerSize.Small} />
+          <Spinner03 size={SpinnerSize.Medium} />
+          <Spinner03 size={SpinnerSize.Large} />
+          <Spinner03 size={SpinnerSize.LargeLarge} />
+        </div>
+
+        <div class='row-box mb-s'>
+          <ButtonPushAnimation text='Test ButtonPushAnimation' size={ButtonPushAnimationSize.SmallSmall} />
+        </div>
+        <div class='row-box mb-s'>
+          <ButtonPushAnimation text='Test ButtonPushAnimation' size={ButtonPushAnimationSize.Small} />
+        </div>
+        <div class='row-box mb-s'>
+          <ButtonPushAnimation text='Test ButtonPushAnimation' size={ButtonPushAnimationSize.Medium} />
+        </div>
+        <div class='row-box mb-s'>
+          <ButtonPushAnimation text='Test ButtonPushAnimation' size={ButtonPushAnimationSize.Large} />
+        </div>
+        <div class='row-box mb-s'>
+          <ButtonPushAnimation text='Test ButtonPushAnimation' size={ButtonPushAnimationSize.LargeLarge} />
+        </div>
+
+        <div class='row-box mb-s'>
+          <TestProgress />
+        </div>
+      </div>
+    </div>
+  );
+};