Skip to content

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

add 18/02/2565

parent 25ddf61a
Show whitespace changes
Inline Side-by-side
Showing with 2284 additions and 403 deletions
package.json
View file @ b0050fb6
......@@ -15,6 +15,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-maps": "^9.4.5",
"react-highlight-words": "^0.17.0",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-validation": "^3.0.7",
......
src/Layouts/Header/tabHeader.jsx
View file @ b0050fb6
......@@ -31,8 +31,7 @@ export default function App() {
<Col span={15}>
<Row>
<Row className="main-logo" onClick={clicklogo}>
<div> Repair </div>&nbsp;
<div className="logo"> Center</div>
Repair Center
</Row>
</Row>
</Col>
......
src/Layouts/Menu/menuDashboard.jsx
View file @ b0050fb6
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Layout, Menu } from "antd";
import { Col, Layout, Menu, Row, Typography, Avatar } from "antd";
import {
HomeOutlined,
AppstoreAddOutlined,
ToolOutlined,
UnorderedListOutlined,
OrderedListOutlined,
UserAddOutlined,
TeamOutlined,
......@@ -13,7 +12,7 @@ import {
CommentOutlined,
SettingOutlined,
LogoutOutlined,
DollarOutlined,
// DollarOutlined,
} from "@ant-design/icons";
// import services
......@@ -21,10 +20,13 @@ import { sendLogout } from "../../services";
const { Sider } = Layout;
const { SubMenu } = Menu;
const { Title } = Typography;
export default function App() {
const [collapsed, setCollapsed] = useState(false);
let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
};
......@@ -46,12 +48,30 @@ export default function App() {
overflowY: "scroll",
}}
>
{/* <Divider /> */}
{/* <Divider /> */}
<Sider
theme="dark"
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
>
<Row className="display-flex-center">
<Col>
<Title level={5} style={{color: "#ffbf00"}}>
<Avatar
style={{ backgroundColor: "#ffbf00", verticalAlign: "middle" }}
size="large"
gap={"gap"}
>
{garageName}
</Avatar> &nbsp;
{garageName}
</Title>
</Col>
</Row>
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
......@@ -62,20 +82,16 @@ export default function App() {
<Link to={"/dashboard"}>หน้าแรก</Link>
</Menu.Item>
<SubMenu
key="sub1"
icon={<UnorderedListOutlined />}
title="จัดการงานซ่อม"
>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>รายการซ่อม</Link>
</Menu.Item>
<SubMenu key="sub1" icon={<ToolOutlined />} title="จัดการงานซ่อม">
<Menu.Item key="3" icon={<AppstoreAddOutlined />}>
<Link to={"/dashboard/add-detail"}>เพิ่มการซ่อม</Link>
</Menu.Item>
<Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
<Menu.Item key="2" icon={<OrderedListOutlined />}>
<Link to={"/dashboard/all-repair"}>งานซ่อมทั้งหมด</Link>
</Menu.Item>
{/* <Menu.Item key="4" icon={<ToolOutlined />}>
<Link to={"/dashboard/status"}>สถานะการซ่อม</Link>
</Menu.Item> */}
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="จัดการลูกค้า">
......@@ -86,20 +102,20 @@ export default function App() {
<Link to={"/dashboard/search-repair"}>ค้นหาการซ่อม</Link>
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
<Link to={"/dashboard/search-member"}>ลูกค้าของฉัน</Link>
<Link to={"/dashboard/member"}>ลูกค้าของฉัน</Link>
</Menu.Item>
</SubMenu>
{/*
<Menu.Item key="10" icon={<DollarOutlined />}>
<Link to={"/dashboard/payment"}>การชำระเงิน</Link>
</Menu.Item>
</Menu.Item> */}
<Menu.Item key="8" icon={<SettingOutlined />}>
<Link to={"/dashboard/setting"}>ตั้งค่าบัญชี</Link>
</Menu.Item>
<Menu.Item key="9" icon={<CommentOutlined />}>
<Link to={"/dashboard/reported"}>แจ้งปัญหาการใช้งาน</Link>
<Link to={"/reported"}>แจ้งปัญหาการใช้งาน</Link>
</Menu.Item>
<Menu.Item
......
src/Layouts/Menu/menulist.jsx
View file @ b0050fb6
......@@ -16,7 +16,7 @@ const { Sider } = Layout;
const { SubMenu } = Menu;
export default function App() {
const [collapsed, setCollapsed] = useState(true);
const [collapsed, setCollapsed] = useState(false);
const onCollapse = (collapsed) => {
setCollapsed(collapsed);
......@@ -40,7 +40,7 @@ export default function App() {
<Menu
theme="dark"
defaultSelectedKeys={["1"]}
// defaultOpenKeys={["sub1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
......
src/Layouts/VerticalLayout.jsx
View file @ b0050fb6
......@@ -8,14 +8,13 @@ import HeaderTap from "./Header/tabHeader";
import MenuList from "./Menu/menulist";
import MenuDashboard from "./Menu/menuDashboard";
const { Content, Footer } = Layout;
const { Content } = Layout;
export default function VerticalLayout(props) {
const { children } = props;
// let test = "";
const history = useHistory();
const [checkLocal, setChechLocal] = useState(null);
useEffect(() => {
......@@ -23,17 +22,18 @@ export default function VerticalLayout(props) {
setChechLocal(JSON.parse(localStorage.getItem("user")));
}, []);
if (checkLocal === null) {
history.push("/");
} else {
history.push({
pathname: "/dashboard",
state: checkLocal.userData.userId
state: checkLocal.userData.userId,
});
// console.log('test', checkLocal)
}
// console.log(checkLocal);
return (
<>
<HeaderTap
......@@ -48,7 +48,7 @@ export default function VerticalLayout(props) {
{checkLocal === null ? (
<Layout
style={{ minHeight: "93vh", maxHeight: "90vh", paddingTop: "0.5vh" }}
style={{ minHeight: "90vh", maxHeight: "90vh" }}
>
<MenuList />
......@@ -61,17 +61,17 @@ export default function VerticalLayout(props) {
{children}
</div>
</Content>
<Footer className="footer">
{/* <Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Footer> */}
</Layout>
</Layout>
) : (
<Layout
style={{
minHeight: "93vh",
minHeight: "90vh",
maxHeight: "90vh",
paddingTop: "0.5vh",
// paddingTop: "0.5vh",
}}
>
<MenuDashboard />
......@@ -84,9 +84,9 @@ export default function VerticalLayout(props) {
{children}
</div>
</Content>
<Footer className="footer">
{/* <Footer className="footer">
<p>Final Project ©2021 Developed by Chaiwat Singkibut</p>
</Footer>
</Footer> */}
</Layout>
</Layout>
)}
......
src/assets/fonts/index.css
View file @ b0050fb6
......@@ -4,3 +4,12 @@ body {
font-family: 'Mitr', sans-serif;
}
.bg-freecar {
/* background-image: url("../images/freeCar.jpg"); */
background-image: linear-gradient(#001529, #25274d);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/* background-size: cover; */
}
/* 44318d, 25274d, faed26 */
src/assets/less/index.less
View file @ b0050fb6
......@@ -5,3 +5,5 @@
@import "pages/register.less";
@import "pages/reported.less";
@import "pages/dashboard/index.less";
@base-url: "D:\Project\Repair-app\src\assets\images";
src/assets/less/pages/dashboard/index.less
View file @ b0050fb6
......@@ -13,9 +13,9 @@
// box-shadow: 1px 3px #001529;
}
.div-content-main {
// border: 1px solid #333;
}
// .div-content-main {
// // border: 1px solid #333;
// }
.main-content-repair {
padding: 10px;
// border: 1px solid #333;
......@@ -86,3 +86,48 @@
.border {
border: 1px solid #001529;
}
.bt-delete {
color: red;
font-weight: bold;
}
.div-lr-5 {
padding: 0% 5% 2% 5%;
// border: 1px solid #001529;
}
.bg-theme {
background-color: #001529;
color: aliceblue;
}
.w-100 {
min-height: 87vh;
}
.bg-theme {
background-color: #001529;
}
.display-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.w-auto {
height: auto;
}
.color-faed26 {
color: #faed26;
}
// .left {
// // display: flex;
// justify-content: left;
// }
src/router/routes/Pages.jsx
View file @ b0050fb6
......@@ -79,6 +79,42 @@ const PagesRoutes = [
component: lazy(() => import('../../view/Dashboards/repairDashboard/repairList/ShowDetail')),
layout: 'VerticalLayout',
},
// status
// {
// path: '/dashboard/status',
// component: lazy(() => import('../../view/Dashboards/repairDashboard/repairSatatus/index')),
// layout: 'VerticalLayout',
// },
// Add Member
{
path: '/dashboard/add-member',
component: lazy(() => import('../../view/Dashboards/member/addMember')),
layout: 'VerticalLayout',
},
// Search Repair
{
path: '/dashboard/search-repair',
component: lazy(() => import('../../view/Dashboards/member/searchMember')),
layout: 'VerticalLayout',
},
// Show Repair
{
path: '/dashboard/search-repair/details',
component: lazy(() => import('../../view/Dashboards/member/ShowDetailMember')),
layout: 'VerticalLayout',
},
// Show Repair
{
path: '/dashboard/member',
component: lazy(() => import('../../view/Dashboards/member/member')),
layout: 'VerticalLayout',
},
];
export default PagesRoutes;
src/services/index.js
View file @ b0050fb6
......@@ -18,10 +18,9 @@ export const sendLogin = (data) => {
return axios
.post(process.env.REACT_APP_SECRET_API + "/authentication/login", data)
.then((response) => {
if (response.data) {
if (response.data.code === 200) {
localStorage.setItem("user", JSON.stringify(response.data));
}
return response.data;
})
.catch((err) => {
......@@ -36,7 +35,6 @@ export const sendLogout = () => {
// get list All garage
export const FetchGarageAll = () => {
// console.log('test55555555', process.env.REACT_APP_SECRET_API)
return (
axios
.get(process.env.REACT_APP_SECRET_API + "/garage/all")
......@@ -80,23 +78,18 @@ export const InsertDetails = (data) => {
// get data FetctDetailByGarage
export const FetctDetailByGarage = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
})
);
});
};
// get data FetctDetailByGarageID
export const FetctDetailByGarageID = (data) => {
// console.log('fetdata', data)
return (
axios
// .get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbygarage", data)
......@@ -109,3 +102,97 @@ export const FetctDetailByGarageID = (data) => {
})
);
};
// get data FetctDetailByMember
export const FetchDetailByMember = (data) => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getbymember", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// send data to Insert Spare to Details
export const InsertSpare = (data) => {
return axios
.post(process.env.REACT_APP_SECRET_API + "/repairdetail/insert-spare", data)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// get data FetctDetailByGarageID
export const FetchSpareByDetailID = (data) => {
return axios
.get(process.env.REACT_APP_SECRET_API + "/repairdetail/getspare-detailid", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Delete Spare
export const DeleteSpare = (data) => {
return axios
.delete(process.env.REACT_APP_SECRET_API + "/repairdetail/delete-spare", {
data: { id: data },
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Update Spare
export const UpdateDetail = (data) => {
console.log(data);
return axios
.put(process.env.REACT_APP_SECRET_API + "/repairdetail/update-detail", data)
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// Insert Member
export const InsertMember = (data) => {
// console.log('service', data)
return axios
.post(process.env.REACT_APP_SECRET_API + "/member/insert", data)
.then((response) => {
return response.data;
})
.catch((err) => {
console.log(err);
});
};
// get data FetctMemberByGaragename
export const FetctMemberByGarage= (data) => {
// console.log(data)
return axios
.get(process.env.REACT_APP_SECRET_API + "/member/getmember/member-regis", {
params: data,
})
.then((response) => response.data)
.catch((err) => {
console.log(err);
});
};
// // logout
// export const sendLogout = () => {
// return localStorage.removeItem("user");
// };
src/view/Dashboards/component/ContentSearch.jsx 0 → 100644
View file @ b0050fb6
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Col, Row, Card, Typography } from "antd";
// import Service
import { FetchDetailByMember } from "../../../services";
const { Text } = Typography;
export default function ContentSearch(props) {
//set useState
const [datas, setDatas] = useState([]);
const { tel } = props;
useEffect(() => {
let data = {
member_tel: tel,
};
const getDetailByMember = async () => {
if (tel !== undefined) {
await FetchDetailByMember(data).then(async (response) => {
await setDatas(response.data);
// console.log('data', response.data[0])
});
} else {
setDatas([]);
}
};
getDetailByMember();
}, [tel]);
// console.log("datas", datas, "tel", tel);
return (
<>
<Row gutter={[0, 16]}>
{datas !== undefined ? (
<>
{datas.map((val, index) => {
return (
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 7, offset: 1 }}
className="border left"
>
<Card
type="inner"
title={val.garage_name + " " + val.repair_date}
extra={
<Link
to={{
pathname: "/dashboard/search-repair/details",
state: {
detailID: val.detailsID,
memberTel: val.member_tel,
},
}}
>
<Text style={{ color: "blue" }}>เพิ่มเติม</Text>
</Link>
}
>
<Text>
<b>ประเภท : </b>
{val.device_type}
</Text>
<br />
{val.device_type === "รถยนต์" ||
val.device_type === "รถจักรยานยนต์" ? (
<>
<Text>
<b>ทะเบียนรถ : </b>
{val.car_number} {val.car_province}
</Text>
<br />
<Text>
<b>ยี่ห้อ / รุ่น : </b>
{val.brand} {val.model}
</Text>
<br />
</>
) : (
<>
<Text>
<b>ชนิด : </b>
{val.equipment}
</Text>
<br />
<Text>
<b>ยี่ห้อ / รุ่น : </b>
{val.brand}
</Text>
<br />
</>
)}
<Text>
<b>การซ่อมเบื้องต้น : </b>
{val.repair_details}
</Text>
</Card>
</Col>
);
})}
</>
) : null}
</Row>
</>
);
}
src/view/Dashboards/component/SpareAdd.jsx
View file @ b0050fb6
import React, { useState, useEffect } from "react";
import {
// Row,
// Col,
Modal,
Button,
Input,
Divider,
Table,
Typography,
Row,
Col,
Space,
Select,
// Popconfirm
} from "antd";
import { PlusCircleFilled } from "@ant-design/icons";
import {
PlusCircleFilled,
DeleteOutlined,
ExclamationCircleOutlined,
OrderedListOutlined,
SaveOutlined,
} from "@ant-design/icons";
// import Service
import { FetctDetailByGarageID } from '../../../services'
import {
FetchSpareByDetailID,
InsertSpare,
DeleteSpare,
UpdateDetail,
} from "../../../services";
const { Column, ColumnGroup } = Table;
const { Text } = Typography;
// const data = [
// // {
// // key: "1",
// // name: "ยางใน",
// // age: 32,
// // address: "New York No. 1 Lake Park",
// // tags: ["nice", "developer"],
// // },
// // {
// // key: "2",
// // name: "น้ำมันเครื่อง",
// // age: 42,
// // address: "London No. 1 Lake Park",
// // tags: ["loser"],
// // },
// // {
// // key: "3",
// // name: "test",
// // age: 32,
// // address: "Sidney No. 1 Lake Park",
// // tags: ["cool", "teacher"],
// // },
// ];
const { Text, Title } = Typography;
const { confirm } = Modal;
const { Option } = Select;
export default function SpareAdd(props) {
const detailID = props;
// console.log(detailID);
const {detailID, memberTel} = props;
// console.log(memberTel, detailID)
// Set State
const [visible, setVisible] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [ datas, setDatas ] = useState([])
// const [modalText, setModalText] = useState("Content of the modal");
const [datas, setDatas] = useState([]);
const [status, setStatus] = useState('อยู่ระหว่างการซ่อม');
const [payment, setPayment] = useState('ยังไม่ได้ชำระ');
useEffect(() => {
const getDetailByGarage = async () => {
// state spare
const [spareName, setSpareName] = useState();
const [qty, setQTY] = useState();
const [qtyPrice, setQTYPrice] = useState();
const [sumPrice, setSumPrice] = useState(0);
await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data);
// console.log('data', response.data)
useEffect(() => {
const getSpare = async () => {
let data = {
detailID: detailID
}
await FetchSpareByDetailID(data).then((response) => {
if (response.data) {
setDatas(response.data);
}
});
setSumPrice(qty * qtyPrice);
};
getDetailByGarage();
}, [detailID]);
getSpare();
}, [detailID, qty, qtyPrice]);
const showModal = () => {
setVisible(true);
};
let listData = [];
let sum = 0;
if (datas.length !== 0) {
for (let i = 0; i < datas.length; i++) {
let toarr = JSON.parse(datas[i].spare);
sum = sum + toarr.sumPrice;
let newData = {
spareID: datas[i].spareID,
spareName: toarr.spareName,
qty: toarr.qty,
qtyPrice: toarr.qtyPrice,
sumPrice: toarr.sumPrice,
};
listData.push(newData);
}
}
// console.log(listData);
const handleOk = () => {
let listSpare = {
spareName: spareName,
qty: qty,
qtyPrice: qtyPrice,
sumPrice: sumPrice,
};
// let sum = 0;
// sum = sum +
const data = {
detailsID: detailID,
memberTel: memberTel,
spare: JSON.stringify(listSpare),
};
// console.log('data', data)
if (spareName === "" || spareName === null || spareName === undefined) {
Modal.info({
title: "ข้อมูลไม่ครบ",
content: `กรุณากรอกรายการการซ่อม`,
});
} else {
InsertSpare(data);
}
// setModalText("The modal will be closed after two seconds");
setConfirmLoading(true);
setTimeout(() => {
setVisible(false);
setConfirmLoading(false);
setSpareName(null);
setQTY();
setQTYPrice();
setSumPrice(0);
}, 2000);
};
const handleCancel = () => {
console.log("Clicked cancel button");
// console.log("Clicked cancel button");
setVisible(false);
};
function destroyAll() {
Modal.destroyAll();
}
const handleDelete = (id) => {
confirm({
icon: <ExclamationCircleOutlined />,
content: <Button onClick={destroyAll}>คลิ๊ก ok เพื่อลบรายการนี้</Button>,
onOk() {
// console.log("detele", id);
DeleteSpare(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleSave = () => {
let data = {
status: status,
status_payment: payment,
sumPrice: sum,
detailsID: detailID
}
// console.log('data', data)
UpdateDetail(data)
setTimeout(() => {
window.location.reload(false)
}, 1);
}
return (
<>
<Divider />
{/* <div className="div-p-5">
<Row gutter={[0, 32]}>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
test
</Col>
</Row>
</div> */}
<div className="div-p-5">
<Button className="bt-them" onClick={showModal}>
<Text className="color-fff-hover">
<PlusCircleFilled /> เพิ่มรายการอะไหล่
<PlusCircleFilled /> เพิ่มรายการซ่อม
</Text>
</Button>
<Table dataSource={datas} scroll={{ x: 400 }} className="border">
<Table
dataSource={listData}
scroll={{ x: 400 }}
bordered
className="border"
>
<ColumnGroup title="รายละเอียดการซ่อม">
<Column
title="ลำดับ"
dataIndex="key"
key="member_name"
width={"10%"}
render={(value, item, index) => index + 1}
/>
<Column
title="รายการอะไหล่"
dataIndex="name"
key="member_tel"
width={"60%"}
title="รายการซ่อม / อะไหล่"
dataIndex="spareName"
key="spareName"
width={"48%"}
/>
<Column
title="จำนวน"
dataIndex="device_type"
key="device_type"
width={"10%"}
/>
<Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
<Column
title="ราคาต่อหน่วย"
dataIndex="device_type"
key="device_type"
dataIndex="qtyPrice"
key="qtyPrice"
width={"12%"}
/>
<Column
title="ราคารวม"
dataIndex="sumPrice"
key="sumPrice"
width={"10%"}
/>
<Column
title="ราคาประเมิน"
dataIndex="device_type"
key="device_type"
title="ลบข้อมูล"
width={"10%"}
key="spairID"
render={(text, record, key) => (
<Space size="middle">
<Button
className="bt-delete"
onClick={() => {
handleDelete(record.spareID);
}}
>
<DeleteOutlined />
</Button>
</Space>
)}
/>
</ColumnGroup>
</Table>
</div>
{/* สรุปรายการซ่อม */}
{listData.length !== 0 ? (
<div>
<Row gutter={[0, 16]}>
<Col lg={{ span: 11, offset: 1 }}>
<Title level={5}>
<Text>
<OrderedListOutlined /> สรุปรายการซ่อม
</Text>
</Title>
<div className="border">
<Row style={{ marginTop: "10px" }}>
<Col span={11} offset={1}>
<Title level={5}>
<Text>รายการ</Text>
</Title>
</Col>
<Col span={5} offset={1}>
<Title level={5}>
<Text>จำนวน</Text>
</Title>
</Col>
<Col span={5} offset={1}>
<Title level={5}>
<Text>ราคา</Text>
</Title>
</Col>
{/* <Divider /> */}
{listData.map((val) => {
return (
<>
<Col span={11} offset={1}>
{val.spareName}
</Col>
<Col span={5} offset={1}>
{val.qty}
</Col>
<Col span={5} offset={1}>
{val.sumPrice}
</Col>
</>
);
})}
<Divider />
<Col span={11} offset={1}>
<Title level={5}>
<Text>ยอดสุทธิ</Text>
</Title>
</Col>
<Col span={11} offset={1}>
<Title level={5}>
<Text style={{ color: "red" }}>{sum} บาท</Text>
</Title>
</Col>
</Row>
</div>
</Col>
{/* อัพเดตสถานะ Update Status */}
<Col xs={24} sm={24} md={24} lg={{ span: 11, offset: 1 }}>
<Title level={5}>
<Text>
<SaveOutlined /> อัพเดตสถานะ
</Text>
</Title>
<div className="border">
<Row style={{ marginTop: "5%" }}>
<Col span={10} offset={1}>
<Title level={5}>
<Text>สถานะการซ่อม</Text>
</Title>
<div className="div-select">
<Select
allowClear
style={{ width: "100%" }}
defaultValue="อยู่ระหว่างการซ่อม"
onChange={(e) => {
setStatus(e);
// console.log(e)
}}
>
<Option value="อยู่ระหว่างการซ่อม">
อยู่ระหว่างการซ่อม
</Option>
<Option value="สำเร็จ">สำเร็จ</Option>
</Select>
</div>
</Col>
<Col span={11} offset={1}>
<Title level={5}>
<Text>การชำระเงิน</Text>
</Title>
<div className="div-select">
<Select
allowClear
style={{ width: "100%" }}
defaultValue={{ value: 'ยังไม่ได้ชำระ' }}
onChange={(e) => {
setPayment(e);
}}
>
<Option value="ยังไม่ได้ชำระ">ยังไม่ได้ชำระ</Option>
<Option value="ชำระแล้ว">ชำระแล้ว</Option>
</Select>
</div>
</Col>
<Divider />
<Col span={24}>
<Button className="bt-them" onClick={handleSave}>
<Text className="color-fff-hover">
<SaveOutlined /> บันทึก
</Text>
</Button>
</Col>
</Row>
</div>
</Col>
</Row>
</div>
) : null}
{/* Model Pop Up */}
<Modal
title="Title"
title="เพิ่มรายการซ่อม / อะไหล่"
visible={visible}
onOk={handleOk}
confirmLoading={confirmLoading}
onCancel={handleCancel}
width={1000}
>
<Input />
<Row>
<Col lg={{ span: 11, offset: 1 }}>
<Text>รายการ</Text>
<Input
required={true}
value={spareName}
onChange={(e) => {
setSpareName(e.target.value);
}}
/>
</Col>
<Col lg={{ span: 3, offset: 1 }}>
<Text>จำนวน</Text>
<Input
required={true}
type="number"
value={qty}
onChange={(e) => {
setQTY(e.target.value);
}}
/>
</Col>
<Col lg={{ span: 3, offset: 1 }}>
<Text>ราคาต่อหน่วย</Text>
<Input
required={true}
type="number"
value={qtyPrice}
onChange={(e) => {
setQTYPrice(e.target.value);
}}
/>
</Col>
<Col lg={{ span: 3, offset: 1 }}>
<Text>ยอดรวม</Text>
<Input type="number" value={sumPrice} />
</Col>
</Row>
</Modal>
</>
);
......
src/view/Dashboards/component/TitleShowDetail.jsx
View file @ b0050fb6
import React, { useEffect, useState } from "react";
import { Col, Row, Typography } from "antd";
import { Col, Divider, Row, Typography } from "antd";
import { MobileOutlined, DollarOutlined } from "@ant-design/icons";
// import Service
......@@ -26,7 +26,7 @@ export default function App(props) {
getDetailByGarage();
}, [detailID]);
console.log(datas);
// console.log(datas);
return (
<>
......@@ -111,6 +111,15 @@ export default function App(props) {
</Col>
</Row>
</div>
<Divider />
<div>
<Row>
<Col span={24}>
<Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
<Text>{datas.repair_details}</Text>
</Col>
</Row>
</div>
</>
);
}
src/view/Dashboards/component/agriculture.jsx
View file @ b0050fb6
......@@ -70,9 +70,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/car.jsx
View file @ b0050fb6
......@@ -86,9 +86,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/component/motorcycle.jsx
View file @ b0050fb6
......@@ -82,9 +82,16 @@ export default function App(props) {
if (member.includes(values.member_tel) === true) {
InsertDetails(data).then((response) => {
console.log("response", response);
Modal.info({
title: "สำเร็จ",
content: `เพิ่มการซ่อมสำเร็จ`,
onOk: () => {
setTimeout(() => {
window.location.reload(false);
}, 1);
},
});
});
window.location.reload(false)
} else {
Modal.info({
title: "ลูกค้ายังไม่ได้สมัครสมาชิก",
......
src/view/Dashboards/ecommerce/index.jsx
View file @ b0050fb6
......@@ -7,16 +7,15 @@ import { FetctDetailByGarage } from "../../../services";
// import { useLocation } from "react-router-dom";
import { Row, Col, Divider, Result, Button } from "antd";
import { Row, Col, Divider, Result, Button, Statistic } from "antd";
//import Widget
import CanvasJSChart from "../../widget/widgetPie";
// import ColumnJSChart from "../../widget/widgetColumn";
import ColumnJSChart from "../../widget/widgetColumn";
// const { Header } = Layout;
export default function Ecommerce() {
// let location = useLocation();
const [datas, setDatas] = useState([]);
......@@ -44,15 +43,52 @@ export default function Ecommerce() {
<>
{datas !== null ? (
<>
<div className="display-flex-main">
<div className="div-content-chart">
<Row className="content-chart">
<Col xs={24} lg={24} className="chart">
{/* <div className="display-flex-main"> */}
{/* <div className="div-content-chart"> */}
<Row gutter={[0, 16]} style={{ padding: "4%" }}>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<CanvasJSChart />
</Col>
<Col xs={24} lg={{ span: 10, offset: 2 }}>
<ColumnJSChart />
</Col>
</Row>
</div>
</div>
<Divider />
<Row>
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="ลูกค้าทั้งหมดของระบบ" value={120} />
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="ลูกค้าของฉัน"
value={12}
// precision={2}
/>
</Col>
</Row>
</Col>
<Col span={12}>
<Row gutter={16}>
<Col xs={24} lg={{ span: 11 }}>
<Statistic title="การรายงาน" value={120} />
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Statistic
title="รายได้ทั้งหมดของร้าน (บาท)"
value={19356}
precision={2}
/>
</Col>
</Row>
</Col>
</Row>
{/* </div> */}
{/* </div> */}
</>
) : (
<>
......@@ -75,7 +111,6 @@ export default function Ecommerce() {
</>
)}
<Divider />
{/* <CanvasJSChart className="chart" data={location.state} /> */}
</>
);
......
src/view/Dashboards/member/ShowDetailMember.jsx 0 → 100644
View file @ b0050fb6
import React, { useEffect, useState } from "react";
import { Col, Row, Typography, Table, Divider } from "antd";
import { MobileOutlined } from "@ant-design/icons";
import { useLocation } from "react-router-dom";
// import Service
import { FetctDetailByGarageID, FetchSpareByDetailID } from "../../../services";
// import { useLocation } from "react-router-dom";
const { Text, Title } = Typography;
const { Column, ColumnGroup } = Table;
export default function App() {
let location = useLocation();
// const detailID = props;
const detailID = location.state;
//set useState
const [datas, setDatas] = useState([]);
const [dataSpare, setDataSpare] = useState([]);
useEffect(() => {
const getDetailByGarage = async () => {
await FetctDetailByGarageID(detailID).then(async (response) => {
await setDatas(response.data[0]);
// console.log('data', response.data[0])
});
await FetchSpareByDetailID(detailID).then((response) => {
if (response.data) {
setDataSpare(response.data);
}
});
};
getDetailByGarage();
}, [detailID]);
let listData = [];
if (dataSpare.length !== 0) {
for (let i = 0; i < dataSpare.length; i++) {
let toarr = JSON.parse(dataSpare[i].spare);
// console.log("toarr", toarr);
let newData = {
spareID: dataSpare[i].spareID,
spareName: toarr.spareName,
qty: toarr.qty,
qtyPrice: toarr.qtyPrice,
sumPrice: toarr.sumPrice,
};
listData.push(newData);
}
}
// console.log('dataspare',dataSpare);
// console.log('spare',listData);
return (
<>
<div className="div-title-detail">
<Row gutter={[0, 32]} className="title-show-detail">
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ชื่ออุปกรณ์</Text>
<Title level={4} className="color-fff">
{/* <Text className="color-fff">{datas.brand} {datas.model}</Text> */}
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Text className="color-fff">
{datas.brand} {datas.model}
</Text>
</>
) : (
<>
<Text className="color-fff">{datas.equipment}</Text>
</>
)}
</Title>
<Text className="color-fff">{datas.device_type}</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ทะเบียน / ชนิด</Text>
{datas.device_type === "รถจักรยานยนต์" ||
datas.device_type === "รถยนต์" ? (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.car_number}</Text>
</Title>
<Text className="color-fff">{datas.car_province}</Text>
</>
) : (
<>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.equipment}</Text>
</Title>
</>
)}
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ลูกค้า</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">คุณ {datas.member_name}</Text>
</Title>
<Text className="color-fff">
<MobileOutlined />
{datas.member_tel}
</Text>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">ร้านที่รับซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.garage_name}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">วันที่รับซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.repair_date}</Text>
</Title>
</Col>
<Col xs={24} md={{ span: 11, offset: 1 }} lg={{ span: 7, offset: 1 }}>
<Text className="color-bfbf">สถานะการซ่อม</Text>
<Title level={4} className="color-fff">
<Text className="color-fff">{datas.status}</Text>
</Title>
</Col>
</Row>
</div>
<div>
<Divider />
<Row>
<Col span={24}>
<Title level={4}>รายละเอียดการซ่อมเบื้องต้น</Title>
<Text>{datas.repair_details}</Text>
</Col>
</Row>
</div>
<div className="div-p-5">
<Table
dataSource={listData}
scroll={{ x: 400 }}
bordered
className="border"
>
<ColumnGroup title="รายละเอียดการซ่อม">
<Column
title="ลำดับ"
width={"10%"}
render={(value, item, index) => index + 1}
/>
<Column
title="รายการซ่อม / อะไหล่"
dataIndex="spareName"
key="spareName"
width={"48%"}
/>
<Column title="จำนวน" dataIndex="qty" key="qty" width={"10%"} />
<Column
title="ราคาต่อหน่วย"
dataIndex="qtyPrice"
key="qtyPrice"
width={"12%"}
/>
<Column
title="ราคารวม"
dataIndex="sumPrice"
key="sumPrice"
width={"10%"}
/>
</ColumnGroup>
</Table>
</div>
</>
);
}
src/view/Dashboards/member/addMember.jsx 0 → 100644
View file @ b0050fb6
import React from "react";
import { Col, Form, Row, Typography, Input, Divider, Button, Modal } from "antd";
import { UserAddOutlined } from "@ant-design/icons";
// Import Services
import { InsertMember } from "../../../services";
const { Title } = Typography;
export default function AddMember() {
// console.log(JSON.parse(localStorage.getItem("user")).userData.garageName);
let garageName = JSON.parse(localStorage.getItem("user")).userData.garageName;
let userID = JSON.parse(localStorage.getItem("user")).userData.userId;
const onFinish = (values) => {
// console.log("values", values);
let addresss = {
address_details: values.address_details,
sub_district: values.sub_district,
district: values.district,
province: values.province,
poscode: values.poscode,
};
let newAddress = JSON.stringify(addresss);
let data = {
party: "member",
garageID: userID,
member_tel: values.member_tel,
member_name: values.member_name,
member_ads: newAddress,
shop_register: garageName,
};
// console.log("data", data);
InsertMember(data).then((response) => {
if (response) {
if (response.code === 200) {
Modal.info({
title: "เรียบร้อยแล้ว",
content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
onOk: () => {window.location.reload(false)}
});
} else {
// console.log("response", response.message);
Modal.info({
title: "มีลูกค้าสมาชิกนี้แล้ว",
content: `ลูกค้ารหัส ${values.member_tel} นี้ สมัครสมาชิกแล้ว กรุณาตรวจสอบอีกที`,
});
}
}
});
// console.log("values", JSON.parse(data.memeber_ads));
};
return (
<>
<Row gutter={[0, 32]}>
<Col
xs={{ span: 24 }}
lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<Col>
<UserAddOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Title level={2} style={{ color: "#a4b3b6" }}>
ลงทะเบียนลูกค้า
</Title>
</Col>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<Row>
<Form onFinish={onFinish}>
<Col span={16} offset={2}>
<Divider orientation="left">
<b>ข้อมูลลูกค้า</b>
</Divider>
<Form.Item
label="หมายเลขโทรศัพท์"
name="member_tel"
tooltip="หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป"
rules={[
{
required: true,
message: "กรุณากรอกหมายเลขโทรศัพท์ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
{/* <Text style={{ color: "red" }}>
*หมายเลขโทรศัพท์ของลูกค้าที่ใช้สมัครนี้
จะถูกนำไปใช้เป็นรหัสหลักของลูกค้าในการค้นหาการซ่อมในระบบต่อไป
</Text> */}
</Col>
<Col span={16} offset={2}>
<Form.Item
label="ชื่อ-นามสกุล"
name="member_name"
rules={[
{
required: true,
message: "กรุณากรอก ชื่อ-นามสกุล ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={16} offset={2}>
<Divider orientation="left">
<b>ข้อมูลที่อยู่ลูกค้า</b>
</Divider>
<Form.Item
label="รายละเอียดที่อยู่"
name="address_details"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input.TextArea showCount maxLength={100} />
</Form.Item>
</Col>
<Col span={16} offset={2}>
<Row>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<Form.Item
label="ตำบล"
name="sub_district"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Form.Item
label="อำเภอ"
name="district"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
</Row>
</Col>
<Col span={16} offset={2}>
<Row>
<Col xs={24} lg={{ span: 10, offset: 1 }}>
<Form.Item
label="จังหวัด"
name="province"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
<Col xs={24} lg={{ span: 11, offset: 1 }}>
<Form.Item
label="รหัสไปรษณีย์"
name="poscode"
rules={[
{
required: true,
message: "กรุณากรอกรายละเอียดที่อยู่ของลูกค้า!",
},
]}
>
<Input />
</Form.Item>
</Col>
</Row>
</Col>
<Form.Item>
<Button className="bt-them" htmlType="submit">
ยืนยัน
</Button>
</Form.Item>
</Form>
</Row>
</Col>
</Row>
</>
);
}
src/view/Dashboards/member/member.jsx 0 → 100644
View file @ b0050fb6
import React, { useState, useEffect } from "react";
import { Table, Input, Button, Space, Row, Col, Typography } from "antd";
import Highlighter from "react-highlight-words";
import { SearchOutlined } from "@ant-design/icons";
// import Service
import { FetctMemberByGarage } from "../../../services";
const { Title } = Typography
export default function Member() {
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
const [datas, setDatas] = useState([]);
let userId = JSON.parse(localStorage.getItem("user")).userData.userId;
useEffect(() => {
let data = {
userId: userId,
};
const getFunction = async () => {
await FetctMemberByGarage(data).then(async (response) => {
if (response.code === 500) {
console.log("data", response);
} else {
await setDatas(response.data);
}
// console.log('data', response)
});
};
getFunction();
}, [userId]);
let listData = [];
if (datas.length !== 0) {
for (let i = 0; i < datas.length; i++) {
let ads = JSON.parse(datas[i].member_ads);
let newData = {
member_name: datas[i].member_name,
member_tel: datas[i].member_tel,
register: datas[i].registration_date,
address_details: ads.address_details,
sub_district: ads.sub_district,
district: ads.district,
province: ads.province,
poscode: ads.poscode,
};
listData.push(newData);
}
}
const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
ref={(node) => {
// searchInput = node;
}}
placeholder={`ค้นหา ${dataIndex}`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ marginBottom: 8, display: "block" }}
/>
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
ค้นหา
</Button>
<Button
onClick={() => handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
ล้าง
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
// setTimeout(() => searchInput.select(), 100);
}
},
render: (text) =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
),
});
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
const handleReset = (clearFilters) => {
clearFilters();
// this.setState({ searchText: "" });
setSearchText("");
};
const columns = [
{
title: "หมายเลขสมาชิก",
dataIndex: "member_tel",
key: "member_tel",
width: "20%",
...getColumnSearchProps("member_tel"),
},
{
title: "ชื่อ",
dataIndex: "member_name",
key: "member_name",
width: "20%",
...getColumnSearchProps("member_name"),
},
{
title: "ที่อยู่",
render: (record) => {
return (
<>
{record.address_details}, {record.sub_district}, {record.district},{" "}
{record.province}, {record.poscode}
</>
);
},
},
{
title: "วันที่ลงทะเบียน",
dataIndex: "register",
key: "register",
width: "20%",
...getColumnSearchProps("register"),
},
];
return (
<>
<Row style={{padding: "3% 0 0 0"}}>
<Col span={24}>
<Title level={3}>ลูกค้าทั้งหมดของร้าน</Title>
</Col>
</Row>
<div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={listData}
/>
</div>
</>
);
}
src/view/Dashboards/member/searchMember.jsx 0 → 100644
View file @ b0050fb6
import React, { useState } from "react";
import { Col, Row, Typography, Input } from "antd";
// import { UserAddOutlined } from "@ant-design/icons";
// Import Component
import ContentSearch from '../component/ContentSearch'
const { Title, Text } = Typography;
const { Search } = Input;
export default function SearchMember() {
const [tel, setTel] = useState();
const onSearch = (value) => {
// console.log('value', typeof(value));
setTel(value);
};
// console.log(tel);
return (
<>
<Row gutter={[0, 32]}>
<Col xs={{ span: 24 }} lg={{ span: 24 }} className="w-auto bg-freecar ">
<Row className="div-p-5" gutter={[0, 32]}>
<Col span={24}>
<Title level={2}>
<Text style={{ color: "#aaabb8" }}>ค้นหาการซ่อมของลูกค้า</Text>
</Title>
</Col>
<Col span={24}>
<Text style={{ color: "#a4b3b6" }}>
การค้นหาประวัติการซ่อมของลูกค้า
เป็นการค้นหาทุกการซ่อมของลูกค้าครั้งก่อนหน้า
โดยลูกค้าจะต้องเป็นลูกค้าสมาชิกเท่านั้น
</Text>
</Col>
<Col span={24}>
<Row>
<Col xs={1} lg={{ span: 6 }}></Col>
<Col xs={22} lg={{ span: 12 }}>
<Search
// style={{border: '1px solid yellow'}}
placeholder="กรอกหมายเลขโทรศัพท์ของลูกค้า"
allowClear
enterButton="ค้นหา"
size="large"
onSearch={onSearch}
/>
</Col>
<Col xs={1} lg={{ span: 6 }}></Col>
</Row>
</Col>
</Row>
</Col>
<Col span={24}>
<ContentSearch tel={tel} />
</Col>
</Row>
</>
);
}
src/view/Dashboards/repairDashboard/repairAdd/index.jsx
View file @ b0050fb6
......@@ -37,8 +37,8 @@ export default function App() {
return (
<>
<Row>
<Col span={24} className="box-text-title">
<Title level={4}>เพิ่มการซ่อม</Title>
<Col span={24} style={{padding: '5%'}}>
<Title level={3}>เพิ่มการซ่อม</Title>
</Col>
<Col span={24}>
......@@ -73,7 +73,7 @@ export default function App() {
></Col>
</Row>
</Col>
<div style={{display: 'flex', marginTop: '10px'}}>
<div style={{ display: "flex", marginTop: "10px" }}>
<Title style={{ color: "red" }} level={5}>
หมายเหตุ : &nbsp;
</Title>
......
src/view/Dashboards/repairDashboard/repairList/ShowDetail.jsx
View file @ b0050fb6
......@@ -19,13 +19,14 @@ export default function ShowDetail() {
//use State
const detailID = location.state;
// console.log(detailID);
const memberTel = location.state;
// console.log(detailID, memberTel.memberTel);
return (
<>
<TitleShowDetail detailID={detailID.detailsID} />
{/* Show Repair id = {detailID.detailsID} */}
<SpareAdd detailID={detailID.detailsID} />
<SpareAdd detailID={detailID.detailsID} memberTel={memberTel.memberTel} />
</>
);
}
src/view/Dashboards/repairDashboard/repairSatatus/index.jsx
View file @ b0050fb6
import React from "react";
import { Row, Col, Typography, Select } from "antd";
const { Title } = Typography;
const { Option } = Select;
export default function App() {
return (
<>
<Row gutter={[0, 32]} className="div-p-5">
<Col span={24}>
<Row>
<Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
<Col xs={{ span: 20 }} lg={{ span: 12 }}>
<Title level={4}>ค้นหาตามสถานะ </Title>
<div className="div-select">
<Select
allowClear
style={{ width: "100%" }}
placeholder="กรุณาเลือกสถานะ"
onChange={(e) => {
// setTypeSelect(e);
}}
>
<Option value="สำเร็จ">สำเร็จ</Option>
<Option value="อยู่ระหว่างการซ่อม">อยู่ระหว่างการซ่อม</Option>
</Select>
</div>
</Col>
<Col xs={{ span: 2 }} lg={{ span: 6 }}></Col>
</Row>
</Col>
<Col span={24}>test</Col>
</Row>
</>
);
}
src/view/Login/Login.jsx
View file @ b0050fb6
// import liff from "@line/liff";
import React, { useEffect, useState, useRef } from "react";
import React from "react";
import { Form, Input, Button, Row, Col, Divider } from "antd";
import { Form, Input, Button, Row, Col, Modal, Typography } from "antd";
import BIRDS from "vanta/dist/vanta.birds.min";
import { LoginOutlined } from "@ant-design/icons";
import { sendLogin } from "../../services";
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,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
// const user = JSON.parse(localStorage.getItem('user'))
// console.log(user)
const { Title } = Typography;
function App() {
const onFinish = (values) => {
const data = {
garageID: values.garageID,
......@@ -42,45 +18,44 @@ function App() {
// console.log(data);
sendLogin(data).then((response) => {
// console.log('response', response.userData)
if (response.code === 200) {
setTimeout(() => {
window.location.reload(false);
}, 1000);
} else {
Modal.info({
title: "ไม่มีผู้ใช้นี้ในระบบ",
content: `กรุณาตรวจสอบ UserID / รหัสผ่าน ของท่าน`,
});
}
});
};
return (
<div className="h-100" ref={myRef}>
<Row>
<>
<Row gutter={[0, 32]}>
<Col
span={4}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
xs={{ span: 24 }}
lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<Col>
<LoginOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Title level={2} style={{ color: "#a4b3b6" }}>
เข้าสู่ระบบร้านค้า
</Title>
</Col>
</Col>
<Col
// style={{ textAlign: "center" }}
span={12}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<div className="title"></div>
<Divider orientation="center">
<b>เข้าสู่ระบบร้านซ่อม</b>
</Divider>
<Row>
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
remember: true,
}}
......@@ -113,27 +88,16 @@ function App() {
<Input.Password />
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button className="bt-them" htmlType="submit" >
<Form.Item>
<Button className="bt-them" htmlType="submit">
ยืนยัน
</Button>
</Form.Item>
</Form>
</Row>
</Col>
<Col
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
</Row>
</div>
</>
);
}
......
src/view/Pages/CustomerService/RepairShop/googleMaps.jsx
View file @ b0050fb6
......@@ -85,6 +85,7 @@ function Map() {
<b>{selectPark.garage_name}</b>
</h4>
<p>{JSON.parse(selectPark.garage_type)}</p>
<p>เปิด {selectPark.on_time} - {selectPark.off_time}</p>
</div>
</InfoWindow>
)}
......
src/view/Pages/GetStarted/Title/index.jsx
View file @ b0050fb6
......@@ -23,10 +23,9 @@ function App() {
scale: 1.0,
scaleMobile: 1.0,
backgroundColor: 0xffffff,
color1: 0x87,
color2: 0x0,
birdSize: 0.8,
quantity: 4.2,
color1: 0x55505f,
color2: 0x60931,
birdSize: 0.7,
})
);
}
......@@ -39,9 +38,9 @@ function App() {
<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 level={1}>Repair Center</Title>
<Title level={2}>ระบบจัดการร้านซ่อมและศูนย์บริการ</Title>
<Title level={3}>
เพิ่มประสิทธิภาพ ลดระยะเวลา ยกระดับร้านซ่อมไปกับเรา
</Title>
<Row className="box-button">
......
src/view/Pages/Register/index.jsx
View file @ b0050fb6
......@@ -99,13 +99,15 @@ export default function App() {
setCheckBox(e.target.checked);
}}
>
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้วและยอมรับข้อกำหนดและเงื่อนไขทุกประการ
<Text>
ฉันได้อ่านข้อกำหนดและเงื่อนไขในการให้บริการแล้ว
และยอมรับข้อกำหนดและเงื่อนไขทุกการ
</Text>
</Checkbox>
</Form.Item>
</Form>
</div>
<div className="div-button-submit">
<Button className="bt-them" onClick={handleSubmit}>
ยืนยัน
</Button>
......
src/view/Pages/Report/index.jsx
View file @ b0050fb6
......@@ -2,6 +2,8 @@ import React from "react";
import { Row, Col, Typography, Form, Input, Button, Select } from "antd";
import { CommentOutlined } from "@ant-design/icons";
const formItemLayout = {
labelCol: {
xs: {
......@@ -45,18 +47,38 @@ const { Title } = Typography;
/* eslint-enable no-template-curly-in-string */
export default function App() {
const onFinish = (values) => {
console.log(values);
};
return (
<>
<Row className="report-box">
<div className="report-content">
<Col span={24} className="box-text-title">
<Row gutter={[0, 32]}>
<Col
xs={{ span: 24 }}
lg={{ span: 8 }}
className="w-100 bg-theme display-flex-center"
>
<Col>
<CommentOutlined style={{ color: "#a4b3b6", fontSize: "1000%" }} />
<Title level={2} style={{ color: "#a4b3b6" }}>
แจ้งปัญหาการใช้งาน
</Title>
</Col>
</Col>
<Col
xs={{ span: 24 }}
lg={{ span: 16 }}
className="display-flex-center"
>
<Row >
<Col span={24}>
<Title level={4}>แจ้งปัญหาการใช้งาน</Title>
</Col>
<Col className="div-form">
<Form {...formItemLayout} name="nest-messages" onFinish={onFinish}>
{/* Garage type ประเภทของร้านซ่อม */}
<Form.Item
......@@ -112,21 +134,24 @@ export default function App() {
</Form.Item>
<Form.Item name="report_detail" label="ปัญหาที่จะรายงาน">
<Input.TextArea />
<Input.TextArea showCount maxLength={200} />
</Form.Item>
<Form.Item name="report_tel" label="หมายเลขโทรศัพท์ที่ติดติดต่อได้">
<Form.Item
name="report_tel"
label="หมายเลขโทรศัพท์ที่ติดติดต่อได้"
>
<Input />
</Form.Item>
<Form.Item wrapperCol={{ ...formItemLayout.wrapperCol }}>
<Button type="primary" htmlType="submit">
<Button className="bt-them" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</Row>
</Col>
</div>
</Row>
</>
);
......
src/view/Registion/Registion.jsx
View file @ b0050fb6
import React, { useState, useEffect, useRef } from "react";
import React, { useState } from "react";
// import axios from "axios";
import {
Form,
......@@ -9,6 +9,8 @@ import {
Button,
Divider,
TimePicker,
Typography,
Modal,
} from "antd";
import moment from "moment";
......@@ -19,8 +21,6 @@ import {
Marker,
} from "react-google-maps";
import BIRDS from "vanta/dist/vanta.birds.min";
import { sendToken } from "../../services";
let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }];
......@@ -28,12 +28,12 @@ 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);
// console.log("newLat", newLatLng[0].lat, "newLng", newLatLng[0].lng);
};
const MapWithAMarker = withScriptjs(
withGoogleMap(() => (
<GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
<GoogleMap defaultZoom={15} defaultCenter={newLatLng[0]}>
<Marker
draggable={true}
position={newLatLng[0]}
......@@ -44,64 +44,11 @@ const MapWithAMarker = withScriptjs(
);
const { Option } = Select;
const { Title } = Typography;
const formItemLayout = {
labelCol: {
xs: {
span: 24,
},
sm: {
span: 8,
},
},
wrapperCol: {
xs: {
span: 24,
},
sm: {
span: 16,
},
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
//Main Function
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: 3.00,
})
);
}
return () => {
if (vantaEffect) vantaEffect.destroy();
};
}, [vantaEffect]);
const [ontime, setOnTime] = useState();
const [offtime, setOffTime] = useState();
......@@ -130,7 +77,25 @@ export default function RegistrationForm() {
tel: values.phone,
};
sendToken(data).then((response) => console.log("response", response));
sendToken(data).then((response) => {
if (response) {
if (response.code === 200) {
Modal.info({
title: "เรียบร้อยแล้ว",
content: `สมัครสมาชิกให้ลูกค้าเรียบร้อยแล้ว`,
onOk: () => {
window.location.reload(false);
},
});
} else {
// console.log("response", response.message);
Modal.info({
title: "มีสมาชิกนี้แล้ว",
content: `user ID นี้ สมัครสมาชิกแล้ว กรุณาตรวจสอบอีกที`,
});
}
}
});
};
const handleOnTime = (time, timeString) => {
......@@ -142,35 +107,30 @@ export default function RegistrationForm() {
};
return (
<div className="h-auto" ref={myRef}>
<Row >
<Col
span={4}
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>
<>
<Row>
<Col span={24}>
<div style={{ padding: "2%" }}>
<Title>ลงทะเบียนร้านซ่อม</Title>
</div>
<Divider orientation="left">
<b>รายละเอียดของร้าน</b>
<Title level={4}>รายละเอียดของร้าน</Title>
</Divider>
<Form
{...formItemLayout}
form={form}
name="register"
onFinish={onFinish}
scrollToFirstError
>
<div style={{ padding: "2% 10% 2% 10%" }}>
<Row gutter={[0, 16]}>
{/* User ID */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="userID"
label="User ID"
......@@ -184,8 +144,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* Password รหัสผ่าน*/}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="password"
label="รหัสผ่าน"
......@@ -199,7 +165,14 @@ export default function RegistrationForm() {
>
<Input.Password minLength={6} />
</Form.Item>
</Col>
{/* confirm Password ยืนยันรหัสผ่าน */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="confirm"
label="ยืนยันรหัสผ่าน"
......@@ -225,8 +198,14 @@ export default function RegistrationForm() {
>
<Input.Password minLength={6} />
</Form.Item>
</Col>
{/* User Name ชื่อ-นามสกุล */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="username"
label="ชื่อ-นามสกุล"
......@@ -241,8 +220,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* Garage Name ชื่อร้านซ่อม */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="garagename"
label="ชื่อร้านซ่อม"
......@@ -257,8 +242,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* Gmail */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="email"
label="E-mail"
......@@ -275,8 +266,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* Garage type ประเภทของร้านซ่อม */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="garagetype"
label="ประเภทของร้านซ่อม"
......@@ -294,7 +291,9 @@ export default function RegistrationForm() {
style={{ width: "100%" }}
placeholder="Please select"
>
<Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
<Option value="ศูนย์บริการรถยนต์">
ศูนย์บริการรถยนต์
</Option>
<Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
<Option value="ศูนย์บริการรถจักรยานยนต์">
ศูนย์บริการรถจักรยานยนต์
......@@ -307,10 +306,15 @@ export default function RegistrationForm() {
</Option>
</Select>
</Form.Item>
</Col>
{/* หมายเลขโทรศัพท์ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
style={{ marginTop: "20px" }}
name="phone"
label="หมายเลขโทรศัพท์"
rules={[
......@@ -322,11 +326,17 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* เวลาที่ร้านเปิด */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
style={{ marginTop: "20px" }}
label="เวลาที่ร้านเปิด"
label="เวลาที่ร้านเปิด-ปิด"
rules={[
{
// required: true,
......@@ -335,25 +345,37 @@ export default function RegistrationForm() {
]}
>
<Row>
<Col span={11}>
<TimePicker
defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
onChange={handleOnTime}
/>
<div className="div-time">ถึงเวลา</div>
</Col>
<Col span={2}>-</Col>
<Col span={11}>
<TimePicker
defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
onChange={handleOffTime}
/>
</Col>
</Row>
</Form.Item>
</Col>
</Row>
</div>
<Divider orientation="left">
<b>ที่อยู่ของร้าน</b>
<Title level={4}>รายละเอียดที่อยู่ของร้าน</Title>
</Divider>
<Row>
<div style={{ padding: "2% 10% 2% 10%" }}>
<Row gutter={[0, 16]}>
{/* Addess Number บ้านเลขที่*/}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="addressnumber"
label="ตั้งอยู่เลขที่"
......@@ -367,8 +389,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* หมู่ที่ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="moo"
label="หมู่ที่"
......@@ -382,10 +410,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Row>
</Col>
<Row>
{/* ตรอก/ซอย */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="alley"
label="ตรอก/ซอย"
......@@ -399,8 +431,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* ถนน */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="road"
label="ถนน"
......@@ -414,9 +452,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Row>
</Col>
{/* ตำบล/แขวง */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="subdistrict"
label="ตำบล/แขวง"
......@@ -430,8 +473,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* อำเภอ/เขต */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="district"
label="อำเภอ/เขต"
......@@ -445,8 +494,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* จังหวัด */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="province"
label="จังหวัด"
......@@ -460,8 +515,14 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
{/* รหัสไปรษณีย์ */}
<Col
xs={24}
md={{ span: 11, offset: 1 }}
lg={{ span: 11, offset: 1 }}
>
<Form.Item
name="poscode"
label="รหัสไปรษณีย์"
......@@ -475,22 +536,28 @@ export default function RegistrationForm() {
>
<Input />
</Form.Item>
</Col>
</Row>
</div>
<Divider orientation="left">
<b>กรุณาปักหมุดที่อยู่ของร้าน</b>
<Title level={4}>ปรักหมุดที่อยู่ของร้าน</Title>
</Divider>
{/* ปักหมุดแผนที่ */}
<Col md={24} span={24}>
<div style={{ padding: "2% 10% 2% 10%" }}>
<Row gutter={[0, 16]}>
<Col xs={24} lg={{ span: 16, offset: 1 }}>
<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: "300px" }} />}
containerElement={<div style={{ height: "450px" }} />}
mapElement={<div style={{ height: "100%" }} />}
/>
</Col>
<Form.Item {...tailFormItemLayout}>
</Row>
</div>
<Col span={24}>
<Form.Item >
<Button
className="bt-them"
htmlType="submit"
......@@ -499,16 +566,378 @@ export default function RegistrationForm() {
ยืนยันการสมัคร
</Button>
</Form.Item>
</Col>
</Form>
</Col>
<Col
span={6}
xs={{ order: 1 }}
sm={{ order: 2 }}
md={{ order: 3 }}
lg={{ order: 4 }}
></Col>
</Row>
</div>
</>
// <div className="h-auto">
// <Row>
// <Col
// span={4}
// 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="left">
// <b>รายละเอียดของร้าน</b>
// </Divider>
// <Form
// {...formItemLayout}
// form={form}
// name="register"
// onFinish={onFinish}
// scrollToFirstError
// >
// {/* User ID */}
// <Form.Item
// name="userID"
// label="User ID"
// tooltip="User ID เพื่อใช้ในการเข้าระบบในครั้งต่อไป"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ userID ของคุณ",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Password รหัสผ่าน*/}
// <Form.Item
// name="password"
// label="รหัสผ่าน"
// rules={[
// {
// required: true,
// message: "กรุณาใส่รหัสผ่านของคุณ!",
// },
// ]}
// hasFeedback
// >
// <Input.Password minLength={6} />
// </Form.Item>
// {/* confirm Password ยืนยันรหัสผ่าน */}
// <Form.Item
// name="confirm"
// label="ยืนยันรหัสผ่าน"
// dependencies={["password"]}
// hasFeedback
// rules={[
// {
// required: true,
// message: "กรุณายืนยันรหัสผ่านของคุณ!",
// },
// ({ getFieldValue }) => ({
// validator(_, value) {
// if (!value || getFieldValue("password") === value) {
// return Promise.resolve();
// }
// return Promise.reject(
// new Error("รหัสผ่านทั้งสองที่คุณป้อนไม่ตรงกัน!")
// );
// },
// }),
// ]}
// >
// <Input.Password minLength={6} />
// </Form.Item>
// {/* User Name ชื่อ-นามสกุล */}
// <Form.Item
// name="username"
// label="ชื่อ-นามสกุล"
// tooltip="ชื่อเจ้าของร้าน หรือผู้ที่ได้รับผิดชอบ"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ ชื่อ-นามสกุล ของคุณ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Garage Name ชื่อร้านซ่อม */}
// <Form.Item
// name="garagename"
// label="ชื่อร้านซ่อม"
// tooltip="ชื่อร้านซ่อม หรืออู่ซ่อมรถ"
// rules={[
// {
// required: true,
// message: "กรุณาระบุ ชื่อร้านซ่อม หรืออู่ซ่อมรถ ของคุณ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Gmail */}
// <Form.Item
// name="email"
// label="E-mail"
// rules={[
// {
// type: "email",
// message: "ข้อมูลที่ป้อนไม่ถูกต้อง ตามรูปแบบ E-mail!",
// },
// {
// required: true,
// message: "กรุณาใส่อีเมลของคุณ!",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* Garage type ประเภทของร้านซ่อม */}
// <Form.Item
// name="garagetype"
// label="ประเภทของร้านซ่อม"
// tooltip="เลือกประเภทของร้านซ่อม (สามารถเลือกได้มากกว่าหนึ่งประเภท)"
// rules={[
// {
// required: true,
// message: "กรุณาเลือกประเภทของร้านซ่อมของคุณ!",
// },
// ]}
// >
// <Select
// mode="multiple"
// allowClear
// style={{ width: "100%" }}
// placeholder="Please select"
// >
// <Option value="ศูนย์บริการรถยนต์">ศูนย์บริการรถยนต์</Option>
// <Option value="อู่ซ่อมรถยนต์">อู่ซ่อมรถยนต์</Option>
// <Option value="ศูนย์บริการรถจักรยานยนต์">
// ศูนย์บริการรถจักรยานยนต์
// </Option>
// <Option value="อู่ซ่อมรถจักรยานยนต์">
// อู่ซ่อมรถจักรยานยนต์
// </Option>
// <Option value="ร้านบริการซ่อมอุปกรณ์การเกษตร">
// ร้านบริการซ่อมอุปกรณ์การเกษตร
// </Option>
// </Select>
// </Form.Item>
// {/* หมายเลขโทรศัพท์ */}
// <Form.Item
// style={{ marginTop: "20px" }}
// name="phone"
// label="หมายเลขโทรศัพท์"
// rules={[
// {
// required: true,
// message: "กรุณาใส่หมายเลขโทรศัพท์ของคุณ!",
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* เวลาที่ร้านเปิด */}
// <Form.Item
// style={{ marginTop: "20px" }}
// label="เวลาที่ร้านเปิด"
// rules={[
// {
// // required: true,
// // message: "กรุณาระบุเวลาเปิด-ปิดร้านของคุณ",
// },
// ]}
// >
// <Row>
// <TimePicker
// defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
// onChange={handleOnTime}
// />
// <div className="div-time">ถึงเวลา</div>
// <TimePicker
// defaultOpenValue={moment("00:00:00", "HH:mm:ss")}
// onChange={handleOffTime}
// />
// </Row>
// </Form.Item>
// <Divider orientation="left">
// <b>ที่อยู่ของร้าน</b>
// </Divider>
// <Row>
// {/* Addess Number บ้านเลขที่*/}
// <Form.Item
// name="addressnumber"
// label="ตั้งอยู่เลขที่"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* หมู่ที่ */}
// <Form.Item
// name="moo"
// label="หมู่ที่"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// </Row>
// <Row>
// {/* ตรอก/ซอย */}
// <Form.Item
// name="alley"
// label="ตรอก/ซอย"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* ถนน */}
// <Form.Item
// name="road"
// label="ถนน"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// </Row>
// {/* ตำบล/แขวง */}
// <Form.Item
// name="subdistrict"
// label="ตำบล/แขวง"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* อำเภอ/เขต */}
// <Form.Item
// name="district"
// label="อำเภอ/เขต"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* จังหวัด */}
// <Form.Item
// name="province"
// label="จังหวัด"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// {/* รหัสไปรษณีย์ */}
// <Form.Item
// name="poscode"
// label="รหัสไปรษณีย์"
// rules={[
// {
// required: true,
// message: "กรุณาระที่อยู่ให้ครบ!",
// whitespace: true,
// },
// ]}
// >
// <Input />
// </Form.Item>
// <Divider orientation="left">
// <b>กรุณาปักหมุดที่อยู่ของร้าน</b>
// </Divider>
// {/* ปักหมุดแผนที่ */}
// <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: "300px" }} />}
// mapElement={<div style={{ height: "100%" }} />}
// />
// </Col>
// <Form.Item {...tailFormItemLayout}>
// <Button
// className="bt-them"
// htmlType="submit"
// style={{ marginTop: "30px" }}
// >
// ยืนยันการสมัคร
// </Button>
// </Form.Item>
// </Form>
// </Col>
// <Col
// span={6}
// xs={{ order: 1 }}
// sm={{ order: 2 }}
// md={{ order: 3 }}
// lg={{ order: 4 }}
// ></Col>
// </Row>
// </div>
);
}
src/view/widget/RepairTable.jsx
View file @ b0050fb6
import React, { useState, useEffect } from "react";
import Highlighter from "react-highlight-words";
import { Table, Space, Typography } from "antd";
import { Table, Space, Typography, Row, Col, Input, Button } from "antd";
import { Link } from "react-router-dom";
import { SearchOutlined } from "@ant-design/icons";
// Import services
import { FetctDetailByGarage } from "../../services";
const { Column, ColumnGroup } = Table;
const { Text } = Typography;
// const { Column, ColumnGroup } = Table;
const { Text, Title } = Typography;
export default function App() {
const [datas, setDatas] = useState([]);
const [searchText, setSearchText] = useState("");
const [searchedColumn, setSearchedColumn] = useState("");
useEffect(() => {
const getDetailByGarage = async () => {
let local = {
garageID: JSON.parse(localStorage.getItem("user")).userData.userId,
};
// console.log("local", local);
// console.log(local);
await FetctDetailByGarage(local).then(async (response) => {
await setDatas(response.data);
});
......@@ -26,35 +30,119 @@ export default function App() {
getDetailByGarage();
}, []);
// console.log("datas", datas);
// console.log('datas' , datas)
// const clickMore = (key) => {
// console.log("key", key);
// };
///test
return (
<>
<Table dataSource={datas} scroll={{ x: 1000, y: 400 }}>
<ColumnGroup title="ลูกค้า">
<Column
title="ชื่อลูกค้า"
dataIndex="member_name"
key="member_name"
const getColumnSearchProps = (dataIndex) => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
ref={(node) => {
// searchInput = node;
}}
placeholder={`ค้นหา`}
value={selectedKeys[0]}
onChange={(e) =>
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
style={{ marginBottom: 8, display: "block" }}
/>
<Column title="รหัสลูกค้า" dataIndex="member_tel" key="member_tel" />
</ColumnGroup>
<ColumnGroup title="รายละเอียด">
<Column
title="ประเภทการซ่อม"
dataIndex="device_type"
key="device_type"
<Space>
<Button
type="primary"
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
icon={<SearchOutlined />}
size="small"
style={{ width: 90 }}
>
ค้นหา
</Button>
<Button
onClick={() => handleReset(clearFilters)}
size="small"
style={{ width: 90 }}
>
ล้าง
</Button>
</Space>
</div>
),
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
? record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase())
: "",
onFilterDropdownVisibleChange: (visible) => {
if (visible) {
// setTimeout(() => searchInput.select(), 100);
}
},
render: (text) =>
searchedColumn === dataIndex ? (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[searchText]}
autoEscape
textToHighlight={text ? text.toString() : ""}
/>
) : (
text
),
});
const handleSearch = (selectedKeys, confirm, dataIndex) => {
confirm();
setSearchText(selectedKeys[0]);
setSearchedColumn(dataIndex);
// this.setState({
// searchText: selectedKeys[0],
// searchedColumn: dataIndex,
// });
};
<Column
title="ทะเบียน/ชนิด"
key="detailsID"
render={(text, record) => (
const handleReset = (clearFilters) => {
clearFilters();
// this.setState({ searchText: "" });
setSearchText("");
};
const columns = [
{
title: "ชื่อลูกค้า",
dataIndex: "member_name",
key: "member_name",
...getColumnSearchProps("member_name"),
},
{
title: "รหัสลูกค้า",
dataIndex: "member_tel",
key: "member_tel",
...getColumnSearchProps("member_tel"),
},
{
title: "ประเภทการซ่อม",
dataIndex: "device_type",
key: "device_type",
...getColumnSearchProps("device_type"),
},
{
title: "ทะเบียน/ชนิด",
key: "detailsID",
...getColumnSearchProps("car_number"),
render: (record) => {
return (
<>
{record.device_type === "รถจักรยานยนต์" ||
record.device_type === "รถยนต์" ? (
......@@ -69,44 +157,74 @@ export default function App() {
</>
) : (
<>
<Text>
{record.equipment}
</Text>
<Text>{record.equipment}</Text>
</>
)}
</>
)}
/>
);
},
<Column
title="รายละเอียดการซ่อมเบื้องต้น"
dataIndex="repair_details"
key="repair_details"
/>
<Column
title="วันที่รับซ่อม"
dataIndex="repair_date"
key="repair_date"
/>
<Column title="สถานะ" dataIndex="status" key="status" />
<Column
title="เพิ่มเติม"
key="detailsID"
render={(text, record) => (
<Space size="middle">
},
{
title: "รายละเอียดการซ่อมเบื้องต้น",
dataIndex: "repair_details",
key: "repair_details",
},
{
title: "วันที่รับซ่อม",
dataIndex: "repair_date",
key: "repair_date",
...getColumnSearchProps("repair_date"),
},
{
title: "สถานะ",
dataIndex: "status",
key: "status",
...getColumnSearchProps("status"),
},
{
title: "เพิ่มเติม",
key: "detailsID",
render: (record) => {
return (
<>
<Link
to={{
pathname: "/dashboard/all-repair/detail",
state: { detailsID: record.detailsID },
state: {
detailsID: record.detailsID,
memberTel: record.member_tel,
},
}}
>
<Text style={{ color: "blue" }}>จัดการ</Text>
<Text style={{ color: "blue" }}>
{/* <ToolOutlined style={{fontSize: "200%"}} /> */}
จัดการงานซ่อม
</Text>
</Link>
</Space>
)}
</>
);
},
},
];
////
return (
<>
<Row>
<Col span={24} style={{ marginTop: "3%" }}>
<Title level={3}>งานซ่อมทั้งหมดที่มี</Title>
</Col>
</Row>
<div className="div-p-5">
<Table
scroll={{ x: 500 }}
bordered
columns={columns}
dataSource={datas}
/>
</ColumnGroup>
</Table>
</div>
</>
);
}
src/view/widget/widgetColumn.jsx
View file @ b0050fb6
......@@ -27,7 +27,11 @@ export default function Ecommerce(props) {
let carlist = [];
let motolist = [];
let agirculturelist = [];
let repairSum = []
let succeed = []
let notSucceed = []
if (datas !== null) {
for (let i = 0; i < datas.length; i++) {
if (datas[i].device_type === "รถยนต์") {
// console.log(datas[i].device_type);
......@@ -39,27 +43,37 @@ export default function Ecommerce(props) {
if (datas[i].device_type === "อุปกรณ์การเกษตร") {
agirculturelist.push(datas[i].device_type);
}
// console.log(datas[i].status)
repairSum.push(datas[i].length)
if (datas[i].status === "อยู่ระหว่างการซ่อม") {
succeed.push(datas[i].status)
// console.log(datas[i].status)
}
if (datas[i].status === "สำเร็จ") {
notSucceed.push(datas[i].status)
}
}
}
const options = {
animationEnabled: true,
theme: "light1", // "light1", "dark1", "dark2"
theme: "light2", // "light1", "dark1", "dark2"
title: {
text: "รายการซ่อมทั้งหมด",
text: "สรุปการซ่อม",
},
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
// indexLabel: "{label}: {y}%",
startAngle: 60,
startAngle: 90,
dataPoints: [
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
{ y: motolist.length, label: "รถจักรยานยนต์" },
{ y: agirculturelist.length, label: "อุปกรณ์การเกษตร" },
{ y: carlist.length, label: "รถยนต์" },
{ y: repairSum.length, label: "การซ่อมทั้งหมด" },
{ y: notSucceed.length, label: "สำเร็จ" },
{ y: succeed.length, label: "กำลังดำเนินการซ่อม" },
],
},
],
......
yarn.lock
View file @ b0050fb6
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