master
parent
69599d3c65
commit
d957786743
42 changed files with 857 additions and 194 deletions
@ -0,0 +1,3 @@ |
||||
import { createBrowserHistory } from "history"; |
||||
|
||||
export default createBrowserHistory(); |
||||
@ -0,0 +1,45 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const grades = [ |
||||
"اول", |
||||
"دوم", |
||||
"سوم", |
||||
"چهارم", |
||||
"پنجم", |
||||
"ششم", |
||||
"هفتم", |
||||
"هشتم", |
||||
"نهم", |
||||
"دهم", |
||||
"یازدهم", |
||||
"دوازدهم", |
||||
]; |
||||
|
||||
export default function LastQR(props) { |
||||
const { data } = props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? <div className="last-qr"></div> : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<Link to={`/qr${data.link}`} className="mobile-last-qr d-flex"> |
||||
<div className="mobile-last-qr__right d-flex"> |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} |
||||
alt={data.name} |
||||
/> |
||||
<div className="d-flex flex-column"> |
||||
<strong>{data.name}</strong> |
||||
<span>{grades[data.gradeId]}</span> |
||||
</div> |
||||
</div> |
||||
<div className="mobile-last-qr__left d-flex"> |
||||
<button>صفحه {data.pagesNum}</button> |
||||
</div> |
||||
</Link> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
.mobile-last-qr { |
||||
width: 100%; |
||||
padding: 15px 10px; |
||||
justify-content: space-between; |
||||
background-color: white; |
||||
align-items: center; |
||||
border-radius: 10px; |
||||
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
||||
text-decoration: none; |
||||
&__right { |
||||
align-items: center; |
||||
img { |
||||
height: 100px; |
||||
border-radius: 10px; |
||||
margin-left: 15px; |
||||
} |
||||
strong { |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 25); |
||||
font-weight: 600; |
||||
letter-spacing: -1px; |
||||
color: #4e4e4e; |
||||
} |
||||
span { |
||||
font-family: numeralMedium; |
||||
font-size: calc(100vw / 30); |
||||
color: #00cc69; |
||||
} |
||||
} |
||||
&__left { |
||||
button { |
||||
display: inline; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
padding: 5px 20px 3px; |
||||
border: 1px solid #00cc69; |
||||
background-color: white; |
||||
border-radius: 25px; |
||||
font-size: calc(100vw / 26); |
||||
color: #00cc69; |
||||
&:focus:enabled { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
import React, { Component } from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
span: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 17, |
||||
a: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20, |
||||
}, |
||||
}; |
||||
export default class QRModal extends Component { |
||||
render() { |
||||
const { tail, parent } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<div className="mobile-qr-modal d-flex flex-column justify-content-center align-items-center"> |
||||
<span style={{ fontSize: fontSize.mobile.span }}> |
||||
اسکن کد QR موفقیت آمیز بود. |
||||
</span> |
||||
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}> |
||||
{tail} |
||||
</Link> |
||||
<button onClick={() => parent.setState({ tail: null })}> |
||||
انصراف |
||||
</button> |
||||
</div> |
||||
) : ( |
||||
<div className="qr-modal d-flex flex-column justify-content-center align-items-center"> |
||||
<span style={{ fontSize: fontSize.mobile.span }}> |
||||
اسکن کد QR موفقیت آمیز بود. |
||||
</span> |
||||
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}> |
||||
{tail} |
||||
</Link> |
||||
<button onClick={() => parent.setState({ tail: null })}> |
||||
انصراف |
||||
</button> |
||||
</div> |
||||
)} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
.mobile-qr-modal { |
||||
position: fixed; |
||||
left: 0px; |
||||
background-color: rgba(0, 0, 0, 0.856); |
||||
top: 0px; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
z-index: 500; |
||||
animation-name: qrModal; |
||||
animation-duration: 0.4s; |
||||
span { |
||||
font-family: numeralLight; |
||||
color: white; |
||||
} |
||||
a { |
||||
text-decoration: none; |
||||
width: 50%; |
||||
margin: 25px auto; |
||||
background-color: #00cc69; |
||||
border: 2px solid white; |
||||
padding: 20px 0px; |
||||
text-align: center; |
||||
color: white; |
||||
font-family: numeralLight; |
||||
border-radius: 25px; |
||||
} |
||||
button { |
||||
text-decoration: none; |
||||
width: 30%; |
||||
min-width: 100px; |
||||
margin: 15px auto; |
||||
background-color: #cc001b; |
||||
border: 2px solid white; |
||||
padding: 5px 0px; |
||||
text-align: center; |
||||
color: white; |
||||
font-family: numeralLight; |
||||
border-radius: 25px; |
||||
} |
||||
} |
||||
|
||||
.qr-modal { |
||||
position: fixed; |
||||
left: 0px; |
||||
background-color: rgba(0, 0, 0, 0.925); |
||||
top: 0px; |
||||
width: 100vw; |
||||
height: 100vh; |
||||
z-index: 500; |
||||
animation-name: qrModal; |
||||
animation-duration: 0.4s; |
||||
span { |
||||
font-family: numeralLight; |
||||
color: white; |
||||
} |
||||
a { |
||||
text-decoration: none; |
||||
width: 50%; |
||||
margin: 25px auto; |
||||
background-color: #00cc69; |
||||
border: 2px solid white; |
||||
padding: 20px 0px; |
||||
text-align: center; |
||||
color: white; |
||||
font-family: numeralLight; |
||||
border-radius: 25px; |
||||
} |
||||
button { |
||||
text-decoration: none; |
||||
width: 25%; |
||||
max-width: 100px; |
||||
margin: 15px auto; |
||||
background-color: #cc001b; |
||||
border: 2px solid white; |
||||
padding: 10px 0px; |
||||
text-align: center; |
||||
color: white; |
||||
font-family: numeralLight; |
||||
border-radius: 25px; |
||||
} |
||||
} |
||||
|
||||
@keyframes qrModal { |
||||
0% { |
||||
left: -100vw; |
||||
top: 0px; |
||||
} |
||||
100% { |
||||
left: 0px; |
||||
top: 0px; |
||||
} |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import React, { Component } from "react"; |
||||
//import QrReader from "react-camera-qr";
|
||||
import QrReader from "react-qr-reader"; |
||||
|
||||
export default class Scanner extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
delay: 100, |
||||
result: "", |
||||
}; |
||||
|
||||
this.handleScan = this.handleScan.bind(this); |
||||
} |
||||
|
||||
handleScan(data) { |
||||
this.props.parent.setState({ |
||||
value: data, |
||||
}); |
||||
} |
||||
|
||||
handleError(err) { |
||||
console.error(err); |
||||
} |
||||
|
||||
render() { |
||||
let cam = this.props.parent.state.cameraId; |
||||
|
||||
let facingMode = this.props.parent.state.cameraId; |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<QrReader |
||||
delay={800 + Math.random() * 10} |
||||
onError={this.handleError} |
||||
onScan={this.handleScan} |
||||
style={{ width: "100%" }} |
||||
cameraId={cam} |
||||
facingMode={facingMode} |
||||
/> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<QrReader |
||||
delay={800 + Math.random() * 10} |
||||
onError={this.handleError} |
||||
onScan={this.handleScan} |
||||
style={{ width: "100%" }} |
||||
cameraId={cam} |
||||
facingMode={facingMode} |
||||
/> |
||||
) : null} |
||||
{/* <div>{facingMode[this.props.parent.state.facingMode]}</div> |
||||
<div>{(this.state?.devices || []).join(",")}</div> */} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,242 @@ |
||||
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 } 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, |
||||
cameraIds: [], |
||||
cameraId: "rare", |
||||
}; |
||||
componentDidMount() { |
||||
navigator.mediaDevices.enumerateDevices().then((devices) => { |
||||
console.log({ devices }); |
||||
var cameraIds = devices |
||||
.filter(function (device) { |
||||
return device.kind === "videoinput"; |
||||
}) |
||||
.map((e) => [e.label, e.deviceId]); |
||||
|
||||
var environmentPattern = /rear|back|environment/gi; |
||||
var userPattern = /front|user|face/gi; |
||||
var backs = cameraIds.filter((label) => environmentPattern.test(label)); |
||||
var notFronts = cameraIds.filter((label) => !userPattern.test(label)); |
||||
let cameraId = backs[0] || notFronts[0] || cameraIds[0]; |
||||
let cameraIdx = cameraIds.findIndex((cam) => cam[1] === cameraId[1]); |
||||
console.log({ |
||||
cameraIds, |
||||
cameraId: cameraId[0], |
||||
cameraIdx, |
||||
}); |
||||
this.setState({ |
||||
cameraIds, |
||||
cameraId, |
||||
cameraIdx, |
||||
}); |
||||
}); |
||||
} |
||||
async componentDidUpdate() { |
||||
if (this.state.value) { |
||||
let tail = this.state.value.slice( |
||||
this.state.value.lastIndexOf("/") + 1, |
||||
this.state.value.length |
||||
); |
||||
this.props.info({ tail: tail }); |
||||
this.setState({ value: null, tail: tail }); |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
const { data } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 100 ? ( |
||||
<> |
||||
<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 }}>نکته</h1> |
||||
<p style={{ fontSize: fontSize.desktop.p }}> |
||||
لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار |
||||
دهید تا اسکن دوربین انجام شود |
||||
</p> |
||||
</header> |
||||
{this.state.cameraIds.length > 1 ? ( |
||||
<div className="qr-scan__box--select d-flex"> |
||||
<select |
||||
value={this.state.cameraId} |
||||
onChange={(e) => |
||||
this.setState({ |
||||
facingMode: Math.round() * 3, |
||||
cameraId: e.target.value, |
||||
}) |
||||
} |
||||
> |
||||
{this.state.cameraIds.map((e) => ( |
||||
<option value={e[1]}>{e[0] || e[1]}</option> |
||||
))} |
||||
</select> |
||||
</div> |
||||
) : null} |
||||
<section className="qr-scan__box--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 + 1) % 2, |
||||
}) |
||||
} |
||||
/> |
||||
{this.state.value !== null ? ( |
||||
<div |
||||
style={{ zIndex: 1000 }} |
||||
onClick={() => this.setState({ value: null })} |
||||
> |
||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||
</div> |
||||
) : ( |
||||
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||
)} |
||||
</section> |
||||
{this.state.tail === null ? null : ( |
||||
<Modal tail={this.state.tail} /> |
||||
)} |
||||
</div> |
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 100 ? ( |
||||
<> |
||||
<div className="mobile-qr-scan d-flex flex-column"> |
||||
<Navbar page="qr-scan" /> |
||||
{/* <div className="mobile-qr-scan__back d-flex"> |
||||
<Link to="/">بازگشت</Link> |
||||
</div> */} |
||||
<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"> |
||||
{this.state.cameraIds.length > 1 ? ( |
||||
<> |
||||
<div |
||||
className="qr-scan__box--select d-flex" |
||||
style={{ position: "absolute", zIndex: 500 }} |
||||
> |
||||
<select |
||||
value={this.state.cameraId} |
||||
onChange={(e) => |
||||
this.setState({ |
||||
facingMode: Math.round() * 3, |
||||
cameraId: e.target.value, |
||||
}) |
||||
} |
||||
> |
||||
{this.state.cameraIds.map((e) => ( |
||||
<option value={e[1]}> |
||||
{e[0]} |
||||
{e[1]} |
||||
</option> |
||||
))} |
||||
</select> |
||||
</div> |
||||
<FlipCameraIosIcon |
||||
style={{ |
||||
fontSize: 35, |
||||
position: "absolute", |
||||
left: 10, |
||||
top: 10, |
||||
zIndex: 100, |
||||
color: "white", |
||||
}} |
||||
onClick={() => { |
||||
let cameraIdx = |
||||
(this.state.cameraIdx + 1) % |
||||
this.state.cameraIds.length; |
||||
|
||||
this.setState({ |
||||
cameraIdx, |
||||
cameraId: this.state.cameraIds[cameraIdx], |
||||
}); |
||||
}} |
||||
/> |
||||
</> |
||||
) : null} |
||||
{false && this.state.cameraId === "" ? ( |
||||
<div |
||||
style={{ zIndex: 1000 }} |
||||
onClick={() => this.setState({ value: null })} |
||||
> |
||||
<ReplayIcon style={{ fontSize: 40, color: "grey" }} /> |
||||
</div> |
||||
) : ( |
||||
<Scanner parent={this} cameraId={this.state.cameraId} /> |
||||
)} |
||||
</section> |
||||
{this.state.tail === null ? null : ( |
||||
<Modal parent={this} tail={this.state.tail} /> |
||||
)} |
||||
{localStorage.getItem("latestQr") ? ( |
||||
<section className="mobile-qr-scan__lasts d-flex flex-column"> |
||||
<h2>آخرین مشاهدات</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 }), { info: qr.info })( |
||||
QRScan |
||||
); |
||||
|
||||
QRScan.defaultProps = { |
||||
data: [ |
||||
{ |
||||
title: "ریاضیات گسسته خیلی پیشرفته", |
||||
subTitle: "پایه هفتم ابتدایی", |
||||
page: 13, |
||||
image: sciense_6, |
||||
}, |
||||
], |
||||
}; |
||||
@ -0,0 +1,167 @@ |
||||
.mobile-qr-scan { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px 40px; |
||||
direction: rtl; |
||||
padding-top: 70px; |
||||
overflow-x: hidden; |
||||
&__back { |
||||
justify-content: space-around; |
||||
a { |
||||
display: inline; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
padding: 5px 20px 3px; |
||||
background-color: #00cc69; |
||||
border-radius: 25px; |
||||
font-size: calc(100vw / 26); |
||||
color: white; |
||||
&:focus:enabled { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
&__header { |
||||
width: 100%; |
||||
h1 { |
||||
font-family: numeralMedium; |
||||
color: #4ce1be; |
||||
font-size: calc(100vw / 13); |
||||
} |
||||
p { |
||||
text-align: justify; |
||||
font-family: numeralMedium; |
||||
color: #4ce1be; |
||||
font-size: calc(100vw / 28); |
||||
} |
||||
} |
||||
&__select { |
||||
select { |
||||
margin-top: 10px; |
||||
border-radius: 4px; |
||||
position: relative; |
||||
background-color: #efefef; |
||||
border: 1px solid #a5a5a5; |
||||
font-size: 16px; |
||||
color: black; |
||||
// maxWidth : 70; |
||||
min-width: 80; |
||||
height: 35px; |
||||
padding: 5px; |
||||
font-family: numeralLight; |
||||
&:focus { |
||||
border-radius: 4; |
||||
} |
||||
} |
||||
} |
||||
&__camera { |
||||
// margin-top: 20px; |
||||
width: 100%; |
||||
border-radius: 10px; |
||||
margin: 5px auto; |
||||
position: relative; |
||||
&--shape { |
||||
position: absolute; |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
} |
||||
} |
||||
&__text { |
||||
text-align: justify; |
||||
font-family: numeralMedium; |
||||
color: #4ce1be; |
||||
font-size: calc(100vw / 28); |
||||
} |
||||
&__lasts { |
||||
width: 100%; |
||||
margin: 15px 0px; |
||||
h2 { |
||||
font-family: numeralMedium; |
||||
color: #02a255; |
||||
font-size: calc(100vw / 24); |
||||
margin-bottom: 20px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.qr-scan { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
min-height: calc(100vh - 288px); |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 80px; |
||||
&__back { |
||||
justify-content: flex-start; |
||||
a { |
||||
display: inline; |
||||
font-family: numeralLight; |
||||
text-decoration: none; |
||||
padding: 5px 20px 3px; |
||||
background-color: #00cc69; |
||||
border-radius: 25px; |
||||
font-size: calc(100vw / 70); |
||||
color: white; |
||||
&:focus:enabled { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
&__box { |
||||
width: 100%; |
||||
max-width: 700px; |
||||
&--header { |
||||
width: 100%; |
||||
h1 { |
||||
font-family: numeralMedium; |
||||
color: #00cc69; |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #4d4d4f; |
||||
} |
||||
} |
||||
&--select { |
||||
select { |
||||
margin-top: 10px; |
||||
border-radius: 4px; |
||||
position: relative; |
||||
background-color: #efefef; |
||||
border: 1px solid #a5a5a5; |
||||
font-size: 16px; |
||||
color: black; |
||||
// maxWidth : 70; |
||||
min-width: 80; |
||||
height: 35px; |
||||
padding: 5px; |
||||
font-family: numeralLight; |
||||
&:focus { |
||||
border-radius: 4; |
||||
} |
||||
} |
||||
} |
||||
&--camera { |
||||
margin-top: 20px; |
||||
width: 100%; |
||||
max-width: 300px; |
||||
margin: 0px auto 40px; |
||||
* { |
||||
border-radius: 10px; |
||||
} |
||||
} |
||||
&--text { |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #4d4d4f; |
||||
} |
||||
} |
||||
p { |
||||
font-family: numeralLight; |
||||
color: #4d4d4f; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue