dev_forum
parent
eaa67909da
commit
2c359d0328
@ -1,163 +1,163 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {getImageUrl} from 'educoder';
|
import {getImageUrl} from 'educoder';
|
||||||
import '../../paths/ShixunPaths.css';
|
import '../../paths/ShixunPaths.css';
|
||||||
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
|
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||||||
|
|
||||||
const reorder = (list, startIndex, endIndex) => {
|
const reorder = (list, startIndex, endIndex) => {
|
||||||
const result = Array.from(list);
|
const result = Array.from(list);
|
||||||
const [removed] = result.splice(startIndex, 1);
|
const [removed] = result.splice(startIndex, 1);
|
||||||
result.splice(endIndex, 0, removed);
|
result.splice(endIndex, 0, removed);
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
const $ = window.$
|
const $ = window.$
|
||||||
class DetailCards extends Component{
|
class DetailCards extends Component{
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props)
|
super(props)
|
||||||
this.state={
|
this.state={
|
||||||
pathCardsList:undefined
|
pathCardsList:undefined
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getPathCardsList(){
|
getPathCardsList(){
|
||||||
let pathid = this.props.match.params.PathId
|
let pathid = this.props.match.params.PathId
|
||||||
// let pathid= 28;
|
// let pathid= 28;
|
||||||
let url=`/stages.json?subject_id=`+pathid;
|
let url=`/stages.json?subject_id=`+pathid;
|
||||||
axios.get(url).then((result)=>{
|
axios.get(url).then((result)=>{
|
||||||
if(result.status===200){
|
if(result.status===200){
|
||||||
this.setState({
|
this.setState({
|
||||||
pathCardsList:result.data.stages
|
pathCardsList:result.data.stages
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
console.log(error);
|
console.log(error);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
for_paragraph = (index) =>{
|
for_paragraph = (index) =>{
|
||||||
$("#detail_for_paragraph_"+index).slideToggle(500);
|
$("#detail_for_paragraph_"+index).slideToggle(500);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount(){
|
componentDidMount(){
|
||||||
this.getPathCardsList();
|
this.getPathCardsList();
|
||||||
}
|
}
|
||||||
onDragEnd = (result, shixunIndex) => {
|
onDragEnd = (result, shixunIndex) => {
|
||||||
console.log(result)
|
// console.log(result)
|
||||||
|
|
||||||
// dropped outside the list
|
// dropped outside the list
|
||||||
if (!result.destination) {
|
if (!result.destination) {
|
||||||
console.log('dropped outside the list')
|
console.log('dropped outside the list')
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (result.destination.index === result.source.index) {
|
if (result.destination.index === result.source.index) {
|
||||||
console.log('the same')
|
console.log('the same')
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// TODO exchange axios request
|
// TODO exchange axios request
|
||||||
|
|
||||||
const shixuns_list = reorder(
|
const shixuns_list = reorder(
|
||||||
this.state.pathCardsList[shixunIndex].shixuns_list,
|
this.state.pathCardsList[shixunIndex].shixuns_list,
|
||||||
result.source.index,
|
result.source.index,
|
||||||
result.destination.index
|
result.destination.index
|
||||||
);
|
);
|
||||||
const pathCardsList = this.state.pathCardsList
|
const pathCardsList = this.state.pathCardsList
|
||||||
pathCardsList[shixunIndex].shixuns_list = shixuns_list;
|
pathCardsList[shixunIndex].shixuns_list = shixuns_list;
|
||||||
this.setState({
|
this.setState({
|
||||||
pathCardsList
|
pathCardsList
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
render(){
|
render(){
|
||||||
let { pathCardsList }=this.state;
|
let { pathCardsList }=this.state;
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
<div className="lesson-saved-list">
|
<div className="lesson-saved-list">
|
||||||
{
|
{
|
||||||
pathCardsList && pathCardsList.map((item,key)=>{
|
pathCardsList && pathCardsList.map((item,key)=>{
|
||||||
return(
|
return(
|
||||||
<div className="lesson-saved-list-item" id={"stage_div_"+key}>
|
<div className="lesson-saved-list-item" id={"stage_div_"+key}>
|
||||||
<p className="clearfix title-line">
|
<p className="clearfix title-line">
|
||||||
<a className="fl ring-blue mr10 mt2">
|
<a className="fl ring-blue mr10 mt2">
|
||||||
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
|
<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
|
||||||
</a>
|
</a>
|
||||||
<span className="font-18 font-bd">{item.stage_name}</span>
|
<span className="font-18 font-bd">{item.stage_name}</span>
|
||||||
<a className="fr mtf3">
|
<a className="fr mtf3">
|
||||||
<i className="iconfont icon-bianjidaibeijing font-22 color-green" data-tip-down="编辑"></i>
|
<i className="iconfont icon-bianjidaibeijing font-22 color-green" data-tip-down="编辑"></i>
|
||||||
</a>
|
</a>
|
||||||
<a href="" className="fr ring-op-green mr20">
|
<a href="" className="fr ring-op-green mr20">
|
||||||
<img src={getImageUrl("images/educoder/icon/movedown.svg")} data-tip-down="向下移动" className="fl mt2 ml4"/>
|
<img src={getImageUrl("images/educoder/icon/movedown.svg")} data-tip-down="向下移动" className="fl mt2 ml4"/>
|
||||||
</a>
|
</a>
|
||||||
<a href="" className="fr ring-op-green mr20">
|
<a href="" className="fr ring-op-green mr20">
|
||||||
<img src={getImageUrl("images/educoder/icon/moveup.svg")} data-tip-down="向上移动" className="fl mt2 ml4"/>
|
<img src={getImageUrl("images/educoder/icon/moveup.svg")} data-tip-down="向上移动" className="fl mt2 ml4"/>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
|
<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
|
||||||
<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
|
<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>
|
||||||
|
|
||||||
{/*
|
{/*
|
||||||
两个 ref={provided.innerRef}
|
两个 ref={provided.innerRef}
|
||||||
item 加 {...provided.draggableProps}
|
item 加 {...provided.draggableProps}
|
||||||
handler 加 {...provided.dragHandleProps}
|
handler 加 {...provided.dragHandleProps}
|
||||||
*/}
|
*/}
|
||||||
<DragDropContext onDragEnd={(result) => this.onDragEnd(result, key)}>
|
<DragDropContext onDragEnd={(result) => this.onDragEnd(result, key)}>
|
||||||
<Droppable droppableId="droppable">
|
<Droppable droppableId="droppable">
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
<div ref={provided.innerRef}>
|
<div ref={provided.innerRef}>
|
||||||
{
|
{
|
||||||
item.shixuns_list && item.shixuns_list.map((line,index)=>{
|
item.shixuns_list && item.shixuns_list.map((line,index)=>{
|
||||||
return(
|
return(
|
||||||
<Draggable key={line.identifier} draggableId={line.identifier} index={index}>
|
<Draggable key={line.identifier} draggableId={line.identifier} index={index}>
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
<div className="clearfix paragraph lineh-30" ref={provided.innerRef} {...provided.draggableProps}>
|
<div className="clearfix paragraph lineh-30" ref={provided.innerRef} {...provided.draggableProps}>
|
||||||
<li className="fl li-width63">
|
<li className="fl li-width63">
|
||||||
<span className="progressRing mr10">
|
<span className="progressRing mr10">
|
||||||
{
|
{
|
||||||
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
|
line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
|
||||||
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
|
:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
|
||||||
}
|
}
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
<span className="paragraph_name color-grey3"><span className="subject_stage_shixun_index">{key+1}</span>-{index+1} {line.shixun_name}</span>
|
<span className="paragraph_name color-grey3"><span className="subject_stage_shixun_index">{key+1}</span>-{index+1} {line.shixun_name}</span>
|
||||||
</li>
|
</li>
|
||||||
{
|
{
|
||||||
line.shixun_status==="暂未公开"?
|
line.shixun_status==="暂未公开"?
|
||||||
<li className="fr status_li"><span className="fr color-grey-9">暂未公开</span></li>
|
<li className="fr status_li"><span className="fr color-grey-9">暂未公开</span></li>
|
||||||
:
|
:
|
||||||
|
|
||||||
<li className="fr status_li" >
|
<li className="fr status_li" >
|
||||||
<a href={"javascript:void(0)"} {...provided.dragHandleProps}
|
<a href={"javascript:void(0)"} {...provided.dragHandleProps}
|
||||||
className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">drag</a>
|
className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">drag</a>
|
||||||
|
|
||||||
<a href={line.shixun_path} className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">查看详情</a>
|
<a href={line.shixun_path} className="mr30 color-blue_4C shixun_detail pointer fl none" target="_blank">查看详情</a>
|
||||||
<a href={line.tpi_path} className="btn_auto user_bluebg_btn fl none" id="shixun_operation" target="_blank">开始实战</a>
|
<a href={line.tpi_path} className="btn_auto user_bluebg_btn fl none" id="shixun_operation" target="_blank">开始实战</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</Droppable>
|
</Droppable>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<DetailCardsEditAndAdd></DetailCardsEditAndAdd>
|
<DetailCardsEditAndAdd></DetailCardsEditAndAdd>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default DetailCards;
|
export default DetailCards;
|
||||||
Loading…
Reference in new issue