yusmar
/
tbg-ecomm-nextjs
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

add product api

master
Yusmardianto il y a 4 ans
Parent
15a4297b56
révision
ec1894a6cb
16 fichiers modifiés avec 414 ajouts et 778 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  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 Voir le fichier

@@ -3,16 +3,44 @@ import apollo from "../../lib/apollo.js";
async function GetProduct(token="") {
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
);
return res;
@@ -20,4 +48,5 @@ async function GetProduct(token="") {

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

+ 3
- 3
components/PageChange/PageChange.js Voir le fichier

@@ -39,10 +39,10 @@ export default function PageChange(props) {
<div className={classes.iconWrapper}>
<CircularProgress className={classes.progress} />
</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>
);
}

+ 0
- 493
pages-sections/SectionProduct.js Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

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


+ 10
- 16
pages-sections/home/service.js Voir le fichier

@@ -13,12 +13,14 @@ const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props }) {
const classes = useStyles();
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 (
<div className={classes.section} id="notifications">
@@ -26,16 +28,8 @@ const DataService = function ({ backend, service, ...props }) {
<h2>Our Service</h2>
</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>
</div>
</div>


+ 26
- 35
pages-sections/latest_news/news.js Voir le fichier

@@ -19,6 +19,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
const classes = useStyles();
const latnews = news.map((data) => {
return (
<Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
<Card style={{width: "20rem"}}>
<img
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>
</CardBody>
</Card>
</Grid>
);
})
return (
<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>
);
}


+ 115
- 0
pages-sections/product/product.js Voir le fichier

@@ -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 Voir le fichier

@@ -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 Voir le fichier

@@ -17,7 +17,7 @@ const DataSnackbarContent = function() {
<SnackbarContent
message={
<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>
}
align="center"


+ 1
- 1
pages/_error.js Voir le fichier

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

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

render() {


+ 33
- 0
pages/api/product/get.js Voir le fichier

@@ -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 Voir le fichier

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

console.log(carousel);

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

+ 1
- 1
pages/index.js Voir le fichier

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

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

render() {


+ 7
- 4
pages/product.js Voir le fichier

@@ -12,7 +12,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.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 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);

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

export default Product;

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

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

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 Voir le fichier

@@ -12,13 +12,14 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.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 styles from "assets/jss/nextjs-material-kit/pages/components.js";
import GetDetailproduct from "../api/product/product.js"

const useStyles = makeStyles(styles);

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

Écrire Aperçu
Chargement…
Annuler
Enregistrer