|
|
@@ -163,211 +163,208 @@ class App extends Component {
|
|
|
const {locale, languageButton, visible, wxVisible} = this.state;
|
|
|
|
|
|
return (
|
|
|
- <Router>
|
|
|
- <Layout style={{minHeight: '100vh'}}>
|
|
|
- <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
|
|
|
- <Link to="/"
|
|
|
- onClick={() => this.setState({menuLevel1: "graphql-service", sideBar: "ecommerce"})}>
|
|
|
- <div className="logo-wrapper">
|
|
|
- <div className='logo'/>
|
|
|
- </div>
|
|
|
- </Link>
|
|
|
- <Menu
|
|
|
- theme="dark"
|
|
|
- mode="horizontal"
|
|
|
- selectedKeys={[this.state.menuLevel1]}
|
|
|
- style={{lineHeight: '64px'}}
|
|
|
- onClick={(e) => this.switchMenuTab('menuLevel1', e)}
|
|
|
- >
|
|
|
- <Menu.Item key="graphql-service">
|
|
|
- <Link to="/graphql-service/trial-case/index"><FormattedMessage
|
|
|
- id="Graphql Service"/></Link>
|
|
|
- </Menu.Item>
|
|
|
- <Menu.Item key="wechat-service">
|
|
|
- <Link to="/wechat-service/trial-case/index"><FormattedMessage
|
|
|
- id="Wechat Service"/></Link>
|
|
|
- </Menu.Item>
|
|
|
- <Menu.Item key="quant-service">
|
|
|
- <Link to="/quant-service/trial-case/index"><FormattedMessage id="Quantization Service"/></Link>
|
|
|
- </Menu.Item>
|
|
|
- </Menu>
|
|
|
-
|
|
|
- {
|
|
|
- this.state.userID === '' ?
|
|
|
- <Link to="/login">
|
|
|
- <Button className='login-button' type='primary'
|
|
|
- onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
|
|
|
- <FormattedMessage id="Login"/></Button>
|
|
|
- </Link>
|
|
|
- :
|
|
|
- <User
|
|
|
- userID={this.state.userID}
|
|
|
- languageButton={this.state.languageButton}
|
|
|
- changeLocale={this.changeLocale}
|
|
|
- switchMenuLevel={this.switchMenuLevel}
|
|
|
- />
|
|
|
- }
|
|
|
+ <Layout style={{minHeight: '100vh'}}>
|
|
|
+ <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
|
|
|
+ <Link to="/"
|
|
|
+ onClick={() => this.setState({menuLevel1: "graphql-service", sideBar: "ecommerce"})}>
|
|
|
+ <div className="logo-wrapper">
|
|
|
+ <div className='logo'/>
|
|
|
+ </div>
|
|
|
+ </Link>
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ mode="horizontal"
|
|
|
+ selectedKeys={[this.state.menuLevel1]}
|
|
|
+ style={{lineHeight: '64px'}}
|
|
|
+ onClick={(e) => this.switchMenuTab('menuLevel1', e)}
|
|
|
+ >
|
|
|
+ <Menu.Item key="graphql-service">
|
|
|
+ <Link to="/developer/graphql-service/trial-case/index"><FormattedMessage
|
|
|
+ id="Graphql Service"/></Link>
|
|
|
+ </Menu.Item>
|
|
|
+ <Menu.Item key="wechat-service">
|
|
|
+ <Link to="/developer/wechat-service/trial-case/index"><FormattedMessage
|
|
|
+ id="Wechat Service"/></Link>
|
|
|
+ </Menu.Item>
|
|
|
+ <Menu.Item key="quant-service">
|
|
|
+ <Link to="/developer/quant-service/trial-case/index"><FormattedMessage id="Quantization Service"/></Link>
|
|
|
+ </Menu.Item>
|
|
|
+ </Menu>
|
|
|
+
|
|
|
+ {
|
|
|
+ this.state.userID === '' ?
|
|
|
+ <Link to="/developer/login">
|
|
|
+ <Button className='login-button' type='primary'
|
|
|
+ onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
|
|
|
+ <FormattedMessage id="Login"/></Button>
|
|
|
+ </Link>
|
|
|
+ :
|
|
|
+ <User
|
|
|
+ userID={this.state.userID}
|
|
|
+ languageButton={this.state.languageButton}
|
|
|
+ changeLocale={this.changeLocale}
|
|
|
+ switchMenuLevel={this.switchMenuLevel}
|
|
|
+ />
|
|
|
+ }
|
|
|
|
|
|
- </Header>
|
|
|
+ </Header>
|
|
|
|
|
|
|
|
|
- {(() => {
|
|
|
- switch (this.state.menuLevel1) {
|
|
|
- case 'graphql-service':
|
|
|
- return (
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
- >
|
|
|
- <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
- showModal={this.showModal}/>
|
|
|
-
|
|
|
- </Sider>
|
|
|
- );
|
|
|
- case 'wechat-service':
|
|
|
- return (
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
- >
|
|
|
- <WxConfigSiderbar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
- wxShowModal={this.wxShowModal}/>
|
|
|
- </Sider>
|
|
|
- );
|
|
|
- case 'quant-service':
|
|
|
- return (
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
+ {(() => {
|
|
|
+ switch (this.state.menuLevel1) {
|
|
|
+ case 'graphql-service':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
+ sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
+ showModal={this.showModal}/>
|
|
|
+
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ case 'wechat-service':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <WxConfigSiderbar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
+ sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
+ wxShowModal={this.wxShowModal}/>
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ case 'quant-service':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ mode="inline"
|
|
|
+ inlineCollapsed={this.state.inlineCollapsed}
|
|
|
+ defaultSelectedKeys={['quant-service']}
|
|
|
+ defaultOpenKeys={['trial-case']}
|
|
|
+ // openKeys={['cloud-function']}
|
|
|
+ onClick={(e) => this.switchMenu('sideBar', e)}
|
|
|
+ selectedKeys={['quant-service']}
|
|
|
+ style={{
|
|
|
+ borderRight: 0,
|
|
|
+ overflow: 'auto',
|
|
|
+ height: '100vh',
|
|
|
+ left: '0',
|
|
|
+ width: '200px',
|
|
|
+ position: 'fixed'
|
|
|
+ }}
|
|
|
>
|
|
|
- <Menu
|
|
|
- theme="dark"
|
|
|
- mode="inline"
|
|
|
- inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- defaultSelectedKeys={['quant-service']}
|
|
|
- defaultOpenKeys={['trial-case']}
|
|
|
- // openKeys={['cloud-function']}
|
|
|
- onClick={(e) => this.switchMenu('sideBar', e)}
|
|
|
- selectedKeys={['quant-service']}
|
|
|
- style={{
|
|
|
- borderRight: 0,
|
|
|
- overflow: 'auto',
|
|
|
- height: '100vh',
|
|
|
- left: '0',
|
|
|
- width: '200px',
|
|
|
- position: 'fixed'
|
|
|
- }}
|
|
|
- >
|
|
|
- <SubMenu key="trial-case"
|
|
|
- title={<span><Icon type="appstore" theme="twoTone"/>
|
|
|
+ <SubMenu key="trial-case"
|
|
|
+ title={<span><Icon type="appstore" theme="twoTone"/>
|
|
|
<span><FormattedMessage id="Case Show"/></span></span>}>
|
|
|
- <Menu.Item key="quant-service">
|
|
|
- <Link to="/quant-service/trial-case/quant case">quant case</Link>
|
|
|
- </Menu.Item>
|
|
|
- </SubMenu>
|
|
|
-
|
|
|
- <Menu.Item key="instructions">
|
|
|
- <a href="https://ioobot-document.netlify.com/" title="instructions"
|
|
|
- target="instructions">
|
|
|
- <Icon type="file-text" theme="twoTone"/>
|
|
|
- <span><FormattedMessage id="Instructions"/></span>
|
|
|
- </a>
|
|
|
- </Menu.Item>
|
|
|
- </Menu>
|
|
|
- </Sider>
|
|
|
- );
|
|
|
- case 'user':
|
|
|
- return (
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
- >
|
|
|
- <Menu
|
|
|
- theme="dark"
|
|
|
- defaultSelectedKeys={['cloud-settings']}
|
|
|
- onClick={(e) => this.switchMenu('sideBar', e)}
|
|
|
- selectedKeys={[this.state.sideBar]}
|
|
|
- style={{
|
|
|
- borderRight: 0,
|
|
|
- overflow: 'auto',
|
|
|
- height: '100vh',
|
|
|
- left: '0',
|
|
|
- width: '200px',
|
|
|
- position: 'fixed'
|
|
|
- }}
|
|
|
- >
|
|
|
- <Menu.Item key="account">
|
|
|
- <Icon type="setting" theme="twoTone"/>
|
|
|
- <span><FormattedMessage id="Account center"/></span>
|
|
|
- <Link to="/login/account"/>
|
|
|
+ <Menu.Item key="quant-service">
|
|
|
+ <Link to="/developer/quant-service/trial-case/quant case">quant case</Link>
|
|
|
</Menu.Item>
|
|
|
-
|
|
|
- <Menu.Item key="cloud-settings">
|
|
|
- <Icon type="cloud" theme="twoTone"/>
|
|
|
- <span><FormattedMessage id="Cloud settings"/></span>
|
|
|
- <Link to="/login/cloud"/>
|
|
|
- </Menu.Item>
|
|
|
- </Menu>
|
|
|
- </Sider>
|
|
|
- );
|
|
|
- case 'ticket':
|
|
|
- return (
|
|
|
- ''
|
|
|
- );
|
|
|
- default:
|
|
|
- return (
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
- collapsible
|
|
|
- collapsed={this.state.collapsed}
|
|
|
- onCollapse={this.onCollapse}
|
|
|
+ </SubMenu>
|
|
|
+
|
|
|
+ <Menu.Item key="instructions">
|
|
|
+ <a href="https://ioobot-document.netlify.com/" title="instructions"
|
|
|
+ target="instructions">
|
|
|
+ <Icon type="file-text" theme="twoTone"/>
|
|
|
+ <span><FormattedMessage id="Instructions"/></span>
|
|
|
+ </a>
|
|
|
+ </Menu.Item>
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ case 'user':
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <Menu
|
|
|
+ theme="dark"
|
|
|
+ defaultSelectedKeys={['cloud-settings']}
|
|
|
+ onClick={(e) => this.switchMenu('sideBar', e)}
|
|
|
+ selectedKeys={[this.state.sideBar]}
|
|
|
+ style={{
|
|
|
+ borderRight: 0,
|
|
|
+ overflow: 'auto',
|
|
|
+ height: '100vh',
|
|
|
+ left: '0',
|
|
|
+ width: '200px',
|
|
|
+ position: 'fixed'
|
|
|
+ }}
|
|
|
>
|
|
|
- <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
- sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
- showModal={this.showModal}/>
|
|
|
- </Sider>
|
|
|
- );
|
|
|
- }
|
|
|
- })()}
|
|
|
- <Create visible={visible} hideModal={this.hideModal} switchSidebar={this.switchSidebar}/>
|
|
|
- <WxCreate visible={wxVisible} hideModal={this.wxHideModal} switchSidebar={this.switchSidebar}/>
|
|
|
-
|
|
|
- <LocaleProvider locale={locale}>
|
|
|
- <Layout style={{marginTop: '64px', zIndex: '0'}}
|
|
|
- key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
|
|
|
- <Switch>
|
|
|
- <Route path="/" exact component={TrialCase}/>
|
|
|
- <Route path="/graphql-service/trial-case/:case" component={TrialCase}/>
|
|
|
- <Route path="/graphql-service/my-create/:case" component={UserCreate}/>
|
|
|
- <Route path="/wechat-service/trial-case/:case" component={WxTrialCase}/>
|
|
|
- <Route path="/wechat-service/my-create/:case" component={WxUserCreate}/>
|
|
|
- <Route path="/quant-service/:sidebar/:case" component={QuantService}/>
|
|
|
- <Route path="/quant-service/:sidebar/:case" component={QuantService}/>
|
|
|
- <Route path="/login/:setting" component={Login}/>
|
|
|
- <Route path="/login" component={Login}/>
|
|
|
- <Route path="/ticket" component={Ticket}/>
|
|
|
- <Route path="/graphiql" component={Graphiql}/>
|
|
|
- <Redirect path="*" to="/"/>
|
|
|
- </Switch>
|
|
|
- </Layout>
|
|
|
- </LocaleProvider>
|
|
|
- </Layout>
|
|
|
- </Router>
|
|
|
+ <Menu.Item key="account">
|
|
|
+ <Icon type="setting" theme="twoTone"/>
|
|
|
+ <span><FormattedMessage id="Account center"/></span>
|
|
|
+ <Link to="/developer/login/account"/>
|
|
|
+ </Menu.Item>
|
|
|
+
|
|
|
+ <Menu.Item key="cloud-settings">
|
|
|
+ <Icon type="cloud" theme="twoTone"/>
|
|
|
+ <span><FormattedMessage id="Cloud settings"/></span>
|
|
|
+ <Link to="/developer/login/cloud"/>
|
|
|
+ </Menu.Item>
|
|
|
+ </Menu>
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ case 'ticket':
|
|
|
+ return (
|
|
|
+ ''
|
|
|
+ );
|
|
|
+ default:
|
|
|
+ return (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
|
|
|
+ collapsible
|
|
|
+ collapsed={this.state.collapsed}
|
|
|
+ onCollapse={this.onCollapse}
|
|
|
+ >
|
|
|
+ <GraphqlSidebar inlineCollapsed={this.state.inlineCollapsed}
|
|
|
+ sideBar={this.state.sideBar} switchMenu={this.switchMenu}
|
|
|
+ showModal={this.showModal}/>
|
|
|
+ </Sider>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })()}
|
|
|
+ <Create visible={visible} hideModal={this.hideModal} switchSidebar={this.switchSidebar}/>
|
|
|
+ <WxCreate visible={wxVisible} hideModal={this.wxHideModal} switchSidebar={this.switchSidebar}/>
|
|
|
+
|
|
|
+ <LocaleProvider locale={locale}>
|
|
|
+ <Layout style={{marginTop: '64px', zIndex: '0'}}
|
|
|
+ key={locale ? locale.locale : 'en'/* Have to refresh for production environment */}>
|
|
|
+ <Switch>
|
|
|
+ <Route path="/developer" exact component={TrialCase}/>
|
|
|
+ <Route path="/developer/graphql-service/trial-case/:case" component={TrialCase}/>
|
|
|
+ <Route path="/developer/graphql-service/my-create/:case" component={UserCreate}/>
|
|
|
+ <Route path="/developer/wechat-service/trial-case/:case" component={WxTrialCase}/>
|
|
|
+ <Route path="/developer/wechat-service/my-create/:case" component={WxUserCreate}/>
|
|
|
+ <Route path="/developer/quant-service/:sidebar/:case" component={QuantService}/>
|
|
|
+ <Route path="/developer/login/:setting" component={Login}/>
|
|
|
+ <Route path="/developer/login" component={Login}/>
|
|
|
+ <Route path="/developer/ticket" component={Ticket}/>
|
|
|
+ <Route path="/developer/graphiql" component={Graphiql}/>
|
|
|
+ <Redirect path="*" to="/"/>
|
|
|
+ </Switch>
|
|
|
+ </Layout>
|
|
|
+ </LocaleProvider>
|
|
|
+ </Layout>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
@@ -432,7 +429,7 @@ class GraphqlSidebar extends Component {
|
|
|
data.caseProject.map((project) =>
|
|
|
<Menu.Item key={project.projectName}>
|
|
|
<Link to={{
|
|
|
- pathname: `/graphql-service/trial-case/${project.projectName}`,
|
|
|
+ pathname: `/developer/graphql-service/trial-case/${project.projectName}`,
|
|
|
state: {
|
|
|
schemaName: project.projectName,
|
|
|
schemaID: project.schema_id.id,
|
|
|
@@ -462,7 +459,7 @@ class GraphqlSidebar extends Component {
|
|
|
data.project.map((project) =>
|
|
|
<Menu.Item key={project.projectName}>
|
|
|
<Link to={{
|
|
|
- pathname: `/graphql-service/my-create/${project.projectName}`,
|
|
|
+ pathname: `/developer/graphql-service/my-create/${project.projectName}`,
|
|
|
state: {
|
|
|
schemaName: project.projectName,
|
|
|
schemaID: project.schema_id.id,
|
|
|
@@ -537,7 +534,7 @@ class WxConfigSiderbar extends Component {
|
|
|
return (
|
|
|
<Menu.Item key={appName}>
|
|
|
<Link to={{
|
|
|
- pathname: `/wechat-service/trial-case/${appName}`,
|
|
|
+ pathname: `/developer/wechat-service/trial-case/${appName}`,
|
|
|
state: {
|
|
|
appName,
|
|
|
configID,
|
|
|
@@ -575,7 +572,7 @@ class WxConfigSiderbar extends Component {
|
|
|
return (
|
|
|
<Menu.Item key={appName}>
|
|
|
<Link to={{
|
|
|
- pathname: `/wechat-service/my-create/${appName}`,
|
|
|
+ pathname: `/developer/wechat-service/my-create/${appName}`,
|
|
|
state: {
|
|
|
appName,
|
|
|
configID,
|
|
|
@@ -653,14 +650,14 @@ class User extends Component {
|
|
|
}}>{this.props.languageButton}</a>
|
|
|
</Menu.Item>
|
|
|
<Menu.Item>
|
|
|
- <Link to="/login">
|
|
|
+ <Link to="/developer/login">
|
|
|
<div onClick={() => this.props.switchMenuLevel('menuLevel1', 'user')}>
|
|
|
<FormattedMessage id="Account center"/>
|
|
|
</div>
|
|
|
</Link>
|
|
|
</Menu.Item>
|
|
|
<Menu.Item>
|
|
|
- <Link to="/ticket">
|
|
|
+ <Link to="/developer/ticket">
|
|
|
<div onClick={() => this.props.switchMenuLevel('menuLevel1', 'ticket')}>
|
|
|
<FormattedMessage id="Submit Support Ticket"/>
|
|
|
</div>
|