diff options
| -rw-r--r-- | adminPage.html | 88 | ||||
| -rw-r--r-- | functions.js | 21 | ||||
| -rw-r--r-- | index.html | 107 | ||||
| -rw-r--r-- | studentPage.html | 93 |
4 files changed, 180 insertions, 129 deletions
diff --git a/adminPage.html b/adminPage.html deleted file mode 100644 index b8470e6..0000000 --- a/adminPage.html +++ /dev/null @@ -1,88 +0,0 @@ -<!--adminPage.html--> -<!DOCTYPE html> -<html lang="en"> - <head> - <meta - charset="utf-8" - name="viewport" - content="width=device-width, initial-scale=1" - /> - <title>SIUE Zone Container Manager - Admin</title> - - <link rel="stylesheet" href="ZoneStyle.css" /> - <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" /> - <script src="node_modules/xterm/lib/xterm.js"></script> - --> - <!-- <script type="module" src="./node_modules/xterm/lib/xterm.js"></script> --> - <!-- <script src="functions.js"></script> --> - </head> - - <body> - <!-- sidebar on the left --> - <div class="sidenav" id="sidebar"> - <ul> - <li><a href="#">Create Template</a></li> - <li><a href="#" onclick="toStudentView()">View as Student</a></li> - <li><a href="#" onclick="logOut()">Log Out</a></li> - </ul> - </div> - <!-- sidebar on the left ends --> - <!-- main container --> - <div class="terminalContainer" id="terminal"></div> - <!-- main container ends--> - <!-- topology summary --> - <div class="topolSumContainer"> - <h2>Topology Summary</h2> - <p>Topology summary will go here</p> - </div> - <!-- topology summary ends--> - <!-- container summary --> - <div class="containSumContainer"> - <h2>Container Summary</h2> - <p>Container summary will go here</p> - </div> - <!-- <script> - var term = new Terminal({rows: 48, cols: 140}); - term.open(document.getElementById('terminal')); - term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ') - </script> --> - <!-- <script type="module" src="./functions.js"></script> --> - <script> - //create a terminal which users can type into - var term = new Terminal({ - rows: 48, - cols: 140, - cursorBlink: true, - useStyle: true, - theme: { - foreground: "#fff", - background: "#000", - cursor: "#fff", - cursorAccent: "#000", - selection: "#fff", - }, - }); - var termPrompt = "$ "; - var command = ""; - term.open(document.getElementById("terminal")); - term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ "); - term.onKey(function (key, ev) { - if (key.keyCode == 8) { - //backspace - if (command.length > 0) { - command = command.substring(0, command.length - 1); - term.write("\b \b"); - } - } else if (key.keyCode == 13) { - //enter - term.write("\n" + termPrompt + command); - command = ""; - } else { - //any other key - command += key.key; - term.write(key.key); - } - }); - </script> - </body> -</html> diff --git a/functions.js b/functions.js index 70ea7e1..62aca84 100644 --- a/functions.js +++ b/functions.js @@ -1,22 +1,11 @@ -import React from 'react'; -import { render } from 'react-dom'; -import Terminal from 'xterm'; -import 'xterm/lib/xterm.css'; - +//import Terminal from './node_modules/xterm'; +//import "./node_modules/xterm/css/xterm.css"; +/* const styles = { fontFamily: 'sans-serif', textAlign: 'center', }; -const App = () => ( - <div style={styles}> - <h2>uhhh terminal {'\u2728'}</h2> - </div> -); - -//Branch Check - -render(<App />, document.getElementById('rootContainer')); var terminal = new Terminal({ rows: 48, cols: 140 }); terminal.open(document.getElementById('terminal'),false); @@ -69,9 +58,9 @@ terminal.on('paste', terminal.write(copiedData); } ); - +*/ function toStudentView() { - location.replace("index.html") + location.replace("studentPage.html") } function logOut() { location.replace("login.html") @@ -1,45 +1,102 @@ -<!--index.html--> +<!--adminPage.html--> <!DOCTYPE html> <html lang="en"> + <head> + <meta + charset="utf-8" + name="viewport" + content="width=device-width, initial-scale=1" + /> + <title>SIUE Zone Container Manager - Admin</title> -<head> - <title>SIUE Zone Container Manager</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="ZoneStyle.css"> -</head> - -<body> + <link rel="stylesheet" href="ZoneStyle.css" /> + <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" /> + <script src="node_modules/xterm/lib/xterm.js"></script> + <script src="functions.js"></script> + </head> + <body> <!-- sidebar on the left --> <div class="sidenav" id="sidebar"> - <ul> - <li><a href="#" onclick="logOut()">Log Out</a></li> - </ul> + <ul> + <li><a href="#">Create Template</a></li> + <li><a href="#" onclick="toStudentView()">View as Student</a></li> + <li><a href="#" onclick="logOut()">Log Out</a></li> + </ul> </div> <!-- sidebar on the left ends --> <!-- main container --> - <div class="terminalContainer"> - <h2>Container</h2> - <p>Container will go here</p> - </div> + <div class="terminalContainer" id="terminal"></div> <!-- main container ends--> <!-- topology summary --> <div class="topolSumContainer"> - <h2>Topology Summary</h2> - <p>Topology summary will go here</p> + <h2>Topology Summary</h2> + <p>Topology summary will go here</p> </div> <!-- topology summary ends--> <!-- container summary --> <div class="containSumContainer"> - <h2>Container Summary</h2> - <p>Container summary will go here</p> + <h2>Container Summary</h2> + <p>Container summary will go here</p> </div> - + <!-- <script> + var term = new Terminal({rows: 48, cols: 140}); + term.open(document.getElementById('terminal')); + term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ') + </script> --> + <!-- <script type="module" src="./functions.js"></script> --> <script> - function logOut() { - location.replace("login.html") + //create a terminal which users can type into + var term = new Terminal({ + rows: 48, + cols: 140, + cursorBlink: true, + useStyle: true, + theme: { + foreground: "#fff", + background: "#000", + cursor: "#fff", + cursorAccent: "#000", + selection: "#fff", + }, + }); + var termPrompt = "$ "; + var command = ""; + term.open(document.getElementById("terminal")); + term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ "); + term.onKey(function (key) { + //console.log("Key is '" + key.key + "'"); + + switch (key.key) { + //backspace + case '\u007F': + //console.log("Backspace found."); + if (command.length > 0) { + command = command.substring(0, command.length - 1); + term.write('\b \b'); + } + break; + + //enter + case '\r': + //console.log("Enter found."); + if (command == 'clear') { + term.clear(); + } + + command = ""; + term.writeln(''); + term.write(termPrompt + command); + break; + + //any other key + default: + command += key.key; + term.write(key.key); + break; } + //console.log("command is '" + command + "'"); + }); </script> -</body> - -</html>
\ No newline at end of file + </body> +</html> diff --git a/studentPage.html b/studentPage.html new file mode 100644 index 0000000..770d7c4 --- /dev/null +++ b/studentPage.html @@ -0,0 +1,93 @@ +<!--index.html--> +<!DOCTYPE html> +<html lang="en"> + +<head> + <title>SIUE Zone Container Manager</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <link rel="stylesheet" href="ZoneStyle.css"> + <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" /> + <script src="node_modules/xterm/lib/xterm.js"></script> + <script src="functions.js"></script> +</head> + + <body> + + <!-- sidebar on the left --> + <div class="sidenav" id="sidebar"> + <ul> + <li><a href="#" onclick="logOut()">Log Out</a></li> + </ul> + </div> + <!-- sidebar on the left ends --> + <!-- main container --> + <div class="terminalContainer" id="terminal"></div> + <!-- main container ends--> + <!-- topology summary --> + <div class="topolSumContainer"> + <h2>Topology Summary</h2> + <p>Topology summary will go here</p> + </div> + <!-- topology summary ends--> + <!-- container summary --> + <div class="containSumContainer"> + <h2>Container Summary</h2> + <p>Container summary will go here</p> + </div> + <script> + //create a terminal which users can type into + var term = new Terminal({ + rows: 48, + cols: 140, + cursorBlink: true, + useStyle: true, + theme: { + foreground: "#fff", + background: "#000", + cursor: "#fff", + cursorAccent: "#000", + selection: "#fff", + }, + }); + var termPrompt = "$ "; + var command = ""; + term.open(document.getElementById("terminal")); + term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ "); + term.onKey(function (key) { + console.log("Key is '" + key.key + "'"); + + switch (key.key) { + //backspace + case '\u007F': + console.log("Backspace found."); + if (command.length > 0) { + command = command.substring(0, command.length - 1); + term.write('\b \b'); + } + break; + + //enter + case '\r': + console.log("Enter found."); + if (command == 'clear') { + term.clear(); + } + + command = ""; + term.writeln(''); + term.write(termPrompt + command); + break; + + //any other key + default: + command += key.key; + term.write(key.key); + break; + } + console.log("command is '" + command + "'"); + }); + </script> + </body> + +</html>
\ No newline at end of file |