some api setting

main
alireza khaji 2 years ago
parent e219ced301
commit e38efeaf6f
  1. 2
      src/App.js
  2. 9
      src/assets/img/Group 1862.svg
  3. 2
      src/components/Checkbox/index.js
  4. 76
      src/components/Product/index.js
  5. 4
      src/components/header/Header.js
  6. 1
      src/components/nav/Nav.js
  7. 10
      src/redux/actions/exam.js
  8. 1
      src/redux/actions/index.js
  9. 4
      src/redux/reducers/exam.js
  10. 18
      src/redux/reducers/exam2.js
  11. 1
      src/redux/reducers/index.js
  12. 6
      src/view/Exam/EnterExam/desktop/index.css
  13. 222
      src/view/Exam/EnterExam/desktop/index.js
  14. 42
      src/view/services/Budget.js
  15. 50
      src/view/services/index.js
  16. 79
      src/view/services/service/index.js

@ -763,7 +763,7 @@ function App() {
<Route path="/contacts" element={<ContactUs />} /> <Route path="/contacts" element={<ContactUs />} />
<Route <Route
exact exact
path="/azmoon_list/enter_exam/:id" path="/enter_exam/:id"
element={<ENTER_EXAM />} element={<ENTER_EXAM />}
/> />
<Route <Route

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43">
<g id="Group_1862" data-name="Group 1862" transform="translate(-1418 -250)">
<circle id="Ellipse_108" data-name="Ellipse 108" cx="21.5" cy="21.5" r="21.5" transform="translate(1418 250)" fill="#df1452"/>
<g id="Group_1861" data-name="Group 1861" transform="translate(-7 12)">
<path id="Vector" d="M0,12.683,12.683,0" transform="translate(1440.078 253.159)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M12.683,12.683,0,0" transform="translate(1440.078 253.159)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 772 B

@ -18,7 +18,7 @@ export default function Checkbox(props) {
</svg> </svg>
<div className="checkbox-container"> <div className="checkbox-container">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" onClick={props.onclick} onChange={props.onChange}/> <input defaultChecked={props.defaultChecked} className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" onClick={props.onclick} onChange={props.onChange}/>
<label className="checkbox" htmlFor={"ch"+props.name}> <label className="checkbox" htmlFor={"ch"+props.name}>
<span> <span>
<svg width="12px" height="10px"> <svg width="12px" height="10px">

@ -44,6 +44,8 @@ const ProductDesign = ({
onClick, onClick,
product, product,
userInfo, userInfo,
setShowBudget,
setBudgetFileId,
}) => { }) => {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
// alert(catId); // alert(catId);
@ -83,6 +85,12 @@ const ProductDesign = ({
}, },
]; ];
//budgetHandler-------------
const budgetHandler = (fileId) => {
setShowBudget(true);
setBudgetFileId(fileId);
};
//completeProfule----------- //completeProfule-----------
const completeProfule = (id) => { const completeProfule = (id) => {
localStorage.setItem("termId", id); localStorage.setItem("termId", id);
@ -376,39 +384,50 @@ const ProductDesign = ({
if (catId == 2) { if (catId == 2) {
return ( return (
<div <div
className={`flex cursor-pointer flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${ className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP ${
isMobile && "w-11/12" isMobile && "w-11/12"
}`} }`}
style={{ width: !isMobile && "375px", direction: "rtl" }} style={{ width: !isMobile && "100%", direction: "rtl" }}
> >
<div className="border-b border-red82OP pb-2 px-4" onClick={onClick}> <div className="border-b border-red82OP pb-2 px-4" onClick={onClick}>
<h1 className="text-red52 text-lg font-bold">آزمون {productName}</h1> <h1 className="text-red52 text-lg font-bold">{productName}</h1>
<p className="text-red26 text-sm my-2"> <p className="text-red26 text-sm my-2">{product?.description}</p>
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط
در این قسمت قرار میگیرد
</p>
</div> </div>
<div <div
className="flex border-b border-red82OP text-center" className="flex border-b border-red82OP text-center"
onClick={onClick} // onClick={onClick}
> >
<div className="w-1/2 border-l border-red82OP py-2 "> <div className="w-1/2 border-l border-red82OP py-2 ">
<h1 className="font-bold text-red26">نوع آزمون : آنلاین</h1> <h1 className="font-bold text-red26">
نوع آزمون : {product?.productType === 2 ? "حضوری" : "آنلاین"}
</h1>
</div> </div>
<div className="w-1/2 py-2 " onClick={onClick}> <div className="w-1/2 py-2 ">
<h1 className="font-bold text-red26">بودجه بندی آزمون</h1> <h1
className="font-bold text-red26 cursor-pointer"
onClick={() => budgetHandler(product?.exam?.budgetFileId)}
>
بودجه بندی آزمون
</h1>
</div> </div>
</div> </div>
<div <div
className="flex border-b border-red82OP text-center text-xs" className="flex border-b border-red82OP text-center text-xs"
onClick={onClick} // onClick={onClick}
> >
<div <div
className="w-1/2 border-l border-red82OP py-2 " className="w-1/2 border-l border-red82OP py-2 "
onClick={onClick} // onClick={onClick}
> >
<h1 className="font-bold text-red26">تاریخ برگزاری : 1400/02/13</h1> <h1 className="font-bold text-red26">
تاریخ برگزاری :{" "}
{product?.exam?.startDate
? moment(product?.exam?.startDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")
: "نامشخص"}
</h1>
</div> </div>
<div className="w-1/2 py-2 " onClick={onClick}> <div className="w-1/2 py-2 " onClick={onClick}>
<h1 className="font-bold text-red26">تعداد آزمون : 18</h1> <h1 className="font-bold text-red26">تعداد آزمون : 18</h1>
@ -419,11 +438,32 @@ const ProductDesign = ({
<h1 className="font-black text-xl text-red52"> <h1 className="font-black text-xl text-red52">
{productPrice} تومان {productPrice} تومان
</h1> </h1>
<div <div>
className={`bg-pinkF5 text-red26 w-32 border-2 rounded-md border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white {!rulesAccepted && (
<Link
to="/register"
className="w-36 py-2 px-1 rounded-md text-white bg-[#F2F9FF] text-[#4C7FE3] flex items-center justify-center cursor-pointer text-xs text-center border-2 border-[#4C7FE3]"
onClick={() => {
completeProfule(product?.termId);
}}
>
تکمیل اطلاعات کاربری و افزودن به سبد خرید
</Link>
)}
{rulesAccepted && (
<div
className={`bg-pinkF5 text-red26 w-36 border-2 rounded-md border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white
`} `}
> >
<button onClick={btnOnClick}>افزودن به سبد خرید</button> <button onClick={btnOnClick}>افزودن به سبد خرید</button>
</div>
)}
<div
className="w-36 py-2 px-1 rounded-md text-white bg-[#DF1452] text-white flex items-center justify-center cursor-pointer text-xs text-center border-2 border-pinkF5 mt-2"
onClick={onClick}
>
اطلاعات بیشتر
</div>
</div> </div>
</div> </div>
</div> </div>

@ -22,12 +22,8 @@ const Header = ({
user user
}) => { }) => {
let today = moment().locale("fa").format("YYYY/M/D"); let today = moment().locale("fa").format("YYYY/M/D");
console.log("today:");
console.log(today);
let weekday = new Date().getDay(); let weekday = new Date().getDay();
let weekdayList = ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه", 'پنجشنبه', 'جمعه', "شنبه"]; let weekdayList = ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه", 'پنجشنبه', 'جمعه', "شنبه"];
// console.log("weekday:");
// console.log(weekday);
const [menuPopup, setMenuPopup] = useState(false); const [menuPopup, setMenuPopup] = useState(false);
const [subMenu, setSubMenu] = useState(false); const [subMenu, setSubMenu] = useState(false);
const location = useLocation(); const location = useLocation();

@ -188,7 +188,6 @@ const Nav = ({ logOut, isMobile, isLogin, logout }) => {
const chaneNav = (id) => { const chaneNav = (id) => {
setNavId(id); setNavId(id);
let top = 100 / 6 + ((((id - 1) * 100) / 6) * 3) / 4; let top = 100 / 6 + ((((id - 1) * 100) / 6) * 3) / 4;
console.log(top);
document.querySelector(".back-item-img").style.top = `${top}%`; document.querySelector(".back-item-img").style.top = `${top}%`;
}; };
if (isMobile) { if (isMobile) {

@ -0,0 +1,10 @@
import proxy from "../proxy";
const exam = {
info:
(data = {}) =>
async (dispatch) =>
await proxy.get("exam/info", data, { dispatch }),
};
export default exam;

@ -13,6 +13,7 @@ export {default as scrollAction} from "./scroll";
export {default as qr} from "./qr"; export {default as qr} from "./qr";
export { default as userTransaction } from "./userTransaction"; export { default as userTransaction } from "./userTransaction";
export { default as term } from "./term"; export { default as term } from "./term";
export { default as exam } from "./exam";

@ -196,10 +196,6 @@ const initialState = {
export const numOfinitQs = initialState.questionBank.length; export const numOfinitQs = initialState.questionBank.length;
export default function addExamReduser(state = initialState, { type, payload }) { export default function addExamReduser(state = initialState, { type, payload }) {
console.log(state.courses)
switch (type) { switch (type) {
case 'ADD_EXAM_GRADE_AND_GROUP': case 'ADD_EXAM_GRADE_AND_GROUP':

@ -0,0 +1,18 @@
import { toast } from "react-toastify";
const initialState = {
loading: false,
error: null,
info:null
};
export default function exam2(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "exam/info":
return { ...state, loading: false, info: data, error: null };
default:
return state;
}
}

@ -13,3 +13,4 @@ export {default as qr} from "./qr";
export {default as addExamReduser} from "./exam"; export {default as addExamReduser} from "./exam";
export { default as userTransaction } from "./userTransaction"; export { default as userTransaction } from "./userTransaction";
export { default as term } from "./term"; export { default as term } from "./term";
export { default as exam2 } from "./exam2";

@ -185,7 +185,7 @@
.enter-exam-box{ .enter-exam-box{
height: auto; height: auto;
aspect-ratio: 0.7/1; /* aspect-ratio: 0.7/1; */
margin-top: 50px; margin-top: 50px;
padding: 25px; padding: 25px;
border: 0px solid #EBEBEB; border: 0px solid #EBEBEB;
@ -211,8 +211,8 @@
.enter-exam-box{ .enter-exam-box{
/* width: 466px; */ /* width: 466px; */
/* height: 662px; */ /* height: 662px; */
height: 70vh; /* height: 70vh;
aspect-ratio: 0.7/1; aspect-ratio: 0.7/1; */
margin-top: 110px; margin-top: 110px;
padding: 25px; padding: 25px;
border: 2px solid #EBEBEB; border: 2px solid #EBEBEB;

@ -1,5 +1,5 @@
import "./index.css"; import "./index.css";
import { useSelector } from "react-redux"; import { connect, useSelector } from "react-redux";
import { useState } from "react"; import { useState } from "react";
import img0 from "../../../../assets/azmoon-list/test.png"; import img0 from "../../../../assets/azmoon-list/test.png";
@ -17,150 +17,184 @@ import { Link } from "react-router-dom";
import moment from "jalali-moment"; import moment from "jalali-moment";
import { useEffect } from "react"; import { useEffect } from "react";
import { state } from "../../../../components/exam/Carousel/state"; import { state } from "../../../../components/exam/Carousel/state";
import { exam } from "../../../../redux/actions";
let gradeList = [
const EnterExam = ({ ID }) => { "اول",
// const state = useSelector((state) => state.default); "دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
const EnterExam = ({ ID, getExamInfo, examInfo }) => {
// const state = useSelector((state) => state.default);
console.log("Cheraaaaaaaaaaaaaa????????");
console.log(ID);
useEffect(() => {
getExamInfo({ id: ID });
}, []);
console.log(examInfo);
//------------------------------------------
const [common_data] = useState(state); const [common_data] = useState(state);
console.log(common_data);
let data; let data;
for (let i = 0; i < common_data.length; i++) { for (let i = 0; i < common_data.length; i++) {
if (common_data[i].id === Number(ID)) { if (common_data[i].id === Number(ID)) {
data = common_data[i]; data = common_data[i];
} }
} }
console.log("cc:"+data); console.log("cc:" + data);
//--today date--and timer setting----------------------------- //--today date--and timer setting-----------------------------
let today = new Date(); // let today = new Date();
let examDate = new Date(data.date) // let examDate = new Date(data.date)
console.log(today); // let diff = (examDate-today)/1000;
console.log(examDate); // let d = Math.floor(diff/86400);
let diff = (examDate-today)/1000; // let h = Math.floor((diff-(86400*d))/3600);
let d = Math.floor(diff/86400); // let m = Math.floor((diff-(86400*d)-(h*3600))/60);
console.log(d); // let s = Math.floor(diff-(86400*d)-(h*3600)-(m*60));
let h = Math.floor((diff-(86400*d))/3600); // const [timer,setTimer]=useState({
console.log(h); // d,h,m,s
let m = Math.floor((diff-(86400*d)-(h*3600))/60); // })
console.log(m);
let s = Math.floor(diff-(86400*d)-(h*3600)-(m*60));
console.log(s);
const [timer,setTimer]=useState({
d,h,m,s
})
useEffect(() => { useEffect(() => {
// console.log(sec); // console.log(sec);
if (timer.s >= 0 && diff > 0) { // if (timer.s >= 0 && diff > 0) {
setTimeout(() => { // setTimeout(() => {
// console.log("okdkdokodkd"); // // console.log("okdkdokodkd");
setTimer({ // setTimer({
d, // d,
h, // h,
m, // m,
s:s-1 // s:s-1
}); // });
if (timer.s === 0) { // if (timer.s === 0) {
setTimer({ // setTimer({
d, // d,
h, // h,
m:m-1, // m:m-1,
s:59 // s:59
}); // });
} // }
if (timer.m === 0) { // if (timer.m === 0) {
setTimer({ // setTimer({
d, // d,
h:h-1, // h:h-1,
m:59, // m:59,
s:59 // s:59
}); // });
} // }
if (timer.h === 0) { // if (timer.h === 0) {
setTimer({ // setTimer({
d:d-1, // d:d-1,
h:23, // h:23,
m:59, // m:59,
s:59 // s:59
}); // });
} // }
}, 1000); // }, 1000);
} // }
}); });
//------------------------------------------- //-------------------------------------------
moment.locale("en"); moment.locale("en");
return ( return (
<div className="enter-exam"> <div className="enter-exam">
<div className="enter-exam-box"> <div
className="enter-exam-box"
style={window.innerWidth < 1000 ? { width: "95%" } : { width: "35%",height:"auto" }}
>
<div className="eeb-title-box"> <div className="eeb-title-box">
<img className="eeb-title-box-img" src={img0} alt="title-box-img" /> <img className="eeb-title-box-img" src={img0} alt="title-box-img" />
<div className="eeb-title-box-title">به {data?.name}</div> <div className="eeb-title-box-title">به {examInfo?.name}</div>
<div className="eeb-title-box-subtitle">خوش آمدید</div> <div className="eeb-title-box-subtitle">خوش آمدید</div>
</div> </div>
<div className="eeb-name-box"> <div className="eeb-name-box">
<img className="eeb-name-box-icon" src={icon1} alt="name-icon" /> <img className="eeb-name-box-icon" src={icon1} alt="name-icon" />
<div className="eeb-name-box-label">نام آزمون:</div> <div className="eeb-name-box-label">نام آزمون:</div>
<div className="eeb-name-box-name">{data?.name.substr(6)}</div> <div className="eeb-name-box-name">{examInfo?.name}</div>
</div> </div>
<div className="eeb-level-box"> <div className="eeb-level-box">
<img className="eeb-level-box-icon" src={icon2} alt="name-icon" /> <img className="eeb-level-box-icon" src={icon2} alt="name-icon" />
<div className="eeb-level-box-label">پایه تحصیلی:</div> <div className="eeb-level-box-label">پایه تحصیلی:</div>
<div className="eeb-level-box-level">{data?.level}</div> <div className="eeb-level-box-level">
{gradeList[examInfo?.gradeId - 1]}
</div>
</div> </div>
<div className="eeb-date-box"> <div className="eeb-date-box">
<img className="eeb-date-box-icon" src={icon3} alt="name-icon" /> <img className="eeb-date-box-icon" src={icon3} alt="name-icon" />
<div className="eeb-date-box-label">زمان آزمون:</div> <div className="eeb-date-box-label">زمان آزمون:</div>
<div className="eeb-date-box-date"> {examInfo?.startDate && (
{moment(data?.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')} <div className="eeb-date-box-date">
</div> از{" "}
<div className="eeb-date-box-time">ساعت {examInfo?.startDate &&
{examDate.getHours()}:{examDate.getMinutes()} moment(examInfo?.startDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")}{" "}
تا{" "}
{examInfo?.endDate &&
moment(examInfo?.endDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")}
</div>
)}
{!examInfo?.startDate && (
<div className="eeb-date-box-date">نامشخص</div>
)}
{/* <div className="eeb-date-box-time">
ساعت
</div> </div> */}
</div> </div>
<div className="eeb-negetive-point-and-question-type-box"> <div
<div className="eeb-np-box"> className="eeb-negetive-point-and-question-type-box"
style={{ display: "block" }}
>
<div className="eeb-np-box border-b border-[#F5F5F5]">
<img className="eeb-np-box-icon" src={icon4} alt="name-icon" /> <img className="eeb-np-box-icon" src={icon4} alt="name-icon" />
<div className="eeb-np-box-label">نمره منفی:</div> <div className="eeb-np-box-label">نمره منفی:</div>
<div className="eeb-np-box-have"> <div className="eeb-np-box-have">
{data?.negattiveMode && "دارد"} {examInfo?.negativePoint && "دارد"}
{!data?.negattiveMode && "ندارد"} {!examInfo?.negativePoint && "ندارد"}
</div> </div>
</div> </div>
<div className="eeb-qt-box"> <div className="eeb-qt-box">
<img className="eeb-qt-box-icon" src={icon5} alt="name-icon" /> <img className="eeb-qt-box-icon" src={icon5} alt="name-icon" />
<div className="eeb-qt-box-label">نوع سوالات:</div> <div className="eeb-qt-box-label">نوع سوالات:</div>
<div className="eeb-qt-box-type">{data?.types}</div> <div className="eeb-qt-box-type">تستی</div>
</div> </div>
</div> </div>
<div className="eeb-max-user-and-exam-type-box"> <div className="eeb-max-user-and-exam-type-box">
<div className="eeb-mu-box"> {/* <div className="eeb-mu-box">
<img className="eeb-mu-box-icon" src={icon6} alt="name-icon" /> <img className="eeb-mu-box-icon" src={icon6} alt="name-icon" />
<div className="eeb-mu-box-label">حدنصاب شرکت کنندگان: </div> <div className="eeb-mu-box-label">حدنصاب شرکت کنندگان: </div>
<div className="eeb-mu-box-number">{data?.capacity} نفر</div> <div className="eeb-mu-box-number">{data?.capacity} نفر</div>
</div> </div> */}
<div className="eeb-et-box"> <div className="eeb-et-box">
<img className="eeb-et-box-icon" src={icon7} alt="name-icon" /> <img className="eeb-et-box-icon" src={icon7} alt="name-icon" />
<div className="eeb-et-box-label">نوع شرکت در آزمون:</div> <div className="eeb-et-box-label">نوع شرکت در آزمون:</div>
<div className="eeb-et-box-type"> <div className="eeb-et-box-type">
{data?.type===1 && "انفرادی"} {data?.type === 1 && "انفرادی"}
{data?.type===2 && "گروهی"} {data?.type === 2 && "گروهی"}
</div> </div>
</div> </div>
</div> </div>
<div className="eeb-guide-box"> {/* <div className="eeb-guide-box">
<img className="eeb-guide-box-icon" src={icon8} alt="name-icon" /> <img className="eeb-guide-box-icon" src={icon8} alt="name-icon" />
<div className="eeb-guide-box-label">فایل راهنما:</div> <div className="eeb-guide-box-label">فایل راهنما:</div>
<div className="eeb-guide-box-have"> <div className="eeb-guide-box-have">
{data?.guideFileId && "دارد"} {data?.guideFileId && "دارد"}
{!data?.guideFileId && "ندارد"} -</div> {!data?.guideFileId && "ندارد"} -
<Link </div>
to={data?.guideFileId || "#"} <Link to={data?.guideFileId || "#"} className="eeb-guide-box-link">
className="eeb-guide-box-link"
>
دریافت فایل دریافت فایل
</Link> </Link>
</div> </div> */}
<div className="eeb-created-box"> {/* <div className="eeb-created-box">
<div className="eeb-created-box-img-container"> <div className="eeb-created-box-img-container">
<img <img
className="eeb-created-box-icon" className="eeb-created-box-icon"
@ -170,14 +204,14 @@ const EnterExam = ({ ID }) => {
</div> </div>
<div className="eeb-created-box-label">ایجاد شده توسط</div> <div className="eeb-created-box-label">ایجاد شده توسط</div>
<div className="eeb-created-box-file">موسسه فرهنگی مصباح نور</div> <div className="eeb-created-box-file">موسسه فرهنگی مصباح نور</div>
</div> </div> */}
{(new Date(data.date)<today) &&<Link <Link
to={`/dashboard/azmoon_list/exam/${data?.id}`} to={`/dashboard/azmoon_list/exam/${data?.id}`}
className="eeb-btn" className="eeb-btn"
> >
شروع آزمون شروع آزمون
</Link>} </Link>
{(new Date(data.date)>today) && {/* {(new Date(data.date)>today) &&
<div className="eeb-timer"> <div className="eeb-timer">
<div>{timer.d} روز و </div> <div>{timer.d} روز و </div>
<div>{timer.h} ساعت و </div> <div>{timer.h} ساعت و </div>
@ -185,10 +219,18 @@ const EnterExam = ({ ID }) => {
<div>{timer.s} ثانیه </div> <div>{timer.s} ثانیه </div>
<div>تا شروع آزمون</div> <div>تا شروع آزمون</div>
</div> </div>
} } */}
</div> </div>
</div> </div>
); );
}; };
export default EnterExam; const mapStateToProps = (state) => ({
examInfo: state.exam2.info,
});
const mapDispatchToProps = {
getExamInfo: exam.info,
};
export default connect(mapStateToProps, mapDispatchToProps)(EnterExam);

@ -0,0 +1,42 @@
import closeBtn from "../../assets/img/Group 1862.svg";
import React from 'react'
const Budget = ({ setShowBudget, setBudgetFileId, budgetFileId }) => {
const closeHandler=()=>{
setShowBudget(false);
setBudgetFileId(false);
}
return (
<div
className="w-[93.5vw] h-[93.5vh] fixed top-[6.5%] left-0 flex justify-center backdrop-blur bg-[#9999991A] overflow-y-auto z-[100]"
style={window.innerWidth < 1000 ? { width: "100%" } : null}
>
<img
src={closeBtn}
alt="closeBtn"
className="w-10 cursor-pointer absolute top-10 left-6"
onClick={closeHandler}
style={window.innerWidth < 1000 ? { top: "10px", left: "10px" } : null}
/>
<div className="w-[70%] mt-16">
{budgetFileId && (
<img
src={`https://new.andishmand.ir/api/v1/file/${budgetFileId}`}
alt=""
className="w-full"
/>
)}
{!budgetFileId && (
<div className="w-full text-xl text-cneter">
دیتایی برای نمایش وجود ندارد
</div>
)}
</div>
</div>
);
};
export default Budget

@ -24,6 +24,7 @@ import Games from "../dashboard2/Games";
import "./index.css"; import "./index.css";
import separate from "../../utils/separate"; import separate from "../../utils/separate";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import Budget from "./Budget";
const Services = ({ const Services = ({
isMobile, isMobile,
@ -163,9 +164,7 @@ const Services = ({
const [gameId, setGameId] = useState(5); const [gameId, setGameId] = useState(5);
const chooseGame = (id) => { const chooseGame = (id) => {
setGameId(id); setGameId(id);
console.log(selectedProductTypes);
}; };
console.log(gameId);
//productClickHandler------------------ //productClickHandler------------------
const productClickhandler = (product) => { const productClickhandler = (product) => {
@ -186,7 +185,6 @@ const Services = ({
if (gameId !== 5) { if (gameId !== 5) {
setPopUp(true); setPopUp(true);
} }
console.log(gameId);
}; };
//AddToCartHandler-------------------- //AddToCartHandler--------------------
@ -209,11 +207,13 @@ const Services = ({
//------------------------------------- //-------------------------------------
const [showPaymentBox, setShowPaymentBox] = useState(false); const [showPaymentBox, setShowPaymentBox] = useState(false);
const [showBudget,setShowBudget] = useState(false);
const [budgetFileId,setBudgetFileId] =useState(null);
//-======================== Desktop =========================================== //-======================== Desktop ===========================================
if (!isMobile) { if (!isMobile) {
return ( return (
<div <div
className="flex items-start justify-between" className="flex items-start justify-between relative"
style={{ width: "93.5%", direction: "rtl", height: "100vh" }} style={{ width: "93.5%", direction: "rtl", height: "100vh" }}
> >
{popup ? ( {popup ? (
@ -226,8 +226,17 @@ const Services = ({
price: popUpContent.price + val, price: popUpContent.price + val,
}) })
} }
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
/> />
) : null} ) : null}
{showBudget && (
<Budget
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
budgetFileId={budgetFileId}
/>
)}
<div <div
className="w-[76.5%] h-[100vh] flex flex-col justify-center pt-[3.5%]" className="w-[76.5%] h-[100vh] flex flex-col justify-center pt-[3.5%]"
// style={{ paddingTop:'5.5%', height: '100vh' }} // style={{ paddingTop:'5.5%', height: '100vh' }}
@ -322,6 +331,8 @@ const Services = ({
> >
{(selectedProductTypes.includes(4) || {(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7) || selectedProductTypes.includes(7) ||
selectedProductTypes.includes(3) ||
selectedProductTypes.includes(2) ||
selectedProductTypes.includes(1)) && ( selectedProductTypes.includes(1)) && (
<Product <Product
key={index} key={index}
@ -338,6 +349,8 @@ const Services = ({
teacher={product.vodTeacher} teacher={product.vodTeacher}
catId={gameId} catId={gameId}
userInfo={userInfo} userInfo={userInfo}
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
onClick={() => { onClick={() => {
productClickhandler(product); productClickhandler(product);
}} }}
@ -352,6 +365,8 @@ const Services = ({
))} ))}
{!selectedProductTypes.includes(4) && {!selectedProductTypes.includes(4) &&
!selectedProductTypes.includes(7) && !selectedProductTypes.includes(7) &&
!selectedProductTypes.includes(2) &&
!selectedProductTypes.includes(3) &&
!selectedProductTypes.includes(1) && !selectedProductTypes.includes(1) &&
gameId !== 6 && ( gameId !== 6 && (
<div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">
@ -419,6 +434,27 @@ const Services = ({
else { else {
return ( return (
<div className="flex flex-col items-center mt-16 mb-40 rtl"> <div className="flex flex-col items-center mt-16 mb-40 rtl">
{popup ? (
<ServicePopUp
content={popUpContent}
closeOnClick={() => setPopUp(false)}
sendPrice={(val) =>
setPopUpContent({
...popUpContent,
price: popUpContent.price + val,
})
}
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
/>
) : null}
{showBudget && (
<Budget
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
budgetFileId={budgetFileId}
/>
)}
<Games <Games
selectedGames={selectedGames} selectedGames={selectedGames}
gameId={gameId} gameId={gameId}
@ -485,6 +521,8 @@ const Services = ({
<div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}> <div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}>
{(selectedProductTypes.includes(4) || {(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7) || selectedProductTypes.includes(7) ||
selectedProductTypes.includes(3) ||
selectedProductTypes.includes(2) ||
selectedProductTypes.includes(1)) && ( selectedProductTypes.includes(1)) && (
<Product <Product
key={index} key={index}
@ -507,12 +545,16 @@ const Services = ({
btnOnClick={() => { btnOnClick={() => {
AddToCartHandler(product); AddToCartHandler(product);
}} }}
setShowBudget={setShowBudget}
setBudgetFileId={setBudgetFileId}
/> />
)} )}
</div> </div>
))} ))}
{!selectedProductTypes.includes(4) && {!selectedProductTypes.includes(4) &&
!selectedProductTypes.includes(7) && !selectedProductTypes.includes(7) &&
!selectedProductTypes.includes(2) &&
!selectedProductTypes.includes(3) &&
!selectedProductTypes.includes(1) && !selectedProductTypes.includes(1) &&
gameId !== 6 && ( gameId !== 6 && (
<div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">

@ -1,3 +1,4 @@
import moment from "jalali-moment";
import React from "react"; import React from "react";
import Button from "../../../components/Button"; import Button from "../../../components/Button";
import Checkbox from "../../../components/Checkbox"; import Checkbox from "../../../components/Checkbox";
@ -7,17 +8,33 @@ const servicePopUp = ({
closeOnClick, closeOnClick,
addToCartFunction, addToCartFunction,
sendPrice, sendPrice,
setShowBudget,
setBudgetFileId,
}) => { }) => {
console.log(")))))((((((((((");
console.log(content);
const budgetHandler = (fileId) => {
setBudgetFileId(fileId);
setShowBudget(true);
};
return ( return (
<div <div
className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur" className="flex justify-center w-full items-center fixed text-right z-30 backdrop-blur"
style={{ style={{
background: "rgba(0,0,0,0.1)", background: "rgba(0,0,0,0.1)",
height: "calc(100vh - 6.5vh)", height: "calc(100vh - 6.5vh)",
top: "8.5vh", top: "8vh",
}} }}
> >
<div className="bg-white flex flex-col w-1/2 rounded-2xl py-6 px-10"> <div
className="bg-white flex flex-col w-1/2 rounded-2xl py-6 px-10"
style={
window.innerWidth < 1000
? { width: "95%", marginInline: "auto", paddingInline: "10px" }
: null
}
>
<div className="w-full"> <div className="w-full">
<div <div
className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52 mb-2" className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52 mb-2"
@ -128,7 +145,7 @@ const servicePopUp = ({
{content.classHour} دقیقه {content.classHour} دقیقه
</div> </div>
)} )}
{(content?.product?.productType ===1) && ( {content?.product?.productType === 1 && (
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
{/* {content?.product.?} */} {/* {content?.product.?} */}
رحلی کوچک رحلی کوچک
@ -141,22 +158,33 @@ const servicePopUp = ({
{content.id === 2 && ( {content.id === 2 && (
<div className="flex w-11/12 flex-col rounded-xl border border-red82OP"> <div className="flex w-11/12 flex-col rounded-xl border border-red82OP">
<h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl pr-10 text-blueE3 text-xl font-bold"> <h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl pr-10 text-blueE3 text-xl font-bold">
آزمون {content.title} {content.title}
</h1> </h1>
<div <div
className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" className="flex w-full border-b border-red82OP text-red26 text-sm font-bold"
style={{ direction: "rtl" }} style={{ direction: "rtl" }}
> >
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
نوع آزمون : آنلاین نوع آزمون :{" "}
{content?.product?.exam?.productType === 2
? "حضوری"
: "مجازی"}
</div> </div>
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
تاریخ شروع : 1400/12/03 تاریخ شروع :{" "}
{moment(content?.product?.exam?.startDate, "YYYY/MM/DD")
.locale("fa")
.format("YYYY/MM/DD")}
</div> </div>
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP"> <div className="w-1/4 flex justify-center py-4 border-l border-red82OP">
تعداد آزمون : ۱۸ تعداد آزمون : ۱۸
</div> </div>
<div className="w-1/4 flex items-center justify-center py-4 "> <div
className="w-1/4 flex items-center justify-center py-4 cursor-pointer"
onClick={() =>
budgetHandler(content?.product?.exam?.budgetFileId)
}
>
{" "} {" "}
بودجه بندی آزمون{" "} بودجه بندی آزمون{" "}
</div> </div>
@ -169,7 +197,7 @@ const servicePopUp = ({
به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر
اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید
</div> </div>
{content.examCont?.map((item, index) => ( {content?.product?.exam?.childs?.map((item, index) => (
<div <div
className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 " className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 "
style={{ direction: "rtl" }} style={{ direction: "rtl" }}
@ -177,19 +205,32 @@ const servicePopUp = ({
<div className="flex items-center font-bold"> <div className="flex items-center font-bold">
<Checkbox <Checkbox
name={`examPackage_${item.id}_${index}`} name={`examPackage_${item.id}_${index}`}
onclick={(e) => defaultChecked={true}
e.target.checked // onclick={(e) =>
? sendPrice(item.price) // e.target.checked
: sendPrice(-item.price) // ? sendPrice(item.price)
} // : sendPrice(-item.price)
// }
/> />
<p>{item.title}</p> <p>{item?.name}</p>
</div> </div>
<p>تاریخ : {item.date}</p> <p>
<p>ساعت : {item.time}</p> تاریخ :{" "}
<p>بودجه بندی !</p> {moment(item?.startDate, "YYYY/MM/DD")
<p>تعداد سوالات: {item.numberOfQ}</p> .locale("fa")
<p>{separate(item.price)} تومان</p> .format("YYYY/MM/DD")}
</p>
{/* <p>ساعت : {item.time}</p> */}
<p
className="cursor-pointer"
onClick={() =>
budgetHandler(item?.budgetFileId)
}
>
بودجه بندی !
</p>
<p>تعداد سوالات: {item?.questionCount}</p>
<p>{separate(item?.price)} تومان</p>
</div> </div>
))} ))}
</div> </div>

Loading…
Cancel
Save