reza added qr redux

master
RezaAshrafi77 3 years ago
parent f2ae030688
commit 064fe9efab
  1. 8
      src/AppRouter.js
  2. 3
      src/History/index.js
  3. 6
      src/Redux/actions/index.js
  4. 37
      src/Redux/actions/qr.js
  5. 14
      src/Redux/reducers/blog.js
  6. 10
      src/Redux/reducers/index.js
  7. 70
      src/Redux/reducers/qr.js
  8. 40
      src/views/AR/Item/index.js
  9. 76
      src/views/AR/Item/index.scss
  10. 86
      src/views/AR/index.js
  11. 20
      src/views/AR/index.scss
  12. 8
      src/views/Auth/Profile/Birthdate/index.js
  13. 2
      src/views/Auth/Profile/MultipleSelector/index.js
  14. 4
      src/views/Auth/Profile/MultipleSelector/index.scss
  15. 154
      src/views/QR/index.js
  16. 3
      src/views/QRScan/History/index.js
  17. 33
      src/views/QRScan/index.js

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import "./App.css"; import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import history from "./History/index";
import { connect } from "react-redux"; import { connect } from "react-redux";
import proxy from "./Redux/proxy"; import proxy from "./Redux/proxy";
@ -19,6 +19,7 @@ import ChatList from "./views/ChatList/index";
import Chatroom from "./views/ChatRoom/index"; import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index"; import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index"; import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
@ -42,7 +43,7 @@ class AppRouter extends Component {
); );
return ( return (
<Router> <Router history={history}>
<Switch> <Switch>
{home} {home}
<Route path={"/faq"}> <Route path={"/faq"}>
@ -84,6 +85,9 @@ class AppRouter extends Component {
<Route exact path={"/mybooks"}> <Route exact path={"/mybooks"}>
<MyBooks /> <MyBooks />
</Route> </Route>
<Route exact path={"/ar"}>
<AR />
</Route>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<Route exact path={"/chatroom/:id"}> <Route exact path={"/chatroom/:id"}>
<Chatroom /> <Chatroom />

@ -0,0 +1,3 @@
import { createBrowserHistory } from "history";
export default createBrowserHistory();

@ -1,7 +1,7 @@
// @create-index // @create-index
export { default as chat } from './chat.js'; export { default as chat } from "./chat.js";
// export { default as message } from './message.js'; // export { default as message } from './message.js';
// export { default as public } from './public.js'; // export { default as public } from './public.js';
export { default as user } from './user.js'; export { default as user } from "./user.js";
export { default as qr } from "./qr.js";

@ -0,0 +1,37 @@
import proxy from "../proxy";
const qr = {
list:
(data = {}) =>
async (dispatch) =>
await proxy.get("qr/list", data, { dispatch }),
info:
// (data = {}) =>
// async (dispatch) => {
// await proxy.get("qr/info", data, { dispatch });
// },
(data = {}) =>
async (dispatch) =>
dispatch({ type: "qr/info", payload: data }),
add:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.post("qr/add", data);
await proxy.get("qr/list", data2, { dispatch });
},
del:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.delete("ar/delete", data);
await proxy.get("ar/list", data2, { dispatch });
},
update:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.put("ar/update", data);
await proxy.get("ar/list", data2, { dispatch });
},
};
export default qr;

