You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

500 lines
17 KiB

import "./index.css";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { GoPrimitiveDot } from "react-icons/go";
import calendar_icon from "../../../assets/img/stickynote.svg";
import { BsClock } from "react-icons/bs";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import moment from "jalali-moment";
import { state } from "./state";
import ScrollContainer from "react-indiana-drag-scroll";
import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions";
const MyExamList = ({isMobile}) => {
//create suitable data list with main data----------------------------------------------------
let d = new Date();
console.log("today:"+d);
let d_day = d.getDay();
console.log("today_day:"+d_day);
let LastDayWeekDate=d;
switch (d_day) {
case 1:
LastDayWeekDate.setDate(d.getDate() + 4);
break;
case 2:
LastDayWeekDate.setDate(d.getDate() + 3);
break;
case 3:
LastDayWeekDate.setDate(d.getDate() + 2);
break;
case 4:
LastDayWeekDate.setDate(d.getDate() + 1);
break;
case 6:
LastDayWeekDate.setDate(d.getDate() + 6);
break;
case 7:
LastDayWeekDate.setDate(d.getDate() + 5);
break;
default:
LastDayWeekDate=d
break;
}
let my_exam_list_data2 = [
{
id: 1,
tab_name: "همه",
isActive: true,
tab_content: []
},
{
id: 2,
tab_name: "آزمونهای جاری",
isActive: false,
tab_content: []
},
{
id: 3,
tab_name: "آزمونهای آینده",
isActive: false,
tab_content: []
},
{
id: 4,
tab_name: "آزمونهای در حال برگزاری",
isActive: false,
tab_content: []
},
]
for(let b=0;b<state.length;b++){
if(b<8){
let date = new Date(state[b].date);
let TabType = 1;
console.log(date);
let endDate = new Date(state[b].endDate);
if(date<LastDayWeekDate){
TabType = 1;
my_exam_list_data2[1].tab_content.push({...state[b],tabType:1,sub_id:2});
}
else if(date>LastDayWeekDate){
TabType = 2;
my_exam_list_data2[2].tab_content.push({...state[b],tabType:2,sub_id:3});
}
let D = new Date();
if(D>date && D<endDate){
TabType = 3;
my_exam_list_data2[3].tab_content.push({...state[b],tabType:3,sub_id:4});
}
my_exam_list_data2[0].tab_content.push({...state[b],sub_id:1,tabType:TabType});
}
}
console.log(my_exam_list_data2);
const [data, set_data] = useState(my_exam_list_data2);
//------------------------------------------------------
//cover style list ------------------------------------
let coverStyleList=[
{
background:"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%)",
},
{
background:"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%)",
},
{
background:"linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%)",
},
]
let underCoverStyleList=[
{
background:"#000",
opacity:0.5
},
{
background:"#000",
opacity:0.5
},
{
background:"#000",
opacity:0.5
},
]
//-----------------------------------------------------------
const [old_tab_id, set_old_tab_id] = useState(1);
useEffect(() => {
// console.log("render---------------");
if(!isMobile){
document.querySelector(".melc-content-item").style.right = `0px`;
}
});
const change_tab = (id) => {
let new_data = data.map((item) => {
if (item.id === old_tab_id) {
item.isActive = false;
}
if (item.id === id) {
item.isActive = true;
}
return { ...item };
});
// console.log(new_data);
set_data(new_data);
set_old_tab_id(id);
// console.log(old_tab_id);
};
let i = 0;
let max_i;
for (let j = 0; j < data.length; j++) {
// console.log(data[j].isActive);
if (data[j].isActive) {
max_i = (data[j].tab_content.length - 3) * -1;
// console.log(max_i);
}
}
// const state = useSelector((state) => state.default);
if (state.openNav === "open") {
max_i--;
if (window.innerWidth < 1360) {
let tab_name_item = document.querySelectorAll(".melc-h-tab-name-item");
for (let p = 0; p < tab_name_item.length; p++) {
tab_name_item[p].style.fontSize = "15px";
}
}
if (window.innerWidth < 1305) {
let tab_name_item = document.querySelectorAll(".melc-h-tab-name-item");
for (let p = 0; p < tab_name_item.length; p++) {
tab_name_item[p].style.fontSize = "13px";
}
}
if (window.innerWidth < 1212) {
let tab_name_item = document.querySelectorAll(".melc-h-tab-name-item");
for (let p = 0; p < tab_name_item.length; p++) {
tab_name_item[p].style.fontSize = "11px";
}
}
}
if (window.innerWidth < 1536) {
max_i--;
}
if (window.innerWidth < 1170) {
max_i--;
}
const move_left = () => {
if (i > max_i) {
i--;
let movment = i * 245;
document.querySelector(".melc-content-item").style.right = `${movment}px`;
console.log(document.querySelector(".melc-content-item").style.right)
if(document.querySelector(".melc-content-item").style.right !== 0){
// setRightBtnColor('#df1452')
document.querySelector('.forward-btn').style.color = '#df1452'
}else{
document.querySelector('.forward-btn').style.color = '#ececec'
}
if(i == max_i){
document.querySelector('.back-btn').style.color = '#ececec'
}else{
document.querySelector('.back-btn').style.color = '#df1452'
}
}
};
const move_right = () => {
if (i < 0) {
i++;
let movment = i * 245;
document.querySelector(".melc-content-item").style.right = `${movment}px`;
console.log(document.querySelector(".melc-content-item").style.right)
if(document.querySelector(".melc-content-item").style.right !== '0px'){
// setRightBtnColor('#df1452')
document.querySelector('.forward-btn').style.color = '#df1452'
}else{
document.querySelector('.forward-btn').style.color = '#ececec'
}
if(i == max_i){
document.querySelector('.back-btn').style.color = '#ececec'
}else{
document.querySelector('.back-btn').style.color = '#df1452'
}
}
};
let s = 0;
const item_active_hover = (id, sub_id) => {
// console.log(id,sub_id);
// s = 0;
let ss = 0;
for (let k = 0; k < data.length; k++) {
s = 0;
for (let v = 0; v < data[k].tab_content.length; v++) {
// console.log(data[k].tab_content[v])
s++;
if (
data[k].tab_content[v].id === id &&
data[k].tab_content[v].sub_id === sub_id
) {
ss = 1;
break;
}
}
if (ss) {
break;
}
}
// console.log(s);
document.querySelectorAll(".melc-c-i-i-under-cover")[
s - 1
].style.transform = "scaleY(1)";
document
.querySelectorAll(".melc-c-i-i-info-descriptin")
[s - 1].classList.add("descript_is_active");
// document.querySelectorAll(".melc-c-i-i-info-descriptin")[s-1].style.transform="scaleY(1)";
// console.log(e.target.previousElementSibling);
//این روش پایدار نیست
// if(e.target.previousElementSibling !=null){
// e.target.previousElementSibling.style.transform="scaleY(1)";
// }
};
const item_deactive_hover = (id, sub_id) => {
if (s > 0) {
document.querySelectorAll(".melc-c-i-i-under-cover")[
s - 1
].style.transform = "scaleY(0)";
document
.querySelectorAll(".melc-c-i-i-info-descriptin")
[s - 1].classList.remove("descript_is_active");
}
// if(e.target.previousElementSibling !=null){
// e.target.previousElementSibling.style.transform="scaleY(0)";
// }
};
moment.locale("en");
return (
!isMobile ?
<div className="my-exam-list">
<div className="my-exam-list-content rounded-lg">
<h1 className='text-right w-full font-bold text-red52 pt-4 px-3'>لیست آزمون های من</h1>
<div className="melc-header">
{data.map((item, i) => (
<div
style={item.isActive ? { color: "#df1452" } : null}
key={item.id || i}
className="melc-h-tab-name-item"
onClick={() => change_tab(item.id)}
>
{item.tab_name}
{item.isActive && (
<div className="melc-h-tab-name-item-line"></div>
)}
</div>
))}
<div className="melc-h-move-btns">
<span className="back-btn"><IoIosArrowBack onClick={move_left}/></span>
<span className="forward-btn"> <IoIosArrowForward onClick={move_right}/></span>
</div>
</div>
<ScrollContainer className="melc-content">
{data.map((item) => (
<div key={item.id}>
{item.isActive && (
<div className="melc-content-item">
{item.isActive &&
item.tab_content.map((item) => (
<Link to={`/azmoon_list/enter_exam/${item.id}`}
key={item.id}
className="melc-content-i-item"
onMouseEnter={() =>
item_active_hover(item.id, item.sub_id)
}
onMouseLeave={() =>
item_deactive_hover(item.id, item.sub_id)
}
>
<img
className="melc-c-i-i-bg"
src={item.img}
alt="azmoon-img"
/>
{item.exam_started && (
<div className="melc-c-i-i-exam-sit">
<GoPrimitiveDot className="melc-c-i-i-exam-sit-icon" />
<div className="melc-c-i-i-exam-sit-text">
در حال برگزاری
</div>
</div>
)}
<div
style={underCoverStyleList[item.tabType-1]}
className="melc-c-i-i-under-cover"
></div>
<div
style={coverStyleList[item.tabType-1]}
className="melc-c-i-i-cover"
></div>
<div className="melc-c-i-item-info">
<div className="melc-c-i-i-info-title">
<img src={calendar_icon} alt="calendar-icon" />
{item.name}
</div>
<div className="melc-c-i-i-info-line"></div>
<div className="melc-c-i-i-info-date-time">
<div className="melc-ciiidt-date-container">
<BsClock className="melc-clock-icon" />
<div className="melc-ciiidt-date">
{moment(item.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')}
</div>
</div>
<div className="melc-ciiidt-time">
ساعت {item.time}
</div>
</div>
<div className="melc-c-i-i-info-descriptin">
{item.descripton}
</div>
</div>
</Link>
))}
<Link
to="/dashboard/azmoon_list"
className="melc-content-item-more"
>
مشاهده بیشتر
</Link>
</div>
)}
</div>
))}
</ScrollContainer>
</div>
</div> :
<div className="mt-4 w-full flex flex-col">
<div className=" rounded-lg">
<div className="w-full flex justify-between items-center">
<h1 className='text-right font-bold text-xl text-red52 '>لیست آزمون های من</h1>
<Link
to="/dashboard/azmoon_list"
className=" font-bold text-red52 text-sm"
>
مشاهده بیشتر
</Link>
</div>
<ScrollContainer className=" flex w-full overflow-scroll overflow-y-hidden p-4 pr-0">
{data.map((item, i) => (
<div
style={item.isActive ? { color: "white", background: '#df1452', minWidth: '125px' } : {minWidth: '125px', color: '#df1452'}}
key={item.id || i}
className="w-72 flex items-center h-12 bg-gray-100 mx-2 rounded-lg justify-center font-bold text-sm"
onClick={() => change_tab(item.id)}
>
{item.tab_name}
{item.isActive && (
<div className=""></div>
)}
</div>
))}
</ ScrollContainer >
<ScrollContainer className="melc-content">
{data.map((item, index) => (
<div key={item.id} className={index == 0 && '-mr-10'}>
{item.isActive && (
<div className={`melc-content-item ${index == 0 && '-mr-10'}`}>
{item.isActive &&
item.tab_content.map((item) => (
<Link to={`/azmoon_list/enter_exam/${item.id}`}
key={item.id}
className="melc-content-i-item"
onMouseEnter={() =>
item_active_hover(item.id, item.sub_id)
}
onMouseLeave={() =>
item_deactive_hover(item.id, item.sub_id)
}
>
<img
className="melc-c-i-i-bg"
src={item.img}
alt="azmoon-img"
/>
{item.exam_started && (
<div className="melc-c-i-i-exam-sit">
<GoPrimitiveDot className="melc-c-i-i-exam-sit-icon" />
<div className="melc-c-i-i-exam-sit-text">
در حال برگزاری
</div>
</div>
)}
<div
style={underCoverStyleList[item.tabType-1]}
className="melc-c-i-i-under-cover"
></div>
<div
style={coverStyleList[item.tabType-1]}
className="melc-c-i-i-cover"
></div>
<div className="melc-c-i-item-info">
<div className="melc-c-i-i-info-title">
<img src={calendar_icon} alt="calendar-icon" />
{item.name}
</div>
<div className="melc-c-i-i-info-line"></div>
<div className="melc-c-i-i-info-date-time">
<div className="melc-ciiidt-date-container">
<BsClock className="melc-clock-icon" />
<div className="melc-ciiidt-date">
{moment(item.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')}
</div>
</div>
<div className="melc-ciiidt-time">
ساعت {item.time}
</div>
</div>
<div className="melc-c-i-i-info-descriptin">
{item.descripton}
</div>
</div>
</Link>
))}
</div>
)}
</div>
))}
</ScrollContainer>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
books: state.book.list,
grades: state.publicApi.grades,
gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(MyExamList);