yusmar
/
tbg-ecomm-nextjs
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

fix helm model

master
Yusmardianto 4 år sedan
förälder
c90376c654
incheckning
065eb450fa
8 ändrade filer med 531 tillägg och 21 borttagningar
Unifierad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +183
    -0
      api/product/helmet.js
  2. +273
    -8
      pages-sections/product/helmet.js
  3. +1
    -1
      pages-sections/product/helmet_details.js
  4. +1
    -1
      pages-sections/product/yamalube.js
  5. +1
    -1
      pages-sections/product/ygp.js
  6. +69
    -6
      pages/product/helmet.js
  7. +3
    -3
      pages/product/helmet_details.js
  8. +0
    -1
      pages/product/yamalube_details.js

+ 183
- 0
api/product/helmet.js Visa fil

@@ -0,0 +1,183 @@
import apollo from "../../lib/apollo.js";

async function GetHelmetRConcepts(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "RCONCEPTS" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetMTX(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "MTX" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetExtreme(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "EXTREME" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetRanger(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "RANGER" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetFighter(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "FIGHTER" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetSwirl(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "SWIRL" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetClassic(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "CLS" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}

async function GetHelmetUno(filter, token="") {
var res = await apollo.query(
`
query {
helmets(where: { category: "UNO" ${(filter!="")?`name: "${filter}"`:""}}) {
id
name
price
img {
url
}
}
}`,
token
);
return res;
}


async function GetDetailHelmet(id, token="") {
var res = await apollo.query(
`
query($input: ID!){
helmets(where:{id:$input})
{
id
name
description
price
part_code
img {
url
}
stock
}
} `,
token,
{
"input": id
}
);
return res;
}

module.exports = {
GetHelmetRConcepts:GetHelmetRConcepts,
GetHelmetMTX:GetHelmetMTX,
GetHelmetExtreme:GetHelmetExtreme,
GetHelmetRanger:GetHelmetRanger,
GetHelmetFighter:GetHelmetFighter,
GetHelmetSwirl:GetHelmetSwirl,
GetHelmetClassic:GetHelmetClassic,
GetHelmetUno:GetHelmetUno,
GetDetailHelmet:GetDetailHelmet,
};

+ 273
- 8
pages-sections/product/helmet.js Visa fil

@@ -9,10 +9,12 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
import Card from "components/Card/Card.js"; import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js"; import CardBody from "components/Card/CardBody.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import { MoveToInboxOutlined } from "@material-ui/icons";


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }) {
const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
const imageClasses = classNames( const imageClasses = classNames(
@@ -21,7 +23,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
classes.imgFluid classes.imgFluid
); );
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductHelmet = helmet.map((data) => {
const ProductHelmetRConcepts = helmet.map((data) => {
return ( return (
<div style={{padding:"40px"}}> <div style={{padding:"40px"}}>
<img <img
@@ -31,7 +33,161 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
className={navImageClasses} className={navImageClasses}
/> />
<div align="center"> <div align="center">
<h3>{data.name}</h3>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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> <h4>Rp.{data.price}</h4>
<Button <Button
color="info" round color="info" round
@@ -45,7 +201,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
}) })
return ( return (
<div> <div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<Card className={classes.textCenter} style={{padding:"5px"}}>
<CardBody> <CardBody>
<div align="center" style={{marginTop:"-50px"}}> <div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Helmet</h2> <h2>Yamaha Helmet</h2>
@@ -56,14 +212,123 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
options={helmet} options={helmet}
isMulti isMulti
instanceId="name" instanceId="name"
placeholder="filter by Nama Part"
placeholder="Search"
onChange={values => handleName(values)} onChange={values => handleName(values)}
/> />
<br></br>
<br></br><br></br><br></br>
</div>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>R CONCEPT</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetRConcepts}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>MTX</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetMTX}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>EXTREME</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetExtreme}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>RANGER</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetRanger}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>FIGHTER</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetFighter}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>SWIRL</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetSwirl}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>CLASSIC</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmetClassic}
</GridContainer>
</div><br></br><br></br>
<div align="center" style={{marginTop:"-50px"}}>
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>UNO</h4>
}
align="center"
color="danger"
/>
</div>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}> <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmet}{ProductHelmet}{ProductHelmet}
{ProductHelmetUno}
</GridContainer> </GridContainer>
</div>
</div><br></br><br></br>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>


+ 1
- 1
pages-sections/product/helmet_details.js Visa fil

