Skip to content

C
checkin_hrm
Commit e574ccfa by letrongtri99
Options

update_display

parent 5096aa74
Showing with 246 additions and 48 deletions
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="%PUBLIC_URL%/logoDCV_2.png" />
<meta name="theme-color" content="#000000" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta name="theme-color" content="#000000" />
name="description" <meta name="description" content="Web site created using create-react-app" />
content="Web site created using create-react-app" <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo-DCV.png" />
/> <!--
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
...@@ -24,12 +22,13 @@ ...@@ -24,12 +22,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>HRM CheckIn</title>
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <body>
<div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<!-- <div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
...@@ -39,5 +38,6 @@ ...@@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html>
</html>
\ No newline at end of file
src/View/Home/HomeContainer.js
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import HomeView from "./HomeView"; import HomeView from "./HomeView";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { checkInApi, checkOutApi } from "../../api/user";
import { useHistory } from "react-router-dom";
import Alert from "@material-ui/lab/Alert";
const HomeContainer = (props) => { const HomeContainer = (props) => {
const location = useLocation(); const location = useLocation();
...@@ -9,17 +12,23 @@ const HomeContainer = (props) => { ...@@ -9,17 +12,23 @@ const HomeContainer = (props) => {
latitude: null, latitude: null,
longitude: null, longitude: null,
}); });
const [changeStatus, setChangeStatus] = useState("");
const [changeId, setChangeId] = useState("");
const [user, setUser] = useState({});
let history = useHistory();
const changeIdCheck = (id) => {
setChangeId(id);
};
useEffect(() => { useEffect(() => {
const infoUser = JSON.parse(localStorage.getItem("user"));
setUser(infoUser);
getPosition(); getPosition();
}, []); }, []);
const [user, setUser] = useState({ const getPosition = () => {
name: location.state.fullName,
code: location.state.code,
});
const getPosition = async () => {
navigator.geolocation.getCurrentPosition((position) => { navigator.geolocation.getCurrentPosition((position) => {
if (position.coords.longitude) if (position.coords.longitude)
setState({ setState({
...@@ -29,11 +38,62 @@ const HomeContainer = (props) => { ...@@ -29,11 +38,62 @@ const HomeContainer = (props) => {
}); });
}; };
const onCheckIn = () => { const onCheckIn = async (status) => {
console.log(state); if (status == 0) {
let res = await checkInApi({
employeeCode: user.code,
companyCode: "DCV",
checkinId: null,
lat: "20.99847600",
lng: "105.80720300",
deviceName: "Xiaomi",
deviceMac: "Xiaomi Mac",
});
if (res.data && res.data.errorCode == 200) {
alert("Checkin thành công");
setChangeStatus(5);
} else if (res.status == 403 || res.status == 401) {
localStorage.removeItem("TOKEN_KEY");
localStorage.removeItem("user");
setTimeout(() => {
history.push("/");
}, 100);
} else {
alert("Lỗi thông tin");
}
} else if (status == 1) {
let res = await checkOutApi({
employeeCode: user.code,
companyCode: "DCV",
checkinId: changeId,
lat: "20.99847600",
lng: "105.80720300",
deviceName: "Xiaomi",
deviceMac: "Xiaomi Mac",
});
if (res.data && res.data.errorCode == 200) {
alert("Checkout thành công");
setChangeStatus(6);
} else if (res.status == 403 || res.status == 401) {
localStorage.removeItem("TOKEN_KEY");
localStorage.removeItem("user");
setTimeout(() => {
history.push("/");
}, 100);
} else {
alert("Lỗi thông tin");
}
}
}; };
return <HomeView user={user} onCheckIn={onCheckIn} />; return (
<HomeView
user={user}
onCheckIn={onCheckIn}
changeStatus={changeStatus}
changeIdCheck={changeIdCheck}
/>
);
}; };
export default HomeContainer; export default HomeContainer;
src/View/Home/HomeView.css 0 → 100644
.checkin {
background-color: #cc534f !important;
color: white !important;
}
.checkin:hover {
background-color: #cc534f !important;
color: white !important;
}
.checkout {
background-color: rgb(60, 141, 188) !important;
color: white !important;
}
.checkout:hover {
background-color: rgb(60, 141, 188) !important;
color: white !important;
}
.complete {
background-color: green !important;
color: white !important;
}
.complete:hover {
background-color: green !important;
color: white !important;
cursor: auto !important;
}
src/View/Home/HomeView.js
...@@ -7,33 +7,91 @@ import { ...@@ -7,33 +7,91 @@ import {
Card, Card,
Typography, Typography,
Fab, Fab,
Button,
} from "@material-ui/core"; } from "@material-ui/core";
import { statusCheckIn } from "../../api/user";
import { useHistory } from "react-router-dom";
import Alert from "@material-ui/lab/Alert";
import "./HomeView.css";
import ButtonCheckIn from "./ButtonCheckIn"; import ButtonCheckIn from "./ButtonCheckIn";
const HomeView = (props) => { const HomeView = (props) => {
const { user, onCheckIn } = props; const { user, onCheckIn, changeStatus, changeIdCheck } = props;
const [status, setStatus] = useState(0); const [status, setStatus] = useState("");
let history = useHistory();
useEffect(() => {
getInfo();
}, [changeStatus]);
const getInfo = async () => {
const res = await statusCheckIn({
empCode: JSON.parse(localStorage.getItem("user")).code,
});
if (res.data && res.data.errorCode == 0) {
if (res.data.data.notCheckInYet == 1) {
setStatus(0);
} else if (res.data.data.notCheckOutYet == 1) {
setStatus(1);
changeIdCheck(res.data.data.checkInID);
} else if (res.data.data.doneCheck == 1) {
setStatus(2);
}
} else if (res.status == 403 || res.status == 401) {
localStorage.removeItem("TOKEN_KEY");
localStorage.removeItem("user");
setTimeout(() => {
history.push("/");
}, 100);
} else {
window.alert("Lỗi");
}
};
const signOut = () => {
localStorage.removeItem("TOKEN_KEY");
localStorage.removeItem("user");
setTimeout(() => {
history.push("/");
}, 100);
};
return ( return (
<Container fixed style={{ height: "100vh" }}> <Container fixed style={{ height: "100vh", position: "relative" }}>
<div style={{ marginTop: 50 }} /> <div style={{ marginTop: 10 }} />
<div style={{ textAlign: "center", fontSize: "35px" }}> <br />
<div style={{ textAlign: "right" }}>
<Button variant="contained" color="secondary" onClick={signOut}>
Đăng xuất
</Button>
</div>
<div style={{ textAlign: "center", fontSize: "35px", marginTop: "15px" }}>
<Typography variant={"h4"} style={{ color: " #3399ff" }}> <Typography variant={"h4"} style={{ color: " #3399ff" }}>
Chào mừng {user ? user.name : ""} Chào mừng
</Typography> </Typography>
<h6 style={{ fontSize: "30px", margin: "0px", color: " #3399ff" }}>
{user ? user.name : ""}
</h6>
</div> </div>
<br /> <br />
<Grid container style={{ height: "100vh", justifyContent: "center" }}> <Grid container style={{ height: "65%", justifyContent: "center" }}>
<Fab <Fab
color="secondary"
aria-label="edit" aria-label="edit"
style={{ width: "30vw", height: "30vw" }} style={{ width: "30vw", height: "30vw" }}
onClick={onCheckIn} onClick={() => {
onCheckIn(status);
}}
className={
status == 0 ? "checkin" : status == 1 ? "checkout" : "complete"
}
> >
<span style={{ fontSize: "3vw" }}> <span style={{ fontSize: "3vw" }}>
{status == 0 ? "Checkin" : "Checkout"} {status == 0
? "CHECK-IN"
: status == 1
? "CHECK-OUT"
: "Hoàn thành"}
</span> </span>
</Fab> </Fab>
</Grid> </Grid>
......
src/View/Login/LoginScreen.js
...@@ -52,18 +52,22 @@ const LoginScreen = () => { ...@@ -52,18 +52,22 @@ const LoginScreen = () => {
const [helperText, sethelperText] = useState(""); const [helperText, sethelperText] = useState("");
const onLogin = async () => { const onLogin = async () => {
console.log("Abc");
if (state.username === "" || state.password === "") { if (state.username === "" || state.password === "") {
sethelperText(""); sethelperText("");
sethelperText("Cần phải điền đầy đủ email và password"); sethelperText("Cần phải điền đầy đủ email và password");
} else { } else {
sethelperText(""); sethelperText("");
console.log(state);
const res = await loginApi(state); const res = await loginApi(state);
console.log(res.data);
if (res.data && res.data.errorCode === 0) { if (res.data && res.data.errorCode === 0) {
localStorage.setItem("TOKEN_KEY", res.data.data.accessToken); localStorage.setItem("TOKEN_KEY", res.data.data.accessToken);
localStorage.setItem(
"user",
JSON.stringify({
name: res.data.data.fullName,
code: res.data.data.code,
})
);
history.push({ history.push({
pathname: "/home", pathname: "/home",
state: { code: res.data.data.code, fullName: res.data.data.fullName }, state: { code: res.data.data.code, fullName: res.data.data.fullName },
...@@ -92,7 +96,7 @@ const LoginScreen = () => { ...@@ -92,7 +96,7 @@ const LoginScreen = () => {
margin="normal" margin="normal"
required required
fullWidth fullWidth
label="email" label="Email"
autoComplete="email" autoComplete="email"
onChange={(e) => { onChange={(e) => {
setState({ setState({
......
src/View/RootView.js
...@@ -6,15 +6,57 @@ import HomeScreen from "./Home/HomeContainer"; ...@@ -6,15 +6,57 @@ import HomeScreen from "./Home/HomeContainer";
const RootView = () => { const RootView = () => {
let history = useHistory(); let history = useHistory();
function PrivateRoute({ children, ...rest }) {
let accessToken = localStorage.getItem("TOKEN_KEY");
return (
<Route
{...rest}
render={({ location }) =>
accessToken ? (
children
) : (
<Redirect
to={{
pathname: "/",
state: { from: location },
}}
/>
)
}
/>
);
}
function PublicRoute({ children, ...rest }) {
let accessToken = localStorage.getItem("TOKEN_KEY");
return (
<Route
{...rest}
render={({ location }) =>
!accessToken ? (
children
) : (
<Redirect
to={{
pathname: "/home",
state: { from: location },
}}
/>
)
}
/>
);
}
return ( return (
<BrowserRouter> <BrowserRouter>
<Switch> <Switch>
<Route exact path="/"> <PublicRoute exact path="/">
<LoginScreen /> <LoginScreen />
</Route> </PublicRoute>
<Route path="/home"> <PrivateRoute path="/home">
<HomeScreen /> <HomeScreen />
</Route> </PrivateRoute>
</Switch> </Switch>
</BrowserRouter> </BrowserRouter>
); );
......
src/api/user.js
...@@ -19,3 +19,8 @@ export const checkOutApi = async (body) => ...@@ -19,3 +19,8 @@ export const checkOutApi = async (body) =>
PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkout", body) PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkout", body)
.then((res) => res) .then((res) => res)
.catch((err) => err); .catch((err) => err);
export const statusCheckIn = async (body) =>
GetData("http://hrm.api.dcv.vn/api/v1/checkin/personaldailycheckin", body)
.then((res) => res)
.catch((err) => err);
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