pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Mobile Home Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 3ca11567e1
commit 681ae1bb7e
14 changed files with 1493 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 210
      src/components/dateBox/BigCalendar.js
  2. 350
      src/components/dateBox/BigCalendar2.js
  3. 16
      src/components/dateBox/Calendar.js
  4. 171
      src/components/dateBox/DateBox.css
  5. 44
      src/components/dateBox/Events.js
  6. 499
      src/components/dateBox/index.js
  7. 4
      src/components/exam/Carousel/index.css
  8. 127
      src/components/exam/Carousel/index.js
  9. 10
      src/components/exam/resault/index.css
  10. 24
      src/components/exam/resault/index.js
  11. 3
      src/components/header/Header.js
  12. 2
      src/components/nav/Nav.js
  13. 22
      src/view/dashboard/Dashboard.js
  14. 21
      src/view/dashboard/mobile/index.js

210
src/components/dateBox/BigCalendar.js
Unescape View File

@ -0,0 +1,210 @@
import "../style/calendar/BigCalendar.scss";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { useState } from "react";
import moment from "jalali-moment";
const BigCalendar = () => {
//settig---------------------------------------
moment.locale("fa");
let m = moment();
let month = +m.format("M");
let day = m.jDay();
let date = m.format("DD");
let year = m.jYear();
let monthList = [
"فروردین",
"اردیبهشت",
"خرداد",
"تیر",
"مرداد",
"شهریور",
"مهر",
"آبان",
"آذر",
"دی",
"بهمن",
"اسفند",
];
const [MONTH, setMONTH] = useState(month);
const [YEAR, setYEAR] = useState(year);
let remainder = date % 7;
// console.log(remainder);
let day_1 = day - (remainder - 1);
let main_day_1;
if (day_1 > -1) {
main_day_1 = day_1;
} else {
main_day_1 = day_1 + 7;
}
// console.log(main_day_1);
let main_list = [];
let inner_list = [];
let day_counter = 0;
let A = main_day_1 - 1;
let monthCounter = month;
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 42; j++) {
if (monthCounter > 6 && monthCounter < 12) {
if (j >= main_day_1 && day_counter < 30) {
day_counter++;
inner_list.push({
id: j + 1,
day: day_counter,
isAtive: false,
});
A++;
if (A === 7) {
A = 0;
}
} else {
inner_list.push({
id: j + 1,
day_counter: "",
isAtive: false,
});
}
} else if (monthCounter > 0 && monthCounter < 7) {
if (j >= main_day_1 && day_counter < 31) {
day_counter++;
inner_list.push({
id: j + 1,
day: day_counter,
isAtive: false,
});
A++;
if (A === 7) {
A = 0;
}
} else {
inner_list.push({
id: j + 1,
day_counter: "",
isAtive: false,
});
}
} else if (monthCounter === 12) {
if (j >= main_day_1 && day_counter < 29) {
day_counter++;
inner_list.push({
id: j + 1,
day: day_counter,
isAtive: false,
});
A++;
if (A === 7) {
A = 0;
}
} else {
inner_list.push({
id: j + 1,
day_counter: "",
isAtive: false,
});
}
}
}
if (monthCounter === 12) {
monthCounter = 1;
} else {
monthCounter++;
}
main_list.push(inner_list);
inner_list = [];
day_counter = 0;
if (A + 1 === 7) {
main_day_1 = 0;
} else {
main_day_1 = A + 1;
}
}
// console.log(main_list);
const [g, setG] = useState(0);
const [dayList, setDayList] = useState(main_list[0]);
const nextMonth = () => {
if (g < 7) {
setG(g + 1);
setDayList(main_list[g + 1]);
if (MONTH !== 12) {
setMONTH(MONTH + 1);
} else {
setMONTH(1);
setYEAR(YEAR + 1);
}
}
};
const previousMonth = () => {
if (g > 0) {
setG(g - 1);
setDayList(main_list[g - 1]);
if (MONTH !== 1) {
setMONTH(MONTH - 1);
} else {
setMONTH(12);
setYEAR(YEAR - 1);
}
}
};
//active current day-------------------------------
for (let i = 0; i < main_list[0].length; i++) {
if (main_list[0][i].day === date) {
main_list[0][i].isAtive = true;
}
}
return (
<div className="BigCalendar">
<div className="BigCalendar-title-box">
<div className="BigCalendar-title-box-year-month">
<div className="BigCalendar-title-box-year-month-arrow">
<IoIosArrowBack
className={"BigCalendar-title-box-year-month-arrow-icon"}
onClick={nextMonth}
/>
<IoIosArrowForward
className={"BigCalendar-title-box-year-month-arrow-icon"}
onClick={previousMonth}
/>
</div>
<div className="BigCalendar-title-box-year-month-text">
{monthList[MONTH - 1]}،{YEAR}
</div>
</div>
<div className="BigCalendar-title-box-guide">
<div className="BigCalendar-title-box-guide-text">آزمون</div>
<div className="BigCalendar-title-box-guide-line"></div>
</div>
</div>
<div className="BigCalendar-weekday-row">
<div className="BigCalendar-weekday-row-item">شنبه</div>
<div className="BigCalendar-weekday-row-item">یکشنبه</div>
<div className="BigCalendar-weekday-row-item">دوشنبه</div>
<div className="BigCalendar-weekday-row-item">سه‌شنبه</div>
<div className="BigCalendar-weekday-row-item">چهارشنبه</div>
<div className="BigCalendar-weekday-row-item">پنج‌شنبه</div>
<div className="BigCalendar-weekday-row-item">جمعه</div>
</div>
<div className="BigCalendar-body">
{dayList.map((item) => (
<div key={item.id} className="BigCalendar-body-item">
<div
style={
item.isAtive ? { background: "#132F52", color: "white" } : null
}
className="BigCalendar-body-item-date"
>
{item.day}
</div>
</div>
))}
</div>
</div>
);
};
export default BigCalendar;

