diff options
| -rw-r--r-- | src/App.css | 64 | ||||
| -rw-r--r-- | src/App.js | 92 |
2 files changed, 145 insertions, 11 deletions
diff --git a/src/App.css b/src/App.css index d4cd6e6..942b193 100644 --- a/src/App.css +++ b/src/App.css @@ -4,16 +4,16 @@ position: fixed; z-index: 1; top: 10%; - left: 8%; - /* color: #FFFFFF; */ - /* background-color: #111; */ + left: 30%; + color: #FFFFFF; + background-color: #111; overflow-x: hidden; transition: 0.5s; - padding-top: 60px; - /*background-color: #333333;*/ - /*border: 2px solid #BB86fc;*/ - padding: 20px; - margin: 20px; + /* padding-top: 60px; */ + background-color: #333333; + border: 2px solid #BB86fc; + /* padding: 20px; */ + /* margin: 20px; */ border-radius: 5px; overflow: auto; } @@ -26,7 +26,55 @@ .white-content { background: #e4e4e4; } +/* .black-content { + background: #111111; +} */ .toggle-slider { display: flex; } + +.sidenav { + height: 80%; + width: 5%; + position: fixed; + z-index: 1; + top: 5%; + left: 0; + background-color: #111; + overflow-x: hidden; + transition: 0.5s; + padding-top: 60px; + background-color: #333333; + border: 2px solid #BB86fc; + padding: 20px; + margin: 20px; + border-radius: 5px; +} + +.sidenav :hover { + color: #f1f1f1; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + width: 5%; + position: fixed; + overflow: auto; +} + +.sidenavButton { + display: block; + color: #000; + padding: 8px 16px; + background-color: #BB86fc; + text-decoration: none; + border: 1px solid #333333; + border-radius: 5px; +} + +li:last-child { + border-bottom: none; +}
\ No newline at end of file @@ -34,6 +34,7 @@ function App() { </ThemeContext.Consumer> </InputGroup> <TerminalComponent /> + <Sidebar /> </header> </div> ); @@ -58,6 +59,7 @@ class TerminalComponent extends React.Component { selection: "#fff", }, }); + this.command = ""; } componentDidMount() { @@ -76,16 +78,52 @@ class TerminalComponent extends React.Component { // Terminal events this.term.onData((data) => { - this.socket.send(this.encoder.encode("\x00" + data)); + //this.socket.send(this.encoder.encode("\x00" + data)); + + switch (data) { + // text is Enter + case '\r': + if (this.command === "clear") { + this.term.clear(); + } + else { + handleSend(this.encoder.encode("\x00" + this.command)); + } + this.term.write("\r\n$ "); + this.command = ""; + break; + + // text is Backspace + case '\u007F': + if (this.command.length > 0) { + this.command = this.command.substring(0, this.command.length - 1); + this.term.write('\b \b'); + } + break; + + // text is Ctrl+C + case '\u0003': // we don't want to send ctrl+c to the server + //this.term.write('^C'); + break; + + default: + this.command += data; + this.term.write(data); + // if ((data <= String.fromCharCode(0x7B) && data.String.fromCharCode(0x20)) || data >= '\u00a0') { + // } + break; + } }); this.term.onResize((evt) => { - this.socket.send(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows }))) + //this.socket.send(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows }))) + handleSend(this.encoder.encode("\x01" + JSON.stringify({ cols: evt.cols, rows: evt.rows }))); }); this.term.onTitleChange((title) => { document.title = title; }); + // Socket events this.socket.onmessage = (evt) => { @@ -96,7 +134,7 @@ class TerminalComponent extends React.Component { } } this.socket.onclose = (evt) => { - this.term.write("Session terminated"); + this.term.write("Session terminated\r\n$ "); } this.socket.onerror = (evt) => { @@ -105,10 +143,23 @@ class TerminalComponent extends React.Component { } } + const handleSend = (message) => { + if (this.socket.readyState === WebSocket.OPEN) { + // If the socket is open, go ahead and send message + this.socket.send(message); + } + else if (this.socket.readyState === WebSocket.CONNECTING) { + // If the socket is connecting, wait until it is open + // and try again + this.socket.addEventListener('open', () => handleSend(message)); + } + } + this.fitAddon.fit(); } render() { + return ( <div className="terminalContainer"> <div id="xterm" style={{ height: "100%", width: "100%" }} /> @@ -122,4 +173,39 @@ class TerminalComponent extends React.Component { } } +class Sidebar extends React.Component { + // a sidebar which can take you to other pages + // constructor(props) { + // super(props); + // } + + createTemplate(){ + // location.replace("index.html"); + console.log("create template"); + } + toStudentView() { + // location.replace("index.html"); + console.log("student view"); + } + + logOut() { + // location.replace("index.html"); + console.log("log out"); + } + + render() { + return ( + <div className="sidenav"> + <ul> + <li><div class="sidenavButton" onClick={() => this.createTemplate()}>Create Template</div></li> + <li><div class="sidenavButton" onClick={() => this.toStudentView()}>View as Student</div></li> + <li><div class="sidenavButton" onClick={() => this.logOut()}>Log Out</div></li> + </ul> + </div> + ); + } + +} + + export default App; |