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

ADD: added util function and fix problem with updatin entityOnFocus

Browse Source
This commit is contained in:
hwinkel
2023-10-18 22:17:52 +02:00
parent 32fc4ba9df
commit a4cd331152
7 changed files with 107 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
webapp/src/App.jsx
View File

@@ -33,6 +33,8 @@ class App extends Component {
PositionClicked: undefined
}
componentDidMount() {
console.log(config.apiUrl);
@@ -48,17 +50,46 @@ class App extends Component {
{
// console.log(this.state.EntityOnFocus);
this.setState((state) => ({
Entities: structuredClone(dataFromServer.Entities)
var tmp = []
if(this.state.Entities.length !== 0){
dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
this.state.Entities.forEach((elementStored, indexStore) => {
if(elementFromWS.id === elementStored.id)
{
if(elementStored.onFocus !==true | elementStored.onFocus === undefined)
{
tmp.push(elementFromWS);
}else
{
tmp.push(elementStored);
}
}
});
});
}else{
tmp = dataFromServer.Entities;
}
// console.log(tmp);
this.setState((state) => ({
// Entities: structuredClone(dataFromServer.Entities)
Entities: structuredClone(tmp)
})
)
}
}
/// interval for updates
setInterval(() => {
// this.updateEntities();
}, 1000);
this.updateEntities();
}, 2000);
}
@@ -103,6 +134,22 @@ class App extends Component {
});
}
resetEntityOnFocus()
{
if(this.state.EntityOnFocus !== undefined)
{
this.state.Entities.map((element ,index) => {
if(element.id === this.state.EntityOnFocus.EntityID)
{
this.state.Entities[index].onFocus = undefined;
}
})
console.log(this.state.Entities)
this.setState({
EntityOnFocus: undefined
})
}
}
setFocusPosition(props)
@@ -114,7 +161,10 @@ class App extends Component {
});
}
Functions = {
updateEntities: this.updateEntities.bind(this),
resetEntityOnFocus: this.resetEntityOnFocus.bind(this)
}
render() {
const {name} = this.state;
@@ -123,7 +173,7 @@ class App extends Component {
<Header />
<div className="Content">
<Controls Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
<Controls Functions= {this.Functions} Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
<OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
</div>

8
webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
View File

@@ -15,7 +15,7 @@ class OpenSeaMap extends Component {
EntityOnFocus: undefined,
}
updateDimensions() {
const height = window.innerWidth >= 992 ? window.innerHeight : 400
const height = window.innerWidth >= 950 ? window.innerHeight : 400
this.setState({ height: height })
}
@@ -39,9 +39,9 @@ class OpenSeaMap extends Component {
{
// console.log(e.target)
// this.setState({ currentPos: e.latlng });
console.log(e.latlng);
// console.log(e.latlng);
console.log("hello world");
// console.log("hello world");
}
@@ -83,7 +83,7 @@ class OpenSeaMap extends Component {
}
state.EntityOnFocus = Ent;
props.setEntityOnFocus(Ent)
console.log(state.EntityOnFocus);
// console.log(state.EntityOnFocus);
}
}, {
text:"Delete",

2
webapp/src/components/OpenSeaMap/OpenSeaMap.scss
View File

@@ -11,7 +11,7 @@
// display: flex;
padding-top: 10px;
// height: 750px;
width: 75.5%;
width: 72%;
// padding-left: 20%;
display: inline-flex;
// height: 80%;

6
webapp/src/components/Utils.jsx Normal file
View File

@@ -0,0 +1,6 @@
const round = (n, dp) => {
const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
return Math.round(n * h) / h
}
export default round

37
webapp/src/components/control/EntityControl.jsx
View File

@@ -46,7 +46,7 @@ function EntityControl(props)
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}
}else{
setFormData({name:"",course:"",speed:"",position:['','']})
// setFormData({name:"",course:"",speed:"",position:['','']})
}
// setFormData({speed:props.Entity.Speed})
@@ -77,7 +77,8 @@ function EntityControl(props)
const handleClick = (e) => {
if(e.detail === 2)
{
setCourseInControl(true);
console.log(e)
// setCourseInControl(true);
e.target.readOnly = false;
// e.target.style = "border: 1px solid"
}
@@ -94,24 +95,48 @@ const handleClick = (e) => {
};
const handleSpeedInput= (e) => {
console.log(e.target)
// console.log(e.target)
if(!isNaN(e.nativeEvent?.data))
{
setFormData({...formData,speed:e.currentTarget.value});
}
console.log(formData.speed)
};
const handleNameInput = (e) => {
setFormData({...formData,name:e.currentTarget.value});
}
const handleInput = (e) => {
console.log(e.target.name)
switch (e.target.name) {
case "Lat":
if(!isNaN(e.nativeEvent?.data) )
{
setFormData({...formData,position:[e.currentTarget.value,formData.position[1],formData.position[2]] });
}
break;
case "Lon":
setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
break;
case "Height":
setFormData({...formData,position:[formData.position[0],formData.position[1],e.currentTarget.value] });
break;
default:
break;
}
}
const emptyForm= (e) =>
{
setFormData({name:'',course:'',speed:'',position:['','']})
setEntity(undefined)
props.Functions.resetEntityOnFocus();
}
@@ -240,14 +265,14 @@ const handleClick = (e) => {
<div class="div7">
<div class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Lat</span>
<input className="ControlInput NumberInputs" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} />
<input className="ControlInput NumberInputs" name="Lat" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.position[0]} />
</div>
</div>
<div class="div8">
<div class="input-group mb-3 NumberInputsGroup" >
<span class="input-group-text">Lon</span>
{/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */}
<input className="ControlInput NumberInputs" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
<input className="ControlInput NumberInputs" name="Lon" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.position[1]}/>
</div>
{/* <div className="flex">
<div className="ControlHeader">Lon:</div>
@@ -257,7 +282,7 @@ const handleClick = (e) => {
<div class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Height</span>
{/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */}
<input className="ControlInput NumberInputs" name="height" readOnly={true} type="text" onClick={handleClick} value={formData.position[2]}/>
<input className="ControlInput NumberInputs" name="Height" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.position[2]}/>
</div>
{/* <div className="ControlHeader">Height:</div>
<div className="flex">

6
webapp/src/components/control/Tracklist/tracklist.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import './tracklist.scss'
import round from '../../Utils';
@@ -31,8 +31,8 @@ class Tracklist extends React.Component
<td >{val.Name}</td>
<td className='TracklistCell'>{val.Course}</td>
<td className='TracklistCell'>{val.Speed}</td>
<td className='TracklistCell'>{val.Position[0]}</td>
<td className='TracklistCell'>{val.Position[1]}</td>
<td className='TracklistCell'>{round(val.Position[0],3)}</td>
<td className='TracklistCell'>{round(val.Position[1],3)}</td>
<td className='TracklistCell'>{val.Type}</td>
<td className='TracklistCell'>{val.Side}</td>

12
webapp/src/components/control/controls.jsx
View File

@@ -3,7 +3,7 @@ import './controls.css'
// import { sendMsg } from '../api';
import Tracklist from './Tracklist'
import EntityControl from './EntityControl';
import round from '../Utils';
// import {w3cwebsocket as W3CWebSocket} from "websocket"
@@ -16,10 +16,10 @@ import EntityControl from './EntityControl';
// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
const round = (n, dp) => {
const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
return Math.round(n * h) / h
}
// const round = (n, dp) => {
// const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
// return Math.round(n * h) / h
// }
class Controls extends React.Component
{
@@ -101,7 +101,7 @@ state = {
<br />
<div>
<button onClick={this.props.updateEntities}>update</button>
<EntityControl Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} PositionCliecked = {this.props.PositionClicked}/>
<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>