ADD: current dev version simple entity control input

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>
     );
 }