diff --git a/api/product/accessories.js b/api/product/accessories.js index 00222d9..c6c6200 100644 --- a/api/product/accessories.js +++ b/api/product/accessories.js @@ -100,10 +100,45 @@ async function GetAccessories(token="") { return res; } +async function GetDetailAccessories(id, token="") { + var res = await apollo.query( + ` + query($input: ID!){ + accessories(where:{id:$input}) + { + id + name + description + price + part_code + img { + url + } + img_relate1{ + url + } + img_relate2{ + url + } + img_relate3{ + url + } + stock + } + } `, + token, + { + "input": id + } + ); + return res; +} + module.exports = { GetYGP:GetYGP, GetYamalube:GetYamalube, GetHelmet:GetHelmet, GetApparel:GetApparel, GetAccessories:GetAccessories, + GetDetailAccessories:GetDetailAccessories, }; \ No newline at end of file diff --git a/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png b/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png new file mode 100644 index 0000000..66168c4 Binary files /dev/null and b/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png differ diff --git a/pages-sections/product/accessories.js b/pages-sections/product/accessories.js index af79655..4b84795 100644 --- a/pages-sections/product/accessories.js +++ b/pages-sections/product/accessories.js @@ -36,7 +36,7 @@ const DataAccessories = function ({ backend, accessories, ...props }) {

Rp.{data.price}

diff --git a/pages-sections/product/accessories_details.js b/pages-sections/product/accessories_details.js index e69de29..e7a326e 100644 --- a/pages-sections/product/accessories_details.js +++ b/pages-sections/product/accessories_details.js @@ -0,0 +1,109 @@ +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; +import ReactHtmlParser from "react-html-parser"; +import Dashboard from "@material-ui/icons/Dashboard"; +import Icon from "@material-ui/core/Icon"; + +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +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 Carousel from "react-slick"; + +const useStyles = makeStyles(styles); + +const DetailDataAccessories = function ({ backend, detailaccessories, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + time: 5 + }; + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Accessoriesdetails = detailaccessories.map((data) => { + return ( +
+ + +
+
+
+ + + + + First slide + + + + +
+
+
+ + +

{data.name}

+

Rp.{data.price}

+
+
    +

  • Stock : {data.stock}

    • +

  • Part Code : {data.part_code}

    • +
+ + + + + + + + + + + + + +
+
+

Deskripsi

+
+
+

{ReactHtmlParser(data.description)}

+
+
+ ); + }) + return ( + +
+ Product Detail +
+ +
+ {Accessoriesdetails} +
+ + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DetailDataAccessories; \ No newline at end of file diff --git a/pages-sections/product/apparel.js b/pages-sections/product/apparel.js index c7ecb05..5e0768f 100644 --- a/pages-sections/product/apparel.js +++ b/pages-sections/product/apparel.js @@ -35,7 +35,7 @@ const DataApparel = function ({ backend, apparel, ...props }) {

Rp.{data.price}

diff --git a/pages-sections/product/apparel_details.js b/pages-sections/product/apparel_details.js index e69de29..f66d897 100644 --- a/pages-sections/product/apparel_details.js +++ b/pages-sections/product/apparel_details.js @@ -0,0 +1,109 @@ +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; +import ReactHtmlParser from "react-html-parser"; +import Dashboard from "@material-ui/icons/Dashboard"; +import Icon from "@material-ui/core/Icon"; + +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +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 Carousel from "react-slick"; + +const useStyles = makeStyles(styles); + +const DetailDataApparel = function ({ backend, detailapparel, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + time: 5 + }; + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Appareldetails = detailapparel.map((data) => { + return ( +
+ + +
+
+
+ + + + + First slide + + + + +
+
+
+ + +

{data.name}

+

Rp.{data.price}

+
+
    +

  • Stock : {data.stock}

    • +

  • Part Code : {data.part_code}

    • +
+ + + + + + + + + + + + + +
+
+

Deskripsi

+
+
+

{ReactHtmlParser(data.description)}

+
+
+ ); + }) + return ( + +
+ Product Detail +
+ +
+ {Appareldetails} +
+ + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DetailDataApparel; \ No newline at end of file diff --git a/pages-sections/product/helmet.js b/pages-sections/product/helmet.js index 22f0b3a..09c3ac9 100644 --- a/pages-sections/product/helmet.js +++ b/pages-sections/product/helmet.js @@ -35,7 +35,7 @@ const DataHelmet = function ({ backend, helmet, ...props }) {

Rp.{data.price}

diff --git a/pages-sections/product/helmet_details.js b/pages-sections/product/helmet_details.js index e69de29..93c32a0 100644 --- a/pages-sections/product/helmet_details.js +++ b/pages-sections/product/helmet_details.js @@ -0,0 +1,109 @@ +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; +import ReactHtmlParser from "react-html-parser"; +import Dashboard from "@material-ui/icons/Dashboard"; +import Icon from "@material-ui/core/Icon"; + +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +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 Carousel from "react-slick"; + +const useStyles = makeStyles(styles); + +const DetailDataHelmet = function ({ backend, detailhelmet, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + time: 5 + }; + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Helmetdetails = detailhelmet.map((data) => { + return ( +
+ + +
+
+
+ + + + + First slide + + + + +
+
+
+ + +

{data.name}

+

Rp.{data.price}

+
+
    +

  • Stock : {data.stock}

    • +

  • Part Code : {data.part_code}

    • +
+ + + + + + + + + + + + + +
+
+

Deskripsi

+
+
+

{ReactHtmlParser(data.description)}

+
+
+ ); + }) + return ( + +
+ Product Detail +
+ +
+ {Helmetdetails} +
+ + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DetailDataHelmet; \ No newline at end of file diff --git a/pages-sections/product/yamalube.js b/pages-sections/product/yamalube.js index 74e032d..1c65e51 100644 --- a/pages-sections/product/yamalube.js +++ b/pages-sections/product/yamalube.js @@ -35,7 +35,7 @@ const DataYamalube = function ({ backend, yamalube, ...props }) {

Rp.{data.price}

diff --git a/pages-sections/product/yamalube_details.js b/pages-sections/product/yamalube_details.js index e69de29..cacb1cc 100644 --- a/pages-sections/product/yamalube_details.js +++ b/pages-sections/product/yamalube_details.js @@ -0,0 +1,109 @@ +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; +import ReactHtmlParser from "react-html-parser"; +import Dashboard from "@material-ui/icons/Dashboard"; +import Icon from "@material-ui/core/Icon"; + +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +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 Carousel from "react-slick"; + +const useStyles = makeStyles(styles); + +const DetailDataYamalube = function ({ backend, detailyamalube, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + time: 5 + }; + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const Yamalubedetails = detailyamalube.map((data) => { + return ( +
+ + +
+
+
+ + + + + First slide + + + + +
+
+
+ + +

{data.name}

+

Rp.{data.price}

+
+
    +

  • Stock : {data.stock}

    • +

  • Part Code : {data.part_code}

    • +
+ + + {/* + + + + + + + + + + */} +
+
+

Deskripsi

+
+
+

{ReactHtmlParser(data.description)}

+
+
+ ); + }) + return ( + +
+ Product Detail +
+ +
+ {Yamalubedetails} +
+ + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DetailDataYamalube; \ No newline at end of file diff --git a/pages-sections/product/ygp.js b/pages-sections/product/ygp.js index f1d7774..acbdcc9 100644 --- a/pages-sections/product/ygp.js +++ b/pages-sections/product/ygp.js @@ -35,7 +35,7 @@ const DataYGP = function ({ backend, ygp, ...props }) {

Rp.{data.price}

diff --git a/pages-sections/product/ygp_details.js b/pages-sections/product/ygp_details.js index e69de29..f0886c7 100644 --- a/pages-sections/product/ygp_details.js +++ b/pages-sections/product/ygp_details.js @@ -0,0 +1,97 @@ +import React, { useState, useEffect } from "react"; +import classNames from "classnames"; +import { makeStyles } from "@material-ui/core/styles"; +import ReactHtmlParser from "react-html-parser"; +import Dashboard from "@material-ui/icons/Dashboard"; +import Icon from "@material-ui/core/Icon"; + +import GridContainer from "components/Grid/GridContainer.js"; +import Grid from '@material-ui/core/Grid'; +import GridItem from "components/Grid/GridItem.js"; +import NavPills from "components/NavPills/NavPills.js"; +import Card from "components/Card/Card.js"; +import CardBody from "components/Card/CardBody.js"; +import CardHeader from "components/Card/CardHeader.js"; +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"; + +const useStyles = makeStyles(styles); + +const DetailDataYGP = function ({ backend, detailygp, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + const imageClasses = classNames( + classes.imgRaised, + classes.imgRoundedCircle, + classes.imgFluid + ); + const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); + const YGPdetails = detailygp.map((data) => { + return ( +
+ + +
+
+
+ + + + First slide + + + +
+
+
+ + +

{data.name}

+

Rp.{data.price}

+
+
    +

  • Stock : {data.stock}

    • +

  • Part Code : {data.part_code}

    • +
+ + + + + + + + + + + + + +
+
+

Deskripsi

+
+
+

{ReactHtmlParser(data.description)}

+
+
+ ); + }) + return ( + +
+ Product Detail +
+ +
+ {YGPdetails} +
+ + + © 2020 , All Right Reserved by @Thamrin Brother Company + + + ); +} + +export default DetailDataYGP; \ No newline at end of file diff --git a/pages/product/accessories_details.js b/pages/product/accessories_details.js new file mode 100644 index 0000000..5f41927 --- /dev/null +++ b/pages/product/accessories_details.js @@ -0,0 +1,55 @@ +import React from "react"; +import classNames from "classnames"; +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 AccessoriesDetail from "pages-sections/product/accessories_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailAccessories from "../../api/product/accessories.js" + +const useStyles = makeStyles(styles); + +const AccessoriesDetails = function ({ backend, detailaccessories, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+ ); +} + +export default AccessoriesDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailaccessories = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailAccessories.GetDetailAccessories(query.s||0); + if (res["STATUS"] === 1) { + detailaccessories = res["DATA"]["accessories"]; + } + console.log(detailaccessories); + + return { + props: { detailaccessories, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/apparel_details.js b/pages/product/apparel_details.js new file mode 100644 index 0000000..c378c03 --- /dev/null +++ b/pages/product/apparel_details.js @@ -0,0 +1,55 @@ +import React from "react"; +import classNames from "classnames"; +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 ApparelDetail from "pages-sections/product/apparel_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailApparel from "../../api/product/accessories.js" + +const useStyles = makeStyles(styles); + +const ApparelDetails = function ({ backend, detailapparel, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+ ); +} + +export default ApparelDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailapparel = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailApparel.GetDetailAccessories(query.s||0); + if (res["STATUS"] === 1) { + detailapparel = res["DATA"]["accessories"]; + } + console.log(detailapparel); + + return { + props: { detailapparel, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/helmet_details.js b/pages/product/helmet_details.js new file mode 100644 index 0000000..e70a7f8 --- /dev/null +++ b/pages/product/helmet_details.js @@ -0,0 +1,55 @@ +import React from "react"; +import classNames from "classnames"; +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 HelmetDetail from "pages-sections/product/helmet_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailHelmet from "../../api/product/accessories.js" + +const useStyles = makeStyles(styles); + +const HelmetDetails = function ({ backend, detailhelmet, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+ ); +} + +export default HelmetDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailhelmet = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailHelmet.GetDetailAccessories(query.s||0); + if (res["STATUS"] === 1) { + detailhelmet = res["DATA"]["accessories"]; + } + console.log(detailhelmet); + + return { + props: { detailhelmet, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/yamalube_details.js b/pages/product/yamalube_details.js new file mode 100644 index 0000000..6c38e0b --- /dev/null +++ b/pages/product/yamalube_details.js @@ -0,0 +1,55 @@ +import React from "react"; +import classNames from "classnames"; +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 YamalubeDetail from "pages-sections/product/yamalube_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailYamalube from "../../api/product/accessories.js" + +const useStyles = makeStyles(styles); + +const YamalubeDetails = function ({ backend, detailyamalube, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+ ); +} + +export default YamalubeDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailyamalube = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailYamalube.GetDetailAccessories(query.s||0); + if (res["STATUS"] === 1) { + detailyamalube = res["DATA"]["accessories"]; + } + console.log(detailyamalube); + + return { + props: { detailyamalube, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file diff --git a/pages/product/ygp_details.js b/pages/product/ygp_details.js new file mode 100644 index 0000000..4e27082 --- /dev/null +++ b/pages/product/ygp_details.js @@ -0,0 +1,55 @@ +import React from "react"; +import classNames from "classnames"; +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 YGPDetail from "pages-sections/product/ygp_details.js"; +import Parallax from "components/Parallax/Parallax.js"; +import styles from "assets/jss/nextjs-material-kit/pages/components.js"; +import GetDetailYGP from "../../api/product/accessories.js" + +const useStyles = makeStyles(styles); + +const YGPDetails = function ({ backend, detailygp, ...props }) { + const classes = useStyles(); + const { ...rest } = props; + return ( +
+
} + fixed + color="info" + changeColorOnScroll={{ + height: 400, + color: "white" + }} + {...rest} + /> + +
+ +
+
+ ); +} + +export default YGPDetails; + +export async function getServerSideProps(context) { + var {query} = context; + var detailygp = []; + const backend = process.env.BACKEND_SERVER_URI; + + var res = await GetDetailYGP.GetDetailAccessories(query.s||0); + if (res["STATUS"] === 1) { + detailygp = res["DATA"]["accessories"]; + } + console.log(detailygp); + + return { + props: { detailygp, backend }, // will be passed to the page component as props + }; +} \ No newline at end of file