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

yarn build

master
Yusmardianto il y a 4 ans
Parent
7b751aa54f
révision
c90376c654
20 fichiers modifiés avec 516 ajouts et 583 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +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 Voir le fichier

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Écrire Aperçu
Chargement…
Annuler
Enregistrer