ADD: current dev version simple entity control input

webapp/.env

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

webapp/package-lock.json

@@ -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",

webapp/package.json

@@ -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",

webapp/src/App.jsx

@@ -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",
+  apiUrl: "192.168.3.13",
-  apiProt: 9999
+  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 
         })
@@ -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>
     );

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -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

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -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%;
 }
 

webapp/src/components/control/EntityControl.jsx

@@ -1,23 +1,116 @@
 import React from "react"
+import {useState,useEffect, useRef} from 'react';
+import { useForm, SubmitHandler } from "react-hook-form"
 import './controls.css'
 
-function EntityControl(Entity)
+
+
+function EntityControl(props)
 {    
    
 
-    console.log(Entity)
+
+    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>
+    <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.Entity.Name}</div>
+                    <div className="ControlValues">{Entity.Name}</div>
                 </div>
                 <div>
                     <div className="ControlHeader">Course</div>
-                <div className="ControlValues">{Entity.Entity.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>
+                    <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>
     );
 }

webapp/src/components/control/Tracklist/tracklist.jsx

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

webapp/src/components/control/Tracklist/tracklist.scss

@@ -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;
+//   }

webapp/src/components/control/controls.css

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

webapp/src/components/control/controls.jsx

@@ -3,38 +3,43 @@ 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",
+//   apiUrl: "192.168.3.13",
-//   apiProt: 9999
+//   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 = () => {
+    // client.onopen = () => {
-      console.log("Websocket Client Connected");
+    //   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>
+              <button onClick={this.props.updateEntities}>update</button>                
                   <EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}/>        
+
             </div>
           </div>
         );