originalmk/skrytka-app
1
0
Fork 0
mirror of https://github.com/originalmk/skrytka-app.git synced 2024-10-03 12:26:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix problem with choosing boxes

Browse Source
This commit is contained in:
Stachu 2023-03-20 18:58:20 +01:00
parent 75b4c94aff
commit fcca26a5d0
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/Truck.jsx
View File

@ -7,16 +7,17 @@ import { idUnits } from './SelectBox';
export let TruckId = ""; export let TruckId = "";
const Truck = () => { const Truck = () => {
const {id} = useParams(); const {id} = useParams();
const [trackName, setTrackName] = useState(''); const [trackName, setTrackName] = useState('');
const [checkIsClick, setCheckIsClick] = useState(false);
const textChooseTrack = useRef(true); const textChooseTrack = useRef(true);
const handleImageClick = (e) => { const handleImageClick = (e, ID) => {
let nameofTrack = e.target.getAttribute('name'); let nameofTrack = e.target.getAttribute('name');
setTrackName(nameofTrack); setTrackName(nameofTrack);
TruckId = ID;
setCheckIsClick(!checkIsClick);
textChooseTrack.current.style.color= 'black'; textChooseTrack.current.style.color= 'black';
} }
@ -46,7 +47,6 @@ const Truck = () => {
.then(data => { .then(data => {
setTruck(data.map(({ID,name,imagePath,avgPercent},index) => { setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
TruckId = ID;
let percent = avgPercent.toString().slice(0,3); let percent = avgPercent.toString().slice(0,3);
let firstAvgPercent = percent * 10; let firstAvgPercent = percent * 10;
let SecondAvgPercent = percent * 100; let SecondAvgPercent = percent * 100;
@ -55,20 +55,20 @@ const Truck = () => {
<> <>
<div className="boxTrack" key = {index} id = {imagePath} name = {name} onClick={(e) => handleImageClick(e)} > <div className="boxTrack" key = {index} id = {imagePath} name = {name} onClick={(e) => handleImageClick(e, ID)} >
<img className='imageFireTrack' id = {imagePath} src={`../${imagePath}`} alt="img" name = {name} onClick={(e) => handleImageClick(e)} /> <img className='imageFireTrack' id = {imagePath} src={`../${imagePath}`} alt="img" name = {name} onClick={(e) => handleImageClick(e,ID)} />
<div className="informationAboutTrack" name = {name} onClick={(e) => handleImageClick(e)}> <div className="informationAboutTrack" name = {name} onClick={(e) => handleImageClick(e)}>
<h3 className= 'TrackName' name = {name} onClick={(e) => handleImageClick(e)}>{name}</h3> <h3 className= 'TrackName' name = {name} onClick={(e) => handleImageClick(e,ID)}>{name}</h3>
<progress className="progress" max="100" value={SecondAvgPercent} name = {name} onClick={(e) => handleImageClick(e)} ></progress> <progress className="progress" max="100" value={SecondAvgPercent} name = {name} onClick={(e) => handleImageClick(e,ID)} ></progress>
<div className='ScoringValueTrack' name = {name} onClick={(e) => handleImageClick(e)}> <div className='ScoringValueTrack' name = {name} onClick={(e) => handleImageClick(e)}>
<h4 name = {name} onClick={(e) => handleImageClick(e)}>{firstAvgPercent}/10</h4> <h4 name = {name} onClick={(e) => handleImageClick(e,ID)}>{firstAvgPercent}/10</h4>
<h4 name = {name} onClick={(e) => handleImageClick(e)}>{SecondAvgPercent}%</h4> <h4 name = {name} onClick={(e) => handleImageClick(e,ID)}>{SecondAvgPercent}%</h4>
</div> </div>
</div> </div>
@ -84,7 +84,7 @@ const Truck = () => {
) )
},[]) },[checkIsClick])
return ( return (
<> <>