diff --git a/webapp/Dockerfile b/webapp/Dockerfile index c055323..5f57c9c 100644 --- a/webapp/Dockerfile +++ b/webapp/Dockerfile @@ -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 diff --git a/webapp/public/index.html b/webapp/public/index.html index f1bc103..e50d237 100644 --- a/webapp/public/index.html +++ b/webapp/public/index.html @@ -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`. --> - React App + Cloud Simulator diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 1fea1c8..e816b94 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -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 (
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index 070fcb3..24a9dc0 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx @@ -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); }, diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx index f5a81cb..20683f7 100644 --- a/webapp/src/components/control/EntityControl.jsx +++ b/webapp/src/components/control/EntityControl.jsx @@ -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) => {
Course - +
@@ -290,7 +383,8 @@ const handleClick = (e) => {
-
+
+ diff --git a/webapp/src/components/control/controls.css b/webapp/src/components/control/controls.css index 785381a..89745e0 100644 --- a/webapp/src/components/control/controls.css +++ b/webapp/src/components/control/controls.css @@ -44,7 +44,7 @@ width: 50%; } .NumberInputs{ - width: 3.3em; + width: 4.3em; } .NumberInputsGroup { diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index e06eca6..6ed1734 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -100,7 +100,7 @@ state = {
- + {/* */}