From d573ca1799ba6fe2147b8675356bf316cb2f0258 Mon Sep 17 00:00:00 2001
From: Barakah Quader <barakahq@gmail.com>
Date: Mon, 9 Jul 2018 13:49:32 -0400
Subject: [PATCH] scaled lobby and scenario screen for mobile devices

---
 support/client/lib/index.html  |  2 +-
 support/lobby/index.html       |  2 +-
 support/lobby/lib/Layout.js    | 16 ++++++---
 support/lobby/lib/Login.js     | 29 ++-------------
 support/lobby/lib/Scenarios.js | 64 +++++++++++++++++++++++-----------
 support/lobby/lib/layout.css   |  6 +---
 6 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/support/client/lib/index.html b/support/client/lib/index.html
index 24e9edfcc..7e582e443 100644
--- a/support/client/lib/index.html
+++ b/support/client/lib/index.html
@@ -25,7 +25,7 @@
     <title>Virtual World Framework</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
-    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
     <link rel="stylesheet" type="text/css" href="index.css?mtime=timestamp" />
     <link rel="stylesheet" type="text/css" href="vwf/view/editor/editor.css?mtime=timestamp" />
diff --git a/support/lobby/index.html b/support/lobby/index.html
index 788a024e2..1b9b73e7e 100644
--- a/support/lobby/index.html
+++ b/support/lobby/index.html
@@ -4,7 +4,7 @@
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=.5">
 
   <title>Virtual World Framework lobby</title>
 
diff --git a/support/lobby/lib/Layout.js b/support/lobby/lib/Layout.js
index f7811455f..cc7b5524b 100644
--- a/support/lobby/lib/Layout.js
+++ b/support/lobby/lib/Layout.js
@@ -37,9 +37,12 @@ export default class Layout extends React.Component {
             </Navbar.Header>
             <Navbar.Collapse id="navbar">
               <Nav>
-                { this.state.user.instructor && <NavItem eventKey="scenarios">Scenario Templates</NavItem> }
-                { this.state.user.instructor && <NavItem eventKey="activeSessions">Active Sessions</NavItem> }
-                { this.state.user.instructor && <NavItem eventKey="previousSessions">Previous Sessions</NavItem> }
+                { this.state.user.instructor && <NavItem eventKey="scenarios">Scenario Templates</NavItem> 
+                }
+                { this.state.user.instructor && <NavItem eventKey="activeSessions">Active Sessions</NavItem> 
+                }
+                { this.state.user.instructor && <NavItem eventKey="previousSessions">Previous Sessions</NavItem>
+                }
               </Nav>
               <Navbar.Form pullRight componentClass="form" method="post" action="/logout">
                 <Button type="submit" bsStyle="link"> Logout </Button>
@@ -55,14 +58,16 @@ export default class Layout extends React.Component {
           </Navbar>
           <TabContent animation={ false }>
             { this.state.user.instructor &&
-              <TabPane eventKey="scenarios"><Scenarios records={ this.scenarioRecords() } onServerChange={ this.handleManifest }/></TabPane> }
+              <TabPane eventKey="scenarios"><Scenarios records={ this.scenarioRecords() } onServerChange={ this.handleManifest }/></TabPane> 
+    }
             { true &&
               <TabPane eventKey="activeSessions">
                 <ActiveSessions records={ this.activeSessionRecords() } />
               </TabPane>
             }
             { this.state.user.instructor &&
-              <TabPane eventKey="previousSessions"><PreviousSessions records={ this.previousSessionRecords() }/></TabPane> }
+              <TabPane eventKey="previousSessions"><PreviousSessions records={ this.previousSessionRecords() }/></TabPane> 
+            }
           </TabContent>
         </div>
       </TabContainer>;
@@ -70,6 +75,7 @@ export default class Layout extends React.Component {
       return null;
     }
   }
