henry/CloudSimWebApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: added default scenario button

Browse Source
This commit is contained in:
Henry Winkel
2023-11-06 17:44:01 +01:00
parent 3e95bc2633
commit 46f041d58e
8 changed files with 146 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
webapp/src/components/Scenarios/Scenarios.jsx
View File

@@ -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>
</>
);
}

2
webapp/src/components/SimControl/SimControl.jsx
View File

@@ -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+"/");

0
webapp/src/components/SimControl/components/EntityInternalTracklist/index.js Normal file
View File

37
webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx
View File

@@ -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) => {
<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" />

31
webapp/src/components/SimControl/components/control/EntityControl.jsx
View File

@@ -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>
);
}

3
webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss
View File

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

20
webapp/src/components/SimControl/components/control/controls.css
View File

@@ -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;

67
webapp/src/components/SimControl/components/control/controls.jsx
View File

@@ -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>