From d95778674354f955b5e9642daad71f6eb7b5e1f2 Mon Sep 17 00:00:00 2001 From: amir hosein gorji Date: Wed, 29 Sep 2021 07:55:08 +0330 Subject: [PATCH] l --- package.json | 8 +- scripts/start.js | 77 +++--- src/AppRouter.js | 6 +- src/QRScan/History/index.js | 3 + src/QRScan/LastQr/index.js | 45 ++++ src/QRScan/LastQr/index.scss | 46 ++++ src/QRScan/Modal/index.js | 47 ++++ src/QRScan/Modal/index.scss | 92 +++++++ src/QRScan/Scanner/index.js | 57 +++++ src/QRScan/index.js | 242 ++++++++++++++++++ src/QRScan/index.scss | 167 ++++++++++++ src/Redux/reducers/public.js | 1 - src/Redux/reducers/userFactor.js | 1 - src/util/onInput.js | 6 +- src/views/AR/Item/index.js | 1 - src/views/About/index.js | 40 ++- src/views/About/index.scss | 10 +- src/views/Activation/index.js | 10 +- src/views/Auth/Login/Cellphone/index.js | 26 +- src/views/Auth/Profile/Input/index.js | 17 +- .../Auth/Profile/MultipleSelector/index.js | 1 - src/views/Auth/Profile/index.js | 2 - src/views/Blog/BreadCrumb/index.js | 23 +- src/views/Blog/index.js | 9 +- src/views/Cart/Discount/index.js | 1 - src/views/Cart/index.js | 13 +- src/views/Checkout/Table/index.js | 10 +- src/views/Contact/index.js | 12 +- src/views/Download/Item/index.js | 2 +- src/views/Home/Download/index.js | 4 +- src/views/Home/HomeStatic/index.js | 1 - src/views/Home/index.js | 5 +- src/views/MyBooks_old/index.js | 2 - src/views/Orders/index.js | 2 - src/views/Product/AddToCart/index.js | 3 +- src/views/Products/Product/index.js | 2 +- .../VideoBox/React-video-js-player/index.js | 28 +- src/views/QR/VideoBox/index.js | 2 - src/views/Sample/index.js | 11 +- src/views/Support/Upload/index.js | 2 +- src/views/Support/index.js | 3 +- yarn.lock | 11 +- 42 files changed, 857 insertions(+), 194 deletions(-) create mode 100644 src/QRScan/History/index.js create mode 100644 src/QRScan/LastQr/index.js create mode 100644 src/QRScan/LastQr/index.scss create mode 100644 src/QRScan/Modal/index.js create mode 100644 src/QRScan/Modal/index.scss create mode 100644 src/QRScan/Scanner/index.js create mode 100644 src/QRScan/index.js create mode 100644 src/QRScan/index.scss diff --git a/package.json b/package.json index 0e27ab1..df2ed6a 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "material-ui-audio-player": "https://github.com/RezaAshrafi77/material-ui-audio-player.git", "material-ui-player": "^0.2.2", "mini-css-extract-plugin": "0.11.3", + "modern-react-qr-reader": "^1.0.12", "optimize-css-assets-webpack-plugin": "5.0.4", "pdf-viewer-reactjs": "^2.2.3", "pnp-webpack-plugin": "1.6.4", @@ -108,8 +109,9 @@ }, "scripts": { "start": "node scripts/start.js", - "build": "node scripts/build.js", - "test": "node scripts/test.js" + "build": "node scripts/build.js && npm run clean", + "test": "node scripts/test.js", + "clean": "find ./build -name \"*.map\" -type f -delete" }, "eslintConfig": { "extends": [ @@ -196,4 +198,4 @@ ] ] } -} +} \ No newline at end of file diff --git a/scripts/start.js b/scripts/start.js index 92c2671..c6a2215 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -1,39 +1,38 @@ -'use strict'; +"use strict"; // Do this as the first thing so that any code reading it knows the right env. -process.env.BABEL_ENV = 'development'; -process.env.NODE_ENV = 'development'; +process.env.BABEL_ENV = "development"; +process.env.NODE_ENV = "development"; // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. -process.on('unhandledRejection', err => { +process.on("unhandledRejection", (err) => { throw err; }); // Ensure environment variables are read. -require('../config/env'); - - -const fs = require('fs'); -const chalk = require('react-dev-utils/chalk'); -const webpack = require('webpack'); -const WebpackDevServer = require('webpack-dev-server'); -const clearConsole = require('react-dev-utils/clearConsole'); -const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); +require("../config/env"); + +const fs = require("fs"); +const chalk = require("react-dev-utils/chalk"); +const webpack = require("webpack"); +const WebpackDevServer = require("webpack-dev-server"); +const clearConsole = require("react-dev-utils/clearConsole"); +const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles"); const { choosePort, createCompiler, prepareProxy, prepareUrls, -} = require('react-dev-utils/WebpackDevServerUtils'); -const openBrowser = require('react-dev-utils/openBrowser'); -const semver = require('semver'); -const paths = require('../config/paths'); -const configFactory = require('../config/webpack.config'); -const createDevServerConfig = require('../config/webpackDevServer.config'); -const getClientEnvironment = require('../config/env'); -const react = require(require.resolve('react', { paths: [paths.appPath] })); +} = require("react-dev-utils/WebpackDevServerUtils"); +const openBrowser = require("react-dev-utils/openBrowser"); +const semver = require("semver"); +const paths = require("../config/paths"); +const configFactory = require("../config/webpack.config"); +const createDevServerConfig = require("../config/webpackDevServer.config"); +const getClientEnvironment = require("../config/env"); +const react = require(require.resolve("react", { paths: [paths.appPath] })); const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1)); const useYarn = fs.existsSync(paths.yarnLockFile); @@ -46,7 +45,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { // Tools like Cloud9 rely on this. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; -const HOST = process.env.HOST || '0.0.0.0'; +const HOST = process.env.HOST || "0.0.0.0"; if (process.env.HOST) { console.log( @@ -60,32 +59,32 @@ if (process.env.HOST) { `If this was unintentional, check that you haven't mistakenly set it in your shell.` ); console.log( - `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}` + `Learn more here: ${chalk.yellow("https://cra.link/advanced-config")}` ); console.log(); } // We require that you explicitly set browsers and do not fall back to // browserslist defaults. -const { checkBrowsers } = require('react-dev-utils/browsersHelper'); +const { checkBrowsers } = require("react-dev-utils/browsersHelper"); checkBrowsers(paths.appPath, isInteractive) .then(() => { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `choosePort()` Promise resolves to the next free port. return choosePort(HOST, DEFAULT_PORT); }) - .then(port => { + .then((port) => { if (port == null) { // We have not found a port. return; } - const config = configFactory('development'); - const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; + const config = configFactory("development"); + const protocol = process.env.HTTPS === "true" ? "https" : "http"; const appName = require(paths.appPackageJson).name; const useTypeScript = fs.existsSync(paths.appTsConfig); - const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true'; + const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === "true"; const urls = prepareUrls( protocol, HOST, @@ -93,10 +92,10 @@ checkBrowsers(paths.appPath, isInteractive) paths.publicUrlOrPath.slice(0, -1) ); const devSocket = { - warnings: warnings => - devServer.sockWrite(devServer.sockets, 'warnings', warnings), - errors: errors => - devServer.sockWrite(devServer.sockets, 'errors', errors), + warnings: (warnings) => + devServer.sockWrite(devServer.sockets, "warnings", warnings), + errors: (errors) => + devServer.sockWrite(devServer.sockets, "errors", errors), }; // Create a webpack compiler that is configured with custom messages. const compiler = createCompiler({ @@ -123,7 +122,7 @@ checkBrowsers(paths.appPath, isInteractive) ); const devServer = new WebpackDevServer(compiler, serverConfig); // Launch WebpackDevServer. - devServer.listen(port, HOST, err => { + devServer.listen(port, HOST, (err) => { if (err) { return console.log(err); } @@ -131,7 +130,7 @@ checkBrowsers(paths.appPath, isInteractive) clearConsole(); } - if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) { + if (env.raw.FAST_REFRESH && semver.lt(react.version, "16.10.0")) { console.log( chalk.yellow( `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.` @@ -139,26 +138,26 @@ checkBrowsers(paths.appPath, isInteractive) ); } - console.log(chalk.cyan('Starting the development server...\n')); + console.log(chalk.cyan("Starting the development server...\n")); openBrowser(urls.localUrlForBrowser); }); - ['SIGINT', 'SIGTERM'].forEach(function (sig) { + ["SIGINT", "SIGTERM"].forEach(function (sig) { process.on(sig, function () { devServer.close(); process.exit(); }); }); - if (process.env.CI !== 'true') { + if (process.env.CI !== "true") { // Gracefully exit when stdin ends - process.stdin.on('end', function () { + process.stdin.on("end", function () { devServer.close(); process.exit(); }); } }) - .catch(err => { + .catch((err) => { if (err && err.message) { console.log(err.message); } diff --git a/src/AppRouter.js b/src/AppRouter.js index a4a334c..a1e63c4 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -70,7 +70,6 @@ class AppRouter extends Component { render() { const mobile = window.innerWidth < 1000 ? true : false; let status = proxy.status(); - console.log({ status, s: this.props.profile }); const afterLogin = localStorage.getItem("afterLogin"); let home = ( @@ -79,8 +78,6 @@ class AppRouter extends Component { ) : afterLogin ? ( <> - {localStorage.removeItem("afterLogin")} - {console.log("hhhhhhhhhhhhhhhhhhaaaaaaaaa")} + + + diff --git a/src/QRScan/History/index.js b/src/QRScan/History/index.js new file mode 100644 index 0000000..ec3d07f --- /dev/null +++ b/src/QRScan/History/index.js @@ -0,0 +1,3 @@ +import { createBrowserHistory } from "history"; + +export default createBrowserHistory(); diff --git a/src/QRScan/LastQr/index.js b/src/QRScan/LastQr/index.js new file mode 100644 index 0000000..3615974 --- /dev/null +++ b/src/QRScan/LastQr/index.js @@ -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 ?
: null} + {window.innerWidth < 1000 ? ( + +
+ {data.name} +
+ {data.name} + {grades[data.gradeId]} +
+
+
+ +
+ + ) : null} + + ); +} diff --git a/src/QRScan/LastQr/index.scss b/src/QRScan/LastQr/index.scss new file mode 100644 index 0000000..895bbeb --- /dev/null +++ b/src/QRScan/LastQr/index.scss @@ -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; + } + } + } +} diff --git a/src/QRScan/Modal/index.js b/src/QRScan/Modal/index.js new file mode 100644 index 0000000..ef41813 --- /dev/null +++ b/src/QRScan/Modal/index.js @@ -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 ? ( +
+ + اسکن کد QR موفقیت آمیز بود. + + + {tail} + + +
+ ) : ( +
+ + اسکن کد QR موفقیت آمیز بود. + + + {tail} + + +
+ )} + + ); + } +} diff --git a/src/QRScan/Modal/index.scss b/src/QRScan/Modal/index.scss new file mode 100644 index 0000000..2b0aa12 --- /dev/null +++ b/src/QRScan/Modal/index.scss @@ -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; + } +} diff --git a/src/QRScan/Scanner/index.js b/src/QRScan/Scanner/index.js new file mode 100644 index 0000000..0c25ecf --- /dev/null +++ b/src/QRScan/Scanner/index.js @@ -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 ? ( + + ) : null} + {window.innerWidth > 1000 ? ( + + ) : null} + {/*
{facingMode[this.props.parent.state.facingMode]}
+
{(this.state?.devices || []).join(",")}
*/} + + ); + } +} diff --git a/src/QRScan/index.js b/src/QRScan/index.js new file mode 100644 index 0000000..40c2567 --- /dev/null +++ b/src/QRScan/index.js @@ -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 ? ( + <> +
+ +
+
+

نکته

+

+ لطفا دوربین خود را روی کدی که در اختیار شما قرار گرفته قرار + دهید تا اسکن دوربین انجام شود +

+
+ {this.state.cameraIds.length > 1 ? ( +
+ +
+ ) : null} +
+ + this.setState({ + facingMode: (this.state.facingMode + 1) % 2, + }) + } + /> + {this.state.value !== null ? ( +
this.setState({ value: null })} + > + +
+ ) : ( + + )} +
+ {this.state.tail === null ? null : ( + + )} +
+
+