diff --git a/webapp/src/components/Scenarios/Scenarios.jsx b/webapp/src/components/Scenarios/Scenarios.jsx index fe86290..2e7c6ec 100644 --- a/webapp/src/components/Scenarios/Scenarios.jsx +++ b/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( + <>

Scenarios

+
+
+ + + ); } diff --git a/webapp/src/components/SimControl/SimControl.jsx b/webapp/src/components/SimControl/SimControl.jsx index 1d7de83..d999b0f 100644 --- a/webapp/src/components/SimControl/SimControl.jsx +++ b/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+"/"); diff --git a/webapp/src/components/SimControl/components/EntityInternalTracklist/index.js b/webapp/src/components/SimControl/components/EntityInternalTracklist/index.js new file mode 100644 index 0000000..e69de29 diff --git a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx index c1bf316..8b27862 100644 --- a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx +++ b/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() - { - state.EntityOnFocus = undefined; - props.setEntityOnFocus(undefined); - }, + callback: this.resetFocus.bind(this), + // function() + // { + // 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) => { - + diff --git a/webapp/src/components/SimControl/components/control/EntityControl.jsx b/webapp/src/components/SimControl/components/control/EntityControl.jsx index 6e2fb5d..3fae0d8 100644 --- a/webapp/src/components/SimControl/components/control/EntityControl.jsx +++ b/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 (
-
+
@@ -322,6 +322,7 @@ const handleClick = (e) => { Name {
-
+
+
+
+
+
+ - + + ); } diff --git a/webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss b/webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss index fca48d5..f1b7bfb 100644 --- a/webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss +++ b/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 diff --git a/webapp/src/components/SimControl/components/control/controls.css b/webapp/src/components/SimControl/components/control/controls.css index 89745e0..7078082 100644 --- a/webapp/src/components/SimControl/components/control/controls.css +++ b/webapp/src/components/SimControl/components/control/controls.css @@ -56,20 +56,12 @@ float: left; display: contents; } -/* .parent { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3 2em); - grid-column-gap: 0px; - 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; } */ - +.TopButtons +{ + width: 100%; + justify-content: space-evenly; + display: flex; +} .parent { display: grid; diff --git a/webapp/src/components/SimControl/components/control/controls.jsx b/webapp/src/components/SimControl/components/control/controls.jsx index f7b9576..bee6758 100644 --- a/webapp/src/components/SimControl/components/control/controls.jsx +++ b/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 (

-
+
+ + + + + + + Internaltracklist + + + Orders + + +
{/* */} -