focalxaiinspection/src/lib/Components/SelectCarPosition/SelectCarPosition.js

Focalx AI Inspection

/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useEffect, useState } from 'react';
import './SelectCarPosition.scss';

import positionSheet from '../../jsonFiles/position.json';
import { Link, useNavigate } from 'react-router-dom';
let getDamageData;

const SelectCarPosition = () => {
    const navigate = useNavigate();
    const [positionVal, setPositionVal] = useState("");
    const [positionName, setPositionName] = useState("");
    const positionComponents= positionSheet.frames.map((item, index) => (
        <div key={index} className="custom-radio">
            <label className="position" htmlFor={item.id}>
                <img src={require("../../Assets/images/carPosition/"+item.filename+".svg")} alt={item.name} />                                
            </label>
            <input onChange={(e) => handleClick(e)} type="radio" id={item.id} data-name={item.name} name="car-position" value={item.zone} />
            <label htmlFor={item.id}>{item.name}</label>
        </div>
        ));

    const handleClick = (e) => {
        setPositionVal(e.target.value);
        setPositionName(e.target.dataset.name);
        getDamageData.catZone =  e.target.value;
        getDamageData.position =  e.target.dataset.name;
        sessionStorage.setItem("manualDamage", JSON.stringify(getDamageData));
    }

    useEffect(() => {
        getDamageData = JSON.parse(sessionStorage.getItem("manualDamage") || {});
        renderImg(getDamageData.img)
    },[]);

    const renderImg = async(base64Img) => {
        const blob = await (await fetch(base64Img)).blob();
        const imageUrl = window.URL.createObjectURL(blob);
        document.getElementById("damagePrevieImg").src = imageUrl;
    }
    const nextStep = () => {
        if(positionName !== "" && positionVal !== ""){
            navigate("/select-part-high-level");
        }else{
            alert("Kindly Select the Option.")
        }
    }
return(
  <>
    <div className="select-postion-section car-side-position">
            <div className='damage-preview-container'>
               <div className='preview-inner-container'>
               <img id='damagePrevieImg' alt='' />
               </div>
            </div>
            <div className="container">                
                <div style={{paddingBottom:"100px"}} className="select-position-wrap">
                    <div className="custom-radio-section custom-radio-inline-section">
                        {positionComponents}
                    </div>
                </div>
            </div>
        </div>

        <div className="action-btn-wrap bottom-action-btns">
            <Link to="/damage-report" className="custom-secondary-outline-button left-side-btn justify-content-center">Back</Link>
            <a onClick={() => nextStep()} className="custom-primary-button right-side-btn justify-content-center">Next</a>
        </div>
  </>
)};

export default SelectCarPosition;