@ -3,21 +3,21 @@ const initialState = {
error: null, error: null,
list: [], list: [],
}; };
export default function user(state = initialState, action) { export default function blog(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case 'blog/list': case "blog/list":
return { ...state, loading: false, list: data, error: null }; return { ...state, loading: false, list: data, error: null };
case 'blog/update': case "blog/update":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case 'blog/add': case "blog/add":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case 'blog/delete': case "blog/delete":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
///////////// /////////////
case 'loading': case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case 'error': case "error":
return { ...state, loading: false, error: data.message }; return { ...state, loading: false, error: data.message };
default: default:
return state; return state;

@ -1,7 +1,7 @@
// @create-index // @create-index
export { default as chat } from './chat.js'; export { default as chat } from "./chat.js";
export { default as message } from './message.js'; export { default as message } from "./message.js";
export { default as public } from './public.js'; export { default as public } from "./public.js";
export { default as user } from './user.js'; export { default as user } from "./user.js";
export { default as qr } from "./qr.js";

@ -0,0 +1,70 @@
const initialState = {
loading: false,
error: null,
list: [
{
type: "voice",
title: "استاد رضایی:توضیح در مورد درس آتشفشان",
file: null,
},
{
type: "video",
title: "ویدئوی آزمایشی آتش فشان سرکه",
file: null,
},
{
type: "ppt",
title: "فایل پاورپوینت ارائه درس آتشفشان",
link: "",
},
{
type: "pdf",
title: "فایل پی دی اف ارائه درس آتشفشان",
link: "",
},
{
type: "links",
links: [
{
title: "وبسایت آموزشی دانوین",
link: "",
},
{
title: "وبسایت رسمی مدیریت راهبردی کشور",
link: "",
},
{
title: "سازمان تبلیغات صنایع سبک",
link: "",
},
],
},
],
};
export default function qr(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "qr/list":
return { ...state, loading: false, error: null };
case "qr/update":
return { ...state, loading: false, error: null };
case "qr/add":
return { ...state, loading: false, error: null };
case "qr/delete":
return { ...state, loading: false, error: null };
case "qr/info":
return {
...state,
loading: false,
list: action.payload === "Zist10-13" ? [] : null,
error: null,
};
/////////////
case "loading":
return { ...state, loading: true };
case "error":
return { ...state, loading: false, error: data.message };
default:
return state;
}
}

@ -0,0 +1,40 @@
import React, { Component } from "react";
import "./index.scss";
const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
mobile: {
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
},
desktop: {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
},
};
export default class Item extends Component {
render() {
const { data } = this.props;
return (
<>
{window.innerWidth < 1000 ? (
<article className="mobile-ar-book d-flex flex-column">
<a href={`https://ar.dnvn.ir/lunch?id=${data.id}`}>
<img src={data.imageUrl} alt={data.title} />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
</a>
</article>
) : null}
{window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"></article>
) : null}
</>
);
}
}

@ -0,0 +1,76 @@
.mobile-ar-book {
width: calc(100% / 2);
padding: 10px;
a {
width: 100%;
text-decoration: none;
&:hover {
}
img {
width: 100%;
height: 170px;
border-radius: 20px;
}
h1 {
font-family: numeralBold;
margin-top: 15px;
color: #4d4d4d;
letter-spacing: -1px;
}
}
}
.products-product {
width: calc(100% / 4);
padding: 10px;
margin-bottom: 20px;
a {
width: 100%;
text-decoration: none;
&:hover {
}
img {
width: 100%;
height: 200px;
border-radius: 30px;
}
h1 {
font-family: numeralBold;
margin-top: 15px;
color: #02a1a6;
letter-spacing: -1px;
text-align: center;
}
}
&__notAvailabe {
font-family: numeralBold;
width: 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__price {
width: 100%;
margin-top: 15px;
text-align: center;
&--old {
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items: center;
span {
position: absolute;
left: 0px;
width: 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
}
}
&--price {
color: #4d4d4d;
font-family: numeralBold;
}
}
}

@ -0,0 +1,86 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Item from "./Item/index";
import zist_10 from "~/assets/images/zist-10.png";
import chemistry_10 from "~/assets/images/chemistry-10.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_7 from "~/assets/images/sciense-7.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 25 : window.innerWidth / 70,
p: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 90,
},
};
export default class AR extends Component {
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="ar d-flex flex-column align-items-center">
<Navbar />
<div className="ar__box d-flex flex-column"></div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-ar d-flex flex-column">
<Navbar />
<div className="mobile-ar__list d-flex flex-wrap">
{data.map((item, i) => (
<Item data={item} key={i} />
))}
</div>
</div>
) : null}
</>
);
}
}
AR.defaultProps = {
data: [
{
id: 222,
title: "دانوین زیست دهم",
imageUrl: zist_10,
},
{
id: 223,
title: "دانوین شیمی نهم",
imageUrl: chemistry_10,
},
{
id: 225,
title: "دانوین علوم نهم",
imageUrl: sciense_6,
},
{
id: 226,
title: "دانوین علوم هشتم",
imageUrl: sciense_8,
},
{
id: 227,
title: "دانوین علوم هفتم",
imageUrl: sciense_7,
},
{
id: 228,
title: "دانوین علوم ششم",
imageUrl: sciense_6,
},
],
};

