You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

179 lines
6.0 KiB

import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index";
import Modal from "./Modal/index";
import ReplayIcon from "@material-ui/icons/Replay";
import FlipCameraIosIcon from "@material-ui/icons/FlipCameraIos";
import { connect } from "react-redux";
import { qr, userProduct } from "~/Redux/actions";
import sciense_6 from "../../assets/images/sciense-6.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,
},
};
class QRScan extends Component {
state = {
value: null,
facingMode: 0,
tail: null, //"Zist10-146",
};
componentDidMount() {
console.log(this.props.myList);
if (!this.props.myList) this.props.getMyList({});
}
async componentDidUpdate() {
if (this.state.value) {
let tail = this.state.value.slice(
this.state.value.lastIndexOf("/") + 1,
this.state.value.length
);
// if (tail.length) this.props.info({ tail: tail });
this.setState({ value: null, tail: tail });
}
}
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="qr-scan d-flex flex-column align-items-center">
<Navbar />
<div className="qr-scan__box d-flex flex-column">
<header className="qr-scan__box--header d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{window.t("نکته")}
</h1>
<p style={{ fontSize: fontSize.desktop.p }}>
{window.t(
"لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار"
)}
{window.t("دهید تا اسکن دوربین انجام شود")}{" "}
</p>
</header>
<div className="qr-scan__box--select d-flex">
<select
onChange={(e) =>
this.setState({ facingMode: e.target.value })
}
>
<option value="environment">
{window.t("دوربین عقب")}
</option>
<option value="user">{window.t("دوربین جلو")}</option>
</select>
</div>
<section className="qr-scan__box--camera d-flex justify-content-center align-items-center">
{this.state.value !== null ? (
<div
style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })}
>
<ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div>
) : this.state.tail === null ? (
<Scanner parent={this} />
) : null}
</section>
{this.state.tail === null ? null : (
<Modal
tail={this.state.tail}
parent={this}
myList={this.props.myList}
/>
)}
</div>
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr-scan d-flex flex-column">
<Navbar page="qr-scan" />
<header className="mobile-qr-scan__header d-flex flex-column"></header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
<FlipCameraIosIcon
style={{
fontSize: 35,
position: "absolute",
left: 10,
top: 10,
zIndex: 100,
color: "white",
}}
onClick={() =>
this.setState({ facingMode: this.state.facingMode ? 0 : 1 })
}
/>
{this.state.value !== null ? (
<div
style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })}
>
<ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div>
) : (
<Scanner parent={this} />
)}
</section>
{this.state.tail === null ? null : (
<Modal
parent={this}
tail={this.state.tail}
myList={this.props.myList}
/>
)}
{localStorage.getItem("latestQr") ? (
<section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>{window.t("آخرین مشاهدات")}</h2>
{data.map((item, i) => (
<LastQr
data={JSON.parse(localStorage.getItem("latestQr"))}
key={i}
/>
))}
</section>
) : null}
</div>
</>
) : null}
</>
);
}
}
export default connect(
(state) => ({ list: state.qr.list, myList: state.userProduct.myList }),
{
getMyList: userProduct.myList,
info: qr.info,
}
)(QRScan);
QRScan.defaultProps = {
data: [
{
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی",
page: 13,
image: sciense_6,
},
],
};