|
|
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);
|
|
|
|