From a5077c3011fd657f1ade30cc8de7362275cf73dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Fri, 20 Dec 2019 16:23:43 +0800
Subject: [PATCH] =?UTF-8?q?jupytertpi=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/public/js/jupyter.js             | 17 +++-
 public/react/src/modules/page/VNC.css         |  2 +-
 public/react/src/modules/tpm/jupyter/index.js | 93 +++++++++++++++++--
 .../react/src/modules/tpm/jupyter/index.scss  | 57 +++++++++++-
 .../modules/tpm/jupyter/leftPane/index.scss   | 11 ++-
 .../Challenges/Challengesjupyter.js           |  2 -
 6 files changed, 162 insertions(+), 20 deletions(-)

diff --git a/public/react/public/js/jupyter.js b/public/react/public/js/jupyter.js
index 97a0face2..361287317 100644
--- a/public/react/public/js/jupyter.js
+++ b/public/react/public/js/jupyter.js
@@ -1,9 +1,16 @@
+/*
+ * @Author: your name
+ * @Date: 2019-12-20 11:40:56
+ * @LastEditTime : 2019-12-20 13:38:49
+ * @LastEditors  : Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /notebook/Users/yangshuming/Desktop/new__educode/educoder/public/react/public/js/jupyter.js
+ */
  window.onload=function(){
-  // require(["base/js/namespace"],function(Jupyter) {
-  //   Jupyter.notebook.save_checkpoint();
-  // });
-  $('.navbar-nav').children().eq(7).css({'display':'none'})
-  console.log($('.navbar-nav').children().eq(7))
+  require(["base/js/namespace"],function(Jupyter) {
+    Jupyter.notebook.save_checkpoint();
+  });
+  
 }
 
 
diff --git a/public/react/src/modules/page/VNC.css b/public/react/src/modules/page/VNC.css
index e29335242..d59d91121 100644
--- a/public/react/src/modules/page/VNC.css
+++ b/public/react/src/modules/page/VNC.css
@@ -38,5 +38,5 @@
 }
 
 .newjupyter_float_button{
-    right: 257px;
+    right: 330px;
 }
\ No newline at end of file
diff --git a/public/react/src/modules/tpm/jupyter/index.js b/public/react/src/modules/tpm/jupyter/index.js
index 7425a4732..617ef0936 100644
--- a/public/react/src/modules/tpm/jupyter/index.js
+++ b/public/react/src/modules/tpm/jupyter/index.js
@@ -9,7 +9,7 @@
 import './index.scss';
 import React, { useEffect, useState } from 'react';
 import SplitPane from 'react-split-pane';
-import { Button, Modal,Drawer } from 'antd';
+import { Button, Modal,Drawer ,Pagination,Empty,Tooltip,Icon,message} from 'antd';
 import {
   connect
 } from 'react-redux';
@@ -18,6 +18,25 @@ import UserInfo from '../../developer/components/userInfo';
 import actions from '../../../redux/actions';
 import LeftPane from './leftPane';
 import RightPane from './rightPane';
