Skip to content

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

add

parent a6fe7eed
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 65 deletions
.env
View file @ 088c9723
REACT_APP_SECRET_API=http://localhost:3000
\ No newline at end of file
REACT_APP_SECRET_API=http://localhost:4000
\ No newline at end of file
package.json
View file @ 088c9723
......@@ -9,9 +9,11 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.18.2",
"axios": "^0.24.0",
"craco-less": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-maps": "^9.4.5",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
......
src/Layouts/index.jsx
View file @ 088c9723
import { React, Fragment } from "react";
import { React } from "react";
import { Layout } from "antd";
import TabHeader from "./tabHeader";
import MenuList from './menulist'
export default function App () {
export default function App() {
return (
<Fragment>
<Layout>
<TabHeader />
</Fragment>
<MenuList />
</Layout>
);
}
src/Layouts/menulist.jsx 0 → 100644
View file @ 088c9723
import React, { useState } from "react";
import { Layout, Menu } from "antd";
import {
DesktopOutlined,
PieChartOutlined,
TeamOutlined,
SearchOutlined,
FileSearchOutlined,
CommentOutlined,
} from "@ant-design/icons";
const { Sider } = Layout;
const { SubMenu } = Menu;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
};
return (
<>
<Sider
theme="light"
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
>
<div className="logo" />
<Menu
theme="light"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
เริ่มต้นใช้งาน
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
ลงทะเบียนร้านซ่อม
</Menu.Item>
<SubMenu key="sub1" icon={<TeamOutlined />} title="บริการลูกค้า">
<Menu.Item key="8" icon={<SearchOutlined />}>
ค้นหาร้านซ่อม
</Menu.Item>
<Menu.Item key="6" icon={<FileSearchOutlined />}>
เช็คสถานะการซ่อม
</Menu.Item>
<Menu.Item key="7" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน
</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<CommentOutlined />}>
แจ้งปัญหาการใช้งาน
</Menu.Item>
</Menu>
</Sider>
</>
);
}
src/Layouts/tabHeader.jsx
View file @ 088c9723
......@@ -10,19 +10,22 @@ export default function App() {
const clicklogo = () => {
history.push("/");
};
// const onclickLogin = () => {
// console.log('click login')
// }
return (
<Header className="header-home" style={{ zIndex: 1 }}>
<div>
{/* <img src={logo} alt="Logo" width={30} height={30}/> */}
<Row>
<Col span={20}>
{/* <img src={logo} alt="Logo" width={30} height={30}/> */}
<Row gutter={[32, 32]} justify="space-between">
<Col span={15}>
<Row>
<Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp;
<div className="logo"> Center</div>
</Row>
</Col>
</Row>
</div>
</Row>
</Col>
</Row>
</Header>
);
}
src/assets/less/Registion/index.less 0 → 100644
View file @ 088c9723
.title {
text-align: center;
font-size: 25px;
font-weight: bold;
padding: 10px 20px;
}
.map {
height: 300px;
}
.div-time{
padding: 10px 15px;
}
\ No newline at end of file
src/assets/less/index.less
View file @ 088c9723
@import "Layouts/header.less";
@import "Home/index.less";
\ No newline at end of file
@import "Home/index.less";
@import "Registion/index.less";
\ No newline at end of file
src/router/Routers.jsx
View file @ 088c9723
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 MenuList from "../Layouts/menulist";
//import
import Login from "../view/Login";
// import Home from "../view/Homes/index";
import Home from "../view/Homes/index"
import Home from "../view/Homes/index";
import RegistionPage from "../view/Registion";
import { Layout } from "antd";
const { Content, Footer } = Layout;
export default function Routers() {
return (
<AppRouter>
<Switch>
<Route
exact
path={"/"}
render={() => {
return <Home />;
}}
/>
<Route
exact
path={"/login"}
render={() => {
return <Login />;
}}
/>
<Route
exact
path={"/dashboard"}
render={() => {
return <Ecommerce />;
}}
/>
</Switch>
</AppRouter>
<>
<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">
<Content style={{ margin: "0 16px" }}>
<div
className="site-layout-background"
style={{ padding: 24, mixHeight: 360 }}
>
<AppRouter>
<Switch>
<Route
exact
path={"/login"}
render={() => {
return <Login />;
}}
/>
<Route
exact
path={"/registion"}
render={() => {
return <RegistionPage />;
}}
/>
<Route
exact
path={"/"}
render={() => {
return <Home />;
}}
/>
</Switch>
</AppRouter>
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
</>
);
}
src/services/index.js 0 → 100644
View file @ 088c9723
import axios from "axios";
export const sendToken = (data) => {
return axios
.post(
process.env.REACT_APP_SECRET_API + "/authentication/accesstoken",
data
)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
export const sendLogin = (data) => {
return axios
.post(
process.env.REACT_APP_SECRET_API + "/authentication/login",
data
)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
src/view/Dashboards/ecommerce/index.jsx
View file @ 088c9723
import { React, Fragment } from "react";
import { React } from "react";
import { Layout } from "antd";
import Header from '../../../Layouts/tabHeader'
import HeaderTap from "../../../Layouts/tabHeader";
import MenuList from "../../../Layouts/menulist";
const { Content, Footer } = Layout;
export default function Ecommerce() {
return (
<Fragment>
<Header />
<h3>สวัสดี, Fariw 👋</h3>
</Fragment>
<>
<HeaderTap className="site-layout-background" style={{ padding: 0 }} />
<Layout style={{ minHeight: "100vh", paddingTop: "2vh" }}>
<MenuList />
<Layout className="site-layout">
<Content style={{ margin: "0 16px" }}>
<div
className="site-layout-background"
style={{ padding: 24, minHeight: 360 }}
>
Bill is a cat.
</div>
</Content>
<Footer style={{ textAlign: "center" }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
</>
);
}
src/view/Login/Login.js deleted 100644 → 0
View file @ a6fe7eed
// import liff from "@line/liff";
import { React, Fragment } from "react";
function App() {
console.log(process.env.REACT_APP_SECRET_API)
return (
<Fragment>
<h3>สวัสดี, Login page 👋</h3>
</Fragment>
);
}
export default App;
src/view/Login/Login.jsx 0 → 100644
View file @ 088c9723
// import liff from "@line/liff";
import { React, Fragment } from "react";
import { Form, Input, Button, Checkbox, Row, Col, Divider } from "antd";
import { sendLogin } from '../../services'
function App() {
console.log(process.env.REACT_APP_SECRET_API);
const onFinish = (values) => {
const data = {
garageID : values.garageID,
password : values.password
}
console.log(data)
sendLogin(data).then((response) => console.log('response', response))
};
return (
<Fragment>
<Row>
<Col
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
<Col
// style={{ textAlign: "center" }}
span={12}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
>
<div className="title"></div>
<Divider orientation="center">
<b>เข้าสู่ระบบร้านซ่อม</b>
</Divider>
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
label="User ID"
name="garageID"
rules={[
{
required: true,
message: "กรุณากรอก User ID ของคุณ!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="รหัสผ่าน"
name="password"
rules={[
{
required: true,
message: "กรุณากรอกรหัสผ่านของคุณ!",
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Col>
<Col
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
</Row>
</Fragment>
);
}
export default App;
src/view/Registion/Registion.jsx 0 → 100644
View file @ 088c9723
This diff is collapsed.
src/view/Registion/googleMap.jsx 0 → 100644
View file @ 088c9723
import { Col } from 'antd'
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from 'react-google-maps'
let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }]
const onMarkerDragEnd = (event) => {
newLatLng[0].lat = event.latLng.lat()
newLatLng[0].lng = event.latLng.lng()
console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
}
const MapWithAMarker = withScriptjs(
withGoogleMap(() => (
<GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
<Marker
draggable={true}
position={newLatLng[0]}
onDragEnd={(e) => onMarkerDragEnd(e)}
/>
</GoogleMap>
))
)
export default function App() {
return (
<Col md={24} span={24}>
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKBdBAnDzrOkcfHq9InQFfYM7Inig-Zeg&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
</Col>
)
}
\ No newline at end of file
src/view/Registion/index.jsx 0 → 100644
View file @ 088c9723
export { default } from "./Registion";
yarn.lock
View file @ 088c9723
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