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

add pageination

Browse Source
chromesetting
tangjiang 6 years ago
parent f69620564b
commit 50fec5b18f
9 changed files with 129 additions and 60 deletions
Show Stats Download Patch File Download Diff File

2
public/react/src/modules/developer/components/userInfo/index.js
Unescape View File

@ -14,7 +14,7 @@ function UserInfo (props) {
const {image_url, name} = props.userInfo; const {image_url, name} = props.userInfo;
return ( return (
<div className={'avator_nicker'}> <div className={'avator_nicker'}>
<img alt="用户头像" className={'student_img'} src={getImageUrl(`images/${image_url}` || 'images/educoder/headNavLogo.png?1526520218')} /> <img style={{ display: image_url ? 'inline-block' : 'none'}} alt="用户头像" className={'student_img'} src={getImageUrl(`images/${image_url}` || 'images/educoder/headNavLogo.png?1526520218')} />
<span className={'student_nicker'}> <span className={'student_nicker'}>
{name || ''} {name || ''}
</span> </span>

41
public/react/src/modules/tpm/jupyter/index.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-11 08:35:23 * @Date: 2019-12-11 08:35:23
* @LastEditors: tangjiang * @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 20:19:48 * @LastEditTime: 2019-12-13 15:25:50
*/ */
import './index.scss'; import './index.scss';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
@ -26,16 +26,20 @@ function JupyterTPI (props) {
}, },
url, url,
loading, // 保存按钮状态 loading, // 保存按钮状态
total,
pagination,
dataSets, // 数据集 dataSets, // 数据集
jupyter_info, jupyter_info,
getJupyterInfo, getJupyterInfo,
syncJupyterCode, syncJupyterCode,
jupyter_tpi_url_state, jupyter_tpi_url_state,
// getJupyterTpiDataSet, getJupyterTpiDataSet,
getJupyterTpiUrl, getJupyterTpiUrl,
saveJupyterTpi, saveJupyterTpi,
changeLoadingState, changeLoadingState,
changeGetJupyterUrlState changeGetJupyterUrlState,
jupyter_identifier,
changeCurrentPage
} = props; } = props;
const {identifier} = params; const {identifier} = params;
@ -107,6 +111,7 @@ function JupyterTPI (props) {
const handleClickQuitTpi = () => { const handleClickQuitTpi = () => {
// console.log(jupyterInfo); // console.log(jupyterInfo);
const { identifier } = jupyterInfo; const { identifier } = jupyterInfo;
if (!identifier) return;
props.history.push(`/shixuns/${identifier}/challenges`); props.history.push(`/shixuns/${identifier}/challenges`);
} }
@ -125,6 +130,14 @@ function JupyterTPI (props) {
saveJupyterTpi(); saveJupyterTpi();
} }
// 分页信息改变时
const handlePageChange = (current) => {
// 改变当前页
changeCurrentPage(current);
// 分页查找数据
getJupyterTpiDataSet(jupyter_identifier);
}
return ( return (
<div className="jupyter_area"> <div className="jupyter_area">
<div className="jupyter_header"> <div className="jupyter_header">
@ -152,7 +165,12 @@ function JupyterTPI (props) {
<div className="jupyter_ctx"> <div className="jupyter_ctx">
<SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%"> <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="30%">
<div className={'split-pane-left'}> <div className={'split-pane-left'}>
<LeftPane dataSets={dataSets} /> <LeftPane
dataSets={dataSets}
total={total}
pagination={pagination}
onPageChange={handlePageChange}
/>
</div> </div>
<SplitPane split="vertical" defaultSize="100%" allowResize={false}> <SplitPane split="vertical" defaultSize="100%" allowResize={false}>
<RightPane <RightPane
@ -176,7 +194,10 @@ const mapStateToProps = (state) => {
jupyter_info, jupyter_info,
jupyter_tpi_url, jupyter_tpi_url,
jupyter_data_set, jupyter_data_set,
jupyter_tpi_url_state jupyter_tpi_url_state,
jupyter_data_set_count,
jupyter_pagination,
jupyter_identifier
} = state.jupyterReducer; } = state.jupyterReducer;
const { loading } = state.commonReducer; const { loading } = state.commonReducer;
return { return {
@ -184,7 +205,10 @@ const mapStateToProps = (state) => {
jupyter_info, jupyter_info,
url: jupyter_tpi_url, url: jupyter_tpi_url,
dataSets: jupyter_data_set, dataSets: jupyter_data_set,
jupyter_tpi_url_state jupyter_tpi_url_state,
total: jupyter_data_set_count,
pagination: jupyter_pagination,
jupyter_identifier
}; };
} }
@ -193,10 +217,11 @@ const mapDispatchToProps = (dispatch) => ({
getJupyterInfo: (identifier) => dispatch(actions.getJupyterInfo(identifier)), getJupyterInfo: (identifier) => dispatch(actions.getJupyterInfo(identifier)),
// 重置代码 // 重置代码
syncJupyterCode: (identifier, msg) => dispatch(actions.syncJupyterCode(identifier, msg)), syncJupyterCode: (identifier, msg) => dispatch(actions.syncJupyterCode(identifier, msg)),
// getJupyterTpiDataSet: (identifier) => dispatch(actions.getJupyterTpiDataSet(identifier)), getJupyterTpiDataSet: (identifier, current) => dispatch(actions.getJupyterTpiDataSet(identifier, current)),
getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)), getJupyterTpiUrl: (identifier) => dispatch(actions.getJupyterTpiUrl(identifier)),
saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()), saveJupyterTpi: () => dispatch(actions.saveJupyterTpi()),
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)) changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
changeCurrentPage: (current) => dispatch(actions.changeCurrentPage(current))
}); });
export default connect( export default connect(

60
public/react/src/modules/tpm/jupyter/leftPane/index.js
Unescape View File

@ -4,17 +4,22 @@
* @Github: * @Github:
* @Date: 2019-12-12 10:34:03 * @Date: 2019-12-12 10:34:03
* @LastEditors: tangjiang * @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 20:18:46 * @LastEditTime: 2019-12-13 15:31:35
*/ */
import './index.scss'; import './index.scss';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import {Icon, Empty} from 'antd'; import {Icon, Empty, Pagination, Tooltip } from 'antd';
import MyIcon from '../../../../common/components/MyIcon'; import MyIcon from '../../../../common/components/MyIcon';
function LeftPane (props) { function LeftPane (props) {
// 获取数据集 // 获取数据集
const { dataSets = [] } = props; const {
dataSets = [],
total,
pagination,
onPageChange
} = props;
const emptyCtx = ( const emptyCtx = (
<div className="jupyter_empty"> <div className="jupyter_empty">
@ -31,8 +36,10 @@ function LeftPane (props) {
const oList = dataSets.map((item, i) => { const oList = dataSets.map((item, i) => {
return ( return (
<li className="jupyter_item" key={`key_${i}`}> <li className="jupyter_item" key={`key_${i}`}>
<Icon type="file-text" className="jupyter_icon"/> <Tooltip placement="right" title={'文字提示信息'}>
<span className="jupyter_name">{item.title}</span> <Icon type="file-text" className="jupyter_icon"/>
<span className="jupyter_name">{item.title}</span>
</Tooltip>
</li> </li>
); );
}); });
@ -46,37 +53,30 @@ function LeftPane (props) {
setRenderCtx(oUl); setRenderCtx(oUl);
} }
}, [props]); }, [props]);
// 渲染数据集
// const renderList = () => { // 分页处理
// // 空数据 const handleChangePage = (page) => {
// if (dataSets.length === 0) { // console.log(page, pageSize);
// return <div className="jupyter_empty"> // setCurrent(page);
// <Empty /> onPageChange && onPageChange(page);
// </div> }
// } else {
// // 渲染列表
// const oList = dataSets.map((item, i) => {
// return (
// <li className="jupyter_item" key={`key_${i}`}>
// <Icon type="file-text" className="jupyter_icon"/>
// <span className="jupyter_name">{item.title}</span>
// </li>
// );
// });
// return (
// <ul className="jupyter_data_list">
// { oList }
// </ul>
// );
// }
// }
return ( return (
<div className="jupyter_data_sets_area"> <div className="jupyter_data_sets_area">
<h2 className="jupyter_h2_title"> <h2 className="jupyter_h2_title">
<MyIcon type="iconwenti" className="jupyter_data_icon"/> 数据集 <MyIcon type="iconwenti" className="jupyter_data_icon"/> 数据集
{/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
</h2> </h2>
{ renderCtx } { renderCtx }
<div className='jupyter_pagination'>
<Pagination
simple
current={pagination.page}
pageSize={pagination.limit}
total={total}
onChange={handleChangePage}
/>
</div>
</div> </div>
) )
} }

19
public/react/src/modules/tpm/jupyter/leftPane/index.scss
Unescape View File

@ -1,10 +1,16 @@
.jupyter_data_sets_area{ .jupyter_data_sets_area{
height: 100%; height: 100%;
background: #fff;
.jupyter_h2_title{ .jupyter_h2_title{
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
background-color: #EEEEEE; // background-color: #EEEEEE;
background: #fff;
padding: 0 30px; padding: 0 30px;
font-size: 16px;
// box-size: border-box;
box-sizing: border-box;
border-bottom: 1px solid rgba(238,238,238,1);
.jupyter_data_icon{ .jupyter_data_icon{
// color: #7286ff; // color: #7286ff;
color: #1890ff; color: #1890ff;
@ -18,7 +24,7 @@
.jupyter_data_list, .jupyter_data_list,
.jupyter_empty{ .jupyter_empty{
height: calc(100vh - 104px); height: calc(100vh - 160px);
overflow-y: auto; overflow-y: auto;
} }
@ -54,4 +60,13 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
} }
.jupyter_pagination{
display: flex;
justify-content: center;
align-items: center;
height: 56px;
box-sizing: border-box;
border-top: 1px solid rgba(238,238,238,1);
}
} }

1
public/react/src/redux/actions/actionTypes.js
Unescape View File

@ -57,6 +57,7 @@ const types = {
SAVE_JUPYTER_INFO: 'SAVE_JUPYTER_INFO', // 保存 jupyter 信息 SAVE_JUPYTER_INFO: 'SAVE_JUPYTER_INFO', // 保存 jupyter 信息
CHANGE_JUPYTER_URL_STATE: 'CHANGE_JUPYTER_URL_STATE', // 获取url返回的状态值 CHANGE_JUPYTER_URL_STATE: 'CHANGE_JUPYTER_URL_STATE', // 获取url返回的状态值
SAVE_JUPYTER_TPI: 'SAVE_JUPYTER_TPI', // 保存 jupyter tpi SAVE_JUPYTER_TPI: 'SAVE_JUPYTER_TPI', // 保存 jupyter tpi
CHANGE_JUPYTER_CURRENT_PAGE: 'CHANGE_JUPYTER_CURRENT_PAGE'
} }
export default types; export default types;

6
public/react/src/redux/actions/index.js
Unescape View File

@ -68,7 +68,8 @@ import {
getJupyterInfo, getJupyterInfo,
syncJupyterCode, syncJupyterCode,
changeGetJupyterUrlState, changeGetJupyterUrlState,
saveJupyterTpi saveJupyterTpi,
changeCurrentPage
} from './jupyter'; } from './jupyter';
export default { export default {
@ -119,6 +120,7 @@ export default {
getJupyterInfo, getJupyterInfo,
syncJupyterCode, syncJupyterCode,
changeGetJupyterUrlState, changeGetJupyterUrlState,
saveJupyterTpi saveJupyterTpi,
changeCurrentPage
// isUpdateCodeCtx // isUpdateCodeCtx
} }

35
public/react/src/redux/actions/jupyter.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-12 09:01:30 * @Date: 2019-12-12 09:01:30
* @LastEditors: tangjiang * @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:58:38 * @LastEditTime: 2019-12-13 15:27:13
*/ */
import types from "./actionTypes"; import types from "./actionTypes";
import { message } from 'antd'; import { message } from 'antd';
@ -18,20 +18,22 @@ import {
// 获取 jupyter 相关信息 // 获取 jupyter 相关信息
export const getJupyterInfo = (id) => { export const getJupyterInfo = (id) => {
return (dispatch) => { return (dispatch, getState) => {
const { jupyter_pagination } = getState().jupyterReducer;
console.log(jupyter_pagination);
fetchJupyterInfo(id).then(res => { fetchJupyterInfo(id).then(res => {
if (res.data.status === 401) return; if (res.data.status === 401) return;
if (res.status === 200) { if (res.status === 200) {
const { data } = res; const { data } = res;
console.log(data);
if (data.status === 0) { if (data.status === 0) {
dispatch({ dispatch({
type: types.SAVE_JUPYTER_INFO, type: types.SAVE_JUPYTER_INFO,
payload: data payload: data
}); });
const { identifier, myshixun_identifier } = data; const { identifier, myshixun_identifier } = data;
dispatch(saveJupyterIdentifier(identifier));
// 调用获取数据集接口 // 调用获取数据集接口
dispatch(getJupyterTpiDataSet(identifier)); dispatch(getJupyterTpiDataSet(identifier, jupyter_pagination));
// 调用获取url接口 // 调用获取url接口
dispatch(getJupyterTpiUrl({identifier: myshixun_identifier})); dispatch(getJupyterTpiUrl({identifier: myshixun_identifier}));
} }
@ -40,16 +42,21 @@ export const getJupyterInfo = (id) => {
} }
} }
// 获取 jupyter tpi 数据集 // 获取 jupyter tpi 数据集
export const getJupyterTpiDataSet = (identifier) => { export const getJupyterTpiDataSet = (identifier, params) => {
return (dispatch) => { return (dispatch, getState) => {
fetchJupyterTpiDataSet(identifier).then(res => { if (!params) {
params = getState().jupyterReducer.jupyter_pagination;
}
fetchJupyterTpiDataSet(identifier, params).then(res => {
if (res.data.status === 401) return; // 用户未登录 if (res.data.status === 401) return; // 用户未登录
console.log('数据集:', res);
if (res.status === 200) { if (res.status === 200) {
const {data_sets} = res.data; const {data_sets, data_sets_count} = res.data;
dispatch({ dispatch({
type: types.GET_JUPYTER_DATA_SETS, type: types.GET_JUPYTER_DATA_SETS,
payload: data_sets payload: {
data_sets,
data_sets_count
}
}); });
} }
}); });
@ -59,7 +66,6 @@ export const getJupyterTpiDataSet = (identifier) => {
export const getJupyterTpiUrl = (obj) => { export const getJupyterTpiUrl = (obj) => {
return (dispatch, getState) => { return (dispatch, getState) => {
const {jupyter_info} = getState().jupyterReducer; const {jupyter_info} = getState().jupyterReducer;
console.log(obj.identifier, jupyter_info.myshixun_identifier);
if (!obj.identifier && !jupyter_info.myshixun_identifier) return; if (!obj.identifier && !jupyter_info.myshixun_identifier) return;
const id = obj.identifier || jupyter_info.myshixun_identifier; const id = obj.identifier || jupyter_info.myshixun_identifier;
fetchJupyterTpiUrl({identifier: id}).then(res => { fetchJupyterTpiUrl({identifier: id}).then(res => {
@ -136,4 +142,11 @@ export const saveJupyterTpi = () => {
}); });
}); });
} }
}
// 改变当前页数
export const changeCurrentPage = (current) => {
return {
type: types.CHANGE_JUPYTER_CURRENT_PAGE,
payload: current
}
} }

19
public/react/src/redux/reducers/jupyterReducer.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-12 09:01:39 * @Date: 2019-12-12 09:01:39
* @LastEditors: tangjiang * @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:23:54 * @LastEditTime: 2019-12-13 15:28:45
*/ */
import types from "../actions/actionTypes"; import types from "../actions/actionTypes";
@ -14,15 +14,22 @@ const initState = {
jupyter_data_set: [], jupyter_data_set: [],
jupyter_identifier: '', jupyter_identifier: '',
jupyter_tpi_url_state: -1, // 获取 url 状态值: 0 成功, 其它 失败 jupyter_tpi_url_state: -1, // 获取 url 状态值: 0 成功, 其它 失败
jupyter_tpi_code: '' // 端口号 jupyter_tpi_code: '', // 端口号
jupyter_data_set_count: 1, // 数据集总数
jupyter_pagination: {
page: 1,
limit: 20 // 默认加载20条
}
}; };
const JupyterReducer = (state = initState, action) => { const JupyterReducer = (state = initState, action) => {
switch (action.type) { switch (action.type) {
case types.GET_JUPYTER_DATA_SETS: case types.GET_JUPYTER_DATA_SETS:
const { data_sets, data_sets_count } = action.payload;
return { return {
...state, ...state,
jupyter_data_set: action.payload jupyter_data_set: data_sets,
jupyter_data_set_count: data_sets_count
} }
case types.GET_JUPYTER_TPI_URL: case types.GET_JUPYTER_TPI_URL:
const {url, status, port} = action.payload; const {url, status, port} = action.payload;
@ -33,6 +40,7 @@ const JupyterReducer = (state = initState, action) => {
jupyter_tpi_code: port jupyter_tpi_code: port
} }
case types.SAVE_JUPYTER_IDENTIFIER: case types.SAVE_JUPYTER_IDENTIFIER:
console.log('保存的jupyter_identifier', action.payload);
return { return {
...state, ...state,
jupyter_identifier: action.payload jupyter_identifier: action.payload
@ -47,6 +55,11 @@ const JupyterReducer = (state = initState, action) => {
...state, ...state,
jupyter_tpi_url_state: action.payload jupyter_tpi_url_state: action.payload
} }
case types.CHANGE_JUPYTER_CURRENT_PAGE:
return {
...state,
jupyter_pagination: Object.assign({}, state.jupyter_pagination, { page: action.payload })
}
default: default:
return { return {
...state ...state

6
public/react/src/services/jupyterServer.js
Unescape View File

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-12 09:07:07 * @Date: 2019-12-12 09:07:07
* @LastEditors: tangjiang * @LastEditors: tangjiang
* @LastEditTime: 2019-12-12 17:46:17 * @LastEditTime: 2019-12-13 14:30:51
*/ */
import axios from 'axios'; import axios from 'axios';
@ -14,9 +14,9 @@ export async function fetchJupyterInfo (identifier) {
return axios.get(url); return axios.get(url);
} }
// 获取数据集 // 获取数据集
export async function fetchJupyterTpiDataSet (identifier) { export async function fetchJupyterTpiDataSet (identifier, params) {
const url = `/shixuns/${identifier}/jupyter_data_sets.json`; const url = `/shixuns/${identifier}/jupyter_data_sets.json`;
return axios.get(url); return axios.get(url, { params });
} }
// 获取 tpi url // 获取 tpi url
export async function fetchJupyterTpiUrl (params) { export async function fetchJupyterTpiUrl (params) {

Write Preview
Loading…
Cancel
Save