yusmar
/
tbg-ecomm-nextjs
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

yarn build

master
Yusmardianto 4 years ago
parent
7b751aa54f
commit
c90376c654
20 changed files with 516 additions and 583 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -12
      api/carrer/carrer.js
  2. +3
    -49
      api/dealer/dealer.js
  3. +0
    -10
      api/product/accessories.js
  4. +115
    -190
      api/product/product.js
  5. +67
    -51
      components/Footer/Footer.js
  6. +20
    -21
      components/Header/HeaderLinks.js
  7. +25
    -34
      pages-sections/dealers/dealers.js
  8. +0
    -28
      pages-sections/dealers/filter.js
  9. +13
    -0
      pages-sections/home/carousel.js
  10. +119
    -0
      pages-sections/home/feature.js
  11. +0
    -9
      pages-sections/home/sosmed.js
  12. +1
    -0
      pages-sections/latest_news/news.js
  13. +0
    -1
      pages-sections/product/accessories.js
  14. +76
    -116
      pages-sections/product/product.js
  15. +2
    -4
      pages-sections/product/ygp.js
  16. +3
    -2
      pages/carrer.js
  17. +19
    -7
      pages/dealers.js
  18. +3
    -0
      pages/home.js
  19. +50
    -48
      pages/product/product.js
  20. +0
    -1
      pages/product/ygp.js

+ 0
- 12
api/carrer/carrer.js View File

