139 lines
4.7 KiB
JavaScript
139 lines
4.7 KiB
JavaScript
import React from "react"
|
|
import {useState,useEffect, useRef} from 'react';
|
|
import { useForm, SubmitHandler } from "react-hook-form"
|
|
import './controls.css'
|
|
|
|
|
|
|
|
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: 0,speed: 0,position: [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(Array.isArray(props.Entity.Position) === true)
|
|
{
|
|
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
|
|
}else{
|
|
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:['','']})
|
|
|
|
}
|
|
// setFormData({speed:props.Entity.Speed})
|
|
|
|
}
|
|
|
|
|
|
|
|
},[props.Entity,props]);
|
|
|
|
|
|
|
|
// 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) =>
|
|
{
|
|
|
|
setFormData({name:'',course:'',speed:'',position:['','']})
|
|
setEntity('')
|
|
|
|
}
|
|
|
|
// const handleChange = (event) => {
|
|
// const { name, value } = event.target;
|
|
// setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
|
|
// };
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
console.log(e.target.data);
|
|
console.log(formData)
|
|
// 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 class="parent">
|
|
<div class="div1">
|
|
<div class="NameInput">
|
|
<input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.name} />
|
|
</div>
|
|
</div>
|
|
<div class="div2">
|
|
<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 class="div3">
|
|
<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 class="div5">
|
|
<div className="flex">
|
|
<div className="ControlHeader">Lat:</div><input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} />
|
|
</div>
|
|
</div>
|
|
<div class="div6">
|
|
<div className="flex">
|
|
|
|
<div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div> <button type='submit'>Save</button> <button>Delete</button></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EntityControl; |