yusmar
/
tbg-ecomm-nextjs
1
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

add product api

master
Yusmardianto 4 anos atrás
pai
15a4297b56
commit
ec1894a6cb
16 arquivos alterados com 414 adições e 778 exclusões
Visão unificada
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +39
    -10
      api/product/product.js
  2. +3
    -3
      components/PageChange/PageChange.js
  3. +0
    -493
      pages-sections/SectionProduct.js
  4. +0
    -192
      pages-sections/SectionProductDetail.js
  5. +4
    -17
      pages-sections/home/business_partner.js
  6. +10
    -16
      pages-sections/home/service.js
  7. +26
    -35
      pages-sections/latest_news/news.js
  8. +115
    -0
      pages-sections/product/product.js
  9. +152
    -0
      pages-sections/product/product_details.js
  10. +1
    -1
      pages-sections/snackbar.js
  11. +1
    -1
      pages/_error.js
  12. +33
    -0
      pages/api/product/get.js
  13. +0
    -2
      pages/home.js
  14. +1
    -1
      pages/index.js
  15. +7
    -4
      pages/product.js
  16. +22
    -3
      pages/product_detail.js

+ 39
- 10
api/product/product.js Ver arquivo

@@ -3,16 +3,44 @@ import apollo from "../../lib/apollo.js";
async function GetProduct(token="") { async function GetProduct(token="") {
var res = await apollo.query( var res = await apollo.query(
` `
query{
products
{
name
description
img{
id
}
}
} `,
query{
products{
id
name
price
description
img{
url
}
business_partner
{
name
}
}
} `,
token
);
return res;
}

async function GetDetailProduct(token="") {
var res = await apollo.query(
`
query{
products
{
name
price
description
img{
url
}
business_partner
{
name
}
}
} `,
token token
); );
return res; return res;
@@ -20,4 +48,5 @@ async function GetProduct(token="") {


module.exports = { module.exports = {
GetProduct: GetProduct, GetProduct: GetProduct,
GetDetailProduct:GetDetailProduct,
}; };

+ 3
- 3
components/PageChange/PageChange.js Ver arquivo

@@ -39,10 +39,10 @@ export default function PageChange(props) {
<div className={classes.iconWrapper}> <div className={classes.iconWrapper}>
<CircularProgress className={classes.progress} /> <CircularProgress className={classes.progress} />
</div> </div>
<h4 className={classes.title}>
Thamrin Group
</h4>
<div align="center">
<img href="https://automotive.thamrin.co.id/wp-content/uploads/2019/07/logo-thamrin-group.png" />
</div> </div>
</div> </div>
</div>
); );
} }

+ 0
- 493
pages-sections/SectionProduct.js Ver arquivo

@@ -1,493 +0,0 @@
import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

const useStyles = makeStyles(styles);

