@dao42/d42paas-front 0.4.8 → 0.4.9

package/src/pages/index.tsx

@@ -1,452 +0,0 @@
-import React, { Suspense, useEffect, useState } from 'react';
-import { lazy } from '@loadable/component';
-import { useOT } from '~/hooks';
-// import * as ot from 'ot';
-import styled from '@emotion/styled';
-// import { animated, useSpring } from 'react-spring';
-import Terminal from '~/components/Terminal';
-import Tabs from '~/components/Tabs';
-import create from 'zustand';
-import { css } from '@emotion/css';
-import { Avatar } from '~/components';
-import Skeleton from '~/components/Skeleton';
-import { oTStore } from '~/stores';
-// import { FileTree } from '~/components/FileTree';
-import Console from '~/components/Console';
-import ToolBar from '~/components/ToolBar';
-// import { TreeItemIndex } from 'react-complex-tree/lib/esm/types';
-import OutputBrowser from '~/components/OutputBrowser';
-import { ITerminalOptions } from 'xterm';
-import { replay } from '~/helpers/collections/replay';
-import LiveContent from '~/components/LiveContent';
-import { userListStore, userStore } from '~/stores/oTStore';
-
-export enum LanguageIcon {
-  js = 'javascript',
-  ts = 'typescript',
-  typescript = 'typescript',
-  tsx = 'typescript',
-  python = 'python',
-  json = 'json',
-  ruby = 'ruby',
-  rb = 'ruby',
-  java = 'java',
-  md = 'markdown',
-  erb = 'erb',
-  css = 'css',
-  ru = 'ruby',
-  ejs = 'html',
-  html = 'html',
-}
-const useIndexState = create<{
-  isFolded: boolean;
-  setFold: (arg: boolean) => void;
-}>((set) => ({
-  isFolded: false,
-  setFold: (arg) => set({ isFolded: arg }),
-}));
-
-const LazyEditorComponent = lazy(
-  async () => (await import('../components/Editor')).Editor,
-);
-const LazyTreeComponent = lazy(
-  async () => (await import('../components/FileTree')).FileTree,
-);
-
-/*! purgecss start ignore */
-
-const MainLayout = styled.div`
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background: #202327;
-  .lan-iconfont {
-    font-size: 40px;
-  }
-  .replay-button {
-    margin-left: 20px;
-    box-shadow: 0 0 5px aliceblue;
-    padding: 7px;
-    border-radius: 5px;
-    font-size: 12px;
-    background: #fff;
-    color: #000;
-    transition: 0.2s all;
-    &:active {
-      box-shadow: 0 0 0 aliceblue;
-      margin-right: 8px;
-      margin-top: 5px;
-    }
-  }
-`;
-/*! purgecss end ignore */
-
-const PreviewWrapper = styled.div`
-  height: 40vh;
-  color: #333333;
-  background-color: #eaeaea;
-`;
-
-const TermWrapper = styled.div`
-  height: calc(100% - 40vh - 51px);
-  width: 100%;
-`;
-
-const HeaderLayout = styled.header`
-  width: 100%;
-`;
-
-const ContainerLayout = styled.div`
-  height: calc(100% - 4.625rem);
-  section {
-    height: calc(100% - 0.625rem);
-  }
-`;
-
-const IDELayout = styled.div`
-  height: 100%;
-`;
-
-const RunnerLayout = styled.section`
-  background: #202327;
-  width: 500px;
-`;
-
-const Index = (props) => {
-  const tabItems = [
-    {
-      eventKey: 'console',
-      itemName: 'Console',
-    },
-    {
-      eventKey: 'shell',
-      itemName: 'Shell',
-    },
-  ];
-  const defaultOptions: ITerminalOptions = {
-    convertEol: true,
-    fontSize: 12,
-    fontFamily: 'Monaco, Menlo, monospace',
-    lineHeight: 1,
-    cursorBlink: true,
-    cursorWidth: 1,
-    cursorStyle: 'block',
-    rightClickSelectsWord: true,
-    theme: {
-      background: '#1E1E1E',
-    },
-  };
-
-  // console.log(props);
-  const isFolded = useIndexState.getState().isFolded;
-  const playgroundInfo = oTStore((state) => state.playgroundInfo);
-
-  const [active, setActive] = useState('shell');
-  const [url, setUrl] = useState(playgroundInfo.url);
-  const { socket } = useOT.getState();
-  let terminalTabsTimer = 1;
-  const [consoleComp, setConsoleComp] = useState(<></>);
-  useEffect(() => {
-    if (terminalTabsTimer && active === 'console') {
-      terminalTabsTimer--;
-      setConsoleComp(<Console options={defaultOptions} fitHook={isFolded} />);
-    }
-  }, [active]);
-
-  useEffect(() => {
-    props.replay && replay();
-  }, [props.replay]);
-
-  useEffect(() => {
-    setUrl(playgroundInfo.url);
-  }, [playgroundInfo]);
-  useEffect(() => {
-    props.playgroundId &&
-      socket?.emit(
-        'playgroundInfo',
-        JSON.stringify({
-          messageId: '1',
-          playgroundId: props.playgroundId,
-        }),
-      );
-    // temp code
-  }, [props.playgroundId]);
-  // useEffect(() => {
-  //   // fetch('http://smb.dev.paas.dao42.com:9998/PaaS/users')
-  //   // fetch('/paas/users')
-  //   //   .then((d) => d.json())
-  //   //   .then((d) => {
-  //   //     // console.log(d);
-  //   //   });
-  // }, [props.users]);
-  // console.log();
-  return (
-    <>
-      <MainLayout className="flex flex-col">
-        {/* 头部 */}
-        <HeaderComponent />
-        {/* 内容区 */}
-        <ContainerLayout className="flex flex-1 mt-2.5 flex-row">
-          {/* 左侧栏 */}
-
-          <section className="flex flex-row">
-            <SliderComponent />
-            <TreeComponent />
-            {/* 文件树 */}
-          </section>
-          {/* 编辑器与终端 */}
-          <section className="bg-codezone-black rounded-sm mx-3.5 flex-1 flex flex-col">
-            {playgroundInfo.dockerId ? (
-              <IDELayout>
-                {/* <Skeleton count={10} /> */}
-                <Suspense fallback={<Skeleton count={10} />}>
-                  <LazyEditorComponent />
-                </Suspense>
-              </IDELayout>
-            ) : null}
-          </section>
-
-          {/* 运行框 */}
-          <RunnerLayout
-            // className={`rounded-sm mr-2.5  ${!isFolded ? 'max-w-5/12' : 'w-0'}`}
-            className={`rounded-sm mr-2.5`}
-          >
-            <PreviewWrapper className="mb-2.5 relative">
-              <OutputBrowser url={url} />
-            </PreviewWrapper>
-
-            <Tabs
-              className="mb-1"
-              appearance="tabs"
-              activeKey={active}
-              onSelect={setActive}
-              tabItems={tabItems}
-            />
-            <Suspense fallback={<Skeleton />}>
-              <TermWrapper>
-                <div
-                  key="console"
-                  className=""
-                  style={{
-                    display: active === 'console' ? 'block' : 'none',
-                    height: '100%',
-                    width: '100%',
-                  }}
-                >
-                  {consoleComp}
-                </div>
-                <div
-                  key="terminal"
-                  style={{
-                    display: active === 'console' ? 'none' : 'block',
-                    height: '100%',
-                    width: '100%',
-                  }}
-                >
-                  <Terminal options={defaultOptions} fitHook={isFolded} />
-                </div>
-              </TermWrapper>
-            </Suspense>
-          </RunnerLayout>
-        </ContainerLayout>
-      </MainLayout>
-    </>
-  );
-};
-
-const HeaderComponent = () => {
-  // const { userList } = userListStore.getState();
-  const userList = userListStore((state) => state.userList);
-  const appStatus = oTStore((state) => state.appStatus);
-  const globalData = oTStore((state) => state.globalData);
-  const { setAppStatus } = oTStore.getState();
-  const user = userStore.getState().userInfo;
-  // const [isRecording, setIsRecording] = useState<boolean>(false);
-  // console.log(userList);
-  return userList ? (
-    <HeaderLayout className="relative bg-codezone-black h-16 flex px-9 flex-shrink-0 justify-between">
-      <div className="flex">
-        <Avatar
-          user={user}
-          onClick={() => {
-            const minePage = window.open(
-              '//github.com/login/oauth/authorize?client_id=7333fa72cf5753ba016e&redirect_uri=http://localhost:3000/auth/github',
-              'targetWindow',
-              `toolbar=no,
-              location=no,
-              status=no,
-              menubar=no,
-              scrollbars=yes,
-              resizable=yes,
-              width=500,
-              height=500`,
-            );
-            minePage.addEventListener(
-              'load',
-              () => {
-                minePage.close();
-              },
-              false,
-            );
-          }}
-        />
-        {/* playgroundInfo */}
-        <div className="flex" style={{ color: '#fff', marginLeft: 20 }}>
-          <span className="self-center">{user.name}</span>
-          <i className="self-center" style={{ margin: '0 10px' }} />
-          <i
-            className={`self-center
-
-              devicon-${oTStore
-                .getState()
-                .playgroundInfo?.language?.toLowerCase()}-plain
-            lan-iconfont
-            colored`}
-          />
-
-          {/* <span className="self-center mr-2.5">{'{ playground_info }'}</span> */}
-          {/* <span className="self-center mr-2.5">{'{ playground_info }'}</span> */}
-          <ToolBar />
-          {!globalData.isRecording ? (
-            <button
-              className="replay-button self-center"
-              style={{
-                color: appStatus === 'replay' ? 'rgb(48, 89, 182)' : '#000',
-              }}
-              onClick={() => {
-                if (appStatus !== 'replay') {
-                  replay();
-                }
-
-                if (appStatus === 'replay') {
-                  replay('pause');
-                }
-              }}
-            >
-              {appStatus === 'replay'
-                ? '暂停播放'
-                : appStatus === 'pause'
-                ? '继续播放'
-                : '播放'}
-            </button>
-          ) : null}
-
-          {appStatus === 'replay' ? (
-            <button
-              className="replay-button self-center"
-              onClick={() => {
-                replay('stop');
-              }}
-            >
-              {appStatus === 'replay' ? '停止播放' : null}
-            </button>
-          ) : null}
-
-          {appStatus !== 'replay' ? (
-            <button
-              className="replay-button self-center"
-              // style={{
-              //   color: appStatus === 'replay' ? 'rgb(48, 89, 182)' : '#000',
-              // }}
-              onClick={() => {
-                if (!globalData.isRecording) {
-                  oTStore.getState().setGlobalData({
-                    isRecording: true,
-                  });
-                  useOT.getState().socket.emit('globalData', {
-                    isRecording: true,
-                  });
-                  return;
-                }
-                // oTStore.getState().setGlobalData({
-                //   isRecording: false,
-                // });
-                // useOT.getState().socket.emit('globalData', {
-                //   isRecording: false,
-                // });
-              }}
-            >
-              {globalData.isRecording ? '重新录制' : '开始录制'}
-            </button>
-          ) : null}
-
-          {globalData.isRecording ? (
-            <button
-              className="replay-button self-center"
-              onClick={() => {
-                oTStore.getState().setGlobalData({
-                  isRecording: false,
-                });
-                useOT.getState().socket.emit('globalData', {
-                  isRecording: false,
-                });
-                setAppStatus('code');
-                // replay('stop');
-              }}
-            >
-              停止录制
-            </button>
-          ) : null}
-        </div>
-      </div>
-      <LiveContent />
-
-      <div className="items-center flex relative">
-        {userListStore.getState().userList.map((item, index) => {
-          return (
-            <div className="-ml-2.5 z-0 avatar-hover" key={index}>
-              <Avatar user={item} />
-            </div>
-          );
-        })}
-      </div>
-    </HeaderLayout>
-  ) : null;
-};
-
-const SliderComponent = () => {
-  const setFold = useIndexState((state) => state.setFold);
-  const isFolded = useIndexState((state) => state.isFolded);
-
-  return (
-    <section className="bg-codezone-black rounded-sm w-14 ml-2.5 flex flex-col pt-5 flex-shrink-0">
-      <i
-        onClick={() => setFold(!isFolded)}
-        className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 snippets"
-      />
-      {/* <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 Field-time"></i>
-      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 CodeSandbox"></i>
-      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 database"></i>
-      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 cloud-upload"></i>
-      <i className="cursor-pointer text-2xl text-gray-50 self-center mb-6 flex-center d42 setting"></i> */}
-    </section>
-  );
-};
-
-const TreeComponent = () => {
-  const isFolded = useIndexState.getState().isFolded;
-  return (
-    <section
-      className={`bg-codezone-black rounded-sm ml-2.5 transition-all flex-shrink-0 min-w-52 ${
-        !isFolded ? 'visible' : 'invisible'
-      } ${!isFolded ? 'w-52' : 'w-0'}`}
-      // } ${!isFolded ? 'w-52' : 'w-0'}`}
-    >
-      <header
-        className={css`
-          margin: 15px;
-          color: #fff;
-          visibility: ${!isFolded ? 'visible' : 'hidden'};
-        `}
-      >
-        文件
-      </header>
-      <div style={{ height: 'calc(100% - 52px)' }}>
-        <Suspense fallback={<Skeleton count={5} />}>
-          <LazyTreeComponent />
-        </Suspense>
-      </div>
-    </section>
-  );
-};
-export default Index;