+import MyIcon from "../../../common/components/MyIcon";
+function jsCopy(s) {
+  var copyEle = document.getElementById(s);
+  const range = document.createRange(); // 创造range
+  window.getSelection().removeAllRanges(); //清除页面中已有的selection
+  range.selectNode(copyEle); // 选中需要复制的节点
+  window.getSelection().addRange(range); // 执行选中元素
+  const copyStatus = document.execCommand("Copy"); // 执行copy操作
+  // 对成功与否定进行提示
+  copyStatuss(copyStatus)
+}
+
+function copyStatuss(copyStatus){
+  if (copyStatus) {
+    message.success('复制成功');
+  } else {
+    message.error('复制失败');
+  }
+}
 function JupyterTPI (props) {
 
   // 获取 identifier 值
@@ -45,11 +64,17 @@ function JupyterTPI (props) {
     drawervisible,
   } = props;
 
+  const emptyCtx = (
+    <div className="jupyter_empty">
+      <Empty />
+    </div>
+  );
   const {identifier} = params;  
   const [userInfo, setUserInfo] = useState({});
   const [jupyterInfo, setJupyterInfo] = useState({});
   const [updateTip, setUpdateTip] = useState(true);
   const [myIdentifier, setMyIdentifier] = useState('');
+  const [renderCtx, setRenderCtx] = useState(() => (emptyCtx));
   useEffect(() => {
     /* 先调用 jupyter的 TPI 接口， 
      * 获取 用户信息,  
@@ -170,6 +195,45 @@ function JupyterTPI (props) {
   const firstDrawerWidth = ()=>{
     return 260
   };
+
+  // 分页处理
+  const handleChangePage = (page) => {
+    // console.log(page, pageSize);
+    handlePageChange(page);
+  }
+  // const listCtx = ;
+  useEffect(() => {
+    if (dataSets.length > 0) {
+      console.log('数据集的个数: ', dataSets.length);
+      const oList = dataSets.map((item, i) => {
+        return (
+          <li className="jupyter_item" key={`key_${i}`}>
+            <Tooltip
+              placement="right"
+              // title={item.file_path}
+              mouseLeaveDelay={0.3}
+            >
+              <Icon type="file-text" className="jupyter_icon"/>
+              <span className="jupyter_name ml10">{item.title}</span>
+              <a className={"fr color-blue"}
+               onClick={() => {
+                jsCopy("file_path"+i)
+              }}>复制地址</a>
+              <input id={"file_path"+i}  className={"file_path_input"} value={item.file_path}/>
+            </Tooltip>
+          </li>
+        );
+      });
+
+      const oUl = (
+        <ul className="jupyter_data_list">
+          { oList }
+        </ul>
+      );
+
+      setRenderCtx(oUl);
+    }
+  }, [props]);
   return (
     <div className="jupyter_area">
       <div className="jupyter_header">
@@ -206,8 +270,8 @@ function JupyterTPI (props) {
       <div className="jupyter_ctx">
         <SplitPane split="vertical" minSize={350} maxSize={-350} defaultSize="100%">
           {/*<div className={'split-pane-left'}>*/}
-          {/*  <LeftPane */}
-          {/*    dataSets={dataSets} */}
+          {/*  <LeftPane*/}
+          {/*    dataSets={dataSets}*/}
           {/*    total={total}*/}
           {/*    pagination={pagination}*/}
           {/*    onPageChange={handlePageChange}*/}
@@ -232,10 +296,27 @@ function JupyterTPI (props) {
           mask={false}
           // onClose={this.onClose}
           visible={drawervisible}
+          className={"RightPaneDrawer"}
         >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
+          <p className={"RightPaneDrawertop"}></p>
+          <div className="jupyter_data_sets_area newjupyter_data_sets_area">
+            <h2 className="jupyter_h2_title">
+              {/*<MyIcon type="iconwenti" className="jupyter_data_icon"/>*/}
+              <i className={"iconfont icon-base"}></i>数据集
+              {/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
+            </h2>
+            { renderCtx }
+            <div className='jupyter_pagination'>
+              {total<20?"":<Pagination
+                simple
+                current={pagination.page}
+                pageSize={pagination.limit}
+                total={total}
+                onChange={handleChangePage}
+              />}
+            </div>
+
+          </div>
         </Drawer>
       </div>
     </div>
diff --git a/public/react/src/modules/tpm/jupyter/index.scss b/public/react/src/modules/tpm/jupyter/index.scss
index 5fdfcb02c..76c8bedd1 100644
--- a/public/react/src/modules/tpm/jupyter/index.scss
+++ b/public/react/src/modules/tpm/jupyter/index.scss
@@ -103,4 +103,59 @@
       font-size: 14px;
     }
   }
-}
\ No newline at end of file
+}
+
+.RightPaneDrawer{
+  .RightPaneDrawertop{
+    width:330px;
+    height:29px;
+    background:rgba(17,28,36,1);
+  }
+
+  .ant-drawer-content-wrapper{
+    width:330px  !important;
+    box-shadow: -2px 0 8px #070F1A  !important;
+  }
+  .ant-drawer-body{
+    padding: 0px;
+  }
+  .ant-drawer-wrapper-body{
+    padding-top: 60px;
+    background: #070F1A;
+    overflow: hidden !important;
+  }
+
+  .ant-pagination{
+    color:#fff !important;
+  }
+
+}
+
+.newjupyter_data_sets_area{
+   background:#070F1A !important;
+  .jupyter_h2_title {
+    height:49px;
+    line-height: 49px;
+    background: #070F1A !important;
+    border-bottom: 1px solid #17212F !important;
+    color:#FFFFFF !important;
+    border-top: 1px solid #17212F !important;
+  }
+  .iconfont{
+    color:#28b887!important;
+    font-size: 30px !important;
+    margin-right: 20px;
+  }
+  .jupyter_pagination{
+    border-top: 1px solid #070F1A !important;
+  }
+
+  .jupyter_name{
+    color:#FFFFFF !important;
+  }
+  .file_path_input{
+    position: absolute;
+    right: -50%;
+  }
+}
+
diff --git a/public/react/src/modules/tpm/jupyter/leftPane/index.scss b/public/react/src/modules/tpm/jupyter/leftPane/index.scss
index 352e1c9ab..495e21f20 100644
--- a/public/react/src/modules/tpm/jupyter/leftPane/index.scss
+++ b/public/react/src/modules/tpm/jupyter/leftPane/index.scss
@@ -2,15 +2,15 @@
   height: 100%;
   background: #fff;
   .jupyter_h2_title{
-    height: 44px;
-    line-height: 44px;
+    //height: 44px;
+    //line-height: 44px;
     // background-color: #EEEEEE;
     background: #fff;
     padding: 0 20px;
     font-size: 16px;
     // box-size: border-box;
     box-sizing: border-box;
-    border-bottom: 1px solid rgba(238,238,238,1);
+    //border-bottom: 1px solid rgba(238,238,238,1);
     .jupyter_data_icon{
       // color: #7286ff;
       color: #1890ff;
@@ -24,14 +24,15 @@
 
   .jupyter_data_list,
   .jupyter_empty{
-    height: calc(100vh - 160px);
+    //height: calc(100vh - 160px);
+    min-height: 350px;
     overflow-y: auto;
   }
 
   .jupyter_data_list{
     .jupyter_item{
       line-height:45px;
-      border-bottom: 1px solid rgba(238,238,238, 1);
+      //border-bottom: 1px solid rgba(238,238,238, 1);
       padding: 0 30px 0 60px;
       overflow: hidden;
       text-overflow:ellipsis;
diff --git a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js b/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
index f11f03b6b..995753dff 100644
--- a/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
+++ b/public/react/src/modules/tpm/shixunchild/Challenges/Challengesjupyter.js
@@ -410,8 +410,6 @@ class Challengesjupyter extends Component {
 												</div>
 											</div>
 										</div>
-										</div>
-
 							    :
 										""
 								)