m52mxtq3o
/
educoder
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

bd

Browse Source
dev_cs
杨树明 6 years ago
parent 03a5e89bc4
commit 971276504b
2 changed files with 600 additions and 600 deletions
Show Stats Download Patch File Download Diff File

832
public/react/src/modules/paths/PathDetail/PathDetailIndex.js
Unescape View File

@ -14,24 +14,24 @@ import TPMRightSection from "../../tpm/component/TPMRightSection";
import styled from "styled-components";
const getItemStyle = (isDragging, draggableStyle) => ({
// change background colour if dragging
background: isDragging ? '#dceeff' : '',
// styles we need to apply on draggables
...draggableStyle,
// change background colour if dragging
background: isDragging ? '#dceeff' : '',
// styles we need to apply on draggables
...draggableStyle,
});
const getItems = count =>
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k}`,
content: `item ${k}`
}));
Array.from({ length: count }, (v, k) => k).map(k => ({
id: `item-${k}`,
content: `item ${k}`
}));
// a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
return result;
};
const List = styled.div`
@ -66,90 +66,90 @@ const DragHandle = styled.div`
`;
const $ =window.$
class PathDetailIndex extends Component{
constructor(props){
super(props)
this.state={
constructor(props){
super(props)
this.state={
progress:undefined,
tags:undefined,
members:undefined,
detailInfoList:undefined,
clickdetailInfoListtype:false,
Modalstype:false,
Modalstopval:undefined,
Modalsbottomval:undefined,
cardsModalcancel:this.cardsModalcancel,
cardsModalsave:this.cardsModalsave,
user_id:undefined,
loadtype:false,
detailInfoList:undefined,
clickdetailInfoListtype:false,
Modalstype:false,
Modalstopval:undefined,
Modalsbottomval:undefined,
cardsModalcancel:this.cardsModalcancel,
cardsModalsave:this.cardsModalsave,
user_id:undefined,
loadtype:false,
courses:undefined,
items: getItems(10),
items: getItems(10),
pathtopskey:1
}
this.onDragEnd = this.onDragEnd.bind(this);
}
this.onDragEnd = this.onDragEnd.bind(this);
}
onDragEnd(result) {
// dropped outside the list
if (!result.destination) {
return;
}
}
onDragEnd(result) {
// dropped outside the list
if (!result.destination) {
return;
}
try {
try {
}catch (e) {
}catch (e) {
}
const items = reorder(
this.state.members,
result.source.index,
result.destination.index
);
}
const items = reorder(
this.state.members,
result.source.index,
result.destination.index
);
this.setState({
detailInfoList:this.state.detailInfoList,
this.setState({
detailInfoList:this.state.detailInfoList,
members:items,
items
});
console.log(this.state.members)
console.log("items 数组数组数组数组")
console.log(items)
}
cardsModalcancel=()=>{
this.setState({
Modalstype:false,
})
// TODO 这个是临时处理，还需要优化，这里要看怎么区分处理
if (this.state.Modalstopval == '你确定要删除该成员吗？') {
return;
}
items
});
console.log(this.state.members)
console.log("items 数组数组数组数组")
console.log(items)
}
cardsModalcancel=()=>{
this.setState({
Modalstype:false,
})
// TODO 这个是临时处理，还需要优化，这里要看怎么区分处理
if (this.state.Modalstopval == '你确定要删除该成员吗？') {
return;
}
this.props.history.goBack()
}
}
cardsModalsave=()=>{
this.setState({
Modalstype:false,
})
cardsModalsave=()=>{
this.setState({
Modalstype:false,
})
this.props.history.goBack()
}
// 加载markdown
updatamakedown=(id)=>{
setTimeout(()=>{
var shixunDescr = window.editormd.markdownToHTML(id, {
htmlDecode: "style,script,iframe",
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true
});
$("#"+id+" p:first").addClass("ReactMarkdown");
}, 200)
}
}
// 加载markdown
updatamakedown=(id)=>{
setTimeout(()=>{
var shixunDescr = window.editormd.markdownToHTML(id, {
htmlDecode: "style,script,iframe",
taskList: true,
tex: true,
flowChart: true,
sequenceDiagram: true
});
$("#"+id+" p:first").addClass("ReactMarkdown");
}, 200)
}
componentDidMount(){
this.getdatasindex()
}
componentDidMount(){
this.getdatasindex()
}
getdatasindex=(key)=>{
getdatasindex=(key)=>{
let pathid=this.props.match.params.pathId;
let url="/paths/"+pathid+".json";
@ -168,7 +168,7 @@ class PathDetailIndex extends Component{
if(result.data.allow_visit===true){
this.setState({
detailInfoList:result.data,
courses:result.data.courses,
courses:result.data.courses,
pathtopskey:key===undefined?1:key,
// items: getItems(result.data.members.length),
})
@ -205,157 +205,157 @@ class PathDetailIndex extends Component{
})
}
updatadetailInfoList=()=>{
this.getdatasindex();
}
clickNewsubscript=(val)=>{
if(val===0){
this.setState({
clickdetailInfoListtype:true
})
}else{
this.setState({
clickdetailInfoListtype:false
})
}
updatadetailInfoList=()=>{
this.getdatasindex();
}
}
clickNewsubscript=(val)=>{
if(val===0){
this.setState({
clickdetailInfoListtype:true
})
}else{
this.setState({
clickdetailInfoListtype:false
})
}
timeStamp=(value)=>{
var secondTime = parseInt(value);// 秒
var minuteTime = 0;// 分
var hourTime = 0;// 小时
if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
//获取分钟，除以60取整数，得到整数分钟
minuteTime = parseInt(secondTime / 60);
//获取秒数，秒数取佘，得到整数秒数
secondTime = parseInt(secondTime % 60);
//如果分钟大于60，将分钟转换成小时
if(minuteTime > 60) {
//获取小时，获取分钟除以60，得到整数小时
hourTime = parseInt(minuteTime / 60);
//获取小时后取佘的分，获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60);
}
}
var result = "" + parseInt(secondTime) + "秒";
if(minuteTime > 0) {
result = "" + parseInt(minuteTime) + "分" + result;
}
if(hourTime > 0) {
result = "" + parseInt(hourTime) + "小时" + result;
}
return result;
}
}
timeStamp=(value)=>{
var secondTime = parseInt(value);// 秒
var minuteTime = 0;// 分
var hourTime = 0;// 小时
if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数
//获取分钟，除以60取整数，得到整数分钟
minuteTime = parseInt(secondTime / 60);
//获取秒数，秒数取佘，得到整数秒数
secondTime = parseInt(secondTime % 60);
//如果分钟大于60，将分钟转换成小时
if(minuteTime > 60) {
//获取小时，获取分钟除以60，得到整数小时
hourTime = parseInt(minuteTime / 60);
//获取小时后取佘的分，获取分钟除以60取佘的分
minuteTime = parseInt(minuteTime % 60);
}
}
var result = "" + parseInt(secondTime) + "秒";
if(minuteTime > 0) {
result = "" + parseInt(minuteTime) + "分" + result;
}
if(hourTime > 0) {
result = "" + parseInt(hourTime) + "小时" + result;
}
return result;
}
shanchuallow=(id)=>{
this.setState({
user_id:id,
Modalstype:true,
Modalstopval:"你确定要删除该成员吗？",
cardsModalsave:this.delectshanchuallow,
loadtype:false
})
}
delectshanchuallow=()=>{
let{user_id}=this.state;
let pathid=this.props.match.params.pathId;
let url="/paths/"+pathid+"/delete_member.json";
let param={user_id:user_id};
axios.delete(url,{data:param}).then((response) => {
if(response.data.status===1){
if (this.props.current_user.user_id == user_id) {
this.props.history.push('/paths')
return;
}
this.props.showNotification(response.data.message)
this.setState({
Modalstype:false,
// Modalstopval:response.data.message,
loadtype:false,
// cardsModalsave:this.cardsModalsave,
})
this.updatadetailInfoList();
}
}).catch((error) => {
console.log(error)
})
}
shanchuallow=(id)=>{
this.setState({
user_id:id,
Modalstype:true,
Modalstopval:"你确定要删除该成员吗？",
cardsModalsave:this.delectshanchuallow,
loadtype:false
})
}
//上移
moveup=(data)=>{
// console.log(data);
let pathid=this.props.match.params.pathId;
let url=`/paths/${pathid}/up_member_position.json`;
axios.post(url,{
user_id:data.id
}).then((response) => {
if(response.status === 200){
console.log("上移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList:this.state.detailInfoList,
delectshanchuallow=()=>{
let{user_id}=this.state;
let pathid=this.props.match.params.pathId;
let url="/paths/"+pathid+"/delete_member.json";
let param={user_id:user_id};
axios.delete(url,{data:param}).then((response) => {
if(response.data.status===1){
if (this.props.current_user.user_id == user_id) {
this.props.history.push('/paths')
return;
}
this.props.showNotification(response.data.message)
this.setState({
Modalstype:false,
// Modalstopval:response.data.message,
loadtype:false,
// cardsModalsave:this.cardsModalsave,
})
this.updatadetailInfoList();
}
}).catch((error) => {
console.log(error)
})
}
//上移
moveup=(data)=>{
// console.log(data);
let pathid=this.props.match.params.pathId;
let url=`/paths/${pathid}/up_member_position.json`;
axios.post(url,{
user_id:data.id
}).then((response) => {
if(response.status === 200){
console.log("上移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList:this.state.detailInfoList,
members:response.data.members
});
// console.log(this.state.detailInfoList.members);
});
// console.log(this.state.detailInfoList.members);
}
}
}).catch((error) => {
console.log(error)
})
}
}).catch((error) => {
console.log(error)
})
}
//下移
movedown =(data) => {
// console.log(data);
let pathid=this.props.match.params.pathId;
let url=`/paths/${pathid}/down_member_position.json`;
axios.post(url,{
user_id:data.id
}).then((response) => {
if( response.status === 200){
console.log("下移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList:this.state.detailInfoList,
members:response.data.members
});
// console.log(this.state.detailInfoList.members);
}
}).catch((error) => {
console.log(error)
})
}
render(){
this.updatamakedown("shixuns_propaedeutics");
this.updatamakedown("subject_learning_notes");
let {detailInfoList,
clickdetailInfoListtype,
Modalstype,
Modalstopval,
Modalsbottomval,
cardsModalcancel,
cardsModalsave,
loadtype,
//下移
movedown =(data) => {
// console.log(data);
let pathid=this.props.match.params.pathId;
let url=`/paths/${pathid}/down_member_position.json`;
axios.post(url,{
user_id:data.id
}).then((response) => {
if( response.status === 200){
console.log("下移");
// console.log(this.state.detailInfoList.members);
// console.log(response);
this.setState({
detailInfoList:this.state.detailInfoList,
members:response.data.members
});
// console.log(this.state.detailInfoList.members);
}
}).catch((error) => {
console.log(error)
})
}
render(){
this.updatamakedown("shixuns_propaedeutics");
this.updatamakedown("subject_learning_notes");
let {detailInfoList,
clickdetailInfoListtype,
Modalstype,
Modalstopval,
Modalsbottomval,
cardsModalcancel,
cardsModalsave,
loadtype,
progress,
members,
tags,
courses,
} = this.state
} = this.state
return(
<div className="newContainer">
return(
<div className="newContainer">
<style>
{
`
@ -365,206 +365,206 @@ class PathDetailIndex extends Component{
`
}
</style>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={cardsModalsave}
loadtype={loadtype}
>
</Modals>
<div className="newMain clearfix">
<DetailTop {...this.state} {...this.props} getdatasindex={(key)=>this.getdatasindex(key)}></DetailTop>
<div className="educontent clearfix mb80">
<div className="with65 fl">
<div className="produce-content mb10">
<p className="clearfix mb20">
<span className="fl font-18 font-bd">简介</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link className="fr" to={"/paths/"+this.props.match.params.pathId+"/edit"}>*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div className="color-grey-6 clearfix">
<div id="shixuns_propaedeutics" className="new_li fl" style={{"padding":" 0px","textAlign": "justify;"}}>
{detailInfoList === undefined ? "" :detailInfoList.description===null?"":
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.description).replace(/▁/g,"▁▁▁")}}></div>
}
</div>
</div>
</div>
<DetailCards
{...this.props}
{...this.state}
updatadetailInfoLists={this.updatadetailInfoList}
></DetailCards>
</div>
<div className="with35 fr pl20">
<div className="edu-back-white mustlearn mb10">
<p className="clearfix mb30">
<span className="font-16">课程须知</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link to={"/paths/"+this.props.match.params.pathId+"/edit#learning_notes"} className="fr mtf5">*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div id="subject_learning_notes" className="color-grey-6 new_li markdown-body editormd-html-preview justify">
{detailInfoList === undefined ? "" :detailInfoList.learning_notes===null?"":
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.learning_notes).replace(/▁/g,"▁▁▁")}}></div>
<Modals
modalsType={Modalstype}
modalsTopval={Modalstopval}
modalsBottomval={Modalsbottomval}
modalCancel={cardsModalcancel}
modalSave={cardsModalsave}
loadtype={loadtype}
>
</Modals>
<div className="newMain clearfix">
<DetailTop {...this.state} {...this.props} getdatasindex={(key)=>this.getdatasindex(key)}></DetailTop>
<div className="educontent clearfix mb80">
<div className="with65 fl">
<div className="produce-content mb10">
<p className="clearfix mb20">
<span className="fl font-18 font-bd">简介</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link className="fr" to={"/paths/"+this.props.match.params.pathId+"/edit"}>*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div className="color-grey-6 clearfix">
<div id="shixuns_propaedeutics" className="new_li fl" style={{"padding":" 0px","textAlign": "justify;"}}>
{detailInfoList === undefined ? "" :detailInfoList.description===null?"":
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.description).replace(/▁/g,"▁▁▁")}}></div>
}
</div>
</div>
{tags === undefined ? "" :tags === null ? "":
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{tags.length}</span></p>
<div className={clickdetailInfoListtype===false?"newedbox newedboxheight":"newedbox newminheight"}>
<div className="clearfix" id="boxheight">
{
tags && tags.map((item,key)=>{
return(
<span value={key} className = {item.status == true ? "edu-filter-btn29BD8B fl" : "newedu-filter-btn fl"}>{item.tag_name}</span>
)
})
}
</div>
</div>
<Tooltip placement="bottom" title={"显示全部"}>
<div className={tags.length>20&&clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 fr":"newsubscript mb9 color-grey-9 none"}
onClick={()=>this.clickNewsubscript(0)}
><span className="mr8">...</span><Icon type="caret-down" />
</div>
</Tooltip>
<Tooltip placement="bottom" title={"收起"}>
<div className={clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9 fr"}
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
</div>
</Tooltip>
</div>
}
{
this.props.checkIfLogin()===false?"":progress === undefined ? "" : progress === null ? "" :
<div className="edu-back-white myProgress padding40-20 mb10">
<p className="mb20">
<span className="font-16 mr10">关卡数</span>
<Tooltip placement="bottom" title="已通过关卡数/总关卡数">
<span className="color-green" >{progress.my_score} / {progress.all_score}</span>
</Tooltip>
</p>
<p className="clearfix mb10">
<span className="fl color-green">已学 {progress.learned}%</span>
<span className="fr color-grey-9" id="time-consuming">学习耗时{this.timeStamp(progress.time)} </span>
</p>
<div className="myProgressNav"><div className="myProgressGreen" style={{"width":`${progress.learned+"%"}`}}></div></div>
</div>
}
{
members ===undefined ?"":members === null ?"":
<div className="teacherTeam edu-back-white clearfix" id="subject_members">
<p className="font-16 clearfix">教学团队</p>
{ members===undefined?
members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
</div>
</div>
)
})
:detailInfoList===undefined?"":detailInfoList.allow_add_member===true?
members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/* 新增role 判断是否能删除 1 管理员 2 合作者 */}
{
detailInfoList===undefined?"":detailInfoList.allow_add_member===true && item.role == 2?
<a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""
}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
{
detailInfoList===undefined?"":detailInfoList.allow_add_member===true? <div>
{key!=0?<div className="fr ml15 flex1"><a onClick={()=>this.moveup(item)}><Tooltip title="上移"><i className="color-green font-18 iconfont icon-xiangshangyi"></i></Tooltip></a></div>:""}
{key+1== members.length?"":<div className="fr ml15 flex1 "><a onClick={()=>this.movedown(item)}><Tooltip title="下移"><i className="color-green font-18 iconfont icon-xiangxiayi"></i></Tooltip></a></div>}
</div>
:""
}
</div>
</div>
)
})
: members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
</div>
</div>
)
})}
</div>
}
<AddCollaborators {...this.props} {...this.state} updatadetailInfoLists={this.updatadetailInfoList}></AddCollaborators>
</div>
</div>
</div>
</div>
)
}
</div>
</div>
</div>
<DetailCards
{...this.props}
{...this.state}
updatadetailInfoLists={this.updatadetailInfoList}
></DetailCards>
</div>
<div className="with35 fr pl20">
<div className="edu-back-white mustlearn mb10">
<p className="clearfix mb30">
<span className="font-16">课程须知</span>
{/*{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?*/}
{/*<Tooltip placement="bottom" title={"编辑"}>*/}
{/*<Link to={"/paths/"+this.props.match.params.pathId+"/edit#learning_notes"} className="fr mtf5">*/}
{/*<i className="iconfont icon-bianjidaibeijing font-20 color-green"></i>*/}
{/*</Link>*/}
{/*</Tooltip>*/}
{/*:""*/}
{/*}*/}
</p>
<div id="subject_learning_notes" className="color-grey-6 new_li markdown-body editormd-html-preview justify">
{detailInfoList === undefined ? "" :detailInfoList.learning_notes===null?"":
<div className={"markdown-body font-14"} dangerouslySetInnerHTML={{__html: markdownToHTML(detailInfoList.learning_notes).replace(/▁/g,"▁▁▁")}}></div>
}
</div>
</div>
{tags === undefined ? "" :tags === null ? "":
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{tags.length}</span></p>
<div className={clickdetailInfoListtype===false?"newedbox newedboxheight":"newedbox newminheight"}>
<div className="clearfix" id="boxheight">
{
tags && tags.map((item,key)=>{
return(
<span value={key} className = {item.status == true ? "edu-filter-btn29BD8B fl" : "newedu-filter-btn fl"}>{item.tag_name}</span>
)
})
}
</div>
</div>
<Tooltip placement="bottom" title={"显示全部"}>
<div className={tags.length>20&&clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 fr":"newsubscript mb9 color-grey-9 none"}
onClick={()=>this.clickNewsubscript(0)}
><span className="mr8">...</span><Icon type="caret-down" />
</div>
</Tooltip>
<Tooltip placement="bottom" title={"收起"}>
<div className={clickdetailInfoListtype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9 fr"}
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
</div>
</Tooltip>
</div>
}
{
this.props.checkIfLogin()===false?"":progress === undefined ? "" : progress === null ? "" :
<div className="edu-back-white myProgress padding40-20 mb10">
<p className="mb20">
<span className="font-16 mr10">我的进展</span>
<Tooltip placement="bottom" title="获得经验值/总经验值">
<span className="color-green" >{progress.my_score} / {progress.all_score}</span>
</Tooltip>
</p>
<p className="clearfix mb10">
<span className="fl color-green">已学 {progress.learned}%</span>
<span className="fr color-grey-9" id="time-consuming">学习耗时{this.timeStamp(progress.time)} </span>
</p>
<div className="myProgressNav"><div className="myProgressGreen" style={{"width":`${progress.learned+"%"}`}}></div></div>
</div>
}
{
members ===undefined ?"":members === null ?"":
<div className="teacherTeam edu-back-white clearfix" id="subject_members">
<p className="font-16 clearfix">教学团队</p>
{ members===undefined?
members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
</div>
</div>
)
})
:detailInfoList===undefined?"":detailInfoList.allow_add_member===true?
members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/* 新增role 判断是否能删除 1 管理员 2 合作者 */}
{
detailInfoList===undefined?"":detailInfoList.allow_add_member===true && item.role == 2?
<a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""
}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
{
detailInfoList===undefined?"":detailInfoList.allow_add_member===true? <div>
{key!=0?<div className="fr ml15 flex1"><a onClick={()=>this.moveup(item)}><Tooltip title="上移"><i className="color-green font-18 iconfont icon-xiangshangyi"></i></Tooltip></a></div>:""}
{key+1== members.length?"":<div className="fr ml15 flex1 "><a onClick={()=>this.movedown(item)}><Tooltip title="下移"><i className="color-green font-18 iconfont icon-xiangxiayi"></i></Tooltip></a></div>}
</div>
:""
}
</div>
</div>
)
})
: members && members.map((item,key)=>{
return(
<div className="teacherTeamItem clearfix df" key={key}>
<a href={item.user_url} target="_blank" className="fl">
<img alt="头像" className="radius" height="80" src={getImageUrl(`${"images/"+item.image_url}`)} width="80"/>
</a>
<div className="fl ml15 flex1">
<p className="mb10 mt5">{item.name}
{/*{*/}
{/* detailInfoList===undefined?"":detailInfoList.allow_add_member===true?*/}
{/* <a className="fr" onClick={()=>this.shanchuallow(item.id)}><i className="iconfont icon-shanchu color-grey-c font-14 font-n"></i></a>:""*/}
{/*}*/}
</p>
<div className="clearfix">
<p className="color-grey-9 font-12 fl"><span className="mr10">{item.school}</span><span>{item.identity}</span></p>
</div>
</div>
</div>
)
})}
</div>
}
<AddCollaborators {...this.props} {...this.state} updatadetailInfoLists={this.updatadetailInfoList}></AddCollaborators>
</div>
</div>
</div>
</div>
)
}
}
export default PathDetailIndex;

