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>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logoDCV_2.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo-DCV.png" />
<!--
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/
-->
<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.
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.
......@@ -24,12 +22,13 @@
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`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>HRM CheckIn</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......@@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>
</html>
\ No newline at end of file
src/View/Home/HomeContainer.js
import React, { useState, useEffect } from "react";
import HomeView from "./HomeView";
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 location = useLocation();
......@@ -9,17 +12,23 @@ const HomeContainer = (props) => {
latitude: null,
longitude: null,
});
const [changeStatus, setChangeStatus] = useState("");
const [changeId, setChangeId] = useState("");
const [user, setUser] = useState({});
let history = useHistory();
const changeIdCheck = (id) => {
setChangeId(id);
};
useEffect(() => {
const infoUser = JSON.parse(localStorage.getItem("user"));
setUser(infoUser);
getPosition();
}, []);
const [user, setUser] = useState({
name: location.state.fullName,
code: location.state.code,
});
const getPosition = async () => {
const getPosition = () => {
navigator.geolocation.getCurrentPosition((position) => {
if (position.coords.longitude)
setState({
......@@ -29,11 +38,62 @@ const HomeContainer = (props) => {
});
};
const onCheckIn = () => {
console.log(state);
const onCheckIn = async (status) => {
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;
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 {
Card,
Typography,
Fab,
Button,
} 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";
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 (
<Container fixed style={{ height: "100vh" }}>
<div style={{ marginTop: 50 }} />
<div style={{ textAlign: "center", fontSize: "35px" }}>
<Container fixed style={{ height: "100vh", position: "relative" }}>
<div style={{ marginTop: 10 }} />
<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" }}>
Chào mừng {user ? user.name : ""}
Chào mừng
</Typography>
<h6 style={{ fontSize: "30px", margin: "0px", color: " #3399ff" }}>
{user ? user.name : ""}
</h6>
</div>
<br />
<Grid container style={{ height: "100vh", justifyContent: "center" }}>
<Grid container style={{ height: "65%", justifyContent: "center" }}>
<Fab
color="secondary"
aria-label="edit"
style={{ width: "30vw", height: "30vw" }}
onClick={onCheckIn}
onClick={() => {
onCheckIn(status);
}}
className={
status == 0 ? "checkin" : status == 1 ? "checkout" : "complete"
}
>
<span style={{ fontSize: "3vw" }}>
{status == 0 ? "Checkin" : "Checkout"}
{status == 0
? "CHECK-IN"
: status == 1
? "CHECK-OUT"
: "Hoàn thành"}
</span>
</Fab>
</Grid>
......
src/View/Login/LoginScreen.js
......@@ -52,18 +52,22 @@ const LoginScreen = () => {
const [helperText, sethelperText] = useState("");
const onLogin = async () => {
console.log("Abc");
if (state.username === "" || state.password === "") {
sethelperText("");
sethelperText("Cần phải điền đầy đủ email và password");
} else {
sethelperText("");
console.log(state);
const res = await loginApi(state);
console.log(res.data);
if (res.data && res.data.errorCode === 0) {
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({
pathname: "/home",
state: { code: res.data.data.code, fullName: res.data.data.fullName },
......@@ -92,7 +96,7 @@ const LoginScreen = () => {
margin="normal"
required
fullWidth
label="email"
label="Email"
autoComplete="email"
onChange={(e) => {
setState({
......
src/View/RootView.js
......@@ -6,15 +6,57 @@ import HomeScreen from "./Home/HomeContainer";
const RootView = () => {
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 (
<BrowserRouter>
<Switch>
<Route exact path="/">
<PublicRoute exact path="/">
<LoginScreen />
</Route>
<Route path="/home">
</PublicRoute>
<PrivateRoute path="/home">
<HomeScreen />
</Route>
</PrivateRoute>
</Switch>
</BrowserRouter>
);
......
src/api/user.js
......@@ -19,3 +19,8 @@ export const checkOutApi = async (body) =>
PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkout", body)
.then((res) => res)
.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