ev cover ui implemented

This commit is contained in:
yokesh22 2024-07-04 12:59:18 +05:30
parent b1c7a4df91
commit 42e60020fa
7 changed files with 585 additions and 8 deletions

View File

@ -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() {
<Route path="/" element={<Home />}></Route>
<Route path="/sqlPlayground" element={<QueryExecutor />}></Route>
<Route path="/sqlPlayground/edit" element={<QueryCardEditor/>}></Route>
<Route path="/evQrcode/edit" element={<QrcodeCardEditor/>}></Route>
<Route
path="/anomoly/attendence/reassigned"
element={<AnomolyReassigned />}
@ -80,7 +83,7 @@ function App() {
element={<PartACorrection />}
></Route>
<Route path="/anomoly/partC" element={<AnomolyPartC/>}></Route>
<Route path="/evQrcode" element={<EvQrcode/>}></Route>
</Routes>
</BrowserRouter>
</>

251
src/Components/EvQrcode.jsx Normal file
View File

@ -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 <CircularProgress />;
}
const currentItem = anomalyData[currentIndex];
const imageUrl = currentItem ? `https://docs.exampaper.vidh.ai/${currentItem.s3_path}` : '';
return (
<Layout style={{ minHeight: "100vh" }}>
<Layout>
<ToastContainer />
<Header style={{ padding: 0, background: colorBgContainer }}>
<Box className="d-flex justify-content-between h-100 py-1 px-2">
<Button className="bg-primary p-1 text-light" onClick={handleArrowBack}>
<ArrowBackIcon />
</Button>
<Box className="d-flex justify-content-between gap-2">
{reduxSystemNo && (
<Box
className="h6 p-0 m-0 text-light bg-primary rounded h-100 d-flex align-items-center px-3"
style={{ cursor: "pointer" }}
onClick={handleSystemNoChange}
>
<b>System No : </b> {reduxSystemNo}
</Box>
)}
<Button className="bg-primary p-1 text-light" onClick={() => navigate("/")}>
<HomeIcon />
</Button>
</Box>
</Box>
</Header>
<Content>
{currentItem ? (
<Box className="d-flex justify-content-center align-items-center flex-column" style={{ minHeight: '80vh' }}>
<Card style={{ display: 'flex', flexDirection: 'row', margin:'20px 20px 20px 20px' }}>
<Box style={{ flex: '20%', padding: '20px', marginTop:'30px', textAlign:'left' }}>
<Typography variant="h5" style={{paddingBottom:'20px'}}>Records Count: {anomalyData.length}</Typography>
<Typography variant="h6">Image Name: {currentItem.image_name}</Typography>
{/* <Typography variant="body2">S3 Path: {currentItem.s3_path}</Typography> */}
<Typography variant="subtitle1" style={{paddingTop:'20px', fontWeight:'bold'}}>Qrcode Value</Typography>
<input
type="text"
id="qrcodeInput"
placeholder="Enter qrcode value"
style={{
marginTop: '10px',
width: '100%',
padding: '5px',
backgroundColor: 'transparent',
color: '#000000' // black text color
}}
/>
<Box mt={2}>
<Button variant="contained" color="primary" onClick={handleNext} style={{ marginRight: 10 }}>
Skip
</Button>
<Button variant="contained" color="secondary" onClick={handleUpdate} style={{backgroundColor:'green'}}>
Update
</Button>
</Box>
</Box>
<CardContent style={{ flex: '80%' }}>
<img src={imageUrl} alt={currentItem.image_name} style={{ width: '100%', marginTop: '20px' }} />
</CardContent>
</Card>
</Box>
) : (
<Typography>No items to display</Typography>
)}
</Content>
{showSystemNoContainer && (
<SystemNumberDialog setShowSystemNoContainer={setShowSystemNoContainer} showSystemNoContainer={showSystemNoContainer} />
)}
</Layout>
</Layout>
);
}
export default EvQrcode;

View File

@ -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 = () => {
<Box className="d-flex justify-content-center text-light bg-primary rounded py-3">
<h1>Welcome to exampaper.vidh.ai</h1>
</Box>
<Box className="p-3">
<Box className="p-3" style={{width:'100%'}}>
{cards.map((card) => (
<HomepageCard title={card?.title} url={card?.url} />
))}

View File

@ -8,12 +8,16 @@ const HomepageCard = ({ title, url }) => {
<Row
gutter={16}
className="p-2"
onClick={() => {
navigate(url);
}}
>
<Col span={12}>
<Card title="" className="shadow" bordered={false}>
<Col span={24}>
<Card
onClick={() => {
navigate(url);
}}
title="" className="shadow"
bordered={true}
style={{with:'100%'}}
>
{title}
</Card>
</Col>

View File

@ -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}&degreeType=${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}&degreeType=${paramsDegreeType}&sysNo=${paramsSysNo}`;
console.log("new url ==== ", newUrl);
window.location.href = newUrl;
}
}
}catch(error){
throw new Error(error)
}
}
return (
<AntdesignLayout>
<Box className="d-flex justify-content-between align-items-center">
<Box className="d-flex flex-column gap-3 w-25">
{imageName && <h5 className="text-left">ID : {imageName}</h5>}
{paramsError && <h5 className="text-left">Error Code : {paramsError}</h5>}
<TextInputField
placeholder={"cover qrcode"}
value={evQrcode}
setValue={setEvQrcode}
/>
<Button
className="bg-primary text-white rounded p-3"
onClick={() => {
updateRecord();
}}
>
Update
</Button>
<Button
className="bg-primary text-white rounded p-3"
onClick={() => {
skipPage()
}}
>
Skip
</Button>
<Box className="d-flex justify-content-between">
<Button
className="bg-primary text-white rounded p-3"
onClick={() => setRotateAngle((prev) => prev - 90)}
>
Rotate <RotateLeftIcon />
</Button>
<Button
className="bg-primary text-white rounded p-3"
onClick={() => setRotateAngle((prev) => prev + 90)}
>
Rotate <RotateRightIcon />
</Button>
</Box>
</Box>
<Box className="w-75">
<Box className="px-5" id="img-container">
<img
src={`https://docs.exampaper.vidh.ai/${recordData?.s3_path}`}
width="100%"
height="auto"
/>
</Box>
</Box>
</Box>
{isLoading && <LoadingContainer />}
{showDialog && (
<SimpleDialog
type="rotation_results"
rotationResults={rotationResults}
setShowDialog={setShowDialog}
/>
)}
</AntdesignLayout>
);
};
export default QrcodeCardEditor;

View File

@ -62,3 +62,8 @@ export const updatePartCDegreeType = (data) => ({
type:'UPDATE_PART_C_DEGREE_TYPE',
payload: data,
})
export const updateEvQrcodeList = (data) => ({
type:'UPDATE_EV_QRCODE_LIST',
payload: data,
})

View File

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