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

ADD: the api call to create a new Entity

Browse Source
This commit is contained in:
hwinkel
2023-10-02 17:56:53 +02:00
parent 229a4d7906
commit 2518b43645
4 changed files with 136 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/src/App.jsx
View File

@@ -29,7 +29,8 @@ const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
class App extends Component {
state = {
Entities: [],
EntityOnFocus: undefined
EntityOnFocus: undefined,
PositionClicked: undefined
}
componentDidMount() {
@@ -105,6 +106,16 @@ class App extends Component {
}
setFocusPosition(props)
{
// console.log(Entity);
this.setState({
PositionClicked: props
});
}
render() {
const {name} = this.state;
@@ -113,9 +124,9 @@ class App extends Component {
<Header />
<div className="Content">
<Controls Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} />
<Controls 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)}/>
<OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
</div>

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

@@ -1,7 +1,7 @@
// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup, Tooltip } from 'react-leaflet'
import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
import { friend,Hostile, iconShip,createIcon } from "./icon";
import "./OpenSeaMap.scss";
import {w3cwebsocket as W3CWebSocket} from "websocket";
@@ -11,7 +11,7 @@ import ContainerDimensions from 'react-container-dimensions';
class OpenSeaMap extends Component {
state = {
EntityOnFocus: undefined
EntityOnFocus: undefined,
}
updateDimensions() {
const height = window.innerWidth >= 992 ? window.innerHeight : 400
@@ -36,9 +36,13 @@ class OpenSeaMap extends Component {
handleClick(e)
{
// console.log(e.target)
// this.setState({ currentPos: e.latlng });
console.log(e.latlng);
console.log("hello world");
}
// MarkerEventHandler = useMemo(
// (e) => ({
// dragend() {
@@ -115,7 +119,24 @@ class OpenSeaMap extends Component {
);
}
setPos(props)
{
console.log(props);
this.props.setFocusPosition([1,2])
}
render() {
const LocationFinderDummy = (props) => {
const map = useMapEvents({
click(e) {
props.props.setFocusPosition(e.latlng)
// console.log(e.latlng);
},
});
return null;
};
// const positions = this.props.Positions.map((pos, index) => (
// <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
// ));
@@ -123,6 +144,8 @@ class OpenSeaMap extends Component {
return (
<div className='map' style={{ height: this.state.height }} >
<MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
<LocationFinderDummy props ={this.props} />
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<TileLayer

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

@@ -10,11 +10,11 @@ function EntityControl(props)
const [Entity, setEntity] = useState('');
const [Entity, setEntity] = useState({});
const [Course, setCourse] = useState('');
// const [Course, setCourse] = useState('');
const [CourseInControl, setCourseInControl] = useState(false);
const [Speed, setSpeed] = useState();
// const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0]});
@@ -30,8 +30,14 @@ function EntityControl(props)
if(props.Entity !== undefined)
{
if(props.Entity.NewPos !== undefined)
{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.NewPos})
}
else
{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}
}else{
setFormData({name:"",course:"",speed:"",position:['','']})
@@ -45,6 +51,19 @@ function EntityControl(props)
},[props.Entity,props]);
useEffect(() => {
if(props.PositionCliecked !== undefined)
{
console.log(props.PositionCliecked)
var pos = [0,0];
pos[0] = props.PositionCliecked.lat;
pos[1] = props.PositionCliecked.lng
setFormData({...formData,position:pos});
}
},[props.PositionCliecked])
// Entity.Entity.Course
@@ -76,11 +95,16 @@ const handleClick = (e) => {
}
};
const handleNameInput = (e) => {
setFormData({...formData,name:e.currentTarget.value});
}
const emptyForm= (e) =>
{
setFormData({name:'',course:'',speed:'',position:['','']})
setEntity('')
setEntity(undefined)
}
@@ -91,8 +115,37 @@ const handleClick = (e) => {
const handleSubmit = (e) => {
e.preventDefault();
console.log(e.target.data);
console.log(formData)
// console.log(e.target.data);
// console.log(formData)
console.log(Entity)
if(Entity === undefined)
{
var msg =
{
Data: "Entity",
Type: "New",
Speed: formData.speed,
Course: formData.course,
Position: formData.position
}
}else {
var msg =
{
Data: "Entity",
Type: "Update",
ID: Entity.id,
Speed: formData.speed,
Course: formData.course,
Position: formData.position
}
}
console.log(msg);
// props.Client.send(JSON.stringify(msg));
// alert(`Course: ${formData.course}`);
}
// console.log(Entity)
@@ -107,7 +160,7 @@ const handleClick = (e) => {
<div class="parent">
<div class="div1">
<div class="NameInput">
<input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.name} />
<input className="EntityinputField NameInput" name="Name" type="text" onChange={handleNameInput} value={formData.name} />
</div>
</div>
<div class="div2">

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

@@ -48,22 +48,47 @@ state = {
{
if(SelectedEntity !== undefined)
{
let tmp = [];
var tmp = {};
// tmp.NewPos= new Array(0,0);
// console.log(tmp);
Entities.map((val) => {
if(val.id === SelectedEntity.Name)
{
tmp = val
// tmp = JSON.parse(JSON.stringify(val));
// console.log(tmp);
// console.log(SelectedEntity);
if(SelectedEntity.NewPos !== undefined)
{
tmp.OldPos = val.Position;
tmp.Position[0] = round(SelectedEntity.NewPos[0],3);
tmp.Position[1] = round(SelectedEntity.NewPos[1],3);
// 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);
}else{
// Object.assign(tmp, {NewPos: val.Position});
// tmp.NewPosition[1] = val.Position[1];
}
tmp.NewPos = SelectedEntity.NewPos;
// tmp.NewPos = SelectedEntity.NewPos;
}
return tmp;
})
// console.log(tmp);
return tmp;
}
}
@@ -76,7 +101,7 @@ state = {
<br />
<div>
<button onClick={this.props.updateEntities}>update</button>
<EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}/>
<EntityControl Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} PositionCliecked = {this.props.PositionClicked}/>
</div>
</div>