Container CSS done

Co-authored-by: Anthony Schneider <BoredOY@users.noreply.github.com>
Co-authored-by: Toby Vincent <tobyv13@gmail.com>

3 files changed, 78 insertions, 27 deletions

diff --git a/src/App.css b/src/App.css
index 6a4ae1c..d2852d0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,7 @@
+/* make the body background color black */
+body {
+  background-color: rgb(65, 65, 65);
+}
 .terminalContainer {
   height: 75%;
   width: 60%;
diff --git a/src/App.js b/src/App.js
index e460b13..d7f0f32 100644
--- a/src/App.js
+++ b/src/App.js
@@ -42,11 +42,11 @@ function App() {
 class TerminalManager extends React.Component {
   constructor(props) {
     super(props);
-    const ogTermId = (new Date().getMilliseconds()).toString();
+    this.termsMade = 0
     this.state = {
       curTermID: 0,
       terminals: [
-        <TerminalComponent key={ogTermId} createdAt={ogTermId}/>
+        <TerminalComponent key={this.termsMade} createdAt={this.termsMade}/>
       ],
       numberOfTerminals: 1,
     };
@@ -91,8 +91,11 @@ class TerminalManager extends React.Component {
       return;
     }
 
-    let termId = (new Date().getMilliseconds()).toString();
+    let termId;
+    //termId = (new Date().getMilliseconds()).toString();
+    termId = this.termsMade + 1;
     curTerminals.push(<TerminalComponent key={termId} createdAt={termId}/>);
+    this.termsMade = termId;
 
     this.setState({
       curTermID: id,
@@ -103,8 +106,6 @@ class TerminalManager extends React.Component {
       //console.log("   createNewTerminal:  terminals are below");
       //console.log(this.state.terminals);
       //console.log("   createNewTerminal:  numberOfTerminals:  " + this.state.numberOfTerminals);
-
-      this.render();
     }
     );
   }
@@ -175,6 +176,29 @@ class TerminalManager extends React.Component {
     );
   }
 
+  goToThisContainer = (containerId) =>
+  {
+    let containers = this.state.terminals.slice();
+    let i = 0;
+
+    //console.log("Searching for Container " + containerId);
+
+    while (i < containers.length && containers[i].key !== containerId)
+    {
+      //console.log("Not key " + containers[i].key);
+      i++;
+    }
+
+    i = i % this.state.numberOfTerminals;
+    //console.log("curContainer is " + curContainer);
+
+    this.setState({
+      curTermID: i
+    }, () => {
+      this.render();
+    });
+  }
+
   goToNextTerminal = () =>
   {
     //console.log("   goToNextTerminal:  Switching to next terminal")
@@ -216,7 +240,7 @@ class TerminalManager extends React.Component {
   }
 
   render() {
-    let id = this.state.curTermID;
+    //let id = this.state.curTermID;
     //console.log("   render(): Current term");
     //console.log(this.state.terminals[id]);
 
@@ -239,10 +263,12 @@ class TerminalManager extends React.Component {
       <div>
         { arr }
         <Sidebar 
-          createNewTerminal={() => this.createNewTerminal()}
+          containers={this.state.terminals} 
+          createNewTerminal={this.createNewTerminal}
           deleteCurTerminal={() => this.deleteCurTerminal()}
           goToNextTerminal={() => this.goToNextTerminal()}
           goToLastTerminal={() => this.goToLastTerminal()}
+          goToThisContainer={this.goToThisContainer}
         />
       </div>
     );
@@ -355,12 +381,18 @@ class TerminalComponent extends React.Component {
 
 class Sidebar extends React.Component {
   // a sidebar which can take you to other pages
-  // constructor(props) {
-  //   super(props);
-  // }
+  constructor(props) {
+    super(props);
+    //console.log("this.props.conatiners");
+    //console.log(this.props.containers);
+    this.state = {
+      //containers: this.props.containers
+    }
+  }
+
 
   createTemplate(){
-    // location.replace("index.html");
+    //location.replace("index.html");
     //console.log("create template");
   }
 
@@ -369,18 +401,6 @@ class Sidebar extends React.Component {
     //console.log("student view");
   }
 
-  createNewTerminal() {
-
-  }
-
-  goToNextTerminal() {
-
-  }
-
-  goToLastTerminal() {
-
-  }
-
   logOut() {
     // location.replace("index.html");
     window.location.replace("/");
@@ -388,15 +408,39 @@ class Sidebar extends React.Component {
   }
 
   render() {
+    const containers = this.props.containers;
+    let containerButtons = []; 
+    let numOfContainers = containers.length;
+    //console.log("containers");
+    //console.log(this.state.containers);
+    
+    if (containers === null || numOfContainers < 1)
+    {
+      containerButtons = [
+        <li key={'goNext'}><div key={'goNext'} className="sidenavButton" onClick={() => this.props.goToNextTerminal()}>Next Container</div></li>,
+        <li key={'goLast'}><div key={'goLast'} className="sidenavButton" onClick={() => this.props.goToLastTerminal()}>Last Container</div></li>
+      ]
+    }
+    else
+    {
+      for (let i = 0; i < numOfContainers; i++)
+      {
+        const containerKey = containers[i].key;
+        const containerId = 'goTo' + containerKey;
+        //console.log("Got key " + containerKey)
+        //console.log("Got id " + containerId);
+        containerButtons.push(<li key={containerId}><div key={containerId} className='sidenavButton' onClick={() => this.props.goToThisContainer(containerKey)}>Container {containerKey}</div></li>)
+      }
+    }
+
     return (
       <div className="sidenav">
         <ul>
         <li><div className="sidenavButton" onClick={() => this.createTemplate()}>Create Template</div></li>
         <li><div className="sidenavButton" onClick={() => this.toStudentView()}>View as Student</div></li>
-        <li><div className="sidenavButton" onClick={() => this.props.createNewTerminal()}>Create New Terminal</div></li>
-        <li><div className="sidenavButton" onClick={() => this.props.deleteCurTerminal()}>Delete Current Terminal</div></li>
-        <li><div className="sidenavButton" onClick={() => this.props.goToNextTerminal()}>Next Terminal</div></li>
-        <li><div className="sidenavButton" onClick={() => this.props.goToLastTerminal()}>Last Terminal</div></li>
+        <li><div className="sidenavButton" onClick={() => this.props.createNewTerminal()}>Create New Container</div></li>
+        <li><div className="sidenavButton" onClick={() => this.props.deleteCurTerminal()}>Delete Current Container</div></li>
+        { containerButtons }
         <li><div className="sidenavButton" onClick={() => this.logOut()}>Log Out</div></li>
         </ul>
       </div>
diff --git a/src/Login.css b/src/Login.css
index 895a48f..f4bd4b4 100644
--- a/src/Login.css
+++ b/src/Login.css
@@ -1,3 +1,6 @@
+body {
+    background-color: rgb(65, 65, 65);
+  }
 .login{
     width: 30%;
     height: 30%;