debug and change

main
alireza khaji 3 years ago
parent e42bc8616e
commit e219ced301
  1. 48
      src/components/Product/index.js
  2. 11
      src/components/input/index.js
  3. 2
      src/components/input/signUpInput.js
  4. 2
      src/view/Exam2/Exam.js
  5. 1
      src/view/Exam2/Header.js
  6. 29
      src/view/Exam2/Questions.js
  7. 41
      src/view/Exam2/index.css
  8. 7
      src/view/register/index.js
  9. 9
      src/view/services/index.js
  10. 48
      src/view/services/service/index.js

@ -6,7 +6,6 @@ import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import imgPlaceHolder from "../../assets/img/photo-placeholder.png"; import imgPlaceHolder from "../../assets/img/photo-placeholder.png";
let groupType = ["A", "B", "AB", "AB1"]; let groupType = ["A", "B", "AB", "AB1"];
const ProductDesign = ({ const ProductDesign = ({
colors, colors,
@ -86,8 +85,8 @@ const ProductDesign = ({
//completeProfule----------- //completeProfule-----------
const completeProfule = (id) => { const completeProfule = (id) => {
localStorage.setItem("termId",id) localStorage.setItem("termId", id);
} };
//--------------------------- //---------------------------
let weekday = [ let weekday = [
@ -433,22 +432,26 @@ const ProductDesign = ({
if (catId == 1) { if (catId == 1) {
return ( return (
<div <div
className={`flex flex-col cursor-pointer text-right rounded-xl justify-start w-full m-4 border border-red82OP ${ className={`flex flex-col text-right rounded-xl justify-start w-full m-4 border border-red82OP ${
isMobile && "w-11/12" isMobile && "w-11/12"
}`} }`}
style={{ width: !isMobile && "375px", direction: "rtl" }} style={{ width: !isMobile && "375px", direction: "rtl" }}
> >
<img <img
src="https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg" src={
product?.fileId
? `https://new.andishmand.ir/api/v1/file/${product?.fileId}`
: imgPlaceHolder
}
className="rounded-t-xl" className="rounded-t-xl"
onClick={onClick} // onClick={onClick}
/> />
<div <div
className={`border-b border-red82OP py-2 px-4 ${ className={`border-b border-red82OP py-2 px-4 ${
isMobile ? "bg-blueFF text-right" : "text-center " isMobile ? "bg-blueFF text-right" : "text-center "
}`} }`}
onClick={onClick} // onClick={onClick}
> >
<h1 <h1
className={`text-${ className={`text-${
@ -457,13 +460,10 @@ const ProductDesign = ({
> >
کتاب {productName} کتاب {productName}
</h1> </h1>
<p className="text-blue7E text-sm mb-2"> <p className="text-blue7E text-sm mb-2">{product?.description}</p>
در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط
در این قسمت قرار میگیرد
</p>
</div> </div>
<div className="flex justify-between px-4 items-center"> <div className="flex justify-between px-4 items-center py-2">
<h1 <h1
className={`font-black text-xl py-4 text-red52 ${ className={`font-black text-xl py-4 text-red52 ${
isMobile && "w-1/2 border-l border-red82OP text-center" isMobile && "w-1/2 border-l border-red82OP text-center"
@ -471,17 +471,37 @@ const ProductDesign = ({
> >
{productPrice} تومان {productPrice} تومان
</h1> </h1>
<div>
{rulesAccepted && (
<div <div
className={`bg-${ className={`bg-${
isMobile isMobile
? "blueFF border-blueDF rounded-lg py-3 hover:bg-blueDF" ? "blueFF border-blueDF rounded-lg py-3 hover:bg-blueDF"
: "pinkF5 border-red52 py-2 hover:bg-red52" : "pinkF5 border-red52 py-2 hover:bg-red52"
} rounded-md text-red26 w-32 border-2 px-1 text-xs flex justify-center hover:text-white } rounded-md text-red26 w-36 border-2 px-1 text-xs flex justify-center hover:text-white
`} `}
> >
<button onClick={btnOnClick}>افزودن به سبد خرید</button> <button onClick={btnOnClick}>افزودن به سبد خرید</button>
</div> </div>
)}
{!rulesAccepted && (
<Link
to="/register"
className="w-36 py-2 px-1 rounded-md text-white bg-[#F2F9FF] text-[#4C7FE3] flex items-center justify-center cursor-pointer text-xs text-center border-2 border-[#4C7FE3]"
onClick={() => {
completeProfule(product?.termId);
}}
>
تکمیل اطلاعات کاربری و رزرو پیش ثبت نام
</Link>
)}
<div
className="w-36 py-2 px-1 rounded-md text-white bg-[#DF1452] text-white flex items-center justify-center cursor-pointer text-xs text-center border-2 border-pinkF5 mt-2"
onClick={onClick}
>
اطلاعات بیشتر
</div>
</div>
</div> </div>
</div> </div>
); );

@ -1,7 +1,6 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import _onInput from "../../utils/onInput"; import _onInput from "../../utils/onInput";
const Input = ({ const Input = ({
title, title,
borderType, borderType,
@ -17,6 +16,7 @@ const Input = ({
max, max,
onFocus, onFocus,
defaultValue, defaultValue,
example,
}) => { }) => {
useEffect(() => { useEffect(() => {
if (value !== null && value !== "" && value !== undefined) { if (value !== null && value !== "" && value !== undefined) {
@ -75,7 +75,7 @@ const Input = ({
gapSize ? gapSize : "20" gapSize ? gapSize : "20"
} h-px absolute top-[-1px] right-7 `} } h-px absolute top-[-1px] right-7 `}
></div> ></div>
<div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none"> <div className="Login-box-form-item-label text-sm text-[#7c7c7c] bg-white absolute right-6 transition-all duration-300 pointer-events-none">
{title ? title : "نام کاربری"} {title ? title : "نام کاربری"}
</div> </div>
<input <input
@ -84,7 +84,7 @@ const Input = ({
id={`Login-box-form-item-input-name${id}`} id={`Login-box-form-item-input-name${id}`}
className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 `} className={`Login-box-form-item-input w-full h-full px-4 outline-0 rounded-lg text-gray-700 `}
style={{ style={{
pointerEvents : defaultValue ? "none" : 'auto', pointerEvents: defaultValue ? "none" : "auto",
direction: direction ? direction : "ltr", direction: direction ? direction : "ltr",
backgroundColor: bg, backgroundColor: bg,
}} }}
@ -99,6 +99,11 @@ const Input = ({
value={value} value={value}
maxLength={max} maxLength={max}
/> />
{example && (
<div className="w-full text-right text-xs absolute -bottom-5 text-[#d9dada]">
{example}
</div>
)}
</div> </div>
); );
}; };

@ -71,7 +71,7 @@ const blurHandler = (id) => {
let inputs = document.querySelectorAll(".Login-box-form-item-input"); let inputs = document.querySelectorAll(".Login-box-form-item-input");
let label = document.querySelectorAll(".Login-box-form-item-label"); let label = document.querySelectorAll(".Login-box-form-item-label");
let line = document.querySelectorAll(".Login-box-form-item-line"); let line = document.querySelectorAll(".Login-box-form-item-line");
if (inputs[id].value === "") { if (inputs[id]?.value === "") {
inputsBox[id].style.borderColor = "#EBEBEB"; inputsBox[id].style.borderColor = "#EBEBEB";
label[id].style.transform = "translate(0px,0px)"; label[id].style.transform = "translate(0px,0px)";
label[id].style.color = "#959595"; label[id].style.color = "#959595";

@ -1,6 +1,6 @@
import Header from "./Header"; import Header from "./Header";
import Questions from "./Questions"; import Questions from "./Questions";
import "./index.css";

@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import { RiTimerLine } from "react-icons/ri"; import { RiTimerLine } from "react-icons/ri";
import './index.css';
const Header=()=>{ const Header=()=>{
return ( return (

@ -1,5 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RiErrorWarningLine } from "react-icons/ri"; import { RiErrorWarningLine } from "react-icons/ri";
import './index.css';
import img1 from "../../assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg"; import img1 from "../../assets/img/4bea9a991c6b23d3dcaf231513ee94bd.jpg";
let data = [ let data = [
@ -61,8 +62,12 @@ let data = [
// text: "این سوال برای تست قرار داده میشود و ادامه پیدا میکند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟", // text: "این سوال برای تست قرار داده میشود و ادامه پیدا میکند تا طول متن بلندتر شود و در پایان علامت سوال قرار میگیرد؟",
// img: "", // img: "",
// choices: [ // choices: [
// "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ ", // "تیرتسیذر",
// "22", // "22",
// "بتربدر",
// "تیدرتسر",
// "تشدتنسدر",
// "ستیذزتن"
// ], // ],
// guidance:"", // guidance:"",
// choiceWidth: null, // choiceWidth: null,
@ -71,7 +76,7 @@ let data = [
]; ];
//badgeList------------- //badgeList-------------
let badgeList = ["الف", "ب", "ج", "د"]; let badgeList = ["الف", "ب", "ج", "د","هـ","ز"];
const Questions = () => { const Questions = () => {
const [Data, setData] = useState(data); const [Data, setData] = useState(data);
@ -126,6 +131,12 @@ const Questions = () => {
} else if (wMax < 0.48 * examSize && choiceNumber === 4) { } else if (wMax < 0.48 * examSize && choiceNumber === 4) {
newData[i].choiceWidth = 48; newData[i].choiceWidth = 48;
console.log("oooo"); console.log("oooo");
} else if (wMax < 0.18 * examSize && choiceNumber === 5) {
newData[i].choiceWidth = 18;
console.log("oo");
} else if (wMax < 0.15 * examSize && choiceNumber === 6) {
newData[i].choiceWidth = 15;
console.log("oo");
} else { } else {
newData[i].choiceWidth = "full"; newData[i].choiceWidth = "full";
console.log("ooooo"); console.log("ooooo");
@ -156,13 +167,13 @@ const Questions = () => {
return ( return (
<div className="Questions w-full mt-10"> <div className="Questions w-full mt-10">
{Data.map((item, index) => ( {Data.map((item, index) => (
<div key={index} className="w-full mb-24"> <div key={index} className="Questions-item w-full mb-24">
{/* -----question-text----------------------- */} {/* -----question-text----------------------- */}
<div className="w-full flex flex-row-reverse"> <div className="Questions-item-text-container w-full flex flex-row-reverse">
<div className="w-10 h-10 rounded-md flex items-center justify-center text-sm bg-[#D5DEEA]"> <div className="Qitc-badge w-10 h-10 rounded-md flex items-center justify-center text-sm bg-[#D5DEEA]">
{index + 1} {index + 1}
</div> </div>
<div className="w-full mr-2"> <div className="Qitc-text w-full mr-2">
{item.text && ( {item.text && (
<div <div
className="w-full text-right text-base" className="w-full text-right text-base"
@ -230,8 +241,9 @@ const Questions = () => {
</div> </div>
))} ))}
</div> </div>
{/* -----guidance----------------------------- */}
{item.guidance && ( {item.guidance && (
<div className="w-full pr-12 mt-4"> <div className="guidance w-full pr-12 mt-4">
<div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2"> <div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2">
<RiErrorWarningLine className="text-xl text-black" /> <RiErrorWarningLine className="text-xl text-black" />
<div <div
@ -245,7 +257,8 @@ const Questions = () => {
)} )}
</div> </div>
))} ))}
<div className="w-full mt-20 pr-12"> {/* -----Footer----------------------------- */}
<div className="Footer w-full mt-20 pr-12">
<div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2"> <div className="w-full px-2 py-3 flex flex-row-reverse rounded-md border border-[##D7DFEA] bg-[#FAFBFB] gap-x-2">
<RiErrorWarningLine className="text-xl text-black" /> <RiErrorWarningLine className="text-xl text-black" />
<div <div

@ -0,0 +1,41 @@
@media only screen and (max-width: 1000px) {
.Exam{
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
}
.Header{
padding-left: 5px !important;
padding-right: 5px !important;
}
.Questions-item{
margin-bottom: 40px !important;
}
.Choice-container{
padding-right: 0px !important;
}
.Questions-item-text-container{
display: block !important;
direction: rtl !important;
}
.Qitc-badge{
margin-bottom: 5px !important;
}
.Qitc-text{
margin-right: 0 !important;
}
.guidance{
padding-right: 0 !important;
}
.Footer{
padding-right: 0 !important;
}
}

@ -48,7 +48,7 @@ const Register = ({
}) => { }) => {
const [submitLoading, setSubmitLoading] = useState(false); const [submitLoading, setSubmitLoading] = useState(false);
//----------------------------------------------- //-----------------------------------------------
const [steps, setSteps] = useState(0); const [steps, setSteps] = useState(1);
console.log("user:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&"); console.log("user:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&");
console.log(user); console.log(user);
const timeoutRef = useRef(null); const timeoutRef = useRef(null);
@ -875,6 +875,7 @@ const Register = ({
}, },
}) })
} }
example="مثال :091299445566"
/> />
<Input <Input
className={"w-52"} className={"w-52"}
@ -930,6 +931,7 @@ const Register = ({
}, },
}) })
} }
example="مثال :02133446666"
/> />
</div> </div>
</div> </div>
@ -1035,6 +1037,7 @@ const Register = ({
}, },
}) })
} }
example="مثال :091299445566"
/> />
<Input <Input
className={"w-52"} className={"w-52"}
@ -1090,6 +1093,7 @@ const Register = ({
}, },
}) })
} }
example="مثال :02133446666"
/> />
</div> </div>
</div> </div>
@ -1134,6 +1138,7 @@ const Register = ({
phone: _onInput.numberOnly(e.target.value), phone: _onInput.numberOnly(e.target.value),
}) })
} }
example="مثال :02133446666"
/> />
<Input <Input

@ -181,6 +181,7 @@ const Services = ({
image: "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg", image: "https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg",
examCont: [], examCont: [],
type: product?.productType, type: product?.productType,
product:product
}); });
if (gameId !== 5) { if (gameId !== 5) {
setPopUp(true); setPopUp(true);
@ -320,7 +321,8 @@ const Services = ({
style={gameId === 5 ? { width: "100%" } : null} style={gameId === 5 ? { width: "100%" } : null}
> >
{(selectedProductTypes.includes(4) || {(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && ( selectedProductTypes.includes(7) ||
selectedProductTypes.includes(1)) && (
<Product <Product
key={index} key={index}
productsType={filter.productsType} productsType={filter.productsType}
@ -350,6 +352,7 @@ const Services = ({
))} ))}
{!selectedProductTypes.includes(4) && {!selectedProductTypes.includes(4) &&
!selectedProductTypes.includes(7) && !selectedProductTypes.includes(7) &&
!selectedProductTypes.includes(1) &&
gameId !== 6 && ( gameId !== 6 && (
<div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">
<CgDanger className="text-4xl" /> <CgDanger className="text-4xl" />
@ -481,7 +484,8 @@ const Services = ({
.map((product, index) => ( .map((product, index) => (
<div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}> <div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}>
{(selectedProductTypes.includes(4) || {(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && ( selectedProductTypes.includes(7) ||
selectedProductTypes.includes(1)) && (
<Product <Product
key={index} key={index}
productsType={filter.productsType} productsType={filter.productsType}
@ -509,6 +513,7 @@ const Services = ({
))} ))}
{!selectedProductTypes.includes(4) && {!selectedProductTypes.includes(4) &&
!selectedProductTypes.includes(7) && !selectedProductTypes.includes(7) &&
!selectedProductTypes.includes(1) &&
gameId !== 6 && ( gameId !== 6 && (
<div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded"> <div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">
<CgDanger className="text-4xl" /> <CgDanger className="text-4xl" />

@ -82,35 +82,58 @@ const servicePopUp = ({
{content.title} {content.title}
</h1> </h1>
<p className="text-red26 text-sm my-2">{content.description}</p> <p className="text-red26 text-sm my-2">{content?.description}</p>
<div <div
className="w-full flex flex-col" className="w-full flex flex-col"
style={{ direction: "rtl" }} style={{ direction: "rtl" }}
> >
<div className="flex mb-2"> <div className="flex mb-2">
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> <div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52 text-center">
نام کلاس {content?.product?.productType === 4 ||
content?.product?.productType === 5
? "نام کلاس"
: "تعدادصفحات "}
</div> </div>
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26 flex items-center">
{content.title} {content?.product?.productType === 4 ||
content?.product?.productType === 5
? content?.title
: content?.product?.pagesNum}
</div> </div>
</div> </div>
<div className="flex mb-2"> <div className="flex mb-2">
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> <div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52">
{" "} {content?.product?.productType === 4 ||
استاد{" "} content?.product?.productType === 5
? "استاد"
: "سال انتشار"}
</div> </div>
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
{content.teacher} {content?.product?.productType === 4 ||
content?.product?.productType === 5
? content?.teacher
: content?.product?.publishYear}
</div> </div>
</div> </div>
<div className="flex mb-2"> <div className="flex mb-2">
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52"> <div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52">
زمان کلاس {content?.product?.productType === 4 ||
content?.product?.productType === 5
? "زمان کلاس"
: "نوع جلد"}
</div> </div>
{(content?.product?.productType === 4 ||
content?.product?.productType === 5) && (
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26"> <div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
{content.classHour} دقیقه {content.classHour} دقیقه
</div> </div>
)}
{(content?.product?.productType ===1) && (
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">
{/* {content?.product.?} */}
رحلی کوچک
</div>
)}
</div> </div>
</div> </div>
</div> </div>
@ -172,19 +195,18 @@ const servicePopUp = ({
</div> </div>
)} )}
{(content.id === 3 {content.id === 3 && (
&& (
<video className="w-1/2 rounded-md" controls> <video className="w-1/2 rounded-md" controls>
<source <source
src={`https://new.andishmand.ir/api/v1/file/${content?.video}`} src={`https://new.andishmand.ir/api/v1/file/${content?.video}`}
type="video/mp4" type="video/mp4"
/> />
</video> </video>
))} )}
{content.id === 1 && ( {content.id === 1 && (
<img <img
src={content.image} src={`https://new.andishmand.ir/api/v1/file/${content?.product?.fileId}`}
className="w-1/3 rounded-md mt-4" className="w-1/3 rounded-md mt-4"
alt="Content" alt="Content"
/> />

Loading…
Cancel
Save