@ -0,0 +1,20 @@
.mobile-ar {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 90px;
overflow-x: hidden;
}
.ar {
width: 100vw;
max-width: 1250px;
min-height: calc(100vh - 288px);
margin: 0px auto;
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 100px;
}

@ -1,6 +1,14 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
const maxMobileSize = 550;
const maxDesktopSize = 1250;
const fontSize = {
// desktop :
};
export default function Birthdate(props) { export default function Birthdate(props) {
return ( return (
<> <>

@ -84,7 +84,7 @@ export default function MultipleSelector(props) {
style={{ style={{
position: "absolute", position: "absolute",
left: 5, left: 5,
top: 10, top: 15,
fontSize: 30, fontSize: 30,
color: "#a5a5a5", color: "#a5a5a5",
}} }}

@ -1,10 +1,10 @@
.mobile-multiple-selector { .mobile-multiple-selector {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
padding: 10px 10px; padding: 9px 10px;
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
margin: 0px !important; margin: 0px !important;
.MuiInput-formControl { .MuiInput-formControl {
margin: 9px 0px 7px !important; margin: 9px 0px 15px !important;
} }
} }

@ -10,6 +10,9 @@ import SubjectsDropdown from "./SubjectsDropdown/index";
import BookContent from "./BookContent/index"; import BookContent from "./BookContent/index";
import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined"; import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
import { connect } from "react-redux";
import { qr } from "~/Redux/actions";
import exit from "../../assets/icons/exit.svg"; import exit from "../../assets/icons/exit.svg";
import sciense_7 from "../../assets/images/sciense-7.png"; import sciense_7 from "../../assets/images/sciense-7.png";
@ -17,7 +20,7 @@ import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
export default class QR extends Component { class QR extends Component {
state = { state = {
theme: true, theme: true,
zoom: [10, 10], zoom: [10, 10],
@ -41,7 +44,7 @@ export default class QR extends Component {
} }
}; };
render() { render() {
const { QR } = this.props; const { QR, qrList } = this.props;
const fontSize = { const fontSize = {
desktop: { desktop: {
sidebar: { sidebar: {
@ -141,38 +144,51 @@ export default class QR extends Component {
<> <>
<div className="mobile-qr d-flex flex-column"> <div className="mobile-qr d-flex flex-column">
<Navbar /> <Navbar />
{qrList.length === 0 && qrList !== null ? (
<div className="d-flex pt-3"> <div className="d-flex flex-column">
<div className="mobile-qr__buttons d-flex flex-column align-items-center"> <div className="d-flex justify-content-end">بازگشت</div>
<img src={exit} alt="خروج" /> <h1>فایلی در این صفحه موجود نیست.</h1>
<button>نمایش تمامی محتواها</button>
<a
href="#voice"
className="mobile-qr__buttons--voice mobile-qr__buttons--media"
></a>
<a
href="#video"
className="mobile-qr__buttons--video mobile-qr__buttons--media"
></a>
<a
href="#ppt"
className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
></a>
<a
href="#pdf"
className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
></a>
<a
href="#links"
className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
></a>
</div> </div>
<div className="mobile-qr__content d-flex flex-column"> ) : null}
{QR.data.map((item, i) => ( {qrList !== null ? (
<Identifier data={item} key={i} /> <div className="d-flex pt-3">
))} <div className="mobile-qr__buttons d-flex flex-column align-items-center">
<img src={exit} alt="خروج" />
<button>نمایش تمامی محتواها</button>
<a
href="#voice"
className="mobile-qr__buttons--voice mobile-qr__buttons--media"
></a>
<a
href="#video"
className="mobile-qr__buttons--video mobile-qr__buttons--media"
></a>
<a
href="#ppt"
className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
></a>
<a
href="#pdf"
className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
></a>
<a
href="#links"
className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
></a>
</div>
<div className="mobile-qr__content d-flex flex-column">
{qrList.map((item, i) => (
<Identifier data={item} key={i} />
))}
</div>
</div> </div>
</div> ) : null}
{qrList === null ? (
<div className="d-flex flex-column align-items-center">
<div className="d-flex justify-content-end">بازگشت</div>
<h1 className="align-center">404</h1>
</div>
) : null}
</div> </div>
</> </>
) : null} ) : null}
@ -181,6 +197,13 @@ export default class QR extends Component {
} }
} }
export default connect(
(state) => ({
qrList: state.qr.list,
}),
{}
)(QR);
QR.defaultProps = { QR.defaultProps = {
QR: { QR: {
id: 1, id: 1,
@ -192,73 +215,6 @@ QR.defaultProps = {
page: 67, page: 67,
percent: 60, percent: 60,
}, },
data: [
{
type: "h1",
text: "خلاصه کتاب",
},
{
type: "p",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
},
{
type: "h1",
text: "خلاصه کتاب",
},
{
type: "p",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
},
{
type: "voice",
title: "استاد رضایی:توضیح در مورد درس آتشفشان",
file: null,
},
{
type: "p",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
},
{
type: "video",
title: "ویدئوی آزمایشی آتش فشان سرکه",
file: null,
},
{
type: "p",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
},
{
type: "ppt",
title: "فایل پاورپوینت ارائه درس آتشفشان",
link: "",
},
{
type: "pdf",
title: "فایل پی دی اف ارائه درس آتشفشان",
link: "",
},
{
type: "p",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
},
{
type: "links",
links: [
{
title: "وبسایت آموزشی دانوین",
link: "",
},
{
title: "وبسایت رسمی مدیریت راهبردی کشور",
link: "",
},
{
title: "سازمان تبلیغات صنایع سبک",
link: "",
},
],
},
],
}, },
}; };

@ -0,0 +1,3 @@
import { createBrowserHistory } from "history";
export default createBrowserHistory();

@ -2,10 +2,14 @@ import React, { Component } from "react";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import history from "./History/index";
import Scanner from "./Scanner/index"; import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index"; import LastQr from "./LastQr/index";
import ReplayIcon from "@material-ui/icons/Replay"; import ReplayIcon from "@material-ui/icons/Replay";
import { connect } from "react-redux";
import { qr } from "~/Redux/actions";
import sciense_6 from "../../assets/images/sciense-6.png"; import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss"; import "./index.scss";
@ -19,11 +23,22 @@ const fontSize = {
}, },
}; };
export default class QRScan extends Component { class QRScan extends Component {
state = { state = {
value: null, value: null,
facingMode: "environment", facingMode: "environment",
tail: null,
}; };
async componentDidUpdate() {
if (this.state.value) {
let tail = this.state.value.slice(15, this.state.value.length);
this.props.info(tail);
console.log(this.props.list, tail);
this.setState({ value: null, tail: tail });
}
}
render() { render() {
const { data } = this.props; const { data } = this.props;
return ( return (
@ -62,10 +77,10 @@ export default class QRScan extends Component {
<Scanner parent={this} /> <Scanner parent={this} />
)} )}
</section> </section>
{this.state.value === null ? null : ( {this.state.tail === null ? null : (
<p style={{ fontSize: fontSize.desktop.p }}> <Link to={"/qr"} style={{ fontSize: fontSize.desktop.p }}>
{this.state.value.text} {this.state.tail}
</p> </Link>
)} )}
<p <p
style={{ fontSize: fontSize.desktop.p }} style={{ fontSize: fontSize.desktop.p }}
@ -123,8 +138,8 @@ export default class QRScan extends Component {
<Scanner parent={this} /> <Scanner parent={this} />
)} )}
</section> </section>
{this.state.value === null ? null : ( {this.state.tail === null ? null : (
<p>{this.state.value.text}</p> <Link to={"/qr"}>{this.state.tail}</Link>
)} )}
<p className="mobile-qr-scan__text d-flex"> <p className="mobile-qr-scan__text d-flex">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
@ -146,6 +161,10 @@ export default class QRScan extends Component {
} }
} }
export default connect((state) => ({ list: state.qr.list }), { info: qr.info })(
QRScan
);
QRScan.defaultProps = { QRScan.defaultProps = {
data: [ data: [
{ {

Loading…
Cancel
Save