@@ -24,6 +24,30 @@ async function GetNews(token="", start = 0) { | |||
return res; | |||
} | |||
async function GetOtherNews(token="", start = 0) { | |||
var res = await apollo.query( | |||
` | |||
query($start: Int!) { | |||
latestNews(limit:3,start:$start) | |||
{ | |||
id | |||
title | |||
description | |||
img{ | |||
url | |||
} | |||
published_at | |||
} | |||
} | |||
`, | |||
token, | |||
{ | |||
start: start, | |||
} | |||
); | |||
return res; | |||
} | |||
async function GetDetailNews(id, token="") { | |||
var res = await apollo.query( | |||
` | |||
@@ -51,4 +75,5 @@ async function GetDetailNews(id, token="") { | |||
module.exports = { | |||
GetNews: GetNews, | |||
GetDetailNews: GetDetailNews, | |||
GetOtherNews:GetOtherNews, | |||
}; |
@@ -0,0 +1,182 @@ | |||
import apollo from "../../lib/apollo.js"; | |||
async function GetApparel(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "RConcept" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparel46Asia(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "Asia" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelBasic(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "Basic" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelMerchandise(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "Merchandise" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelMaxi(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "Maxi" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelRainSuit(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "RainSuit" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelMotoGP(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "motoGP" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetApparelOffRoad(filter, token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
apparels(where: { category: "OffRoad" ${(filter!="")?`name: "${filter}"`:""}}) { | |||
id | |||
name | |||
price | |||
img { | |||
url | |||
} | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetDetailApparel(id, token="") { | |||
var res = await apollo.query( | |||
` | |||
query($input: ID!){ | |||
apparels(where:{id:$input}) | |||
{ | |||
id | |||
name | |||
description | |||
price | |||
part_code | |||
img { | |||
url | |||
} | |||
stock | |||
} | |||
} `, | |||
token, | |||
{ | |||
"input": id | |||
} | |||
); | |||
return res; | |||
} | |||
module.exports = { | |||
GetApparel:GetApparel, | |||
GetApparel46Asia:GetApparel46Asia, | |||
GetApparelBasic:GetApparelBasic, | |||
GetApparelMerchandise:GetApparelMerchandise, | |||
GetApparelMaxi:GetApparelMaxi, | |||
GetApparelRainSuit:GetApparelRainSuit, | |||
GetApparelMotoGP:GetApparelMotoGP, | |||
GetApparelOffRoad:GetApparelOffRoad, | |||
GetDetailApparel:GetDetailApparel, | |||
}; |
@@ -1,24 +1,62 @@ | |||
import React from 'react'; | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import ReactHtmlParser from "react-html-parser"; | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import classNames from "classnames"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import Grid from '@material-ui/core/Grid'; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import CardHeader from "components/Card/CardHeader.js"; | |||
import Carousel from "react-slick"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
const useStyles = makeStyles(styles); | |||
const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||
const classes = useStyles(); | |||
const imageClasses = classNames( | |||
classes.imgRaised, | |||
classes.imgRoundedCircle, | |||
classes.imgFluid | |||
); | |||
const settings = { | |||
dots: true, | |||
infinite: true, | |||
speed: 500, | |||
slidesToShow: 1, | |||
slidesToScroll: 1, | |||
autoplay: true, | |||
time: 5 | |||
}; | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const carrer = detailcarrer.map((data) => { | |||
return ( | |||
<Card> | |||
<CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader> | |||
<CardBody> | |||
<div align="center"> | |||
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" /> | |||
</div> | |||
<h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | |||
<h5 align="justify">{ReactHtmlParser(data.description)}</h5> | |||
</CardBody> | |||
</Card> | |||
<GridContainer justify="center"> | |||
<Grid fluid xs={4}> | |||
<div className={classes.section} id="notifications"> | |||
<div className={classes.section}> | |||
<div className={classes.container}> | |||
<GridContainer> | |||
<GridItem className={classes.marginAuto}> | |||
<Card carousel> | |||
<Carousel {...settings}> | |||
<img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||
</Carousel> | |||
</Card> | |||
</GridItem> | |||
</GridContainer> | |||
</div> | |||
</div> | |||
</div> | |||
</Grid> | |||
<Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||
<h4>{data.name}</h4> | |||
<h4>{data.published_at}</h4> | |||
<hr></hr> | |||
<div align="justify"> | |||
<p>{ReactHtmlParser(data.description)}</p> | |||
</div> | |||
</Grid> | |||
</GridContainer> | |||
); | |||
}) | |||
return ( | |||
@@ -19,7 +19,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props | |||
const Dealers = dealers.map((data) => { | |||
return ( | |||
<div> | |||
<Grid style={{width:"400px", padding:"30px"}}> | |||
<Grid style={{width:"350px", padding:"10px"}}> | |||
<Card> | |||
<CardHeader color="danger"><div align="center">{data.name}</div></CardHeader> | |||
<CardBody> | |||
@@ -59,8 +59,7 @@ const DataDealer = function ({ selected, handleName, backend, dealers, ...props | |||
onChange={values => handleName(values)} | |||
/> | |||
<br></br> | |||
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}> | |||
{Dealers} | |||
<GridContainer justify="center"> | |||
{Dealers} | |||
</GridContainer> | |||
</div> | |||
@@ -1,62 +1,93 @@ | |||
import React, { useState, useEffect } from "react"; | |||
import Router, { withRouter } from "next/router"; | |||
import ReactHtmlParser from "react-html-parser"; | |||
// @material-ui/core components | |||
import { makeStyles } from "@material-ui/core/styles"; | |||
import ReactPaginate from "react-paginate"; | |||
import classNames from "classnames"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import Grid from '@material-ui/core/Grid'; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import Card from "components/Card/Card.js"; | |||
import Carousel from "react-slick"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import Button from "components/CustomButtons/Button.js"; | |||
import Icon from "@material-ui/core/Icon"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||
const useStyles = makeStyles(styles); | |||
const DataLatestNews = function ({ backend, news, ...props }) { | |||
const [isLoading, setLoading] = useState(false); //State for the loading indicator | |||
const startLoading = () => setLoading(true); | |||
const stopLoading = () => setLoading(false); | |||
useEffect(() => { | |||
//After the component is mounted set router event handlers | |||
Router.events.on("routeChangeStart", startLoading); | |||
Router.events.on("routeChangeComplete", stopLoading); | |||
return () => { | |||
Router.events.off("routeChangeStart", startLoading); | |||
Router.events.off("routeChangeComplete", stopLoading); | |||
}; | |||
}, []); | |||
const pagginationHandler = (page) => { | |||
const currentPath = props.router.pathname; | |||
const currentQuery = props.router.query; | |||
currentQuery.page = page.selected + 1; | |||
props.router.push({ | |||
pathname: currentPath, | |||
query: currentQuery, | |||
}); | |||
}; | |||
const DataLatestNews = function ({ backend, news, othernews,...props }) { | |||
const classes = useStyles(); | |||
const imageClasses = classNames( | |||
classes.imgRaised, | |||
classes.imgRoundedCircle, | |||
classes.imgFluid | |||
); | |||
const settings = { | |||
dots: true, | |||
infinite: true, | |||
speed: 500, | |||
slidesToShow: 1, | |||
slidesToScroll: 1, | |||
autoplay: true, | |||
time: 5 | |||
}; | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const otherlatnews = othernews.map((data) => { | |||
return ( | |||
<Grid align="center" style={{padding:"5px", marginTop:"-50px"}}> | |||
<Card style={{width: "20rem"}}> | |||
<img | |||
style={{height: "180px", width: "100%", display: "block"}} | |||
className={classes.imgCardTop} | |||
src={`${backend}${data.img[0]["url"]}`} | |||
/> | |||
<CardBody> | |||
<p>{data.title}</p> | |||
<Button color="info" round href={"/latestnews_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Read More | |||
</Button> | |||
</CardBody> | |||
</Card> | |||
</Grid> | |||
); | |||
}) | |||
const latnews = news.map((data) => { | |||
return ( | |||
<div className={classes.section} style={{ padding: "40px" }}> | |||
<div align="center" style={{ marginTop: "-40px" }}> | |||
<h2>{data.title}</h2> | |||
</div> | |||
<br></br> | |||
<br></br> | |||
<div align="center"> | |||
<img | |||
src={`${backend}${data.img[0]["url"]}`} | |||
alt="First slide" | |||
className="slick-image" | |||
/> | |||
<div> | |||
<br></br> | |||
{data.published_at} | |||
<GridContainer justify="center"> | |||
<Grid fluid xs={4}> | |||
<div className={classes.section} id="notifications"> | |||
<div className={classes.section}> | |||
<div className={classes.container}> | |||
<GridContainer> | |||
<GridItem className={classes.marginAuto}> | |||
<Card carousel> | |||
<Carousel {...settings}> | |||
<img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||
</Carousel> | |||
</Card> | |||
<hr></hr> | |||
<div align="center"> | |||
<h3>Other Latest News</h3> | |||
<h3>{otherlatnews}</h3> | |||
</div> | |||
</GridItem> | |||
</GridContainer> | |||
</div> | |||
</div> | |||
</div> | |||
</Grid> | |||
<Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||
<h4>{data.title}</h4> | |||
<h4>{data.published_at}</h4> | |||
<hr></hr> | |||
<div align="justify"> | |||
<p>{ReactHtmlParser(data.description)}</p> | |||
</div> | |||
</div> | |||
<br></br> | |||
<h5 align="justify">{ReactHtmlParser(data.description)}</h5> | |||
</div> | |||
</Grid> | |||
</GridContainer> | |||
); | |||
}); | |||
return <div>{latnews}</div>; | |||
@@ -9,10 +9,11 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti | |||
import Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||
const useStyles = makeStyles(styles); | |||
const DataApparel = function ({ selected, handleName, backend, apparel, ...props }) { | |||
const DataApparel = function ({ selected, handleName, backend, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
const imageClasses = classNames( | |||
@@ -21,18 +22,49 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||
classes.imgFluid | |||
); | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const ProductApparel = apparel.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
const ProductApparelRCon = apparel.map((data) => { | |||
return ( | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/apparel_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductApparelAsia = asia.map((data) => { | |||
return ( | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h3>{data.name}</h3> | |||
<h4>Rp.{data.price}</h4> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/apparel_details?s="+data.id} | |||
@@ -41,13 +73,16 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
return ( | |||
<div> | |||
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}> | |||
<Card className={classes.textCenter} align="center"> | |||
<CardBody> | |||
<div align="center" style={{marginTop:"-50px"}}> | |||
<div align="center"> | |||
<h2>Yamaha Apparel</h2> | |||
<Select | |||
value={(selected)?apparel.filter((i)=>i.id==selected):null} | |||
@@ -59,11 +94,35 @@ const DataApparel = function ({ selected, handleName, backend, apparel, ...props | |||
placeholder="filter by Nama Part" | |||
onChange={values => handleName(values)} | |||
/> | |||
<br></br> | |||
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}> | |||
{ProductApparel}{ProductApparel} | |||
</div><br></br><br></br><br></br> | |||
<div align="center"> | |||
<div align="center" className={classes.section} id="notifications"> | |||
<SnackbarContent | |||
message={ | |||
<h4>APPAREL R CONCEPT</h4> | |||
} | |||
align="center" | |||
color="danger" | |||
/> | |||
</div> | |||
<GridContainer justify="center"> | |||
{ProductApparelRCon} | |||
</GridContainer> | |||
</div><br></br><br></br> | |||
<div align="center"> | |||
<div align="center" className={classes.section} id="notifications"> | |||
<SnackbarContent | |||
message={ | |||
<h4>APPAREL 46ASIA</h4> | |||
} | |||
align="center" | |||
color="danger" | |||
/> | |||
</div> | |||
<GridContainer justify="center"> | |||
{ProductApparelAsia} | |||
</GridContainer> | |||
</div> | |||
</div><br></br><br></br> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
@@ -64,21 +64,10 @@ const DetailDataApparel = function ({ backend, detailapparel, ...props }) { | |||
<hr></hr> | |||
<ul> | |||
<li><h4>Stock : {data.stock}</h4></li> | |||
<li><h4>Part Code : {data.part_code}</h4></li> | |||
<li><h4>Part Code : {ReactHtmlParser(data.part_code)}</h4></li> | |||
</ul> | |||
</Grid> | |||
</GridContainer> | |||
<GridContainer> | |||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||
</Grid> | |||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||
</Grid> | |||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||
<img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/> | |||
</Grid> | |||
</GridContainer> | |||
<div align="center"> | |||
<hr></hr> | |||
<h2>Deskripsi</h2> | |||
@@ -25,177 +25,193 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const ProductHelmetRConcepts = helmet.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetMTX = mtx.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetExtreme = extreme.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetRanger = ranger.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetFighter = fighter.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetSwirl = swirl.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetClassic = classic.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", height:"200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const ProductHelmetUno = uno.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "200px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/helmet_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
@@ -28,145 +28,193 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const Productmaxi = maxi.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productmatic = matic.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productnaked = naked.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productsport = sport.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productoffroad = offroad.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productmoped = moped.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productmonsterenergy = monsterenergy.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
const Productcbu = cbu.map((data) => { | |||
return ( | |||
<div> | |||
<div align="center" style={{padding:"30px"}}> | |||
<img style={{ width: "300px", height:"250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"350px"}}> | |||
<CardBody> | |||
<div style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/product_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
@@ -24,23 +24,25 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const ProductYamalube = yamalube.map((data) => { | |||
return ( | |||
<div style={{padding:"40px"}}> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button | |||
color="info" round | |||
href={"/product/yamalube_details?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px", height:"350px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "150px", height:"150px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/yamalube_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
@@ -24,18 +24,25 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) { | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const ProductYGP = ygp.map((data) => { | |||
return ( | |||
<div style={{padding:"50px"}} align="center"> | |||
<img | |||
alt="..." | |||
style={{ height: "150px", width:"250px", display: "block" }} | |||
src={`${backend}${data.img["url"]}`} | |||
className={navImageClasses} | |||
/> | |||
<h4>{data.name}</h4> | |||
<h4>Rp.{data.price}</h4> | |||
<Button color="info" round href={"/product/ygp_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
<div style={{padding: "20px", marginTop:"-40px"}}> | |||
<Card className={classes.textCenter} align="center" style={{width:"300px"}}> | |||
<CardBody> | |||
<div align="center" style={{padding:"10px"}}> | |||
<img style={{ width: "250px", display: "block" }} src={`${backend}${data.img["url"]}`} className={navImageClasses} | |||
/> | |||
<div align="center"> | |||
<h5>{data.name}</h5> | |||
<h5>Rp.{data.price}</h5> | |||
<Button | |||
color="info" round | |||
href={"/product/ygp_detail?s="+data.id} | |||
> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Product | |||
</Button> | |||
</div> | |||
</div> | |||
</CardBody> | |||
</Card> | |||
</div> | |||
); | |||
}) | |||
@@ -14,7 +14,7 @@ import DetailLatestNews from "../pages-sections/latest_news/news_details.js"; | |||
const useStyles = makeStyles(styles); | |||
const detailLatestNews = function ({ backend, news, ...props }) { | |||
const detailLatestNews = function ({ backend, news, othernews, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
<DetailLatestNews news={props.news}/> | |||
@@ -33,7 +33,7 @@ const detailLatestNews = function ({ backend, news, ...props }) { | |||
<Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/> | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<DataSnackbarContent/> | |||
<DetailLatestNews news={news} backend={backend}/> | |||
<DetailLatestNews news={news} othernews={othernews} backend={backend}/> | |||
</div> | |||
<Footer /> | |||
</div> | |||
@@ -45,12 +45,19 @@ export default detailLatestNews; | |||
export async function getServerSideProps(context) { | |||
var {query} = context; | |||
var news = []; | |||
var othernews = []; | |||
const backend = process.env.BACKEND_SERVER_URI; | |||
var res = await GetLatestNews.GetDetailNews(query.s||0); | |||
if (res["STATUS"] === 1) { | |||
news = res["DATA"]["latestNews"]; | |||
} | |||
var res = await GetLatestNews.GetOtherNews(); | |||
if (res["STATUS"] === 1) { | |||
othernews = res["DATA"]["latestNews"]; | |||
} | |||
return { | |||
props: { news, backend }, // will be passed to the page component as props | |||
props: { othernews, news, backend }, // will be passed to the page component as props | |||
}; | |||
} |
@@ -9,7 +9,7 @@ import Footer from "components/Footer/Footer.js"; | |||
import Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
import GetDataApparel from "../../api/product/accessories.js"; | |||
import GetDataApparel from "../../api/product/apparel.js"; | |||
import DataApparel from "../../pages-sections/product/apparel.js"; | |||
import DataSnackbarContent from "../../pages-sections/snackbar.js"; | |||
import Router from 'next/router' | |||
@@ -22,7 +22,7 @@ const handleName = values => { | |||
query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, | |||
}) | |||
} | |||
const Apparel = function ({ selected, apparel, backend, ...props }) { | |||
const Apparel = function ({ selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
return ( | |||
@@ -41,7 +41,7 @@ const Apparel = function ({ selected, apparel, backend, ...props }) { | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<QueryClientProvider client={queryClient}> | |||
<DataSnackbarContent/> | |||
<DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} backend={backend} /> | |||
<DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} asia={asia} basic={basic} merchand={merchand} maxi={maxi} rainsuit={rainsuit} motogp={motogp} offroad={offroad} backend={backend} /> | |||
</QueryClientProvider> | |||
</div> | |||
<Footer /> | |||
@@ -53,21 +53,83 @@ export default Apparel; | |||
export async function getServerSideProps(context) { | |||
var apparel = []; | |||
var asia = []; | |||
var basic = []; | |||
var merchand = []; | |||
var maxi = []; | |||
var rainsuit = []; | |||
var motogp = []; | |||
var offroad = []; | |||
var filter = context.query.filter||""; | |||
var selected = ""; | |||
const backend = process.env.BACKEND_SERVER_URI; | |||
var res = await GetDataApparel.GetApparel(filter); | |||
if (res["STATUS"] === 1) { | |||
apparel = res["DATA"]["accessories"]; | |||
apparel = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = apparel.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparel46Asia(filter); | |||
if (res["STATUS"] === 1) { | |||
asia = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = asia.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelBasic(filter); | |||
if (res["STATUS"] === 1) { | |||
basic = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = basic.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelMerchandise(filter); | |||
if (res["STATUS"] === 1) { | |||
merchand = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = merchand.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelMaxi(filter); | |||
if (res["STATUS"] === 1) { | |||
maxi = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = maxi.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelRainSuit(filter); | |||
if (res["STATUS"] === 1) { | |||
rainsuit = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = rainsuit.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelMotoGP(filter); | |||
if (res["STATUS"] === 1) { | |||
motogp = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = motogp.filter((i)=>i.name==filter); | |||
} | |||
} | |||
var res = await GetDataApparel.GetApparelOffRoad(filter); | |||
if (res["STATUS"] === 1) { | |||
offroad = res["DATA"]["apparels"]; | |||
if (filter !=""){ | |||
selected = offroad.filter((i)=>i.name==filter); | |||
} | |||
} | |||
return { | |||
props: { selected, apparel, backend }, // will be passed to the page component as props | |||
props: { selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend }, // will be passed to the page component as props | |||
}; | |||
} |
@@ -8,7 +8,7 @@ import Footer from "components/Footer/Footer.js"; | |||
import ApparelDetail from "pages-sections/product/apparel_details.js"; | |||
import Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
import GetDetailApparel from "../../api/product/accessories.js" | |||
import GetDetailApparel from "../../api/product/apparel.js" | |||
const useStyles = makeStyles(styles); | |||
@@ -43,11 +43,10 @@ export async function getServerSideProps(context) { | |||
var detailapparel = []; | |||
const backend = process.env.BACKEND_SERVER_URI; | |||
var res = await GetDetailApparel.GetDetailAccessories(query.s||0); | |||
var res = await GetDetailApparel.GetDetailApparel(query.s||0); | |||
if (res["STATUS"] === 1) { | |||
detailapparel = res["DATA"]["accessories"]; | |||
detailapparel = res["DATA"]["apparels"]; | |||
} | |||
console.log(detailapparel); | |||
return { | |||
props: { detailapparel, backend }, // will be passed to the page component as props | |||