educoder/public/react/src/modules/tpm/TPMIndexHOC.js

639 lines
20 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import NewHeader from './NewHeader'
import NewFooter from './NewFooter'
import SiderBar from './SiderBar'
import { getUrl, downloadFile } from 'educoder'
import axios from 'axios';
import { Spin } from 'antd'
import './TPMIndex.css'
import LoginDialog from '../login/LoginDialog';
import AccountProfile from '../user/AccountProfile';
import Trialapplication from "../login/Trialapplication";
// import "antd/dist/antd.css";
// import '../../css/educoder/edu-common.css'
// import '../../css/educoder/edu-all.css'
// import '../../css/educoder/edu-main.css'
const $ = window.$;
const versionNum = '0001';
// let _url_origin = getUrl()
let _url_origin='';
if(window.location.port === "3007"){
_url_origin="http://pre-newweb.educoder.net";
}
// let _url_origin=`https://www.educoder.net`;
if (!window['indexHOCLoaded']) {
window.indexHOCLoaded = true;
//解决首屏加载问题
// $('head').append($('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/educoder/antd.min.css?1525440977`));
$('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/css/edu-common.css?6`));
$('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css?6`));
// index.html有加载
$('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?6`));
// $('head').append($('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/educoder/css_min_all.css?1525440977`));
// 加timeout 为了覆盖掉antd的样式
// setTimeout(() => {
// $('head').append( $('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/css/edu-common.css?1525440977`) );
// $('head').append( $('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?1525440977`) );
// $('head').append( $('<link rel="stylesheet" type="text/css" />')
// .attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css?1525440977`) );
// }, 1000);
$("script").append('<script></script>')
.attr('src', `${_url_origin}/javascripts/jquery-1.8.3-ui-1.9.2-ujs-2.0.3.js?_t=${versionNum}`);
}
// `${_url_origin}/javascripts/jquery-1.8.3-ui-1.9.2-ujs-2.0.3.js?_t=${versionNum}`
// TODO css加载完成后再打开页面行为和tpm其他页面一致
export function TPMIndexHOC(WrappedComponent) {
// 这里如果extends WrappedComponent 会出现 WrappedComponent mount twice的问题
return class II extends React.Component {
constructor(props) {
super(props)
window.$('#root').css('position', 'relative')
this.state = {
tpmLoading: true,
resLoading: true,
Headertop:undefined,
Footerdown:undefined,
coursedata: {},
isRender: false,
AccountProfiletype: false,
globalLoading: false,
dataquerys:{},
}
}
// header里面需要有user
initCommonState(user) {
// 更新头像后,需要改变参数,不然会被图片缓存影响到
const newUser = Object.assign({}, {...user}, { image_url: `${user.image_url}?t=${new Date().getTime()}`});
this.setState({
user: newUser,
current_user: newUser
})
}
showShixun = () => {
const { shixunId } = this.props.match.params
const url = `/api/v1/shixuns/${shixunId}/show_shixun`
this.setState({ tpmLoading: true })
axios.get(url,
{
withCredentials: true
}
).then((response) => {
if (response.data && response.data.shixun) {
this.initCommonState(response.data.current_user)
response.data.tpmLoading = false;
this.setState(response.data);
}
}).catch((error) => {
console.log(error)
})
}
aboutFocus = () => {
const { creator, watched } = this.state
/*http://localhost:3000/api/v1/users/155/watch?object_id=156&object_type=user*/
const focusUrl = `/api/v1/users/${creator.owner_id}/${watched ? 'unwatch' : 'watch'}?object_id=${creator.owner_id}&object_type=user`
axios.get(focusUrl,{
})
.then((response) => {
const status = response.data.status;
if(status == 1){
const new_author_info = Object.assign({}, creator)
this.setState({
watched: !watched
})
}
}).catch((error) => {
console.log(error)
})
}
keyupListener = (e) => {
if (e.key === "Escape") {
this.setState({ globalLoading: false })
}
}
componentWillUnmount() {
window.removeEventListener('keyup', this.keyupListener)
}
componentDidMount() {
window.addEventListener('keyup', this.keyupListener)
if(this.props.match.path==="/"){
document.title="创新源于实践";
}else if(this.props.match.path==="/403"){
document.title="你没有权限访问";
}else if(this.props.match.path==="/nopage"){
document.title="没有找到该页面";
}else if(this.props.match.path==="/shixuns"){
document.title="实训项目";
}else if(this.props.match.path==="/paths"){
document.title="实践课程";
}else if(this.props.match.path==="/courses"){
document.title="翻转课堂";
}
$.ajaxSetup({
cache: true
});
//帮助后台传参数
const query = this.props.location.search;
// const type = query.split('?chinaoocTimestamp=');
// console.log("Eduinforms12345");
// console.log(this.foo(query));
// console.log(JSON.stringify(this.foo(query)));
var dataqueryss={}
try {
var foqus=this.foo(query);
if(JSON.stringify(foqus) ==="{}"){
this.setState({
dataquerys:{},
});
}else{
this.setState({
dataquerys:foqus,
});
dataqueryss=foqus;
}
}catch (e) {
this.setState({
dataquerys:{},
})
}
this.fetchUsers(dataqueryss);
let url=`/users/get_navigation_info.json`;
axios.get(url, {
}).then((response) => {
if(response!=undefined){
if(response.status===200){
this.setState({
Headertop:response.data.top,
Footerdown:response.data.down
})
}
}
});
}
/**
课堂权限相关方法,暂时写这里了 ----------------------------------------START
ADMIN = 0 # 超级管理员
CREATOR = 1 # 课程创建者
PROFESSOR = 2 # 课程老师
ASSISTANT_PROFESSOR = 3 # 课程助教
STUDENT = 4 # 学生
NORMAL = 5 # 普通用户
v2
# 课程权限判断
ADMIN = 0 # 超级管理员
BUSINESS = 1 # 运营人员
CREATOR = 2 # 课程创建者
PROFESSOR = 3 # 课程老师
ASSISTANT_PROFESSOR = 4 # 课程助教
STUDENT = 5 # 学生
NORMAL = 6 # 普通用户
Anonymous = 7 # 普未登录
*/
//超管0
isSuperAdmin = () => {
// return false
return this.state.coursedata&&this.state.coursedata.course_identity === 0
}
//超管、运维0-1
isClassManagement = () => {
return this.state.coursedata&&this.state.coursedata.course_identity < 2
}
//超管、运维、课堂管理0-2
isAdminOrCreator = () => {
return this.state.coursedata&&this.state.coursedata.course_identity < 3
}
//超管、运维、课堂管理、老师0-3
isAdminOrTeacher = () => {
return this.state.coursedata&&this.state.coursedata.course_identity < 4
}
// 超管、运维、课堂管理、老师、助教0-4
isAdmin = () => {
return this.state.coursedata&&this.state.coursedata.course_identity < 5
}
// 学生5
isStudent = () => {
return this.state.coursedata&&this.state.coursedata.course_identity === 5
}
// 超管、运维、课堂管理、老师、助教、学生0-5
isAdminOrStudent = () => {
return this.state.coursedata&&this.state.coursedata.course_identity <= 5
}
// 游客未登录/非课堂成员6>
isNotMember = () => {
return this.state.coursedata&&this.state.coursedata.course_identity >= 6
}
//课堂是否已结束
isCourseEnd = () => {
return this.state.current_user ? this.state.current_user.course_is_end : false
}
// setTrialapplication = ()=>{
// this.setState({
// isRenders:true
// })
//
// }
/**
课堂权限相关方法,暂时写这里了 ----------------------------------------END
*/
fetchUser = () => {
let url = `/users/get_user_info.json`
let courseId;
let query = this.props.location.pathname;
const type = query.split('/');
if (type[1] == 'courses' && type[2]) {
courseId = parseInt(type[2])
// url += `?course_id=${courseId}`
}
var datay={};
if(JSON.stringify(this.state.dataquerys) ==="{}"){
datay={
course_id:isNaN(courseId)?undefined:courseId,
school:1
}
}else{
datay={
course_id:isNaN(courseId)?undefined:courseId,
school:1,
chinaoocTimestamp:this.state.dataquerys.chinaoocTimestamp,
websiteName:this.state.dataquerys.websiteName,
chinaoocKey:this.state.dataquerys.chinaoocKey,
}
}
axios.get(url,{params:{
datay
}
},
{
// withCredentials: true
}
).then((response) => {
/*
{
"username": "黄井泉",
"login": "Hjqreturn",
"user_id": 12,
"image_url": "avatar/User/12",
"admin": true,
"is_teacher": false,
"tidding_count": 0
}
*/
if(response=== undefined){
return
}
if (response.data) {
this.initCommonState(response.data)
this.setState({
tpmLoading: false,
coursedata: {
course_identity: response.data.course_identity >= 0 ? response.data.course_identity : undefined,
course_public: response.data.course_public,
name: response.data.course_name,
userid:response.data.user_id
},
})
}
}).catch((error) => {
console.log(error)
})
};
fetchUsers = (yslurlobject) => {
let url = `/users/get_user_info.json`
let courseId;
let query = this.props.location.pathname;
const type = query.split('/');
if (type[1] == 'courses' && type[2]) {
courseId = parseInt(type[2])
// url += `?course_id=${courseId}`
}
var datay={};
if(JSON.stringify(yslurlobject) ==="{}"){
datay={
course_id:isNaN(courseId)?undefined:courseId,
school:1
}
}else{
datay={
course_id:isNaN(courseId)?undefined:courseId,
school:1,
chinaoocTimestamp:yslurlobject.chinaoocTimestamp,
websiteName:yslurlobject.websiteName,
chinaoocKey:yslurlobject.chinaoocKey,
}
}
axios.get(url,{params:{
datay
}
},
{
// withCredentials: true
}
).then((response) => {
/*
{
"username": "黄井泉",
"login": "Hjqreturn",
"user_id": 12,
"image_url": "avatar/User/12",
"admin": true,
"is_teacher": false,
"tidding_count": 0
}
*/
if(response=== undefined){
return
}
if (response.data) {
this.initCommonState(response.data)
this.setState({
tpmLoading: false,
coursedata: {
course_identity: response.data.course_identity >= 0 ? response.data.course_identity : undefined,
course_public: response.data.course_public,
name: response.data.course_name,
userid:response.data.user_id
},
})
}
}).catch((error) => {
console.log(error)
})
};
//截取url 数据的
foo=(url)=> {
var json = {};
var regExp = /[\?\&](\w+)(=?)(\w*)/g;
var arr;
do {
arr = regExp.exec(url);
// console.log(arr); // arr = [完整的字符串, key, 等号或'', value或'']
if (arr) {
var key = arr[1];
var value = arr[3];
// arr[2] === ''时, value = undefined
if (!arr[2])
value = undefined;
json[key] = value;
}
} while (arr);
return json;
};
hideLoginDialog = () => {
this.setState({
isRender: false
})
}
showLoginDialog = () => {
this.setState({
isRender: true
})
}
checkIfLogin = () => {
return this.state.current_user && this.state.current_user.login != ''
}
hideAccountProfile = () => {
this.setState({
AccountProfiletype: false
})
}
showProfileCompleteDialog = () => {
this.dialogObj = {}
this.setState({
AccountProfiletype: true
})
}
checkIfProfileCompleted = () => {
return this.state.current_user && this.state.current_user.profile_completed
}
showProfessionalCertificationDialog = () => {
this.dialogObj = {
content: '您需要去完成您的职业认证,才能使用此功能',
okText: '立即完成',
okHref: '/account/certification'
}
this.setState({
AccountProfiletype: true,
})
}
checkIfProfessionalCertification = () => {
return this.state.current_user && this.state.current_user.professional_certification
}
ShowOnlinePdf = (url) => {
return axios({
method:'get',
url:url,
responseType: 'arraybuffer',
}).then((result)=>{
var binaryData = [];
binaryData.push(result.data);
this.url =window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
window.open(this.url);
})
}
DownloadFileA=(title,url)=>{
let link = document.createElement('a');
document.body.appendChild(link);
link.href =url;
link.download = title;
//兼容火狐浏览器
let evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
link.dispatchEvent(evt);
document.body.removeChild(link);
}
DownloadOpenPdf=(type,url)=>{
type===true?window.open(url):window.location.href=url;
}
slowDownload = (url, tip) => {
this._gLoadingTip = tip || '正在生成文件,请稍后...';
this.setState({ globalLoading: true })
const fileUrl = url;
downloadFile({
url: fileUrl,
successCallback: (url) => {
this.setState({ globalLoading: false })
console.log('successCallback')
},
failCallback: (responseHtml, url) => {
this.setState({ globalLoading: false })
console.log('failCallback')
}
})
}
showGlobalLoading = (tip) => {
this._gLoadingTip = tip || '加载中,请稍后...';
this.setState({ globalLoading: true })
}
hideGlobalLoading = () => {
this.setState({ globalLoading: false })
}
render() {
let{Headertop,Footerdown, isRender, AccountProfiletype}=this.state;
const common = {
isSuperAdmin:this.isSuperAdmin,
isAdminOrCreator:this.isAdminOrCreator,
isClassManagement:this.isClassManagement,
isAdmin: this.isAdmin,
isAdminOrTeacher: this.isAdminOrTeacher,
isStudent: this.isStudent,
isAdminOrStudent: this.isAdminOrStudent,
isNotMember: this.isNotMember,
isCourseEnd: this.isCourseEnd,
isUserid:this.state.coursedata&&this.state.coursedata.userid,
fetchUser: this.fetchUser,
showLoginDialog: this.showLoginDialog,
checkIfLogin: this.checkIfLogin,
showProfileCompleteDialog: this.showProfileCompleteDialog,
checkIfProfileCompleted: this.checkIfProfileCompleted,
checkIfProfessionalCertification: this.checkIfProfessionalCertification,
showProfessionalCertificationDialog: this.showProfessionalCertificationDialog,
ShowOnlinePdf:(url)=>this.ShowOnlinePdf(url),
DownloadFileA:(title,url)=>this.DownloadFileA(title,url),
DownloadOpenPdf:(type,url)=>this.DownloadOpenPdf(type,url),
slowDownload: this.slowDownload,
showGlobalLoading: this.showGlobalLoading,
hideGlobalLoading: this.hideGlobalLoading,
}
return (
<div className="indexHOC">
{isRender===true ? <LoginDialog
Modifyloginvalue={()=>this.hideLoginDialog()}
{...this.props}
{...this.state}
/> : ""}
{/* AccountProfile 也用作职业认证 */}
{AccountProfiletype===true ? <AccountProfile
hideAccountProfile={()=>this.hideAccountProfile()}
{...this.props}
{...this.state}
{...this.dialogObj}
/>:""}
<SiderBar Headertop={Headertop}/>
{/* 注释掉了1440 影响到了手机屏幕的展示 */}
<style>{
`
.newContainers{
min-width: 1200px;
max-width: unset;
overflow: hidden;
}
.newHeaders{
// position: fixed;
max-width: unset;
background: #24292D !important;
width: 100%;
height: 60px !important;
min-width: 1200px;
z-index: 1000;
-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
}
.globalSpin {
max-height: 700px !important;
}
.indexHOC > .ant-spin-nested-loading {
background: #000;
}
.indexHOC > .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
top: 50% !important;
}
.globalSpin .ant-spin-text {
text-shadow: none !important;
color: #fff;
}
.globalSpin .ant-spin-dot-item {
background-color: #fff;
}
`
}</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
Footerdown={Footerdown}
/>
</div>
);
}
}
}