latest
This commit is contained in:
parent
e28c9bce3d
commit
878444d2a9
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
|
|
@ -21,6 +21,8 @@
|
|||
"react-dom": "^18.3.1",
|
||||
"react-lazy-load-image-component": "^1.6.0",
|
||||
"react-medium-image-zoom": "^5.2.4",
|
||||
"react-notifications": "^1.7.4",
|
||||
"react-notifications-component": "^4.0.1",
|
||||
"react-qr-barcode-scanner": "^1.0.6",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.23.1",
|
||||
|
|
@ -5260,6 +5262,36 @@
|
|||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-notifications": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
|
||||
"integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
|
||||
"dependencies": {
|
||||
"acorn": "6.4.1",
|
||||
"classnames": "^2.1.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"react-transition-group": "^4.4.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-notifications-component": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-notifications-component/-/react-notifications-component-4.0.1.tgz",
|
||||
"integrity": "sha512-NRBkWO19AsXmN0b8YQ0L12eoCAhrnmIZtGm77ATWSfQEXPL5PYSyeACpx7tePP+R2De9b0IP4yk9vY4TtzC02w==",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-notifications/node_modules/acorn": {
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
|
||||
"integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-qr-barcode-scanner": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz",
|
||||
|
|
@ -9829,6 +9861,29 @@
|
|||
"resolved": "https://registry.npmjs.org/react-medium-image-zoom/-/react-medium-image-zoom-5.2.4.tgz",
|
||||
"integrity": "sha512-XLu/fLqpbmhiDAGA6yie78tDv4kh8GxvS7kKQArSOvCvm5zvgItoh4h01NAAvnezQ60ovsTeedHiHG3eG9CcGg=="
|
||||
},
|
||||
"react-notifications": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/react-notifications/-/react-notifications-1.7.4.tgz",
|
||||
"integrity": "sha512-dsR7mUQfe8YdFLqVsjT0GFd4n26UWkzefdjMELfEVygjuuyU6ZZ0LpZhFHdfmraGeBFLWHNxygpGlHHituUyjQ==",
|
||||
"requires": {
|
||||
"acorn": "6.4.1",
|
||||
"classnames": "^2.1.1",
|
||||
"prop-types": "^15.5.10",
|
||||
"react-transition-group": "^4.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"acorn": {
|
||||
"version": "6.4.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
|
||||
"integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-notifications-component": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-notifications-component/-/react-notifications-component-4.0.1.tgz",
|
||||
"integrity": "sha512-NRBkWO19AsXmN0b8YQ0L12eoCAhrnmIZtGm77ATWSfQEXPL5PYSyeACpx7tePP+R2De9b0IP4yk9vY4TtzC02w=="
|
||||
},
|
||||
"react-qr-barcode-scanner": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-qr-barcode-scanner/-/react-qr-barcode-scanner-1.0.6.tgz",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@
|
|||
"react-dom": "^18.3.1",
|
||||
"react-lazy-load-image-component": "^1.6.0",
|
||||
"react-medium-image-zoom": "^5.2.4",
|
||||
"react-notifications": "^1.7.4",
|
||||
"react-notifications-component": "^4.0.1",
|
||||
"react-qr-barcode-scanner": "^1.0.6",
|
||||
"react-redux": "^9.1.2",
|
||||
"react-router-dom": "^6.23.1",
|
||||
|
|
|
|||
187
src/App.css
187
src/App.css
|
|
@ -49,3 +49,190 @@
|
|||
.visited{
|
||||
background-color:rgba(128, 128, 128, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Notification Styles */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notification.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.notification.info {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
|
||||
.white-background{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.grey-background{
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.notification {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 10px;
|
||||
z-index: 1000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notification.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.notification.info {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
html,body{
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
button{
|
||||
padding: 8px 16px;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: #e69100;
|
||||
color: white;
|
||||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alert{
|
||||
background: #ffdb9b;
|
||||
padding: 20px 40px;
|
||||
min-width: 420px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
border-radius: 4px;
|
||||
border-left: 8px solid #ffa502;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.alert.showAlert{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.alert.show{
|
||||
animation: show_slide 1s ease forwards;
|
||||
}
|
||||
@keyframes show_slide {
|
||||
0%{
|
||||
transform: translateX(100%);
|
||||
}
|
||||
40%{
|
||||
transform: translateX(-10%);
|
||||
}
|
||||
80%{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
}
|
||||
.alert.hide{
|
||||
animation: hide_slide 1s ease forwards;
|
||||
}
|
||||
@keyframes hide_slide {
|
||||
0%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
40%{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
80%{
|
||||
transform: translateX(-10%);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.alert .fa-exclamation-circle{
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #ce8500;
|
||||
font-size: 30px;
|
||||
}
|
||||
.alert .msg{
|
||||
padding: 0 20px;
|
||||
font-size: 18px;
|
||||
color: #ce8500;
|
||||
}
|
||||
.alert .close-btn{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #ffd080;
|
||||
padding: 20px 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alert .close-btn:hover{
|
||||
background: #ffc766;
|
||||
}
|
||||
.alert .close-btn .fas{
|
||||
color: #ce8500;
|
||||
font-size: 22px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -30,6 +30,7 @@ import PlayGround from "./Components/PlayGround";
|
|||
import Revaluation from "./Components/Revaluation";
|
||||
import PlayGroundUpdated from "./Components/PlaygroundUpdated"
|
||||
import DummyDuplicates from "./Components/DummyDuplicates";
|
||||
import IndividualStudAttendence from "./Components/IndividualStudAttendence";
|
||||
|
||||
|
||||
function App() {
|
||||
|
|
@ -58,6 +59,7 @@ function App() {
|
|||
path="/sqlPlayground/Editor"
|
||||
element={<RecordEditor />}
|
||||
></Route>
|
||||
<Route path = "/anomoly/attendence/stud_check" element={<IndividualStudAttendence/>}></Route>
|
||||
<Route
|
||||
path="/anomoly/attendence/additionalSheet"
|
||||
element={<AttendanceAdditionalSheet />}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ const AnomolyAttendencePage = () =>{
|
|||
{
|
||||
title: "Additional Sheet Insertion",
|
||||
url: "/anomoly/attendence/additionalSheet",
|
||||
},
|
||||
{
|
||||
title: "Individual Attendence Sheet Check",
|
||||
url: "/anomoly/attendence/stud_check",
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -464,7 +464,7 @@ const CustomQueryExecutorCard = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<Box className="w-100 rounded shadow mb-5 bg-white">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Box } from "@mui/material";
|
||||
import HomepageCard from "./HomepageCard";
|
||||
import {useState,useEffect} from "react"
|
||||
import Notification from "./Notification";
|
||||
|
||||
const Home = () => {
|
||||
const cards = [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,248 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Box, Button } from "@mui/material";
|
||||
import AntdesignLayout from "./AntdesignLayout";
|
||||
import LoadingContainer from "./LoadingContainer";
|
||||
import infinity_loader from "../../assets/Infinity_loader.gif";
|
||||
import Notification from "./Notification"; // Import the Notification component
|
||||
import { Height } from "@mui/icons-material";
|
||||
import ZoomInIcon from "@mui/icons-material/ZoomIn";
|
||||
import ZoomOutIcon from "@mui/icons-material/ZoomOut";
|
||||
|
||||
const IndividualStudAttendence = () => {
|
||||
const [registerNumber, setRegisterNumber] = useState(null);
|
||||
const [subjectCode, setSubjectCode] = useState(null);
|
||||
const [attendenceSerialNo, setAttendenceSerialNo] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [attendenceResults, setAttendenceResults] = useState(null);
|
||||
const [zoomValue, setZoomValue] = useState(950);
|
||||
const [absentStatus, setAbsentStatus] = useState(-1);
|
||||
const [notification, setNotification] = useState(null); // Notification state
|
||||
const [type, setType] = useState(null);
|
||||
|
||||
const showNotification = (message, type) => {
|
||||
setNotification({ message, type });
|
||||
};
|
||||
|
||||
const updateStudentStatus = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
attendenceResults,
|
||||
absentStatus,
|
||||
attendenceSerialNo,
|
||||
register_number: registerNumber,
|
||||
subject_code: subjectCode,
|
||||
};
|
||||
|
||||
const response = await fetch(
|
||||
`${
|
||||
import.meta.env.VITE_REACT_APP_BACKEND_URL
|
||||
}/updateStudentAttendenceStatus`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log("The response data ===== ", responseData);
|
||||
|
||||
if (responseData?.status === "success") {
|
||||
fetchAttendenceData();
|
||||
showNotification("Record updated successfully !!", "success");
|
||||
}
|
||||
setIsLoading(false);
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
console.error("Error updating student status:", error);
|
||||
showNotification("Error updating student status", "error");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Absent status changed ==== ", absentStatus);
|
||||
if (Number(absentStatus) === 0 || Number(absentStatus) === 1) {
|
||||
updateStudentStatus();
|
||||
}
|
||||
}, [absentStatus]);
|
||||
|
||||
const fetchAttendenceData = async () => {
|
||||
setAbsentStatus(-1);
|
||||
if (!attendenceSerialNo) {
|
||||
if (!registerNumber || !subjectCode) {
|
||||
showNotification(
|
||||
"Registration Number && Subject Code is Mandatory !!",
|
||||
"error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (registerNumber && subjectCode) {
|
||||
setType(1);
|
||||
} else if (attendenceSerialNo) {
|
||||
setType(2);
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
registerNumber,
|
||||
subjectCode,
|
||||
attendenceSerialNo,
|
||||
};
|
||||
|
||||
const response = await fetch(
|
||||
`${import.meta.env.VITE_REACT_APP_BACKEND_URL}/fetchAttendenceData`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
const responseData = await response.json();
|
||||
console.log("response data ========= ", responseData);
|
||||
setIsLoading(false);
|
||||
if (responseData?.status === "success") {
|
||||
setAttendenceResults(responseData?.results);
|
||||
setType(responseData?.type)
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
console.error("Error fetching attendance data:", error);
|
||||
showNotification("Error fetching attendance data", "error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AntdesignLayout>
|
||||
<Box className="d-flex justify-content-center w-100 gap-3 align-items-center">
|
||||
<div className="mb-3">
|
||||
<label htmlFor="exampleFormControlInput1" className="form-label">
|
||||
Register Number:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control p-3"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder="Eg : 202385510254788"
|
||||
onChange={(e) => setRegisterNumber(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="exampleFormControlInput1" className="form-label">
|
||||
Subject Code:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control p-3"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder="Eg : E1TL11"
|
||||
onChange={(e) => setSubjectCode(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="exampleFormControlInput1" className="form-label">
|
||||
Attendence Serial No:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control p-3"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder=""
|
||||
onChange={(e) => setAttendenceSerialNo(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm px-4 h-75"
|
||||
onClick={fetchAttendenceData}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Box>
|
||||
{attendenceResults?.length > 0 && (
|
||||
<Box className="d-flex justify-content-center gap-5 mx-5">
|
||||
<Box className="text-left" style={{ maxWidth: "500px" }}>
|
||||
{Object.keys(attendenceResults[0]).map((key, index) => (
|
||||
<Box key={index}>
|
||||
<strong>
|
||||
{key} : {attendenceResults[0][key]}
|
||||
</strong>
|
||||
</Box>
|
||||
))}
|
||||
{type === 1 && (
|
||||
<Box className="d-flex gap-3 my-3">
|
||||
<Button
|
||||
className="btn bg-primary rounded text-white p-3"
|
||||
onClick={() => setAbsentStatus(1)}
|
||||
>
|
||||
Mark As Absent
|
||||
</Button>
|
||||
<Button
|
||||
className="btn bg-primary rounded text-white p-3"
|
||||
onClick={() => setAbsentStatus(0)}
|
||||
>
|
||||
Mark As Present
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Box className="d-flex justify-content-end gap-3 my-3">
|
||||
<Button
|
||||
className="btn bg-primary rounded text-white p-3"
|
||||
onClick={() => setZoomValue((prev) => prev + 50)}
|
||||
>
|
||||
<ZoomInIcon />
|
||||
</Button>
|
||||
<Button
|
||||
className="btn bg-primary rounded text-white p-3"
|
||||
onClick={() => setZoomValue((prev) => prev - 50)}
|
||||
>
|
||||
<ZoomOutIcon />
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
id="image-container"
|
||||
className="overflow-auto d-flex flex-column"
|
||||
style={{ height: `${type === 1 ? "80vh" : ""}` }}
|
||||
>
|
||||
{attendenceResults.length > 0 && type === 2 && (
|
||||
<img
|
||||
src={`https://docs.exampaper.vidh.ai/${attendenceResults[0]?.s3_image_path}`}
|
||||
width={`${zoomValue}px`}
|
||||
alt="Attendence-image"
|
||||
/>
|
||||
)}
|
||||
{attendenceResults.length > 0 && type === 1 && (
|
||||
<img
|
||||
src={`https://docs.exampaper.vidh.ai/${attendenceResults[0]?.s3_path}`}
|
||||
width={`${zoomValue}px`}
|
||||
alt="Attendence-image"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
{attendenceResults?.length == 0 && (
|
||||
<Box className="my-3">Attendence Record Not Found !!</Box>
|
||||
)}
|
||||
{isLoading && <LoadingContainer />}
|
||||
{notification && (
|
||||
<Notification
|
||||
message={notification.message}
|
||||
type={notification.type}
|
||||
onClose={() => setNotification(null)}
|
||||
/>
|
||||
)}
|
||||
</AntdesignLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndividualStudAttendence;
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
// // import React, { useEffect, useState } from 'react';
|
||||
// // import PropTypes from 'prop-types';
|
||||
|
||||
// // const Notification = ({ message, type, onClose, duration }) => {
|
||||
// // const [visible, setVisible] = useState(true);
|
||||
|
||||
// // useEffect(() => {
|
||||
// // const timer = setTimeout(() => {
|
||||
// // setVisible(false);
|
||||
// // setTimeout(onClose, 300); // Allow time for the fade-out transition
|
||||
// // }, duration);
|
||||
|
||||
// // return () => clearTimeout(timer);
|
||||
// // }, [onClose, duration]);
|
||||
|
||||
// // return (
|
||||
// // <div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
|
||||
// // {message}
|
||||
// // </div>
|
||||
// // );
|
||||
// // };
|
||||
|
||||
// // Notification.propTypes = {
|
||||
// // message: PropTypes.string.isRequired,
|
||||
// // type: PropTypes.string,
|
||||
// // onClose: PropTypes.func.isRequired,
|
||||
// // duration: PropTypes.number
|
||||
// // };
|
||||
|
||||
// // Notification.defaultProps = {
|
||||
// // type: 'info',
|
||||
// // duration: 1000 // Set duration to 1000 milliseconds (1 second)
|
||||
// // };
|
||||
|
||||
// // export default Notification;
|
||||
|
||||
|
||||
// import React, { useEffect, useState } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
|
||||
// const Notification = ({ message, type, onClose, duration }) => {
|
||||
// const [visible, setVisible] = useState(true);
|
||||
// console.log("From notification container ....")
|
||||
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// setVisible(false);
|
||||
// setTimeout(onClose, 300); // Allow time for the fade-out transition
|
||||
// }, duration);
|
||||
|
||||
// return () => clearTimeout(timer);
|
||||
// }, [onClose, duration]);
|
||||
|
||||
// return (
|
||||
// visible && (
|
||||
// <div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
|
||||
// {message}
|
||||
// </div>
|
||||
// )
|
||||
// );
|
||||
// };
|
||||
|
||||
// Notification.propTypes = {
|
||||
// message: PropTypes.string.isRequired,
|
||||
// type: PropTypes.string,
|
||||
// onClose: PropTypes.func.isRequired,
|
||||
// duration: PropTypes.number
|
||||
// };
|
||||
|
||||
// Notification.defaultProps = {
|
||||
// type: 'info',
|
||||
// duration: 3000 // Set duration to 3000 milliseconds (3 seconds)
|
||||
// };
|
||||
|
||||
// export default Notification;
|
||||
|
||||
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Notification = ({ message, type, onClose, duration }) => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
console.log("From notification container ....");
|
||||
|
||||
useEffect(() => {
|
||||
console.log("Notification useEffect triggered ....");
|
||||
const timer = setTimeout(() => {
|
||||
setVisible(false);
|
||||
setTimeout(onClose, 300); // Allow time for the fade-out transition
|
||||
}, duration);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [onClose, duration]);
|
||||
|
||||
return (
|
||||
visible && (
|
||||
<div className={`notification ${type} ${visible ? 'show' : 'hide'}`}>
|
||||
{message}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
Notification.propTypes = {
|
||||
message: PropTypes.string.isRequired,
|
||||
type: PropTypes.string,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
duration: PropTypes.number
|
||||
};
|
||||
|
||||
Notification.defaultProps = {
|
||||
type: 'info',
|
||||
duration: 3000 // Set duration to 3000 milliseconds (3 seconds)
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
|
|
@ -10,10 +10,11 @@ import TextInputField from "./TextInputField";
|
|||
import { Height } from "@mui/icons-material";
|
||||
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
|
||||
import LoadingContainer from "./LoadingContainer";
|
||||
//import { toast } from "react-toastify";
|
||||
import { toast } from "react-toastify";
|
||||
import { updatePlayGroundAttendence } from "./Utilities/AttendencePlaygroundUtilities";
|
||||
import { updateAttendenceBlank } from "./Utilities/AttendencePlaygroundUtilities";
|
||||
|
||||
import Notification from "./Notification"; // Import the Notification component
|
||||
import { ToastContainer } from "react-toastify";
|
||||
|
||||
const PlayGroundEditContainer = ({
|
||||
data,
|
||||
|
|
@ -36,29 +37,94 @@ const PlayGroundEditContainer = ({
|
|||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [qrcode, setQrcode] = useState(null);
|
||||
const [subjectCode, setSubjectCode] = useState(null);
|
||||
const [marksR1, setMarksR1] = useState(null);
|
||||
const [marksR2, setMarksR2] = useState(null);
|
||||
const [open, setOpen] = useState(true); // Set open state to true by default
|
||||
|
||||
const [notification, setNotification] = useState(null); // Notification state
|
||||
|
||||
const showNotification = (message, type) => {
|
||||
console.log("setting notification ===== ", message);
|
||||
const notificationData = { message, type}
|
||||
console.log("notification data ==== ",notificationData)
|
||||
setNotification(notificationData);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
console.log("image_name ======================= ", imageName)
|
||||
console.log("image_name ======================= ", imageName);
|
||||
console.log("data === i ==== ", data);
|
||||
useEffect(() => {
|
||||
const fetchImageData = async () => {
|
||||
setIsLoading(true)
|
||||
try{
|
||||
if (data) {
|
||||
setQrcode(data?.qrcode);
|
||||
setBarcode(data?.barcode);
|
||||
setMarks(data?.marks);
|
||||
setSubjectCode(data?.subject_code);
|
||||
setRegisterNumber(data?.register_number);
|
||||
setTotalAbsent(data?.total_absent)
|
||||
setTotalPresent(data?.total_present)
|
||||
setTotalStudents(data?.total_students)
|
||||
const payload = {
|
||||
type,
|
||||
imageName,
|
||||
tableName,
|
||||
};
|
||||
const response = await fetch(
|
||||
`${
|
||||
import.meta.env.VITE_REACT_APP_BACKEND_URL
|
||||
}/fetchTableImageNameData`,
|
||||
{
|
||||
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") {
|
||||
const imageData = responseData?.results;
|
||||
if (imageData && imageData?.length > 0) {
|
||||
const imageDataEle = imageData[0];
|
||||
setQrcode(imageDataEle?.qrcode);
|
||||
setBarcode(imageDataEle?.barcode);
|
||||
setMarks(imageDataEle?.marks);
|
||||
setMarksR1(imageDataEle?.marks_R1);
|
||||
setMarksR2(imageDataEle?.marks_R2);
|
||||
setSubjectCode(imageDataEle?.subject_code);
|
||||
setRegisterNumber(imageDataEle?.register_number);
|
||||
setTotalAbsent(imageDataEle?.total_absent);
|
||||
setTotalPresent(imageDataEle?.total_present);
|
||||
setTotalStudents(imageDataEle?.total_students);
|
||||
}
|
||||
}
|
||||
}
|
||||
}catch(error){
|
||||
throw new Error(error)
|
||||
setIsLoading(false)
|
||||
}
|
||||
};
|
||||
fetchImageData()
|
||||
console.log("the currect editor type: ", type);
|
||||
}, [data]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (data) {
|
||||
// setQrcode(data?.qrcode);
|
||||
// setBarcode(data?.barcode);
|
||||
// setMarks(data?.marks);
|
||||
// setMarksR1(data?.marks_R1);
|
||||
// setMarksR2(data?.marks_R2);
|
||||
// setSubjectCode(data?.subject_code);
|
||||
// setRegisterNumber(data?.register_number);
|
||||
// setTotalAbsent(data?.total_absent);
|
||||
// setTotalPresent(data?.total_present);
|
||||
// setTotalStudents(data?.total_students);
|
||||
// }
|
||||
// console.log("the currect editor type: ", type);
|
||||
// }, [data]);
|
||||
|
||||
const updateRecordPartC = async () => {
|
||||
if (!marks) {
|
||||
return;
|
||||
}
|
||||
// if (!marks) {
|
||||
// return;
|
||||
// }
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
|
|
@ -68,6 +134,8 @@ const PlayGroundEditContainer = ({
|
|||
s3Path,
|
||||
subjectCode,
|
||||
marks,
|
||||
marksR1,
|
||||
marksR2,
|
||||
imageName,
|
||||
rotateAngle,
|
||||
};
|
||||
|
|
@ -85,21 +153,28 @@ const PlayGroundEditContainer = ({
|
|||
setIsLoading(false);
|
||||
console.log("response data ========= ", responseData);
|
||||
if (responseData?.status === "success") {
|
||||
//toast.success("Record Updated Successfully ...");
|
||||
showNotification("Record updated successfully !!", "success");
|
||||
setShowEditContainer(false);
|
||||
const queryContainerEle = document.getElementById(imageName)
|
||||
console.log("querycontainerEle ===== ",queryContainerEle)
|
||||
if(queryContainerEle){
|
||||
queryContainerEle.classList.add("grey-background")
|
||||
toast.success("Record Updated Successfully !!")
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
//toast.error("Something Went Wrong ...");
|
||||
showNotification("Something Went Wrong !!", "error");
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const updateRecordPartA = async () => {
|
||||
setNotification({})
|
||||
console.log(registerNumber);
|
||||
console.log(subjectCode);
|
||||
console.log(barcode, qrcode);
|
||||
console.log("image_name = ", imageName)
|
||||
console.log("image_name = ", imageName);
|
||||
console.log(!registerNumber && !subjectCode && (!barcode || !qrcode));
|
||||
if (!registerNumber && !subjectCode && (!barcode || !qrcode)) {
|
||||
return;
|
||||
|
|
@ -128,10 +203,18 @@ const PlayGroundEditContainer = ({
|
|||
);
|
||||
const responseData = await response.json();
|
||||
setIsLoading(false);
|
||||
console.log("response data ========= ", responseData);
|
||||
console.log("response data 122 ========= ", responseData);
|
||||
if (responseData?.status === "success") {
|
||||
toast.success("Record Updated Successfully ...");
|
||||
showNotification("Record updated successfully !!", "success");
|
||||
setShowEditContainer(false);
|
||||
const queryContainerEle = document.getElementById(imageName)
|
||||
console.log("querycontainerEle ===== ",queryContainerEle)
|
||||
if(queryContainerEle){
|
||||
queryContainerEle.classList.add("grey-background")
|
||||
}
|
||||
setTimeout(()=>{
|
||||
showNotification("Record Updated Successfully !!","success")
|
||||
},500)
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false);
|
||||
|
|
@ -155,8 +238,9 @@ const PlayGroundEditContainer = ({
|
|||
style={{ zIndex: 100 }}
|
||||
fullWidth
|
||||
>
|
||||
<ToastContainer/>
|
||||
<DialogContent>
|
||||
<Box className="d-flex justify-content-between align-items-start gap-4">
|
||||
<Box className="d-flex justify-content-between align-items-center gap-4">
|
||||
<Box className="d-flex flex-column" style={imageStyle}>
|
||||
<img
|
||||
src={`https://docs.exampaper.vidh.ai/${s3Path}`}
|
||||
|
|
@ -213,11 +297,23 @@ const PlayGroundEditContainer = ({
|
|||
</>
|
||||
)}
|
||||
{type == "PartC" ? (
|
||||
<>
|
||||
<TextInputField
|
||||
value={marks}
|
||||
setValue={setMarks}
|
||||
placeholder={"Marks"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={marksR1}
|
||||
setValue={setMarksR1}
|
||||
placeholder={"Marks R1"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={marksR2}
|
||||
setValue={setMarksR2}
|
||||
placeholder={"Marks R2"}
|
||||
/>
|
||||
</>
|
||||
) : type == "PartA" ? (
|
||||
<TextInputField
|
||||
value={registerNumber}
|
||||
|
|
@ -268,6 +364,13 @@ const PlayGroundEditContainer = ({
|
|||
</Box>
|
||||
</DialogContent>
|
||||
{isLoading && <LoadingContainer />}
|
||||
{notification && (
|
||||
<Notification
|
||||
message={notification.message}
|
||||
type={notification.type}
|
||||
onClose={() => setNotification(null)}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -58,7 +58,9 @@ const UpdatedPlaygroundUpdater = ({
|
|||
const [bar_code, set_Barcode] = useState(null);
|
||||
const [s3Path, setS3Path] = useState(null);
|
||||
const [subjectCode, setSubjectCode] = useState(null);
|
||||
const [data,setData] = useState(null)
|
||||
const [data, setData] = useState(null);
|
||||
const [marksR1, setMarksR1] = useState(null);
|
||||
const [marksR2, setMarksR2] = useState(null);
|
||||
|
||||
const [open, setOpen] = useState(true); // Set open state to true by default
|
||||
const handleClose = () => {
|
||||
|
|
@ -68,10 +70,10 @@ const UpdatedPlaygroundUpdater = ({
|
|||
useEffect(() => {
|
||||
console.log("data ========== ", data);
|
||||
if (data) {
|
||||
console.log("barcode = ", data.barcode)
|
||||
console.log("barcode = ", data.barcode);
|
||||
setQrcode(data.qrcode);
|
||||
// set_Barcode(data.barcode)
|
||||
set_Barcode(data.barcode === '' ? null : data.barcode);
|
||||
set_Barcode(data.barcode === "" ? null : data.barcode);
|
||||
setMarks(data.marks);
|
||||
setS3Path(data.s3_path);
|
||||
setSubjectCode(data.subject_code);
|
||||
|
|
@ -88,7 +90,6 @@ const UpdatedPlaygroundUpdater = ({
|
|||
// 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]);
|
||||
|
|
@ -492,7 +493,7 @@ const UpdatedPlaygroundUpdater = ({
|
|||
useEffect(() => {
|
||||
if (oldData?.image_name && tableName) {
|
||||
const fetchPrimaryKeyData = async () => {
|
||||
setIsLoading(true)
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const payload = {
|
||||
table: tableName,
|
||||
|
|
@ -510,7 +511,7 @@ const UpdatedPlaygroundUpdater = ({
|
|||
);
|
||||
const responseData = await response.json();
|
||||
console.log("response json 11 === ", responseData);
|
||||
setIsLoading(false)
|
||||
setIsLoading(false);
|
||||
if (responseData?.status === "success") {
|
||||
const results = responseData?.data;
|
||||
console.log("results ==== ", results);
|
||||
|
|
@ -520,7 +521,7 @@ const UpdatedPlaygroundUpdater = ({
|
|||
}
|
||||
}
|
||||
} catch (error) {
|
||||
setIsLoading(false)
|
||||
setIsLoading(false);
|
||||
throw new Error(error);
|
||||
}
|
||||
};
|
||||
|
|
@ -640,17 +641,17 @@ const UpdatedPlaygroundUpdater = ({
|
|||
{type !== "Attendence" ? (
|
||||
<>
|
||||
<TextInputField
|
||||
value={qrcode || ''}
|
||||
value={qrcode || ""}
|
||||
setValue={setQrcode}
|
||||
placeholder={"QR code"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={bar_code || ''}
|
||||
value={bar_code || ""}
|
||||
setValue={set_Barcode}
|
||||
placeholder={"BarCode"}
|
||||
/>
|
||||
<TextInputField
|
||||
value={subjectCode || ''}
|
||||
value={subjectCode || ""}
|
||||
setValue={setSubjectCode}
|
||||
placeholder={"Subject code"}
|
||||
/>
|
||||
|
|
@ -685,14 +686,16 @@ const UpdatedPlaygroundUpdater = ({
|
|||
</>
|
||||
)}
|
||||
{type == "PartC" ? (
|
||||
<>
|
||||
<TextInputField
|
||||
value={marks}
|
||||
setValue={setMarks}
|
||||
placeholder={"Marks"}
|
||||
/>
|
||||
</>
|
||||
) : type == "PartA" ? (
|
||||
<TextInputField
|
||||
value={registerNumber || ''}
|
||||
value={registerNumber || ""}
|
||||
setValue={setRegisterNumber}
|
||||
placeholder={"Register no"}
|
||||
/>
|
||||
|
|
@ -764,8 +767,6 @@ const UpdatedPlaygroundUpdater = ({
|
|||
) : 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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue