ADD: added default scenario button

webapp/src/components/Scenarios/Scenarios.jsx

@@ -1,10 +1,55 @@
 import React from "react";
+import {w3cwebsocket as W3CWebSocket} from "websocket"
 
 
 function Scenarios()
 {
+const config = {
+    // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
+    apiUrl: "192.168.3.13",
+    apiProt: 30747
+    }
+const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+
+client.onmessage = (message) => {
+console.log(message);
+
+}
+
+
+const sendSampleMessage = () =>
+{
+    var msg = 
+    {
+      Data: "TEST",
+      Type: "Save",
+    }
+    console.log(msg);
+  client.send(JSON.stringify(msg));
+
+}
+
+const startSampleScenario = () =>
+{
+    var msg = 
+    {
+      Data: "Scenario",
+      Type: "AutoRaster",
+    }
+    console.log(msg);
+  client.send(JSON.stringify(msg));
+
+}
+
+
 return(
+    <>
     <p>Scenarios</p>
+    <div><button onClick={sendSampleMessage}> Save Scenario</button></div>
+    <div><button onClick={startSampleScenario}> Sample Scenario</button></div>
+
+    </>      
+
 );
 
 }

webapp/src/components/SimControl/SimControl.jsx

@@ -9,7 +9,7 @@ const config = {
     apiUrl: "192.168.3.13",
     apiProt: 30747
   }
-  const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
   
 
 

webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx

@@ -67,6 +67,15 @@ class OpenSeaMap extends Component {
   }
 
 
+  resetFocus(e)
+  {
+
+    this.state.EntityOnFocus = undefined;
+    this.props.setEntityOnFocus(undefined);
+
+  }
+
+
 
   makeIcon(index, entity,props,state)
   {
@@ -110,10 +119,10 @@ class OpenSeaMap extends Component {
             ID: entity.id,
           }
           console.log(JSON.stringify(msg));
+          props.Client.send(JSON.stringify(msg))
           state.EntityOnFocus = undefined;
           props.setEntityOnFocus(undefined)
 
-          props.Client.send(JSON.stringify(msg))
         },
         // separator: true,
     }, {
@@ -123,11 +132,12 @@ class OpenSeaMap extends Component {
       index: 2
   }, {
       text:"Exit",
-      callback: function()
+      callback: this.resetFocus.bind(this),
-      {
+      // function()
-        state.EntityOnFocus = undefined;
+      // {
-        props.setEntityOnFocus(undefined);
+      //   state.EntityOnFocus = undefined;
-      },
+      //   props.setEntityOnFocus(undefined);
+      // },
       // separator: true,
       index: 3
   }]}
