Commit a1c19a74 authored by chaiwat's avatar chaiwat

add vanta, link, getstart

parent 088c9723
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"react-google-maps": "^9.4.5", "react-google-maps": "^9.4.5",
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"vanta": "^0.5.21",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
......
...@@ -12,6 +12,12 @@ ...@@ -12,6 +12,12 @@
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script> <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<!-- import vanta -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<title>Repair Center</title> <title>Repair Center</title>
<style> <style>
.da-contact-card .ant-table-tbody>tr>td:first-child { .da-contact-card .ant-table-tbody>tr>td:first-child {
......
{ {
"short_name": "React App", "short_name": "React App",
"name": "Create React App Sample", "name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone"
"theme_color": "#000000",
"background_color": "#ffffff"
} }
import Routers from './router/Routers'; import Routers from './router/Routers';
import './assets/less/theme.less';
function App() { function App() {
return <Routers /> return <Routers />
......
export default function FullLayout({ children }) {
return <>{children}</>;
}
import React from 'react'
import { Layout } from 'antd'
import HeaderTap from "./tabHeader";
import MenuList from "./menulist";
//import
// import Login from "../view/Login";
// import RegistionPage from "../view/Registion";
const { Content, Footer } = Layout
export default function VerticalLayout(props) {
const { children } = props
return (
<>
<HeaderTap
className="site-layout-background"
style={{
padding: 0,
position: "fixed",
zIndex: 1,
width: "100%",
}}
/>
<Layout
style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
>
<MenuList />
<Layout className="site-layout">
<Content style={{ margin: "1vh 1vh" }}>
<div
className="site-layout-background"
style={{ mixHeight: 360, overflowY: "scroll" }}
>
{children}
</div>
</Content>
<Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Layout>
</Layout>
</>
);
}
\ No newline at end of file
...@@ -10,11 +10,13 @@ import { ...@@ -10,11 +10,13 @@ import {
CommentOutlined, CommentOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { Link } from "react-router-dom";
const { Sider } = Layout; const { Sider } = Layout;
const { SubMenu } = Menu; const { SubMenu } = Menu;
export default function App() { export default function App() {
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(true);
const onCollapse = (collapsed) => { const onCollapse = (collapsed) => {
setCollapsed(collapsed); setCollapsed(collapsed);
...@@ -23,37 +25,34 @@ export default function App() { ...@@ -23,37 +25,34 @@ export default function App() {
return ( return (
<> <>
<Sider <Sider
theme="light" theme="dark"
collapsible collapsible
collapsed={collapsed} collapsed={collapsed}
onCollapse={onCollapse} onCollapse={onCollapse}
> >
<div className="logo" />
<Menu <Menu
theme="light" theme="dark"
defaultSelectedKeys={["1"]} defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]} // defaultOpenKeys={["sub1"]}
mode="inline" mode="inline"
> >
<Menu.Item key="1" icon={<PieChartOutlined />}> <Menu.Item key="1" icon={<PieChartOutlined />}>
เริ่มต้นใช้งาน <Link to={"/"}>เริ่มต้นใช้งาน</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}> <Menu.Item key="2" icon={<DesktopOutlined />}>
ลงทะเบียนร้านซ่อม <Link to={"/registion"}>ลงทะเบียนร้านซ่อม</Link>
</Menu.Item> </Menu.Item>
<SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า"> <SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
<Menu.Item key="8" icon={<SearchOutlined />}> <Menu.Item key="8" icon={<SearchOutlined />}>
ค้นหาร้านซ่อม <Link to={"/search"}>ค้นหาร้านซ่อม</Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="6" icon={<FileSearchOutlined />}> <Menu.Item key="6" icon={<FileSearchOutlined />}>
เช็คสถานะการซ่อม <Link to={"/status"}>เช็คสถานะการซ่อม</Link>
</Menu.Item>
<Menu.Item key="7" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}> <Menu.Item key="9" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน <Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
</Sider> </Sider>
......
import React, { Suspense } from "react";
import { Route } from "react-router-dom";
// import Cookies from 'js-cookie'
const ProtectedRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => (
<Suspense fallback={null}>
<Component {...props} />
</Suspense>
)}
/>
);
};
export default ProtectedRoute;
@import url('https://fonts.googleapis.com/css2?family=Mitr&display=swap');
body {
font-family: 'Mitr', sans-serif;
}
.header-home { .header-home {
background-color: red; color: aliceblue;
position: "fixed"; position: "fixed";
width: "100%"; width: "100%";
font-size: 20px; font-size: 20px;
......
...@@ -3,7 +3,17 @@ ...@@ -3,7 +3,17 @@
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 100 px; font-size: 100 px;
font-weight: bold; font-weight: bold;
} }
.site-layout .site-layout-background { .site-layout .site-layout-background {
background: #fff; background: #fff;
} }
\ No newline at end of file
.footer {
background-color: #001529;
color: aliceblue;
}
.footer p {
text-align: center;
}
.title { .title {
text-align: center; display: flex;
justify-content: center;
align-items: center;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
padding: 10px 20px;
} }
.map { .map {
height: 300px; height: 300px;
} }
.div-time{ .div-time {
padding: 10px 15px; padding: 10px 15px;
} }
@import "Layouts/header.less"; @import "Layouts/header.less";
@import "Home/index.less"; @import "Home/index.less";
@import "Registion/index.less"; @import "Registion/index.less";
@import "pages/getstartes.less";
\ No newline at end of file
.getstart-box {
height: 75vh;
justify-content: center;
align-items: center;
}
.div-box-title {
animation: fadeIn linear 1.5s;
}
.getstart-box .div-box-title .box-button {
margin-top: 100px;
}
.bt-register {
border: 1px solid #333;
padding: 10px;
font-weight: bold;
}
.bt-register .text-register {
color: #333;
}
.bt-register:hover .text-register:hover {
color: rgb(211, 0, 0);
}
.bt-register:hover {
cursor: pointer;
}
.bt-login {
padding: 10px;
border: 1px solid #333;
background-color: red;
font-weight: bold;
}
.bt-login:hover {
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.bt-login .text-login {
color: rgb(204, 204, 204);
}
.bt-login:hover .text-login:hover {
color: rgb(17, 17, 17);
}
// Content css
.content-box {
height: auto;
padding: 10px;
}
.box-text-title {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn linear 3s;
}
.Col-content {
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.Col-content:hover {
animation: fadeIn2 linear 1s;
cursor: default;
}
// Footer
.footer-content {
padding: 10px;
margin-top: 10px;
height: 20%;
width: 100%;
background-color: #780650;
}
.box1 {
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
padding: 20px 30px 20px 30px;
}
.box2-button {
border: 3px solid rgb(255, 255, 255);
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.box2-button:hover {
cursor: pointer;
background-color: aliceblue;
}
.bt2-register {
color: rgb(189, 189, 189);
font-weight: bold;
}
.bt2-register:hover {
color: rgb(0, 14, 26);
}
// Animation
@keyframes fadeIn {
from {
transform: translateY(10%);
opacity: 0%;
}
to {
transform: translateY(0%);
opacity: 100%;
}
}
@keyframes fadeIn2 {
from {
transform: translateY(5%);
opacity: 50%;
}
to {
transform: translateY(0%);
opacity: 100%;
}
}
// Phone Screen
.h-100 {
height: 100%;
}
.h-auto {
height: auto;
}
...@@ -3,6 +3,8 @@ import ReactDOM from "react-dom"; ...@@ -3,6 +3,8 @@ import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import App from "./App"; import App from "./App";
import './assets/less/theme.less';
import './assets/fonts/index.css'
ReactDOM.render( ReactDOM.render(
<Suspense fallback="loading"> <Suspense fallback="loading">
......
// Router
import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom"; import { BrowserRouter as AppRouter, Route, Switch } from "react-router-dom";
// import Ecommerce from "../view/Dashboards/ecommerce"; // import Ecommerce from "../view/Dashboards/ecommerce";
import HeaderTap from "../Layouts/tabHeader"; // import HeaderTap from "../Layouts/tabHeader";
import MenuList from "../Layouts/menulist"; // import MenuList from "../Layouts/menulist";
//import //import
import Login from "../view/Login"; // import Login from "../view/Login";
// import Home from "../view/Homes/index"; // import RegistionPage from "../view/Registion";
import Home from "../view/Homes/index";
import RegistionPage from "../view/Registion";
import { Layout } from "antd"; // Routes
import { Routes } from "./routes";
const { Content, Footer } = Layout; // Layouts
import VerticalLayout from "../Layouts/VerticalLayout";
import FullLayout from "../Layouts/FullLayout";
// Components
import ProtectedRoute from "../ProtectdRoute";
// import { Layout } from "antd";
// const { Content, Footer } = Layout;
export default function Routers() { export default function Routers() {
return ( // Default Layout
<> const DefaultLayout = null; // FullLayout or VerticalLayout
<HeaderTap
className="site-layout-background"
style={{ padding: 0, position: "fixed", zIndex: 1, width: "100%" }}
/>
<Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
<MenuList />
<Layout className="site-layout"> // All of the available layouts
<Content style={{ margin: "0 16px" }}> const Layouts = { VerticalLayout, FullLayout };
<div
className="site-layout-background"
style={{ padding: 24, mixHeight: 360 }}
>
<AppRouter>
<Switch>
<Route
exact
path={"/login"}
render={() => {
return <Login />;
}}
/>
<Route // Return Filtered Array of Routes & Paths
exact const LayoutRoutesAndPaths = (layout) => {
path={"/registion"} const LayoutRoutes = [];
render={() => { const LayoutPaths = [];
return <RegistionPage />; if (Routes) {
}} // Checks if Route layout or Default layout matches current layout
/> Routes.filter(
<Route (route) =>
(route.layout === layout || DefaultLayout === layout) &&
(LayoutRoutes.push(route), LayoutPaths.push(route.path))
);
}
return { LayoutRoutes, LayoutPaths };
};
// Return Route to Render
const ResolveRoutes = () => {
return Object.keys(Layouts).map((layout, index) => {
const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
const LayoutTag = Layouts[layout];
return (
<Route path={LayoutPaths} key={index}>
<LayoutTag>
<Switch>
{LayoutRoutes.map((route) => {
return (
<ProtectedRoute
key={route.path}
path={route.path}
exact exact
path={"/"} component={route.component}
render={() => {
return <Home />;
}}
/> />
);
})}
</Switch> </Switch>
</AppRouter> </LayoutTag>
</div> </Route>
</Content> );
<Footer style={{ textAlign: "center" }}> });
Ant Design ©2018 Created by Ant UED };
</Footer>
</Layout>
</Layout>
</> return (
<AppRouter>
<Switch>{ResolveRoutes()}</Switch>
</AppRouter>
); );
} }
import { lazy } from 'react' import { lazy } from "react";
const PagesRoutes = [ const PagesRoutes = [
// Dashboard // Dashboard
// Get Start
{
path: "/",
component: lazy(() => import("../../view/Pages/GetStarted")),
layout: "VerticalLayout",
},
// Landing Register Page
{ {
path: '/Dashboard', path: "/registion",
component: lazy(() => import('../../view/Dashboards/ecommerce')), component: lazy(() => import("../../view/Pages/Register")),
layout: 'VerticalLayout', layout: "VerticalLayout",
} },
] // Register
{
path: "/register",
component: lazy(() => import("../../view/Registion/Registion")),
layout: "VerticalLayout",
},
export default PagesRoutes // Login
{
path: "/login",
component: lazy(() => import("../../view/Login")),
layout: "VerticalLayout",
},
// Report
{
path: "/reported",
component: lazy(() => import("../../view/Pages/Report/index")),
layout: "VerticalLayout",
},
// Search Repair Shop
{
path: "/search",
component: lazy(() => import("../../view/Pages/CustomerService/RepairShop/index")),
layout: "VerticalLayout",
},
// Check Status
{
path: "/status",
component: lazy(() => import("../../view/Pages/CustomerService/RepairStatus/index")),
layout: "VerticalLayout",
},
// pages 404
{
path: '/pages/error-404',
component: lazy(() => import('../../view/Errors/404/index')),
layout: 'FullLayout',
},
];
export default PagesRoutes;
import React from 'react';
export default function App () {
return (
<>
error 404
</>
)
}
\ No newline at end of file
// import liff from "@line/liff"; // import liff from "@line/liff";
import { React, Fragment } from "react"; import React, { useEffect, useState, useRef } from "react";
import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd"; import { Form, Input, Button, Row, Col, Divider } from "antd";
import { sendLogin } from '../../services' import BIRDS from "vanta/dist/vanta.birds.min";
import { sendLogin } from "../../services";
function App() { function App() {
console.log(process.env.REACT_APP_SECRET_API); const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
const onFinish = (values) => { const onFinish = (values) => {
const data = { const data = {
garageID : values.garageID, garageID: values.garageID,
password : values.password password: values.password,
}
console.log(data)
sendLogin(data).then((response) => console.log('response', response))
}; };
console.log(data);
sendLogin(data).then((response) => console.log("response", response));
};
return ( return (
<Fragment> <div className="h-100" ref={myRef}>
<Row> <Row >
<Col <Col
span={6} span={4}
xs={{ order: 1 }} xs={{ order: 1 }}
sm={{ order: 2 }} sm={{ order: 2 }}
md={{ order: 3 }} md={{ order: 3 }}
...@@ -82,17 +103,6 @@ function App() { ...@@ -82,17 +103,6 @@ function App() {
<Input.Password /> <Input.Password />
</Form.Item> </Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item <Form.Item
wrapperCol={{ wrapperCol={{
offset: 8, offset: 8,
...@@ -100,7 +110,7 @@ function App() { ...@@ -100,7 +110,7 @@ function App() {
}} }}
> >
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
Submit ยืนยัน
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
...@@ -113,7 +123,7 @@ function App() { ...@@ -113,7 +123,7 @@ function App() {
lg={{ order: 4 }} lg={{ order: 4 }}
></Col> ></Col>
</Row> </Row>
</Fragment> </div>
); );
} }
......
import React from 'react';
export default function App () {
return (
<>
Repairshop
</>
)
}
\ No newline at end of file
import React from 'react';
export default function App () {
return (
<>
Repair Status
</>
)
}
\ No newline at end of file
import React, { useState } from "react";
import { Row, Col, Typography, Image } from "antd";
// Import Images 264098267_614589809650713_7432399148669275975_n.png
import reportImg from "../../../../assets/images/Example/263773393_1270118020174602_2666156037006331548_n.png";
import userUseImg from "../../../../assets/images/Example/264098267_614589809650713_7432399148669275975_n.png";
import detailImg from "../../../../assets/images/Example/266805480_2127046747444617_6752024179146129762_n.png";
const { Title, Text } = Typography;
function App() {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(false);
const [visible4, setVisible4] = useState(false);
return (
<Row gutter={[16, 16]} className="content-box">
<Col span={24} className="box-text-title">
<Title level={4}>รูปตัวอย่างการใช้งาน</Title>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
className="Col-content"
>
<div>
<div></div>
<Image
preview={{ visible1: false }}
width={200}
src={reportImg}
onClick={() => setVisible1(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible1, onVisibleChange: (vis) => setVisible1(vis) }}
>
<Image src={reportImg} />
</Image.PreviewGroup>
</div>
<Text>รูปการเพิ่มรายละเอียดของการซ่อม</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 4, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
span={8}
className="Col-content"
>
<div>
<Image
preview={{ visible2: false }}
width={200}
src={detailImg}
onClick={() => setVisible2(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible2, onVisibleChange: (vis) => setVisible2(vis) }}
>
<Image src={detailImg} />
</Image.PreviewGroup>
</div>
<Text>รูปแสดงหน้าหลักของระบบ</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 6, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
span={8}
className="Col-content"
>
<div>
<Image
preview={{ visible3: false }}
width={200}
src={reportImg}
onClick={() => setVisible3(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible3, onVisibleChange: (vis) => setVisible3(vis) }}
>
<Image src={reportImg} />
</Image.PreviewGroup>
</div>
<Text>รูปแสดงรายละเอียดของร้าน</Text>
</div>
</Col>
<Col
xs={{ span: 12, offset: 6 }}
sm={{ span: 8, offset: 8 }}
md={{ span: 4, offset: 4 }}
lg={{ span: 5, offset: 1 }}
xl={{ span: 4, offset: 2 }}
className="Col-content"
>
<div>
<Image
preview={{ visible4: false }}
width={200}
src={userUseImg}
onClick={() => setVisible4(true)}
/>
<div style={{ display: "none" }}>
<Image.PreviewGroup
preview={{ visible4, onVisibleChange: (vis) => setVisible4(vis) }}
>
<Image src={userUseImg} />
</Image.PreviewGroup>
</div>
<Text>รูปหน้าบริการลูกค้า</Text>
</div>
</Col>
</Row>
);
}
export default App;
import React from "react";
import { Row, Col, Typography } from "antd";
// icon
import {
SearchOutlined,
CloudServerOutlined,
ControlOutlined,
ToolOutlined,
PieChartOutlined,
SmileOutlined,
LikeOutlined,
PushpinOutlined,
CommentOutlined,
} from "@ant-design/icons";
const { Title, Text } = Typography;
function App() {
return (
<Row gutter={[0, 16]} className="content-box">
<Col span={24} className="box-text-title">
<Title level={4}>คุณสมบัติของระบบ</Title>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<CloudServerOutlined style={{ fontSize: "250%" }} />
<Title level={5}> จัดเก็บข้อมูเข้าสู่ระบบส่วนกลาง </Title>
<Text>
การจัดเก็บข้อมูลเข้าส่วนกลางทำให้สามารถแชร์ฐานข้อมูลให้กับร้านค้าที่มีอยู่ในระบบ
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
span={8}
className="Col-content"
>
<div>
<SearchOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ติดตามสถานะการซ่อม </Title>
<Text>
การจัดเก็บข้อมูลเข้าส่วนกลางทำให้ลูกค้าสามารถรู้ถึงสถานะงานซ่อมแต่ละงานได้โดยไม่ต้องออกไปตามถึงหน้างาน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
span={8}
className="Col-content"
>
<div>
<ControlOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ลดขั้นตอนในการทำงาน </Title>
<Text>
ช่วยลดขั้นตอนของการทำงานลงเมื่อต้องตรวจเช็คสภาพอย่างละเอียดอีกครั้ง
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<ToolOutlined style={{ fontSize: "250%" }} />
<Title level={5}> จัดการการซ่อม </Title>
<Text>
บันทึกข้อมูลของการซ่อมแต่ละครั้งเข้าระบบส่วนกลาง
เพื่อแชร์ฐานข้อมูลและง่ายต่อการซ่อมในครั้งถัดไป
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<PieChartOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ชุดรายงานที่ครอบคลุม </Title>
<Text>
มีชุดรายงานที่ครอบคลุมทุกด้าน จัดเป็นหมวดหมู่ แสดงผลสวยงาม
ตอบสนองทุกมุมมองของทางร้าน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<CommentOutlined style={{ fontSize: "250%" }} />
<Title level={5}> แจ้งปัญหากับผู้ดูแลระบบ </Title>
<Text>
หากพบปัญหาการใช้งาน สามารถแจ้งปัญหากับผู้ดูแลระบบได้โดยตรง
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<PushpinOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ค้นหาร้านซ่อม </Title>
<Text>
ลูกค้าสามารถค้นหาร้านซ่อมที่อยู่ในระบบ
ทำให้ดึงดูดลูกค้าให้มาใช้บริการร้านของท่าน
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<LikeOutlined style={{ fontSize: "250%" }} />
<Title level={5}> ง่ายต่อการใช้งาน </Title>
<Text>
รูปแบบของระบบมีความเรียบง่าย สามารถได้ง่ายและเรียนรู้การทำงานได้ไว
</Text>
</div>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 7, offset: 1 }}
className="Col-content"
>
<div>
<SmileOutlined style={{ fontSize: "250%" }} />
<Title level={5}> สามารถใช้งานได้ฟรี </Title>
<Text>
ผู้ใช้สามารถใช้งานระบบได้ฟรีโดยไม่มีค่าใช้จ่าย
และสามารถลงทะเบียนออนไลน์เริ่มใช้งานได้ทันที
</Text>
</div>
</Col>
</Row>
);
}
export default App;
import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Typography } from "antd";
const { Title, Text } = Typography;
function App() {
return (
<Row className="footer-content">
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 6, offset: 2 }}
className="Col-footer"
>
<div className="box1">
<Col span={24} className="box1-box-title">
<Title level={3} style={{ color: "rgb(189, 189, 189)" }}>
Repair Center
</Title>
<Text style={{ color: "rgb(189, 189, 189)" }}>
ระบบจัดการร้านซ่อมและศูนย์บริการ
</Text>
</Col>
</div>
</Col>
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 12, offset: 4 }}
className="Col-footer"
>
<div className="box2">
<Row className="box2-button">
<Col span={24} className="bt2-register">
<Link to={"/register"}>เริ่มใช้งานทันที</Link>
</Col>
</Row>
</div>
</Col>
</Row>
);
}
export default App;
import React, { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import { Row, Col, Typography } from "antd";
import BIRDS from "vanta/dist/vanta.birds.min";
const { Title } = Typography;
function App() {
const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
color1: 0x87,
color2: 0x0,
birdSize: 0.8,
quantity: 4.2,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
return (
<Row ref={myRef} className="getstart-box">
<div className="div-box-title">
<Col span={24} className="getstart-box-title">
<Title>Repair Center</Title>
<Title level={3}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={5}>
เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
</Title>
<Row className="box-button">
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 10, offset: 2 }}
className="bt-register"
>
<Link className="text-register" to={"/register"}>ลงทะเบียนใช้งานฟรี</Link>
</Col>
<Col
xs={{ span: 11, offset: 1 }}
lg={{ span: 10, offset: 2 }}
className="bt-login"
>
<Link className="text-login" to={"/login"}>เข้าสู่ระบบ</Link>
</Col>
</Row>
</Col>
</div>
</Row>
);
}
export default App;
import React from "react";
import { Divider } from "antd";
// Import Component
import Titles from "./Title";
import Contents from "./Contents";
import ContentImage from "./ContentImage";
import Footers from './Footers'
export default function App(props) {
return (
<>
<Titles />
<Divider />
<Contents />
<Divider />
<ContentImage />
<Footers />
</>
);
}
import React from 'react';
export default function App () {
return (
<>
register
</>
)
}
\ No newline at end of file
import React from 'react';
export default function App () {
return (
<>
Reported
</>
)
}
\ No newline at end of file
import React, { useState } from "react"; import React, { useState, useEffect, useRef } from "react";
// import axios from "axios"; // import axios from "axios";
import { import {
Form, Form,
...@@ -19,7 +19,9 @@ import { ...@@ -19,7 +19,9 @@ import {
Marker, Marker,
} from "react-google-maps"; } from "react-google-maps";
import { sendToken } from '../../services' import BIRDS from "vanta/dist/vanta.birds.min";
import { sendToken } from "../../services";
let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }]; let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }];
...@@ -76,13 +78,36 @@ const tailFormItemLayout = { ...@@ -76,13 +78,36 @@ const tailFormItemLayout = {
//Main Function //Main Function
export default function RegistrationForm() { export default function RegistrationForm() {
const [vantaEffect, setVantaEffect] = useState(0);
const myRef = useRef(null);
useEffect(() => {
if (!vantaEffect) {
setVantaEffect(
BIRDS({
el: myRef.current,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
quantity: 5.00,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
const [ontime, setOnTime] = useState(); const [ontime, setOnTime] = useState();
const [offtime, setOffTime] = useState(); const [offtime, setOffTime] = useState();
const [form] = Form.useForm(); const [form] = Form.useForm();
const onFinish = (values) => { const onFinish = (values) => {
const data = { const data = {
party: "garage", party: "garage",
garageID: values.userID, garageID: values.userID,
...@@ -102,11 +127,10 @@ export default function RegistrationForm() { ...@@ -102,11 +127,10 @@ export default function RegistrationForm() {
address_map: [newLatLng[0].lat, newLatLng[0].lng], address_map: [newLatLng[0].lat, newLatLng[0].lng],
on_time: ontime, on_time: ontime,
off_time: offtime, off_time: offtime,
tel: values.phone tel: values.phone,
} };
sendToken(data).then((response) => console.log('response', response))
sendToken(data).then((response) => console.log("response", response));
}; };
const handleOnTime = (time, timeString) => { const handleOnTime = (time, timeString) => {
...@@ -118,9 +142,10 @@ export default function RegistrationForm() { ...@@ -118,9 +142,10 @@ export default function RegistrationForm() {
}; };
return ( return (
<Row> <div className="h-auto" ref={myRef}>
<Row >
<Col <Col
span={6} span={4}
xs={{ order: 1 }} xs={{ order: 1 }}
sm={{ order: 2 }} sm={{ order: 2 }}
md={{ order: 3 }} md={{ order: 3 }}
...@@ -134,7 +159,7 @@ export default function RegistrationForm() { ...@@ -134,7 +159,7 @@ export default function RegistrationForm() {
md={{ order: 3 }} md={{ order: 3 }}
lg={{ order: 4 }} lg={{ order: 4 }}
> >
<div className="title"></div> <div className="title">ลงทะเบียนร้านซ่อม</div>
<Divider orientation="left"> <Divider orientation="left">
<b>รายละเอียดของร้าน</b> <b>รายละเอียดของร้าน</b>
</Divider> </Divider>
...@@ -274,7 +299,9 @@ export default function RegistrationForm() { ...@@ -274,7 +299,9 @@ export default function RegistrationForm() {
<Option value="ศูนย์บริการรถจักรยานยนต์"> <Option value="ศูนย์บริการรถจักรยานยนต์">
ศูนย์บริการรถจักรยานยนต์ ศูนย์บริการรถจักรยานยนต์
</Option> </Option>
<Option value="อู่ซ่อมรถจักรยานยนต์">อู่ซ่อมรถจักรยานยนต์</Option> <Option value="อู่ซ่อมรถจักรยานยนต์">
อู่ซ่อมรถจักรยานยนต์
</Option>
<Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร"> <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
ร้านบริการซ่อมอุปกรณ์การเกษตร ร้านบริการซ่อมอุปกรณ์การเกษตร
</Option> </Option>
...@@ -464,7 +491,11 @@ export default function RegistrationForm() { ...@@ -464,7 +491,11 @@ export default function RegistrationForm() {
</Col> </Col>
<Form.Item {...tailFormItemLayout}> <Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" style={{marginTop: "30px"}}> <Button
type="primary"
htmlType="submit"
style={{ marginTop: "30px" }}
>
ยืนยันการสมัคร ยืนยันการสมัคร
</Button> </Button>
</Form.Item> </Form.Item>
...@@ -478,5 +509,6 @@ export default function RegistrationForm() { ...@@ -478,5 +509,6 @@ export default function RegistrationForm() {
lg={{ order: 4 }} lg={{ order: 4 }}
></Col> ></Col>
</Row> </Row>
</div>
); );
} }
...@@ -30,7 +30,7 @@ import { ...@@ -30,7 +30,7 @@ import {
return ( return (
<Col md={24} span={24}> <Col md={24} span={24}>
<MapWithAMarker <MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places" googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: '100%' }} />} loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '400px' }} />} containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />} mapElement={<div style={{ height: '100%' }} />}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment