From 5a59f87f1349db32f62b727388f18f5f769771f9 Mon Sep 17 00:00:00 2001 From: Henry Winkel Date: Thu, 15 Feb 2024 18:39:44 +0100 Subject: [PATCH] ADD: added debug webseit und fixed some bugs --- webapp/src/App.jsx | 3 + webapp/src/components/Debug/Debug.jsx | 132 +++++++++++++++++ webapp/src/components/Debug/Debug.scss | 9 ++ .../components/Debug/components/map/map.jsx | 26 ++++ .../components/Debug/components/map/map.scss | 9 ++ .../perceivedTruth/perceivedTruth.jsx | 85 +++++++++++ .../perceivedTruth/perceivedTruth.scss | 0 webapp/src/components/Debug/index.js | 3 + webapp/src/components/Header/header.jsx | 2 + .../src/components/SimControl/SimControl.jsx | 23 ++- .../EntityControl/EntityControl.jsx | 4 +- .../components/OpenSeaMap/OpenSeaMap.jsx | 106 ++++++-------- webapp/src/components/api/APICalls.jsx | 133 ++++++++++++++++++ webapp/src/components/api/index.js | 30 ---- 14 files changed, 460 insertions(+), 105 deletions(-) create mode 100644 webapp/src/components/Debug/Debug.jsx create mode 100644 webapp/src/components/Debug/Debug.scss create mode 100644 webapp/src/components/Debug/components/map/map.jsx create mode 100644 webapp/src/components/Debug/components/map/map.scss create mode 100644 webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.jsx create mode 100644 webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.scss create mode 100644 webapp/src/components/Debug/index.js create mode 100644 webapp/src/components/api/APICalls.jsx delete mode 100644 webapp/src/components/api/index.js diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index d12e5c9..6a6043b 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -10,6 +10,7 @@ import Gateway from "./components/Gateway"; import Database from "./components/Database"; import Scenarios from "./components/Scenarios"; import Settings from "./components/Settings"; +import Debug from "./components/Debug"; export const defaultLocale = "en-US"; @@ -21,6 +22,8 @@ const App = () => { } /> + } /> + } /> } /> } /> diff --git a/webapp/src/components/Debug/Debug.jsx b/webapp/src/components/Debug/Debug.jsx new file mode 100644 index 0000000..232e343 --- /dev/null +++ b/webapp/src/components/Debug/Debug.jsx @@ -0,0 +1,132 @@ +import React from "react"; +import {w3cwebsocket as W3CWebSocket} from "websocket" +import MyMap from "./components/map/map.jsx" +import PerceivedTruth from "./components/perceivedTruth/perceivedTruth.jsx"; +import "./Debug.scss" +import { useEffect, useState } from 'react' +import { getCOP,loadAutoraster } from "../api/APICalls"; + +import TrackListClass from "../SimControl/Tracklist.tsx"; + + +const config = { + // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL, + apiUrl: "192.168.3.13", + apiProt: 30747 + } + let client = null; +// let client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/"); + +function Scenarios() +{ + const [trackList, settrackList] = useState([]); + const [clientConnected, setclientConnected] = useState(false); + // const [client, setclient] = useState(W3CWebSocket); + + + + + + +React.useEffect(() => { + client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/"); + + client.onopen = () => { + console.log("Websocket Client for Debug Component"); + setclientConnected(true) + }; + console.log(`initializing interval`); + const interval = setInterval(() => { + updateEntities(); + }, 1000); + + return () => { + console.log(`clearing interval`); + clearInterval(interval); + client.close(); + client = null; + }; + + +}, []); // has no dependency - this will be called on-component-mount + +useEffect(() => { + client.onmessage = (message) => { + if(message.data !== "null") + { + + const dataFromServer = JSON.parse(message.data); + // console.log(dataFromServer); + if(dataFromServer.Data === "COP") + { + settrackList(dataFromServer.Entities); + }else + { + console.log(message.data); + } + + } + else{ + console.log(message); + } + } +}); + +function updateEntities() +{ + // var msg = + // { + // Type: "Request", + // Data: "COP" + + // } + + client.send(getCOP()); + +} + + + +const sendSampleMessage = () => +{ + var msg = + { + Data: "TEST", + Type: "Save", + } + console.log(msg); + client.send(JSON.stringify(msg)); + +} + +const startSampleScenario = () => +{ + + client.send(loadAutoraster()); + +} + + +return( + <> + {/*
+
*/} +
+ +
+