@@ -64,7 +64,7 @@ const DetailDataHelmet = function ({ backend, detailhelmet, ...props }) {
<hr></hr> <hr></hr>
<ul> <ul>
<li><h4>Stock : {data.stock}</h4></li> <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> </ul>
</Grid> </Grid>
</GridContainer> </GridContainer>


+ 1
- 1
pages-sections/product/yamalube.js Visa fil

@@ -32,7 +32,7 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro
className={navImageClasses} className={navImageClasses}
/> />
<div align="center"> <div align="center">
<h3>{data.name}</h3>
<h4>{data.name}</h4>
<h4>Rp.{data.price}</h4> <h4>Rp.{data.price}</h4>
<Button <Button
color="info" round color="info" round


+ 1
- 1
pages-sections/product/ygp.js Visa fil

@@ -31,7 +31,7 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
src={`${backend}${data.img["url"]}`} src={`${backend}${data.img["url"]}`}
className={navImageClasses} className={navImageClasses}
/> />
<h3>{data.name}</h3>
<h4>{data.name}</h4>
<h4>Rp.{data.price}</h4> <h4>Rp.{data.price}</h4>
<Button color="info" round href={"/product/ygp_details?s="+data.id}> <Button color="info" round href={"/product/ygp_details?s="+data.id}>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product <Icon className={classes.icons}>open_in_new</Icon>Detail Product


+ 69
- 6
pages/product/helmet.js Visa fil

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


import GetDataHelmet from "../../api/product/accessories.js";
import GetDataHelmet from "../../api/product/helmet.js"
import DataHelmet from "../../pages-sections/product/helmet.js"; import DataHelmet from "../../pages-sections/product/helmet.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js"; import DataSnackbarContent from "../../pages-sections/snackbar.js";
import Router from 'next/router' import Router from 'next/router'
@@ -22,7 +22,7 @@ const handleName = values => {
query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{}, query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
}) })
} }
const Helmet = function ({ selected, helmet, backend, ...props }) {
const Helmet = function ({ selected, helmet, mtx, extreme, ranger, backend, fighter, swirl, classic, uno, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
return ( return (
@@ -41,7 +41,7 @@ const Helmet = function ({ selected, helmet, backend, ...props }) {
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<DataSnackbarContent/> <DataSnackbarContent/>
<DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} backend={backend} />
<DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} mtx={mtx} extreme={extreme} ranger={ranger} fighter={fighter} swirl={swirl} classic={classic} uno={uno} backend={backend} />
</QueryClientProvider> </QueryClientProvider>
</div> </div>
<Footer /> <Footer />
@@ -53,20 +53,83 @@ export default Helmet;


export async function getServerSideProps(context) { export async function getServerSideProps(context) {
var helmet = []; var helmet = [];
var mtx = [];
var extreme = [];
var ranger = [];
var fighter = [];
var swirl = [];
var classic = [];
var uno = [];
var filter = context.query.filter||""; var filter = context.query.filter||"";
var selected = ""; var selected = "";


const backend = process.env.BACKEND_SERVER_URI; const backend = process.env.BACKEND_SERVER_URI;
var res = await GetDataHelmet.GetHelmet(filter);
var res = await GetDataHelmet.GetHelmetRConcepts(filter);
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
helmet = res["DATA"]["accessories"];
helmet = res["DATA"]["helmets"];
if (filter !=""){ if (filter !=""){
selected = helmet.filter((i)=>i.name==filter); selected = helmet.filter((i)=>i.name==filter);
} }
} }


var res = await GetDataHelmet.GetHelmetMTX(filter);
if (res["STATUS"] === 1) {
mtx = res["DATA"]["helmets"];
if (filter !=""){
selected = mtx.filter((i)=>i.name==filter);
}
}

var res = await GetDataHelmet.GetHelmetExtreme(filter);
if (res["STATUS"] === 1) {
extreme = res["DATA"]["helmets"];
if (filter !=""){
selected = extreme.filter((i)=>i.name==filter);
}
}

var res = await GetDataHelmet.GetHelmetRanger(filter);
if (res["STATUS"] === 1) {
ranger = res["DATA"]["helmets"];
if (filter !=""){
selected = ranger.filter((i)=>i.name==filter);
}
}

var res = await GetDataHelmet.GetHelmetFighter(filter);
if (res["STATUS"] === 1) {
fighter = res["DATA"]["helmets"];
if (filter !=""){
selected = fighter.filter((i)=>i.name==filter);
}
}

var res = await GetDataHelmet.GetHelmetSwirl(filter);
if (res["STATUS"] === 1) {
swirl = res["DATA"]["helmets"];
if (filter !=""){
selected = swirl.filter((i)=>i.name==filter);
}
}
var res = await GetDataHelmet.GetHelmetClassic(filter);
if (res["STATUS"] === 1) {
classic = res["DATA"]["helmets"];
if (filter !=""){
selected = classic.filter((i)=>i.name==filter);
}
}

var res = await GetDataHelmet.GetHelmetUno(filter);
if (res["STATUS"] === 1) {
uno = res["DATA"]["helmets"];
if (filter !=""){
selected = uno.filter((i)=>i.name==filter);
}
}

return { return {
props: { selected, helmet, backend }, // will be passed to the page component as props
props: { selected, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, backend }, // will be passed to the page component as props
}; };
} }

+ 3
- 3
pages/product/helmet_details.js Visa fil

@@ -8,7 +8,7 @@ import Footer from "components/Footer/Footer.js";
import HelmetDetail from "pages-sections/product/helmet_details.js"; import HelmetDetail from "pages-sections/product/helmet_details.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";
import GetDetailHelmet from "../../api/product/accessories.js"
import GetDetailHelmet from "../../api/product/helmet.js"


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


@@ -43,9 +43,9 @@ export async function getServerSideProps(context) {
var detailhelmet = []; var detailhelmet = [];
const backend = process.env.BACKEND_SERVER_URI; const backend = process.env.BACKEND_SERVER_URI;


var res = await GetDetailHelmet.GetDetailAccessories(query.s||0);
var res = await GetDetailHelmet.GetDetailHelmet(query.s||0);
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
detailhelmet = res["DATA"]["accessories"];
detailhelmet = res["DATA"]["helmets"];
} }
console.log(detailhelmet); console.log(detailhelmet);




+ 0
- 1
pages/product/yamalube_details.js Visa fil

@@ -47,7 +47,6 @@ export async function getServerSideProps(context) {
if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
detailyamalube = res["DATA"]["accessories"]; detailyamalube = res["DATA"]["accessories"];
} }
console.log(detailyamalube);


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


Skriv Förhandsgranska
Laddar…
Avbryt
Spara