You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/tpm/TPMIndexHOC.js

820 lines
25 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 AccountPhoneemail from '../user/AccountPhoneemail';
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="https://test-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?2021`));
$('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css?2021`));
// index.html有加载
$('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?2021`));
// $('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,
AccountPhoneemailtype:false,
globalLoading: false,
dataquerys:{},
isloginCancel:undefined,
mygetHelmetapi: null,
}
}
// header里面需要有user
initCommonState(user) {
// 更新头像后,需要改变参数,不然会被图片缓存影响到 --> 后台已加 ?t=${new Date().getTime()
const newUser = Object.assign({}, {...user}, { image_url: `${user.image_url}`});
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() {
// console.log("TPMIndexHOC========");
// console.log(this.props);
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) => {
// console.log("开始请求/get_navigation_info.json");
// console.log(response);
if(response!=undefined){
if(response.status===200){
this.setState({
Headertop:response.data.top,
Footerdown:response.data.down
})
}
}
});
///请求定制化的信息
this.getAppdata();
}
/**
课堂权限相关方法,暂时写这里了 ----------------------------------------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
}
isCourseAdmin = () => {
return this.state.coursedata&&this.state.coursedata.course_identity === 2
}
//超管、运维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
// })
//
// }
//获取数据为空的时候
gettablogourlnull = () => {
this.setState({
mygetHelmetapi: undefined
});
document.title = "EduCoder";
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = "/react/build/./favicon.ico";
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
};
//获取数据的时候
gettablogourldata = (response) => {
document.title = response.data.setting.name;
var link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = '/' + response.data.setting.tab_logo_url;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
//获取当前定制信息
getAppdata = () => {
try {
var chromesettingArray = JSON.parse(localStorage.getItem('chromesetting'));
var chromesettingresponseArray = JSON.parse(localStorage.getItem('chromesettingresponse'));
// console.log("TPMLNdexHOC");
// console.log(chromesettingArray);
// console.log(chromesettingresponseArray);
this.setState({
mygetHelmetapi:chromesettingArray
});
if (chromesettingArray.tab_logo_url) {
this.gettablogourldata(chromesettingresponseArray);
} else {
this.gettablogourlnull();
}
}catch (e) {
console.log("hoc获取游览器配置失败 重新请求开始读取配置");
this.getAppdatausr();
}
};
getAppdatausr=()=>{
let url = "/setting.json";
axios.get(url).then((response) => {
// console.log("app.js开始请求/setting.json");
// console.log("获取当前定制信息");
if (response) {
if (response.data) {
this.setState({
mygetHelmetapi: response.data.setting
});
localStorage.setItem('chromesetting',JSON.stringify(response.data.setting));
localStorage.setItem('chromesettingresponse',JSON.stringify(response));
try {
if (response.data.setting.tab_logo_url) {
this.gettablogourldata(response);
} else {
this.gettablogourlnull();
}
} catch (e) {
this.gettablogourlnull();
}
} else {
this.gettablogourlnull();
}
} else {
this.gettablogourlnull();
}
}).catch((error) => {
this.gettablogourlnull();
});
}
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,
isloginCancel:undefined
})
}
showLoginDialog = () => {
this.setState({
isRender: true,
isloginCancel:"iscancel"
})
}
//验证登录是否成功方法
checkIfLogin = () => {
return this.state.current_user && this.state.current_user.login != ''
}
hideAccountProfile = () => {
this.setState({
AccountProfiletype: false
})
}
showProfileCompleteDialog = () => {
this.dialogObj = {}
this.setState({
AccountProfiletype: true
})
}
showhideAccountPhoneemailDialog = () => {
this.dialogObj = {}
this.setState({
AccountPhoneemailtype: true
})
}
hideAccountPhoneemailtype=()=>{
this.setState({
AccountPhoneemailtype:false
})
}
//验证是否完善资料
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')
}
})
}
yslslowCheckresults =(tip) =>{
this._gLoadingTip = tip || '成绩计算中,请稍候...';
this.setState({ globalLoading: true })
}
yslslowCheckresultsNo =() =>{
this.setState({ globalLoading: false })
}
showGlobalLoading = (tip) => {
this._gLoadingTip = tip || '加载中,请稍后...';
this.setState({ globalLoading: true })
}
hideGlobalLoading = () => {
this.setState({ globalLoading: false })
}
MdifHasAnchorJustScorll=()=>{
//mdhash滚动
let anchor = decodeURI(this.props.location.hash).replace('#', '');
// 对应id的话, 滚动到相应位置
if (!!anchor) {
let anchorElement = document.getElementsByName(anchor);
if (anchorElement) {
if (anchorElement.length>0){
anchorElement[anchorElement.length-1].scrollIntoView();
}
}
}
}
//跳转道描点的地方
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到锚点
let anchorElement = document.getElementById(anchorName);
// 如果对应id的锚点存在就跳转到锚点
if (anchorElement) {
anchorElement.scrollIntoView();
}
}
}
render() {
let{Headertop,Footerdown, isRender, AccountProfiletype,AccountPhoneemailtype}=this.state;
const common = {
isSuperAdmin:this.isSuperAdmin,
isAdminOrCreator:this.isAdminOrCreator,
isClassManagement:this.isClassManagement,
isCourseAdmin:this.isCourseAdmin,
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,
showhideAccountPhoneemailDialog:this.showhideAccountPhoneemailDialog,
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,
yslslowCheckresults:this.yslslowCheckresults,
yslslowCheckresultsNo:this.yslslowCheckresultsNo,
MdifHasAnchorJustScorll:this.MdifHasAnchorJustScorll,
scrollToAnchor:this.scrollToAnchor
};
// console.log("this.props.mygetHelmetapi");
// console.log(this.props.mygetHelmetapi);
// console.log("WrappedComponent");
// console.log(this.props);
// console.log(this.props.match.path);
var mypath= this.props&&this.props.match&&this.props.match.path;
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}
/>:""}
{/*验证是否注册手机邮箱*/}
{AccountPhoneemailtype===true?<AccountPhoneemail
hideAccountProfile={()=>this.hideAccountPhoneemailtype()}
{...this.props}
{...this.state}
{...this.dialogObj}
/>:""}
{
mypath&&mypath==="/question"?
""
:
<SiderBar
{...this.props}
{...this.state}
Headertop={Headertop}/>
}
{/* 注释掉了1440 影响到了手机屏幕的展示 */}
<style>{
`
.newContainers{
min-width: 1200px;
max-width: unset;
height: 100%;
min-height: 100%;
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;
height: 100%;
}
.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
{...this.state} {...this.props}
Footerdown={Footerdown}
/>
</div>
);
}
}
}