const Product = function ({ product, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
return (
<Card className={classes.textCenter}>
<div align="center">
<CardHeader color="info">Product</CardHeader>
</div>
<CardBody>
<div align="center">
<h2>Product & Facilities</h2>
</div>
<GridContainer justify="center">
<GridItem>
<NavPills
alignCenter
color="primary"
tabs={[
{
tabButton: "Yamaha",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
className={navImageClasses}
/>
<div align="center">
<h2><a href="/product_detail">ALL NEW NMAX STANDART VERSION</a></h2>
<h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
className={navImageClasses}
/>
<div align="center">
<h2>AEROX 155 VVA</h2>
<h4>Rp.25.927.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
className={navImageClasses}
/>
<div align="center">
<h2>AEROX 155 VVA R – VERSION</h2>
<h4>Rp.27.110.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
className={navImageClasses}
/>
<div align="center">
<h2>AEROX 155 VVA S – VERSION</h2>
<h4>Rp.29.744.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
className={navImageClasses}
/>
<div align="center">
<h2>NMAX ABS / NON ABS 155</h2>
<h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
className={navImageClasses}
/>
<div align="center">
<h2>FINO 125 SPORTY / PREMIUM</h2>
<h4>Rp.19.335.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
className={navImageClasses}
/>
<div align="center">
<h2>FINO GRANDE 125</h2>
<h4>Rp.20.155.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
className={navImageClasses}
/>
<div align="center">
<h2>MIO S</h2>
<h4>Rp.18.472.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
className={navImageClasses}
/>
<div align="center">
<h2>NEW MIO M3 125 CW</h2>
<h4>Rp.17.903.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png"
className={navImageClasses}
/>
<div align="center">
<h2>NEW MIO M3 AKS SSS</h2>
<h4>Rp. 18.000.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png"
className={navImageClasses}
/>
<div align="center">
<h2>ALL NEW X-RIDE 125</h2>
<h4>Rp. 19.250.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png"
className={navImageClasses}
/>
<div align="center">
<h2>MIO Z</h2>
<h4>Rp. 17.570.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png"
className={navImageClasses}
/>
<div align="center">
<h2>MX KING 150</h2>
<h4>Rp. 23.425.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png"
className={navImageClasses}
/>
<div align="center">
<h2>NEW JUPITER MX 150</h2>
<h4>Rp. 20.825.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg"
className={navImageClasses}
/>
<div align="center">
<h2>JUPITER Z1</h2>
<h4>Rp. 18.600.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png"
className={navImageClasses}
/>
<div align="center">
<h2>VEGA FORCE CW</h2>
<h4>Rp. 16.825.000,00</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
style={{
height: "350px",
width: "100%",
display: "block",
}}
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
className={navImageClasses}
/>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Suzuki",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
</GridContainer>
),
},
{
tabButton: "Honda",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">

</GridContainer>
),
},
{
tabButton: "Mercedes Benz",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
</GridContainer>
),
},
]}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter className={classes.textMuted} textAlign="center">
© 2020 , All Right Reserved by @Thamrin Brother Company
</CardFooter>
</Card>
);
}

export default Product;

+ 0
- 192
pages-sections/SectionProductDetail.js Ver arquivo

@@ -1,192 +0,0 @@
import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Carousel from "react-slick";
import Paper from '@material-ui/core/Paper';


import image1 from "assets/img/bg.jpg";
import image2 from "assets/img/bg2.png";
import image3 from "assets/img/bg3.jpg";

const useStyles = makeStyles(styles);

export default function ProfilePage(props) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false
};
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
return (
<Card className={classes.textCenter}>
<div align="center">
<CardHeader color="info">Product Detail</CardHeader>
</div>
<CardBody>
<GridContainer justify="center">
<Grid align="center" className={classes.marginAuto}>
<div className={classes.section}>
<div className={classes.container}>
<Card carousel style={{width:"700px", height:"400px"}}>
<Carousel {...settings}>
<div>
<img src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" width="300px" height="400px" alt="First slide" className="slick-image" />
</div>
<div>
<img src={image2} alt="Second slide" className="slick-image"/>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
</div>
</Carousel>
</Card>
</div>
</div>
</Grid>
<Grid style={{padding:"40px", marginTop:"-30px"}}>
<h3>ALL NEW NMAX STANDART VERSION</h3>
<h3>Rp.37.692.000,00</h3>
<hr></hr>
<GridContainer justify="center">
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/2zTfxFltlPOYe5sMFapR-BLUE-CORE-color.png"
/>
</Card>
</Grid>
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/3JWFNLBpLj2ff7JgaSEC-VVA1.png"
/>
</Card>
</Grid>
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/ku13WjySzEsj6LarGvlb-155-CC.png"
/>
</Card>
</Grid>
</GridContainer>
<GridContainer justify="center">
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/20200402085616smc40j.png"
/>
</Card>
</Grid>
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/amoV2O00jXseztcZ8ilV-smg.png"
/>
</Card>
</Grid>
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
<img src="https://www.yamaha-motor.co.id/uploads/products/201912031806276ll9i9.png"
/>
</Card>
</Grid>
</GridContainer>
</Grid>
</GridContainer>
<GridContainer style={{marginTop:"-80px"}}>
<GridItem>
<NavPills
color="primary"
tabs={[
{
tabButton: "Overview",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Specification",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Accessories",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Film",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Credit Simulation",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Test Drive",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
]}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter className={classes.textMuted} textAlign="center">
© 2020 , All Right Reserved by @Thamrin Brother Company
</CardFooter>
</Card>
);
}

