@ -1,10 +1,12 @@
import React , { Component } from 'react' ; import React , { Component } from 'react' ;
import axios from 'axios' ; import axios from 'axios' ;
import { SnackbarHOC , WordsBtn , getImageUrl , markdownToHTML } from 'educoder' ; import { SnackbarHOC , WordsBtn , getImageUrl , markdownToHTML } from 'educoder' ;
import { Row , Col , Input , Divider , Card , Button from 'antd' ; import { Row , Col , Input , Divider , Card , Button ,Pagination , Breadcrumb , Icon , Spin } from 'antd' ;
import { TPMIndexHOC } from '../tpm/TPMIndexHOC' ; import { TPMIndexHOC } from '../tpm/TPMIndexHOC' ;
import { CNotificationHOC } from '../courses/common/CNotificationHOC' ; import { CNotificationHOC } from '../courses/common/CNotificationHOC' ;
import Osshackathonmd from './Osshackathonmd' ;
import './Osshackathon.css' ; import './Osshackathon.css' ;
import Osshackathonmodel from "./Osshackathonmodel" ;
const { Search } = Input ; const { Search } = Input ;
class Osshackathon extends Component { class Osshackathon extends Component {
@ -14,16 +16,22 @@ class Osshackathon extends Component {
page : 1 ,
page : 1 ,
limit : 10 ,
limit : 10 ,
search : undefined ,
search : undefined ,
data : undefined
data : undefined ,
hackathonedit : false ,
Osshackathonmodeltype : false ,
spinning : false ,
}
}
}
}
componentDidMount ( ) {
componentDidMount ( ) {
this . getosshackathon ( ) ;
this . getosshackathon list ( ) ;
window . document . title = '竞赛报名' ;
}
}
getosshackathon = ( ) => {
let { page , limit , search } = this . state ;
getosshackathon = ( page , limit , search ) => {
this . setState ( {
spinning : true
} )
let url = ` /osshackathon.json ` ;
let url = ` /osshackathon.json ` ;
axios . get ( url , { params : {
axios . get ( url , { params : {
page : page ,
page : page ,
@ -33,22 +41,150 @@ class Osshackathon extends Component {
if ( result . status == 200 ) {
if ( result . status == 200 ) {
console . log ( result )
console . log ( result )
this . setState ( {
this . setState ( {
data : result . data
data : result . data ,
spinning : false
} )
} )
}
}
} ) . catch ( ( error ) => {
} ) . catch ( ( error ) => {
console . log ( error ) ;
console . log ( 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 ) => {
componentDidUpdate = ( prevProps ) => {
}
}
PaginationTask = ( pageNumber ) => {
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 ) => {
// 用户报名
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 ) => {
// 管理员编辑项目
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 ) => {
// 管理员删除项目
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 ) => {
this . setState ( {
search : value
} )
let { page , limit , search } = this . state ;
this . getosshackathon ( page , limit , value )
}
onsetsearchvalue = ( e ) => {
this . setState ( {
search : e . target . value
} )
}
render ( ) {
render ( ) {
let { data } = this . state ;
let { page, data, hackathonedit } = this . state ;
console . log ( this . state . data )
return (
return (
< div className = "newMain clearfix newMainybot" >
< div className = "newMain clearfix newMainybot" >
@ -59,6 +195,11 @@ class Osshackathon extends Component {
background : # 4 CACFF ;
background : # 4 CACFF ;
border - color : # 4 CACFF ;
border - color : # 4 CACFF ;
}
}
. ant - btn - primary : hover , . ant - btn - primary : focus {
color : # 4 CACFF ;
background - color : # 40 a9ff ;
border - color : # 40 a9ff ;
}
`
`
}
}
< / s t y l e >
< / s t y l e >
@ -68,16 +209,18 @@ class Osshackathon extends Component {
< div className = "registrationback"
< div className = "registrationback"
style = { { "background" : ` url( ${ getImageUrl ( ` images/educoder/competitions/tipregistit.jpg ` ) } ) ` , "height" : "360px" } }
style = { { "background" : ` url( ${ getImageUrl ( ` images/educoder/competitions/tipregistit.jpg ` ) } ) ` , "height" : "360px" } }
> < / d i v >
> < / d i v >
< Spin spinning = { this . state . spinning } >
< Row className = { "mt20" } >
{ this . props . user && this . props . user . admin === true ? < Row className = { "mt20" } >
< Col span = { 6 } >
< Col span = { 6 } >
< Search
< Search
className = { " Searchant -btn-primary"}
className = { " Osshackathon -btn-primary"}
placeholder = "请输入项目名称进行搜索"
placeholder = "请输入项目名称进行搜索"
enterButton = "搜索"
enterButton = "搜索"
size = "large"
size = "large"
onSearch = { value => console . log ( value ) }
value = { this . state . search }
onInput = { ( e ) => this . onsetsearchvalue ( e ) }
onSearch = { value => this . onsearchvalue ( value ) }
/ >
/ >
< / C o l >
< / C o l >
@ -87,17 +230,17 @@ class Osshackathon extends Component {
< / d i v >
< / d i v >
< / C o l >
< / C o l >
< / R o w >
< / R o w > : " " }
< Row className = { "mt20" } >
{ hackathonedit === true ? "" : < Row className = { "mt20" } >
< Col span = { 6 } className = { "Osshackathonfont" } >
< Col span = { 6 } className = { "Osshackathonfont" } >
{ data && data . hackathon . name }
{ data && data . hackathon . name }
< / C o l >
< / C o l >
< Col span = { 3 } className = { "fr textright" } >
{ this . props . user && this . props . user . admin === true ? < Col span = { 3 } className = { "fr textright" } >
< Button type = "primary" > 编辑 < / B u t t o n >
< Button type = "primary" className = { "OsshackprimaryButtonsyle" } onClick = { ( ) => this . hackathonedit ( data && data . hackathon . id ) } > 编辑 < / B u t t o n >
< / C o l >
< / C o l > : " " }
< / R o w >
< / R o w > }
< style >
{ hackathonedit === true ? "" : < style >
{
{
`
`
. ant - divider - horizontal {
. ant - divider - horizontal {
@ -105,59 +248,126 @@ class Osshackathon extends Component {
}
}
`
`
}
}
< / s t y l e >
< / s t y l e > }
< Divider / >
{ hackathonedit === true ? "" : < Divider / > }
< p className = { "Osshackathonfontlist mb30" } >
{ hackathonedit === true ? "" : < p className = { "Osshackathonfontlist mb30" } >
{ data && data . hackathon . description === null ? "" : < div className = { "markdown-body" }
{ data && data . hackathon . description === null ? "" : < div className = { "markdown-body" }
dangerouslySetInnerHTML = { { _ _html : markdownToHTML ( data && data . hackathon . description ) . replace ( /▁/g , "▁▁▁" ) } } > < / d i v > }
dangerouslySetInnerHTML = { { _ _html : markdownToHTML ( data && data . hackathon . description ) . replace ( /▁/g , "▁▁▁" ) } } > < / d i v > }
< / p >
< / p > }
{ 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" } >
< Col span = { 8 } > < / C o l >
< Col span = { 8 } > < Button type = "primary" className = { "OsshackprimaryButton OsshackprimaryButtonsyle" } onClick = { ( ) => this . editSignupentry ( ) } > < Icon type = "plus" / > 新建项目 < / B u t t o n > < / C o l >
< Col span = { 8 } > < / C o l >
< / R o w > : " " }
{ /*学生身份*/ }
{
{
data && data . hacks . length == 0 ? "" : data && data . hacks . map ( ( item , key ) => {
this . props . user && this . props . user . admin === false ? data && data . hacks . length == 0 ? "" : data && data . hacks . map ( ( item , key ) => {
return (
return (
< span > < / s p a n >
< Card className = { "OsshackathonCard mb20" } key = { key } >
)
} )
}
{ /*学生身份*/ }
< Card className = { "OsshackathonCard mb20" } >
< Row >
< Row >
< Col span = { 6 } className = { "OsshackathonCardtitle" } >
< Col span = { 6 } className = { "OsshackathonCardtitle" } >
大赛介绍
{ item . name }
< / C o l >
< / C o l >
< Col span = { 6 } className = { "fr textright" } >
< Col span = { 6 } className = { "fr textright" } >
< Button type = "primary fr " > 立即报名 < / B u t t o n >
{ item . entry _info === true ? < Button type = "primary fr mr20" disabled >
< Button type = "primary fr mr20" disabled >
已报名
已报名
< / B u t t o n >
< / B u t t o n > : < B u t t o n t y p e = " p r i m a r y f r i s s i g n u p " o n C l i c k = { ( ) = > t h i s . S i g n u p e n t r y ( i t e m . i d ) } > 立 即 报 名 < / B u t t o n > }
< / C o l >
< / C o l >
< / R o w >
< / R o w >
< p className = { "mt20" } > { item . description } < / p >
< p > Card content < / p >
< p > Card content < / p >
< / C a r d >
< / C a r d >
)
} ) : ""
}
{ /*教师身份*/ }
< Card className = { "OsshackathonCard" } >
{ /*教师身份*/ }
{ this . props . user && this . props . user . admin === true ? < style >
{
`
. ant - col - pull - 6 {
right : 17 % ;
}
. ant - col - 18 {
width : 82 % ;
}
. CompetitionsIndexbottomvalue {
text - align : center ;
}
`
}
< / s t y l e > : " " }
{
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 >
< Row >
< Col span = { 6 } className = { "OsshackathonCardtitle" } >
< Col span = { 6 } className = { "OsshackathonCardtitle" } >
大赛介绍
{ item . name }
< / C o l >
< / C o l >
< Col span = { 6 } className = { "fr textright" } >
< Col span = { 4} className = { "fr textcenter width14bai "} >
< Button type = "primary fr " > 立即报名 < / B u t t o n >
< Breadcrumb separator = "｜ >
< Button type = "primary fr mr20" disabled >
< Breadcrumb . Item className = { "Breadcrumbfont iscursor" } onClick = { ( ) => this . editSignupentry ( item . id , item . name , item . description ) } > 编辑 < / B r e a d c r u m b . I t e m >
已报名
< Breadcrumb . Item className = { "Breadcrumbfont iscursor" } onClick = { ( ) => this . delSignupentry ( item . id ) } > 删除 < / B r e a d c r u m b . I t e m >
< / B u t t o n >
< / B r e a d c r u m b >
< / C o l >
< / C o l >
< / R o w >
< / R o w >
< p > Card content < / p >
< p > Card content < / p >
< 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 } < / d i v >
< / C o l >
< / R o w >
< Row gutter = { 16 } >
< Col className = "gutter-row" span = { 15 } >
< div className = "gutter-box CompetitionsIndexbottomvalue" > 报名数 < / d i v >
< / C o l >
< / R o w >
< / d i v >
< / C o l >
< Col span = { 18 } pull = { 6 } className = { "minheight50px " } >
{ item . description }
< / C o l >
< / R o w >
< / C a r d >
< / C a r d >
) } ) : ""
}
{ 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 }
/ >
< / d i v > : " " }
< / S p i n >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