+  
 
   componentDidMount() {
     this.handleVersion();
diff --git a/support/lobby/lib/Login.js b/support/lobby/lib/Login.js
index 92f5288e9..6dde0bf64 100644
--- a/support/lobby/lib/Login.js
+++ b/support/lobby/lib/Login.js
@@ -162,19 +162,7 @@ setStudent(isStudent){
         </Fade>
 
             </Row>
-        
-            <Row>
-              <FormGroup className="col-sm-12" bsSize="small">
-                {
-                  this.props.flash.map( 
-                        ( message, index ) =>
-                            <Alert key={ index } bsstyle={ bsstyle( message.type ) }> 
-                            { message.message }
-                            </Alert> 
-                    ) 
-                }
-              </FormGroup>
-            </Row>
+       
           </Modal.Body>
           <Modal.Footer>
          <Fade in = {this.state.studentBtn }>
@@ -220,23 +208,10 @@ setStudent(isStudent){
       then( version =>
         this.setState( { version: version || {} } ) ).
       catch( error =>
-        console.log( error.message ) );  /* eslint no-console: "off" */
+        console.log( "Not working" ) );  /* eslint no-console: "off" */
   }
 
 }
 
 /// Convert an Express flash `type` to a Bootstrap alert style.
 
-function bsstyle( flashType ) {
-  switch ( flashType ) {
-    case "success":
-      return "success";
-    // case "warning":
-    // case "warn":
-    //   return "warning";
-    case "error":
-      return "danger";
-    default:
-      return "info";
-  }
-}
diff --git a/support/lobby/lib/Scenarios.js b/support/lobby/lib/Scenarios.js
index 685d70f99..b624611c5 100644
--- a/support/lobby/lib/Scenarios.js
+++ b/support/lobby/lib/Scenarios.js
@@ -19,9 +19,10 @@ export default function Scenarios( props ) {
       </tbody>
     </Table>
     <ReactTable
+     filterable={ !!props.records.length }
       data={ props.records }
       columns={ columns }
-      filterable={ !!props.records.length }
+     
       className="-striped"
       getTrProps={ () => ( {
         fields:
@@ -48,6 +49,7 @@ export default function Scenarios( props ) {
   </React.Fragment>;
 }
 
+
 Scenarios.propTypes = {
   records:
     PropTypes.arrayOf( PropTypes.object ).isRequired,
@@ -86,13 +88,13 @@ class Application extends React.Component {
   render() {
     return  <React.Fragment>
        <tr>
+        
         {/*Click on button to make create info pop up*/}
         <td><Button bsStyle="primary" onClick={this.createScenario.bind(this)} style={{display: this.state.buttonOn ? 'block' : 'none' }}> Create Scenario + </Button></td>
-      
-            
-         {/*will not appear until create button is clicked*/}    
-       <td className="col-sm-8" style = {{width: 'auto'}}>
-        <FormControl disabled = {!this.state.isClicked} style={{display: this.state.isClicked ? 'block' : 'none', width: 'auto'}}
+        
+               {/*will not appear until create button is clicked*/}    
+       <td className = "col-sm-8">
+        <FormControl disabled = {!this.state.isClicked} style={{display: this.state.isClicked ? 'block' : 'none'}}
           name="title"
           type="text"
           placeholder={ Application.TITLE_PLACEHOLDER }
@@ -101,9 +103,8 @@ class Application extends React.Component {
           onChange={ this.handleTitle }
           onKeyPress={ this.handleKeyPress } />
       </td>
-    <td className="col-sm-1">
-        &nbsp;
-      </td>
+   
+        
       <td className="col-sm-1">
 
         <Button type="submit"  disabled = {!this.filled() }
@@ -131,15 +132,18 @@ class Application extends React.Component {
     this.setState( { title: event.target.value } );
   }
 
-   //closes create info upon clicking 'create' button
+   //closes create info upon clicking 'create' button and leads to new page
   handleSubmit = event => {
     this.setState({isClicked: false});
     this.setState({buttonOn: true});
     let properties = {
       name: this.name(),
       title: this.state.title };
+      let newTab = window.open("", "_blank");
+      newTab.document.write("Loading...");
     post( "scenarios", properties ).
       then( result => {
+        newTab.location.href = result.document.uri + "/";
         this.props.onServerChange && this.props.onServerChange() } ).
       catch( error => {
         console.log( error.message ) } );  /* eslint no-console: "off" */
@@ -148,6 +152,7 @@ class Application extends React.Component {
     
   }
   
+  
    removeScenario(){
       this.notCreating(true);
   }
@@ -156,6 +161,7 @@ class Application extends React.Component {
       if(value){
         this.setState({isClicked: false});
         this.setState({buttonOn: true});
+        this.setState({title: ""});
       }
   }
   
@@ -189,43 +195,55 @@ class Application extends React.Component {
     return this.state.title.length > 0;
   }
 
+
+
+
 }
 
-const columns = [ {
+const columns = [     
+    {
   Header:
     "Scenario",
   accessor:
     "scenario.state.scenarioTitle",
   Filter:
-    function Filter( props ) { return <ScenarioFilter { ...props }/> },
-}, {
+    function Filter( props ) { return <ScenarioFilter { ...props }/> 
+                             },
+}, 
+                 
+                 
+{
   Header:
     "Company",
   id:
     "company",
   Cell:
-    function Cell( props ) { return <CompanyCell { ...props }/> },
+    function Cell( props ) { return <CompanyCell { ...props }/> 
+                           },
 }, {
   Header:
     "Platoon",
   id:
     "platoon",
   Cell:
-    function Cell( props ) { return <PlatoonCell { ...props }/> },
+    function Cell( props ) { return <PlatoonCell { ...props }/>
+                           },
 }, {
   Header:
     "Unit",
   id:
     "unit",
   Cell:
-    function Cell( props ) { return <UnitCell { ...props }/> },
+    function Cell( props ) { return <UnitCell { ...props }/> 
+                           },
 }, {
   Header:
     "",
   accessor:
     "scenario.state.scenarioName",
   Cell:
-    function Cell( props ) { return <HiddenCell { ...props }/> },
+    function Cell( props ) { return <HiddenCell { ...props }/> 
+                           },
   sortable:
     false,
   filterable:
@@ -238,7 +256,8 @@ const columns = [ {
   accessor:
     "scenario",
   Cell:
-    function Cell( props ) { return <ActionCell { ...props }/> },
+    function Cell( props ) { return <ActionCell { ...props }/> 
+                           },
   sortable:
     false,
   filterable:
@@ -251,7 +270,8 @@ const columns = [ {
   accessor:
     "scenario",
   Cell:
-    function Cell( props ) { return <ExportCell { ...props }/> },
+    function Cell( props ) { return <ExportCell { ...props }/> 
+                           },
   sortable:
     false,
   filterable:
@@ -268,8 +288,7 @@ class ScenarioFilter extends React.Component {
   };
 
   render() {
-    return <input
-      type="text"
+    return <input type="text"
       placeholder="Search"
       value={ this.props.filter ? this.props.filter.value : "" }
       onChange={ event => this.props.onChange( event.target.value ) } />;
@@ -277,6 +296,9 @@ class ScenarioFilter extends React.Component {
 
 }
 
+    
+
+
 class LobbyCell  extends React.Component {
   static contextTypes = {
     values:
diff --git a/support/lobby/lib/layout.css b/support/lobby/lib/layout.css
index 51d7bd004..1667f6ceb 100644
--- a/support/lobby/lib/layout.css
+++ b/support/lobby/lib/layout.css
@@ -14,10 +14,6 @@ table {
 }
 
 
-.fixed_header thread tr{
-    display: auto;
-}
-
 tbody {
 	display: table-row-group;
 	height: 100%;
@@ -26,7 +22,7 @@ tbody {
 }
 
 tr { display: table-row; table-layout: auto;}
-td { display: table-cell; padding: 6px;}
+td { display: table-cell;}
 
 .logo_img {
   width: 100%;