diff --git a/src/components/dateBox/BigCalendar.js b/src/components/dateBox/BigCalendar.js new file mode 100644 index 0000000..223c0ce --- /dev/null +++ b/src/components/dateBox/BigCalendar.js @@ -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 ( +
+
+
+
+ + +
+
+ {monthList[MONTH - 1]}،{YEAR} +
+
+
+
آزمون
+
+
+
+
+
شنبه
+
یکشنبه
+
دوشنبه
+
سه‌شنبه
+
چهارشنبه
+
پنج‌شنبه
+
جمعه
+
+
+ {dayList.map((item) => ( +
+
+ {item.day} +
+
+ ))} +
+
+ ); +}; + +export default BigCalendar; diff --git a/src/components/dateBox/BigCalendar2.js b/src/components/dateBox/BigCalendar2.js new file mode 100644 index 0000000..323af44 --- /dev/null +++ b/src/components/dateBox/BigCalendar2.js @@ -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 { + 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 ( +
+
+
+
+ + +
+
+ {monthList[MONTH - 1]}،{YEAR} +
+
+
+
تقویم آزمون‌ها
+
+
+
+
شنبه
+
یکشنبه
+
دوشنبه
+
سه‌شنبه
+
چهارشنبه
+
پنج‌شنبه
+
جمعه
+
+
+ {dayList.map((item, index) => ( +
CselectDay(item.day, index, item.exam)} + > +
+ {item.day} +
+ {item.exam.length > 0 && ( +
+ {item.exam.map(item=>( +
+ ))} +
+ )} +
+ ))} +
+
+ ); +}; + +export default BigCalendar2; \ No newline at end of file diff --git a/src/components/dateBox/Calendar.js b/src/components/dateBox/Calendar.js new file mode 100644 index 0000000..de73a29 --- /dev/null +++ b/src/components/dateBox/Calendar.js @@ -0,0 +1,16 @@ +import "../style/calendar/Calendar.scss"; +// import BigCalendar from './BigCalendar'; +import BigCalendar2 from "./BigCalendar2"; +import Events from "./Events"; + +const Calendar = () => { + return ( +
+ + {/* */} + +
+ ); +}; + +export default Calendar; diff --git a/src/components/dateBox/DateBox.css b/src/components/dateBox/DateBox.css new file mode 100644 index 0000000..18f0032 --- /dev/null +++ b/src/components/dateBox/DateBox.css @@ -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; + } +} \ No newline at end of file diff --git a/src/components/dateBox/Events.js b/src/components/dateBox/Events.js new file mode 100644 index 0000000..b971df5 --- /dev/null +++ b/src/components/dateBox/Events.js @@ -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 ( +
+
+
+ {state.CalendarSelectedDay.year}/{state.CalendarSelectedDay.month}/ + {state.CalendarSelectedDay.day} +
+
رویدادها
+
+
+ {state.CalendarEventList.map((item) => ( +
+
{item.name}
+
{item.time}
+
+ ))} +
+
+ ); +}; + +export default Events; + diff --git a/src/components/dateBox/index.js b/src/components/dateBox/index.js new file mode 100644 index 0000000..d803e4e --- /dev/null +++ b/src/components/dateBox/index.js @@ -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 ( +
+
+
+
{month}
، +
{year}
+
+
+ + ساعت{time} +
+
+
+ {week_list.map((item) => ( +
show_exam(item.id)} + > +
+ {item.weekday} +
+
+ {item.date < 1 ? "#" : item.date} +
+ {item.have_exam && } +
+ ))} +
+
+

رویداد ها:

