ADD: current dev version simple entity control input

2023-09-28 17:00:42 +02:00
parent 7a2a472e5a
commit a34ea5ab04
11 changed files with 236 additions and 80 deletions
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
+++ b/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
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss
+++ b/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%;
 }

--- a/webapp/src/components/control/EntityControl.jsx
+++ b/webapp/src/components/control/EntityControl.jsx
@@ -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>
    );
 }

--- a/webapp/src/components/control/Tracklist/tracklist.jsx
+++ b/webapp/src/components/control/Tracklist/tracklist.jsx
@@ -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>
                            )
--- a/webapp/src/components/control/Tracklist/tracklist.scss
+++ b/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;
+//   }
--- a/webapp/src/components/control/controls.css
+++ b/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{
--- a/webapp/src/components/control/controls.jsx
+++ b/webapp/src/components/control/controls.jsx
@@ -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>
        );