myServices(ResultExams,FutureExams)

main
alireza khaji 2 years ago
parent 8ee34b30c4
commit a92fadd4b3
  1. 145
      src/App.js
  2. BIN
      src/assets/img/bia-andrade-PO8Woh4YBD8-unsplash.jpg
  3. BIN
      src/assets/img/usgs-hoS3dzgpHzw-unsplash.jpg
  4. 7
      src/assets/img/vuesax-linear-clock.svg
  5. 5
      src/index.css
  6. 20
      src/view/my-services/Exams.js
  7. 135
      src/view/my-services/FutureExams.js
  8. 16
      src/view/my-services/MyServices.js
  9. 108
      src/view/my-services/ResultExams.js
  10. 21
      src/view/my-services/Title.js

@ -1,17 +1,22 @@
import logo from './logo.svg'; import logo from "./logo.svg";
import './App.css'; import "./App.css";
import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom"; import {
import Dashboard2 from './view/dashboard2/Dashboard2'; BrowserRouter as Router,
import Header from './components/header/Header'; Routes,
import Nav from './components/nav/Nav'; Route,
import Dashboard from './view/dashboard/Dashboard'; useNavigate,
import Accounting from './view/accounting/Accounting'; } from "react-router-dom";
import Messages from './view/messages/Messages'; import Dashboard2 from "./view/dashboard2/Dashboard2";
import Header from "./components/header/Header";
import Nav from "./components/nav/Nav";
import Dashboard from "./view/dashboard/Dashboard";
import Accounting from "./view/accounting/Accounting";
import Messages from "./view/messages/Messages";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
// import "react-modern-drawer/dist/index.css"; // import "react-modern-drawer/dist/index.css";
import Login from './view/login/Login'; import Login from "./view/login/Login";
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
// import {useParams} from 'react-router-dom'; // import {useParams} from 'react-router-dom';
import avatar1 from "./assets/img/avatar/080cd026ce8cd30f68acfa086ebde7fb.jpg"; import avatar1 from "./assets/img/avatar/080cd026ce8cd30f68acfa086ebde7fb.jpg";
@ -21,21 +26,22 @@ import avatar4 from "./assets/img/avatar/alexander-hipp-iEEBWgY_6lA-unsplash.jpg
import avatar5 from "./assets/img/avatar/julian-wan-WNoLnJo7tS8-unsplash.jpg"; import avatar5 from "./assets/img/avatar/julian-wan-WNoLnJo7tS8-unsplash.jpg";
import avatar6 from "./assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg"; import avatar6 from "./assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
import avatar7 from "./assets/img/avatar/pexels-yuri-manei-2690323.jpg"; import avatar7 from "./assets/img/avatar/pexels-yuri-manei-2690323.jpg";
import LoginSignUp from './view/LoginSignUp'; import LoginSignUp from "./view/LoginSignUp";
import Register from './view/register' import Register from "./view/register";
import Services from './view/services'; import Services from "./view/services";
import {Provider, provider} from 'react-redux'; import { Provider, provider } from "react-redux";
import store from './redux/store'; import store from "./redux/store";
import ContactUs from './view/contact'; import ContactUs from "./view/contact";
import ENTER_EXAM from './view/Exam/EnterExam/index' import ENTER_EXAM from "./view/Exam/EnterExam/index";
import EXAM from './view/Exam' import EXAM from "./view/Exam";
import CallBack from './view/CallBack'; import CallBack from "./view/CallBack";
import AdminPanel from './view/admin'; import AdminPanel from "./view/admin";
import AddProduct from './view/addProduct'; import AddProduct from "./view/addProduct";
import AddExam from './view/addExam'; import AddExam from "./view/addExam";
import ChatPage from './view/chatPage'; import ChatPage from "./view/chatPage";
import ShoppingCart from './components/ShoppingCart'; import ShoppingCart from "./components/ShoppingCart";
import MyServices from "./view/my-services/MyServices";
let data = [ let data = [
{ {
@ -619,7 +625,6 @@ let data = [
]; ];
function App() { function App() {
let location = window.location.pathname; let location = window.location.pathname;
// const {id} = useParams(); // const {id} = useParams();
console.log(location); console.log(location);
@ -634,21 +639,19 @@ function App() {
} }
} }
} }
let loginStorage = localStorage.getItem('userData'); let loginStorage = localStorage.getItem("userData");
let userData = JSON.parse(loginStorage); let userData = JSON.parse(loginStorage);
console.log(loginStorage == null); console.log(loginStorage == null);
console.log(userData) console.log(userData);
const [LOGIN, setLOGIN] = useState(loginStorage == undefined ? false : true); const [LOGIN, setLOGIN] = useState(loginStorage == undefined ? false : true);
const activeLogin = () => { const activeLogin = () => {
setLOGIN(true) setLOGIN(true);
localStorage.setItem('login', true) localStorage.setItem("login", true);
};
}
const logOut = () => { const logOut = () => {
setLOGIN(false) setLOGIN(false);
localStorage.setItem('login', false) localStorage.setItem("login", false);
}; };
if (location === "/") { if (location === "/") {
@ -679,26 +682,36 @@ function App() {
{LOGIN && <Header logOut={logOut} />} {LOGIN && <Header logOut={logOut} />}
{LOGIN && <Nav />} {LOGIN && <Nav />}
<Routes> <Routes>
<Route path='/' element={LOGIN ? ( <Route
window.innerWidth <= 1024 && <Dashboard path="/"
ActiveUserFullInfo={ActiveUserFullInfo} element={
UserFullInfoData={UserFullInfoData} LOGIN ? (
showUserFullInfo={showUserFullInfo} window.innerWidth <= 1024 && (
hideUserFullInfo={hideUserFullInfo}
/>)
: <LoginSignUp activeLogin={activeLogin}/>
} />
<Route path="/myServices" element={LOGIN ?
<Dashboard <Dashboard
ActiveUserFullInfo={ActiveUserFullInfo} ActiveUserFullInfo={ActiveUserFullInfo}
UserFullInfoData={UserFullInfoData} UserFullInfoData={UserFullInfoData}
showUserFullInfo={showUserFullInfo} showUserFullInfo={showUserFullInfo}
hideUserFullInfo={hideUserFullInfo} hideUserFullInfo={hideUserFullInfo}
/> />
: <LoginSignUp activeLogin={activeLogin}/>} /> )
) : (
<LoginSignUp activeLogin={activeLogin} />
)
}
/>
<Route
path="/myServices"
element={
LOGIN ? (
<MyServices />
) : (
<LoginSignUp activeLogin={activeLogin} />
)
}
/>
{ {LOGIN ? (
LOGIN ? <> <>
<Route <Route
path="/buy-packages/:id" path="/buy-packages/:id"
element={ element={
@ -711,15 +724,21 @@ function App() {
} }
/> />
<Route path="/adminpanel" element={<AdminPanel />} /> <Route path="/adminpanel" element={<AdminPanel />} />
<Route path="/adminpanel/add-product" element={<AddProduct />} /> <Route
path="/adminpanel/add-product"
element={<AddProduct />}
/>
<Route path="/adminpanel/add-exam" element={<AddExam />} /> <Route path="/adminpanel/add-exam" element={<AddExam />} />
<Route path="/register" element={<Register activeLogin={activeLogin}/>}/> <Route
path="/register"
element={<Register activeLogin={activeLogin} />}
/>
<Route path="/accounting" element={<Accounting />} /> <Route path="/accounting" element={<Accounting />} />
<Route path="/messages" element={<Messages />} /> <Route path="/messages" element={<Messages />} />
<Route path="/messages/:id" element={<ChatPage />} /> <Route path="/messages/:id" element={<ChatPage />} />
<Route path="/services" element={<Services />} /> <Route path="/services" element={<Services />} />
<Route path='shoppingCart' element={<ShoppingCart />} /> <Route path="shoppingCart" element={<ShoppingCart />} />
{/* <Route path="/dashboard" element={ <Dashboard {/* <Route path="/dashboard" element={ <Dashboard
ActiveUserFullInfo={ActiveUserFullInfo} ActiveUserFullInfo={ActiveUserFullInfo}
UserFullInfoData={UserFullInfoData} UserFullInfoData={UserFullInfoData}
@ -727,14 +746,26 @@ function App() {
hideUserFullInfo={hideUserFullInfo} hideUserFullInfo={hideUserFullInfo}
/>} /> */} />} /> */}
<Route path='/callBack' element={<CallBack />} /> <Route path="/callBack" element={<CallBack />} />
<Route path='/contacts' element={<ContactUs />} /> <Route path="/contacts" element={<ContactUs />} />
<Route exact path="/azmoon_list/enter_exam/:id" element={<ENTER_EXAM />}/> <Route
<Route exact path="/dashboard/azmoon_list/exam/:id" element={<EXAM />} /> exact
path="/azmoon_list/enter_exam/:id"
element={<ENTER_EXAM />}
/>
<Route
exact
path="/dashboard/azmoon_list/exam/:id"
element={<EXAM />}
/>
</> </>
: <Route path='*' element={<LoginSignUp activeLogin={activeLogin}/>} /> ) : (
} <Route
path="*"
element={<LoginSignUp activeLogin={activeLogin} />}
/>
)}
</Routes> </Routes>
</div> </div>
</Router> </Router>

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

@ -0,0 +1,7 @@
<svg id="vuesax_linear_clock" data-name="vuesax/linear/clock" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="clock">
<path id="Vector" d="M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10Z" transform="translate(2 2)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M4.08,7.67.98,5.82A2.215,2.215,0,0,1,0,4.1V0" transform="translate(11.63 7.51)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 669 B

@ -12,6 +12,11 @@
src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff); src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Regular.woff);
} }
@font-face {
font-family: IRANSansXFaNum-Medium;
src: url(./assets/font/IRANSansX/Farsi-numerals/Webfonts/Woff/IRANSansXFaNum-Medium.woff);
}
.BuyInfo-footer-text-box { .BuyInfo-footer-text-box {
@apply w-full flex items-center justify-between flex-row-reverse mb-4; @apply w-full flex items-center justify-between flex-row-reverse mb-4;
} }