@@ -8,10 +8,6 @@ async function GetCarrerS1(token="") {
{
id
name
description
img{
url
}
start_regis
until_regis
name_description
@@ -30,10 +26,6 @@ async function GetCarrerD3(token="") {
{
id
name
description
img{
url
}
start_regis
until_regis
name_description
@@ -52,10 +44,6 @@ async function GetCarrerSMA(token="") {
{
id
name
description
img{
url
}
start_regis
until_regis
name_description


+ 3
- 49
api/dealer/dealer.js View File

@@ -1,11 +1,12 @@
import apollo from "../../lib/apollo.js";

async function GetDealers(token="") {
async function GetDealers(filter, token="") {
var res = await apollo.query(
`
query {
query { ${(filter!="")?`name: "${filter}"`:""}
dealers
{
id
name
kota_dealer
address
@@ -20,53 +21,6 @@ async function GetDealers(token="") {
return res;
}

async function GetDealersDetails(token="") {
var res = await apollo.query(
`
query($input: ID!) {
dealers(where:{id:$input})
{
name
kota_dealer
address
telp
email
location
}
}
`,
token,
{
"input": id
}
);
return res;
}

async function GetDealersbyFilter(token="") {
var res = await apollo.query(
`
query($input: ID!) {
dealers(where:{id:$input})
{
name
kota_dealer
address
telp
email
location
}
}
`,
token,
{
"input": id
}
);
return res;
}

module.exports = {
GetDealers: GetDealers,
GetDealersDetails: GetDealersDetails,
};

+ 0
- 10
api/product/accessories.js View File

@@ -7,9 +7,7 @@ async function GetYGP(filter, token="") {
accessories(where: { category: "YGP" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
description
price
part_code
img {
url
}
@@ -27,9 +25,7 @@ async function GetYamalube(filter, token="") {
accessories(where: { category: "Yamalube" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
description
price
part_code
img {
url
}
@@ -47,9 +43,7 @@ async function GetHelmet(filter, token="") {
accessories(where: { category: "Helmet" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
description
price
part_code
img {
url
}
@@ -67,9 +61,7 @@ async function GetApparel(filter, token="") {
accessories(where: { category: "Apparel" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
description
price
part_code
img {
url
}
@@ -87,9 +79,7 @@ async function GetAccessories(filter, token="") {
accessories(where: { category: "Accessories" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
description
price
part_code
img {
url
}


+ 115
- 190
api/product/product.js View File

@@ -1,35 +1,8 @@
import apollo from "../../lib/apollo.js";

// async function GetProduct(token="", start = 0) {
// var res = await apollo.query(
// `
// query($start: Int!) {
// products(limit:1,start:$start)
// {
// id
// name
// price
// description
// img{
// url
// }
// business_partner
// {
// name
// }
// }
// }`,
// token,
// {
// start: start,
// }
// );
// return res;
// }

async function GetDetailProduct(id, token="") {
var res = await apollo.query(
`
async function GetDetailProduct(id, token = "") {
var res = await apollo.query(
`
query($input: ID!){
products(where:{id:$input})
{
@@ -39,257 +12,209 @@ async function GetDetailProduct(id, token="") {
img{
url
}
business_partner
{
name
}
overview
specification
film
stock
}
} `,
token,
{
token, {
"input": id
}
);
return res;
);
return res;
}

async function GetProductYamaha(token="") {
var res = await apollo.query(
`
async function GetProductMatic(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "1"})
{
products(where: { categories: "matic" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductSuzuki(token="") {
var res = await apollo.query(
`
async function GetProductMaxi(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "2"})
{
products(where: { categories: "maxi" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductHonda(token="") {
var res = await apollo.query(
`
async function GetProductNaked(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "3"})
{
products(where: { categories: "naked" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductHino(token="") {
var res = await apollo.query(
`
async function GetProductSport(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "4"})
{
products(where: { categories: "sport" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductMercedes(token="") {
var res = await apollo.query(
`
async function GetProductOffRoad(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "5"})
{
products(where: { categories: "offroad" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductBPR(token="") {
var res = await apollo.query(
`
async function GetProductMoped(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "6"})
{
products(where: { categories: "moped" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductEmilia(token="") {
var res = await apollo.query(
`
async function GetProductMonsterEnergy(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "8"})
{
products(where: { categories: "monsterenergy" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
}`,
token
);
return res;
}

async function GetProductCBU(token = "") {
var res = await apollo.query(
`
query {
products(where: { categories: "cbu" }) {
id
name
price
img {
url
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

async function GetProductHomes(token="") {
var res = await apollo.query(
`
async function GetProductATV(token = "") {
var res = await apollo.query(
`
query {
products(where: {business_partner: "9"})
{
products(where: { categories: "atv" }) {
id
name
description
price
img{
img {
url
}
business_partner
{
name
}
}`,
token
);
return res;
}

async function GetProductPowerProduct(token = "") {
var res = await apollo.query(
`
query {
products(where: { categories: "powerproduct" }) {
id
name
price
img {
url
}
overview
specification
film
stock
}
}`,
token
);
return res;
token
);
return res;
}

module.exports = {
// GetProduct: GetProduct,
GetDetailProduct:GetDetailProduct,
GetProductYamaha:GetProductYamaha,
GetProductSuzuki:GetProductSuzuki,
GetProductHonda:GetProductHonda,
GetProductHino:GetProductHino,
GetProductMercedes:GetProductMercedes,
GetProductBPR:GetProductBPR,
GetProductEmilia:GetProductEmilia,
GetProductHomes:GetProductHomes,
GetDetailProduct: GetDetailProduct,
GetProductMatic: GetProductMatic,
GetProductMaxi: GetProductMaxi,
GetProductNaked: GetProductNaked,
GetProductSport: GetProductSport,
GetProductOffRoad: GetProductOffRoad,
GetProductMoped: GetProductMoped,
GetProductMonsterEnergy: GetProductMonsterEnergy,
GetProductCBU: GetProductCBU,
GetProductATV: GetProductATV,
GetProductPowerProduct: GetProductPowerProduct,
};

+ 67
- 51
components/Footer/Footer.js View File

@@ -11,6 +11,10 @@ import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Favorite from "@material-ui/icons/Favorite";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/components/footerStyle.js";

const useStyles = makeStyles(styles);
@@ -27,60 +31,72 @@ export default function Footer(props) {
[classes.footerWhiteFont]: whiteFont
});
return (
<footer className={footerClasses}>
<div className={classes.container}>
<div className={classes.left}>
<List className={classes.list}>
{/* <ListItem className={classes.inlineBlock}>
<img className={classes.imgCard} src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="250px"/>
</ListItem> */}
<ListItem className={classes.inlineBlock}>
<a
href="/home"
className={classes.block}
>
Home
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/product/product"
className={classes.block}
>
Product
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/latestsnews"
className={classes.block}
>
Latest News
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/carrer"
className={classes.block}
>
Carrer
</a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a
href="/about_us/aboutus"
className={classes.block}
>
About Us
</a>
</ListItem>
</List>
<div>
<GridContainer style={{padding: "40px"}} justify="center">
<Grid>
<div align="center" style={{marginTop:"-20px"}}>
<img className={classes.imgCard} src="https://1.bp.blogspot.com/-GTTVvnJ9x0c/Wn70CJxGoYI/AAAAAAAACRY/GSv1ehPFOPQZcvOfiALy_p7Xa7GOBRHKgCLcBGAs/s320/TB.png" width="250px"/>
</div>
<div className={classes.right}>
&copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
</Grid>
<Grid>
<div>
<footer className={footerClasses}>
<div className={classes.container}>
<div className={classes.left}>
<List className={classes.list}>
<ListItem className={classes.inlineBlock}>
<a href="/home" className={classes.block} > Home </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/product" className={classes.block}> Motor </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/ygp" className={classes.block}> YGP </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/yamalube" className={classes.block}> Yamalube </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/apparel" className={classes.block}> Apparel </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/helmet" className={classes.block}> Helmet </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/accessories" className={classes.block}> Accessories </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/service" className={classes.block}> Service </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/product/dealer" className={classes.block}> Dealer </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/latestsnews" className={classes.block}> Latest News </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/carrer" className={classes.block}> Carrer </a>
</ListItem>
<ListItem className={classes.inlineBlock}>
<a href="/about_us/aboutus" className={classes.block}> About Us </a>
</ListItem>
</List>
</div>
</div>
</footer>
</div>
</Grid>
</GridContainer>
<GridContainer style={{marginTop: "-40px"}} justify="center">
<Grid>
<div align="center">
<div className={classes.right}>
&copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
</div>
</div>
</footer>
</Grid>
</GridContainer>
</div>
);
}



+ 20
- 21
components/Header/HeaderLinks.js View File

@@ -24,19 +24,22 @@ export default function HeaderLinks(props) {
return (
<List className={classes.list}>
<ListItem className={classes.listItem}>
<img
src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png"
width="180px"
/>
<Link href="/home">
<Button color="transparent" className={classes.navLink}>
<img
src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"
/>
</Button>
</Link>
</ListItem>
<ListItem className={classes.listItem}>
<Link href="/home">
<Button color="transparent" className={classes.navLink}>
<Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
<Icon className={classes.icons}>home</Icon> Home
</Button>
</Link>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<CustomDropdown
noLiPadding
navDropdown
@@ -68,29 +71,25 @@ export default function HeaderLinks(props) {
<Link href="https://booking.thamrin.co.id/">
<a className={classes.dropdownLink}>Service</a>
</Link>,
<Link href="/dealers">
<a className={classes.dropdownLink}>Dealers</a>
</Link>,
]}
/>
</ListItem>
<ListItem className={classes.listItem}>
<Link href="/dealers">
<Button color="transparent" className={classes.navLink}>
<Icon className={classes.icons}>event</Icon> Dealers
</Button>
</Link>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Link href="/latestnews">
<Button color="transparent" className={classes.navLink}>
<Icon className={classes.icons}>event</Icon> Latest News
</Button>
</Link>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Button href="/carrer" color="transparent" className={classes.navLink}>
<Icon className={classes.icons}>wallet_travel</Icon> Carrer
<Icon className={classes.icons}>wallet_travel</Icon> Career
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<CustomDropdown
noLiPadding
navDropdown
@@ -134,7 +133,7 @@ export default function HeaderLinks(props) {
]}
/>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Button
href="abous_us/aboutus"
color="transparent"
@@ -143,12 +142,12 @@ export default function HeaderLinks(props) {
<Icon className={classes.icons}>account_balance</Icon> About Us
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Button href="/chart" color="transparent" className={classes.navLink}>
<Chart className={classes.icons} />
</Button>
</ListItem>
{/* <ListItem className={classes.listItem}>
<ListItem className={classes.listItem} style={{marginTop:"10px"}}>
<Button
href="/login"
className={classes.registerNavLink}
@@ -157,7 +156,7 @@ export default function HeaderLinks(props) {
>
<Icon className={classes.icons}>input</Icon> Login
</Button>
</ListItem> */}
</ListItem>
</List>
);
}

+ 25
- 34
pages-sections/dealers/dealers.js View File

@@ -13,15 +13,9 @@ import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);
const DataDealer = function ({ backend, dealers, ...props }) {
const DataDealer = function ({ selected, handleName, backend, dealers, ...props }) {
const classes = useStyles();
// const handleKotaDealer = value => {
// console.log(value)
// }
const handleName = values => {
console.log(values)
}

const Dealers = dealers.map((data) => {
return (
<div>
@@ -49,32 +43,29 @@ const DataDealer = function ({ backend, dealers, ...props }) {
);
})
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Dealers & Service</h2>
</div>
<Select
getOptionLabel={option => `${option.name} ${option.kota_dealer}`}
getOptionValue={option => option.id}
options={dealers}
instanceId="name"
placeholder="filter by Nama Dealer"
onChange={values => handleName(values)}
/>
<br></br>
{/* <Select
getOptionLabel={option => `${option.kota_dealer} ${option.kota_dealer}`}
getOptionValue={option => option.id}
options={dealers}
instanceId="kota_dealer"
placeholder="filter by Kota Dealer"
onChange={value => handleKotaDealer(value.map(kota_dealer => kota_dealer.id))}
/> */}
<div>
<GridContainer justify="center">
{Dealers}
</GridContainer>
</div>
<div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Dealers</h2>
<Select
value={(selected)?accessories.filter((i)=>i.id==selected):null}
getOptionLabel={option => `${option.name}`}
getOptionValue={option => option.id}
options={dealers}
isMulti
instanceId="name"
placeholder="filter by Nama Part"
onChange={values => handleName(values)}
/>
<br></br>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{Dealers}
{Dealers}
</GridContainer>
</div>
</CardBody>
</Card>
</div>
);
}


+ 0
- 28
pages-sections/dealers/filter.js View File

@@ -1,28 +0,0 @@
import React from "react";
import Select from 'react-select';

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

// Component
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

const DataSnackbarContent = function() {
const classes = useStyles();
return (
<div align="center">
<div align="center" className={classes.section} id="notifications">
<Select
// options={name}
instanceId="name"
isMulti
placeholder="filter by name"
/>
</div>
</div>
);
}

export default DataSnackbarContent;

+ 13
- 0
pages-sections/home/carousel.js View File

@@ -6,6 +6,7 @@ import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Carousel from "react-slick";
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(styles);
const DataCarousel = function ({ backend, carousel, ...props }) {
@@ -39,6 +40,18 @@ const DataCarousel = function ({ backend, carousel, ...props }) {
</Card>
</GridItem>
</GridContainer>
<GridContainer style={{marginTop:"-30px"}}>
<Grid style={{padding:"35px"}}>
<Card>
<iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}/>
</Card>
</Grid>
<Grid style={{padding:"35px"}}>
<Card>
<iframe width="555" height="450" src="https://www.youtube.com/embed/zkbnKHqcez4?list=PLGDlwziWaTGKL0aphOH8j_6D29JQ1TgYY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}/>
</Card>
</Grid>
</GridContainer>
</div>
</div>
</div>


+ 119
- 0
pages-sections/home/feature.js View File

@@ -0,0 +1,119 @@
import React, { Component } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Card from "components/Card/Card.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";

import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
import { cardTitle } from "assets/jss/nextjs-material-kit.js";

const styles = {
...imagesStyles,
cardTitle,
};

const useStyles = makeStyles(styles);
const DataFeature = function ({ backend, service, ...props }) {
const classes = useStyles();
return (
<div className={classes.section} id="notifications">
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>Feature Product</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<div align="center">
<img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/>
</div>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<div align="center">
<img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
</div>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<div align="center">
<img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
</div>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
<Grid>
<Card style={{height: "250px", width: "400px", padding:"20px"}}>
<div align="center">
<img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
</div>
{/* <div className={classes.imgCardOverlay}>
<div align="center" style={{marginTop:"120px"}}>
<Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
<Icon className={classes.icons}>open_in_new</Icon>For More Info
</Button>
</div>
</div> */}
</Card>
</Grid>
</GridContainer>
</div>
);
}

export default DataFeature;

+ 0
- 9
pages-sections/home/sosmed.js View File

@@ -20,15 +20,6 @@ const styles = {
const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props }) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
time: 5
};
return (
<div className={classes.section} id="notifications">
<div align="center" className={classes.section} id="notifications">


+ 1
- 0
pages-sections/latest_news/news.js View File

@@ -26,6 +26,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
/>
<CardBody>
<p>{data.title}</p>
<p>{data.published_at}</p>
<Button color="info" round href={"/latestnews_details?s="+data.id}>
<Icon className={classes.icons}>open_in_new</Icon>Read More
</Button>


+ 0
- 1
pages-sections/product/accessories.js View File

@@ -23,7 +23,6 @@ const DataAccessories = function ({ selected, handleName, backend, accessories,
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductAccessories = accessories.map((data) => {
console.log(data);
return (
<div style={{padding:"40px"}}>
<img


+ 76
- 116
pages-sections/product/product.js View File

@@ -14,9 +14,10 @@ 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 Icon from "@material-ui/core/Icon";
import { Motorcycle } from "@material-ui/icons";

const useStyles = makeStyles(styles);
const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes, bpr, emilia, homes, ...props }) {
const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, moped, monsterenergy, cbu, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
@@ -25,18 +26,14 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const Productyamaha = yamaha.map((data) => {
const Productmaxi = maxi.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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}
@@ -47,21 +44,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Productsuzuki = suzuki.map((data) => {
const Productmatic = matic.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -69,21 +62,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Producthonda = honda.map((data) => {
const Productnaked = naked.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -91,21 +80,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Producthino = hino.map((data) => {
const Productsport = sport.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -113,21 +98,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Productmercedes = mercedes.map((data) => {
const Productoffroad = offroad.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -135,21 +116,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Productbpr = bpr.map((data) => {
const Productmoped = moped.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -157,21 +134,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Productemilia = emilia.map((data) => {
const Productmonsterenergy = monsterenergy.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -179,21 +152,17 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
</div>
);
})
const Producthomes = homes.map((data) => {
const Productcbu = cbu.map((data) => {
return (
<div>
<img
alt="..."
style={{ height: "350px", display: "block" }}
src={`${backend}${data.img[0]["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<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_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
@@ -217,92 +186,83 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
color="primary"
tabs={[
{
tabButton: "Maxi Yamaha",
tabIcon: Dashboard,
tabButton: "Maxi",
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Productyamaha}
{Productmaxi}
</GridContainer>
),
},
{
tabButton: "Matic",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Productsuzuki}
{Productmatic}
</GridContainer>
),
},
{
tabButton: "Naked Bike",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Producthonda}
{Productnaked}
</GridContainer>
),
},
{
tabButton: "Sport",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Producthino}
{Productsport}
</GridContainer>
),
},
{
tabButton: "Off Road",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Productmercedes}
{Productoffroad}
</GridContainer>
),
},
{
tabButton: "Moped",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Productmercedes}
{Productmoped}
</GridContainer>
),
},
{
tabButton: "Monster Energy MotoGP",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Productemilia}
{Productmonsterenergy}
</GridContainer>
),
},
{
tabButton: "CBU",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Producthomes}
{Productcbu}
</GridContainer>
),
},
{
tabButton: "ATV",
tabIcon: Dashboard,
tabContent: (
<GridContainer justify="center">
{Producthomes}
</GridContainer>
),
},
{
tabButton: "Power Product",
tabIcon: Dashboard,
tabIcon: Motorcycle,
tabContent: (
<GridContainer justify="center">
{Producthomes}
{Productcbu}
</GridContainer>
),
},


+ 2
- 4
pages-sections/product/ygp.js View File

@@ -24,20 +24,18 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductYGP = ygp.map((data) => {
return (
<div style={{padding:"40px"}}>
<div style={{padding:"50px"}} align="center">
<img
alt="..."
style={{ height: "150px", display: "block" }}
style={{ height: "150px", width:"250px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<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>
</div>
);
})


+ 3
- 2
pages/carrer.js View File

@@ -5,9 +5,10 @@ import { makeStyles } from "@material-ui/core/styles";
import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import SectionCarrer from "pages-sections/carrer/carrer.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import SectionCarrer from "pages-sections/carrer/carrer.js";
import Getcarrer from "../api/carrer/carrer.js"

const useStyles = makeStyles(styles);
@@ -58,7 +59,7 @@ export async function getServerSideProps(context) {
if (res["STATUS"] === 1) {
sma = res["DATA"]["carrers"];
}
return {
props: { s1, d3, sma, backend }, // will be passed to the page component as props
};

+ 19
- 7
pages/dealers.js View File

@@ -1,20 +1,29 @@
import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import Router from 'next/router'

import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";
import Footer from "components/Footer/Footer.js";

import Getdealer from "../api/dealer/dealer.js";
import DataSnackbarContent from "../pages-sections/snackbar.js";
import DataDealers from "../pages-sections/dealers/dealers.js";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()
const handleName = values => {
Router.push({
pathname: '/dealers',
query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
})
}

const useStyles = makeStyles(styles);
const Dealers = function ({ backend, dealers, ...props }) {
const Dealers = function ({ selected, backend, dealers, ...props }) {
const classes = useStyles();
const { ...rest } = props;

@@ -34,8 +43,7 @@ const Dealers = function ({ backend, dealers, ...props }) {
<div className={classNames(classes.main, classes.mainRaised)}>
<QueryClientProvider client={queryClient}>
<DataSnackbarContent />
<DataDealers dealers={dealers} backend={backend} />
{/* <Filter /> */}
<DataDealers selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} dealers={dealers} backend={backend} />
</QueryClientProvider>
</div>
<Footer />
@@ -47,16 +55,20 @@ export default Dealers;

export async function getServerSideProps(context) {
var dealers = [];
var filter = context.query.filter||"";
var selected = "";

const backend = process.env.BACKEND_SERVER_URI;

var res = await Getdealer.GetDealers();
var res = await Getdealer.GetDealers(filter);
if (res["STATUS"] === 1) {
dealers = res["DATA"]["dealers"];
if (filter !=""){
selected = dealers.filter((i)=>i.name==filter);
}
}

console.log(res);

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

+ 3
- 0
pages/home.js View File

@@ -7,6 +7,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";
import Footer from "components/Footer/Footer.js";

import GetbusinessPartners from "../api/home/businessPartner.js";
import Getservices from "../api/home/service.js";
import Getcarousels from "../api/home/carousel.js";
@@ -16,6 +17,7 @@ import DataService from "../pages-sections/home/service.js";
import DataBusinessPartner from "../pages-sections/home/business_partner.js";
import DataSosmed from "../pages-sections/home/sosmed.js";
import CoreValue from "../pages-sections/home/core_value.js";
import DataFeature from "../pages-sections/home/feature.js";

const useStyles = makeStyles(styles);
const Home = function ({
@@ -47,6 +49,7 @@ const Home = function ({
<CoreValue />
<DataCarousel carousel={carousel} backend={backend} />
<DataService service={service} backend={backend} />
<DataFeature />
<DataBusinessPartner businessPartners={businessPartners} backend={backend} />
<DataSosmed service={service} backend={backend} />
</div>


+ 50
- 48
pages/product/product.js View File

@@ -15,14 +15,14 @@ const useStyles = makeStyles(styles);

const Product = function ({
backend,
yamaha,
suzuki,
honda,
hino,
mercedes,
bpr,
emilia,
homes,
maxi,
matic,
naked,
sport,
offroad,
moped,
monsterenergy,
cbu,
...props
}) {
const classes = useStyles();
@@ -42,14 +42,14 @@ const Product = function ({
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}>
<DataProduct
yamaha={yamaha}
suzuki={suzuki}
honda={honda}
hino={hino}
mercedes={mercedes}
bpr={bpr}
emilia={emilia}
homes={homes}
maxi={maxi}
matic={matic}
naked={naked}
sport={sport}
offroad={offroad}
moped={moped}
monsterenergy={monsterenergy}
cbu={cbu}
backend={backend}
/>
</div>
@@ -61,66 +61,68 @@ const Product = function ({
export default Product;

export async function getServerSideProps(context) {
var yamaha = [];
var suzuki = [];
var honda = [];
var hino = [];
var mercedes = [];
var bpr = [];
var emilia = [];
var homes = [];
var maxi = [];
var matic = [];
var naked = [];
var sport = [];
var offroad = [];
var moped = [];
var monsterenergy = [];
var cbu = [];
const backend = process.env.BACKEND_SERVER_URI;

var res = await Getproduct.GetProductYamaha();
var res = await Getproduct.GetProductMaxi();
if (res["STATUS"] === 1) {
yamaha = res["DATA"]["products"];
maxi = res["DATA"]["products"];
}

var res = await Getproduct.GetProductSuzuki();
var res = await Getproduct.GetProductMatic();
if (res["STATUS"] === 1) {
suzuki = res["DATA"]["products"];
matic = res["DATA"]["products"];
}

var res = await Getproduct.GetProductHonda();
var res = await Getproduct.GetProductNaked();
if (res["STATUS"] === 1) {
honda = res["DATA"]["products"];
naked = res["DATA"]["products"];
}

var res = await Getproduct.GetProductHino();
var res = await Getproduct.GetProductSport();
if (res["STATUS"] === 1) {
hino = res["DATA"]["products"];
sport = res["DATA"]["products"];
}

var res = await Getproduct.GetProductMercedes();
var res = await Getproduct.GetProductOffRoad();
if (res["STATUS"] === 1) {
mercedes = res["DATA"]["products"];
offroad = res["DATA"]["products"];
}

var res = await Getproduct.GetProductBPR();
var res = await Getproduct.GetProductMoped();
if (res["STATUS"] === 1) {
bpr = res["DATA"]["products"];
moped = res["DATA"]["products"];
}

var res = await Getproduct.GetProductEmilia();
var res = await Getproduct.GetProductMonsterEnergy();
if (res["STATUS"] === 1) {
emilia = res["DATA"]["products"];
monsterenergy = res["DATA"]["products"];
}

var res = await Getproduct.GetProductHomes();
var res = await Getproduct.GetProductCBU();
if (res["STATUS"] === 1) {
homes = res["DATA"]["products"];
cbu = res["DATA"]["products"];
}

console.log(cbu);

return {
props: {
yamaha,
suzuki,
honda,
hino,
mercedes,
bpr,
emilia,
homes,
maxi,
matic,
naked,
sport,
offroad,
moped,
monsterenergy,
cbu,
backend,
}, // will be passed to the page component as props
};


+ 0
- 1
pages/product/ygp.js View File

@@ -22,7 +22,6 @@ const handleName = values => {
pathname: '/product/ygp',
query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
})

}
const YGP = function ({ selected,ygp, backend, ...props }) {
const classes = useStyles();


Write Preview
Loading…
Cancel
Save