forked from Gitlink/forgeplus-react
451 lines
11 KiB
JavaScript
451 lines
11 KiB
JavaScript
import React, {Component} from 'react';
|
||
import axios from 'axios';
|
||
import {SnackbarHOC, WordsBtn,getImageUrl,markdownToHTML} from 'educoder';
|
||
import {Row, Col,Input,Divider,Card,Button,Pagination,Breadcrumb,Icon,Spin} from 'antd';
|
||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||
import { CNotificationHOC } from '../courses/common/CNotificationHOC';
|
||
import Osshackathonmd from './Osshackathonmd';
|
||
import './Osshackathon.css';
|
||
import Osshackathonmodel from "./Osshackathonmodel";
|
||
const { Search } = Input;
|
||
class Osshackathon extends Component {
|
||
|
||
constructor(props) {
|
||
super(props)
|
||
this.state = {
|
||
page:1,
|
||
limit:10,
|
||
search:undefined,
|
||
data:undefined,
|
||
hackathonedit:false,
|
||
Osshackathonmodeltype:false,
|
||
spinning:false,
|
||
opentitletype:true,
|
||
boxoffsetHeigh:0
|
||
}
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.getosshackathonlist();
|
||
window.document.title = '竞赛报名';
|
||
}
|
||
|
||
getosshackathon=(page,limit,search)=>{
|
||
this.setState({
|
||
spinning:true
|
||
})
|
||
let url=`/osshackathon.json`;
|
||
axios.get(url,{params:{
|
||
page:page,
|
||
limit:limit,
|
||
search:search,
|
||
}}).then((result)=>{
|
||
if(result.status==200){
|
||
this.setState({
|
||
data:result.data,
|
||
spinning:false
|
||
})
|
||
}else{
|
||
this.setState({
|
||
spinning:false
|
||
})
|
||
}
|
||
}).catch((error)=>{
|
||
this.setState({
|
||
spinning:true
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
|
||
getosshackathonlist=()=>{
|
||
let {page,limit,search}=this.state;
|
||
this.setState({
|
||
page:1,
|
||
search:undefined
|
||
})
|
||
this.getosshackathon(1,limit,undefined)
|
||
}
|
||
|
||
|
||
componentDidUpdate = (prevProps,prevState) => {
|
||
if(prevState.data!=this.state.data){
|
||
//防止陷入无限循环
|
||
let box=document.getElementById("Osshackathonfontlists");
|
||
if(box){
|
||
this.setState({
|
||
boxoffsetHeigh:box.offsetHeight
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
PaginationTask=(pageNumber)=>{
|
||
let {hackathonedit}=this.state;
|
||
if(hackathonedit===true){
|
||
this.props.showNotification(`请先保存或者关闭编辑状态`);
|
||
}else {
|
||
this.setState({
|
||
page: pageNumber
|
||
})
|
||
let {page, limit, search} = this.state;
|
||
this.getosshackathon(pageNumber, limit, search)
|
||
}
|
||
}
|
||
|
||
hackathonedit=(id)=>{
|
||
//管理员编辑title
|
||
this.setState({
|
||
hackathonedit:true
|
||
})
|
||
}
|
||
|
||
hidehackathonedit=()=>{
|
||
this.setState({
|
||
hackathonedit:false
|
||
})
|
||
}
|
||
|
||
Signupentry=(id)=>{
|
||
// 用户报名
|
||
if(this.props.checkIfLogin()===false){
|
||
this.props.showLoginDialog()
|
||
return
|
||
}
|
||
if(this.props.checkIfProfileCompleted()===false){
|
||
this.props.showProfileCompleteDialog()
|
||
return
|
||
}
|
||
//判断是否绑定邮箱
|
||
|
||
if(this.props.user.email===null&&this.props.user.phone===null){
|
||
this.props.showhideAccountPhoneemailDialog()
|
||
return
|
||
}
|
||
|
||
this.props.confirm({
|
||
content: `是否确认报名?`,
|
||
onOk: () => {
|
||
this.Signupentrys(id)
|
||
}
|
||
})
|
||
|
||
|
||
}
|
||
Signupentrys=(id)=>{
|
||
let url=`/osshackathon/${id}/entry.json`;
|
||
axios.post(url
|
||
).then((response) => {
|
||
if(response.data.status===0){
|
||
this.getosshackathonlist()
|
||
this.props.showNotification(`报名成功，预祝您夺得桂冠`);
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
|
||
editSignupentry=(id,name,description)=>{
|
||
let {hackathonedit}=this.state;
|
||
if(hackathonedit===true){
|
||
this.props.showNotification(`请先保存或者关闭编辑状态`);
|
||
}else{
|
||
// 管理员编辑项目
|
||
this.setState({
|
||
Osshackathonmodeltype:true
|
||
})
|
||
if(id===undefined){
|
||
this.setState({
|
||
modelid:undefined,
|
||
modelname:undefined,
|
||
modeldescription:undefined
|
||
})
|
||
}else{
|
||
this.setState({
|
||
modelid:id,
|
||
modelname:name,
|
||
modeldescription:description
|
||
})
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
hideeditSignupentry=(id)=>{
|
||
// 管理员取消项目
|
||
this.setState({
|
||
Osshackathonmodeltype:false
|
||
})
|
||
}
|
||
|
||
|
||
delSignupentry=(id)=>{
|
||
// 管理员删除项目
|
||
let {hackathonedit}=this.state;
|
||
if(hackathonedit===true){
|
||
this.props.showNotification(`请先保存或者关闭编辑状态`);
|
||
}else {
|
||
this.props.confirm({
|
||
content: `是否确认删除该项目?`,
|
||
onOk: () => {
|
||
this.delSignupentrys(id)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
delSignupentrys=(id)=>{
|
||
let url=`/osshackathon/${id}.json`;
|
||
axios.delete(url)
|
||
.then((response) => {
|
||
if (response.data.status == 0) {
|
||
// {"status":1,"message":"删除成功"}
|
||
this.getosshackathonlist();
|
||
this.props.showNotification(`删除成功`);
|
||
}
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
|
||
}
|
||
|
||
|
||
onsearchvalue=(value)=>{
|
||
let {hackathonedit}=this.state;
|
||
if(hackathonedit===true){
|
||
this.props.showNotification(`请先保存或者关闭编辑状态`);
|
||
}else {
|
||
this.setState({
|
||
search:value
|
||
})
|
||
if(value.length>300){
|
||
this.props.showNotification(`搜索字数大于300个字`);
|
||
}
|
||
let {page,limit,search}=this.state;
|
||
this.getosshackathon(page,limit,value)
|
||
}
|
||
|
||
}
|
||
|
||
onsetsearchvalue=(e)=>{
|
||
|
||
this.setState({
|
||
search:e.target.value
|
||
})
|
||
}
|
||
|
||
opentitle=()=>{
|
||
this.setState({
|
||
opentitletype:false
|
||
})
|
||
}
|
||
render() {
|
||
let {page,data,hackathonedit,opentitletype}=this.state;
|
||
|
||
return (
|
||
<div className="newMain clearfix newMainybot">
|
||
<style>
|
||
{
|
||
`
|
||
.ant-btn-primary{
|
||
background: #4CACFF;
|
||
border-color: #4CACFF;
|
||
}
|
||
.ant-btn-primary:hover, .ant-btn-primary:focus {
|
||
color: #4CACFF;
|
||
background-color: #40a9ff;
|
||
border-color: #40a9ff;
|
||
}
|
||
`
|
||
}
|
||
</style>
|
||
|
||
<div className={"educontent mb60 persmstyle"} style={{width: "1200px", marginTop: "26px"}}>
|
||
|
||
<div className="registrationback"
|
||
style={{"background": `url(${getImageUrl(`images/educoder/competitions/heikesong.jpg`)})`,"height":"360px"}}
|
||
></div>
|
||
<Spin spinning={this.state.spinning}>
|
||
{this.props.user&&this.props.user.admin===true?<Row className={"mt20"}>
|
||
|
||
<Col span={6}>
|
||
<Search
|
||
className={"Osshackathon-btn-primary"}
|
||
placeholder="请输入项目名称进行搜索"
|
||
enterButton="搜索"
|
||
size="large"
|
||
value={this.state.search}
|
||
onInput={(e)=>this.onsetsearchvalue(e)}
|
||
onSearch={value => this.onsearchvalue(value)}
|
||
/>
|
||
</Col>
|
||
|
||
<Col span={3} className={"fr textright"}>
|
||
<div>
|
||
报名总数：<span className={"color-red"}>{data&&data.hackathon.hackathon_users_count}</span> 个
|
||
</div>
|
||
</Col>
|
||
|
||
</Row>:""}
|
||
|
||
{hackathonedit===true?"":<Row className={"mt20"}>
|
||
<Col span={6} className={"Osshackathonfont"}>
|
||
{data&&data.hackathon.name}
|
||
</Col>
|
||
{this.props.user&&this.props.user.admin===true?<Col span={3} className={"fr textright"}>
|
||
<Button type="primary" className={"OsshackprimaryButtonsyle"} onClick={()=>this.hackathonedit(data&&data.hackathon.id)}>编辑</Button>
|
||
</Col>:""}
|
||
</Row>}
|
||
{hackathonedit===true?"": <style>
|
||
{
|
||
`
|
||
.ant-divider-horizontal{
|
||
margin: 19px 0;
|
||
}
|
||
`
|
||
}
|
||
</style>}
|
||
|
||
{hackathonedit===true?"":<Divider />}
|
||
|
||
{opentitletype===true?<style>
|
||
{
|
||
`
|
||
.Osshackathonfontlist{
|
||
max-height: 180px;
|
||
overflow: hidden;
|
||
}
|
||
`
|
||
}
|
||
</style>:""}
|
||
{hackathonedit===true?"":<p className={"Osshackathonfontlist mb30"} id={"Osshackathonfontlists"}>
|
||
{data&&data.hackathon.description===null?"":<div className={"markdown-body"}
|
||
dangerouslySetInnerHTML={{__html: markdownToHTML(data&&data.hackathon.description).replace(/▁/g, "▁▁▁")}}></div>}
|
||
</p>}
|
||
|
||
{opentitletype===true&&this.state.boxoffsetHeigh===180?<Divider dashed={true} onClick={()=>this.opentitle()} className={"pointer Breadcrumbfont"}>展开阅读全文<Icon type="down" /></Divider>:""}
|
||
|
||
{hackathonedit===true?<Osshackathonmd
|
||
getosshackathon={()=>this.getosshackathonlist()}
|
||
hidehackathonedit={()=>this.hidehackathonedit()}
|
||
{...this.props}
|
||
{...this.state}
|
||
/>:""}
|
||
{this.state.Osshackathonmodeltype===true?<Osshackathonmodel
|
||
getosshackathon={()=>this.getosshackathonlist()}
|
||
hideeditSignupentry={()=>this.hideeditSignupentry()}
|
||
{...this.props}
|
||
{...this.state}
|
||
/>:""}
|
||
{this.props.user&&this.props.user.admin===true?<Row className={"mb20 mt30"}>
|
||
<Col span={8}></Col>
|
||
<Col span={8}><Button type="primary" className={"OsshackprimaryButton OsshackprimaryButtonsyle"} onClick={()=>this.editSignupentry()}><Icon type="plus" />新建项目</Button></Col>
|
||
<Col span={8}></Col>
|
||
</Row>:""}
|
||
{/*学生身份*/}
|
||
{
|
||
this.props.user&&this.props.user.admin===false?data&&data.hacks.length==0?"":data&&data.hacks.map((item,key)=>{
|
||
return(
|
||
<Card className={"OsshackathonCard mb20"} key={key}>
|
||
<Row>
|
||
<Col span={20} className={"OsshackathonCardtitle"}>
|
||
{item.name}
|
||
</Col>
|
||
|
||
<Col span={6} className={"fr textright"}>
|
||
<span style={{"line-height":"30px","margin-right": "30px"}}>报名人数：{item.hack_users_count}</span>
|
||
{item.entry_info===true?<Button type="primary fr mr20" disabled>
|
||
已报名
|
||
</Button>:<Button type="primary fr issignup" onClick={()=>this.Signupentry(item.id)}>立即报名</Button>}
|
||
</Col>
|
||
</Row>
|
||
<p className={"mt20"}>{item.description}</p>
|
||
</Card>
|
||
)
|
||
}):""
|
||
}
|
||
|
||
|
||
|
||
{/*教师身份*/}
|
||
{this.props.user&&this.props.user.admin===true?<style>
|
||
{
|
||
`
|
||
.ant-col-pull-6 {
|
||
right: 17%;
|
||
}
|
||
.ant-col-18 {
|
||
width: 82%;
|
||
}
|
||
.CompetitionsIndexbottomvalue{
|
||
text-align: center;
|
||
}
|
||
`
|
||
}
|
||
</style>:""}
|
||
{
|
||
this.props.user&&this.props.user.admin===true?data&&data.hacks.length==0?"":data&&data.hacks.map((item,key)=>{
|
||
return(
|
||
<Card className={"OsshackathonCard mb20"}>
|
||
<Row>
|
||
<Col span={20} className={"OsshackathonCardtitle"}>
|
||
{item.name}
|
||
</Col>
|
||
<Col span={4} className={"fr textcenter width14bai"}>
|
||
<Breadcrumb separator="｜">
|
||
<Breadcrumb.Item className={"Breadcrumbfont iscursor"} onClick={()=>this.editSignupentry(item.id,item.name,item.description)}>编辑</Breadcrumb.Item>
|
||
<Breadcrumb.Item className={"Breadcrumbfont iscursor"} onClick={()=>this.delSignupentry(item.id)}>删除</Breadcrumb.Item>
|
||
</Breadcrumb>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row className={"mt20"}>
|
||
<Col span={4} push={20} className={"minheight50px borderDEDEDE"}>
|
||
<div className={"pl80pt6"}>
|
||
<Row gutter={16}>
|
||
<Col className="gutter-row" span={15}>
|
||
<div className="gutter-box Osshackprimaryfonttop">{item.hack_users_count}</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row gutter={16}>
|
||
<Col className="gutter-row" span={15}>
|
||
<div className="gutter-box CompetitionsIndexbottomvalue">报名数</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</Col>
|
||
<Col span={18} pull={6} className={"minheight50px ml5"}>
|
||
{item.description}
|
||
</Col>
|
||
</Row>
|
||
|
||
|
||
</Card>
|
||
)}):""
|
||
}
|
||
|
||
|
||
{data&&data.hacks_count>10?data&&data.hacks.length===0?"":<div className="mb40 edu-txt-center padding20-30" >
|
||
<Pagination
|
||
showQuickJumper
|
||
defaultCurrent={1}
|
||
pageSize={10}
|
||
total={data&&data.hacks_count}
|
||
current={page}
|
||
onChange={this.PaginationTask}
|
||
/>
|
||
</div>:""}
|
||
</Spin>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
export default CNotificationHOC() (TPMIndexHOC (Osshackathon)) ; |