350
src/components/dateBox/BigCalendar2.js
Unescape View File

@ -0,0 +1,350 @@
import "../style/calendar/BigCalendar.scss";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { useEffect, useState } from "react";
import moment from "jalali-moment";
import { useDispatch } from "react-redux";
import { bindActionCreators } from "redux";
import { actionCreators } from "../../redux";
// moment(item.updatedAt).format("YYYY/M/D")
let _m = moment();
moment.locale("fa");
let _month = Number(_m.format("M"));
let _year = _m.jYear();
let isCurrentMonh = 1;
const BigCalendar2 = () => {
console.log("_month is:" + _month);
//settig---------------------------------------
moment.locale("fa");
let m = moment();
let month = Number(m.format("M"));
let year = m.jYear();
// let day_1 = moment(`${year}/${month}/1`, 'jYYYY/jM/jD').jDay();
// console.log("روز اول ماه:"+day_1);
let day_last = moment(`${year}/${month}/30`, "jYYYY/jM/jD").jDay();
console.log(day_last);
// let day = m.jDay();
let date = m.format("DD");
//---------------------------------------------------
const [examDateList] = useState([
{
id: 1,
name: "فلسفه غرب",
date: "2021-10-11T12:00:00.180Z",
},
{
id: 2,
name: "هنر معاصر",
date: "2021-10-11T18:00:00.180Z",
},
{
id: 3,
name: "تئوری تصمیم‌گیری",
date: "2021-10-13T11:00:00.180Z",
},
{
id: 4,
name: "تفکر انتقادی",
date: "2021-10-09T08:00:00.180Z",
},
]);
moment.locale("en");
// eslint-disable-next-line react-hooks/exhaustive-deps
let classifierExamDateList = [];
for (let r = 0; r < 31; r++) {
let z = [];
for (let l = 0; l < examDateList.length; l++) {
console.log()
if (Number(moment(examDateList[l].date).format("jD")) === r + 1) {
let dd = new Date(examDateList[l].date);
z.push({
id: r + l,
name: examDateList[l].name,
time: `${dd.getHours()}:${dd.getMinutes()}`,
});
}
}
classifierExamDateList.push(z);
}
console.log(classifierExamDateList);
//--------------------------------------------------------
const CreateCalendar = (Year, Month) => {
moment.locale("fa");
let day_1 = moment(`${Year}/${Month}/1`, "jYYYY/jM/jD").jDay();
let day_counter = 0;
let main_list = [];
for (let i = 0; i < 42; i++) {
if (i < day_1) {
main_list.push({
id: i + 1,
day: "",
isActive: false,
exam: [],
});
} else {
if (Month > 0 && Month < 7) {
if (day_counter < 31) {
day_counter++;
if (Number(isCurrentMonh) === 1 && day_counter === Number(date)) {
main_list.push({
id: i + 1,
day: day_counter,
isActive: true,
exam: classifierExamDateList[day_counter - 1],
});
} else {
main_list.push({
id: i + 1,
day: day_counter,
isActive: false,
exam: classifierExamDateList[day_counter - 1],
});
}
} else {
main_list.push({
id: i + 1,
day: "",
isActive: false,
exam: [],
});
}
} else if (Month > 6 && Month < 12) {
if (day_counter < 30) {
day_counter++;
if (isCurrentMonh === 1 && day_counter === Number(date)) {
main_list.push({
id: i + 1,
day: day_counter,
isActive: true,
exam: classifierExamDateList[day_counter - 1],
});
} else {
main_list.push({
id: i + 1,
day: day_counter,
isActive: false,
exam: classifierExamDateList[day_counter - 1],
});
}
} else {
main_list.push({
id: i + 1,
day: "",
isActive: false,
exam: [],
});
}
} else if (Month === 12) {
if (Number.isNaN(moment(`${Year}/12/30`, "jYYYY/jM/jD").jDay())) {
if (day_counter < 29) {
day_counter++;
if (isCurrentMonh === 1 && day_counter === Number(date)) {
main_list.push({
id: i + 1,
day: day_counter,
isActive: true,
exam: classifierExamDateList[day_counter - 1],
});
} else {
main_list.push({
id: i + 1,
day: day_counter,
isActive: false,
exam: classifierExamDateList[day_counter - 1],
});
}
} else {
main_list.push({
id: i + 1,
day: "",
isActive: false,
exam: [],
});
}
} else {
if (day_counter < 30) {
day_counter++;
if (isCurrentMonh === 1 && day_counter === Number(date)) {
main_list.push({
id: i + 1,
day: day_counter,
isActive: true,
exam: classifierExamDateList[day_counter - 1],
});
} else {
main_list.push({
id: i + 1,
day: day_counter,
isActive: false,
exam: classifierExamDateList[day_counter - 1],
});
}
} else {
main_list.push({
id: i + 1,
day: "",
isActive: false,
exam: [],
});
}
}
}
}
}
return main_list;
};
let monthList = [
"فروردین",
"اردیبهشت",
"خرداد",
"تیر",
"مرداد",
"شهریور",
"مهر",
"آبان",
"آذر",
"دی",
"بهمن",
"اسفند",
];
// let C = CreateCalendar(year,month);
// for(let i=0;i<C.length;i++){
// if(C[i].day===date){
// C[i].isActive=true;
// }
// }
// console.log(C);
// const [g] = useState(0);
const [dayList, setDayList] = useState(CreateCalendar(year, month));
const [MONTH, setMONTH] = useState(month);
const [YEAR, setYEAR] = useState(year);
const nextMonth = () => {
isCurrentMonh++;
if (MONTH !== 12) {
setMONTH(MONTH + 1);
_month++;
} else {
setMONTH(1);
setYEAR(YEAR + 1);
_month = 1;
_year++;
}
setDayList(CreateCalendar(_year, _month));
let dayBox = document.querySelectorAll(".BigCalendar-body-item");
for (let u = 0; u < dayBox.length; u++) {
// dayBox[u].style.borderColor="#E0E0E0";
dayBox[u].style.backgroundColor = "#FFF";
}
};
const previousMonth = () => {
isCurrentMonh--;
if (MONTH !== 1) {
setMONTH(MONTH - 1);
_month--;
} else {
setMONTH(12);
setYEAR(YEAR - 1);
_month = 12;
_year--;
}
setDayList(CreateCalendar(_year, _month));
let dayBox = document.querySelectorAll(".BigCalendar-body-item");
for (let u = 0; u < dayBox.length; u++) {
// dayBox[u].style.borderColor="#E0E0E0";
dayBox[u].style.backgroundColor = "#FFF";
}
};
const dispatch = useDispatch();
const { selectDay, showEvent } = bindActionCreators(actionCreators, dispatch);
useEffect(() => {
showEvent(classifierExamDateList[date - 1]);
}, []);
//-----selectDay---------------------------------
const CselectDay = (day, index, exam) => {
if (day) {
console.log("---" + day, MONTH, YEAR);
console.log(exam);
selectDay(YEAR, MONTH, day);
let dayBox = document.querySelectorAll(".BigCalendar-body-item");
for (let u = 0; u < dayBox.length; u++) {
// dayBox[u].style.borderColor="#E0E0E0";
dayBox[u].style.backgroundColor = "#FFF";
}
// dayBox[index].style.borderColor="#132F52";
dayBox[index].style.backgroundColor = "#E0E0E0";
showEvent(exam);
}
};
return (
<div className="BigCalendar">
<div className="BigCalendar-title-box">
<div className="BigCalendar-title-box-year-month">
<div className="BigCalendar-title-box-year-month-arrow">
<IoIosArrowBack
className={"BigCalendar-title-box-year-month-arrow-icon"}
onClick={nextMonth}
/>
<IoIosArrowForward
className={"BigCalendar-title-box-year-month-arrow-icon"}
onClick={previousMonth}
/>
</div>
<div className="BigCalendar-title-box-year-month-text">
{monthList[MONTH - 1]}،{YEAR}
</div>
</div>
<div className="BigCalendar-title-box-guide">
<div className="BigCalendar-title-box-guide-text">تقویم آزمون‌ها</div>
</div>
</div>
<div className="BigCalendar-weekday-row">
<div className="BigCalendar-weekday-row-item">شنبه</div>
<div className="BigCalendar-weekday-row-item">یکشنبه</div>
<div className="BigCalendar-weekday-row-item">دوشنبه</div>
<div className="BigCalendar-weekday-row-item">سه‌شنبه</div>
<div className="BigCalendar-weekday-row-item">چهارشنبه</div>
<div className="BigCalendar-weekday-row-item">پنج‌شنبه</div>
<div className="BigCalendar-weekday-row-item">جمعه</div>
</div>
<div className="BigCalendar-body">
{dayList.map((item, index) => (
<div
key={item.id}
className="BigCalendar-body-item"
onClick={() => CselectDay(item.day, index, item.exam)}
>
<div
style={
item.isActive ? { background: "#132F52", color: "white" } : null
}
className="BigCalendar-body-item-date"
>
{item.day}
</div>
{item.exam.length > 0 && (
<div className="BigCalendar-body-item-line-container">
{item.exam.map(item=>(
<div className="BigCalendar-body-item-line-container-item"></div>
))}
</div>
)}
</div>
))}
</div>
</div>
);
};
export default BigCalendar2;

