607 lines
18 KiB
JavaScript
607 lines
18 KiB
JavaScript
import { Box, Button } from "@mui/material";
|
|
import DownloadIcon from "@mui/icons-material/Download";
|
|
import { LazyLoadImage } from "react-lazy-load-image-component";
|
|
import { Label, MoreHorizTwoTone, RotateRight } from "@mui/icons-material";
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { ToastContainer, toast } from "react-toastify";
|
|
import LoadingContainer from "./LoadingContainer";
|
|
import { useNavigate } from "react-router-dom";
|
|
// import "react-toastify/dist/ReactToastify.css";
|
|
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
|
|
import RotateRightIcon from "@mui/icons-material/RotateRight";
|
|
import PlayGroundEditContainer from "./PlayGroundEditContainer";
|
|
import saveRotatedImage from "./Utilities/PartCPlaygroundUtilities";
|
|
import markAsPartc from "./Utilities/PartAPlaygroundUtilities";
|
|
import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";
|
|
|
|
|
|
|
|
const CustomQueryExecutorCard = ({
|
|
data,
|
|
s3_image_column,
|
|
query,
|
|
error,
|
|
error_reason,
|
|
reduxSystemNo,
|
|
degreeType,
|
|
type,
|
|
tableName,
|
|
year
|
|
}) => {
|
|
// console.log("ERROR ============= ",error)
|
|
// console.log("ERROR REASON ============== ",error_reason)
|
|
// console.log("REDUX SYSTEM NO ================== ",reduxSystemNo)
|
|
const navigate = useNavigate();
|
|
console.log("year in custom query executer card ====== ",year)
|
|
const imageDomain = (year === "april2024" ? "https://docs.exampaper.vidh.ai" : (year === "november2024" ? 'https://images.exampaper.usln.in' : 'https://docs.exampaper.vidh.ai'))
|
|
console.log('imageDomain ===== ',imageDomain)
|
|
const [dataValue, setDataValue] = useState({});
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
// console.log("data in query executor Card : ", data);
|
|
const [keys, setKeys] = useState([]);
|
|
const [values, setValues] = useState([]);
|
|
const [rotateAngle, setRotateAngle] = useState(0);
|
|
const [imageName, setImageName] = useState(null);
|
|
const [tableNameData, setTableNameData] = useState(null);
|
|
const imageEleRef = useRef();
|
|
const [showEditContainer, setShowEditContainer] = useState(false);
|
|
const [editorType, setEditorType] = useState(null);
|
|
|
|
console.log("data =================== ", data);
|
|
// console.log("image column ====== ", s3_image_column);
|
|
// console.log("s3 image ======= ", data[s3_image_column]);
|
|
// console.log("Keys ==== ",keys)
|
|
// console.log("Values ===== ",values)
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
console.log("Image name ====== ", data?.image_name);
|
|
setImageName(data?.image_name);
|
|
}
|
|
if (tableName) {
|
|
setTableNameData(tableName);
|
|
}
|
|
if (data?.subject_code) {
|
|
}
|
|
}, [data]);
|
|
|
|
const updatePartAInstructions = async () => {
|
|
console.log("update instrunction");
|
|
const payload = {
|
|
data,
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/updatePartAInstructions`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
console.log("Updation successfull ....");
|
|
const updatedData = { ...dataValue, is_backpage: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
// toast.success("Record Marked as Backpage ! ....");
|
|
} else {
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const markAsPartc = async () => {
|
|
console.log("update markAsPartc");
|
|
const payload = {
|
|
data,
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/markAsPartc`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
console.log("Updation successfull ....");
|
|
const updatedData = { ...dataValue, is_backpage: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
// toast.success("Record Marked as Backpage ! ....");
|
|
} else {
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const updatePartAFront = async () => {
|
|
console.log("update front");
|
|
const payload = {
|
|
data,
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partAFrontSideMarking`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
console.log("Updation successfull ....");
|
|
const updatedData = { ...dataValue, is_backpage: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
// toast.success("Record Marked as Backpage ! ....");
|
|
} else {
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const updateFront = async () => {
|
|
console.log("update front");
|
|
const payload = {
|
|
data,
|
|
year
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvFrontSideMarking`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
console.log("Updation successfull ....");
|
|
const updatedData = { ...dataValue, is_backpage: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
// toast.success("Record Marked as Frontpage ! ....");
|
|
} else {
|
|
toast.error("Something Went Wrong !...");
|
|
setIsLoading(false)
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const updateBack = async () => {
|
|
const payload = {
|
|
data,
|
|
year
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvBacksideMarking`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
console.log("Updation successfull ....");
|
|
const updatedData = { ...dataValue, is_backpage: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
// toast.success("Record Marked as Backpage ! ....");
|
|
} else {
|
|
setIsLoading(false);
|
|
toast.error("Something Went Wrong !...");
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const initateProcess = () => {
|
|
console.log("inititate process..");
|
|
};
|
|
|
|
const rotateLeft = () => {
|
|
console.log("rotate left .....");
|
|
const newAngle = rotateAngle - 90;
|
|
setRotateAngle((prev) => prev - 90);
|
|
console.log("new angle ....", newAngle);
|
|
const newStyle = `rotate(${newAngle}deg)`;
|
|
imageEleRef.current.style.transform = newStyle;
|
|
};
|
|
|
|
const rotateRight = () => {
|
|
console.log("rotate right");
|
|
const newAngle = rotateAngle + 90;
|
|
setRotateAngle((prev) => prev + 90);
|
|
const newStyle = `rotate(${newAngle}deg)`;
|
|
imageEleRef.current.style.transform = newStyle;
|
|
};
|
|
|
|
const updateEvCover = async () => {
|
|
const payload = {
|
|
data,
|
|
year
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvCoverMarking`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
const updatedData = { ...dataValue, is_cover: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
console.log("Updation successfull ....");
|
|
// toast.success("Record Marked As Ev !...");
|
|
} else {
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const markAsPart_A = async () => {
|
|
const payload = {
|
|
data,
|
|
year
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/markAsPartA`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
const updatedData = { ...dataValue, is_cover: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
console.log("Updation successfull ....");
|
|
// toast.success("Record Marked As Ev !...");
|
|
} else {
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const markAsDummy = async () => {
|
|
const payload = {
|
|
data,
|
|
year
|
|
};
|
|
try {
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partcEvDummyMarking`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
const updatedData = { ...dataValue, is_cover: 1 };
|
|
// console.log("Data ===== ", updatedData);
|
|
setDataValue(updatedData);
|
|
console.log("Updation successfull ....");
|
|
// toast.success("Record Marked As Ev !...");
|
|
} else {
|
|
setIsLoading(false)
|
|
toast.error("Something Went Wrong !...");
|
|
throw new Error(responseData?.message);
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
toast.error("Something Went Wrong !...");
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const showContainerAction = () => {
|
|
setShowEditContainer(true);
|
|
console.log("type === ", type);
|
|
// setEditorType(type)
|
|
};
|
|
|
|
|
|
const updateAttendenceBlankAction = () =>{
|
|
updateAttendenceBlank(setIsLoading,data,setShowEditContainer)
|
|
}
|
|
|
|
const buttonActions = {
|
|
PartC: [
|
|
{ btnLabel: "Mark As Front", action: updateFront },
|
|
{ btnLabel: "Mark As Back", action: updateBack },
|
|
{ btnLabel: "Mark As Ev", action: updateEvCover },
|
|
{ btnLabel: "Mark As Dummy", action: markAsDummy },
|
|
{btnLabel: "Mark As Part-A", action: markAsPart_A},
|
|
{ btnLabel: "Edit", action: showContainerAction },
|
|
],
|
|
PartA: [
|
|
{ btnLabel: "Mark As Front", action: updatePartAFront },
|
|
{ btnLabel: "Mark As Backpage", action: updatePartAInstructions },
|
|
// { btnLabel: "Initiate Process", action: initateProcess },
|
|
{ btnLabel: "Mark As Dummy", action: markAsDummy },
|
|
{ btnLabel: "Mark As Part-C", action: markAsPartc },
|
|
{ btnLabel: "Edit", action: showContainerAction },
|
|
],
|
|
Attendence: [
|
|
{ btnLabel: "Mark As Blank", action:updateAttendenceBlankAction },
|
|
{ btnLabel: "Edit", action: showContainerAction },
|
|
]
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
setDataValue(data);
|
|
setKeys(Object.keys(data));
|
|
setValues(Object.values(data));
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
console.log("Data value ===== ", dataValue);
|
|
setKeys(Object.keys(dataValue));
|
|
setValues(Object.values(dataValue));
|
|
}, [dataValue]);
|
|
|
|
const rotate_and_process = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const payload = {
|
|
data,
|
|
};
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/partCRotateProcess`,
|
|
{
|
|
method: "POST",
|
|
header: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
const responseData = await response.json();
|
|
setIsLoading(false);
|
|
if (responseData.status === "success") {
|
|
console.log("Response successfull ...");
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
const saveRotatedImage = async () => {
|
|
try {
|
|
if (rotateAngle === 0) {
|
|
return;
|
|
}
|
|
const payload = {
|
|
imageName,
|
|
tableNameData,
|
|
rotateAngle,
|
|
s3_path: data[s3_image_column],
|
|
};
|
|
setIsLoading(true);
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/saveRotatedImage`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
setIsLoading(false);
|
|
const responseData = await response.json();
|
|
if (responseData.status === "success") {
|
|
toast.success("Image Rotation Saved Successfully");
|
|
} else {
|
|
toast.error("Something Went Wrong !...");
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
toast.error("Something Went Wrong !...");
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box className="w-100 rounded shadow mb-5 white-background" id={imageName}>
|
|
<ToastContainer/>
|
|
<Box className="p-4 d-flex justify-content-between align-items-start">
|
|
<Box className="p-1">
|
|
<Box className="p-2 d-flex justify-content-end gap-3 align-items-center">
|
|
{/* {query.includes("ocr_scanned_part_c_v1") &&
|
|
data[s3_image_column] && (
|
|
<>
|
|
<Button
|
|
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
|
onClick={() => navigate(`/sqlPlayground/edit?image_name=${data["image_name"]}&table=ocr_scanned_part_c_v1&error=${error}&error_reason=${error_reason}&sysNo=${reduxSystemNo}°reeType=${degreeType}`)}
|
|
>
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
|
onClick={() => {
|
|
mark_as_backpage();
|
|
}}
|
|
>
|
|
Mark As Back
|
|
</Button>
|
|
<Button
|
|
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
|
onClick={() => {
|
|
mark_as_ev();
|
|
}}
|
|
>
|
|
Mark As EV
|
|
</Button>
|
|
<Button
|
|
className="w-50 m-0 bg-primary text-white p-1 rounded"
|
|
onClick={() => {
|
|
mark_as_dummy();
|
|
}}
|
|
>
|
|
Mark As Dummy
|
|
</Button>
|
|
</>
|
|
)} */}
|
|
|
|
{/* <Button className="bg-primary">
|
|
<a
|
|
href={`https://docs.exampaper.vidh.ai/${data[s3_image_column]}`}
|
|
>
|
|
<DownloadIcon className="text-light text-white" />
|
|
</a>
|
|
</Button> */}
|
|
</Box>
|
|
<Box className="border border-dark" id={imageName}>
|
|
<img
|
|
src={`${imageDomain}/${data[s3_image_column]}`}
|
|
width="800px"
|
|
height="auto"
|
|
alt="Image Alt"
|
|
ref={imageEleRef}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
className="d-flex flex-column gap-2 mx-2 py-3"
|
|
style={{ minWidth: "250px" }}
|
|
>
|
|
{type &&
|
|
buttonActions[type].map((action) => (
|
|
<Button
|
|
className="m-0 bg-primary text-white p-3 rounded"
|
|
onClick={action?.action}
|
|
>
|
|
{action?.btnLabel}
|
|
</Button>
|
|
))}
|
|
<Box className="d-flex flex-column justify-content-between gap-2 my-2">
|
|
<Button
|
|
className="m-0 bg-primary text-white p-3 rounded"
|
|
onClick={rotateLeft}
|
|
>
|
|
Rotate left
|
|
<RotateLeftIcon />
|
|
</Button>
|
|
|
|
<Button
|
|
className="m-0 bg-primary text-white p-3 rounded"
|
|
onClick={rotateRight}
|
|
>
|
|
Rotate Right
|
|
<RotateRight />
|
|
</Button>
|
|
<Button
|
|
className="m-0 bg-primary text-white p-3 rounded"
|
|
onClick={() =>
|
|
saveRotatedImage(
|
|
imageName,
|
|
tableNameData,
|
|
rotateAngle,
|
|
data,
|
|
setIsLoading
|
|
)
|
|
}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<Box className="text-left p-3 d-flex flex-column justify-content-between align-items-between h-100">
|
|
{keys.map((record, index) => (
|
|
<p>
|
|
<strong>{keys[index]}</strong> : {values[index]}
|
|
</p>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
{isLoading && <LoadingContainer loadingText={"Loading ..."} />}
|
|
{showEditContainer && (
|
|
<PlayGroundEditContainer
|
|
type={type}
|
|
year = {year}
|
|
imageDomain = {imageDomain}
|
|
rotateAngle={rotateAngle}
|
|
data={data}
|
|
s3Path={data[s3_image_column]}
|
|
tableName={tableName}
|
|
imageName={data["image_name"]}
|
|
setShowEditContainer={setShowEditContainer}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CustomQueryExecutorCard;
|