368
public/react/src/modules/tpm/component/TPMRightSection.js
Unescape View File

@ -13,192 +13,192 @@ import {Icon,Tooltip} from 'antd';
// import "antd/dist/antd.css";
class TPMRightSection extends Component {
constructor(props) {
super(props)
this.state = {
TPMRightSection:false,
clickNewsubscripttype:false
}
}
// componentDidMount() {
// let id=this.props.match.params.shixunId;
//
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
//
// axios.get(shixunsDetailsURL).then((response)=> {
// if(response.status===200){
// this.setState({
// TPMRightSectionData: response.data
// });
// }
// }).catch((error)=>{
// console.log(error)
// });
// }
// shouldComponentUpdate(nextProps, nextState) {
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
// }
clickNewsubscript=(val)=>{
if(val===0){
this.setState({
TPMRightSection:true,
clickNewsubscripttype:true
})
}else{
this.setState({
TPMRightSection:false,
clickNewsubscripttype:false
})
}
}
render() {
let {TPMRightSection,clickNewsubscripttype}=this.state;
let {TPMRightSectionData}=this.props
return (
<div>
{
TPMRightSectionData===undefined?"":
<div>
<div className="edu-back-white padding40-20 mb10">
<p className="font-16 mb20">创建者</p>
<div className="df">
<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
</a>
<div className="flex1">
<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
<div className="clearfix">
<span>发布 {TPMRightSectionData.user_shixuns_count}</span>
{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
</div>
</div>
</div>
</div>
{
TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
<div className="clearfix" id="boxheight">
{ TPMRightSectionData.tags.map((item,key)=>{
return(
<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
key={key}>{item.tag_name}</span>
)})
}
</div>
</div>
<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}
data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
</div>
<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}
data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
</div>
</div>
}
<div className="padding20 edu-back-white mb10 mt10" style={{
display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
}}>
<p className="mb20 font-16 clearfix">所属课程</p>
<div className="recommend-list" >
{
TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{
return(
<div className="recomments clearfix df" key={k}>
<a href={"/paths/"+i.id} height="96" width="128" target="_blank">
<img alt="实训" height="96" src={"/"+i.image_url} width="128" />
</a>
<div className="ml10 flex1">
<a href={"/paths/"+i.id} target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"章节"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
</Tooltip>
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
{/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
</Tooltip>
</p>
</div>
</div>
)
})
}
</div>
</div>
<div className="padding20 edu-back-white"
style={{
display:
TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ||TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
}}
>
<p className="mb20 font-16 clearfix">推荐实训</p>
<div className="recommend-list">
{
TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{
return(
<div className="recomments clearfix df" key={key}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">
<img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/>
</a>
<div className="ml10 flex1">
<Tooltip placement="bottom" title={item.name}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
</Tooltip>
<p className="clearfix mt8 font-12 color-grey-B4">
{item.stu_num} 人学习
</p>
<p className="edu-txt-right color-orange pr10">{item.level}</p>
</div>
</div>
)
})
}
</div>
</div>
</div>
}
</div>
)
constructor(props) {
super(props)
this.state = {
TPMRightSection:false,
clickNewsubscripttype:false
}
}
// componentDidMount() {
// let id=this.props.match.params.shixunId;
//
// let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
//
// axios.get(shixunsDetailsURL).then((response)=> {
// if(response.status===200){
// this.setState({
// TPMRightSectionData: response.data
// });
// }
// }).catch((error)=>{
// console.log(error)
// });
// }
// shouldComponentUpdate(nextProps, nextState) {
// return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
// }
clickNewsubscript=(val)=>{
if(val===0){
this.setState({
TPMRightSection:true,
clickNewsubscripttype:true
})
}else{
this.setState({
TPMRightSection:false,
clickNewsubscripttype:false
})
}
}
render() {
let {TPMRightSection,clickNewsubscripttype}=this.state;
let {TPMRightSectionData}=this.props
return (
<div>
{
TPMRightSectionData===undefined?"":
<div>
<div className="edu-back-white padding40-20 mb10">
<p className="font-16 mb20">创建者</p>
<div className="df">
<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
</a>
<div className="flex1">
<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
<div className="clearfix">
<span>发布 {TPMRightSectionData.user_shixuns_count}</span>
{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
</div>
</div>
</div>
</div>
{
TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
<div className="edu-back-white padding40-20 mb10 relative">
<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
<div className="clearfix" id="boxheight">
{ TPMRightSectionData.tags.map((item,key)=>{
return(
<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
key={key}>{item.tag_name}</span>
)})
}
</div>
</div>
<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}
data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
</div>
<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}
data-tip-down="显示全部"
onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
</div>
</div>
}
<div className="padding20 edu-back-white mb10 mt10" style={{
display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
}}>
<p className="mb20 font-16 clearfix">相关实践课程</p>
<div className="recommend-list" >
{
TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{
return(
<div className="recomments clearfix df" key={k}>
<a href={"/paths/"+i.id} height="96" width="128" target="_blank">
<img alt="实训" height="96" src={"/"+i.image_url} width="128" />
</a>
<div className="ml10 flex1">
<a href={"/paths/"+i.id} target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"章节"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
</Tooltip>
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
{/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
</Tooltip>
</p>
</div>
</div>
)
})
}
</div>
</div>
<div className="padding20 edu-back-white"
style={{
display:
TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ? "none" : "block"
}}
>
<p className="mb20 font-16 clearfix">推荐实训</p>
<div className="recommend-list">
{
TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{
return(
<div className="recomments clearfix df" key={key}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">
<img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/>
</a>
<div className="ml10 flex1">
<Tooltip placement="bottom" title={item.name}>
<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank" className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
</Tooltip>
<p className="clearfix mt8 font-12 color-grey-B4">
{item.stu_num} 人学习
</p>
<p className="edu-txt-right color-orange pr10">{item.level}</p>
</div>
</div>
)
})
}
</div>
</div>
</div>
}
</div>
)
}
}
}
export default TPMRightSection;

Write Preview
Loading…
Cancel
Save