16
src/components/dateBox/Calendar.js
Unescape View File

@ -0,0 +1,16 @@
import "../style/calendar/Calendar.scss";
// import BigCalendar from './BigCalendar';
import BigCalendar2 from "./BigCalendar2";
import Events from "./Events";
const Calendar = () => {
return (
<div className="Calendar">
<Events />
{/* <BigCalendar/> */}
<BigCalendar2 />
</div>
);
};
export default Calendar;

171
src/components/dateBox/DateBox.css
Unescape View File

@ -0,0 +1,171 @@
/* @font-face {
font-family: IRANSansBold;
src: url(../../../assets/font/IRANSans/IRANSans_Bold.ttf);
} */
/* @font-face {
font-family: IRANSans;
src: url(../../../assets/font/IRANSans/IRANSans.ttf);
} */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.date-boxm{
width: 100%;
/* height: 106px; */
/* border-radius: 17px; */
/* box-shadow: 0 0 38px -15px #ADADAD; */
direction: rtl;
background-color: white;
padding: 15px 0px;
}
.date-box-p1m{
width: 100%;
display: inline-flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.date-box-p1-year-and-monthm{
display: flex;
align-items: center;
/* font-family: IRANSansBold; */
/* font-family: IRANSansX-Bold; */
font-size: 19px;
font-weight: bold;
color: #df1452;
}
.dbp1-monthm{
margin-left: 2px;
}
.dbp1-yearm{
margin-right: 2px;
/* font-family: IRANSansXFaNum-Bold; */
}
.date-box-p1-timem{
display: flex;
align-items: center;
/* font-family: IRANSans; */
/* font-family: IRANSansX-Regular; */
font-size: 12px;
border-radius: 10px;
padding: 1.5px 3px;
background-color: #eac8d5;
border-radius: 2px;
color: #df1452 !important;
}
.date-box-p2m{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 6px;
}
.date-box-p2-itemm{
text-align: center;
position: relative;
cursor: default;
}
.dbp2i-daynamem{
font-size: 11px;
font-weight: bold;
/* font-family: IRANSans; */
/* font-family: IRANSansX-Regular; */
color: #a2b4cb;
}
.dbp2i-datem{
font-size: 15px;
font-weight: bold;
margin-top: 10px;
padding: 2px 4px;
padding-bottom:0px ;
color: #4b0017;
/* font-family: IRANSansXFaNum-Regular; */
}
.date-box-p2-item:nth-child(7) .dbp2i-daynamem{
color: #FFC491 !important;
}
.date-box-p2-item:nth-child(7) .dbp2i-datem{
color: #F6923B !important;
}
.dbp2i-have-Examm{
color: #E3FC08;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
.date-box-p3m{
width: 90%;
margin: 0 auto;
margin-top: 18px;
/* font-family: IRANSansX-Regular; */
font-size: 13px;
}
.date-box-p3-itemm{
/* display: none; */
max-height: 0px;
transform: scaleY(0);
transform-origin: top;
transition: all 0.5s;
display: flex;
}
.date-box-p3-item-itemm{
display: flex;
align-items: center;
}
.date-box-p3-item-item-iconm{
font-size: 16px;
margin-left: 3px;
}
.date-box-p3-item-activem{
/* display: block; */
max-height: 200px;
transform: scaleY(1);
}
/* --------responsive-setting---------------------------------------------------------- */
@media screen and (max-width: 1270px){
.dbp2i-daynamem{
font-size: 10px;
}
}
@media screen and (max-width: 1160px){
.dbp2i-daynamem{
font-size: 9px;
}
}

44
src/components/dateBox/Events.js
Unescape View File

@ -0,0 +1,44 @@
import { useSelector } from "react-redux";
import "../style/calendar/Events.scss";
const Events = () => {
// const [eventList,setEventList] = useState([
// {
// id:1,
// title:"آزمون فلسفه زندگی",
// time:'11:00'
// },
// {
// id:2,
// title:"آزمون موسیقی شناسی",
// time:'18:00'
// },
// ])
const state = useSelector((state) => state.default);
console.log(state.CalendarSelectedDay);
// const [eventList,setEventList] = useState(state.CalendarEventList);
console.log(state.CalendarEventList);
return (
<div className="Events">
<div className="Events-title-box">
<div className="Events-title-box-date">
{state.CalendarSelectedDay.year}/{state.CalendarSelectedDay.month}/
{state.CalendarSelectedDay.day}
</div>
<div className="Events-title-box-text">رویدادها</div>
</div>
<div className="Events-body">
{state.CalendarEventList.map((item) => (
<div key={item.id} className="Events-body-item">
<div className="Events-body-item-name">{item.name}</div>
<div className="Events-body-item-time">{item.time}</div>
</div>
))}
</div>
</div>
);
};
export default Events;

499
src/components/dateBox/index.js
Unescape View File

@ -0,0 +1,499 @@
import "./DateBox.css";
import moment from "jalali-moment";
import { useEffect, useState } from "react";
import { VscCircleFilled } from "react-icons/vsc";
import { GoPrimitiveDot } from "react-icons/go";
// import { IoDocumentTextOutline } from "react-icons/io";
// import Exam from '../azmoon-list/Exam';
import { IoDocumentTextOutline } from "react-icons/io5";
var today = new Date();
// var time = today.getHours() + ":" + today.getMinutes();
let m = moment();
// -------get-date--------------------
let date = m.jDate();
//----------get-day-and month------------------
let day = m.jDay();
let monthNum = m.jMonth() + 1;
//create-week---------------------------
let date_list;
let active_list;
switch (day) {
case 0:
date_list = [
date,
date + 1,
date + 2,
date + 3,
date + 4,
date + 5,
date + 6,
];
active_list = [1, 0, 0, 0, 0, 0, 0];
break;
case 1:
date_list = [
date - 1,
date,
date + 1,
date + 2,
date + 3,
date + 4,
date + 5,
];
// if(date===1){
// if(monthNum<8){
// date_list = ["",date,date+1,date+2,date+3,date+4,date+5];
// }
// else{
// date_list = ['',date,date+1,date+2,date+3,date+4,date+5];
// }
// }
active_list = [0, 1, 0, 0, 0, 0, 0];
break;
case 2:
date_list = [
date - 2,
date - 1,
date,
date + 1,
date + 2,
date + 3,
date + 4,
];
// if(date===1){
// if(monthNum<8){
// date_list = ['','',date,date+1,date+2,date+3,date+4];
// }
// else{
// date_list = ['','',date,date+1,date+2,date+3,date+4];
// }
// }
// else if(date===2){
// if(monthNum<8){
// date_list = ['',1,date,date+1,date+2,date+3,date+4];
// }
// else{
// date_list = ['',1,date,date+1,date+2,date+3,date+4];
// }
// }
active_list = [0, 0, 1, 0, 0, 0, 0];
break;
case 3:
date_list = [
date - 3,
date - 2,
date - 1,
date,
date + 1,
date + 2,
date + 3,
];
// if(date===1){
// if(monthNum<8){
// date_list = ['','','',date,date+1,date+2,date+3];
// }
// else{
// date_list = ['','','',date,date+1,date+2,date+3];
// }
// }
// else if(date===2){
// if(monthNum<8){
// date_list = ['','',1,date,date+1,date+2,date+3];
// }
// else{
// date_list = ['','',1,date,date+1,date+2,date+3];
// }
// }
// else if(date===3){
// if(monthNum<8){
// date_list = [31,1,2,date,date+1,date+2,date+3];
// }
// else{
// date_list = [30,1,2,date,date+1,date+2,date+3];
// }
// }
active_list = [0, 0, 0, 1, 0, 0, 0];
break;
case 4:
date_list = [
date - 4,
date - 3,
date - 2,
date - 1,
date,
date + 1,
date + 2,
];
active_list = [0, 0, 0, 0, 1, 0, 0];
break;
case 5:
date_list = [
date - 5,
date - 4,
date - 3,
date - 2,
date - 1,
date,
date + 1,
];
// if(date===1){
// if(monthNum<8){
// date_list = [27,28,29,30,31,date,date+1];
// }
// else{
// date_list = [26,27,28,29,30,date,date+1];
// }
// }
// else if(date===2){
// if(monthNum<8){
// date_list = [28,29,30,31,1,date,date+1];
// }
// else{
// date_list = [27,28,29,30,1,date,date+1];
// }
// }
// else if(date===3){
// if(monthNum<8){
// date_list = [29,30,31,1,2,date,date+1];
// }
// else{
// date_list = [28,29,30,1,2,date,date+1];
// }
// }
// else if(date===4){
// if(monthNum<8){
// date_list = [30,31,1,2,3,date,date+1];
// }
// else{
// date_list = [29,30,1,2,3,date,date+1];
// }
// }
// else if(date===5){
// if(monthNum<8){
// date_list = [31,1,2,3,4,date,date+1];
// }
// else{
// date_list = [30,1,2,3,4,date,date+1];
// }
// }
active_list = [0, 0, 0, 0, 0, 1, 0];
break;
case 6:
date_list = [
date - 6,
date - 5,
date - 4,
date - 3,
date - 2,
date - 1,
date,
];
active_list = [0, 0, 0, 0, 0, 0, 1];
break;
case 7:
date_list = [
date - 7,
date - 6,
date - 5,
date - 4,
date - 3,
date - 2,
date -1,
date,
];
active_list = [0, 0, 0, 0, 0, 0, 1];
break;
default:
date_list = [1, 2, 3, 4, 5, 6, 7];
active_list = [1, 0, 0, 0, 0, 0, 0];
break;
}
let week_list = [
{
id: 1,
weekday: "شنبه",
date: date_list[0],
isActive: active_list[0],
have_exam: true,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
exam: [
{
id: 1,
sub_id: 3,
exam_name: "آزمون جبر و احتمال دهم",
},
{
id: 2,
sub_id: 3,
exam_name: "آزمون زبان انگلیسی دهم",
},
],
},
{
id: 2,
weekday: "یکشنبه",
date: date_list[1],
isActive: active_list[1],
have_exam: false,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
exam: "",
},
{
id: 3,
weekday: "دوشنبه",
date: date_list[2],
isActive: active_list[2],
have_exam: true,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
exam: [
{
id: 1,
sub_id: 3,
exam_name: "آزمون جبر و احتمال دهم",
},
{
id: 2,
sub_id: 3,
exam_name: "آزمون زبان انگلیسی دهم",
},
],
},
{
id: 4,
weekday: "سه‌شنبه",
date: date_list[3],
isActive: active_list[3],
have_exam: false,
style: {
color: "#013273",
border: "1px solid red",
borderRadius: "6px",
},
exam: "",
},
{
id: 5,
weekday: "چهارشنبه",
date: date_list[4],
isActive: active_list[4],
have_exam: false,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
exam: "",
},
{
id: 6,
weekday: "پنجشنبه",
date: date_list[5],
isActive: active_list[5],
have_exam: true,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
exam: [
{
id: 1,
sub_id: 6,
exam_name: "آزمون موسیقی سنتی",
},
],
},
{
id: 7,
weekday: "جمعه",
date: date_list[6],
isActive: active_list[6],
have_exam: false,
style: {
color: "#df1452",
border: "2px solid #df1452",
borderRadius: "6px",
background: 'rgba(223, 20, 82, 0.06)'
},
},
];
const DateBox = () => {
// ---get-year----------------
let year = m.jYear();
// ------get---month---------
// let monthNum = m.jMonth()+1;
let month;
switch (monthNum) {
case 1:
month = "فروردین";
break;
case 2:
month = "اردیبهشت";
break;
case 3:
month = "خرداد";
break;
case 4:
month = "تیر";
break;
case 5:
month = "مرداد";
break;
case 6:
month = "شهریور";
break;
case 7:
month = "مهر";
break;
case 8:
month = "آبان";
break;
case 9:
month = "آذر";
break;
case 10:
month = "دی";
break;
case 11:
month = "بهمن";
break;
case 12:
month = "اسفند";
break;
default:
month = "فروردین";
break;
}
// console.log("oooo"+m.jDay());
// const SetTime =()=>{
// setTimeout(()=>{
// set_time(today.getHours() + ":" + today.getMinutes());
// },1000);
// SetTime();
// // console.log("tic");
// }
const [time, set_time] = useState(
today.getHours() + ":" + today.getMinutes()
);
const [time_counter, set_time_counter] = useState(0);
useEffect(() => {
setTimeout(() => {
set_time_counter(time_counter + 1);
today = new Date();
set_time(today.getHours() + ":" + today.getMinutes());
// console.log("tic"+time_counter);
}, 60000);
// console.log(time);
}, [time_counter]);
// --------------show--hide--exam-------------
const show_exam = (id) => {
if (week_list[id - 1].have_exam) {
document
.querySelector(`.date-box-p3-item-${id}`)
.classList.add("date-box-p3-item-activem");
// document.querySelector(`.date-box-p3-item-${id}`).style.maxHeight="none";
}
};
const hide_exam = (id) => {
if (week_list[id - 1].have_exam) {
document
.querySelector(`.date-box-p3-item-${id}`)
.classList.remove("date-box-p3-item-active");
// document.querySelector(`.date-box-p3-item-${id}`).style.maxHeight="none";
}
};
// SetTime();
return (
<div className="date-boxm">
<div className="date-box-p1m">
<div className="date-box-p1-year-and-monthm">
<div className="dbp1-monthm">{month}</div>،
<div className="dbp1-yearm">{year}</div>
</div>
<div className="date-box-p1-timem">
<VscCircleFilled className="dbp1t-circle-icon" />
ساعت{time}
</div>
</div>
<div className="date-box-p2m">
{week_list.map((item) => (
<div
key={item.id}
className="date-box-p2-itemm"
onClick={() => show_exam(item.id)}
>
<div
style={item.isActive ? { color: "#013273" } : null}
className="dbp2i-daynamem"
>
{item.weekday}
</div>
<div
style={item.isActive ? item.style : null}
className="dbp2i-datem"
>
{item.date < 1 ? "#" : item.date}
</div>
{item.have_exam && <GoPrimitiveDot className="dbp2i-have-Exam" />}
</div>
))}
</div>
<div className="date-box-p3m">
<h3 className="text-right">رویداد ها: </h3>
{week_list.map((item) => (
<div
key={item.id}
className={`date-box-p3-item date-box-p3-item-${item.id}`}
>
{item.have_exam &&
item.exam.map((item) => (
<div key={item.id} className="date-box-p3-item-itemm">
{item.exam_name}
</div>
))}
</div>
))}
</div>
</div>
);
};
export default DateBox;

4
src/components/exam/Carousel/index.css
Unescape View File

@ -74,6 +74,7 @@
width: 100%; width: 100%;
height: 281px; height: 281px;
position: relative; position: relative;
padding: 0;
} }
.melc-content-dark-cover{ .melc-content-dark-cover{
@ -280,6 +281,9 @@
.melc-h-tab-name-item{ .melc-h-tab-name-item{
font-size: 15px; font-size: 15px;
} }
.melc-content-i-item{
border-radius: 25px;
}
} }
@media screen and (max-width: 1110px){ @media screen and (max-width: 1110px){

127
src/components/exam/Carousel/index.js
Unescape View File

@ -9,9 +9,11 @@ import { Link } from "react-router-dom";
import moment from "jalali-moment"; import moment from "jalali-moment";
import { state } from "./state"; import { state } from "./state";
import ScrollContainer from "react-indiana-drag-scroll"; import ScrollContainer from "react-indiana-drag-scroll";
import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions";
const MyExamList = () => { const MyExamList = ({isMobile}) => {
//create suitable data list with main data---------------------------------------------------- //create suitable data list with main data----------------------------------------------------
let d = new Date(); let d = new Date();
@ -51,7 +53,7 @@ const MyExamList = () => {
}, },
{ {
id: 2, id: 2,
tab_name: "آزمون‌های این هفته", tab_name: "آزمون‌های جاری",
isActive: false, isActive: false,
tab_content: [] tab_content: []
}, },
@ -124,7 +126,9 @@ const MyExamList = () => {
useEffect(() => { useEffect(() => {
// console.log("render---------------"); // console.log("render---------------");
if(!isMobile){
document.querySelector(".melc-content-item").style.right = `0px`; document.querySelector(".melc-content-item").style.right = `0px`;
}
}); });
const change_tab = (id) => { const change_tab = (id) => {
@ -252,10 +256,11 @@ const MyExamList = () => {
moment.locale("en"); moment.locale("en");
return ( return (
!isMobile ?
<div className="my-exam-list"> <div className="my-exam-list">
<div className="my-exam-list-content rounded-lg"> <div className="my-exam-list-content rounded-lg">
<h1 className="text-right w-full text-red52 pt-4 px-6">لیست آزمون های من</h1> <h1 className='text-right w-full text-red52 pt-4 px-6'>لیست آزمون های من</h1>
<div className="melc-header"> <div className="melc-header">
{data.map((item, i) => ( {data.map((item, i) => (
<div <div
@ -348,8 +353,122 @@ const MyExamList = () => {
))} ))}
</ScrollContainer> </ScrollContainer>
</div> </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-200 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) => (
<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>
))}
</div>
)}
</div>
))}
</ScrollContainer>
</div> </div>
</div>
); );
}; };
export default MyExamList; 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);

