diff --git a/src/App.jsx b/src/App.jsx index db2ee09..26598d2 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -22,6 +22,8 @@ import VerifyMarks from "./Components/VerifyMarks"; import QueryCardEditor from "./Components/QueryCardEditor"; import AnomolyPartC from "./Components/AnomolyPartC"; import BarcodeScanner from "./Components/BarcodeScanner" +import EvQrcode from "./Components/EvQrcode"; +import QrcodeCardEditor from "./Components/QrCodeCardEditor"; function App() { return ( @@ -31,6 +33,7 @@ function App() { }> }> }> + }> } @@ -80,7 +83,7 @@ function App() { element={} > }> - + }> diff --git a/src/Components/EvQrcode.jsx b/src/Components/EvQrcode.jsx new file mode 100644 index 0000000..9b49928 --- /dev/null +++ b/src/Components/EvQrcode.jsx @@ -0,0 +1,251 @@ +import { Layout, theme } from "antd"; +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom/dist"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import HomeIcon from "@mui/icons-material/Home"; +import { useDispatch, useSelector } from "react-redux"; +import { Box, Button, Card, CardContent, Typography, CircularProgress } from "@mui/material"; +import { updateEvQrcodeList } from "../redux/actions/actions"; +import SystemNumberDialog from "./SystemNumberDialog"; +import { toast, ToastContainer } from "react-toastify"; + +const { Content, Header } = Layout; + +function EvQrcode() { + const [isLoading, setIsLoading] = useState(false); + const [showSystemNoContainer, setShowSystemNoContainer] = useState(false); + const [anomalyData, setAnomalyData] = useState([]); + const [currentIndex, setCurrentIndex] = useState(0); + + const navigate = useNavigate(); + + const evQrcodeList = useSelector((state) => state?.evQrcodeList); + console.log("evQrcodeList = ", evQrcodeList); + + const reduxSystemNo = useSelector((state) => state?.systemNumber); + console.log("systemno: ", reduxSystemNo); + + const dispatch = useDispatch(); + const { token: { colorBgContainer } } = theme.useToken(); + + useEffect(() => { + if (!reduxSystemNo) { + setShowSystemNoContainer(true); + } else { + if (evQrcodeList.length > 0) { + setAnomalyData(evQrcodeList); + } else { + fetchAnomalyData(); + } + } + }, [reduxSystemNo]); + + useEffect(() => { + if (evQrcodeList.length > 0) { + setAnomalyData(evQrcodeList); + } + }, [evQrcodeList]); + + const handleSystemNoChange = () => { + console.log("System No Change is called"); + setShowSystemNoContainer(true); + dispatch(updateEvQrcodeList([])); + }; + + const updateSystemReservationStatus = async (systemRecords) => { + const payload = { + systemRecords, + sysNo: reduxSystemNo, + }; + try { + fetch( + `${ + import.meta.env.VITE_REACT_APP_BACKEND_URL + }/updateSystemReservationStatusEvQrcode`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + } + ) + .then((response) => response.json()) + .then((responseData) => { + console.log("response from updation : ", responseData); + }); + } catch (error) { + throw new Error("Error in update system records : ", systemRecords); + } + }; + + const fetchAnomalyData = async () => { + setIsLoading(true); + try { + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/getEvRecords`, { + method: "POST", + body: JSON.stringify({ + sysno: reduxSystemNo + }), + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + var systemRecords = responseData?.data; + console.log("System record ====== ", responseData.systemRecord); + if (!responseData.systemRecord) { + systemRecords = getRecordsBySystemId(responseData?.data, reduxSystemNo); + } + console.log("System records : ", systemRecords); + + dispatch(updateEvQrcodeList(systemRecords)); + updateSystemReservationStatus(systemRecords); + } catch (error) { + console.error("Error fetching data: ", error); + } finally { + setIsLoading(false); + } + }; + + function getRecordsBySystemId(records, systemId) { + const new_data = []; + for (var i = 0; i < records.length; i++) { + var count = i % 5; + if (count === systemId - 1) { + new_data.push(records[i]); + } + } + return new_data; + } + + const handleNext = () => { + const newItems = anomalyData.filter((_, index) => index !== currentIndex); + setAnomalyData(newItems); + if (currentIndex >= newItems.length) { + setCurrentIndex(0); + } + }; + + const handleUpdate = async() => { + try { + const inputValue = document.getElementById('qrcodeInput').value; + console.log("inputvalu = ", inputValue) + + const payload = { + imageName: currentItem.image_name, + qrvalue: inputValue, + }; + console.log("payload=", payload) + + const response = await fetch(`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updateEvRecord`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body:JSON.stringify(payload) + }); + const responseData = await response.json(); + console.log("responsedata: ", responseData) + if (responseData?.status_code === 200) { + toast.success("Record Updated Successfully"); + handleNext() + document.getElementById('qrcodeInput').value = '' + }else{ + toast.error("Updation Failed"); + } + + } catch (error) { + console.error("Error fetching data: ", error); + } finally { + setIsLoading(false); + } + } + + const handleArrowBack = () => { + dispatch(updateEvQrcodeList([])); + navigate(-1) + } + + if (isLoading) { + return ; + } + + const currentItem = anomalyData[currentIndex]; + const imageUrl = currentItem ? `https://docs.exampaper.vidh.ai/${currentItem.s3_path}` : ''; + + return ( + + + +
+ + + + {reduxSystemNo && ( + + System No : {reduxSystemNo} + + )} + + + +
+ + + {currentItem ? ( + + + + Records Count: {anomalyData.length} + Image Name: {currentItem.image_name} + {/* S3 Path: {currentItem.s3_path} */} + Qrcode Value + + + + + + + + {currentItem.image_name} + + + + ) : ( + No items to display + )} + + + {showSystemNoContainer && ( + + )} + + + ); +} + +export default EvQrcode; diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx index e16a7d6..6894f2d 100644 --- a/src/Components/Home.jsx +++ b/src/Components/Home.jsx @@ -35,6 +35,10 @@ const Home = () => { { title:"Barcode Scanner", url:"/barcodeScanner" + }, + { + title:"EV Qrcode", + url:"/evQrcode" } // { // title:"Marks Verfication", @@ -54,7 +58,7 @@ const Home = () => {

Welcome to exampaper.vidh.ai

 - + {cards.map((card) => ( ))} diff --git a/src/Components/HomepageCard.jsx b/src/Components/HomepageCard.jsx index 6e4333b..e5567c3 100644 --- a/src/Components/HomepageCard.jsx +++ b/src/Components/HomepageCard.jsx @@ -8,12 +8,16 @@ const HomepageCard = ({ title, url }) => { { - navigate(url); - }} > - - + + { + navigate(url); + }} + title="" className="shadow" + bordered={true} + style={{with:'100%'}} + > {title} diff --git a/src/Components/QrCodeCardEditor.jsx b/src/Components/QrCodeCardEditor.jsx new file mode 100644 index 0000000..963d231 --- /dev/null +++ b/src/Components/QrCodeCardEditor.jsx @@ -0,0 +1,307 @@ +import { useState, useEffect } from "react"; +import { useSelector } from "react-redux"; +import { useSearchParams } from "react-router-dom"; +import { Box, Button } from "@mui/material"; +import { useNavigate } from "react-router-dom"; +import { useDispatch } from "react-redux"; + +import AntdesignLayout from "./AntdesignLayout"; +import TextInputField from "./TextInputField"; +import { toast } from "react-toastify"; +import LoadingContainer from "./LoadingContainer"; +import SimpleDialog from "./SimpleDialog"; +import RotateLeftIcon from "@mui/icons-material/RotateLeft"; +import RotateRightIcon from "@mui/icons-material/RotateRight"; +import { updatePartCErrorData, updateSystemNo } from "../redux/actions/actions"; +import { updatePartCErrorList } from "../redux/actions/actions"; +import { DiscFullTwoTone } from "@mui/icons-material"; + +const QrcodeCardEditor = () => { + const [searchParams, setSearchParams] = useSearchParams(); + + const [evQrcode, setEvQrcode] = useState(null); + const [imageName, setImageName] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [recordData, setRecordData] = useState([]); + const [s3Path, setS3Path] = useState(null); + const [showDialog, setShowDialog] = useState(false); + const [rotationResults, setRotationResults] = useState([]); + const [rotateAngle, setRotateAngle] = useState(0); + const evErrorsList = useSelector((state) => state?.partCErrorList); + const table = searchParams.get("table"); + const image_name = searchParams.get("image_name"); + const paramsError = searchParams.get("error"); + const paramsErrorReason = searchParams.get("error_reason"); + const paramsSysNo = searchParams.get("sysNo"); + const paramsDegreeType = searchParams.get("degreeType"); + const [items, setItems] = useState([]); + const [evErrorsData,setEvErrorsData] = useState([]); + + const navigate = useNavigate(); + const dispatch = useDispatch(); + console.log("Ev errors list ==== ", evErrorsList); + console.log("table is : ", table); + // const evErrorsData = useSelector((state) => state?.partCErrorData); + // console.log("evErrorData: ", evErrorsData); + + const fetchPrimaryKeyData = async () => { + try { + const payload = { + image_name, + table, + }; + const response = await fetch( + `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + } + ); + return await response.json(); + } catch (error) { + throw new Error(error); + return null; + } + }; + + useEffect(() => { + const marksLocalData = localStorage.getItem("marks_manual_data"); + console.log("Marks local data 123 ========= ",marksLocalData) + if (marksLocalData) { + console.log("Into if and updating .......") + console.log("marks local data ==== ",marksLocalData) + setEvErrorsData(JSON.parse(marksLocalData)); + } + }, []); + + useEffect(()=>{ + dispatch(updateSystemNo(paramsSysNo)) + },[paramsSysNo]) + + + useEffect(()=>{ + console.log("Ev error data =============== ",evErrorsData) + },[evErrorsData]) + + useEffect(() => { + const fetchData = async () => { + if (table && image_name) { + setIsLoading(true); + const response = await fetchPrimaryKeyData(); + setIsLoading(false); + console.log("Response is : ", response); + if (response?.status === "success") { + console.log("=========== Success ============"); + const data = response?.data; + if (data.length > 0) { + setRecordData(data[0]); + } + } + } + }; + fetchData(); + }, []); + + useEffect(() => { + console.log("=========== Use effect triggered ==========="); + setImageName(recordData?.image_name); + setEvQrcode(recordData?.cover_barcode); + setS3Path(recordData?.s3_path); + }, [recordData]); + + + const updateRecord = async () => { + if(!marks){ + return + } + setIsLoading(true); + try { + const payload = { + evQrcode, + imageName, + rotateAngle + }; + const response = await fetch( + `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartCdata`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + } + ); + const responseData = await response.json(); + setIsLoading(false); + console.log("response data ========= ", responseData); + if (responseData?.status === "success") { + toast.success("Record Updated Successfully ..."); + var currentIndex = null; + console.log("Ev errors data before filter ============= ",evErrorsData) + var newRecords = evErrorsData.filter((data, index) => { + if (data?.image_name === imageName) { + currentIndex = index; + return false; + } + return true; + }); + if(!currentIndex){ + currentIndex = 0 + } + console.log("new records ======1 ", newRecords); + console.log("Current Index ===== ", currentIndex); + dispatch(updatePartCErrorData(newRecords)); + if (newRecords.length > 0) { + console.log("Has to navigte 12 ....."); + localStorage.setItem("marks_manual_data", JSON.stringify(newRecords)); + const newUrl = `/sqlPlayground/edit?image_name=${newRecords[currentIndex]?.image_name}&table=ocr_scanned_part_c_v1&error=${paramsError}&error_reason=${paramsErrorReason}°reeType=${paramsDegreeType}&sysNo=${paramsSysNo}`; + console.log("new url ==== ", newUrl); + window.location.href = newUrl; + } else { + navigate("/"); + } + } + } catch (error) { + setIsLoading(false); + throw new Error(error); + } + }; + + useEffect(() => { + console.log("Rotate angle changed to ========== ", rotateAngle); + const imageContainer = document.getElementById("img-container"); + console.log("Imge container ===== ", imageContainer); + if (imageContainer) { + imageContainer.style.transform = `rotate(${rotateAngle}deg)`; + } + }, [rotateAngle]); + + const initateRotation = async () => { + console.log("Rotating initiated ..."); + setIsLoading(true); + const payload = { + imageName, + }; + try { + const response = await fetch( + `${import.meta.env.VITE_REACT_APP_BACKEND_URL}/initateRotation`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(payload), + } + ); + setIsLoading(false); + const responseData = await response.json(); + console.log("Response data ======= ", responseData); + if (responseData?.status === "success") { + setShowDialog(true); + setRotationResults(responseData?.result); + } + } catch (error) { + setIsLoading(false); + throw new Error(error); + } + }; + +const skipPage = () =>{ + try{ + if(evErrorsData){ + var currentIndex = null + var newRecords = evErrorsData.filter((data, index) => { + if (data?.image_name === imageName) { + currentIndex = index; + return false; + } + return true; + }); + if(!currentIndex){ + currentIndex = 0 + } + console.log("Current Index ===== ", currentIndex); + const newIndex = currentIndex+1 + console.log("new index ===== ",newIndex) + if (newRecords.length > 0) { + console.log("Has to navigte 12 ....."); + const newUrl = `/sqlPlayground/edit?image_name=${evErrorsData[newIndex]?.image_name}&table=ocr_scanned_part_c_v1&error=${paramsError}&error_reason=${paramsErrorReason}°reeType=${paramsDegreeType}&sysNo=${paramsSysNo}`; + console.log("new url ==== ", newUrl); + window.location.href = newUrl; + } + } + }catch(error){ + throw new Error(error) + } +} + + return ( + + + + {imageName &&
ID : {imageName}
} + {paramsError &&
Error Code : {paramsError}
} + + + + + + + + + + + + + + + + + {isLoading && } + {showDialog && ( + + )} + + ); +}; + +export default QrcodeCardEditor; diff --git a/src/redux/actions/actions.jsx b/src/redux/actions/actions.jsx index fab1c81..4139a4f 100644 --- a/src/redux/actions/actions.jsx +++ b/src/redux/actions/actions.jsx @@ -61,4 +61,9 @@ export const updateSelectedJson = (data) => ({ export const updatePartCDegreeType = (data) => ({ type:'UPDATE_PART_C_DEGREE_TYPE', payload: data, +}) + +export const updateEvQrcodeList = (data) => ({ + type:'UPDATE_EV_QRCODE_LIST', + payload: data, }) \ No newline at end of file diff --git a/src/redux/reducers/Reducer.jsx b/src/redux/reducers/Reducer.jsx index 2b4ce00..99a4eea 100644 --- a/src/redux/reducers/Reducer.jsx +++ b/src/redux/reducers/Reducer.jsx @@ -13,7 +13,8 @@ const initialState = { selectedError: null, selectedErrorData: [], selectedErrorJson: {}, - partCDegreeType : null + partCDegreeType : null, + evQrcodeList: [] }; const reducer = (state = initialState, action) => { @@ -44,6 +45,8 @@ const initialState = { return { ...state, selectedErrorJson:action?.payload} case 'UPDATE_PART_C_DEGREE_TYPE': return { ...state, partCDegreeType:action?.payload} + case 'UPDATE_EV_QRCODE_LIST': + return { ...state,evQrcodeList:action?.payload} default: return state; }