From b2b6fb5d1ec1780f1577db095b9d1afe864313d3 Mon Sep 17 00:00:00 2001 From: Evan Date: Sun, 14 Jun 2015 08:38:25 -0400 Subject: [PATCH] Started implementing interface in react.js --- scripts.py | 4 +- static/index-react.html | 28 +++++ static/index-react.js | 155 ++++++++++++++++++++++++++ user_scripts/user_scripts_go_here.txt | 0 4 files changed, 186 insertions(+), 1 deletion(-) create mode 100644 static/index-react.html create mode 100644 static/index-react.js create mode 100644 user_scripts/user_scripts_go_here.txt diff --git a/scripts.py b/scripts.py index 3516c19..b533efa 100644 --- 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 new file mode 100644 index 0000000..227ef57 --- /dev/null +++ b/static/index-react.html @@ -0,0 +1,28 @@ + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/static/index-react.js b/static/index-react.js new file mode 100644 index 0000000..1645f44 --- /dev/null +++ b/static/index-react.js @@ -0,0 +1,155 @@ + + +var DrivePanel = React.createClass({ + render: function(){ + return( + + + + + + + + + + + + + + + + + +
Stop
+ ); + }, + + 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( + + ) + } +}) + +var ScriptViewer = React.createClass({ + + render: function(){ + return ( + + ) + } +}) + +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 ( +
+ + + + +
+ ) + }, + + 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); + } + } + +} \ No newline at end of file diff --git a/user_scripts/user_scripts_go_here.txt b/user_scripts/user_scripts_go_here.txt new file mode 100644 index 0000000..e69de29