10
src/components/exam/resault/index.css
Unescape View File

@ -200,3 +200,13 @@
font-size: 11px; font-size: 11px;
} }
} }
@media screen and (max-width: 1024px){
.exam-result{
border: 0px;
height: auto;
}
.exam-result-title{
width: 100%;
}
}

24
src/components/exam/resault/index.js
Unescape View File

@ -1,5 +1,6 @@
import "./index.css"; import "./index.css";
import { VscChevronLeft } from "react-icons/vsc"; import { VscChevronLeft } from "react-icons/vsc";
import {connect} from 'react-redux';
let ert_data = [ let ert_data = [
{ {
@ -81,10 +82,19 @@ let ert_data = [
}, },
]; ];
const ExamResults = () => { const ExamResults = ({
isMobile
}) => {
return ( return (
<div className="exam-result bg-white rounded-lg"> <div className="exam-result bg-white rounded-lg">
<div className="w-full text-red52 text-right px-4 font-bold">نتایج آزمون‌ها</div> <div className={`w-full ${isMobile && 'text-xl flex justify-between items-center'} text-red52 text-right px-4 font-bold`}>
<p>نتایج آزمون‌ها</p>
{
<p className="text-sm">
مشاهده بیشتر
</p>
}
</div>
<div className="exam-result-table"> <div className="exam-result-table">
<div className="exam-result-table-titles"> <div className="exam-result-table-titles">
<div className="ertt-item">موضوع آزمون</div> <div className="ertt-item">موضوع آزمون</div>
@ -150,14 +160,20 @@ const ExamResults = () => {
))} ))}
</div> </div>
</div> </div>
<div className="exam-result-footer"> {
!isMobile && <div className="exam-result-footer">
<div className="erf-btn"> <div className="erf-btn">
<VscChevronLeft className="erf-btn-arrow-icon" /> <VscChevronLeft className="erf-btn-arrow-icon" />
مشاهده لیست نتایج مشاهده لیست نتایج
</div> </div>
</div> </div>
}
</div> </div>
); );
}; };
export default ExamResults; const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile
});
export default connect(mapStateToProps)(ExamResults);

