index.js 3.96 KB
Newer Older
1 2 3
import React, { Component } from 'react';
import './index.scss'
import Container from '../container'
zhanghaozhe committed
4
import Terminal from '../terminal'
5 6 7 8
import AceEditor from 'react-ace'
import 'ace-builds/src-min-noconflict/theme-dracula'
import 'ace-builds/src-min-noconflict/mode-python'
import StatusBar from './status-bar'
zhanghaozhe committed
9 10 11
import { http } from "@/utils"
import { Toast } from "antd-mobile";
import { questionType } from '../consts'
zhanghaozhe committed
12

zhanghaozhe committed
13 14

const {First, Normal, Pass, Error, InputTip, Skipped, Finished} = StatusBar
15 16

class Program extends Component {
zhanghaozhe committed
17 18 19
  userEditor = null
  icon = 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/interactive_tutorial/study/program-icon.png'
  ws = null
20 21 22

  state = {
    editorWidth: '',
zhanghaozhe committed
23 24 25 26 27 28 29
    showTerminal: false,
    code: '',
    answer: '',
    showAnswer: false,
    result: '',
    filename: '',
    executing: false,
30 31 32
  }

  componentDidMount() {
zhanghaozhe committed
33 34 35
    const contentElem = document.querySelector('.container .content')
    const contentStyles = window.getComputedStyle(contentElem)
    const contentWidth = contentElem.clientWidth
36
    const contentPaddingLeft = parseFloat(contentStyles.getPropertyValue('padding-left'))
zhanghaozhe committed
37 38 39 40 41 42 43 44 45 46 47
    const {type, code_ques, content, user_answer} = this.props.question
    let code = content
    let answer = '', result = '', showTerminal = false
    if (type === questionType.program) {
      code = code_ques.code
      answer = code_ques.answer
      if (user_answer && user_answer.is_finish && user_answer.result) {
        result = user_answer.result
        showTerminal = true
      }
    }
48
    this.setState({
zhanghaozhe committed
49
      editorWidth: `${contentWidth - contentPaddingLeft}px`,
zhanghaozhe committed
50 51 52 53
      code,
      answer,
      result,
      showTerminal,
54 55 56 57
    })
  }

  onLoad = editor => {
zhanghaozhe committed
58
    this.userEditor = editor
59 60
  }

zhanghaozhe committed
61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
  execute = () => {
    // this.getAuthenticationData()
    this.uploadCode().then(filename => {
      this.setState({
        filename,
        executing: true,
        showTerminal: true,
      })
    })
  }

  uploadCode = () => {
    return http.post(`${API.home}/web/python/practice/file`, {
      code: this.userEditor.getValue(),
    }).then(res => {
      const {code, msg, data} = res.data
      if (code === 200) {
        return data.filename
      } else {
        Toast.fail(msg, 2)
      }
    })
  }
84 85

  render() {
zhanghaozhe committed
86 87
    const {editorWidth, showTerminal, code, answer, showAnswer, result, executing, filename} = this.state
    const {user, question: {type, user_answer, content}, isProgramShowed} = this.props
88
    return (
zhanghaozhe committed
89 90 91
      <>
        {
          content && type !== questionType.codeBlock && <Container content={content}></Container>
92
        }
zhanghaozhe committed
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
        <Container
          user={this.icon}
          content={
            <div className="program">
              <AceEditor
                name={'ace-editor'}
                mode={'python'}
                theme={'dracula'}
                readOnly={true}
                value={code}
                width={editorWidth}
                height={'141px'}
                onLoad={this.onLoad}
              />
              {
                showAnswer && <AceEditor
                  name={'ace-editor'}
                  mode={'python'}
                  theme={'dracula'}
                  readOnly={true}
                  value={answer}
                  width={editorWidth}
                  height={'141px'}
                />
              }
              {
                type !== questionType.codeBlock &&
                <ToolBar isProgramShowed={isProgramShowed} userAnswer={user_answer} execute={this.execute}/>
              }
              {
                showTerminal && <Terminal result={result} executing={executing} filename={filename}/>
              }
            </div>
          }
        />
      </>
129 130 131 132
    );
  }
}

zhanghaozhe committed
133 134 135 136 137 138 139
function ToolBar({isProgramShowed, userAnswer, isSuccessful, execute}) {
  if (userAnswer && userAnswer.is_finish) {
    if (userAnswer.is_jump) {
      return <Skipped/>
    }
    return <Finished/>
  }
zhanghaozhe committed
140
  return isProgramShowed > 1 ? <Normal/> : <First execute={execute}/>
zhanghaozhe committed
141 142
}

143
export default Program;