yusmar
/
tbg-ecomm-nextjs
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

fix model apparel

master
Yusmardianto před 4 roky
rodič
065eb450fa
revize
e56d072b1f
15 změnil soubory, kde provedl 826 přidání a 362 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +25
    -0
      api/latest_news/news.js
  2. +182
    -0
      api/product/apparel.js
  3. +0
    -0
      api/product/part.js
  4. +51
    -13
      pages-sections/carrer/carrer_details.js
  5. +2
    -3
      pages-sections/dealers/dealers.js
  6. +76
    -45
      pages-sections/latest_news/news_details.js
  7. +75
    -16
      pages-sections/product/apparel.js
  8. +1
    -12
      pages-sections/product/apparel_details.js
  9. +144
    -128
      pages-sections/product/helmet.js
  10. +152
    -104
      pages-sections/product/product.js
  11. +18
    -16
      pages-sections/product/yamalube.js
  12. +19
    -12
      pages-sections/product/ygp.js
  13. +10
    -3
      pages/latestnews_details.js
  14. +68
    -6
      pages/product/apparel.js
  15. +3
    -4
      pages/product/apparel_details.js

+ 25
- 0
api/latest_news/news.js Zobrazit soubor

@@ -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,
};

+ 182
- 0
api/product/apparel.js Zobrazit soubor

@@ -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,
};

+ 0
- 0
api/product/part.js Zobrazit soubor


+ 51
- 13
pages-sections/carrer/carrer_details.js Zobrazit soubor

@@ -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 (


+ 2
- 3
pages-sections/dealers/dealers.js Zobrazit soubor

@@ -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>


+ 76
- 45
pages-sections/latest_news/news_details.js Zobrazit soubor

@@ -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>;


+ 75
- 16
pages-sections/product/apparel.js Zobrazit soubor

@@ -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>


+ 1
- 12
pages-sections/product/apparel_details.js Zobrazit soubor

@@ -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>


+ 144
- 128
pages-sections/product/helmet.js Zobrazit soubor

@@ -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>
);
})


+ 152
- 104
pages-sections/product/product.js Zobrazit soubor

@@ -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>
);
})


+ 18
- 16
pages-sections/product/yamalube.js Zobrazit soubor

@@ -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>
);
})


+ 19
- 12
pages-sections/product/ygp.js Zobrazit soubor

@@ -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>
);
})


+ 10
- 3
pages/latestnews_details.js Zobrazit soubor

@@ -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
};
}

+ 68
- 6
pages/product/apparel.js Zobrazit soubor

@@ -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
};
}

+ 3
- 4
pages/product/apparel_details.js Zobrazit soubor

@@ -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


Zapsat Náhled
Načítá se…
Zrušit
Uložit