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

fix home bug

Browse Source
dev_aliyun2
harry 5 years ago
parent 42cbb4dbe6
commit 559926ebfa
9 changed files with 294 additions and 233 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/App.js
Unescape View File

@ -110,7 +110,7 @@ const Newshixuns = Loadable({
//实训首页 //实训首页
const ShixunsHome = Loadable({ const ShixunsHome = Loadable({
loader: () => import('./modules/home/shixunsHome'), loader: () => import('./modules/home'),
loading: Loading, loading: Loading,
}) })

7
public/react/src/components/loading.jsx
Unescape View File

@ -1,5 +1,10 @@
import React from 'react' import React from 'react'
import './loading.less'
export default () => { export default () => {
return <div className="loading">loading ...</div> return <div className="loading-tip">
<p>
loading ...
</p>
</div>
} }

9
public/react/src/components/loading.less
Unescape View File

@ -0,0 +1,9 @@
.loading-tip {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
height: 100%;
background: #213857;
color: #fff;
}

86
public/react/src/modules/home/index.jsx
Unescape View File

@ -1,10 +1,84 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState, Fragment } from 'react'
import axios from 'axios'
import UpgradeModals from '../modals/UpgradeModals'
import Loading from '../../components/loading'
import ShixunCardList from '../../components/shixun-card-list'
import TPMIndexHOC from '../tpm/TPMIndexHOC'
import ListContainer from './list-container'
import { SnackbarHOC, getImageUrl, configShareForIndex } from 'educoder'
import ShixunPathCard from '../paths/ShixunPathCard'
export default () => { function Home({ mygetHelmetapi }) {
return ( const [resource, setResource] = useState({
<div className="shixun-home"> loading: true,
data: {},
updata: null
})
useEffect(() => {
async function init() {
const sys = await axios.get('/users/system_update.json')
const home = await axios.get('/home/index.json')
setResource({
...resource,
loading: false,
updata: sys.data,
data: home.data
})
}
try {
init()
} catch (error) {
console.log(error, '---in home init-----')
}
}, [])
let shixuntype = false
let pathstype = false
if (mygetHelmetapi) {
let shixun = "/shixuns";
let paths = "/paths";
mygetHelmetapi.navbar.map(item => {
var reg = RegExp(item.link)
if (shixun.match(reg)) {
if (item.hidden === true) {
shixuntype = true
}
}
if (paths.match(reg)) {
if (item.hidden === true) {
pathstype = true
}
}
})
}
</div> const { loading, updata, data } = resource
const { shixuns, subjects } = data
return (
<Fragment>
{loading ? <Loading /> :
<div className="shixun-home newMain clearfix">
{updata ? <UpgradeModals updata={updata} /> : null}
{pathstype || subjects.length > 0 ?
<ListContainer to="/paths" title='实践课程' titleEn='TRAINING COURSE' >
<ShixunPathCard pathList={subjects} />
</ListContainer >
: null}
{
(shixuntype || shixuns.length > 0) ?
<ListContainer to="/shixuns" title='实训项目' titleEn='DEVELOPMENT COMMUNITY' >
<ShixunCardList list={shixuns} />
</ListContainer >
: null
}
</div>
}
</Fragment>
) )
} }
export default SnackbarHOC()(TPMIndexHOC(Home))

17
public/react/src/modules/home/list-container.jsx
Unescape View File

@ -0,0 +1,17 @@
import React from 'react'
import { Link } from "react-router-dom"
export default ({ children, title, titleEn, to }) => {
return (
<div className="clearfix pt20 educontent pr pb20 ">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>{title}</p>
<p className="color-grey-cd font-12">{titleEn}</p>
</div>
<Link to={to} className="moreitem mr18">更多<i className="fa fa-angle-right ml5"></i></Link>
<div className="square-list clearfix">
{children}
</div>
</div>
)
}

151
public/react/src/modules/home/shixunsHome.js
Unescape View File

@ -303,17 +303,18 @@ class ShixunsHome extends Component {
</div>} </div>}
{/*精选实训 改为 开发社区*/} {/*精选实训 改为 开发社区*/}
{shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" : <div className="clearfix pt20 educontent pr pb20 mb20"> {shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" :
<div className="edu-txt-center"> <div className="clearfix pt20 educontent pr pb20 mb20">
<p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>实训项目</p> <div className="edu-txt-center">
<p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p> <p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>实训项目</p>
</div> <p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
<Link to={"/shixuns"} className="moreitem mr18">更多<i className="fa fa-angle-right ml5"></i></Link> </div>
<Link to={"/shixuns"} className="moreitem mr18">更多<i className="fa fa-angle-right ml5"></i></Link>
<div className="square-list clearfix" style={{ 'width': '100%', 'padding-left': '25px' }}>
<style> <div className="square-list clearfix" style={{ 'width': '100%', 'padding-left': '25px' }}>
{ <style>
` {
`
.taglistleft{ .taglistleft{
position: absolute; position: absolute;
left: 10px; left: 10px;
@ -351,79 +352,79 @@ class ShixunsHome extends Component {
justify-content: center; justify-content: center;
} }
` `
} }
</style> </style>
{homedatalist === undefined ? "" : homedatalist.shixuns.map((item, key) => { {homedatalist === undefined ? "" : homedatalist.shixuns.map((item, key) => {
return ( return (
<div className="square-Item" key={key} id={item.id} style={{ 'width': '286px', 'marginRight': '20px' }}> <div className="square-Item" key={key} id={item.id} style={{ 'width': '286px', 'marginRight': '20px' }}>
<div className="tag-green taglistleft">
<span className="tag-name"> {item.tag_name}</span>
{/*<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>*/}
</div>
{
item.is_jupyter === true ?
<div className="tag-org">
<p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
{/*<img style={{display:'block',height: '28px'}} src={require(`./shixunCss/tag2.png`)}/>*/}
</div>
: ""}
<div className={item.power === false ? "closeSquare" : "none"}>
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
className="mt80 mb25" />
<p className="font-14 color-white">非试用内容，需要授权</p>
</div>
<Link to={"/shixuns/" + item.identifier + "/challenges"} <div className="tag-green taglistleft">
target="_blank" <span className="tag-name"> {item.tag_name}</span>
className="square-img"> {/*<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>*/}
<img src={item.pic} /> </div>
</Link> {
item.is_jupyter === true ?
<div className="square-main"> <div className="tag-org">
<p className="task-hide"> <p className="tag-org-name intermediatecenter"> <span className="tag-org-name-test">Jupyter</span></p>
<Link to={"/shixuns/" + item.identifier + "/challenges"} {/*<img style={{display:'block',height: '28px'}} src={require(`./shixunCss/tag2.png`)}/>*/}
target="_blank" </div>
title={item.name} : ""}
className="justify color-grey-name"> <div className={item.power === false ? "closeSquare" : "none"}>
{item.name} <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
</Link> className="mt80 mb25" />
</p> <p className="font-14 color-white">非试用内容，需要授权</p>
</div>
<p className="clearfix mt8 ml-3">
<span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
<MyRate key={key} allowHalf defaultValue={item.score_info === null ? 5 : item.score_info} disabled />
</span>
<span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info === null ? "5分" : item.score_info + "分"}</span>
</p>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"关卡"}>
<span className="mr10 fl squareIconSpan">
<i className="iconfont icon-shixunguanqia fl mr3" ></i>{item.challenges_count}
</span>
</Tooltip>
<Link to={"/shixuns/" + item.identifier + "/challenges"}
target="_blank"
className="square-img">
<img src={item.pic} />
</Link>
<div className="square-main">
<p className="task-hide">
<Link to={"/shixuns/" + item.identifier + "/challenges"}
target="_blank"
title={item.name}
className="justify color-grey-name">
{item.name}
</Link>
</p>
<Tooltip placement="bottom" title={"学习人数"}> <p className="clearfix mt8 ml-3">
<span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}> <span className="rateYoStar fl" style={{ padding: '0px', height: '20px', lineHeight: '19px', cursor: 'default' }} title="">
<i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num} <MyRate key={key} allowHalf defaultValue={item.score_info === null ? 5 : item.score_info} disabled />
</span> </span>
</Tooltip> <span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info === null ? "5分" : item.score_info + "分"}</span>
</p>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"关卡"}>
<span className="mr10 fl squareIconSpan">
<i className="iconfont icon-shixunguanqia fl mr3" ></i>{item.challenges_count}
</span>
</Tooltip>
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}>
<i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
</span>
</Tooltip>
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span> <span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
</p> </p>
</div>
</div> </div>
</div> )
) })
}) }
}
</div> </div>
</div>} </div>}
</div> </div>
</Spin> </Spin>