3
src/components/header/Header.js
Unescape View File

@ -6,6 +6,7 @@ import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg";
import logoIcon from '../../assets/img/logo.png'; import logoIcon from '../../assets/img/logo.png';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
@ -33,7 +34,7 @@ const Header = ({
<path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 20H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
</svg> </svg>
</div> </div>
<img src={logoIcon} className="h-10"/> <Link to='/'> <img src={logoIcon} className="h-10"/> </Link>
<div> <div>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/> <path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>

2
src/components/nav/Nav.js
Unescape View File

@ -89,7 +89,7 @@ const Nav = ({
}; };
if (isMobile) { if (isMobile) {
return ( return (
<div className="w-full flex fixed bg-white justify-center py-4 bottom-0"> <div className="w-full flex fixed bg-white justify-center z-20 py-4 bottom-0">
<div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl"> <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
{ {
mobileOptions.map( mobileOptions.map(

22
src/view/dashboard/Dashboard.js
Unescape View File

@ -9,6 +9,9 @@ import People from "./People";
import Register from "./Register"; import Register from "./Register";
import Urgent from "./Urgent"; import Urgent from "./Urgent";
import SimpleCalendar from '../../components/Calendar' import SimpleCalendar from '../../components/Calendar'
import MobileHome from "./mobile";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
const Dashboard = ({ const Dashboard = ({
@ -16,6 +19,7 @@ const Dashboard = ({
UserFullInfoData, UserFullInfoData,
showUserFullInfo, showUserFullInfo,
hideUserFullInfo, hideUserFullInfo,
isMobile
}) => { }) => {
//-register------------------------- //-register-------------------------
const [register, setRegister] = useState(false); const [register, setRegister] = useState(false);
@ -32,6 +36,7 @@ const Dashboard = ({
setSelectId(null); setSelectId(null);
}; };
return ( return (
!isMobile ?
<div className="Dashboard w-screen h-[91.5%] overflow-x-hidden absolute top-[8.5%] z-0 left-0 bg-color5 flex"> <div className="Dashboard w-screen h-[91.5%] overflow-x-hidden absolute top-[8.5%] z-0 left-0 bg-color5 flex">
<div className="dashboard-left-part w-[25.4%] h-full flex flex-col items-center py-3 px-4"> <div className="dashboard-left-part w-[25.4%] h-full flex flex-col items-center py-3 px-4">
{/* <People {/* <People
@ -69,7 +74,22 @@ const Dashboard = ({
</div> </div>
{register && <Register closeRegister={closeRegister} />} {register && <Register closeRegister={closeRegister} />}
</div> </div>
:
<MobileHome />
); );
}; };
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,
});
export default Dashboard; const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

21
src/view/dashboard/mobile/index.js
Unescape View File

@ -0,0 +1,21 @@
import React from "react";
import DateBox from "../../../components/dateBox";
import MyExamList from "../../../components/exam/Carousel";
import ExamResults from "../../../components/exam/resault";
const MobileHome = () =>{
return(
<div className="w-full flex flex-col px-4 mt-20 rtl pb-40">
<h1 className="font-black text-3xl w-full text-right text-red52">سلام 👋</h1>
<h1 className="font-black text-2xl pt-1 w-full text-right text-red26 ">سبحان قاسمی</h1>
<div>
<DateBox />
</div>
<MyExamList />
<ExamResults />
</div>
);
};
export default MobileHome;
Write Preview
Loading…
Cancel
Save