Skip to content

A
Aqbits Trace Code
Commit 75165956 authored by Vinh's avatar Vinh
Browse files
Options

update router

parent 50d0909d
Hide whitespace changes
Inline Side-by-side
Showing with 566 additions and 89 deletions
src/components/Generals/MainBanner.js
View file @ 75165956
...@@ -60,7 +60,7 @@ class MainBanner extends React.Component { ...@@ -60,7 +60,7 @@ class MainBanner extends React.Component {
<Container className="py-lg-md d-flex"> <Container className="py-lg-md d-flex">
<div className="col px-0"> <div className="col px-0">
<Row> <Row>
<Col lg="6"> <Col lg="10">
<h1 className="display-3 text-white"> <h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dùng Mạng xã hội sản phẩm và tiêu dùng
</h1> </h1>
......
src/constans/index.js 0 → 100644
View file @ 75165956
import moment from "moment";
export const formatDateTime = (timeDate) => {
let newDate = moment(new Date(Number(timeDate))).format("DD/MM/YYYY");
return newDate.toString();
}
src/data/index.json 0 → 100644
View file @ 75165956
{
"data": [
{
"id": "d70d1e14-fbb9-4dd3-af84-8247efe74a92",
"code": "KIS",
"name": "Công ty TNHH sáng tạo KIS",
"logo": "/image/logo/kis-academy.jpg",
"address": "Technosoft Số 8 ngõ 15 Duy Tân, Cầu Giấy, Hà Nội",
"phone_number": "0978549632",
"qr_code": "/image/qrcode/qr-code.png",
"created_at": 1624870109921,
"profile_product": [
{
"trace_code": "VNC12345678",
"product_id": "u20d1e14-fbb9-4dd3-af84-8247efe74a92",
"name": "Tôm",
"cost": "Liên hệ",
"origin": "Việt Nam",
"image": "/image/product/tom-su.jpg",
"description": "Tôm sú nước ngọt",
"growing_conditions": "Nuôi trồng tại vùng nguyên liệu tôm, cơ sở chế biến: Tỉnh Trà Vinh",
"product_chain_diary": [
{
"company": "Công ty Vinashin",
"description": "Bắt đầu nuôi trồng",
"date": 1616300741111
},
{
"company": "Công ty Vinashin",
"description": "Thu hoạch",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Thu mua, nhập kho đông lạnh Cần Thơ",
"date": 1626841541222
},
{
"company": "Công ty Coopmart",
"description": "Trưng bày siêu thị",
"date": 1627014341333
},
{
"company": "Công ty Coopmart",
"description": "Bán cho người tiêu dùng",
"date": 1627619141213
}
],
"product_certification": [
{
"certification_information": "Chứng nhận certificate",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
},
{
"certification_information": "Chứng nhận certificate",
"image": "/image/certificate/certificate.jpg",
"date": 1624870109921
}
]
}
]
}
]
}
src/index.js
View file @ 75165956
...@@ -28,11 +28,17 @@ import Landing from "views/examples/Landing.js"; ...@@ -28,11 +28,17 @@ import Landing from "views/examples/Landing.js";
import Login from "views/examples/Login.js"; import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js"; 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"
ReactDOM.render( ReactDOM.render(
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route path="/" exact render={props => <Index {...props} />} /> <Route path="/" exact render={props => <Index {...props} />} />
<Route
path="/trace-code"
exact
render={props => <Tracecode {...props} />}
/>
<Route <Route
path="/landing-page" path="/landing-page"
exact exact
......
src/views/examples/Landing.js
View file @ 75165956
...@@ -41,6 +41,9 @@ import { ...@@ -41,6 +41,9 @@ import {
Col Col
} from "reactstrap"; } from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
// core components // core components
import MainBanner from "components/Generals/MainBanner.js"; import MainBanner from "components/Generals/MainBanner.js";
...@@ -67,9 +70,41 @@ class Landing extends React.Component { ...@@ -67,9 +70,41 @@ class Landing extends React.Component {
[state]: index [state]: index
}); });
}; };
renderTabs = () => { renderProductInfo = (dummyData) => {
let product = dummyData.data[0].profile_product;
product = product[0];
return (
<>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + product.image}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<h3>{product.name}</h3>
<div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
}
renderTabs = (dummyData) => {
let product = dummyData.data[0].profile_product[0];
return ( return (
<> <>
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10"> <Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */} {/* Menu */}
...@@ -90,7 +125,7 @@ class Landing extends React.Component { ...@@ -90,7 +125,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Home Thông tin chung
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
...@@ -103,7 +138,7 @@ class Landing extends React.Component { ...@@ -103,7 +138,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Profile Nhật kí chuỗi
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
...@@ -116,7 +151,7 @@ class Landing extends React.Component { ...@@ -116,7 +151,7 @@ class Landing extends React.Component {
href="#pablo" href="#pablo"
role="tab" role="tab"
> >
Messages Chứng nhận
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
...@@ -126,11 +161,10 @@ class Landing extends React.Component { ...@@ -126,11 +161,10 @@ class Landing extends React.Component {
<TabContent activeTab={"plainTabs" + this.state.plainTabs}> <TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1"> <TabPane tabId="plainTabs1">
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts <div className="h4 font-weight-bold mb-3">{product.name}</div>
Austin. Nesciunt tofu stumptown aliqua, retro synth master <div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
cleanse. Mustache cliche tempor, williamsburg carles vegan <div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
helvetica. Reprehenderit butcher retro keffiyeh <div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
dreamcatcher synth.
</p> </p>
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts Raw denim you probably haven't heard of them jean shorts
...@@ -140,19 +174,25 @@ class Landing extends React.Component { ...@@ -140,19 +174,25 @@ class Landing extends React.Component {
</TabPane> </TabPane>
<TabPane tabId="plainTabs2"> <TabPane tabId="plainTabs2">
<p className="description"> <p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex {product.product_chain_diary.map(diary => (
squid. Aliquip placeat salvia cillum iphone. Seitan <div>
aliquip quis cardigan american apparel, butcher voluptate <div className="h6 mt-3">{diary.company}</div>
nisi qui. <Row className="mb-3">
<Col>{formatDateTime(diary.date)}</Col>
<Col>{diary.description}</Col>
</Row>
</div>
))}
</p> </p>
</TabPane> </TabPane>
<TabPane tabId="plainTabs3"> <TabPane tabId="plainTabs3">
<p className="description"> <p className="description">
Raw denim you probably haven't heard of them jean shorts {product.product_certification.map((certificate) => (
Austin. Nesciunt tofu stumptown aliqua, retro synth master <div>
cleanse. Mustache cliche tempor, williamsburg carles vegan <div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
helvetica. Reprehenderit butcher retro keffiyeh <img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
dreamcatcher synth. </div>
))}
</p> </p>
</TabPane> </TabPane>
</TabContent> </TabContent>
...@@ -169,77 +209,10 @@ class Landing extends React.Component { ...@@ -169,77 +209,10 @@ class Landing extends React.Component {
<DemoNavbar /> <DemoNavbar />
<main ref="main"> <main ref="main">
<MainBanner/> <MainBanner/>
<section className="section bg-secondary"> {this.renderProductInfo(dummyData)}
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={require("assets/img/theme/img-1-1200x1000.jpg")}
top
/>
<blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<h3>Our customers</h3>
<p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section pb-0 bg-gradient-warning"> <section className="section pb-0 bg-gradient-warning">
<Container> <Container>
{this.renderTabs()} {this.renderTabs(dummyData)}
</Container> </Container>
{/* SVG separator */} {/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100"> <div className="separator separator-bottom separator-skew zindex-100">
......
src/views/examples/Tracecode.js 0 → 100644
View file @ 75165956
/*!
=========================================================
* Argon Design System React - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-design-system-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import React from "react";
// nodejs library that concatenates classes
import classnames from "classnames";
// reactstrap components
import {
Badge,
Button,
Card,
CardBody,
CardImg,
FormGroup,
Input,
InputGroupAddon,
InputGroupText,
InputGroup,
Container,
NavItem,
NavLink,
Nav,
TabContent,
TabPane,
Row,
Col
} from "reactstrap";
import { useHistory } from 'react-router-dom';
import dummyData from '../../data/index.json';
import {formatDateTime} from '../../constans/index.js';
// core components
import MainBanner from "components/Generals/MainBanner.js";
import DemoNavbar from "components/Navbars/DemoNavbar.js";
import SimpleFooter from "components/Footers/SimpleFooter.js";
// index page sections
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) => {
e.preventDefault();
this.setState({
[state]: index
});
};
renderProductInfo = (dummyData) => {
let product = dummyData.data[0].profile_product;
product = product[0];
return (
<>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={window.location.origin + product.image}
top
/>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<h3>{product.name}</h3>
<div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
}
renderTabs = (dummyData) => {
let product = dummyData.data[0].profile_product[0];
return (
<>
<Row className="justify-content-center">
<Col className="mt-5 mt-lg-0" lg="10">
{/* Menu */}
<div className="nav-wrapper">
<Nav
className="nav-fill flex-column flex-md-row"
id="tabs-icons-text"
pills
role="tablist"
>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 1}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 1
})}
onClick={e => this.toggleNavs(e, "plainTabs", 1)}
href="#pablo"
role="tab"
>
Thông tin chung
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 2}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 2
})}
onClick={e => this.toggleNavs(e, "plainTabs", 2)}
href="#pablo"
role="tab"
>
Nhật kí chuỗi
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.plainTabs === 3}
className={classnames("mb-sm-3 mb-md-0", {
active: this.state.plainTabs === 3
})}
onClick={e => this.toggleNavs(e, "plainTabs", 3)}
href="#pablo"
role="tab"
>
Chứng nhận
</NavLink>
</NavItem>
</Nav>
</div>
<Card className="shadow">
<CardBody>
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
<div className="h4 font-weight-bold mb-3">{product.name}</div>
<div className="mb-3">Mã sản phẩm <span className="font-weight-bold">{product.trace_code}</span></div>
<div className="mb-3">Xuất xứ <span className="font-weight-bold">{product.origin}</span></div>
<div className="h5 mb-3" style={{ color: '#33CC66' }}>Giá: {product.cost}</div>
</p>
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse.
</p>
</TabPane>
<TabPane tabId="plainTabs2">
<p className="description">
{product.product_chain_diary.map(diary => (
<div>
<div className="h6 mt-3">{diary.company}</div>
<Row className="mb-3">
<Col>{formatDateTime(diary.date)}</Col>
<Col>{diary.description}</Col>
</Row>
</div>
))}
</p>
</TabPane>
<TabPane tabId="plainTabs3">
<p className="description">
{product.product_certification.map((certificate) => (
<div>
<div className="h6 mt-3 mb-3">{certificate.certification_information}</div>
<img src={window.location.origin + certificate.image} alt="certificate" height="250px" />
</div>
))}
</p>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</>
);
}
render() {
return (
<>
<DemoNavbar />
<main ref="main">
<MainBanner/>
{this.renderProductInfo(dummyData)}
<section className="section pb-0 bg-gradient-warning">
<Container>
{this.renderTabs(dummyData)}
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</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>
<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