98
public/react/src/modules/modals/UpgradeModals.js
Unescape View File

@ -1,82 +1,72 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import {getImageUrl} from 'educoder'; import { Modal } from 'antd';
import { Spin, Icon , Modal} from 'antd';
import moment from 'moment'; import moment from 'moment';
class UpgradeModals extends Component { class UpgradeModals extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
system_updates:false system_updates: false
} }
} }
updatasmodals=()=>{ updatasmodals = () => {
let {updata} = this.props; let { updata } = this.props;
if(updata&&updata.system_update===true){ if (updata && updata.system_update === true) {
let SystemUpdateEndTime = localStorage.getItem('SystemUpdateEndTime'); let SystemUpdateEndTime = localStorage.getItem('SystemUpdateEndTime');
if(SystemUpdateEndTime===null){ if (SystemUpdateEndTime === null) {
this.setState({ this.setState({
system_updates:true system_updates: true
}) })
}else if(SystemUpdateEndTime===undefined){ } else if (SystemUpdateEndTime === undefined) {
this.setState({ this.setState({
system_updates:true system_updates: true
}) })
}else if(moment(SystemUpdateEndTime) < moment(updata.end_time)){ } else if (moment(SystemUpdateEndTime) < moment(updata.end_time)) {
this.setState({ this.setState({
system_updates:true system_updates: true
}) })
} }
} }
} }
componentDidMount() { componentDidMount() {
this.updatasmodals() this.updatasmodals()
} }
componentDidUpdate(prevProps){
// if (prevProps.data!=this.props.updata){
// this.updatasmodals()
// }
}
setmodalSave=()=>{ setmodalSave = () => {
let {updata}=this.props; let { updata } = this.props;
localStorage.setItem('SystemUpdateEndTime',updata.end_time); localStorage.setItem('SystemUpdateEndTime', updata.end_time);
this.setState({ this.setState({
system_updates:false system_updates: false
}) })
} }
render() { render() {
// const antIcons = <Icon type="loading" style={{ fontSize: 24 }} spin />
{/*<Spin indicator={antIcons} spinning={this.state.system_updates} >*/}
{/*</Spin>*/} let { system_updates } = this.state;
let {system_updates}=this.state; let { updata } = this.props;
let {updata}=this.props; return (
return( <Modal
<Modal keyboard={false}
keyboard={false} title={updata && updata.subject}
title={updata&&updata.subject} visible={system_updates}
visible={system_updates} closable={false}
// visible={this.props.modalsType===undefined?false:this.props.modalsType} footer={null}
closable={false} destroyOnClose={true}
footer={null} centered={true}
destroyOnClose={true} width="530px"
centered={true} >
width="530px" <div className="task-popup-content">
> <pre className="break-word break-word-firefox">{updata && updata.system_score}</pre>
<div className="task-popup-content"> <div className="clearfix edu-txt-center mt20">
<pre className="break-word break-word-firefox">{updata&&updata.system_score}</pre> <a className="task-btn task-btn-orange pop_close" onClick={() => this.setmodalSave()}>知道啦</a>
<div className="clearfix edu-txt-center mt20"> </div>
<a className="task-btn task-btn-orange pop_close" onClick={()=>this.setmodalSave()}>知道啦</a> </div>
</div> </Modal>
</div> )
</Modal> }
)
}
} }
export default UpgradeModals; export default UpgradeModals;