@@ -201,12 +211,23 @@ class OpenSeaMap extends Component {
   render() {
 const  LocationFinderDummy = (props) => {
        const map = useMapEvents({
+        
            click(e) {
 
-            props.props.setFocusPosition(e.latlng)
+             console.log(props)
+             props.props.resetFocus();
+            // props.props.state.EntityOnFocus =undefined
+             
+            //   props.props.props.setEntityOnFocus(undefined);
+
+            props.props.props.setFocusPosition(e.latlng)
+            
+            
             // console.log(e.latlng);
            },
        });
+      
+      //   this.state.EntityOnFocus = undefined;
        return null;
    };
     // const positions = this.props.Positions.map((pos, index) => (
@@ -219,7 +240,7 @@ const  LocationFinderDummy = (props) => {
        <MapContainer  center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false}
        
        >
-       <LocationFinderDummy props ={this.props} />
+       <LocationFinderDummy props ={{props:this.props, resetFocus:this.resetFocus.bind(this)}} />
 
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

webapp/src/components/SimControl/components/control/EntityControl.jsx

@@ -16,7 +16,7 @@ import './controls.css'
 function EntityControl(props)
 {    
    const RoundPrecision = 2;
-   const RoundPrecisionPosition = 4;
+   const RoundPrecisionPosition = 5;
 
 
     const [Entity, setEntity] = useState(undefined);
@@ -65,12 +65,13 @@ function EntityControl(props)
 
     useEffect(() => {
         if(props.PositionCliecked !== undefined)
-        {
+        {   
-            console.log(props.PositionCliecked)
+            //  setEntity(undefined);
+            // console.log(props.PositionCliecked)
             var pos = [0,0];
             pos[0] = props.PositionCliecked.lat;
             pos[1] = props.PositionCliecked.lng
-            setFormData({...formData,position:pos});
+            setFormData({...formData,name:"",course:0,speed:0,position:pos});
         }
 
     },[props.PositionCliecked])
@@ -218,16 +219,15 @@ const handleClick = (e) => {
             }
         }
 
-        // const handleChange = (event) => {
+    
-        //     const { name, value } = event.target;
+
-        //     setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
+      
-        //   };
 
         const handleSubmit = (e) => {
             e.preventDefault();
             // console.log(e.target.data);
             // console.log(formData)
-            console.log(Entity)
+            // console.log(Entity)
             if(Entity === undefined) 
             {
                 var msg = 
@@ -276,7 +276,7 @@ const handleClick = (e) => {
     return (
 
     <div>
-    <div><button onClick={ emptyForm}> New</button>    </div>
+    
 
     <form onSubmit={handleSubmit}>
         <div className="ControlsComponent">
@@ -322,6 +322,7 @@ const handleClick = (e) => {
             <InputGroup className="mb-3">
                 <InputGroup.Text id="basic-addon1">Name</InputGroup.Text>
                 <Form.Control
+                required
                 name="Name"
                 placeholder="Name"
                 aria-label="Name"
@@ -380,11 +381,17 @@ const handleClick = (e) => {
             </div>
         </div>
 
-        <div> <button type='submit'>Save</button> </div>
+        <div className="TopButtons">
+            <div><button onClick={ emptyForm}> New</button></div>   
+            <div><button type="button" onClick={resetForm}> Reset</button></div> 
+            <div><button type='submit'>Save</button> </div> 
+        </div>
+        
 
         </div>
     </form>
-    <button onClick={resetForm}> RESET</button>
+
+
     </div>
     );
 }

webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss

@@ -2,8 +2,9 @@
 {
  display: flex;
  max-height: 40%;
- height: 300px;
+ height: 400px;
  display: block;
+ overflow: scroll;
 }
 
 td

webapp/src/components/SimControl/components/control/controls.css

@@ -56,20 +56,12 @@ float: left;
 display: contents;
 }
 
-/* .parent {
+.TopButtons
-    display: grid;
+{
-    grid-template-columns: repeat(2, 1fr);
+    width: 100%;
-    grid-template-rows: repeat(3 2em);
+    justify-content: space-evenly;
-    grid-column-gap: 0px;
+    display: flex;
-    grid-row-gap: 0px;
+}
-    }
-    
-    .div1 { grid-area: 1 / 1 / 2 / 3; }
-    .div2 { grid-area: 2 / 1 / 3 / 2; }
-    .div3 { grid-area: 2 / 2 / 3 / 3; }
-    .div4 { grid-area: 3 / 2 / 4 / 3; }
-    .div5 { grid-area: 3 / 1 / 4 / 2; } */
-
 
     .parent {
         display: grid;

webapp/src/components/SimControl/components/control/controls.jsx

@@ -5,7 +5,8 @@ import  Tracklist from './Tracklist'
 import EntityControl from './EntityControl';
 import round from '../../../Utils';
 // import {w3cwebsocket as W3CWebSocket} from "websocket"
-
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
 
 
 class Controls extends React.Component
@@ -25,6 +26,21 @@ state = {
   
   }
 
+
+
+ saveScenario(e)  
+ {   
+  var msg = 
+  {
+    Data: "Scenario",
+    Type: "Save",
+  }
+
+    this.props.Client.send(JSON.stringify(msg))
+     console.log("save scenario")
+
+ }
+
  
   
   render() {
@@ -47,26 +63,6 @@ state = {
             {
               val.dragged = false;
             }
-          
-              // console.log(SelectedEntity);
-              
-            //   if(SelectedEntity.NewPos !== undefined)
-            //   {
-            //   // Object.assign(tmp, {NewPos: [{},{}]});
-            //   Object.assign(val, {NewPos: [{},{}]});
-
-            //   // tmp.OldPos = val.Position;
-            //   // Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]});
-            //   // val.NewPos = SelectedEntity.NewPos;
-            //   val.NewPos[0] = round(SelectedEntity.NewPos[0],3);
-            //   val.NewPos[1] = round(SelectedEntity.NewPos[1],3);
-
-            //   // tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3);
-            //   // tmp.NewPos[1] = round(SelectedEntity.NewPos[1],3);
-
-            // }
-
-            // tmp.NewPos = SelectedEntity.NewPos;
           }
           return tmp;
         })
@@ -76,14 +72,39 @@ state = {
     }
 
 
+
+
     // console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
         return (
           <div className="controls">
             <Tracklist entities= {this.props.Entities} />
           <br />
-            <div>
+          <div><button onClick={ this.saveScenario}> Save Scenario</button></div>      
+
+              <Tabs
+              defaultActiveKey="home"
+              transition={false}
+              id="noanim-tab-example"
+              className="mb-3"
+            >
+              <Tab eventKey="home" title="Home">
+                <EntityControl 
+                  Functions = {this.props.Functions} 
+                  Client = { this.props.Client } 
+                  Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} 
+                  EntityOnFocus= {this.props.EntityOnFocus} 
+                  PositionCliecked =  {this.props.PositionClicked}
+                />        
+              </Tab>
+              <Tab eventKey="internalTrack" title="Internaltrack">
+               Internaltracklist
+              </Tab>
+              <Tab eventKey="orders" title="Orders">
+               Orders
+              </Tab>
+            </Tabs>
+            <div className="controls">
               {/* <button onClick={this.props.updateEntities}>update</button>                 */}
-                  <EntityControl Functions = {this.props.Functions} Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} EntityOnFocus= {this.props.EntityOnFocus} PositionCliecked =  {this.props.PositionClicked}/>        
 
             </div>
           </div>