Skip to content

R
Repair-app
Commit a1c19a74 authored by chaiwat's avatar chaiwat
Browse files
Options

add vanta, link, getstart

parent 088c9723
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 935 additions and 152 deletions
package-lock.json 0 → 100644
View file @ a1c19a74
This diff is collapsed.
package.json
View file @ a1c19a74
...@@ -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": {
......
public/index.html
View file @ a1c19a74
...@@ -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 {
......
public/manifest.json
View file @ a1c19a74
{ {
"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"
} }
src/App.jsx
View file @ a1c19a74
import Routers from './router/Routers'; import Routers from './router/Routers';
import './assets/less/theme.less';
function App() { function App() {
return <Routers /> return <Routers />
......
src/Layouts/FullLayout.jsx 0 → 100644
View file @ a1c19a74
export default function FullLayout({ children }) {
return <>{children}</>;
}
src/Layouts/VerticalLayout.jsx 0 → 100644
View file @ a1c19a74
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
src/Layouts/menulist.jsx
View file @ a1c19a74
...@@ -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,38 +25,35 @@ export default function App() { ...@@ -23,38 +25,35 @@ 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>
</> </>
......
src/ProtectdRoute/index.js 0 → 100644
View file @ a1c19a74
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;
src/assets/fonts/index.css 0 → 100644
View file @ a1c19a74
@import url('https://fonts.googleapis.com/css2?family=Mitr&display=swap');
body {
font-family: 'Mitr', sans-serif;
}
src/assets/less/Home/index.less
View file @ a1c19a74
.header-home { .header-home {
background-color: red; color: aliceblue;
position: "fixed"; position: "fixed";
width: "100%"; width: "100%";
font-size: 20px; font-size: 20px;
......
src/assets/less/Layouts/header.less
View file @ a1c19a74
.logo { .logo {
float: left; float: left;
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;
}
src/assets/less/Registion/index.less
View file @ a1c19a74
.title { .title {
text-align: center; display: flex;
font-size: 25px; justify-content: center;
font-weight: bold; align-items: center;
padding: 10px 20px; font-size: 25px;
font-weight: bold;
} }
.map { .map {
height: 300px; height: 300px;
} }
.div-time{ .div-time {
padding: 10px 15px; padding: 10px 15px;
} }
\ No newline at end of file
src/assets/less/index.less
View file @ a1c19a74
@import "Layouts/header.less"; @import "Layouts/header.less";
@import "Home/index.less"; @import "Home/index.less";
@import "Registion/index.less"; @import "Registion/index.less";
\ No newline at end of file @import "pages/getstartes.less";
\ No newline at end of file
src/assets/less/pages/getstartes.less 0 → 100644
View file @ a1c19a74
.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;
}
src/index.jsx
View file @ a1c19a74
...@@ -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">
......
src/router/Routers.jsx
View file @ a1c19a74
// 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> );
</AppRouter> })}
</div> </Switch>
</Content> </LayoutTag>
<Footer style={{ textAlign: "center" }}> </Route>
Ant Design ©2018 Created by Ant UED );
</Footer> });
</Layout> };
</Layout>
return (
</> <AppRouter>
<Switch>{ResolveRoutes()}</Switch>
</AppRouter>
); );
} }
src/router/routes/Pages.jsx
View file @ a1c19a74
import { lazy } from 'react' import { lazy } from "react";
const PagesRoutes = [ const PagesRoutes = [
// Dashboard // Dashboard
{
path: '/Dashboard', // Get Start
component: lazy(() => import('../../view/Dashboards/ecommerce')), {
layout: 'VerticalLayout', path: "/",
} component: lazy(() => import("../../view/Pages/GetStarted")),
layout: "VerticalLayout",
] },
export default PagesRoutes // Landing Register Page
{
\ No newline at end of file path: "/registion",
component: lazy(() => import("../../view/Pages/Register")),
layout: "VerticalLayout",
},
// Register
{
path: "/register",
component: lazy(() => import("../../view/Registion/Registion")),
layout: "VerticalLayout",
},
// 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;
src/view/Errors/404/index.jsx 0 → 100644
View file @ a1c19a74
import React from 'react';
export default function App () {
return (
<>
error 404
</>
)
}
\ No newline at end of file
src/view/Login/Login.jsx
View file @ a1c19a74
// 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) console.log(data);
sendLogin(data).then((response) => console.log('response', response)) 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>
); );
} }
......
src/view/Pages/CustomerService/RepairShop/index.jsx 0 → 100644
View file @ a1c19a74
import React from 'react';
export default function App () {
return (
<>
Repairshop
</>
)
}
\ No newline at end of file
src/view/Pages/CustomerService/RepairStatus/index.jsx 0 → 100644
View file @ a1c19a74
import React from 'react';
export default function App () {
return (
<>
Repair Status
</>
)
}
\ No newline at end of file
src/view/Pages/GetStarted/ContentImage/index.jsx 0 → 100644
View file @ a1c19a74
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;
src/view/Pages/GetStarted/Contents/index.jsx 0 → 100644
View file @ a1c19a74
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;
src/view/Pages/GetStarted/Footers/index.jsx 0 → 100644
View file @ a1c19a74
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;
src/view/Pages/GetStarted/Title/index.jsx 0 → 100644
View file @ a1c19a74
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;
src/view/Pages/GetStarted/index.jsx 0 → 100644
View file @ a1c19a74
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 />
</>
);
}
src/view/Pages/Register/index.jsx 0 → 100644
View file @ a1c19a74
import React from 'react';
export default function App () {
return (
<>
register
</>
)
}
\ No newline at end of file
src/view/Pages/Report/index.jsx 0 → 100644
View file @ a1c19a74
import React from 'react';
export default function App () {
return (
<>
Reported
</>
)
}
\ No newline at end of file
src/view/Registion/Registion.jsx
View file @ a1c19a74
This diff is collapsed.
src/view/Registion/googleMap.jsx
View file @ a1c19a74
...@@ -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%' }} />}
......
yarn.lock
View file @ a1c19a74
This diff is collapsed.
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