112
public/react/src/modules/paths/ShixunPathCard.js
Unescape View File

@ -1,86 +1,54 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import {getImageUrl , setImagesUrl } from 'educoder'; import { setImagesUrl } from 'educoder';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Tooltip} from 'antd';
import LoadingSpin from '../../common/LoadingSpin'; import LoadingSpin from '../../common/LoadingSpin';
import NodataPanel from '../../components/nodata-panel';
import './ShixunPaths.css';
class ShixunPathCard extends Component {
class ShixunPathCard extends Component{
constructor(props) { constructor(props) {
super(props) super(props)
} }
render(){ render() {
let {pathList}=this.props; let { pathList } = this.props;
return( return (
<div className="educontent" id="subjects_list_content"> <div className="educontent" id="subjects_list_content">
{ {
pathList===null?<LoadingSpin/> pathList === null ? <LoadingSpin />
: pathList && pathList.length > 0 ? : pathList && pathList.length > 0 ?
( (
<div className="square-list clearfix"> <div className="square-list clearfix">
{ {
pathList && pathList.map((item,key)=>{ pathList && pathList.map((item, key) => {
return (
return( <div className="squareCard" id={item.id} key={item.id}>
<div className="squareCard" id={"item_"+key}> {
{/* item.tag_name === null ? "" : item.excellent === false ? "" :
<div className="tag-green"> <div className="tag_open">
<span className="tag-name">{item.tag_name}</span> <span className="tag_open_name">开放课程</span>
<img src={getImageUrl('images/educoder/tag2.png')}/> </div>
</div> */} }
<Link to={"/paths/" + item.id} className="squareImg" >
{ <img alt="详情图片" src={setImagesUrl(item.image_url)} />
item.excellent === false ? "" : </Link>
<div className="tag_open"> <div className="mt20" style={{ marginLeft: "1px" }}>
<span className="tag_open_name">开放课程</span> <p className="task-hide mb10">
<Link to={"/paths/" + item.id} className="justify cardName">{item.name}</Link>
</p>
<p className="clearfix squareInfo">
<span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
<span className="fl">学习人数: {item.members_count}</span>
</p>
</div>
</div> </div>
} )
})
{/* <div className={item.allow_visit=== false ? "closeSquare" : "none"}> }
<img src={getImageUrl("images/educoder/icon/lockclose.svg")} </div>
className="mt80 mb25"/> ) : <NodataPanel />
<p className="font-14 color-white">非试用内容，需要授权</p>
</div> */}
<Link to={"/paths/"+item.id} className="squareImg" >
{/*target="_blank"*/}
<img alt="详情图片" src={setImagesUrl(item.image_url)}/>
</Link>
<div className="mt20" style={{marginLeft:"1px"}}>
<p className="task-hide mb10">
<Link to={"/paths/"+item.id} className="justify cardName">{item.name}</Link>
{/*target="_blank"*/}
</p>
<p className="clearfix squareInfo">
{/* <Tooltip placement="bottom" title={"章节"}> */}
{/* <i className="iconfont icon-shixun fl mr3"></i> */}
<span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
{/* </Tooltip> */}
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{item.shixuns_count}</span>*/}
{/*</Tooltip>*/}
{/* <Tooltip placement="bottom" title={"学习人数"}> */}
{/* <i className="iconfont icon-chengyuan fl mr3"></i> */}
<span className="fl">学习人数: {item.members_count}</span>
{/* </Tooltip> */}
</p>
</div>
</div>
)
})
}
</div>
):(
<div className="edu-tab-con-box clearfix edu-txt-center mb50">
<img className="edu-nodata-img mb20" src={getImageUrl("images/educoder/nodata.png")}/>
<p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
</div>
)
} }
</div> </div>
) )
} }

45
public/react/src/modules/tpm/TPMIndexHOC.js
Unescape View File

@ -10,6 +10,7 @@ import './TPMIndex.css';
import LoginDialog from '../login/LoginDialog'; import LoginDialog from '../login/LoginDialog';
import AccountProfile from '../user/AccountProfile'; import AccountProfile from '../user/AccountProfile';
import AccountPhoneemail from '../user/AccountPhoneemail'; import AccountPhoneemail from '../user/AccountPhoneemail';
import Loading from '../../Loading';
const $ = window.$; const $ = window.$;
@ -638,12 +639,11 @@ export default function TPMIndexHOC(WrappedComponent) {
.newContainers{ .newContainers{
min-width: 1200px; min-width: 1200px;
max-width: unset; max-width: unset;
height: 100%; margin: 0 auto;
min-height: 100%;
overflow: hidden; overflow: hidden;
position: realtive;
} }
.newHeaders{ .newHeaders{
// position: fixed;
max-width: unset; max-width: unset;
background: #24292D !important; background: #24292D !important;
width: 100%; width: 100%;
@ -675,27 +675,24 @@ export default function TPMIndexHOC(WrappedComponent) {
}</style> }</style>
<NewHeader {...this.state} {...this.props}></NewHeader> {this.state.globalLoading ? <Loading /> :
<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin" <React.Fragment>
size="large" <NewHeader {...this.state} {...this.props}></NewHeader>
tip={this._gLoadingTip || "加载中..."} <div className="newContainers">
> <WrappedComponent initCommonState={(user) => this.initCommonState(user)}
<div className="newContainer newContainers"> {...this.props} {...this.state}
<WrappedComponent initCommonState={(user) => this.initCommonState(user)} showShixun={this.showShixun} aboutFocus={this.aboutFocus}
{...this.props} {...this.state} {...common}
showShixun={this.showShixun} aboutFocus={this.aboutFocus} >
{...common} </WrappedComponent>
>
</WrappedComponent> </div>
<NewFooter
</div> {...this.state} {...this.props}
Footerdown={Footerdown}
</Spin> />
</React.Fragment>
<NewFooter }
{...this.state} {...this.props}
Footerdown={Footerdown}
/>
</div> </div>
); );

Write Preview
Loading…
Cancel
Save