+ {week_list.map((item) => ( +
+ + {item.have_exam && + item.exam.map((item) => ( +
+ + {item.exam_name} +
+ ))} +
+ ))} +
+
+ ); +}; + +export default DateBox; diff --git a/src/components/exam/Carousel/index.css b/src/components/exam/Carousel/index.css index 04ae80c..b77eab1 100644 --- a/src/components/exam/Carousel/index.css +++ b/src/components/exam/Carousel/index.css @@ -74,6 +74,7 @@ width: 100%; height: 281px; position: relative; + padding: 0; } .melc-content-dark-cover{ @@ -280,6 +281,9 @@ .melc-h-tab-name-item{ font-size: 15px; } + .melc-content-i-item{ + border-radius: 25px; + } } @media screen and (max-width: 1110px){ diff --git a/src/components/exam/Carousel/index.js b/src/components/exam/Carousel/index.js index 5a68b40..8229fec 100644 --- a/src/components/exam/Carousel/index.js +++ b/src/components/exam/Carousel/index.js @@ -9,9 +9,11 @@ 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 = () => { +const MyExamList = ({isMobile}) => { //create suitable data list with main data---------------------------------------------------- let d = new Date(); @@ -51,7 +53,7 @@ const MyExamList = () => { }, { id: 2, - tab_name: "آزمون‌های این هفته", + tab_name: "آزمون‌های جاری", isActive: false, tab_content: [] }, @@ -124,7 +126,9 @@ const MyExamList = () => { useEffect(() => { // console.log("render---------------"); + if(!isMobile){ document.querySelector(".melc-content-item").style.right = `0px`; + } }); const change_tab = (id) => { @@ -252,10 +256,11 @@ const MyExamList = () => { moment.locale("en"); return ( + !isMobile ?
-

لیست آزمون های من

+

لیست آزمون های من

{data.map((item, i) => (
{ ))}
+
: + +
+ +
+
+

لیست آزمون های من

+ + مشاهده بیشتر + +
+ + + {data.map((item, i) => ( +
change_tab(item.id)} + > + {item.tab_name} + {item.isActive && ( +
+ )} +
+ ))} + + + + {data.map((item) => ( +
+ {item.isActive && ( +
+ {item.isActive && + item.tab_content.map((item) => ( + + item_active_hover(item.id, item.sub_id) + } + onMouseLeave={() => + item_deactive_hover(item.id, item.sub_id) + } + > + azmoon-img + {item.exam_started && ( +
+ +
+ در حال برگزاری +
+
+ )} +
+
+
+
+ calendar-icon + {item.name} +
+
+
+
+ +
+ {moment(item.date, 'YYYY/MM/DD').format('jYYYY/jM/jD')} +
+
+
+ ساعت {item.time} +
+
+
+ {item.descripton} +
+
+ + ))} + +
+ )} +
+ ))} +
+
+ ); }; -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); diff --git a/src/components/exam/resault/index.css b/src/components/exam/resault/index.css index 576724e..df6e745 100644 --- a/src/components/exam/resault/index.css +++ b/src/components/exam/resault/index.css @@ -199,4 +199,14 @@ .ertdi-item *{ font-size: 11px; } + } + @media screen and (max-width: 1024px){ + .exam-result{ + border: 0px; + height: auto; + } + .exam-result-title{ + width: 100%; + + } } \ No newline at end of file diff --git a/src/components/exam/resault/index.js b/src/components/exam/resault/index.js index dc74f50..31ac4f2 100644 --- a/src/components/exam/resault/index.js +++ b/src/components/exam/resault/index.js @@ -1,5 +1,6 @@ import "./index.css"; import { VscChevronLeft } from "react-icons/vsc"; +import {connect} from 'react-redux'; let ert_data = [ { @@ -81,10 +82,19 @@ let ert_data = [ }, ]; -const ExamResults = () => { +const ExamResults = ({ + isMobile +}) => { return (
-
نتایج آزمون‌ها
+
+

نتایج آزمون‌ها

+ { +

+ مشاهده بیشتر +

+ } +
موضوع آزمون
@@ -150,14 +160,20 @@ const ExamResults = () => { ))}
-
+ { + !isMobile &&
مشاهده لیست نتایج
-
+ } +
); }; -export default ExamResults; +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile +}); + +export default connect(mapStateToProps)(ExamResults); diff --git a/src/components/header/Header.js b/src/components/header/Header.js index cd41116..c5da452 100644 --- a/src/components/header/Header.js +++ b/src/components/header/Header.js @@ -6,6 +6,7 @@ import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; import logoIcon from '../../assets/img/logo.png'; import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; @@ -33,7 +34,7 @@ const Header = ({
- +
diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index 624591e..39d0253 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -89,7 +89,7 @@ const Nav = ({ }; if (isMobile) { return ( -
+
{ mobileOptions.map( diff --git a/src/view/dashboard/Dashboard.js b/src/view/dashboard/Dashboard.js index eb74944..e08bbfe 100644 --- a/src/view/dashboard/Dashboard.js +++ b/src/view/dashboard/Dashboard.js @@ -9,6 +9,9 @@ import People from "./People"; import Register from "./Register"; import Urgent from "./Urgent"; import SimpleCalendar from '../../components/Calendar' +import MobileHome from "./mobile"; +import { connect } from "react-redux"; +import { publicApi } from "../../redux/actions"; const Dashboard = ({ @@ -16,6 +19,7 @@ const Dashboard = ({ UserFullInfoData, showUserFullInfo, hideUserFullInfo, + isMobile }) => { //-register------------------------- const [register, setRegister] = useState(false); @@ -32,6 +36,7 @@ const Dashboard = ({ setSelectId(null); }; return ( + !isMobile ?
{/* {register && }
+ : + ); }; +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; \ No newline at end of file +const mapDispatchToProps = { + + setHeaderOptions: publicApi.setHeaderOptions, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(Dashboard); \ No newline at end of file diff --git a/src/view/dashboard/mobile/index.js b/src/view/dashboard/mobile/index.js new file mode 100644 index 0000000..a0fc652 --- /dev/null +++ b/src/view/dashboard/mobile/index.js @@ -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( +
+

سلام 👋

+

سبحان قاسمی

+ +
+ +
+ + +
+ ); +}; + +export default MobileHome; \ No newline at end of file