|
|
import React, { useEffect } from 'react'; |
|
|
import { useLocation, useNavigate } from 'react-router-dom'; |
|
|
import './Header.scss'; |
|
|
import searchIcon from "../../assets/img/Group 1148.svg"; |
|
|
import moment from "jalali-moment"; |
|
|
import { useState } from 'react'; |
|
|
import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; |
|
|
import logoIcon from '../../assets/img/logo.png'; |
|
|
import MobileSideMenu from './MobileSideMenu'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Link } from 'react-router-dom'; |
|
|
import arrowIcon from './MobileSideMenu/arrow-down.svg' |
|
|
import exitIcon from '../../assets/img/group-9.svg' |
|
|
import backIcon from './arrow-left-1.svg'; |
|
|
import profileIcon from './MobileSideMenu/profile-active.svg' |
|
|
import { user } from '../../redux/actions'; |
|
|
import { grades } from '../../redux/reducers/public'; |
|
|
const Header = ({ |
|
|
isMobile, cart, |
|
|
logOut, |
|
|
setUserStatus, |
|
|
user |
|
|
}) => { |
|
|
let today = moment().locale("fa").format("YYYY/M/D"); |
|
|
let weekday = new Date().getDay(); |
|
|
let weekdayList = ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه", 'پنجشنبه', 'جمعه', "شنبه"]; |
|
|
const [menuPopup, setMenuPopup] = useState(false); |
|
|
const [subMenu, setSubMenu] = useState(false); |
|
|
const location = useLocation(); |
|
|
const navigate = useNavigate(); |
|
|
useEffect(() => { |
|
|
setUserStatus() |
|
|
}, []) |
|
|
|
|
|
let UserData =JSON.parse(localStorage.getItem("userData")); |
|
|
return ( |
|
|
<> |
|
|
<div |
|
|
className={`header w-full h-[6.5%] bg-white fixed top-0 left-0 flex items-center ${ |
|
|
!isMobile ? "shadow-md z-10" : "z-40" |
|
|
}`} |
|
|
> |
|
|
{subMenu && ( |
|
|
<div |
|
|
className={`w-1/6 p-4 flex flex-col text-right bg-white shadow-xl absolute top-[108.5%] rounded-lg left-5 transition duration-700 ease-in-out ${ |
|
|
subMenu && "subMenu" |
|
|
}`} |
|
|
> |
|
|
<div className="flex items-center rtl text-right w-full py-2"> |
|
|
<img |
|
|
src={ |
|
|
UserData.picFileId |
|
|
? `https://new.andishmand.ir/api/v1/file/${UserData.picFileId}` |
|
|
: profileIcon |
|
|
} |
|
|
/> |
|
|
{UserData?.displayName || "نامشخص"} ({" "} |
|
|
{UserData?.job || "دانش آموز"} ) |
|
|
</div> |
|
|
{/* <Link |
|
|
to="/adminpanel" |
|
|
onClick={() => setSubMenu(false)} |
|
|
className="w-full text-right border-b border-gray-200 py-2" |
|
|
> |
|
|
ورود به پنل ادمین |
|
|
</Link> */} |
|
|
{/* <Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'> |
|
|
ورود به صفحه افزودن آزمون |
|
|
</Link> */} |
|
|
|
|
|
<Link |
|
|
to="/register" |
|
|
onClick={() => setSubMenu(false)} |
|
|
className="w-full text-right border-b border-gray-200 py-2" |
|
|
> |
|
|
ویرایش حساب کاربری |
|
|
</Link> |
|
|
</div> |
|
|
)} |
|
|
{isMobile ? ( |
|
|
<div className="flex w-full items-center justify-between rtl px-4"> |
|
|
<div onClick={() => setMenuPopup(!menuPopup)}> |
|
|
<svg |
|
|
width="35" |
|
|
height="35" |
|
|
viewBox="0 0 24 24" |
|
|
fill="none" |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
> |
|
|
<path |
|
|
d="M3 5H21" |
|
|
stroke="#df1452" |
|
|
strokeWidth="1.5" |
|
|
strokeLinecap="round" |
|
|
/> |
|
|
<path |
|
|
d="M3 10H21" |
|
|
stroke="#df1452" |
|
|
strokeWidth="1.5" |
|
|
strokeLinecap="round" |
|
|
/> |
|
|
<path |
|
|
d="M3 15H21" |
|
|
stroke="#df1452" |
|
|
strokeWidth="1.5" |
|
|
strokeLinecap="round" |
|
|
/> |
|
|
<path |
|
|
d="M3 20H21" |
|
|
stroke="#df1452" |
|
|
strokeWidth="1.5" |
|
|
strokeLinecap="round" |
|
|
/> |
|
|
</svg> |
|
|
</div> |
|
|
<Link to="/myServices"> |
|
|
{" "} |
|
|
<img src={logoIcon} className="h-10" />{" "} |
|
|
</Link> |
|
|
{location.pathname.includes("messages") ? ( |
|
|
<div |
|
|
onClick={() => navigate(-1)} |
|
|
className="w-8 h-8 bg-red-100 rounded-md flex items-center justify-center" |
|
|
> |
|
|
<img src={backIcon} className="h-4/5" /> |
|
|
</div> |
|
|
) : ( |
|
|
<Link to="/shoppingCart"> |
|
|
<div className="flex flex-col"> |
|
|
<div className="absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white"> |
|
|
{cart?.length} |
|
|
</div> |
|
|
<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="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z" |
|
|
stroke="#df1452" |
|
|
strokeWidth="1.5" |
|
|
strokeMiterlimit="10" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
/> |
|
|
<path |
|
|
d="M15.4955 12H15.5045" |
|
|
stroke="#df1452" |
|
|
strokeWidth="2" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
/> |
|
|
<path |
|
|
d="M8.49451 12H8.50349" |
|
|
stroke="#df1452" |
|
|
strokeWidth="2" |
|
|
strokeLinecap="round" |
|
|
strokeLinejoin="round" |
|
|
/> |
|
|
</svg> |
|
|
</div> |
|
|
</Link> |
|
|
)} |
|
|
</div> |
|
|
) : ( |
|
|
<> |
|
|
{location.pathname.includes("adminpanel") ? ( |
|
|
<div></div> |
|
|
) : ( |
|
|
<> |
|
|
<div className="header-profile h-full flex items-center"> |
|
|
<img |
|
|
src={arrowIcon} |
|
|
className={`cursor-pointer ml-4 w-6 ${ |
|
|
subMenu && "transform rotate-180 duration-900 transition" |
|
|
}`} |
|
|
onClick={() => setSubMenu(!subMenu)} |
|
|
/> |
|
|
<div className="header-profile-img-container w-10 h-10 bg-white ml-2 rounded-full overflow-hidden"> |
|
|
<img |
|
|
src={ |
|
|
UserData.picFileId |
|
|
? `https://new.andishmand.ir/api/v1/file/${UserData.picFileId}` |
|
|
: profileIcon |
|
|
} |
|
|
alt="avatar1" |
|
|
className="w-full" |
|
|
/> |
|
|
</div> |
|
|
<div className="header-profile-text-container w-fit text-right ml-4"> |
|
|
<div className="header-profile-text-container-name text-sm"> |
|
|
{user.displayName |
|
|
? user.displayName |
|
|
: user?.firstName + " " + user?.lastName} |
|
|
</div> |
|
|
<div className="header-profile-text-container-role text-xs"> |
|
|
{grades[user.gradeIds]} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div> |
|
|
<div className="header-date-and-time text-right ml-6"> |
|
|
<Clock /> |
|
|
<div className="header-date-and-date text-sm"> |
|
|
<span className="header-date-and-date-text1 text-color3 ml-2"> |
|
|
{weekdayList[weekday]} |
|
|
</span> |
|
|
<span |
|
|
className="header-date-and-date-text2 text-color2 ml-2" |
|
|
style={{ fontFamily: "IRANSansXFaNum-Regular" }} |
|
|
> |
|
|
{today} |
|
|
</span> |
|
|
<span className="header-date-and-date-text3 text-color4 text-xs"> |
|
|
{/* روز ملی صنعت نفت */} |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div> |
|
|
</> |
|
|
)} |
|
|
</> |
|
|
)} |
|
|
|
|
|
{/* <div className="header-search w-[51.5%] h-full ml-6 flex items-center"> |
|
|
<img src={searchIcon} alt="searchIcon" className="header-search-icon" /> |
|
|
<input |
|
|
type="search" |
|
|
name="header-search-input" |
|
|
id="header-search-input" |
|
|
className="header-search-input h-2/3 w-[94%] ml-2 text-lg" |
|
|
/> |
|
|
</div> */} |
|
|
</div> |
|
|
{isMobile && menuPopup && ( |
|
|
<> |
|
|
<div className="h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed"></div> |
|
|
<div className="w-full flex"> |
|
|
<MobileSideMenu |
|
|
profilePic={avatar1} |
|
|
users={[ |
|
|
{ |
|
|
name: user?.displayName, |
|
|
title: grades[user.gradeIds], |
|
|
}, |
|
|
{ |
|
|
name: "کوروش زراندوز", |
|
|
title: "پادشاه کوروش توپیا", |
|
|
}, |
|
|
]} |
|
|
close={() => setMenuPopup(false)} |
|
|
/> |
|
|
<button |
|
|
className="flex items-center justify-center fixed z-40 top-10 left-3 text-xl font-bold text-red52 w-12 h-12 rounded-xl " |
|
|
onClick={() => setMenuPopup(false)} |
|
|
> |
|
|
<img src={exitIcon} className="w-full" /> |
|
|
</button> |
|
|
</div> |
|
|
</> |
|
|
)} |
|
|
</> |
|
|
); |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isMobile: state.publicApi.isMobile, |
|
|
cart: state.userProduct.list, |
|
|
user: state.user.status, |
|
|
}); |
|
|
const mapDispatchToProps = { |
|
|
setUserStatus: user.setUserStatus |
|
|
}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Header); |
|
|
|
|
|
|
|
|
|
|
|
const Clock = () => { |
|
|
let today = new Date(); |
|
|
let h = today.getHours(); |
|
|
let m = today.getMinutes(); |
|
|
let s = today.getSeconds(); |
|
|
// const [h,setH]=useState(today.getHours()); |
|
|
// const [m, setM] = useState(today.getMinutes()); |
|
|
// const [s, setS] = useState(today.getSeconds()); |
|
|
const [counter, setCounter] = useState(0); |
|
|
|
|
|
setTimeout(() => { |
|
|
setCounter(counter + 1); |
|
|
}, 1000); |
|
|
|
|
|
return ( |
|
|
<div |
|
|
className="header-date-and-time-time text-color2 text-sm" |
|
|
style={{ fontFamily: "IRANSansXFaNum-Regular" }} |
|
|
> |
|
|
<span className="header-date-and-time-number text-color3 ml-2">ساعت</span> |
|
|
{h < 10 ? "0" + h : h}:{m < 10 ? "0" + m : m}:{s < 10 ? "0" + s : s} |
|
|
</div> |
|
|
); |
|
|
} |