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

ADD: reworked the entity edit field

Browse Source
This commit is contained in:
Henry Winkel
2023-10-26 17:52:31 +02:00
parent a4cd331152
commit 2d46ee3774
7 changed files with 165 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/Dockerfile
View File

@@ -2,19 +2,21 @@
FROM node:latest
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
# ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package*.json ./
# COPY package-lock.json ./
RUN npm install --force
RUN apt-get update
RUN apt-get upgrade
RUN apt-get upgrade -y
RUN apt-get -y install tcpdump nano netcat-openbsd curl
# install app dependencies
# COPY package-lock.json ./
WORKDIR /app
COPY package*.json ./
RUN npm install --force
# RUN npm install react-scripts@3.4.1 -g --silent
# add app

2
webapp/public/index.html
View File

@@ -26,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Cloud Simulator</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

11
webapp/src/App.jsx
View File

@@ -9,6 +9,7 @@ import Controls from "./components/control/controls";
import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
import {w3cwebsocket as W3CWebSocket} from "websocket"
export const defaultLocale = "en-US";
const config = {
// apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
@@ -112,6 +113,12 @@ class App extends Component {
setEntityOnFocus(Entity)
{
if(Entity == undefined)
{
this.resetEntityOnFocus();
return;
}
this.getEntityFromID(this.state.Entities,Entity)
// console.log(Entity);
this.setState({
@@ -119,6 +126,7 @@ class App extends Component {
});
this.state.Entities.forEach((element, index) => {
console.log(element);
if(element.id === Entity.EntityID)
{
var tmpList = structuredClone(this.state.Entities);
@@ -141,7 +149,7 @@ class App extends Component {
this.state.Entities.map((element ,index) => {
if(element.id === this.state.EntityOnFocus.EntityID)
{
this.state.Entities[index].onFocus = undefined;
this.state.Entities[index].onFocus = false;
}
})
console.log(this.state.Entities)
@@ -167,6 +175,7 @@ class App extends Component {
}
render() {
const {name} = this.state;
return (
<div className="App">

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

@@ -50,10 +50,11 @@ class OpenSeaMap extends Component {
{
var isOnFocus = false;
if(this.state.EntityOnFocus !== undefined){
console.log(entity.id+ " " , this.state.EntityOnFocus);
// console.log(entity.id+ " " , this.state.EntityOnFocus);
if(entity.id === this.state.EntityOnFocus.EntityID)
{isOnFocus = true
{
isOnFocus = true
// if(this.state.EntityOnFocus.NewPos !== undefined)
// {
// entity.pos = this.state.EntityOnFocus.NewPos;
@@ -91,6 +92,11 @@ class OpenSeaMap extends Component {
index: 1
}, {
text:"Exit",
callback: function()
{
state.EntityOnFocus = undefined;
props.setEntityOnFocus(undefined);
},
// separator: true,
index: 2
}]}
@@ -102,16 +108,16 @@ class OpenSeaMap extends Component {
// }]
eventHandlers={{
click: (e) => {
console.log(e.target);
var Ent = {
EntityID : e.target.options.data,
NewPos : undefined
// console.log(e.target);
// var Ent = {
// EntityID : e.target.options.data,
// NewPos : undefined
}
this.setState((state) =>({
EntityOnFocus: Ent
}))
this.props.setEntityOnFocus(Ent);
// }
// this.setState((state) =>({
// EntityOnFocus: Ent
// }))
// this.props.setEntityOnFocus(Ent);
// this.props.setEntityOnFocus(e.target.options.data);
},

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

@@ -17,42 +17,75 @@ function EntityControl(props)
const [Entity, setEntity] = useState({});
const [Entity, setEntity] = useState(undefined);
// const [Course, setCourse] = useState('');
const [CourseInControl, setCourseInControl] = useState(false);
// const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0,0]});
const [formData, setFormData] = useState({name: "",course: "" ,speed: 0,position: [0,0,0]});
useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`;
// console.log(props.Entity);
setEntity(props.Entity);
if(CourseInControl === false)
{
// setSpeed(props.Entity.Speed);
if(props.Entity !== undefined)
// if(Entity.id !== props.Entity.id)
// {
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
console.log(props.Entity)
if(Entity === undefined)
{
setEntity(props.Entity);
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}else if(Entity.id !== props.Entity.id)
{
setEntity(props.Entity);
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
} else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position)
{
setFormData({...formData,position:props.Entity.Position})
}
}else{
// setFormData({name:"",course:"",speed:"",position:['','']})
// setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}
// setFormData({speed:props.Entity.Speed})
// }
// if(CourseInControl === false)
// {
// // setSpeed(props.Entity.Speed);
// 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})
// console.log(props.Entity)
// }
// else
// {
// setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
// }
// }else{
// // setFormData({name:"",course:"",speed:"",position:['','']})
// // if(Entity.id !== props.Entity.id)
// // {
// // setEntity(props.Entity);
// // }
// // console.log(props.Entity)
// }
// // setFormData({speed:props.Entity.Speed})
}
// }
@@ -85,41 +118,93 @@ const handleClick = (e) => {
};
const handleCourseInput= (e) => {
console.log(e.target)
console.log(isNaN(e.nativeEvent?.data))
if(!isNaN(e.nativeEvent?.data))
console.log(e.currentTarget.value)
// console.log(isNaN(e.nativeEvent?.data))
// if(!isNaN(e.nativeEvent?.data))
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null )
{
setFormData({...formData,course:e.currentTarget.value});
if(props.Entity !== undefined)
{
props.Entity.Course = e.currentTarget.value.replace(",",".");
}
}
// if(e.currentTarget.value === "")
// {
// setFormData({...formData,course:0});
// props.Entity.Course = 0;
// }
};
const handleSpeedInput= (e) => {
// console.log(e.target)
if(!isNaN(e.nativeEvent?.data))
console.log(e.nativeEvent?.data)
// if(!isNaN(e.nativeEvent?.data))
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null )
{
setFormData({...formData,speed:e.currentTarget.value});
if(props.Entity !== undefined)
{
props.Entity.Speed = e.currentTarget.value.replace(",",".");
}
}
console.log(formData.speed)
// if(e.nativeEvent?.data == null)
// {
// setFormData({...formData,speed:0});
// props.Entity.Speed = 0;
// }
// console.log(formData.speed)
};
const handleNameInput = (e) => {
setFormData({...formData,name:e.currentTarget.value});
}
const handleInput = (e) => {
console.log(e.target.name)
// console.log(e.target.name)
switch (e.target.name) {
case "Lat":
if(!isNaN(e.nativeEvent?.data) )
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null)
{
// e.currentTarget.value = e.currentTarget.value.replace(",",".");
setFormData({...formData,position:[e.currentTarget.value,formData.position[1],formData.position[2]] });
}
if(props.Entity !== undefined)
{
props.Entity.Position[0]=e.currentTarget.value.replace(",",".");
}
break;
case "Lon":
setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
console.log(e.currentTarget.value)
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null)
{
setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
if(props.Entity !== undefined)
{
props.Entity.Position[1]=e.currentTarget.value.replace(",",".");
}
}
// else if(e.nativeEvent?.data == null) {
// // setFormData({...formData,position:[formData.position[0],0,formData.position[2]] });
// }
break;
case "Height":
@@ -133,13 +218,21 @@ const handleClick = (e) => {
const emptyForm= (e) =>
{
props.Entity.onFocus = undefined;
setFormData({name:'',course:'',speed:'',position:['','']})
setEntity(undefined)
props.Functions.resetEntityOnFocus();
}
const resetForm = (e)=>
{
setFormData({name:props.Entity.Name,course:Entity.Course,speed:Entity.Speed,position:Entity.Position})
props.Entity.Position = Entity.Position;
props.Entity.Course = Entity.Course;
props.Entity.Speed = Entity.Speed;
}
// const handleChange = (event) => {
// const { name, value } = event.target;
// setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
@@ -251,7 +344,7 @@ const handleClick = (e) => {
<div class="input-group mb-3">
<span class="input-group-text">Course</span>
<input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.course} />
<input className="EntityinputField" name="Course" readOnly={false} type="text" onClick={handleClick} onChange={handleCourseInput} value={formData.course} />
</div>
@@ -290,7 +383,8 @@ const handleClick = (e) => {
</div>
</div>
<div> <button type='submit'>Save</button> <button>Delete</button></div>
<div> <button type='submit'>Save</button> <button onClick={resetForm}> RESET</button></div>
</div>
</form>
</div>

2
webapp/src/components/control/controls.css
View File

@@ -44,7 +44,7 @@ width: 50%;
}
.NumberInputs{
width: 3.3em;
width: 4.3em;
}
.NumberInputsGroup
{

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

@@ -100,7 +100,7 @@ state = {
<Tracklist entities= {this.props.Entities} />
<br />
<div>
<button onClick={this.props.updateEntities}>update</button>
{/* <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>