Debug

+ +
+ + + +
+ + + + +); + +} + + export default Scenarios; \ No newline at end of file diff --git a/webapp/src/components/Debug/Debug.scss b/webapp/src/components/Debug/Debug.scss new file mode 100644 index 0000000..731aa18 --- /dev/null +++ b/webapp/src/components/Debug/Debug.scss @@ -0,0 +1,9 @@ +.Container +{ + display: flex; +} + +.InfoPane{ + width: 70%; + padding-left: 1rem +} \ No newline at end of file diff --git a/webapp/src/components/Debug/components/map/map.jsx b/webapp/src/components/Debug/components/map/map.jsx new file mode 100644 index 0000000..217c25e --- /dev/null +++ b/webapp/src/components/Debug/components/map/map.jsx @@ -0,0 +1,26 @@ +import { useLeafletContext } from '@react-leaflet/core' +import { MapContainer, TileLayer} from 'react-leaflet' + +import L from 'leaflet' +import { useEffect, useRef } from 'react' + +import "./map.scss" + + + +const center = [54, 8]; + +function MyMap() { + return ( + +
+ + + +
+ ) + +} + export default MyMap; \ No newline at end of file diff --git a/webapp/src/components/Debug/components/map/map.scss b/webapp/src/components/Debug/components/map/map.scss new file mode 100644 index 0000000..0e09714 --- /dev/null +++ b/webapp/src/components/Debug/components/map/map.scss @@ -0,0 +1,9 @@ +.Smallapmap { + // display: flex; + // padding-top: 10px; + height: 500px; + width: 500px; + // padding-left: 20%; + display: inline-flex; + // height: 80%; + } \ No newline at end of file diff --git a/webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.jsx b/webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.jsx new file mode 100644 index 0000000..94fcd76 --- /dev/null +++ b/webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.jsx @@ -0,0 +1,85 @@ +import { useEffect, useState } from 'react' +import { getWSTestMessage ,getTracklist } from '../../../api/APICalls'; + + + + +function PerceivedTruth(props) +{ + + const [selectedOption, setSelectedOption] = useState('option1') + const [selectOptions, setSelectOptions] = useState([]) + + const [trackList, settrackList] = useState([]); + const [client, setclient] = useState() + + const handleSubmit = (event) => { + if(selectedOption !== "option1" && selectedOption !== "" ) + { + client.send(getTracklist(selectedOption)); + event.preventDefault() + console.log(`Submitted selected option: ${selectedOption}`) + + } + } + + function prepareTracklistForSelect(Tracklist) + { + if(Tracklist!== undefined) + { + var options = []; + Tracklist.forEach(element => { + + var item = + { + value : element.id, + label : element.Name + + }; + + options.push(item); + }); + + setSelectOptions(options); + + } + } + + + useEffect(() => { + //Runs on the first render + //And any time any dependency value changes + // console.log(props); + setclient(props.Client); + settrackList(props.Tracklist); + prepareTracklistForSelect(trackList); + + }, [props]); + + + + return( +
+
+ + + + + + + +
+ +
+ )} +export default PerceivedTruth; \ No newline at end of file diff --git a/webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.scss b/webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.scss new file mode 100644 index 0000000..e69de29 diff --git a/webapp/src/components/Debug/index.js b/webapp/src/components/Debug/index.js new file mode 100644 index 0000000..75c93c9 --- /dev/null +++ b/webapp/src/components/Debug/index.js @@ -0,0 +1,3 @@ +import Debug from "./Debug.jsx"; + +export default Debug; diff --git a/webapp/src/components/Header/header.jsx b/webapp/src/components/Header/header.jsx index 178e064..0ec14e5 100644 --- a/webapp/src/components/Header/header.jsx +++ b/webapp/src/components/Header/header.jsx @@ -18,6 +18,8 @@ function Header() { style={{ maxHeight: '100px' }} navbarScroll > + Debug + Scenarios Database Gateway diff --git a/webapp/src/components/SimControl/SimControl.jsx b/webapp/src/components/SimControl/SimControl.jsx index 96edb0b..6f69743 100644 --- a/webapp/src/components/SimControl/SimControl.jsx +++ b/webapp/src/components/SimControl/SimControl.jsx @@ -14,6 +14,9 @@ import Track from "./Track.tsx"; import './SimControl.scss' import EntityTrackList from "./components/EntityTrackList"; +import { getWSTestMessage } from "../api/APICalls"; + + const config = { @@ -33,6 +36,12 @@ class SimControl extends Component { TrackList_: new TrackListClass() } + + componentWillUnmount() + { + // client.close(); + } + componentDidMount() { console.log(config.apiUrl); @@ -111,13 +120,13 @@ class SimControl extends Component { updateEntities() { - var msg = - { - Type: "Request", - Data: "COP" + // var msg = + // { + // Type: "Request", + // Data: "COP" - } - client.send(JSON.stringify(msg)); + // } + client.send(getWSTestMessage()); } getEntityFromID(Entities, SelectedEntity) @@ -154,7 +163,7 @@ class SimControl extends Component { setFocusPosition(props) { - console.log(props); + // console.log(props); this.setState({ PositionClicked: props }); diff --git a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx index a09d68f..268a782 100644 --- a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx +++ b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx @@ -97,7 +97,7 @@ function EntityControl(props) }else{ console.log("reset"); setFormData({name:"",course:"",speed:"",position:["",""],height:"" }) - + setEntity(undefined); } @@ -109,7 +109,7 @@ function EntityControl(props) if(props.PositionClicked !== undefined) { // setEntity(undefined); - console.log(props.PositionClicked) + // console.log(props.PositionClicked) var pos = [0,0]; pos[0] = props.PositionClicked.lat; pos[1] = props.PositionClicked.lng diff --git a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx index 76cd0fd..97c00f8 100644 --- a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx @@ -1,13 +1,12 @@ // import { useMapEvents } from 'react-leaflet/hooks' import React, { Component } from "react"; -import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents,contextmenu } from 'react-leaflet' -import { friend,Hostile, iconShip,createIcon } from "./icon"; +import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet' +import { createIcon } from "./icon"; import "./OpenSeaMap.scss"; -import {w3cwebsocket as W3CWebSocket} from "websocket"; +// import {w3cwebsocket as W3CWebSocket} from "websocket"; // import ContainerDimensions from 'react-container-dimensions'; import {} from "leaflet-contextmenu"; -import TrackListCLass from "../../Tracklist.tsx"; import Track from "../../Track.tsx"; @@ -35,6 +34,8 @@ class OpenSeaMap extends Component { } + + componentWillUnmount() { window.removeEventListener("resize", this.updateDimensions.bind(this)) } @@ -50,7 +51,7 @@ class OpenSeaMap extends Component { } markerOnClick(e) { - console.log(e); + // console.log(e); } @@ -67,27 +68,29 @@ class OpenSeaMap extends Component { })) this.props.setEntityOnFocus(Track.Id); - // this.props.setEntityOnFocus(Ent) - // // this.draggable = true; } - deleteEntity(e) + deleteEntity(id) { - var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data); - if(Track !== undefined) + // console.log(id); + try { + var msg = { - - var msg = - { - Data: "Entity", - Type: "Delete", - ID: Track.Id, - } - console.log(JSON.stringify(msg)); - this.props.Client.send(JSON.stringify(msg)) - - this.forceUpdate(); + Data: "Entity", + Type: "Delete", + ID: id, } + + + this.props.TrackList.deteleTrack(id); + this.props.Client.send(JSON.stringify(msg)) + this.forceUpdate(); + + } catch (error) { + console.log(error); + } + + } @@ -97,7 +100,11 @@ class OpenSeaMap extends Component { if(e !== undefined) { var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data); - Track.isOnEdit = false; + if(Track !== undefined) + { + Track.isOnEdit = false; + } + console.log(Track); } this.props.setEntityOnFocus(undefined); @@ -132,7 +139,7 @@ class OpenSeaMap extends Component { var icon = createIcon(entity.Type,entity.Side) return ( - { - console.log(e.target); - // var Ent = { - // EntityID : e.target.options.data, - // NewPos : undefined - - // } - // this.setState((state) =>({ - // EntityOnFocus: Ent - // })) - // this.props.setEntityOnFocus(Ent); + console.log(entity.Name); + console.log(entity.id); + this.props.setEntityOnFocus(e.target.options.data) - // this.props.setEntityOnFocus(e.target.options.data); }, dragend: this.setNewEntityPosition.bind(this), @@ -193,15 +178,11 @@ class OpenSeaMap extends Component { // eventHandlers={this.MarkerEventHandler} > - {/* - Omu-Aran the Head Post of Igbomina land, - is a town in the Nigerian state of Kwara. - It originated from Ife and currently the local - government headquarters of Irepodun local government. - */} + {entity.Name} + ); } @@ -236,14 +217,11 @@ const LocationFinderDummy = (props) => { // this.state.EntityOnFocus = undefined; return null; }; - // const positions = this.props.Positions.map((pos, index) => ( - // - // )); - + return (
- @@ -252,16 +230,12 @@ const LocationFinderDummy = (props) => { url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> - {/* {positions} */} - {/* */} - {/* {console.log(this.props)} */} + { this.props.TrackListMap.map((element,index) => ( this.makeIcon(index,element) ))} - {/* {this.props.Entities.map((pos, index) => ( - this.makeIcon(index,pos,this.props,this.state) - ))} */} +
); diff --git a/webapp/src/components/api/APICalls.jsx b/webapp/src/components/api/APICalls.jsx new file mode 100644 index 0000000..11d13f1 --- /dev/null +++ b/webapp/src/components/api/APICalls.jsx @@ -0,0 +1,133 @@ +export function getCOP() +{ + var msg = + { + Type: "Request", + Data: "COP" + + } + + return JSON.stringify(msg); +} + + +export function deleteEntity(id) +{ + var msg = + { + Data: "Entity", + Type: "Delete", + ID: id, + } + + return JSON.stringify(msg); +} + +export function createEntity(Name,Speed,Course, Position, Height) +{ + var msg = + { + Data: "Entity", + Type: "New", + Name: Name, + Speed: Speed.toString(), + Course: Course.toString(), + Position: [Position[0].toString(),Position[1].toString()], + Height: Height.toString(), + SetPosition: true + + } + return JSON.stringify(msg); + +} + +export function updateEntity(id,Speed,Course, Position, Height, setPos) +{ + var msg = + { + Data: "Entity", + Type: "Update", + ID: id, + Speed: Speed.toString(), + Course: Course.toString(), + Position: [Position[0].toString(),Position[1].toString()], + Height: Height.toString(), + SetPosition: setPos + + } + return JSON.stringify(msg); +} + + +export function getTracklist(id) +{ + var msg = + { + Data: "COP", + Type: "EntityTrackList", + ID: id, + } + return JSON.stringify(msg); + +} + + +export function saveScenario() +{ + var msg = + { + Data: "Scenario", + Type: "Save", + } + return JSON.stringify(msg); + +} + +export function deleteScenario() +{ + var msg = + { + Data: "Scenario", + Type: "Delete", + } + return JSON.stringify(msg); + +} + +export function loadScenario(id) +{ + var msg = + { + Data: "Scenario", + Type: "Load", + ID: id, + } + return JSON.stringify(msg); + +} + +export function loadAutoraster() +{ + var msg = + { + Data: "Scenario", + Type: "AutoRaster", + } + return JSON.stringify(msg); + +} + + +export function getWSTestMessage() +{ + var msg = + { + Data: "TEST", + } + return JSON.stringify(msg); + +} + + + + diff --git a/webapp/src/components/api/index.js b/webapp/src/components/api/index.js deleted file mode 100644 index b460238..0000000 --- a/webapp/src/components/api/index.js +++ /dev/null @@ -1,30 +0,0 @@ -// // api/index.js -// var socket = new WebSocket("ws://localhost:8008/"); - -// let connect = cb => { -// console.log("connecting"); - -// socket.onopen = () => { -// console.log("Successfully Connected"); -// }; - -// socket.onmessage = msg => { -// cb(msg); -// }; - -// socket.onclose = event => { -// console.log("Socket Closed Connection: ", event); -// }; - -// socket.onerror = error => { -// console.log("Socket Error: ", error); -// }; -// }; - - -// let sendMsg = msg => { -// console.log("sending msg: ", msg); -// socket.send(msg); -// }; - -// export { connect, sendMsg };