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 Hide 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";
import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.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(
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <Index {...props} />} />
<Route
path="/trace-code"
path="/trace-code/:trace"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path={'/profile/detail'}
path="/profile/:code"
exact
render={props => <DetailProfile {...props} />}
/>
<Route
path="/not-found"
exact
render={props => <NotFound {...props} />}
/>
<Route
path="/landing-page"
exact
......
src/views/Index.js
View file @ 02650eea
......@@ -18,10 +18,12 @@
import React from "react";
// reactstrap components
import { Container, Row } from "reactstrap";
import { Container, Row, Col, Button } from "reactstrap";
// core components
import MainBanner from "components/Generals/MainBanner.js";
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
import CardsFooter from "components/Footers/CardsFooter.js";
// index page sections
......@@ -46,28 +48,214 @@ import Icons from "./IndexSections/Icons.js";
import Login from "./IndexSections/Login.js";
import Download from "./IndexSections/Download.js";
class Index extends React.Component {
componentDidMount() {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0;
}
render() {
const Index = () => {
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
// render() {
return (
<>
<DemoNavbar />
<main ref="main">
<Hero />
<main>
<MainBanner />
<section className="section">
<Container>
<Inputs />
</Container>
</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>
<CardsFooter />
<SimpleFooter />
</>
);
}
// }
}
export default Index;
src/views/IndexSections/Inputs.js
View file @ 02650eea
......@@ -45,67 +45,67 @@ const Inputs = () => {
}
const onHandleSearch = () => {
console.log("dummyData.data", dummyData.data);
const nameCode = dummyData.data.map(item => item.code);
console.log("nameCode", nameCode);
if(searchProfile === nameCode){
const checkSearch = nameCode.indexOf(searchProfile);
console.log("checkSearch", checkSearch);
if(checkSearch !== -1){
history.push({
pathname: Routes.SearchProfile.path + `${searchProfile}`,
pathname: `/profile/${searchProfile}`,
state: { code_name: searchProfile }
});
}else {
history.push("");
history.push("/not-found");
}
console.log("this.state.searchProfile", searchProfile);
}
return (
<>
<section className="section pb-0 section-components">
<Container className="mb-5">
{/* 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">
<small className="text-uppercase font-weight-bold">
Form controls
</small>
</div> */}
<Row>
<Form className="justify-content-center">
<FormGroup
// className={classnames({
// focused: this.state.searchFocused
// })}
>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
// onFocus={e => this.setState({ searchFocused: true })}
// onBlur={e => this.setState({ searchFocused: false })}
value={searchProfile}
onChange={handleChangeSearch}
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} >
Search
</Button>
</div>
</Form>
{/* <Row className="justify-content-center">
<Col lg="4" sm="6">
{/* <FormGroup>
<FormGroup>
<Input placeholder="Regular" type="text" />
</FormGroup> */}
<FormGroup
// className={classnames({
// focused: this.state.searchFocused
// })}
>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
// onFocus={e => this.setState({ searchFocused: true })}
// onBlur={e => this.setState({ searchFocused: false })}
value={searchProfile}
onChange={handleChangeSearch}
/>
</InputGroup>
</FormGroup>
<Button className="btn-1" color="primary" type="button" onClick={onHandleSearch} >
Search
</Button>
</FormGroup>
</Col>
{/* <Col lg="4" sm="6">
<Col lg="4" sm="6">
<FormGroup>
<Input disabled placeholder="Regular" type="text" />
</FormGroup>
......@@ -144,8 +144,8 @@ const Inputs = () => {
type="email"
/>
</FormGroup>
</Col> */}
</Row>
</Col>
</Row> */}
</Container>
{/* <div className="py-5 bg-secondary">
<Container>
......
src/views/examples/DetailProfile.js
View file @ 02650eea
......@@ -36,32 +36,35 @@ import {
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import QRCode from 'react-qr-code';
import { Routes } from '../../reoutes';
// core components
import MainBanner from "components/Generals/MainBanner.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";
// index page sections
import Download from "../IndexSections/Download.js";
class DetailProfile extends React.Component {
state = {};
componentDidMount() {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0;
}
render() {
// const history = useHistory();
const DetailProfile = () => {
// state = {};
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
// render() {
const history = useHistory();
return (
<>
<DemoNavbar />
<main ref="main">
<main>
<MainBanner />
<div className="position-relative">
{/* 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">
<span />
<span />
......@@ -75,8 +78,8 @@ class DetailProfile extends React.Component {
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<h3 className="h4 text-center font-weight-bold mb-4">Search profile</h3>
{/* <Row>
<h3 className="h4 text-center font-weight-bold mb-4">Detail profile</h3>
<Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
......@@ -112,10 +115,10 @@ class DetailProfile extends React.Component {
</Button>
</div>
</Col>
</Row> */}
</Row>
</div>
</Container>
{/* SVG separator */}
SVG separator
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
......@@ -131,7 +134,7 @@ class DetailProfile extends React.Component {
/>
</svg>
</div>
</section>
</section> */}
{/* 1st Hero Variation */}
</div>
{/* <section className="section section-lg pt-lg-0 mt--200">
......@@ -389,10 +392,12 @@ class DetailProfile extends React.Component {
<div className="h5">Sản phẩm</div>
<div>{data.profile_product && data.profile_product.length > 0 ? data.profile_product.map(product => {
const onHandleTraceCode = () => {
// history.push({
// pathname: Routes.TraceCode.path + `/${product.trace_code}`,
// state: { product }
// });
console.log("product", product);
console.log("click");
history.push({
pathname: `/trace-code/${product.trace_code}`,
state: { product }
});
}
return (
<>
......@@ -403,7 +408,7 @@ class DetailProfile extends React.Component {
<img className="mb-3" src={window.location.origin + product.image} alt="product" onClick={onHandleTraceCode} />
</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>
</Row>
</div>
......@@ -550,7 +555,7 @@ class DetailProfile extends React.Component {
</svg>
</div>
</section> */}
{/* <section className="section section-lg">
<section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
......@@ -735,7 +740,7 @@ class DetailProfile extends React.Component {
</Col>
</Row>
</Container>
</section> */}
</section>
{/* <section className="section section-lg pt-0">
<Container>
<Card className="bg-gradient-warning shadow-lg border-0">
......@@ -907,10 +912,10 @@ class DetailProfile extends React.Component {
</section> */}
{/* <Download /> */}
</main>
<CardsFooter />
<SimpleFooter />
</>
);
}
//}
}
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 @@
* 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
import classnames from "classnames";
......@@ -55,24 +55,32 @@ import SimpleFooter from "components/Footers/SimpleFooter.js";
import Download from "../IndexSections/Download.js";
import Tabs from "../IndexSections/Tabs.js";
class Tracecode extends React.Component {
state = {
plainTabs: 1
};
componentDidMount() {
document.documentElement.scrollTop = 0;
document.scrollingElement.scrollTop = 0;
this.refs.main.scrollTop = 0;
}
toggleNavs = (e, state, index) => {
const Tracecode = () => {
const [plainTabs, setPlainTabs] = useState(1);
// state = {
// plainTabs: 1
// };
// componentDidMount() {
// document.documentElement.scrollTop = 0;
// document.scrollingElement.scrollTop = 0;
// this.refs.main.scrollTop = 0;
// }
const toggleNavs = (e, index) => {
e.preventDefault();
this.setState({
[state]: index
});
setPlainTabs(index);
// this.setState({
// [state]: index
// });
};
renderProductInfo = (dummyData) => {
let product = dummyData.data[0].profile_product;
product = product[0];
const history = useHistory();
let state = { ...history.location.state };
const product = state.product;
const renderProductInfo = (product) => {
// let product = dummyData.data[0].profile_product;
// product = product[0];
return (
<>
<section className="section bg-secondary">
......@@ -101,8 +109,7 @@ class Tracecode extends React.Component {
</>
);
}
renderTabs = (dummyData) => {
let product = dummyData.data[0].profile_product[0];
const renderTabs = (product) => {
return (
<>
<Row className="justify-content-center">
......@@ -117,11 +124,11 @@ class Tracecode extends React.Component {
>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 1}
aria-selected={plainTabs === 1}
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"
role="tab"
>
......@@ -130,11 +137,11 @@ class Tracecode extends React.Component {
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 2}
aria-selected={plainTabs === 2}
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"
role="tab"
>
......@@ -143,11 +150,11 @@ class Tracecode extends React.Component {
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 3}
aria-selected={plainTabs === 3}
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"
role="tab"
>
......@@ -158,7 +165,7 @@ class Tracecode extends React.Component {
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabContent activeTab={"plainTabs" + plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
<div className="h4 font-weight-bold mb-3">{product.name}</div>
......@@ -203,16 +210,16 @@ class Tracecode extends React.Component {
</>
);
}
render() {
// render() {
return (
<>
<DemoNavbar />
<main ref="main">
<main>
<MainBanner/>
{this.renderProductInfo(dummyData)}
{renderProductInfo(product)}
<section className="section pb-0 bg-gradient-warning">
<Container>
{this.renderTabs(dummyData)}
{renderTabs(product)}
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
......@@ -421,7 +428,7 @@ class Tracecode extends React.Component {
<SimpleFooter/>
</>
);
}
//}
}
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