@ -0,0 +1,20 @@
import FutureExams from "./FutureExams";
import ResultExams from "./ResultExams";
const Exams = () => {
return (
<div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]">
<FutureExams />
<ResultExams />
</div>
);
};
export default Exams;

@ -0,0 +1,135 @@
import img1 from "../../assets/img/bia-andrade-PO8Woh4YBD8-unsplash.jpg";
import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
import stickynote from "../../assets/img/stickynote.svg";
import clockIcon from "../../assets/img/vuesax-linear-clock.svg";
import Title from "./Title";
const FutureExams = () => {
let data = [
{
id: 1,
img: img1,
title: "آزمون فلسفه مدرن",
date: "1400/3/3",
time: "21:00",
description:
"متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
},
{
id: 2,
img: img2,
title: "آزمون فلسفه مدرن فراشناختی اجتماعی",
date: "1400/3/3",
time: "21:00",
description:
"متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
},
{
id: 3,
img: img1,
title: "آزمون فلسفه مدرن",
date: "1400/3/3",
time: "21:00",
description:
"متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
},
{
id: 4,
img: img2,
title: "آزمون فلسفه مدرن",
date: "1400/3/3",
time: "21:00",
description:
"متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
},
{
id: 5,
img: img1,
title: "آزمون فلسفه مدرن",
date: "1400/3/3",
time: "21:00",
description:
"متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست",
},
];
//hoverHandler--------------
const hoverHandler=(index)=>{
let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description");
frontBox[index].style.transform="translateY(0px)";
frontBox[index].style.background = "rgba(223,20,82,0.7)";
description[index].style.display="block";
// rgba(223,20,82,0.7)
}
const hoverHandle2 = (index) => {
let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description");
frontBox[index].style.transform = "translateY(60%)";
frontBox[index].style.background =
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
description[index].style.display = "none";
// rgba(223,20,82,0.7)
};
return (
<div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-4 pt-4 overflow-y-auto">
{/* ----title-------- */}
<Title titleText="آزمونهای پیشرو" />
{/* ----body-------- */}
<div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
{data?.map((item, index) => (
<div
key={index}
className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)}
>
{/* -----back-img------ */}
<img src={item.img} className="w-full" alt="back-img" />
{/* -----front-data------ */}
<div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
style={{
background:
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)",
}}
>
<div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white">
<img src={stickynote} alt="stickynote" className="h-5 ml-1" />
<div
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap"
style={{ direction: "rtl" }}
>
{item.title}
</div>
</div>
{/* ----------- */}
<div className="w-full flex flex-row-reverse items-center justify-between py-1">
<div className="flex flex-row-reverse items-center">
<img src={clockIcon} alt="clockIcon" className="ml-1 h-4" />
<div className="text-xs text-white text-right">
{item.date}
</div>
</div>
<div className="text-xs text-white text-right">
ساعت {item.time}
</div>
</div>
{/* ----------- */}
<div
className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden"
style={{ direction: "rtl" }}
>
{item.description}
</div>
</div>
</div>
))}
</div>
</div>
);
};
export default FutureExams;

@ -0,0 +1,16 @@
import Exams from "./Exams";
const MyServices=()=>{
return (
<div className="MyServices w-[93.5%] h-[100vh] pt-[4%] px-4 flex flex-col justify-between">
<div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
<Exams/>
</div>
<div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"></div>
</div>
);
}
export default MyServices;

@ -0,0 +1,108 @@
import Title from "./Title";
//colorList------------------
let colorList = [
{
bg: "rgba(228,126,48,0.1)",
line: "#E47E30",
},
{
bg: "rgba(230,212,51,0.1)",
line: "#E6D433",
},
{
bg: "rgba(31,96,18,0.1)",
line: "#1F6012",
},
{
bg: "rgba(35,227,175,0.1)",
line: "#23E3AF",
},
{
bg: "rgba(35,86,227,0.1)",
line: "#2356E3",
},
];
const ResultExams = () => {
let data = [
{
id: 1,
title: "آزمون شیمی عالی",
date: "1400/3/3",
status: 1,
},
{
id: 2,
title: "آزمون شیمی عالی",
date: "1400/3/3",
status: 2,
},
{
id: 3,
title: "آزمون شیمی عالی",
date: "1400/3/3",
status: 1,
},
{
id: 4,
title: "آزمون شیمی عالی",
date: "1400/3/3",
status: 2,
},
{
id: 5,
title: "آزمون شیمی عالی",
date: "1400/3/3",
status: 1,
},
];
return (
<div
className="ResultExams w-[45%] h-full px-4 pt-4 overflow-y-auto"
style={{ direction: "rtl" }}
>
{/* ----title-------- */}
<div style={{ direction: "ltr" }}>
<Title titleText="نتایج آزمونهای من" />
</div>
{/* ----body-------- */}
<div className="w-full mt-4">
{data?.map((item, index) => (
<div
key={index}
className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
style={{ backgroundColor: `${colorList[index % 5].bg}` }}
>
<div
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-[70%]">
<div
className="w-full text-sm text-right"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{item?.title}
</div>
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]">
{item?.date}
</div>
</div>
{/* --------- */}
<div
className="w-[15%] h-9 text-center border-r text-xs flex items-center"
style={{ borderColor: `${colorList[index % 5].line}` }}
>
{item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}
</div>
</div>
))}
</div>
</div>
);
};
export default ResultExams;

@ -0,0 +1,21 @@
import { IoIosArrowBack } from "react-icons/io";
const Title=({titleText})=>{
return (
<div className="w-full h-10 flex flex-row-reverse items-center justify-between">
<div
className="text-xl text-right text-[#DF1452]"
style={{ fontFamily: "IRANSansXFaNum-Medium" }}
>
{titleText}
</div>
<div className="flex items-center cursor-pointer">
<IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
<div className="text-[#504F4F]">مشاهده بیشتر</div>
</div>
</div>
);
}
export default Title;
Loading…
Cancel
Save