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({
loader: () => import('./modules/home/shixunsHome'),
loader: () => import('./modules/home'),
loading: Loading,
})

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

@ -1,5 +1,10 @@
import React from 'react'
import './loading.less'
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 (
<div className="shixun-home">
const [resource, setResource] = useState({
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>}
{/*精选实训 改为 开发社区*/}
{shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" : <div className="clearfix pt20 educontent pr pb20 mb20">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>实训项目</p>
<p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
</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>
{
`
{shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" :
<div className="clearfix pt20 educontent pr pb20 mb20">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>实训项目</p>
<p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
</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>
{
`
.taglistleft{
position: absolute;
left: 10px;
@ -351,79 +352,79 @@ class ShixunsHome extends Component {
justify-content: center;
}
`
}
</style>
{homedatalist === undefined ? "" : homedatalist.shixuns.map((item, key) => {
return (
<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>
}
</style>
{homedatalist === undefined ? "" : homedatalist.shixuns.map((item, key) => {
return (
<div className="square-Item" key={key} id={item.id} style={{ 'width': '286px', 'marginRight': '20px' }}>
<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>
<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>
<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"}
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={"学习人数"}>
<span className="mr10 fl squareIconSpan" style={{ display: item.stu_num === 0 ? "none" : "block" }}>
<i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
<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>
</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>
</p>
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
</p>
</div>
</div>
</div>
)
})
}
)
})
}
</div>
</div>}
</div>
</div>}
</div>
</Spin>

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

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

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

@ -1,86 +1,54 @@
import React, { Component } from 'react';
import {getImageUrl , setImagesUrl } from 'educoder';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Tooltip} from 'antd';
import { setImagesUrl } from 'educoder';
import { Link } from "react-router-dom";
import LoadingSpin from '../../common/LoadingSpin';
import NodataPanel from '../../components/nodata-panel';
import './ShixunPaths.css';
class ShixunPathCard extends Component{
class ShixunPathCard extends Component {
constructor(props) {
super(props)
}
render(){
let {pathList}=this.props;
return(
render() {
let { pathList } = this.props;
return (
<div className="educontent" id="subjects_list_content">
{
pathList===null?<LoadingSpin/>
: pathList && pathList.length > 0 ?
(
<div className="square-list clearfix">
{
pathList && pathList.map((item,key)=>{
return(
<div className="squareCard" id={"item_"+key}>
{/* item.tag_name === null ? "" :
<div className="tag-green">
<span className="tag-name">{item.tag_name}</span>
<img src={getImageUrl('images/educoder/tag2.png')}/>
</div> */}
{
item.excellent === false ? "" :
<div className="tag_open">
<span className="tag_open_name">开放课程</span>
pathList === null ? <LoadingSpin />
: pathList && pathList.length > 0 ?
(
<div className="square-list clearfix">
{
pathList && pathList.map((item, key) => {
return (
<div className="squareCard" id={item.id} key={item.id}>
{
item.excellent === false ? "" :
<div className="tag_open">
<span className="tag_open_name">开放课程</span>
</div>
}
<Link to={"/paths/" + item.id} className="squareImg" >
<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>
</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 className={item.allow_visit=== false ? "closeSquare" : "none"}>
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
className="mt80 mb25"/>
<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>
) : <NodataPanel />
}
</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 AccountProfile from '../user/AccountProfile';
import AccountPhoneemail from '../user/AccountPhoneemail';
import Loading from '../../Loading';
const $ = window.$;
@ -638,12 +639,11 @@ export default function TPMIndexHOC(WrappedComponent) {
.newContainers{
min-width: 1200px;
max-width: unset;
height: 100%;
min-height: 100%;
margin: 0 auto;
overflow: hidden;
position: realtive;
}
.newHeaders{
// position: fixed;
max-width: unset;
background: #24292D !important;
width: 100%;
@ -675,27 +675,24 @@ export default function TPMIndexHOC(WrappedComponent) {
}</style>
<NewHeader {...this.state} {...this.props}></NewHeader>
<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin"
size="large"
tip={this._gLoadingTip || "加载中..."}
>
<div className="newContainer newContainers">
<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
{...this.props} {...this.state}
showShixun={this.showShixun} aboutFocus={this.aboutFocus}
{...common}
>
</WrappedComponent>
</div>
</Spin>
<NewFooter
{...this.state} {...this.props}
Footerdown={Footerdown}
/>
{this.state.globalLoading ? <Loading /> :
<React.Fragment>
<NewHeader {...this.state} {...this.props}></NewHeader>
<div className="newContainers">
<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
{...this.props} {...this.state}
showShixun={this.showShixun} aboutFocus={this.aboutFocus}
{...common}
>
</WrappedComponent>
</div>
<NewFooter
{...this.state} {...this.props}
Footerdown={Footerdown}
/>
</React.Fragment>
}
</div>
);

Write Preview
Loading…
Cancel
Save