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

ADD: current dev version simple entity control input

Browse Source
This commit is contained in:
Henry Winkel
2023-09-28 17:00:42 +02:00
parent 7a2a472e5a
commit a34ea5ab04
11 changed files with 236 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/.env Normal file
View File

@@ -0,0 +1 @@
WDS_SOCKET_PORT=0

16
webapp/package-lock.json generated
View File

@@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-container-dimensions": "^1.4.1",
"react-dom": "^18.2.0",
"react-hook-form": "^7.46.2",
"react-leaflet": "^4.2.1",
"react-scripts": "^5.0.1",
"react-use-websocket": "^4.3.1",
@@ -14321,6 +14322,21 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-hook-form": {
"version": "7.46.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.46.2.tgz",
"integrity": "sha512-x1DWmHQchV7x2Rq9l99M/cQHC8JGchAnw9Z0uTz5KrPa0bTl/Inm1NR7ceOARfIrkNuQNAhuSuZPYa6k7QYn3Q==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
webapp/package.json
View File

@@ -10,6 +10,7 @@
"react": "^18.2.0",
"react-container-dimensions": "^1.4.1",
"react-dom": "^18.2.0",
"react-hook-form": "^7.46.2",
"react-leaflet": "^4.2.1",
"react-scripts": "^5.0.1",
"react-use-websocket": "^4.3.1",

59
webapp/src/App.jsx
View File

