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 FROM node:latest
# set working directory # set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH # add `/app/node_modules/.bin` to $PATH
# ENV PATH /app/node_modules/.bin:$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 update
RUN apt-get upgrade RUN apt-get upgrade -y
RUN apt-get -y install tcpdump nano netcat-openbsd curl 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 # RUN npm install react-scripts@3.4.1 -g --silent
# add app # 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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Cloud Simulator</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
import {w3cwebsocket as W3CWebSocket} from "websocket" import {w3cwebsocket as W3CWebSocket} from "websocket"
export const defaultLocale = "en-US";
const config = { const config = {
// apiUrl: process.env.REACT_APP_WEBAPP_WS_URL, // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
@@ -112,6 +113,12 @@ class App extends Component {
setEntityOnFocus(Entity) setEntityOnFocus(Entity)
{ {
if(Entity == undefined)
{
this.resetEntityOnFocus();
return;
}
this.getEntityFromID(this.state.Entities,Entity) this.getEntityFromID(this.state.Entities,Entity)
// console.log(Entity); // console.log(Entity);
this.setState({ this.setState({
@@ -119,6 +126,7 @@ class App extends Component {
}); });
this.state.Entities.forEach((element, index) => { this.state.Entities.forEach((element, index) => {
console.log(element); console.log(element);
if(element.id === Entity.EntityID) if(element.id === Entity.EntityID)
{ {
var tmpList = structuredClone(this.state.Entities); var tmpList = structuredClone(this.state.Entities);
@@ -141,7 +149,7 @@ class App extends Component {
this.state.Entities.map((element ,index) => { this.state.Entities.map((element ,index) => {
if(element.id === this.state.EntityOnFocus.EntityID) if(element.id === this.state.EntityOnFocus.EntityID)
{ {
this.state.Entities[index].onFocus = undefined; this.state.Entities[index].onFocus = false;
} }
}) })
console.log(this.state.Entities) console.log(this.state.Entities)
@@ -167,6 +175,7 @@ class App extends Component {
} }
render() { render() {
const {name} = this.state; const {name} = this.state;
return ( return (
<div className="App"> <div className="App">

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

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

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

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

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

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

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

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