Started implementing interface in react.js

mainecivichackday · Jun 14, 2015 · b2b6fb5 · b2b6fb5
1 parent 489fcdd
commit b2b6fb5
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 1 deletion.
diff --git a/scripts.py b/scripts.py
@@ -3,6 +3,7 @@
 
 from os import listdir
 from os.path import isfile, join
+import json
 
 user_scripts_path = './user_scripts/'
 
@@ -13,7 +14,8 @@ def GET(self, script_name=None):
 		#If no script_id is present, return a list of scripts
 		if script_name is None or len(script_name) == 0:
 			scripts = [f for f in listdir(user_scripts_path) if isfile(join(user_scripts_path, f))]
-			return "This is where I return a list of scripts: %s"%scripts
+			web.header('Content-Type', 'application/json')
+			return json.dumps(scripts)
 
 		#Return content of script
 		script_path = join(user_scripts_path, script_name)

diff --git a/static/index-react.html b/static/index-react.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+    <script src="/static/lib/react.js"></script>
+    <script src="/static/lib/JSXTransformer.js"></script>
+    <script src="/static/lib/tabs.react.js" type='text/jsx'></script>
+    <script src="/static/index-react.js" type='text/jsx'></script>
+</head>
+<body>
+	<div id="content">
+
+	</div>
+	<script type='text/jsx'>
+	console.log("ReactTabs... ", ReactTabs)
+	React.render(
+	  <div>
+	  	Hello, world!
+	  	<ReactTabs useState={true}>
+	  		<DrivePanel tabName='Drive' />
+	  		<ScriptManager tabName='Scripts' />
+	  		<div tabName='Sensors'>Nothing here yet either.</div>
+	  	</ReactTabs>
+	  </div>,
+	  document.getElementById('content')
+	);
+	</script>
+</body>
+
+</html>
diff --git a/static/index-react.js b/static/index-react.js
@@ -0,0 +1,155 @@
+
+
+var DrivePanel = React.createClass({
+	render: function(){
+		return(
+			<table>
+				<tr>
+					<td></td>
+					<td><img src='/static/forward.png' onClick={this.sendMoveCommand.bind(null, 'forward')}/></td>
+					<td></td>
+				</tr>
+				<tr>
+					<td><img src='/static/left.png' onClick={this.sendMoveCommand.bind(null, 'left')} /></td>
+					<td align="center"></td>
+					<td><img src='/static/right.png' onClick={this.sendMoveCommand.bind(null, 'right')} /></td>
+				</tr>
+				<tr>
+					<td></td>
+					<td><img src='/static/reverse.png' onClick={this.sendMoveCommand.bind(null, 'reverse')}/></td>
+					<td></td>
+				</tr>
+				<tr><td colSpan='3'><a onClick={this.sendMoveCommand.bind(null, 'stop')}>Stop</a></td></tr>
+			</table>
+		);
+	},
+
+	sendMoveCommand: function(direction, e){
+		e.preventDefault()
+		var request = new XMLHttpRequest();
+		request.open('POST', '/drive');
+		request.setRequestHeader('Content-Type', 'text');
+
+		request.onload = function(){
+
+			if(this.status >= 200 && this.status < 400){
+				resp = this.response;
+				console.log("Sent POST request, got back  ", resp);
+			} else {
+
+				console.log("Error sending POST request: ", this.response);
+			}
+
+		}
+
+		request.send(direction)
+	}
+})
+
+var ScriptListBox = React.createClass({
+	//Props: List of scripts already in system
+	propTypes: {
+		//filenames: React.PropTypes.ArrayOf(React.PropTypes.string),
+		//changeCB
+	},
+	getDefaultProps: function(){
+		return {filenames: [], selected: "List not loaded..."}
+	},
+
+	render: function(){
+		return(
+			<select onChange={this.props.changeCB}>
+				{this.props.filenames.map(function(filename){
+					return <option value={filename}>{{filename}}</option>
+				})}
+			</select>
+		)
+	}
+})
+
+var ScriptViewer = React.createClass({
+
+	render: function(){
+		return (
+			<textarea rows="40" cols="80" id="source-input">
+				{this.props.source}
+			</textarea>
+		)
+	}
+})
+
+var ScriptManager = React.createClass({
+	/* Stateful:
+		list if filenames stored on server
+		source code
+	*/
+	getInitialState: function(){
+		return {filenames: [], filename: undefined, source: "" }
+	},
+	componentWillMount: function(){
+		//Grab state from server (filenames, source code)
+		getScriptList(this.setScriptList);
+	},
+	componentWillUpdate: function(){
+		//Triggered when receiving new state
+		//If selected file has changed, load new source
+	},
+	render: function(){
+		console.log("this: ",this)
+		console.log("this.props: ", this.props)
+		console.log("this.state: ",this.state)
+		return (
+			<div>
+				<ScriptListBox filenames={this.state.filenames} changecb={this.chooseFile} /> 
+				<button>Save</button> <button>New</button>
+				<ScriptViewer source={this.state.source} />
+
+			</div>
+		)
+	},
+
+	setScriptList: function(filenames){
+		this.setState({'filenames':filenames})
+	},
+
+	chooseFile: function(source){
+		this.setState({'source': source})
+	}
+})
+
+
+
+function getScriptList(cb){
+	console.log("Getting list of scripts...")
+	var request = new XMLHttpRequest();
+	request.open('GET', '/scripts/')
+
+	request.onload = function(){
+		if(this.status >= 200 && this.status < 400){
+			resp = JSON.parse(this.response);
+			cb(resp)	//Notify callback of data
+			console.log("Requested list of source files  ", resp);
+		} else {
+			console.log("Error sending requesting list of source files: ", this.response);
+		}
+	}
+
+	request.send()
+}
+
+function getScriptSource(filename, cb){
+	console.log("Getting source for ", filename)
+	var request = new XMLHttpRequest();
+	request.open('GET', '/scripts/'+filename)
+
+	request.onload = function(){
+		if(this.status >= 200 && this.status < 400){
+			resp = this.response;
+			cb(resp)	//Notify callback of data
+			console.log("Requested list of source files  ", resp);
+		} else {
+			console.log("Error sending requesting list of source files: ", this.response);
+		}
+	}
+
+}
diff --git a/user_scripts/user_scripts_go_here.txt b/user_scripts/user_scripts_go_here.txt