From df009248ea2b92c067c350f9012207ff291297e6 Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Sat, 22 Jun 2019 14:47:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/react/src/modules/page/MainContent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/react/src/modules/page/MainContent.js b/public/react/src/modules/page/MainContent.js
index bfe53f0ac..2aef78e1b 100644
--- a/public/react/src/modules/page/MainContent.js
+++ b/public/react/src/modules/page/MainContent.js
@@ -57,7 +57,7 @@ class MainContent extends Component {
 				`}</style>
 		      	<div className="-layout -stretch -fit labelN" id="game_show_content">
 		      		<div className="split-panel--first -layout -vertical -flex -relative -flex-basic40"
-		      			id="game_left_contents" style={{ width: '28%'}}>
+		      			id="game_left_contents" style={{ width: '35%'}}>
 						{/*  style={{width: '694px'}} */}
 
 		      			{/* 左侧任务说明等功能的区域 */}

From c3ca98a64422b990f7e29a2240a9a0fb42a4d276 Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Sat, 22 Jun 2019 14:51:20 +0800
Subject: [PATCH 2/3] "@novnc/novnc": "^1.1.0",

---
 public/react/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/react/package.json b/public/react/package.json
index 7b00881d5..19b8286d9 100644
--- a/public/react/package.json
+++ b/public/react/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@novnc/novnc": "^1.1.0",
+    
     "@flatten/array": "^1.1.7",
     "@icedesign/base": "^0.2.5",
     "antd": "^3.6.5",

From e196f5b066d54f32c90c4f9b667d29c8c84fd60b Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Sat, 22 Jun 2019 15:02:37 +0800
Subject: [PATCH 3/3] VNCDisplay

---
 public/react/src/modules/page/Index.js        |   4 +
 public/react/src/modules/page/MainContent.js  |  10 +-
 .../src/modules/page/MainContentContainer.js  |   4 +
 public/react/src/modules/page/VNCDisplay.js   | 154 ++++++++++++++++++
 4 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 public/react/src/modules/page/VNCDisplay.js

diff --git a/public/react/src/modules/page/Index.js b/public/react/src/modules/page/Index.js
index 7d89462b9..5a37c8c66 100644
--- a/public/react/src/modules/page/Index.js
+++ b/public/react/src/modules/page/Index.js
@@ -223,6 +223,10 @@ class Index extends Component {
 	    					challenge={context.challenge}
 	    					myshixun={context.myshixun}
 	    					shixun={context.shixun}
+
+							vnc_url={context.vnc_url}
+	    					zip_path={context.zip_path}
+
 	    					loading={context.loading}
 	    					discusses_count={context.discusses_count}
 							hide_code={context.hide_code}
diff --git a/public/react/src/modules/page/MainContent.js b/public/react/src/modules/page/MainContent.js
index 2aef78e1b..c49b037f9 100644
--- a/public/react/src/modules/page/MainContent.js
+++ b/public/react/src/modules/page/MainContent.js
@@ -13,6 +13,7 @@ import ChooseEvaluateView from './main/ChooseEvaluateView'
 
 import { CircularProgress } from 'material-ui/Progress';
 import Button from 'material-ui/Button';
+import VNCDisplay from './VNCDisplay'
 
 import './tpiPage.css';
 import './tpiPageForMobile.css';
@@ -32,7 +33,7 @@ class MainContent extends Component {
 	}
   	render() {
   		const { challenge, output_sets, onRunCodeTest, latest_output, record, st, readRepoTimeout,
-  				onTestSetHeaderClick, loading, codeLoading } = this.props
+  				onTestSetHeaderClick, loading, codeLoading, shixun} = this.props
 
   		// if (output_sets && output_sets.test_sets) {
   		// 	const test_sets_array = JSON.parse("[" + output_sets.test_sets + "]");
@@ -47,6 +48,9 @@ class MainContent extends Component {
   		}
 		const newProps = Object.assign({}, this.props);
 		delete newProps.testSetsExpandedArray
+
+		const showIframeContent = shixun && shixun.vnc == true
+
 	    return (
 	      	<div className="page--body -margin-t-64 -flex tpi_content">
 			  	<style>{`
@@ -82,6 +86,10 @@ class MainContent extends Component {
 						    <div className="fl pr tip-right-con" id="update_game_tip"></div>
 						</div>*/}
 
+						{/* { showIframeContent && vnc_url ? <VNCDisplay
+							vnc_url={vnc_url}
+						></VNCDisplay> */}
+
 		      			<div className="-layout-v -flex">
     						<div className="-flex -relative">
     							<div className="split-panel -fit -vertical" id="games_repository_valuation">
diff --git a/public/react/src/modules/page/MainContentContainer.js b/public/react/src/modules/page/MainContentContainer.js
index 7595f933d..daa4b65b6 100644
--- a/public/react/src/modules/page/MainContentContainer.js
+++ b/public/react/src/modules/page/MainContentContainer.js
@@ -237,6 +237,10 @@ class MainContentContainer extends Component {
     // arg_path 点击文件目录树时，传入的点击节点对应的path
 	fetchRepositoryCode( props, arg_path, type, isRetry) {
     	const { challenge, showSnackbar, game, shixun, myshixun, hide_code } = props ? props : this.props;
+		if (shixun.vnc == true) {
+			// vnc模式下不需要加载代码
+			return true;
+		}
 		if (
 			// true || 
 			hide_code) {	// 隐藏code的实训
diff --git a/public/react/src/modules/page/VNCDisplay.js b/public/react/src/modules/page/VNCDisplay.js
new file mode 100644
index 000000000..b8840fe02
--- /dev/null
+++ b/public/react/src/modules/page/VNCDisplay.js
@@ -0,0 +1,154 @@
+// import React, { Component } from 'react';
+
+// import RFB from '@novnc/novnc/lib/rfb.js';
+
+// const $ = window.$;
+// // const showIframeContent = window.location.search.indexOf('vnc=1') != -1;
+// class VNCDisplay extends Component {
+// 	componentDidMount() {
+// 		console.log(RFB)
+
+//         let rfb;
+//         let desktopName;
+//         // When this function is called we have
+//         // successfully connected to a server
+//         function connectedToServer(e) {
+//             status("Connected to " + desktopName);
+//         }
+//         // This function is called when we are disconnected
+//         function disconnectedFromServer(e) {
+//             if (e.detail.clean) {
+//                 status("Disconnected");
+//             } else {
+//                 status("Something went wrong, connection is closed");
+//             }
+//         }
+//         // When this function is called, the server requires
+//         // credentials to authenticate
+//         function credentialsAreRequired(e) {
+//             const password = prompt("Password Required:");
+//             rfb.sendCredentials({ password: password });
+//         }
+//         // When this function is called we have received
+//         // a desktop name from the server
+//         function updateDesktopName(e) {
+//             desktopName = e.detail.name;
+//         }
+//         // Since most operating systems will catch Ctrl+Alt+Del
+//         // before they get a chance to be intercepted by the browser,
+//         // we provide a way to emulate this key sequence.
+//         function sendCtrlAltDel() {
+//             rfb.sendCtrlAltDel();
+//             return false;
+//         }
+//         // Show a status text in the top bar
+//         function status(text) {
+//             document.getElementById('status').textContent = text;
+//         }
+//         // This function extracts the value of one variable from the
+//         // query string. If the variable isn't defined in the URL
+//         // it returns the default value instead.
+//         function readQueryVariable(name, defaultValue) {
+//             // A URL with a query parameter can look like this:
+//             // https://www.example.com?myqueryparam=myvalue
+//             //
+//             // Note that we use location.href instead of location.search
+//             // because Firefox < 53 has a bug w.r.t location.search
+//             const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
+//                 match = document.location.href.match(re);
+//             if (typeof defaultValue === 'undefined') { defaultValue = null; }
+//             if (match) {
+//                 // We have to decode the URL since want the cleartext value
+//                 return decodeURIComponent(match[1]);
+//             }
+//             return defaultValue;
+//         }
+//         document.getElementById('sendCtrlAltDelButton')
+//             .onclick = sendCtrlAltDel;
+//         // Read parameters specified in the URL query string
+//         // By default, use the host and port of server that served this file
+
+//         // const host = readQueryVariable('host', window.location.hostname);
+//         // let port = readQueryVariable('port', window.location.port);
+//         // const password = readQueryVariable('password', '');
+
+//         const { vnc_url } = this.props;
+//         // http://117.50.12.63:43149/vnc_lite.html?password=headless
+//         let _ar1 = vnc_url.split('/');
+//         let ipAndPort = _ar1[2].split(':')
+//         let passwordAr = _ar1[3].split('password=')
+//         const host = ipAndPort[0]
+//         let port = ipAndPort[1]
+//         const password = passwordAr[1].split('&')[0]
+
+//         const path = readQueryVariable('path', 'websockify');
+//         // | | |         | | |
+//         // | | | Connect | | |
+//         // v v v         v v v
+//         status("Connecting");
+//         // Build the websocket URL used to connect
+//         let url;
+//         if (vnc_url.indexOf("https:") != -1) {
+//             url = 'wss';
+//         } else {
+//             url = 'ws';
+//         }
+//         url += '://' + host;
+//         if(port) {
+//             url += ':' + port;
+//         }
+//         url += '/' + path;
+//         // Creating a new RFB object will start a new connection
+//         rfb = new RFB(document.getElementById('screen'), url,
+//                     { credentials: { password: password } });
+//         // Add listeners to important events from the RFB module
+//         rfb.addEventListener("connect",  connectedToServer);
+//         rfb.addEventListener("disconnect", disconnectedFromServer);
+//         rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+//         rfb.addEventListener("desktopname", updateDesktopName);
+//         // Set parameters that can be changed on an active connection
+//         rfb.viewOnly = readQueryVariable('view_only', false);
+//         rfb.scaleViewport = readQueryVariable('scale', false);
+// 	}
+	
+//   	render() {
+//   		const { challenge,  vnc_url } = this.props
+
+  		
+// 	    return (
+// 	      	<div className="">
+//                 <style>{`
+//                     #top_bar {
+//                         background-color: #6e84a3;
+//                         color: white;
+//                         font: bold 12px Helvetica;
+//                         padding: 6px 5px 4px 5px;
+//                         border-bottom: 1px outset;
+//                     }
+//                     #status {
+//                         text-align: center;
+//                     }
+//                     #sendCtrlAltDelButton {
+//                         position: fixed;
+//                         top: 0px;
+//                         right: 0px;
+//                         border: 1px outset;
+//                         padding: 5px 5px 4px 5px;
+//                         cursor: pointer;
+//                     }
+//                     #screen {
+//                         flex: 1; /* fill remaining space */
+//                         overflow: hidden;
+//                     }
+//                 `}</style>
+// 		        <div id="top_bar">
+//                     <div id="status">Loading</div>
+//                     <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
+//                 </div>
+//                 <div id="screen"></div>
+// 		    </div>
+// 	    );
+//   	}
+// }
+
+// export default VNCDisplay;