+ {/* 未保存时 ? '学员初始代码文件' : main.x */}
+ {identifier ? '' : '学员初始代码文件'}
{identifier ? '已保存' : ''}
- {identifier ? '恢复初始代码' : ''}
-
+ {renderRestore}
+ {/* */}
+
-
+ {/*
{props.name || ''}
- */}
+ {
+ /* 录入时: 取消 保存 */
+ /* 保存未发布: 立即发布 模拟挑战 */
+ }
+ { !identifier ? renderSaveOrCancel() : renderPubOrFight() }
+
{/* 添加测试用例 */}
';
- }); // monaco编辑器内容
- const [language, setLanguage] = useState('C')
- const [fontSize,setFontSize] = useState(12);
- const editorRef = useRef(null); // 编辑器ref
-
- useEffect(() => {
- if (props.language) {
- // console.log('当前输入的代码:', editCode);
- // console.log('当前输入的语言:', props.language);
- setLanguage(props.language)
- }
- }, [props.language]);
-
- useEffect(() => {
- }, [props.testCases]);
-
- useEffect(() => {
- }, [editCode]);
-
- // 监听store中编辑器内容变化
- useEffect(() => {
- setEditCode(props.code);
- }, [props.code]);
-
- // 打开设置
- const handleShowDrawer = (e) => {
- e.preventDefault();
- setShowDrawer(true);
- }
-
- // 关闭设置
- const handleDrawerClose = (e) => {
- e.preventDefault();
- setShowDrawer(false);
- }
-
- // 切换tab
- const handleTabChange = (key) => {
- setDefaultActiveKey(key);
- }
-
- // 显示/隐藏tab
- const handleShowControl = () => {
- setShowTextResult(!showTextResult);
- }
-
- // 侧边栏改变字体大小
- const handleFontSizeChange = (value) => {
- setFontSize(value);
- }
- // 文本框内容变化时，记录文本框内容
- const handleEditorChange = (origin, monaco) => {
- editorRef.current = monaco; // 获取当前monaco实例
- setEditCode(origin); // 保存编辑器初始值
- editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
- // TODO 需要优化 节流
- const val = editorRef.current.getValue();
- setEditCode(val);
- // 保存当前代码
- props.saveOjFormCode(val);
- });
- }
-
- // 提交按钮点击
- const handleSubmit = (e) => {
- e.preventDefault();
- if (!editCode) {
- notification['error']({
- message: '必填',
- description: '代码块内容必须输入!'
- });
- editorRef.current.focus();
- return;
- }
- props.changePublishLoadingStatus(true);
- const { onSubmitForm } = props;
- onSubmitForm(editCode);
- }
-
- // 调试测试代码
- // const handleTestCode = () => {
- // // 打开控制台信息
- // setShowTextResult(true);
- // this.formRef.handleTestCodeFormSubmit(() => {
- // // 当验证通过后 切换tab 到代码执行结果
- // setDefaultActiveKey('2');
- // });
- // }
-
- // 控制台点击时 添加active属性
- const classNames = `control_tab ${showTextResult ? 'move_up move_up_final' : 'move_down_final'}`;
-
- // 配置编辑器属性
- const editorOptions = {
- selectOnLineNumbers: true,
- automaticLayout: true,
- fontSize: `${fontSize}px`
- }
-
- // 返回渲染值
- return (
-
-
-
-
-
- );
-}
-
-const mapStateToProps = (state) => {
- const { ojForm, testCases, identifier, code } = state.ojFormReducer;
- const { submitLoading } = state.commonReducer;
- return {
- language: ojForm.language,
- testCases,
- identifier,
- code,
- submitLoading
- }
-};
-
-const mapDispatchToProps = (dispatch) => ({
- saveOjFormCode: (code) => dispatch(actions.saveOjFormCode(code)),
- changePublishLoadingStatus: (flag) => dispatch(actions.changeSubmitLoadingStatus(flag))
-});
-//
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(RightPaneCode);
diff --git a/public/react/src/modules/developer/quillEditor/index.js b/public/react/src/modules/developer/quillEditor/index.js
index e9fc622b4..6a54ea138 100644
--- a/public/react/src/modules/developer/quillEditor/index.js
+++ b/public/react/src/modules/developer/quillEditor/index.js
@@ -4,13 +4,14 @@
* @Github:
* @Date: 2019-11-25 09:46:03
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-04 23:09:38
+ * @LastEditTime: 2019-12-10 16:10:23
*/
// import 'quill/dist/quill.core.css';
// import 'quill/dist/quill.bubble.css';
// import 'quill/dist/quill.snow.css';
// import 'katex/dist/katex.css';
import './index.scss';
+import 'katex/dist/katex.min.css';
import React from 'react';
import katex from 'katex';
const Quill = require('quill');
@@ -120,15 +121,12 @@ class QuillEditor extends React.Component {
render () {
const styles = this.props.style || {}
return (
-
{
- const {recordDetail, user_program_identifier} = state.ojForUserReducer;
+ const {recordDetail} = state.ojForUserReducer;
return {
- identifier: user_program_identifier,
+ // identifier: user_program_identifier,
recordDetail
}
}
const mapDispatchToProps = (dispatch) => ({
// 根据id号获取记录详情
- getUserCommitRecordDetail: (id, type) => dispatch(actions.getUserCommitRecordDetail(id, type))
+ getUserCommitRecordDetail: (id, type) => dispatch(actions.getUserCommitRecordDetail(id, type)),
+ saveEditorCodeForDetail: (code) => dispatch(actions.saveEditorCodeForDetail(code))
});
export default connect(
diff --git a/public/react/src/modules/developer/split_pane_resizer.scss b/public/react/src/modules/developer/split_pane_resizer.scss
index f8b5b28eb..498370dd6 100644
--- a/public/react/src/modules/developer/split_pane_resizer.scss
+++ b/public/react/src/modules/developer/split_pane_resizer.scss
@@ -7,7 +7,8 @@
.student_study_header,
.record_detail_header{
height: 65px;
- background:rgba(34,34,34,1);
+ // background:rgba(34,34,34,1);
+ background: #1E1E1E;
padding:0 30px;
}
@@ -45,11 +46,6 @@
.pane_right_area
{
position: relative;
- height: calc(100% - 65px);
- .left_pane,
- .right_pane{
- height: 100%;
- }
}
.student_study_header,
@@ -89,6 +85,41 @@
}
}
+.add_editor_list_area{
+ background: #fff;
+ padding: 0 30px;
+ margin: 0;
+ .add_editor_item{
+ display: inline-block;
+ height: 56px;
+ line-height: 56px;
+ box-sizing: border-box;
+ margin-right: 30px;
+ border-bottom: 2px solid transparent;
+ transition: all .3s;
+ cursor: pointer;
+ .item-span{
+ color: #666;
+ font-size: 16px;
+ }
+ // > span{
+ // cursor: pointer;
+ // }
+ &.active{
+ border-bottom-color: #5091FF;
+ .item-span{
+ color: #5091FF;
+ }
+
+ }
+ }
+}
+
+.comp_ctx{
+ height: calc(100vh - 178px);
+ overflow-y: hidden;
+}
+
.split-pane-area,
.split-pane-left{
.ant-tabs-nav-wrap{
@@ -109,9 +140,8 @@
.editor_area,
.prev_area{
- height: calc(100vh - 110px);
+ height: 100%;
overflow-y: auto;
- // padding: 20px 0;
}
}
diff --git a/public/react/src/modules/developer/studentStudy/index.js b/public/react/src/modules/developer/studentStudy/index.js
index 9f7b9f1bc..e218092a0 100644
--- a/public/react/src/modules/developer/studentStudy/index.js
+++ b/public/react/src/modules/developer/studentStudy/index.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-23 10:53:19
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 18:59:22
+ * @LastEditTime: 2019-12-10 19:16:18
*/
import './index.scss';
import React, { useEffect } from 'react';
@@ -12,22 +12,26 @@ import { connect } from 'react-redux';
import SplitPane from 'react-split-pane';
import LeftPane from './leftpane';
import RightPane from './rightpane';
-import { Link } from 'react-router-dom';
-import { getImageUrl } from 'educoder'
+// import { Link } from 'react-router-dom';
+// import { getImageUrl } from 'educoder'
// import RightPane from '../newOrEditTask/rightpane';
-import { Button } from 'antd';
+import { Icon } from 'antd';
+import UserInfo from '../components/userInfo';
import actions from '../../../redux/actions';
+import { fromStore} from 'educoder';
+import { withRouter } from 'react-router';
const StudentStudy = (props) => {
const {
- mygetHelmetapi = {}
+ userInfo,
+ hack_identifier
} = props;
useEffect(() => {
const {
match: { params },
getUserProgramDetail,
- saveUserProgramIdentifier,
+ saveUserProgramIdentifier
} = props;
let { id } = params;
@@ -37,22 +41,48 @@ const StudentStudy = (props) => {
// startProgramQuestion(id);
getUserProgramDetail(id);
}, []);
+
+ const _hack_id = hack_identifier || fromStore('hack_identifier');
+
+ // 处理编辑
+ const handleClickEditor = () => {
+ props.saveEditorCodeForDetail();
+ props.history.push(`/problems/${_hack_id}/edit`);
+ }
+ // 处理退出
+ const handleClickQuit = () => {
+ props.saveEditorCodeForDetail();
+ props.history.push('/problems');
+ }
+
return (
测试用例
- +
{ renderTestCase() }
diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/index.js b/public/react/src/modules/developer/newOrEditTask/leftpane/index.js
index 1743551b5..8b10413a9 100644
--- a/public/react/src/modules/developer/newOrEditTask/leftpane/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/leftpane/index.js
@@ -7,44 +7,84 @@
*/
import './index.scss';
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
+import React, { useState, useMemo } from 'react';
+// import { Tabs } from 'antd';
import EditorTab from './editorTab';
import PrevTab from './prevTab';
import CommitTab from './commitTab';
-const { TabPane } = Tabs;
+// const { TabPane } = Tabs;
function LeftPane (props) {
+ const navItem = [
+ {
+ title: '编辑',
+ key: 'editor'
+ }, {
+ title: '预览',
+ key: 'prev'
+ }
+ ];
+
+ const Comp = {
+ editor: (
- { Comp }
-
- )
- });
+ // const tabs = tabArrs.map((tab) => {
+ // const Comp = tab.content;
+ // return (
+ //
+ // { Comp }
+ //
+ // )
+ // });
// tab切换时
- const handleTabChange = (key) => {
- setDefaultActiveKey(key);
- }
+ // const handleTabChange = (key) => {
+ // setDefaultActiveKey(key);
+ // }
// 执行表单提交函数
+ const renderComp = useMemo(() => {
+ return Comp[defaultActiveKey];
+ }, [defaultActiveKey]);
+
+ const renderNavItem = navItem.map((item) => {
+ const _classes = item.key === defaultActiveKey ? 'add_editor_item active' : 'add_editor_item';
+ return (
+ setDefaultActiveKey(item.key)}
+ >
+ {item.title}
+
+ )
+ });
+
return (
-
- { tabs }
-
+ //
+ // { tabs }
+ //
+
+
)
};
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
index 77f1a1f5d..69b67d60e 100644
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
+++ b/public/react/src/modules/developer/newOrEditTask/rightpane/index.js
@@ -4,21 +4,21 @@
* @Github:
* @Date: 2019-12-01 10:18:35
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 17:50:58
+ * @LastEditTime: 2019-12-09 11:38:15
*/
import './index.scss';
import React from 'react';
import { connect } from 'react-redux';
import MyMonacoEditor from '../../components/myMonacoEditor';
-import ControlSetting from '../../components/controlSetting';
+// import ControlSetting from '../../components/controlSetting';
import actions from '../../../../redux/actions';
function RightPane (props, ref) {
const {
// identifier,
- code,
- onSubmitForm,
+ // code,
+ // onSubmitForm,
saveOjFormCode
} = props;
@@ -48,12 +48,12 @@ function RightPane (props, ref) {
code={props.code}
onCodeChange={handleCodeChange}/>
-
)
}
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index.scss b/public/react/src/modules/developer/newOrEditTask/rightpane/index.scss
index 1671d262f..48f5a7bb9 100644
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/index.scss
+++ b/public/react/src/modules/developer/newOrEditTask/rightpane/index.scss
@@ -3,7 +3,7 @@
// justify-content: center;
background-color: #222;
height: 100%;
- // justify-content: ;
+ // height: calc(100vh - 178px);
.code-title,
.controller-pane,
.pane_control_opts{
diff --git a/public/react/src/modules/developer/newOrEditTask/rightpane/index1.js b/public/react/src/modules/developer/newOrEditTask/rightpane/index1.js
deleted file mode 100644
index 0dc8ccd4d..000000000
--- a/public/react/src/modules/developer/newOrEditTask/rightpane/index1.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/*
- * @Description: 右侧代码块
- * @Author: tangjiang
- * @Date: 2019-11-18 08:42:04
- * @Last Modified by: tangjiang
- * @Last Modified time: 2019-11-20 00:00:34
- */
-
-import './index.scss';
-
-import React, { Fragment, useState, useRef, useEffect } from 'react';
-import { Icon, Drawer, Tabs, Button, notification } from 'antd';
-import _ from 'lodash';
-import MonacoEditor from '@monaco-editor/react';
-import { connect } from 'react-redux';
-import InitTabCtx from './initTabCtx';
-import SettingDrawer from '../../components/monacoSetting';
-import CONST from '../../../../constants';
-import actions from '../../../../redux/actions';
-
-const { fontSetting, opacitySetting } = CONST;
-
-const { TabPane } = Tabs;
-
-const RightPaneCode = (props) => {
-
- const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
- const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
- const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
- const [editCode, setEditCode] = useState(()=> {
- return '#include -
+ { renderNavItem }
+
+ { renderComp }
+
+
-
-
-
-
-
- {/** 代码编辑器 */}
-
-
-
- this.formRef = form }/>
-
-
-
-
-
- 代码执行结果
-
-
-
- - {/* */} - -
-
-
-
+
-
-
+
);
}
}
diff --git a/public/react/src/modules/developer/quillEditor/index.scss b/public/react/src/modules/developer/quillEditor/index.scss
index 4e560634c..e69de29bb 100644
--- a/public/react/src/modules/developer/quillEditor/index.scss
+++ b/public/react/src/modules/developer/quillEditor/index.scss
@@ -1,4 +0,0 @@
-.quill_editor_area{
- height: 300px;
- overflow-y: auto;
-}
\ No newline at end of file
diff --git a/public/react/src/modules/developer/recordDetail/index.js b/public/react/src/modules/developer/recordDetail/index.js
index 9bb66715a..1951b7712 100644
--- a/public/react/src/modules/developer/recordDetail/index.js
+++ b/public/react/src/modules/developer/recordDetail/index.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-12-04 08:36:21
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 13:52:04
+ * @LastEditTime: 2019-12-10 18:55:02
*/
import './index.scss';
import React, { useState, useEffect } from 'react';
@@ -14,23 +14,26 @@ import ErrorResult from '../components/errorResult';
import { Link } from 'react-router-dom';
import MonacoEditor from '@monaco-editor/react';
import { connect } from 'react-redux';
-import { getImageUrl } from 'educoder';
+// import { getImageUrl } from 'educoder';
import actions from '../../../redux/actions';
import CONST from '../../../constants';
+import UserInfo from '../components/userInfo';
const {reviewResult} = CONST;
function RecordDetail (props) {
const {
match: { params },
- mygetHelmetapi = {},
recordDetail,
- identifier,
- getUserCommitRecordDetail
+ // identifier,
+ getUserCommitRecordDetail,
+ saveEditorCodeForDetail
} = props;
const id = params.id;
const [detail, setDetail] = useState({});
+ const [user, setUser] = useState({});
+ const [identifier, setIdentifier] = useState('');
useEffect(() => {
// 根据id获取记录详情
@@ -40,17 +43,27 @@ function RecordDetail (props) {
useEffect(() => {
setDetail(recordDetail);
-
+ console.log('详情: ', recordDetail);
+ if (recordDetail) {
+ const { user, myproblem_identifier, code } = recordDetail;
+ setUser(user);
+ setIdentifier(myproblem_identifier);
+ if (code) {
+ saveEditorCodeForDetail(code);
+ }
+ }
}, [recordDetail]);
+
return (
-
- 
+ {/*
*/}
+
+ 
- {(mygetHelmetapi &&mygetHelmetapi.name) || ''}
+ {(user && user.name) || ''}
-
+
{detail.name || 'test'}
@@ -82,7 +95,13 @@ function RecordDetail (props) {
提交内容
- +
-
+ {/*
{(mygetHelmetapi &&mygetHelmetapi.name) || ''}
-
+
*/}
+
乘积最大序列
-
@@ -70,19 +100,27 @@ const StudentStudy = (props) => {
)
}
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => {
+ const { userInfo } = state.userReducer;
+ const { hack_identifier } = state.ojForUserReducer;
+ return {
+ userInfo,
+ hack_identifier
+ };
+};
const mapDispatchToProps = (dispatch) => ({
// 调用开启编辑
// startProgramQuestion: (id) => dispatch(actions.startProgramQuestion(id))
// 调用编程题详情
getUserProgramDetail: (id) => dispatch(actions.getUserProgramDetail(id)),
- saveUserProgramIdentifier: (id) => dispatch(actions.saveUserProgramIdentifier(id))
+ saveUserProgramIdentifier: (id) => dispatch(actions.saveUserProgramIdentifier(id)),
+ saveEditorCodeForDetail: (code) => dispatch(actions.saveEditorCodeForDetail(code))
});
-export default connect(
+export default withRouter(connect(
mapStateToProps,
mapDispatchToProps
-)(StudentStudy);
+)(StudentStudy));
diff --git a/public/react/src/modules/developer/studentStudy/index.scss b/public/react/src/modules/developer/studentStudy/index.scss
index 3b9868608..bbf66aebb 100644
--- a/public/react/src/modules/developer/studentStudy/index.scss
+++ b/public/react/src/modules/developer/studentStudy/index.scss
@@ -1,4 +1,7 @@
@import '../split_pane_resizer.scss';
+.split-pane-area{
+ height: calc(100vh - 65px);
+}
.right_pane_code_wrap{
position: relative;
diff --git a/public/react/src/modules/developer/studentStudy/leftpane/commitRecord/index.scss b/public/react/src/modules/developer/studentStudy/leftpane/commitRecord/index.scss
index d409b8cef..596e9abe7 100644
--- a/public/react/src/modules/developer/studentStudy/leftpane/commitRecord/index.scss
+++ b/public/react/src/modules/developer/studentStudy/leftpane/commitRecord/index.scss
@@ -1,5 +1,6 @@
.commit_record_area{
- padding: 20px 30px;
+ // padding: 20px 30px;
+ padding: 0 30px;
.record_header{
display: flex;
// justify-content: space-between;
diff --git a/public/react/src/modules/developer/studentStudy/leftpane/index.js b/public/react/src/modules/developer/studentStudy/leftpane/index.js
index f1327e006..69f49b9b1 100644
--- a/public/react/src/modules/developer/studentStudy/leftpane/index.js
+++ b/public/react/src/modules/developer/studentStudy/leftpane/index.js
@@ -4,10 +4,10 @@
* @Github:
* @Date: 2019-11-23 11:33:41
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-03 14:13:19
+ * @LastEditTime: 2019-12-09 19:57:21
// */
import './index.scss';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
import { Tabs, Divider } from 'antd';
import { connect } from 'react-redux';
import Comment from './comment';
@@ -15,13 +15,14 @@ import CommitRecord from './commitRecord';
import TaskDescription from './taskDescription';
import TextNumber from './../../components/textNumber';
import actions from '../../../../redux/actions';
-const { TabPane } = Tabs;
+// const { TabPane } = Tabs;
const LeftPane = (props) => {
const { hack, userCodeTab, changeUserCodeTab } = props;
const { pass_count, submit_count } = hack;
const [defaultActiveKey, setDefaultActiveKey] = useState('task');
+
console.log(pass_count, submit_count);
const tabArrs = [
{ title: '任务描述', key: 'task', content: (
+ // { Comp }
+ //
+ // )
+ // });
+
+ // // tab切换时
+ // const handleTabChange = (key) => {
+ // // setDefaultActiveKey(key);
+ // changeUserCodeTab(key);
+ // }
+
+ const renderComp = useMemo(() => {
+ return Comp[defaultActiveKey];
+ }, [defaultActiveKey]);
+
+ const renderNavItem = navItem.map((item) => {
+ const _classes = item.key === defaultActiveKey ? 'add_editor_item active' : 'add_editor_item';
return (
-
- { Comp }
-
+ setDefaultActiveKey(item.key)}
+ >
+ {item.title}
+
)
});
- // tab切换时
- const handleTabChange = (key) => {
- // setDefaultActiveKey(key);
- changeUserCodeTab(key);
- }
-
// 点击消息
const handleClickMessage = () => {
console.log('点击的消息图标---------');
@@ -65,9 +99,27 @@ const LeftPane = (props) => {
return (
-
+ {/*
{ tabs }
+
+
+ {/*
)
diff --git a/public/react/src/modules/developer/studentStudy/rightpane/index.js b/public/react/src/modules/developer/studentStudy/rightpane/index.js
index 691f540e6..39d42f749 100644
--- a/public/react/src/modules/developer/studentStudy/rightpane/index.js
+++ b/public/react/src/modules/developer/studentStudy/rightpane/index.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-27 14:59:51
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 18:48:52
+ * @LastEditTime: 2019-12-10 19:00:30
*/
import React, { useState, useEffect } from 'react';
import {connect} from 'react-redux';
@@ -21,6 +21,7 @@ const RightPane = (props) => {
input,
hack,
updateCode,
+ editor_code,
saveUserInputCode,
restoreInitialCode,
saveUserCodeForInterval
@@ -29,9 +30,12 @@ const RightPane = (props) => {
const [editorCode, setEditorCode] = useState('');
useEffect(() => {
- console.log('1111111');
- setEditorCode(hack.code);
- }, [hack]);
+ if (editor_code) {
+ setEditorCode(editor_code);
+ } else {
+ setEditorCode(hack.code);
+ }
+ }, [hack, editor_code]);
const handleSubmitForm = () => {
// 提交时， 先调用提交接口，提交成功后，循环调用测评接口
@@ -49,7 +53,7 @@ const RightPane = (props) => {
timer = setInterval(() => {
clearInterval(timer);
timer = null;
- saveUserCodeForInterval(identifier, code);
+ saveUserCodeForInterval && saveUserCodeForInterval(identifier, code);
}, 3000);
}
// 保存用户代码块
@@ -85,10 +89,11 @@ const RightPane = (props) => {
const mapStateToProps = (state) => {
- const {user_program_identifier, hack, userTestInput} = state.ojForUserReducer;
+ const {user_program_identifier, hack, userTestInput, editor_code} = state.ojForUserReducer;
// const { language, code } = hack;
return {
hack,
+ editor_code,
input: userTestInput,
submitInput: hack.input,
identifier: user_program_identifier
diff --git a/public/react/src/redux/actions/actionTypes.js b/public/react/src/redux/actions/actionTypes.js
index 4850fc794..0f33b435c 100644
--- a/public/react/src/redux/actions/actionTypes.js
+++ b/public/react/src/redux/actions/actionTypes.js
@@ -48,6 +48,8 @@ const types = {
GET_COMMIT_RECORD_DETAIL_BY_ID: 'GET_COMMIT_RECORD_DETAIL_BY_ID', // 根据id号获取提交记录详情
RESTORE_INITIAL_CODE: 'RESTORE_INITIAL_CODE', // 恢复初始代码
SAVE_USER_INFO: 'SAVE_USER_INFO', // 只在用户信息
+ SAVE_HACK_IDENTIFIER: 'SAVE_HACK_IDENTIFIER', // 用户界面跑到编辑界面需要用的id值
+ SAVE_EDITOR_CODE: 'SAVE_EDITOR_CODE', // 保存详情页面中编辑时的代码
}
export default types;
diff --git a/public/react/src/redux/actions/index.js b/public/react/src/redux/actions/index.js
index 2e113032d..e52b88fc5 100644
--- a/public/react/src/redux/actions/index.js
+++ b/public/react/src/redux/actions/index.js
@@ -7,7 +7,11 @@
*/
import toggleTodo from './testAction.js';
-import {getOJList, changePaginationInfo} from './ojList';
+import {
+ getOJList,
+ changePaginationInfo,
+ deleteItem
+} from './ojList';
import {
validateOjForm,
saveOjFormCode,
@@ -41,6 +45,8 @@ import {
getUserProgramDetail,
saveUserProgramIdentifier,
restoreInitialCode,
+ saveUserCodeForInterval,
+ saveEditorCodeForDetail,
// isUpdateCodeCtx
} from './ojForUser';
@@ -52,9 +58,14 @@ import {
isMyPublish,
} from './common';
+import {
+ getUserInfoForNew
+} from './user';
+
export default {
toggleTodo,
getOJList,
+ deleteItem,
changePaginationInfo,
getOJFormById,
saveOJFormId,
@@ -90,5 +101,8 @@ export default {
updateOpenTestCaseIndex,
saveUserProgramIdentifier,
restoreInitialCode,
+ getUserInfoForNew,
+ saveUserCodeForInterval,
+ saveEditorCodeForDetail
// isUpdateCodeCtx
}
\ No newline at end of file
diff --git a/public/react/src/redux/actions/ojForUser.js b/public/react/src/redux/actions/ojForUser.js
index 9b7d7ec87..e3480a435 100644
--- a/public/react/src/redux/actions/ojForUser.js
+++ b/public/react/src/redux/actions/ojForUser.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-27 13:42:11
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 17:56:02
+ * @LastEditTime: 2019-12-10 19:05:36
*/
import types from "./actionTypes";
import { Base64 } from 'js-base64';
@@ -31,6 +31,11 @@ export const startProgramQuestion = (id, props) => {
type: types.SAVE_USER_PROGRAM_ID,
payload: identifier
});
+ // 保存id值
+ dispatch({
+ type: types.SAVE_HACK_IDENTIFIER,
+ payload: id
+ });
// 跳转至开启编程
if (identifier) {
// let data = Object.assign({}, props);
@@ -74,8 +79,13 @@ export const getUserProgramDetail = (identifier, type) => {
dispatch({
type: types.GET_COMMIT_RECORD_DETAIL_BY_ID,
payload: data
- })
+ });
}
+ // 保存用户登录信息
+ dispatch({
+ type: types.SAVE_USER_INFO,
+ payload: data.user
+ });
}
});
}
@@ -277,10 +287,12 @@ export const getUserCommitRecordDetail = (identifier) => {
return (dispatch) => {
fetchUserCommitRecordDetail(identifier).then(res => {
console.log('提交记录详情======》》》》', res);
+ const { data } = res;
+ if (data.status === 401) return;
dispatch({
type: types.GET_COMMIT_RECORD_DETAIL_BY_ID,
- payload: res.data
- })
+ payload: data
+ });
});
}
}
@@ -327,6 +339,11 @@ export const submitUserCode = (identifier, inputValue, type) => {
});
return;
};
+ // 将编辑代码清空
+ dispatch({
+ type: types.SAVE_EDITOR_CODE,
+ payload: ''
+ });
dispatch(debuggerCode(identifier, inputValue, type || 'submit'));
}
}).catch(() => {
@@ -383,3 +400,10 @@ export const restoreInitialCode = (identifier) => {
}
}
+// 保存详情页面中的编辑代码
+export const saveEditorCodeForDetail = (code) => {
+ return {
+ type: types.SAVE_EDITOR_CODE,
+ payload: code
+ }
+}
diff --git a/public/react/src/redux/actions/ojForm.js b/public/react/src/redux/actions/ojForm.js
index a28a94b1f..c49e628f3 100644
--- a/public/react/src/redux/actions/ojForm.js
+++ b/public/react/src/redux/actions/ojForm.js
@@ -4,13 +4,13 @@
* @Github:
* @Date: 2019-11-20 16:35:46
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 20:24:11
+ * @LastEditTime: 2019-12-10 19:54:56
*/
import types from './actionTypes';
import CONST from '../../constants';
import { fetchPostOjForm, fetchGetOjById, publishTask } from '../../services/ojService';
import { Base64 } from 'js-base64';
-import { message, notification } from 'antd';
+import { message, notification, Modal } from 'antd';
import { toStore } from 'educoder';
const { jcLabel } = CONST;
// 表单字段映射
@@ -85,6 +85,7 @@ export const validateOjForm = (props, type) => {
return (dispatch, getState) => {
const {ojForm, testCases, identifier, code } = getState().ojFormReducer;
// console.log('code', code);
+ /** 表单验证开始 */
let keys = Object.keys(ojForm);
// 循环判断每个字段是否为空
let hasSuccess = true;
@@ -104,14 +105,35 @@ export const validateOjForm = (props, type) => {
});
// 验证测试用例中的数组是否都有对应的值
const tcValidResult = [];
- testCases.forEach(obj => {
+ // 验证测试用例： 1.必须要有输出值 2. 输入值与输出值必须唯一
+ testCases.forEach((obj, i) => {
let tempObj = {};
['input', 'output'].forEach(key => {
const value = obj[key];
- const validateResult = emptyValidate(key, value);
+ // 非空校验
+ let validateResult = emptyValidate(key, value);
const errMsg = validateResult[key].errMsg;
if (errMsg) {
hasSuccess = false;
+ } else {
+ // 唯一性校验
+ const bool = testCases.some((item, j) => {
+ if (i !== j) {
+ return (item[key] === value);
+ } else {
+ return false;
+ }
+ });
+
+ if (bool) {
+ hasSuccess = false;
+ validateResult = {
+ [key]: {
+ validateStatus: 'error',
+ errMsg: key === 'input' ? '输入值必须是唯一的' : '输出值必须是唯一的'
+ }
+ };
+ }
}
Object.assign(tempObj, validateResult);
});
@@ -151,6 +173,8 @@ export const validateOjForm = (props, type) => {
payload: false
});
}
+ /** 表单验证结束 */
+ /** 表单验证通过后，调用保存 or 更新 or 发布 */
if (hasSuccess) {
// console.log('表单保存的数据为: ', getState());
const {ojFormReducer} = getState();
@@ -205,6 +229,7 @@ export const validateOjForm = (props, type) => {
paramsObj['identifier'] = identifier;
}
+ // 接口调用成功后，跳转至列表页
function linkToDev () {
toStore('oj_description', '');
dispatch({
@@ -216,51 +241,61 @@ export const validateOjForm = (props, type) => {
}, 1000);
}
- fetchPostOjForm(paramsObj).then(res => {
- // TODO
- if (res.status === 200) { // 保存成功后，重新跳转至列表页
- const {identifier} = res.data
- if (type === 'publish') { // 存在发布时，直接调用发布接口
- if (identifier) {
- publishTask(identifier).then(res => {
- if (res.data.status === 0) {
- message.success('发布成功!');
- linkToDev();
- }
- dispatch({
- type: types.PUBLISH_LOADING_STATUS,
- payload: false
- });
- }).catch(() => {
- dispatch({
- type: types.PUBLISH_LOADING_STATUS,
- payload: false
- });
+ // 调用保存或更新
+ if (type === 'publish') {
+ // 提示发布信息
+ Modal.confirm({
+ title: '提示',
+ content: `
+ 发布后即可应用到自己管理的课堂,
+ 是否确定发布?`,
+ okText: '确定',
+ cancelText: '取消',
+ onOk () {
+ publishTask(identifier).then(res => {
+ if (res.data.status === 0) {
+ message.success('发布成功!');
+ linkToDev();
+ }
+ dispatch({
+ type: types.PUBLISH_LOADING_STATUS,
+ payload: false
});
- } else {
+ }).catch(() => {
dispatch({
type: types.PUBLISH_LOADING_STATUS,
payload: false
});
- }
- } else {
+ });
+ },
+ onCancel () {
+ dispatch({
+ type: types.PUBLISH_LOADING_STATUS,
+ payload: false
+ });
+ }
+ });
+ } else {
+ // 调用更新
+ fetchPostOjForm(paramsObj).then(res => {
+ if (res.status === 200) { // 保存成功后，重新跳转至列表页
if (res.data.identifier) {
message.success('保存成功!');
linkToDev();
}
+ dispatch({
+ type: types.SUBMIT_LOADING_STATUS,
+ payload: false
+ });
+ }
+ }).catch(err => {
dispatch({
type: types.SUBMIT_LOADING_STATUS,
payload: false
});
}
- }
-
- }).catch(err => {
- dispatch({
- type: types.SUBMIT_LOADING_STATUS,
- payload: false
- });
- });
+ );
+ }
}
}
};
@@ -361,6 +396,11 @@ export const getOJFormById = (id) => {
type: types.SAVE_EDIT_OJ_FORM_AND_TEST_CASE,
payload: res.data
});
+ // 保存用户信息
+ dispatch({
+ type: types.SAVE_USER_INFO,
+ payload: res.data.user
+ });
});
}
}
@@ -371,7 +411,7 @@ export const saveOJFormId = (id) => {
payload: id
}
}
-// 清空测试用例集合
+// 清空值
export const clearOJFormStore = () => {
return {
type: types.CLEAR_JSFORM_STORE
@@ -380,27 +420,76 @@ export const clearOJFormStore = () => {
// 测试用例输入值改变时
export const testCaseInputChange = (value, index) => {
- const validate = emptyValidate('input', value)['input'];
- return {
- type: types.TEST_CASE_INPUT_CHANGE,
- payload: {
- input: validate,
- value,
- index
+ return (dispatch, getState) => {
+ // 非空校验
+ let validate = emptyValidate('input', value)['input'];
+ if (!validate.errMsg) {
+ // 唯一性校验
+ const {testCases} = getState().ojFormReducer;
+ const bool = testCases.some((item, i) => {
+ if (i !== index) {
+ return item['input'] === value;
+ } else {
+ return false;
+ }
+ });
+ if (bool) {
+ validate = {
+ validateStatus: 'error',
+ errMsg: '输入值必须唯一'
+ };
+ }
}
+ dispatch({
+ type: types.TEST_CASE_INPUT_CHANGE,
+ payload: {
+ input: validate,
+ value,
+ index
+ }
+ });
}
}
// 测试用例输出值改变时
export const testCaseOutputChange = (value, index) => {
- const validate = emptyValidate('output', value)['output'];
- return {
- type: types.TEST_CASE_OUTPUT_CHANGE,
- payload: {
- output: validate,
- value,
- index
+ // const validate = emptyValidate('output', value)['output'];
+ // return {
+ // type: types.TEST_CASE_OUTPUT_CHANGE,
+ // payload: {
+ // output: validate,
+ // value,
+ // index
+ // }
+ // }
+ return (dispatch, getState) => {
+ // 非空校验
+ let validate = emptyValidate('output', value)['output'];
+ if (!validate.errMsg) {
+ // 唯一性校验
+ const {testCases} = getState().ojFormReducer;
+ const bool = testCases.some((item, i) => {
+ if (i !== index) {
+ return item['output'] === value;
+ } else {
+ return false;
+ }
+ });
+ if (bool) {
+ validate = {
+ validateStatus: 'error',
+ errMsg: '输入值必须唯一'
+ };
+ }
}
+ dispatch({
+ type: types.TEST_CASE_OUTPUT_CHANGE,
+ payload: {
+ output: validate,
+ value,
+ index
+ }
+ });
}
}
diff --git a/public/react/src/redux/actions/ojList.js b/public/react/src/redux/actions/ojList.js
index 4839ebe04..63b64fd7b 100644
--- a/public/react/src/redux/actions/ojList.js
+++ b/public/react/src/redux/actions/ojList.js
@@ -4,10 +4,10 @@
* @Github:
* @Date: 2019-11-20 10:48:24
* @LastEditors: tangjiang
- * @LastEditTime: 2019-11-29 11:09:54
+ * @LastEditTime: 2019-12-10 20:40:55
*/
import types from './actionTypes';
-import { fetchOJList } from '../../services/ojService';
+import { fetchOJList, fetchDeleteOJItem } from '../../services/ojService';
export const getOJList = (params) => {
return (dispatch) => {
@@ -35,3 +35,15 @@ export const changePaginationInfo = (obj) => {
payload: obj
}
}
+
+// 删除
+export const deleteItem = (identifier) => {
+ return (dispatch, getState) => {
+ const {pagination} = getState().ojListReducer;
+ fetchDeleteOJItem(identifier).then(res => {
+ if (res.status === 200) {
+ dispatch(getOJList(pagination));
+ }
+ });
+ }
+}
diff --git a/public/react/src/redux/actions/user.js b/public/react/src/redux/actions/user.js
index 1b7c331c6..f7a0706e3 100644
--- a/public/react/src/redux/actions/user.js
+++ b/public/react/src/redux/actions/user.js
@@ -4,13 +4,24 @@
* @Github:
* @Date: 2019-12-06 15:09:22
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-06 15:15:00
+ * @LastEditTime: 2019-12-09 20:34:50
*/
import types from './actionTypes';
+import { fetchUserInfoForNew } from '../../services/ojService';
+
// 获取用户信息
-export default function getUserInfo () {
+export const getUserInfoForNew = () => {
return (dispatch) => {
// 调用获取用户信息， 如果没有登录直接调用登录，成功后保存当前用户信息
+ fetchUserInfoForNew().then(res => {
+ // console.log('获取用户信息成功: ', res);
+ const { data } = res;
+ if (data.status === 401) return;
+ dispatch({
+ type: types.SAVE_USER_INFO,
+ payload: data.user
+ });
+ })
}
}
\ No newline at end of file
diff --git a/public/react/src/redux/reducers/ojForUserReducer.js b/public/react/src/redux/reducers/ojForUserReducer.js
index f734fea06..6520f8954 100644
--- a/public/react/src/redux/reducers/ojForUserReducer.js
+++ b/public/react/src/redux/reducers/ojForUserReducer.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-27 13:41:48
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 13:37:17
+ * @LastEditTime: 2019-12-10 10:09:59
*/
import types from "../actions/actionTypes";
import { Base64 } from 'js-base64';
@@ -20,6 +20,8 @@ const initialState = {
userCodeTab: 'task', // 学员测评tab位置: task | record | comment
userTestInput: '', // 用户自定义输入值
recordDetail: {}, // 根据id号获取的记录详情
+ hack_identifier: '', // 用户界面编辑时
+ editor_code: '' // 保存编辑代码
};
const ojForUserReducer = (state = initialState, action) => {
@@ -109,6 +111,16 @@ const ojForUserReducer = (state = initialState, action) => {
...state,
hack: Object.assign({}, curHack)
}
+ case types.SAVE_HACK_IDENTIFIER:
+ return {
+ ...state,
+ hack_identifier: action.payload
+ }
+ case types.SAVE_EDITOR_CODE:
+ return {
+ ...state,
+ editor_code: action.payload
+ }
default:
return state;
}
diff --git a/public/react/src/redux/reducers/ojFormReducer.js b/public/react/src/redux/reducers/ojFormReducer.js
index dab218cb7..ce89bce9a 100644
--- a/public/react/src/redux/reducers/ojFormReducer.js
+++ b/public/react/src/redux/reducers/ojFormReducer.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-20 16:40:32
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-05 09:35:29
+ * @LastEditTime: 2019-12-09 16:30:46
*/
import { Base64 } from 'js-base64';
import types from '../actions/actionTypes';
@@ -16,8 +16,8 @@ const init = {
description: '',
difficult: 1,
category: 1,
- openOrNot: 1,
- timeLimit: ''
+ // openOrNot: 1,
+ timeLimit: 3
},
ojFormValidate: {
name: {
@@ -40,10 +40,10 @@ const init = {
validateStatus: '',
errMsg: ''
},
- openOrNot: {
- validateStatus: '',
- errMsg: ''
- },
+ // openOrNot: {
+ // validateStatus: '',
+ // errMsg: ''
+ // },
timeLimit: {
validateStatus: '',
errMsg: ''
@@ -64,7 +64,8 @@ const init = {
identifier: '', // OJ表单id
loading: false, // 僵尸loading标志
testCodeStatus: 'default', // 调试代码状态 default(默认值) | loading(加载中) | loaded(加载完成) | userCase(用户自定义测试用例) | finish(测试完成)
- openTestCodeIndex: [0] // 展开的测试用例: 数组， 当出错时，展开所有出错的测试用例， 默认展开第一个
+ openTestCodeIndex: [0], // 展开的测试用例: 数组， 当出错时，展开所有出错的测试用例， 默认展开第一个
+ isPublish: 0, // 是否是发布状态: 0 未发布 1 已发布
}
const tcValidateObj = {
@@ -167,7 +168,7 @@ const ojFormReducer = (state = initialState, action) => {
* 6. 更改测试用例状态
* 7. 添加测试用例验证
*/
- const { code = '', description, language, name, hack_sets = [], time_limit, difficult, category } = action.payload;
+ const { code = '', description, language, name, hack_sets = [], time_limit, difficult, category, status } = action.payload;
const currentOjForm = {
name, // 任务名称
language,
@@ -203,7 +204,8 @@ const ojFormReducer = (state = initialState, action) => {
code: cbcode,
testCases: curTestCases,
testCasesValidate: curTcValidates,
- testCodeStatus: hack_sets.length > 0 ? 'userCase' : 'default'
+ testCodeStatus: hack_sets.length > 0 ? 'userCase' : 'default',
+ isPublish: status
}
case types.CLEAR_JSFORM_STORE:
state = Object.assign({}, init);
diff --git a/public/react/src/services/ojService.js b/public/react/src/services/ojService.js
index 9c49073f3..74c243379 100644
--- a/public/react/src/services/ojService.js
+++ b/public/react/src/services/ojService.js
@@ -4,7 +4,7 @@
* @Github:
* @Date: 2019-11-20 10:55:38
* @LastEditors: tangjiang
- * @LastEditTime: 2019-12-04 18:05:10
+ * @LastEditTime: 2019-12-10 20:46:16
*/
import axios from 'axios';
@@ -20,6 +20,12 @@ export async function fetchOJList (params) {
return axios.get('/problems.json', { params: obj });
}
+// 删除OJ列表
+export async function fetchDeleteOJItem (identifier) {
+ const url = `/problems/${identifier}.json`;
+ return axios.delete(url);
+}
+
// 提交
export async function fetchPostOjForm (paramsObj) {
const { params, submitType, identifier } = paramsObj;
@@ -106,3 +112,9 @@ export async function fetchRestoreInitialCode (identifier) {
const url = `/myproblems/${identifier}/restore_initial_code.json`;
return axios.post(url);
}
+
+// 新建时调用获取用户信息接口
+export async function fetchUserInfoForNew () {
+ const url = `/problems/new.json`;
+ return axios.get(url);
+}
+
*/}
+
+
+
+
+
+
+
+ -
+ { renderNavItem }
+
+ { renderComp }
+