@@ -12,13 +12,18 @@ import {w3cwebsocket as W3CWebSocket} from "websocket"
const config = {
// apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
apiUrl: "10.110.242.105",
apiProt: 9999
apiUrl: "192.168.3.13",
apiProt: 30747
}
const client = new WebSocket("ws://10.110.242.105:9999/");
// const config = {
// // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
// apiUrl: "localhost",
// apiProt: 9999
// }
// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
class App extends Component {
@@ -38,8 +43,9 @@ class App extends Component {
const dataFromServer = JSON.parse(message.data);
console.log('reply: ', dataFromServer);
if(dataFromServer.Type === "COP")
if(dataFromServer.Data === "COP")
{
this.setState((state) => ({
Entities: dataFromServer.Entities
})
@@ -49,26 +55,26 @@ class App extends Component {
}
// connect((msg) => {
// console.log("New Message")
// connect((msg) => {
// console.log("New Message")
// var jsonMSG;
// try {
// jsonMSG = JSON.parse(msg.data);
// } catch (error) {
// console.log(error);
// }
// var jsonMSG;
// try {
// jsonMSG = JSON.parse(msg.data);
// } catch (error) {
// console.log(error);
// }
// if(jsonMSG["Type"] == "COP"){
// console.log(msg.data)
// var Entities = Array.from(jsonMSG["Entities"])
// if(Array.isArray(Entities))
// {
// this.setState({
// Entities:Entities
// });
// }
// }
// if(jsonMSG["Type"] == "COP"){
// console.log(msg.data)
// var Entities = Array.from(jsonMSG["Entities"])
// if(Array.isArray(Entities))
// {
// this.setState({
// Entities:Entities
// });
// }
// }
@@ -107,15 +113,10 @@ class App extends Component {
<div className="Content">
<Controls Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} />
{/* <ChatHistory History={this.state.History} /> */}
{/* <div>
{name}
</div> */}
<OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)}/>
</div>
{/* <button onClick={this.send}>Hit</button> */}
</div>
);

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

@@ -7,15 +7,7 @@ import "./OpenSeaMap.scss";
import {w3cwebsocket as W3CWebSocket} from "websocket";
import ContainerDimensions from 'react-container-dimensions';
// const config = {
// // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
// apiUrl: "10.110.242.105",
// apiProt: 9999
// }
// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
// import icon from 'leaflet/dist/images/marker-icon.png';
class OpenSeaMap extends Component {
@@ -50,11 +42,11 @@ class OpenSeaMap extends Component {
var icon;
icon = createIcon(entity.Type,entity.Side)
return (
<Marker name={entity.Name} key={index} icon={icon} position={entity.position} data={entity.id}
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
eventHandlers={{
click: (e) => {
console.log(e.target.options.data); // will print 'FooBar' in console
// console.log(e.target.options.data); // will print 'FooBar' in console
this.props.setEntityOnFocus(e.target.options.data);
},
}} >
@@ -77,7 +69,7 @@ class OpenSeaMap extends Component {
return (
<div className='map' style={{ height: this.state.height }} >
<MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
<MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<TileLayer

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

@@ -11,9 +11,9 @@
// display: flex;
padding-top: 10px;
// height: 750px;
width: 79%;
width: 78.5%;
// padding-left: 20%;
float: left;
display: inline-flex;
// height: 80%;
}

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

@@ -1,24 +1,117 @@
import React from "react"
import {useState,useEffect, useRef} from 'react';
import { useForm, SubmitHandler } from "react-hook-form"
import './controls.css'
function EntityControl(Entity)
{
console.log(Entity)
function EntityControl(props)
{
const [Entity, setEntity] = useState('');
const [Course, setCourse] = useState('');
const [CourseInControl, setCourseInControl] = useState(false);
const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: "",speed: ""});
useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`;
setEntity(props.Entity);
if(CourseInControl === false)
{
console.log("los")
// setSpeed(props.Entity.Speed);
setFormData({course:props.Entity.Course,speed:props.Entity.Speed})
// setFormData({speed:props.Entity.Speed})
}
},[props.Entity]);
// Entity.Entity.Course
const handleClick = (e) => {
if(e.detail === 2)
{
setCourseInControl(true);
e.target.readOnly = false;
// e.target.style = "border: 1px solid"
}
};
const handleCourseInput= (e) => {
console.log(e.target)
console.log(isNaN(e.nativeEvent?.data))
if(!isNaN(e.nativeEvent?.data))
{
setFormData({...formData,course:e.currentTarget.value});
}
};
const handleSpeedInput= (e) => {
console.log(e.target)
if(!isNaN(e.nativeEvent?.data))
{
setFormData({...formData,speed:e.currentTarget.value});
}
};
const emptyForm= (e) =>
{
}
// const handleChange = (event) => {
// const { name, value } = event.target;
// setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
// };
const handleSubmit = (e) => {
e.preventDefault();
console.log(e.target.data);
alert(`Course: ${formData.course}`
);
}
// console.log(Entity)
// console.log(EntityOnFocus)
return (
<div className="ControlsComponent">
<div>
<div className="ControlHeader">Name</div>
<div className="ControlValues">{Entity.Entity.Name}</div>
</div>
<div>
<div className="ControlHeader">Course</div>
<div className="ControlValues">{Entity.Entity.Course}</div>
</div>
<div>
<div><button onClick={ emptyForm}> New</button> </div>
<form onSubmit={handleSubmit}>
<div className="ControlsComponent">
<div>{Entity.id}</div>
<div>
<div className="ControlHeader">Name</div>
<div className="ControlValues">{Entity.Name}</div>
</div>
<div>
<div className="ControlHeader">Course</div>
<div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.course} /></div>
</div>
<div>
<div className="ControlHeader">Speed</div>
<div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text" onClick={handleClick} onChange={handleSpeedInput} value={formData.speed} /></div>
</div>
<div> <button type='submit'>Save</button> <button>Delete</button></div>
</div>
</form>
</div>
);
}

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

@@ -13,21 +13,28 @@ class Tracklist extends React.Component
<div className="tracklist">
<table>
<thead>
<tr>
<th>Name</th>
<th>Course</th>
<th>Lat</th>
<th>Lon</th>
<tr className='TracklistHeader'>
<th className='TracklistHeaderCell'>Name</th>
<th className='TracklistHeaderCell'>Course</th>
<th className='TracklistHeaderCell'>Speed</th>
<th className='TracklistHeaderCell'>Lat</th>
<th className='TracklistHeaderCell'>Lon</th>
<th className='TracklistHeaderCell'>Kind</th>
<th className='TracklistHeaderCell'>Side</th>
</tr>
</thead>
<tbody>
{ this.props.entities.map((val,index) => {
return (
<tr key={index}>
<td>{val.Name}</td>
<td>{val.Course}</td>
<td>{val.position[0]}</td>
<td>{val.position[1]}</td>
<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'>{val.Type}</td>
<td className='TracklistCell'>{val.Side}</td>
</tr>
)

34
webapp/src/components/control/Tracklist/tracklist.scss
View File

@@ -1,8 +1,40 @@
.tracklist
{
display: flex;
max-height: 500px;
height: 500px;
display: block;
}
td
{
text-align: left;}
text-align: left;
}
.TracklistHeader {
border-bottom: 2px solid;
}
table {
border-collapse: collapse;
}
th{
// border: 1px solid;
// border-collapse: collapse;
}
.TracklistCell{
border-left: 1px solid;
text-align: center;
}
.TracklistHeaderCell{
width: 16%;
}
// table, th, td {
// border: 1px solid;
// border-collapse: collapse;
// }

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

@@ -6,6 +6,12 @@
.ControlsComponent{
display: grid;
/* grid-template-columns: auto auto auto; */
}
.EntityinputField{
border: none;
width: 50%;
display: block;
}
.ControlHeader{

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

@@ -3,37 +3,42 @@ import './controls.css'
// import { sendMsg } from '../api';
import Tracklist from './Tracklist'
import EntityControl from './EntityControl';
import {w3cwebsocket as W3CWebSocket} from "websocket"
// const config = {
// // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
// apiUrl: "10.110.242.105",
// apiProt: 9999
// apiUrl: "192.168.3.13",
// apiProt: 30747
// }
// const client = new W3CWebSocket("ws://10.110.242.105:9999/");
const client = new WebSocket("ws://10.110.242.105:9999/");
// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
class Controls extends React.Component
{
state = {
EntityOnFocus: this.props.EntityOnFocus
EntityOnFocus: undefined,
}
componentDidMount()
{
client.onopen = () => {
console.log("Websocket Client Connected");
};
// client.onopen = () => {
// console.log(" Control Websocket Client Connected");
// };
client.onmessage = (message) => {
const dataFromServer = JSON.parse(message.data);
console.log('reply', dataFromServer);
}
// client.onmessage = (message) => {
// const dataFromServer = JSON.parse(message.data);
// console.log('reply', dataFromServer);
// }
}
render() {
function getEntityFromID(Entities, SelectedKey)
@@ -49,14 +54,16 @@ state = {
return tmp;
}
console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
// console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
return (
<div className="controls">
<Tracklist entities= {this.props.Entities} />
<br />
<div>
<button onClick={this.props.updateEntities}> click me!</button>
<EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} />
<button onClick={this.props.updateEntities}>update</button>
<EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}/>
</div>
</div>
);