816 lines
25 KiB
JavaScript
816 lines
25 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";
|
|
import TextInputField from "./TextInputField";
|
|
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
|
|
|
const UpdatedPlaygroundUpdater = ({
|
|
oldData,
|
|
s3_image_column,
|
|
query,
|
|
error,
|
|
error_reason,
|
|
reduxSystemNo,
|
|
degreeType,
|
|
type,
|
|
tableName,
|
|
currentCardIndex,
|
|
setCurrentCardIndex,
|
|
setCardData,
|
|
totalData,
|
|
}) => {
|
|
// console.log("ERROR ============= ",error)
|
|
// console.log("ERROR REASON ============== ",error_reason)
|
|
// console.log("REDUX SYSTEM NO ================== ",reduxSystemNo)
|
|
const navigate = useNavigate();
|
|
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);
|
|
const dialogText = "This is dialog text";
|
|
const [marks, setMarks] = useState(null);
|
|
const [registerNumber, setRegisterNumber] = useState(null);
|
|
const [totalStudents, setTotalStudents] = useState(null);
|
|
const [totalPresent, setTotalPresent] = useState(null);
|
|
const [totalAbsent, setTotalAbsent] = useState(null);
|
|
// const [barcode, setBarcode] = useState(null);
|
|
const [qrcode, setQrcode] = useState(null);
|
|
const [bar_code, set_Barcode] = useState(null);
|
|
const [s3Path, setS3Path] = useState(null);
|
|
const [subjectCode, setSubjectCode] = useState(null);
|
|
const [data,setData] = useState(null)
|
|
|
|
const [open, setOpen] = useState(true); // Set open state to true by default
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log("data ========== ", data);
|
|
if (data) {
|
|
console.log("barcode = ", data.barcode)
|
|
setQrcode(data.qrcode);
|
|
// set_Barcode(data.barcode)
|
|
set_Barcode(data.barcode === '' ? null : data.barcode);
|
|
setMarks(data.marks);
|
|
setS3Path(data.s3_path);
|
|
setSubjectCode(data.subject_code);
|
|
setRegisterNumber(data.register_number);
|
|
setTotalAbsent(data?.total_absent);
|
|
setTotalPresent(data?.total_present);
|
|
setTotalStudents(data?.total_students);
|
|
setRotateAngle(0);
|
|
}
|
|
console.log("the currect editor type: ", type);
|
|
}, [data]);
|
|
|
|
// useEffect(() => {
|
|
// console.log("barcode in use effect ==== ", barcode);
|
|
// }, [barcode]);
|
|
|
|
|
|
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 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,
|
|
};
|
|
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,
|
|
};
|
|
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,
|
|
};
|
|
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 markAsDummy = async () => {
|
|
const payload = {
|
|
data,
|
|
};
|
|
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: "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 updateRecordPartA = async () => {
|
|
console.log(registerNumber);
|
|
console.log(subjectCode);
|
|
console.log(bar_code, qrcode);
|
|
console.log(!registerNumber && !subjectCode && (!bar_code || !qrcode));
|
|
if (!registerNumber && !subjectCode && (!bar_code || !qrcode)) {
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
try {
|
|
const payload = {
|
|
qrcode,
|
|
barcode: bar_code,
|
|
table: tableName,
|
|
s3Path,
|
|
subjectCode,
|
|
registerNumber,
|
|
imageName,
|
|
rotateAngle,
|
|
};
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/editPartAdata`,
|
|
{
|
|
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 ...");
|
|
if (totalData) {
|
|
console.log("current total length ... ", totalData?.length);
|
|
console.log("current current index ...", currentCardIndex);
|
|
if (currentCardIndex < totalData?.length - 1) {
|
|
setCurrentCardIndex((prev) => prev + 1);
|
|
}
|
|
}
|
|
const newCurrentIndex = currentCardIndex + 1;
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false);
|
|
//toast.error("Something Went Wrong ...");
|
|
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);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (oldData?.image_name && tableName) {
|
|
const fetchPrimaryKeyData = async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const payload = {
|
|
table: tableName,
|
|
image_name: oldData?.image_name,
|
|
};
|
|
const response = await fetch(
|
|
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchPrimaryKeyData`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}
|
|
);
|
|
const responseData = await response.json();
|
|
console.log("response json 11 === ", responseData);
|
|
setIsLoading(false)
|
|
if (responseData?.status === "success") {
|
|
const results = responseData?.data;
|
|
console.log("results ==== ", results);
|
|
if (results?.length > 0) {
|
|
console.log("results === ", results);
|
|
setData(results[0]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
setIsLoading(false)
|
|
throw new Error(error);
|
|
}
|
|
};
|
|
setTimeout(() => {
|
|
fetchPrimaryKeyData();
|
|
}, 200);
|
|
}
|
|
}, [oldData]);
|
|
|
|
return (
|
|
<Box className="w-100 rounded shadow mb-5 bg-white">
|
|
<ToastContainer />
|
|
<Box className="p-4 d-flex justify-content-between align-items-center">
|
|
<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={`https://docs.exampaper.vidh.ai/${oldData[s3_image_column]}`}
|
|
width="850px"
|
|
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="py-3 d-flex flex-column justify-content-end w-100 gap-3 p-3">
|
|
{type !== "Attendence" ? (
|
|
<>
|
|
<TextInputField
|
|
value={qrcode || ''}
|
|
setValue={setQrcode}
|
|
placeholder={"QR code"}
|
|
/>
|
|
<TextInputField
|
|
value={bar_code || ''}
|
|
setValue={set_Barcode}
|
|
placeholder={"BarCode"}
|
|
/>
|
|
<TextInputField
|
|
value={subjectCode || ''}
|
|
setValue={setSubjectCode}
|
|
placeholder={"Subject code"}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
<TextInputField
|
|
value={qrcode}
|
|
setValue={setQrcode}
|
|
placeholder={"QR code"}
|
|
/>
|
|
<TextInputField
|
|
value={subjectCode}
|
|
setValue={setSubjectCode}
|
|
placeholder={"Subject Code"}
|
|
/>
|
|
<TextInputField
|
|
value={totalStudents}
|
|
setValue={setTotalStudents}
|
|
placeholder={"Total Students"}
|
|
/>
|
|
<TextInputField
|
|
value={totalPresent}
|
|
setValue={setTotalPresent}
|
|
placeholder={"Total Present"}
|
|
/>
|
|
<TextInputField
|
|
value={totalAbsent}
|
|
setValue={setTotalAbsent}
|
|
placeholder={"Total Absent"}
|
|
/>
|
|
</>
|
|
)}
|
|
{type == "PartC" ? (
|
|
<TextInputField
|
|
value={marks}
|
|
setValue={setMarks}
|
|
placeholder={"Marks"}
|
|
/>
|
|
) : type == "PartA" ? (
|
|
<TextInputField
|
|
value={registerNumber || ''}
|
|
setValue={setRegisterNumber}
|
|
placeholder={"Register no"}
|
|
/>
|
|
) : null}
|
|
<Box display="flex" justifyContent="space-between">
|
|
<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
|
|
<RotateRightIcon />
|
|
</Button>
|
|
</Box>
|
|
{/* <Button
|
|
className="m-0 bg-primary text-white p-3 rounded"
|
|
onClick={() =>
|
|
saveRotatedImage(
|
|
imageName,
|
|
tableNameData,
|
|
rotateAngle,
|
|
data,
|
|
setIsLoading
|
|
)
|
|
}
|
|
>
|
|
Save
|
|
</Button> */}
|
|
|
|
{type == "PartC" ? (
|
|
<Button
|
|
className="bg-primary text-white p-3"
|
|
onClick={() => updateRecordPartC()}
|
|
>
|
|
Update
|
|
</Button>
|
|
) : type == "PartA" ? (
|
|
<Button
|
|
className="bg-primary text-white p-3"
|
|
onClick={() => updateRecordPartA()}
|
|
>
|
|
Update
|
|
</Button>
|
|
) : type == "Attendence" ? (
|
|
<Button
|
|
className="bg-primary text-white p-3"
|
|
onClick={() =>
|
|
updatePlayGroundAttendence(
|
|
setIsLoading,
|
|
qrcode,
|
|
subjectCode,
|
|
totalStudents,
|
|
totalPresent,
|
|
totalAbsent,
|
|
data,
|
|
setShowEditContainer
|
|
)
|
|
}
|
|
>
|
|
Update
|
|
</Button>
|
|
) : null}
|
|
{/* <Button className="bg-primary text-white p-3">Skip</Button> */}
|
|
|
|
|
|
|
|
<Box className="d-flex justify-content-between gap-5">
|
|
<Button
|
|
className="bg-primary text-white p-3 w-50"
|
|
onClick={() => {
|
|
if (totalData) {
|
|
if (currentCardIndex >= 1) {
|
|
setCurrentCardIndex((prev) => prev - 1);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<ArrowBackIcon />
|
|
</Button>
|
|
<Button
|
|
className="bg-primary text-white p-3 w-50"
|
|
onClick={() => {
|
|
if (totalData) {
|
|
console.log("current total length ... ", totalData?.length);
|
|
console.log("current current index ...", currentCardIndex);
|
|
if (currentCardIndex < totalData?.length - 1) {
|
|
setCurrentCardIndex((prev) => prev + 1);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<ArrowForwardIcon />
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
{isLoading && <LoadingContainer loadingText={"Loading ..."} />}
|
|
{showEditContainer && (
|
|
<PlayGroundEditContainer
|
|
type={type}
|
|
rotateAngle={rotateAngle}
|
|
data={data}
|
|
s3Path={data[s3_image_column]}
|
|
tableName={tableName}
|
|
imageName={data["image_name"]}
|
|
setShowEditContainer={setShowEditContainer}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default UpdatedPlaygroundUpdater;
|