package/src/public/dev.html

@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DaoPaaS</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body>
-    <main>
-        <div class="edit-container"></div>
-    </main>
-    <script>
-      window.onload = () => {
-        var qs = new URLSearchParams(document.location.search.substring(1));
-        window.daopaas = new DaoPaaS({
-          ticket: qs.get('ticket'),
-          playgroundId: qs.get('playgroundId'),
-          userId: qs.get('userId'),
-          tenantId: qs.get('tenantId'),
-          username: qs.get('username')
-        });
-        daopaas.Page({
-            container: document.querySelector('main'),
-                // props: {
-                //     playgroundId: search,
-                // }
-            }
-        )
-      }
-    </script>
-</body>
-</html>

package/src/public/index.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DaoPaaS</title>
-    <style>
-        main {
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .edit-container {
-            height: 100%;
-        }
-    </style>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-    <!-- <link rel="stylesheet" href="./style.css" crossorigin="anonymous" /> -->
-
-</head>
-<body>
-    <main>
-        <div class="edit-container"></div>
-    </main>
-    <!-- <script src="/dist/daoPaaS.js"></script> -->
-    <script type="module" src="../app.tsx"></script>
-
-    <script>
-      window.onload = () => {
-        var qs = new URLSearchParams(document.location.search.substring(1));
-        window.daopaas = new DaoPaaS({
-          ticket: qs.get('ticket'),
-          playgroundId: qs.get('playgroundId'),
-          userId: qs.get('userId'),
-          tenantId: qs.get('tenantId'),
-          username: qs.get('username')
-        });
-        daopaas.Page({
-            container: document.querySelector('main'),
-                // props: {
-                //     playgroundId: search,
-                // }
-            }
-        )
-      }
-    </script>
-</body>
-</html>

package/src/public/sdkserver.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DaoPaaS</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
-    <script src="https://cdn.tailwindcss.com"></script>
-
-</head>
-<body>
-    <main></main>
-    <script>
-      window.onload = () => {
-        var qs = new URLSearchParams(document.location.search.substring(1));
-        // console.log(DaoPaaS);
-        var daopaas = new DaoPaaS({
-          ticket: qs.get('ticket'),
-          playgroundId: qs.get('playgroundId'),
-          userId: qs.get('userId'),
-          tenantId: qs.get('tenantId'),
-          username: qs.get('username')
-        });
-        daopaas.Page({
-            container: document.querySelector('main'),
-                // props: {
-                //     playgroundId: search,
-                // }
-            }
-        )
-      }
-
-    </script>
-</body>
-</html>

package/src/stores/index.tsx

@@ -1 +0,0 @@
-export { oTStore } from './oTStore';