forked from Open-CT/OpenPBL
fix: timer
This commit is contained in:
parent
3ab153f5d1
commit
a99b9a203c
|
@ -10,64 +10,60 @@ import util from "../../component/Util"
|
|||
import StudentApi from "../../../api/StudentApi";
|
||||
import TaskCard from "./component/TaskCard";
|
||||
|
||||
function PreviewSection(obj) {
|
||||
let url = new URLSearchParams(obj.location.search)
|
||||
const backUrl = url.get('back')
|
||||
|
||||
const sid = obj.match.params.sid
|
||||
const pid = obj.match.params.pid
|
||||
const [section, setSection] = useState({resource: {}})
|
||||
const [tasks, setTasks] = useState([])
|
||||
const [learning, setLearning] = useState(false)
|
||||
const [editable, setEditable] = useState(false)
|
||||
const [showCount, setShowCount] = useState(false)
|
||||
|
||||
const [minute, setMinute] = useState(0)
|
||||
const [second, setSecond] = useState(0)
|
||||
const [timer, setTimer] = useState(null)
|
||||
let s = 0
|
||||
let m = 0
|
||||
|
||||
useEffect(() => {
|
||||
getSectionDetail()
|
||||
getTasks()
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
if (learning) {
|
||||
window.onbeforeunload = leave
|
||||
class PreviewSection extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
let url = new URLSearchParams(this.props.location.search)
|
||||
const backUrl = url.get('back')
|
||||
this.state = {
|
||||
backUrl: backUrl,
|
||||
sid: this.props.match.params.sid,
|
||||
pid: this.props.match.params.pid,
|
||||
section: {resource: {}},
|
||||
tasks: [],
|
||||
learning: false,
|
||||
editable: false,
|
||||
showCount: false,
|
||||
timer: null,
|
||||
minute: 0,
|
||||
second: 0,
|
||||
}
|
||||
}, [learning])
|
||||
const leave = () => {
|
||||
if (timer != null) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
componentDidMount() {
|
||||
this.getSectionDetail()
|
||||
this.getTasks()
|
||||
}
|
||||
componentWillUnmount() {
|
||||
if (this.state.timer != null) {
|
||||
clearTimeout(this.state.timer)
|
||||
}
|
||||
let data = {
|
||||
learnMinute: m,
|
||||
learnSecond: s
|
||||
learnMinute: this.state.minute,
|
||||
learnSecond: this.state.second
|
||||
}
|
||||
StudentApi.updateLearnSection(pid, sid, data)
|
||||
StudentApi.updateLearnSection(this.state.pid, this.state.sid, data)
|
||||
.then(res => {
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
window.removeEventListener("onbeforeunload", leave)
|
||||
}
|
||||
|
||||
const getSectionDetail = () => {
|
||||
SectionApi.getSectionDetail(sid, pid)
|
||||
getSectionDetail = () => {
|
||||
SectionApi.getSectionDetail(this.state.sid, this.state.pid)
|
||||
.then(res => {
|
||||
setSection(res.data.section)
|
||||
this.setState({
|
||||
section: res.data.section
|
||||
})
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
const getTasks = () => {
|
||||
TaskApi.getSectionTasks(sid, pid)
|
||||
getTasks = () => {
|
||||
TaskApi.getSectionTasks(this.state.sid, this.state.pid)
|
||||
.then(res => {
|
||||
if (res.data.tasks === null) {
|
||||
setTasks([])
|
||||
} else {
|
||||
let t = res.data.tasks
|
||||
for (let i = 0; i < t.length; i++) {
|
||||
|
@ -93,118 +89,133 @@ function PreviewSection(obj) {
|
|||
}
|
||||
}
|
||||
}
|
||||
setTasks(t)
|
||||
this.setState({
|
||||
tasks: t
|
||||
})
|
||||
}
|
||||
setLearning(res.data.learning)
|
||||
setEditable(res.data.editable)
|
||||
setShowCount(res.data.showCount)
|
||||
this.setState({
|
||||
learning: res.data.learning,
|
||||
editable: res.data.editable,
|
||||
showCount: res.data.showCount
|
||||
})
|
||||
|
||||
if (res.data.learning) {
|
||||
getTimer()
|
||||
if (res.data.learning && this.state.timer === null) {
|
||||
this.setTimer()
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
}
|
||||
const getTimer = () => {
|
||||
StudentApi.getLearnSection(pid, sid)
|
||||
setTimer = () => {
|
||||
StudentApi.getLearnSection(this.state.pid, this.state.sid)
|
||||
.then(res => {
|
||||
if (res.data.code === 200) {
|
||||
setSecond(res.data.data.learnSecond)
|
||||
setMinute(res.data.data.learnMinute)
|
||||
s = res.data.data.learnSecond
|
||||
m = res.data.data.learnMinute
|
||||
let m = res.data.data.learnMinute
|
||||
let s = res.data.data.learnSecond
|
||||
this.setState({
|
||||
minute: m,
|
||||
second: s
|
||||
})
|
||||
if (this.state.timer !== null) {
|
||||
clearTimeout(this.state.timer)
|
||||
}
|
||||
this.state.timer = setTimeout(this.count, 1000)
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
setTimeout(count, 1000)
|
||||
}
|
||||
const count = () => {
|
||||
if (s === 30) {
|
||||
s = 0
|
||||
m++
|
||||
setMinute(m)
|
||||
count = () => {
|
||||
if (this.state.second >= 60) {
|
||||
this.setState({
|
||||
second: 0,
|
||||
minute: ++this.state.minute
|
||||
})
|
||||
} else {
|
||||
s++
|
||||
this.setState({
|
||||
second: ++this.state.second
|
||||
})
|
||||
}
|
||||
setSecond(s)
|
||||
setTimeout(count, 1000)
|
||||
this.state.timer = setTimeout(this.count, 1000)
|
||||
}
|
||||
const back = e => {
|
||||
if (backUrl === undefined || backUrl === null) {
|
||||
window.location.href = `/project/${pid}/section/${sid}/edit`
|
||||
back = e => {
|
||||
if (this.state.backUrl === undefined || this.state.backUrl === null) {
|
||||
this.props.history.push(`/project/${this.state.pid}/section/${this.state.sid}/edit`)
|
||||
} else {
|
||||
window.location.href = backUrl
|
||||
this.props.history.push(this.state.backUrl)
|
||||
}
|
||||
}
|
||||
const setTaskItem = (item, index) => {
|
||||
tasks[index] = item
|
||||
setTasks([...tasks])
|
||||
setTaskItem = (item, index) => {
|
||||
this.state.tasks[index] = item
|
||||
this.setState({
|
||||
tasks: [...this.state.tasks]
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<DocumentTitle title="Project">
|
||||
<div style={{backgroundColor: '#f2f4f5', minHeight: '100vh'}}>
|
||||
<BackTop/>
|
||||
<PageHeader
|
||||
className="site-page-header"
|
||||
onBack={back}
|
||||
title="返回"
|
||||
subTitle="我的项目"
|
||||
/>
|
||||
<div style={{padding: '20px', margin: 'auto'}}>
|
||||
<Card>
|
||||
<h2 style={{fontWeight: 'bold'}}>
|
||||
{util.FormatSectionName(section.sectionName, section.chapterNumber, section.sectionNumber)}
|
||||
</h2>
|
||||
{learning ?
|
||||
<span style={{float: 'right'}}>{minute} : {second}</span>
|
||||
: null}
|
||||
</Card>
|
||||
<Card className="resource-card">
|
||||
<div dangerouslySetInnerHTML={{__html: section.resource.content}}/>
|
||||
</Card>
|
||||
<Card className="resource-card">
|
||||
<p className="card-title">文件资源</p>
|
||||
<p>{section.resource.fileTitle}</p>
|
||||
<p>{section.resource.fileIntroduce}</p>
|
||||
</Card>
|
||||
{tasks.map((item, index) => (
|
||||
<Card className="resource-card" key={index.toString()}>
|
||||
<p className="card-title">学生任务
|
||||
{item.submitted ?
|
||||
<span className="submit-status" style={{color: 'green'}}>
|
||||
权重占比 {item.taskWeight} % 已提交 {util.FilterTime(item.submit.createAt)}
|
||||
</span>
|
||||
:
|
||||
<span className="submit-status" style={{color: 'gray'}}>
|
||||
权重占比 {item.taskWeight} % 未提交
|
||||
</span>
|
||||
}
|
||||
</p>
|
||||
|
||||
<TaskCard
|
||||
pid={pid}
|
||||
item={item}
|
||||
index={index}
|
||||
learning={learning}
|
||||
editable={editable}
|
||||
showCount={showCount}
|
||||
setTaskItem={setTaskItem}
|
||||
getTasks={getTasks}
|
||||
/>
|
||||
render() {
|
||||
const {section, tasks, learning, pid, editable, showCount, minute, second} = this.state
|
||||
return (
|
||||
<DocumentTitle title="Project">
|
||||
<div style={{backgroundColor: '#f2f4f5', minHeight: '100vh'}}>
|
||||
<BackTop/>
|
||||
<PageHeader
|
||||
className="site-page-header"
|
||||
onBack={this.back}
|
||||
title="返回"
|
||||
subTitle="我的项目"
|
||||
/>
|
||||
<div style={{padding: '20px', margin: 'auto'}}>
|
||||
<Card>
|
||||
<h2 style={{fontWeight: 'bold'}}>
|
||||
{util.FormatSectionName(section.sectionName, section.chapterNumber, section.sectionNumber)}
|
||||
</h2>
|
||||
{learning ?
|
||||
<span style={{float: 'right'}}>{minute} : {second}</span>
|
||||
: null}
|
||||
</Card>
|
||||
))
|
||||
}
|
||||
<Card className="resource-card">
|
||||
<div dangerouslySetInnerHTML={{__html: section.resource.content}}/>
|
||||
</Card>
|
||||
<Card className="resource-card">
|
||||
<p className="card-title">文件资源</p>
|
||||
<p>{section.resource.fileTitle}</p>
|
||||
<p>{section.resource.fileIntroduce}</p>
|
||||
</Card>
|
||||
{tasks.map((item, index) => (
|
||||
<Card className="resource-card" key={index.toString()}>
|
||||
<p className="card-title">学生任务
|
||||
{item.submitted ?
|
||||
<span className="submit-status" style={{color: 'green'}}>
|
||||
权重占比 {item.taskWeight} % 已提交 {util.FilterTime(item.submit.createAt)}
|
||||
</span>
|
||||
:
|
||||
<span className="submit-status" style={{color: 'gray'}}>
|
||||
权重占比 {item.taskWeight} % 未提交
|
||||
</span>
|
||||
}
|
||||
</p>
|
||||
|
||||
<TaskCard
|
||||
pid={pid}
|
||||
item={item}
|
||||
index={index}
|
||||
learning={learning}
|
||||
editable={editable}
|
||||
showCount={showCount}
|
||||
setTaskItem={this.setTaskItem}
|
||||
getTasks={this.getTasks}
|
||||
/>
|
||||
</Card>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
)
|
||||
</DocumentTitle>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default PreviewSection
|
||||
|
|
Loading…
Reference in New Issue