update tpi ui

public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js

@@ -4,7 +4,7 @@
  * @Github: 
  * @Date: 2019-11-20 10:35:40
  * @LastEditors  : tangjiang
- * @LastEditTime : 2020-01-03 09:20:12
+ * @LastEditTime : 2020-01-03 11:28:26
  */
 import './index.scss';
 // import 'katex/dist/katex.css';
@@ -324,6 +324,7 @@ class EditTab extends React.Component {
       console.log(choid_ids);
       return (
         <Cascader 
+          placeholder="请选择"
           options={tempArr}
           expandTrigger="hover"
           value={choid_ids}

public/react/src/modules/page/VNC.css

@@ -87,15 +87,16 @@
     right: 150px;
     top: 0;
     height: 34px;
-    background: gold;
+    line-height: 32px;
+    /* background: gold; */
 }
 .code_evalute_icon{
     position: absolute;
     top: 0;
-    width: 56px;
-    height: 28px;
+    width: 54px;
+    height: 27px;
     left: 50%;
-    margin-left: -28px;
+    margin-left: -27px;
     background: rgba(42,58,79,1);
     z-index: 10;
     border-bottom-left-radius: 100px;
@@ -106,6 +107,15 @@
     opacity: .4;
     transition: all .3s;
 }
+.code_evalute_icon:hover{
+    opacity: 1;
+}
+
+.btn-arrow{
+    position: relative;
+    bottom: 3px;
+    font-size: 14px !important;
+}
 
 @keyframes mymove
 {

public/react/src/modules/page/VNCContainer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import axios from 'axios'
 import { Spin, Icon } from 'antd'
 import ClipboardJS from 'clipboard'
-
+import { connect } from 'react-redux';
 import VNCDisplay from './VNCDisplay'
 import FloatButton from './component/FloatButton'
 import SecondDrawer from './component/SecondDrawer'
@@ -202,13 +202,17 @@ class VNCContainer extends Component {
 	onSelect={onTreeSelect}
 	*/
   	render() {
-  		const { challenge, vnc_url, git_url } = this.props
+  		const { challenge, vnc_url, git_url, showOrHide, isCollapse } = this.props
 
 			const _classCtx = this.state.bottomDrawer ? 'btn_test_case_active' : 'btn_test_case';
 			const _classes = this.state.bottomDrawer 
 				? `iconfont icon-xiajiantou btn-arrow` 
 				: 'iconfont icon-shangjiantou btn-arrow';
 		const secondDrawerChildren = this.renderSecondDrawerChildren();
+
+			const _drawClasses = showOrHide
+			? ('codeEvaluateDrawer code_evaluate_stretch')
+			: (isCollapse ? 'codeEvaluateDrawer active' : 'codeEvaluateDrawer');
 	    return (
 	      	<React.Fragment>
                 <SecondDrawer
@@ -225,9 +229,20 @@ class VNCContainer extends Component {
 					<style>{`
 						/* 评测结果 */
 						.codeEvaluateDrawer{
-							// position: absolute;
-							// bottom: 84px;
+							position: absolute;
+							bottom: 84px;
+							transition: all .3s;
+							// bottom: px;
+						}
+
+						.codeEvaluateDrawer.active{
+							bottom: 50px;
+						}
+
+						.code_evaluate_stretch{
+							top: 0px;
 						}
+
 						.codeEvaluateDrawer #game_test_set_results {
 							height: 198px;
 						}					    
@@ -242,6 +257,14 @@ class VNCContainer extends Component {
 							background: rgb(5, 16, 26) !important;
 						}
 
+						.code_evaluate_stretch .ant-drawer-content-wrapper{
+							height: 100% !important;
+						}
+
+						.code_evaluate_stretch #game_test_set_results {
+							height: calc(100vh - 136px) !important;
+						}
+
 						.codeEvaluateFloatButton {
 							bottom: 180px !important;
 							left: unset;
@@ -348,12 +371,12 @@ class VNCContainer extends Component {
 						width={firstDrawerWidth}
 						closable={false}
 						onClose={this.onBottomDrawerClose}
-						visible={this.state.bottomDrawer===undefined?false:this.state.bottomDrawer}
-						className={'codeEvaluateDrawer'}
+						visible={isCollapse}
+						className={_drawClasses}
 						placement="bottom"
 						getContainer={false}
 						// style={{ position: 'absolute', bottom: '-25px', zIndex: 1 }}
-						style={{ position: 'absolute', bottom: '50px', zIndex: 1 }}
+						// style={{ position: 'absolute', bottom: '50px', top: 0, zIndex: 1 }}
 						afterVisibleChange={(visible) => {
 							if (visible) {
 								const canvas = $('.vncDisply canvas')[0]
@@ -364,9 +387,9 @@ class VNCContainer extends Component {
 					>
 						{ this.props.codeEvaluate }
 					</Drawer>
-					<FloatButton onClick={this.swtichBottomDrawer}
+					{/* <FloatButton onClick={this.swtichBottomDrawer}
 						className="codeEvaluateFloatButton"
-					>测试集</FloatButton>
+					>测试集</FloatButton> */}
 					{/* <div 
 						className={_classCtx}
 						onClick={this.swtichBottomDrawer}
@@ -382,4 +405,14 @@ class VNCContainer extends Component {
   	}
 }
 
-export default VNCContainer;
+const mapStateToProps = (state) => {
+	const { showOrHide, isCollapse } = state.tpiReducer;
+	return {
+		showOrHide,
+		isCollapse
+	}
+};
+
+export default connect(
+	mapStateToProps
+)(VNCContainer);

public/react/src/modules/page/main/CodeEvaluateView.js

@@ -4,10 +4,11 @@ import React, { Component } from 'react';
 import IconButton from 'material-ui/IconButton';
 import Tooltip from 'material-ui/Tooltip';
 import Button from 'material-ui/Button';
-
+import { connect } from 'react-redux';
 import './CodeEvaluateView.css'
 import { CircularProgress } from 'material-ui/Progress';
 import { on, off } from 'educoder'
+import actions from '../../../redux/actions';
 const testSetsExpandedArrayInitVal = [false, false, false, false, false, 
 									 false, false, false, false, false, 
 									 false, false, false, false, false, 
@@ -274,9 +275,24 @@ class CodeEvaluateView extends Component {
 		})
 	}
 
+	onHandleTestCase () {
+		// console.log(this);
+		const {showOrHide, showOrHideTpiTestCase} = this.props;
+		showOrHideTpiTestCase(!showOrHide);
+	}
+
+	handleShowTestCase () {
+		// console.log('111111111');
+		const {isCollapse, isCollpaseTsetCase, showOrHideTpiTestCase} = this.props;
+		isCollpaseTsetCase(!isCollapse);
+		if (isCollapse) {
+			showOrHideTpiTestCase(false);
+		}
+	}
+
   	render() {
   		const { evaluateViewExpanded, tabIndex } = this.state;
-  		const { output_sets, latest_output, record, challenge, gameBuilding, myshixun } = this.props;
+  		const { output_sets, latest_output, record, challenge, gameBuilding, myshixun, showOrHide, isCollapse } = this.props;
 
 		if (!output_sets) {
 			return (
@@ -300,6 +316,8 @@ class CodeEvaluateView extends Component {
 
 				  onclick="check_tab('blacktab_con','blacktab_hover',this);"
 		*/
+
+		const _arrowClasses = isCollapse ? 'iconfont icon-xiajiantou btn-arrow' : 'iconfont icon-shangjiantou btn-arrow';
 	    return (
 	    	<React.Fragment>
 		    	<ul id="blacktab_nav">
@@ -312,17 +330,20 @@ class CodeEvaluateView extends Component {
 						<li className={`blacktab_con ${ tabIndex === 1 ? 'tab_hover' : ''}`} onClick={() => this.tabIndexChange(1)}>
 							<a href="javascript:void(0);" className="tab_type tab_color">测试结果</a>
 						</li>
-						{/* <li className="blacktab_con_abs">
-							<span className="code_evalute_icon">
-								<span className="iconfont icon-xiajiantou btn-arrow"></span>
+						<li className="blacktab_con_abs">
+							<span className="code_evalute_icon" onClick={() => this.handleShowTestCase()}>
+								<span className={_arrowClasses}></span>
 							</span>
-						</li> */}
+						</li>
 							
-							{this.props.inDrawer ? <Tooltip id="tooltip-icon-expand" title={ "收起" }>
+							{this.props.inDrawer ? <Tooltip id="tooltip-icon-expand" title={ showOrHide ? "收起" : "展开"}>
 								{/*TODO 按钮大小改造，css*/}
 								{/* icon-guanbi */}
-								<a className="iconButton fr mr15 mt4" onClick={this.props.hideCodeEvaluate} id="extend_and_zoom" >
+								{/* <a className="iconButton fr mr15 mt4" onClick={this.props.hideCodeEvaluate} id="extend_and_zoom" >
 									<i className={  "font-18 iconfont icon-guanbi" }></i>
+								</a> */}
+								<a style={{ display: isCollapse ? 'inline-block' : 'none'}} className="iconButton fr mr15" id="extend_and_zoom" onClick={() => this.onHandleTestCase()}>
+									<i className={ showOrHide ? "font-18 iconfont icon-shousuo" : "iconfont icon-zhankai font-18" }></i>
 								</a>
 								
 							</Tooltip> : <Tooltip id="tooltip-icon-expand" title={ evaluateViewExpanded ? "收起" : "展开"}>
@@ -398,4 +419,19 @@ class CodeEvaluateView extends Component {
   	}
 }
 
-export default CodeEvaluateView;
+const mapStateToProps = (state) => {
+	const { showOrHide, isCollapse } = state.tpiReducer;
+	return {
+		showOrHide,
+		isCollapse
+	}
+};
+const mapDispatchToProps = (dispatch) => ({
+	showOrHideTpiTestCase: (flag) => dispatch(actions.showOrHideTpiTestCase(flag)),
+	isCollpaseTsetCase: (flag) => dispatch(actions.isCollpaseTsetCase(flag))
+});
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(CodeEvaluateView);

public/react/src/redux/actions/actionTypes.js

@@ -84,6 +84,9 @@ const types = {
   DELETE_COMMENTS: 'DELETE_COMMENTS', // 删除评论
   SAVE_COMMENT_IDENTIFIER: 'SAVE_COMMENT_IDENTIFIER', // 评论时的identifier
   CHANGE_COMMENT_PAGINATION_PARAMS: 'CHANGE_COMMENT_PAGINATION_PARAMS', // 改变分页
+  /** tpi */
+  SHOW_OR_HIDE_TPI_TEST_CASE: 'SHOW_OR_HIDE_TPI_TEST_CASE', // 显示或隐藏tpi测试集弹框
+  IS_COLLAPSE_TEST_CASE: 'IS_COLLAPSE_TEST_CASE' // 是否展开测试集
 }
 
 export default types;

public/react/src/redux/actions/index.js

@@ -96,6 +96,11 @@ import {
   updataspinning
 } from './jupyter';
 
+import {
+  showOrHideTpiTestCase,
+  isCollpaseTsetCase
+} from './tpi';
+
 export default {
   toggleTodo,
   getOJList,
@@ -169,5 +174,8 @@ export default {
   deleteComment,
   likeComment,
   showOrHideComment,
-  changePagination
+  changePagination,
+  // tpi
+  showOrHideTpiTestCase,
+  isCollpaseTsetCase
 }

public/react/src/redux/actions/tpi.js

@@ -0,0 +1,23 @@
+/*
+ * @Description: 
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-03 10:24:43
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-03 11:45:22
+ */
+import types from './actionTypes';
+
+export const showOrHideTpiTestCase = (flag) => {
+  return {
+    type: types.SHOW_OR_HIDE_TPI_TEST_CASE,
+    payload: flag
+  }
+}
+
+export const isCollpaseTsetCase = (flag) => {
+  return {
+    type: types.IS_COLLAPSE_TEST_CASE,
+    payload: flag
+  }
+}

public/react/src/redux/reducers/index.js

@@ -15,6 +15,7 @@ import commonReducer from './commonReducer';
 import userReducer from './userReducer';
 import jupyterReducer from './jupyterReducer';
 import commentReducer from './commentReducer';
+import tpiReducer from './tpiReducer';
 
 export default combineReducers({
   testReducer,
@@ -24,5 +25,6 @@ export default combineReducers({
   commonReducer,
   userReducer,
   jupyterReducer,
-  commentReducer
+  commentReducer,
+  tpiReducer
 });

public/react/src/redux/reducers/tpiReducer.js

@@ -0,0 +1,36 @@
+/*
+ * @Description: 
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2020-01-03 10:24:31
+ * @LastEditors  : tangjiang
+ * @LastEditTime : 2020-01-03 11:44:26
+ */
+import types from "../actions/actionTypes";
+
+const initialState = {
+  showOrHide: false,
+  isCollapse: false, // 是否展开测试集
+};
+
+const tpiReducer = (state = initialState, action) => {
+  const { type, payload } = action;
+  switch (type) {
+    case types.SHOW_OR_HIDE_TPI_TEST_CASE:
+      return {
+        ...state,
+        showOrHide: payload
+      }
+    case types.IS_COLLAPSE_TEST_CASE:
+      return {
+        ...state,
+        isCollapse: payload
+      }
+    default:
+      return {
+        ...state
+      }
+  }
+}
+
+export default tpiReducer;