Skip to content

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

update router

parent 50d0909d
Show 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 {
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="6">
<Col lg="10">
<h1 className="display-3 text-white">
Mạng xã hội sản phẩm và tiêu dùng
</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";
import Login from "views/examples/Login.js";
import Profile from "views/examples/Profile.js";
import Register from "views/examples/Register.js";
import Tracecode from "views/examples/Tracecode.js"
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact render={props => <Index {...props} />} />
<Route
path="/trace-code"
exact
render={props => <Tracecode {...props} />}
/>
<Route
path="/landing-page"
exact
......
src/views/examples/Landing.js
View file @ 75165956
......@@ -41,6 +41,9 @@ import {
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";
......@@ -67,7 +70,39 @@ class Landing extends React.Component {
[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 (
<>
<Row className="justify-content-center">
......@@ -90,7 +125,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Home
Thông tin chung
</NavLink>
</NavItem>
<NavItem>
......@@ -103,7 +138,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Profile
Nhật kí chuỗi
</NavLink>
</NavItem>
<NavItem>
......@@ -116,7 +151,7 @@ class Landing extends React.Component {
href="#pablo"
role="tab"
>
Messages
Chứng nhận
</NavLink>
</NavItem>
</Nav>
......@@ -126,11 +161,10 @@ class Landing extends React.Component {
<TabContent activeTab={"plainTabs" + this.state.plainTabs}>
<TabPane tabId="plainTabs1">
<p className="description">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
<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
......@@ -140,19 +174,25 @@ class Landing extends React.Component {
</TabPane>
<TabPane tabId="plainTabs2">
<p className="description">
Cosby sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher voluptate
nisi qui.
{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">
Raw denim you probably haven't heard of them jean shorts
Austin. Nesciunt tofu stumptown aliqua, retro synth master
cleanse. Mustache cliche tempor, williamsburg carles vegan
helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth.
{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>
......@@ -169,77 +209,10 @@ class Landing extends React.Component {
<DemoNavbar />
<main ref="main">
<MainBanner/>
<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={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>
{this.renderProductInfo(dummyData)}
<section className="section pb-0 bg-gradient-warning">
<Container>
{this.renderTabs()}
{this.renderTabs(dummyData)}
</Container>
{/* SVG separator */}
<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