+ 4
- 17
pages-sections/home/business_partner.js Ver arquivo

@@ -14,13 +14,14 @@ const DataBusinessPartner = function ({ backend, businessPartners, ...props })
const classes = useStyles(); const classes = useStyles();
const BusinessPartners = businessPartners.map((data) => { const BusinessPartners = businessPartners.map((data) => {
return ( return (
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Card style={{width: "20rem"}}> <Card style={{width: "20rem"}}>
<div align="center"> <div align="center">
<img <img
style={{padding:"20px", height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/> style={{padding:"20px", height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
</div> </div>
{/* src={`${variablebackenduri}/${data.img[0]["url"]}`} */}
</Card>
</Card>
</Grid>
); );
}) })
return ( return (
@@ -30,21 +31,7 @@ const DataBusinessPartner = function ({ backend, businessPartners, ...props })
</div> </div>
<div> <div>
<GridContainer justify="center"> <GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[0]}
{BusinessPartners[3]}
{BusinessPartners[6]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[1]}
{BusinessPartners[4]}
{BusinessPartners[7]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[2]}
{BusinessPartners[5]}
{BusinessPartners[8]}
</Grid>
{BusinessPartners}
</GridContainer> </GridContainer>
</div> </div>
</div> </div>


+ 10
- 16
pages-sections/home/service.js Ver arquivo

@@ -13,12 +13,14 @@ const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props }) { const DataService = function ({ backend, service, ...props }) {
const classes = useStyles(); const classes = useStyles();
const services = service.map((data, index) => ( const services = service.map((data, index) => (
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
</div>
</Card>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
</div>
</Card>
</Grid>
)); ));
return ( return (
<div className={classes.section} id="notifications"> <div className={classes.section} id="notifications">
@@ -26,16 +28,8 @@ const DataService = function ({ backend, service, ...props }) {
<h2>Our Service</h2> <h2>Our Service</h2>
</div> </div>
<div> <div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[0]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[1]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[2]}
</Grid>
<GridContainer style={{padding: "40px"}} justify="center">
{services}
</GridContainer> </GridContainer>
</div> </div>
</div> </div>


+ 26
- 35
pages-sections/latest_news/news.js Ver arquivo

@@ -19,6 +19,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
const classes = useStyles(); const classes = useStyles();
const latnews = news.map((data) => { const latnews = news.map((data) => {
return ( return (
<Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
<Card style={{width: "20rem"}}> <Card style={{width: "20rem"}}>
<img <img
style={{height: "180px", width: "100%", display: "block"}} style={{height: "180px", width: "100%", display: "block"}}
@@ -31,45 +32,35 @@ const DataLatestNews = function ({ backend, news, ...props }) {
<Button color="info" onclick="myFunction()" id="myBtn">Read More</Button> <Button color="info" onclick="myFunction()" id="myBtn">Read More</Button>
</CardBody> </CardBody>
</Card> </Card>
</Grid>
); );
}) })
return ( return (
<div className={classes.section} id="notifications"> <div className={classes.section} id="notifications">
<div align="center">
<h2>Latest News</h2>
</div>
<div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[0]}
{latnews[1]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[2]}
{latnews[3]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[4]}
{latnews[5]}
</Grid>
</GridContainer>
</div>
<div align="center">
<Paginations
color="info"
pages={[
{ text: 1 },
{ text: "..." },
{ text: 5 },
{ text: 6 },
{ active: true, text: 7 },
{ text: 8 },
{ text: 9 },
{ text: "..." },
{ text: 12 }
]}
/>
</div>
<div align="center">
<h2>Latest News</h2>
</div>
<div>
<GridContainer justify="center">
{latnews}
</GridContainer>
</div>
<div align="center">
<Paginations
color="info"
pages={[
{ text: 1 },
{ text: "..." },
{ text: 5 },
{ text: 6 },
{ active: true, text: 7 },
{ text: 8 },
{ text: 9 },
{ text: "..." },
{ text: 12 }
]}
/>
</div>
</div> </div>
); );
} }


+ 115
- 0
pages-sections/product/product.js Ver arquivo

@@ -0,0 +1,115 @@
import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";

const useStyles = makeStyles(styles);
const DataProduct = function ({ backend, product, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const Product = product.map((data) => {
console.log(data);
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3><a href={"/product_detail?a="+data.id}>{data.name}</a></h3>
<h4>Rp.{data.price}</h4>
<Button color="info" round>
<LocalGroceryStoreIcon className={classes.icons} />{" "}
Buy
</Button>
</div>
</div>
);
})
return (
<Card className={classes.textCenter}>
<div align="center">
<CardHeader color="info">Product</CardHeader>
</div>
<CardBody>
<div align="center">
<h2>Product & Facilities</h2>
</div>
<GridContainer justify="center">
<GridItem>
<NavPills
alignCenter
color="primary"
tabs={[
{
tabButton: "Yamaha",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
{Product}
</GridContainer>
),
},
{
tabButton: "Suzuki",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
{Product}
</GridContainer>
),
},
{
tabButton: "Honda",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">

</GridContainer>
),
},
{
tabButton: "Mercedes Benz",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
</GridContainer>
),
},
]}
/>
</GridItem>
</GridContainer>
</CardBody>
</Card>
);
}

export default DataProduct;

+ 152
- 0
pages-sections/product/product_details.js Ver arquivo

@@ -0,0 +1,152 @@
import React from "react";

// nodejs library that concatenates classes
import classNames from "classnames";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
import Carousel from "react-slick";
import Paper from '@material-ui/core/Paper';


import image1 from "assets/img/bg.jpg";
import image2 from "assets/img/bg2.png";
import image3 from "assets/img/bg3.jpg";

const useStyles = makeStyles(styles);

const DataProduct = function ({ backend, detailproduct, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const Productdetails = detailproduct.map((data) => {
console.log(data);
return (
<GridContainer>
<Grid>
<div className={classes.section}>
<div className={classes.container}>
<Card style={{width:"500px", height:"400px"}}>
<div>
<img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
</div>
</Card>
</div>
</div>
</Grid>
<Grid style={{padding:"40px", marginTop:"-30px"}}>
<h3>{data.name}</h3>
<h3>Rp.{data.price}</h3>
<hr></hr>
</Grid>
</GridContainer>
);
})
return (
<Card className={classes.textCenter}>
<div align="center">
<CardHeader color="info">Product Detail</CardHeader>
</div>
<CardBody>
<div>
{Productdetails[0]}
</div>
<GridContainer>
<GridItem>
<NavPills
color="primary"
tabs={[
{
tabButton: "Overview",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Specification",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Accessories",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Film",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Credit Simulation",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Test Drive",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
<GridItem>
</GridItem>
</GridContainer>
),
},
]}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter className={classes.textMuted} textAlign="center">
© 2020 , All Right Reserved by @Thamrin Brother Company
</CardFooter>
</Card>
);
}

export default DataProduct;

+ 1
- 1
pages-sections/snackbar.js Ver arquivo

@@ -17,7 +17,7 @@ const DataSnackbarContent = function() {
<SnackbarContent <SnackbarContent
message={ message={
<h4> <h4>
Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan <a href="https://covid19.go.id/" target="_blank" className={classes.block}>klik di sini.</a>
</h4> </h4>
} }
align="center" align="center"


+ 1
- 1
pages/_error.js Ver arquivo

@@ -3,7 +3,7 @@ import Router from "next/router";


export default class _error extends Component { export default class _error extends Component {
componentDidMount = () => { componentDidMount = () => {
Router.push("/components");
Router.push("/home");
}; };


render() { render() {


+ 33
- 0
pages/api/product/get.js Ver arquivo

@@ -0,0 +1,33 @@
import DetailProduct from "../../../api/product/product";

export default async function handler(req, res) {
if (req.method == "POST") {
var filterKey = req.body.filterKey;
if (filterKey == "name") {
var id = req.body.id;
var name = req.body.name;
var description = req.body.description;
var price = req.body.price;
var detailproduct = await DetailProduct.GetDetailProduct(id, name, description, price);
if (detailproduct["STATUS"] == 0) {
res.status(200).json(detailproduct);
} else if (detailproduct["DATA"]["products"] == null) {
res
.status(200)
.json({
STATUS: 0,
DATA: "Product Tidak Ditemukan"
});
} else {
res.status(200).json({
STATUS: 1,
DATA: detailproduct["DATA"]["products"],
});
}
} else {
res.status(200).send("NOT FOUND");
}
} else {
res.status(200).send("NOT FOUND");
}
}

pages/components.js → pages/home.js Ver arquivo

@@ -97,8 +97,6 @@ export async function getServerSideProps(context) {
carousel = res["DATA"]["carousels"]; carousel = res["DATA"]["carousels"];
} }


console.log(carousel);

return { return {
props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props
}; };

+ 1
- 1
pages/index.js Ver arquivo

@@ -3,7 +3,7 @@ import Router from "next/router";


export default class Index extends Component { export default class Index extends Component {
componentDidMount = () => { componentDidMount = () => {
Router.push("/components");
Router.push("/home");
}; };


render() { render() {


+ 7
- 4
pages/product.js Ver arquivo

@@ -12,7 +12,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionProduct from "pages-sections/SectionProduct.js";
import DataProduct from "pages-sections/product/product.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";


@@ -20,7 +20,7 @@ import Getproduct from "../api/product/product.js"


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function Components(props) {
const Product = function ({ backend, product, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
return ( return (
@@ -50,15 +50,18 @@ export default function Components(props) {
</div> </div>
</Parallax> </Parallax>
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<SectionProduct />
<DataProduct product={product} backend={backend}/>
</div> </div>
<Footer /> <Footer />
</div> </div>
); );
} }


export default Product;

export async function getServerSideProps(context) { export async function getServerSideProps(context) {
var product = []; var product = [];
const backend = process.env.BACKEND_SERVER_URI;


var res = await Getproduct.GetProduct(); var res = await Getproduct.GetProduct();
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
@@ -66,6 +69,6 @@ export async function getServerSideProps(context) {
} }


return { return {
props: { product }, // will be passed to the page component as props
props: { product, backend }, // will be passed to the page component as props
}; };
} }

+ 22
- 3
pages/product_detail.js Ver arquivo

@@ -12,13 +12,14 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionProductDetail from "pages-sections/Components-Sections/SectionProductDetail.js";
import ProductDetail from "pages-sections/product/product_details.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";
import GetDetailproduct from "../api/product/product.js"


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function Components(props) {
const ProductDetails = function ({ backend, detailproduct, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
return ( return (
@@ -48,9 +49,27 @@ export default function Components(props) {
</div> </div>
</Parallax> </Parallax>
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<SectionProductDetail />
<ProductDetail detailproduct={detailproduct} backend={backend}/>
</div> </div>
<Footer /> <Footer />
</div> </div>
); );
} }

export default ProductDetails;

export async function getServerSideProps(context) {
var detailproduct = [];
const backend = process.env.BACKEND_SERVER_URI;

var res = await GetDetailproduct.GetDetailProduct();
if (res["STATUS"] === 1) {
detailproduct = res["DATA"]["products"];
}

console.log(res);

return {
props: { detailproduct, backend }, // will be passed to the page component as props
};
}

Escrever Pré-visualização
Carregando…
Cancelar
Salvar