Skip to content

A
Aqbits Trace Code
Commit 02650eea authored by Mai Thanh Cong's avatar Mai Thanh Cong
Browse files
Options

create not found page

parent 850d7b56
Expand all Show whitespace changes
Inline Side-by-side
Showing with 598 additions and 115 deletions
public/image/home-page/not-found-404.svg 0 → 100644
View file @ 02650eea
This diff is collapsed.
src/index.js
View file @ 02650eea
...@@ -30,22 +30,28 @@ import Profile from "views/examples/Profile.js"; ...@@ -30,22 +30,28 @@ import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js"; import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js" import Tracecode from "views/examples/Tracecode.js"
import DetailProfile from "views/examples/DetailProfile.js" import DetailProfile from "views/examples/DetailProfile.js"
import { Routes } from "./reoutes"; import NotFound from "views/examples/NotFound.js"
// import { Routes } from "./reoutes";
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/" exact render={props => <Index {...props} />} /> <Route path="/" exact render={props => <Index {...props} />} />
<Route <Route
path="/trace-code" path="/trace-code/:trace"
exact exact
render={props => <Tracecode {...props} />} render={props => <Tracecode {...props} />}
/> />
<Route <Route
path={'/profile/detail'} path="/profile/:code"
exact exact
render={props => <DetailProfile {...props} />} render={props => <DetailProfile {...props} />}
/> />
<Route
path="/not-found"
exact
render={props => <NotFound {...props} />}
/>
<Route <Route
path="/landing-page" path="/landing-page"
exact exact
......
src/views/Index.js
View file @ 02650eea
...@@ -18,10 +18,12 @@ ...@@ -18,10 +18,12 @@
import React from "react"; import React from "react";
// reactstrap components // reactstrap components
import { Container, Row } from "reactstrap"; import { Container, Row, Col, Button } from "reactstrap";
// core components // core components
import MainBanner from "components/Generals/MainBanner.js";
import DemoNavbar from "components/Navbars/DemoNavbar.js"; import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import CardsFooter from "components/Footers/CardsFooter.js"; import CardsFooter from "components/Footers/CardsFooter.js";
// index page sections // index page sections
...@@ -46,28 +48,214 @@ import Icons from "./IndexSections/Icons.js"; ...@@ -46,28 +48,214 @@ import Icons from "./IndexSections/Icons.js";
import Login from "./IndexSections/Login.js"; import Login from "./IndexSections/Login.js";
import Download from "./IndexSections/Download.js"; import Download from "./IndexSections/Download.js";
class Index extends React.Component { const Index = () => {
componentDidMount() { // componentDidMount() {
document.documentElement.scrollTop = 0; // document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0; // document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0; // this.refs.main.scrollTop = 0;
} // }
render() { // render() {
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
<main ref="main"> <main>
<Hero /> <MainBanner />
<section className="section"> <section className="section">
<Container> <Container>
<Inputs /> <Inputs />
</Container> </Container>
</section> </section>
<section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section>
</main> </main>
<CardsFooter /> <SimpleFooter />
</> </>
); );
} // }
} }
export default Index; export default Index;
src/views/IndexSections/Inputs.js
View file @ 02650eea
...@@ -45,39 +45,32 @@ const Inputs = () => { ...@@ -45,39 +45,32 @@ const Inputs = () => {
} }
const onHandleSearch = () => { const onHandleSearch = () => {
console.log("dummyData.data", dummyData.data);
const nameCode = dummyData.data.map(item => item.code); const nameCode = dummyData.data.map(item => item.code);
console.log("nameCode", nameCode); console.log("nameCode", nameCode);
if(searchProfile === nameCode){ const checkSearch = nameCode.indexOf(searchProfile);
console.log("checkSearch", checkSearch);
if(checkSearch !== -1){
history.push({ history.push({
pathname: Routes.SearchProfile.path + `${searchProfile}`, pathname: `/profile/${searchProfile}`,
state: { code_name: searchProfile } state: { code_name: searchProfile }
}); });
}else { }else {
history.push(""); history.push("/not-found");
} }
console.log("this.state.searchProfile", searchProfile);
} }
return ( return (
<> <>
<section className="section pb-0 section-components"> <section className="section pb-0 section-components">
<Container className="mb-5"> <Container className="mb-5">
{/* Inputs */} {/* Inputs */}
<h3 className="h4 text-success font-weight-bold mb-4">Search profile</h3> <h3 className="h4 text-success font-weight-bold mb-4 text-center">Search profile</h3>
{/* <div className="mb-3"> {/* <div className="mb-3">
<small className="text-uppercase font-weight-bold"> <small className="text-uppercase font-weight-bold">
Form controls Form controls
</small> </small>
</div> */} </div> */}
<Row> <Form className="justify-content-center">
<Col lg="4" sm="6">
{/* <FormGroup>
<Input placeholder="Regular" type="text" />
</FormGroup> */}
<FormGroup <FormGroup
// className={classnames({ // className={classnames({
// focused: this.state.searchFocused // focused: this.state.searchFocused
...@@ -99,13 +92,20 @@ const Inputs = () => { ...@@ -99,13 +92,20 @@ const Inputs = () => {
/> />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<div className="text-center">
<Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} > <Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} >
Search Search
</Button> </Button>
</div>
</Form>
{/* <Row className="justify-content-center">
<Col lg="4" sm="6">
<FormGroup>
<Input placeholder="Regular" type="text" />
</FormGroup>
</Col> </Col>
{/* <Col lg="4" sm="6"> <Col lg="4" sm="6">
<FormGroup> <FormGroup>
<Input disabled placeholder="Regular" type="text" /> <Input disabled placeholder="Regular" type="text" />
</FormGroup> </FormGroup>
...@@ -144,8 +144,8 @@ const Inputs = () => { ...@@ -144,8 +144,8 @@ const Inputs = () => {
type="email" type="email"
/> />
</FormGroup> </FormGroup>
</Col> */} </Col>
</Row> </Row> */}
</Container> </Container>
{/* <div className="py-5 bg-secondary"> {/* <div className="py-5 bg-secondary">
<Container> <Container>
......
src/views/examples/DetailProfile.js
View file @ 02650eea
...@@ -36,32 +36,35 @@ import { ...@@ -36,32 +36,35 @@ import {
Col Col
} from "reactstrap"; } from "reactstrap";
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import QRCode from 'react-qr-code';
import { Routes } from '../../reoutes'; import { Routes } from '../../reoutes';
// core components // core components
import MainBanner from "components/Generals/MainBanner.js";
import DemoNavbar from "components/Navbars/DemoNavbar.js"; import DemoNavbar from "components/Navbars/DemoNavbar.js";
import CardsFooter from "components/Footers/CardsFooter.js"; import SimpleFooter from "components/Footers/SimpleFooter.js";
import dummyData from "data/index.json"; import dummyData from "data/index.json";
// index page sections // index page sections
import Download from "../IndexSections/Download.js"; import Download from "../IndexSections/Download.js";
class DetailProfile extends React.Component { const DetailProfile = () => {
state = {}; // state = {};
componentDidMount() { // componentDidMount() {
document.documentElement.scrollTop = 0; // document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0; // document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0; // this.refs.main.scrollTop = 0;
} // }
render() { // render() {
// const history = useHistory(); const history = useHistory();
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
<main ref="main"> <main>
<MainBanner />
<div className="position-relative"> <div className="position-relative">
{/* shape Hero */} {/* shape Hero */}
<section className="section section-lg section-shaped pb-250"> {/* <section className="section section-lg section-shaped pb-250">
<div className="shape shape-style-1 shape-default"> <div className="shape shape-style-1 shape-default">
<span /> <span />
<span /> <span />
...@@ -75,8 +78,8 @@ class DetailProfile extends React.Component { ...@@ -75,8 +78,8 @@ class DetailProfile extends React.Component {
</div> </div>
<Container className="py-lg-md d-flex"> <Container className="py-lg-md d-flex">
<div className="col px-0"> <div className="col px-0">
<h3 className="h4 text-center font-weight-bold mb-4">Search profile</h3> <h3 className="h4 text-center font-weight-bold mb-4">Detail profile</h3>
{/* <Row> <Row>
<Col lg="6"> <Col lg="6">
<h1 className="display-3 text-white"> <h1 className="display-3 text-white">
A beautiful Design System{" "} A beautiful Design System{" "}
...@@ -112,10 +115,10 @@ class DetailProfile extends React.Component { ...@@ -112,10 +115,10 @@ class DetailProfile extends React.Component {
</Button> </Button>
</div> </div>
</Col> </Col>
</Row> */} </Row>
</div> </div>
</Container> </Container>
{/* SVG separator */} SVG separator
<div className="separator separator-bottom separator-skew"> <div className="separator separator-bottom separator-skew">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -131,7 +134,7 @@ class DetailProfile extends React.Component { ...@@ -131,7 +134,7 @@ class DetailProfile extends React.Component {
/> />
</svg> </svg>
</div> </div>
</section> </section> */}
{/* 1st Hero Variation */} {/* 1st Hero Variation */}
</div> </div>
{/* <section className="section section-lg pt-lg-0 mt--200"> {/* <section className="section section-lg pt-lg-0 mt--200">
...@@ -389,10 +392,12 @@ class DetailProfile extends React.Component { ...@@ -389,10 +392,12 @@ class DetailProfile extends React.Component {
<div className="h5">Sản phẩm</div> <div className="h5">Sản phẩm</div>
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => { <div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => { const onHandleTraceCode = () => {
// history.push({ console.log("product", product);
// pathname: Routes.TraceCode.path + `/${product.trace_code}`, console.log("click");
// state: { product } history.push({
// }); pathname: `/trace-code/${product.trace_code}`,
state: { product }
});
} }
return ( return (
<> <>
...@@ -403,7 +408,7 @@ class DetailProfile extends React.Component { ...@@ -403,7 +408,7 @@ class DetailProfile extends React.Component {
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} /> <img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
</Col> </Col>
<Col> <Col>
<img src={window.location.origin + data.qr_code} alt="qrcode" /> <QRCode value={`http://trace.aqbits.net/trace-code/${product.trace_code}`} size={160} />
</Col> </Col>
</Row> </Row>
</div> </div>
...@@ -550,7 +555,7 @@ class DetailProfile extends React.Component { ...@@ -550,7 +555,7 @@ class DetailProfile extends React.Component {
</svg> </svg>
</div> </div>
</section> */} </section> */}
{/* <section className="section section-lg"> <section className="section section-lg">
<Container> <Container>
<Row className="justify-content-center text-center mb-lg"> <Row className="justify-content-center text-center mb-lg">
<Col lg="8"> <Col lg="8">
...@@ -735,7 +740,7 @@ class DetailProfile extends React.Component { ...@@ -735,7 +740,7 @@ class DetailProfile extends React.Component {
</Col> </Col>
</Row> </Row>
</Container> </Container>
</section> */} </section>
{/* <section className="section section-lg pt-0"> {/* <section className="section section-lg pt-0">
<Container> <Container>
<Card className="bg-gradient-warning shadow-lg border-0"> <Card className="bg-gradient-warning shadow-lg border-0">
...@@ -907,10 +912,10 @@ class DetailProfile extends React.Component { ...@@ -907,10 +912,10 @@ class DetailProfile extends React.Component {
</section> */} </section> */}
{/* <Download /> */} {/* <Download /> */}
</main> </main>
<CardsFooter /> <SimpleFooter />
</> </>
); );
} //}
} }
export default DetailProfile; export default DetailProfile;
......
src/views/examples/NotFound.js 0 → 100644
View file @ 02650eea
import React from "react";
import { useHistory } from "react-router";
import { Button } from "reactstrap";
const NotFound = () => {
const urlImage = "/image/home-page/not-found-404.svg";
const history = useHistory();
const onHandleBack = () => {
history.push("/");
}
return (
<div className="text-center">
<img src={window.location.origin + urlImage} alt="not-found" width="500" height="500" />
<div className="h2 font-weight-bold mb-5">Không tìm thấy trang</div>
<Button className="btn-1" color="primary" type="button" onClick={onHandleBack}>
Quay lai trang tìm kiếm
</Button>
</div>
);
}
export default NotFound;
\ No newline at end of file
src/views/examples/Tracecode.js
View file @ 02650eea
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/ */
import React from "react"; import React, { useState } from "react";
// nodejs library that concatenates classes // nodejs library that concatenates classes
import classnames from "classnames"; import classnames from "classnames";
...@@ -55,24 +55,32 @@ import SimpleFooter from "components/Footers/SimpleFooter.js"; ...@@ -55,24 +55,32 @@ import SimpleFooter from "components/Footers/SimpleFooter.js";
import Download from "../IndexSections/Download.js"; import Download from "../IndexSections/Download.js";
import Tabs from "../IndexSections/Tabs.js"; import Tabs from "../IndexSections/Tabs.js";
class Tracecode extends React.Component { const Tracecode = () => {
state = { const [plainTabs, setPlainTabs] = useState(1);
plainTabs: 1 // state = {
}; // plainTabs: 1
componentDidMount() { // };
document.documentElement.scrollTop = 0; // componentDidMount() {
document.scrollingElement.scrollTop = 0; // document.documentElement.scrollTop = 0;
this.refs.main.scrollTop = 0; // document.scrollingElement.scrollTop = 0;
} // this.refs.main.scrollTop = 0;
toggleNavs = (e, state, index) => { // }
const toggleNavs = (e, index) => {
e.preventDefault(); e.preventDefault();
this.setState({ setPlainTabs(index);
[state]: index // this.setState({
}); // [state]: index
// });
}; };
renderProductInfo = (dummyData) => { const history = useHistory();
let product = dummyData.data[0].profile_product; let state = { ...history.location.state };
product = product[0]; const product = state.product;
const renderProductInfo = (product) => {
// let product = dummyData.data[0].profile_product;
// product = product[0];
return ( return (
<> <>
<section className="section bg-secondary"> <section className="section bg-secondary">
...@@ -101,8 +109,7 @@ class Tracecode extends React.Component { ...@@ -101,8 +109,7 @@ class Tracecode extends React.Component {
</> </>
); );
} }
renderTabs = (dummyData) => { const renderTabs = (product) => {
let product = dummyData.data[0].profile_product[0];
return ( return (
<> <>
<Row className="justify-content-center"> <Row className="justify-content-center">
...@@ -117,11 +124,11 @@ class Tracecode extends React.Component { ...@@ -117,11 +124,11 @@ class Tracecode extends React.Component {
> >
<NavItem> <NavItem>
<NavLink <NavLink
aria-selected={this.state.plainTabs === 1} aria-selected={plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", { className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 1 active: plainTabs === 1
})} })}
onClick={e => this.toggleNavs(e, "plainTabs", 1)} onClick={e => toggleNavs(e, 1)}
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
...@@ -130,11 +137,11 @@ class Tracecode extends React.Component { ...@@ -130,11 +137,11 @@ class Tracecode extends React.Component {
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink <NavLink
aria-selected={this.state.plainTabs === 2} aria-selected={plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", { className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 2 active: plainTabs === 2
})} })}
onClick={e => this.toggleNavs(e, "plainTabs", 2)} onClick={e => toggleNavs(e, 2)}
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
...@@ -143,11 +150,11 @@ class Tracecode extends React.Component { ...@@ -143,11 +150,11 @@ class Tracecode extends React.Component {
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink <NavLink
aria-selected={this.state.plainTabs === 3} aria-selected={plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", { className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 3 active: plainTabs === 3
})} })}
onClick={e => this.toggleNavs(e, "plainTabs", 3)} onClick={e => toggleNavs(e, 3)}
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
...@@ -158,7 +165,7 @@ class Tracecode extends React.Component { ...@@ -158,7 +165,7 @@ class Tracecode extends React.Component {
</div> </div>
<Card className="shadow"> <Card className="shadow">
<CardBody> <CardBody>
<TabContent activeTab={"plainTabs" + this.state.plainTabs}> <TabContent activeTab={"plainTabs" + plainTabs}>
<TabPane tabId="plainTabs1"> <TabPane tabId="plainTabs1">
<p className="description"> <p className="description">
<div className="h4 font-weight-bold mb-3">{product.name}</div> <div className="h4 font-weight-bold mb-3">{product.name}</div>
...@@ -203,16 +210,16 @@ class Tracecode extends React.Component { ...@@ -203,16 +210,16 @@ class Tracecode extends React.Component {
</> </>
); );
} }
render() { // render() {
return ( return (
<> <>
<DemoNavbar /> <DemoNavbar />
<main ref="main"> <main>
<MainBanner/> <MainBanner/>
{this.renderProductInfo(dummyData)} {renderProductInfo(product)}
<section className="section pb-0 bg-gradient-warning"> <section className="section pb-0 bg-gradient-warning">
<Container> <Container>
{this.renderTabs(dummyData)} {renderTabs(product)}
</Container> </Container>
{/* SVG separator */} {/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100"> <div className="separator separator-bottom separator-skew zindex-100">
...@@ -421,7 +428,7 @@ class Tracecode extends React.Component { ...@@ -421,7 +428,7 @@ class Tracecode extends React.Component {
<SimpleFooter/> <SimpleFooter/>
</> </>
); );
} //}
} }
export default Tracecode; export default Tracecode;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment