Skip to content

C
checkin_hrm
Commit 5096aa74 by Giang Tran
Options

update code

parent d0825019
Showing with 240 additions and 81 deletions
src/View/Home/HomeContainer.js
import React, { useState, useEffect } from "react";
import HomeView from "./HomeView";
import { useLocation } from "react-router-dom";
const HomeContainer = (props) => {
return <HomeView />;
const location = useLocation();
const [state, setState] = useState({
latitude: null,
longitude: null,
});
useEffect(() => {
getPosition();
}, []);
const [user, setUser] = useState({
name: location.state.fullName,
code: location.state.code,
});
const getPosition = async () => {
navigator.geolocation.getCurrentPosition((position) => {
if (position.coords.longitude)
setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
});
};
const onCheckIn = () => {
console.log(state);
};
return <HomeView user={user} onCheckIn={onCheckIn} />;
};
export default HomeContainer;
src/View/Home/HomeView.js
......@@ -12,38 +12,25 @@ import {
import ButtonCheckIn from "./ButtonCheckIn";
const HomeView = (props) => {
const [state, setState] = useState({
latitude: null,
longitude: null,
});
const { user, onCheckIn } = props;
const [status, setStatus] = useState(0);
const getPosition = () => {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.longitude);
console.log(position.coords.latitude);
});
if (status == 0) {
setStatus(1);
} else {
setStatus(0);
}
};
useEffect(() => {
getPosition();
}, []);
return (
<Container fixed style={{ height: "100vh" }}>
<div style={{ marginTop: 50 }} />
<div style={{ textAlign: "center", fontSize: "35px" }}>
Tên: Lê Trọng Trí
<Typography variant={"h4"} style={{ color: " #3399ff" }}>
Chào mừng {user ? user.name : ""}
</Typography>
</div>
<br />
<Grid container style={{ height: "100vh", justifyContent: "center" }}>
<Fab
color="secondary"
aria-label="edit"
style={{ width: "20vw", height: "20vw" }}
onClick={getPosition}
style={{ width: "30vw", height: "30vw" }}
onClick={onCheckIn}
>
<span style={{ fontSize: "3vw" }}>
{status == 0 ? "Checkin" : "Checkout"}
......
src/View/Login/LoginScreen.js
import React from "react";
import React, { useState } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { FormHelperText, Link, Grid, Box, Typography } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import { loginApi } from "../../api/user";
function Copyright() {
return (
......@@ -46,66 +43,105 @@ const useStyles = makeStyles((theme) => ({
const LoginScreen = () => {
const classes = useStyles();
let history = useHistory();
const [state, setState] = useState({
appcode: "Dcv",
username: "",
password: "",
});
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);
history.push({
pathname: "/home",
state: { code: res.data.data.code, fullName: res.data.data.fullName },
});
} else if (res.data && res.data.errorCode === 1) {
sethelperText("");
sethelperText("Sai email hoặc mật khẩu");
}
}
};
return (
<div style={{ height: "100vh" }}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
<img
style={{ width: 200, height: 100, marginTop: 10, marginBottom: 10 }}
src="/logo-DCV.png"
/>
<Typography color={"primary"} component="h1" variant="h5">
ĐĂNG NHẬP
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
<TextField
variant="outlined"
margin="normal"
required
fullWidth
label="email"
autoComplete="email"
onChange={(e) => {
setState({
...state,
username: e.target.value,
});
}}
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
label="Mật khẩu"
type="password"
onChange={(e) => {
setState({
...state,
password: e.target.value,
});
}}
autoComplete="current-password"
/>
<div style={{ width: "100%" }}>
<FormHelperText
style={{ marginLeft: "16px", color: "red", fontSize: "13px" }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
{helperText}
</FormHelperText>
</div>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onLogin}
>
Đăng nhập
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Quên mật khẩu?
</Link>
</Grid>
</form>
</Grid>
</div>
<Box mt={8}>
<Copyright />
......
src/api/api.js 0 → 100644
import axios from "axios";
axios.defaults.timeout = 10000;
export async function GetData(url, data) {
const token = localStorage.getItem("TOKEN_KEY");
let myRequest = {
method: "get",
url,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
params: {
...data,
},
timeout: 60 * 1000,
// withCredentials: true,
};
console.log("My request", myRequest);
return await axios(myRequest)
.then((response) => response)
.then((response) => response)
.catch((error) => {
console.log(error.request);
const err = {
message: "error",
status: error.request.status,
};
return err;
});
}
export async function PostLogin(url, json, isAuth = true) {
let myRequest = {
method: "post",
url,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
timeout: 60 * 1000,
data: JSON.stringify(json),
};
console.log("post data mobile", myRequest);
return await axios(myRequest)
.then((response) => response)
.then((response) => response)
.catch((error) => {
console.log(error.request);
const err = {
message: "error",
status: error.request.status,
};
return err;
});
}
export async function PostData(url, json, isAuth = true) {
const token = localStorage.getItem("TOKEN_KEY");
let myRequest = {
method: "post",
url,
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
timeout: 60 * 1000,
data: JSON.stringify(json),
};
console.log("post data mobile", myRequest);
return await axios(myRequest)
.then((response) => response)
.then((response) => response)
.catch((error) => {
console.log(error.request);
const err = {
message: "error",
status: error.request.status,
};
return err;
});
}
src/api/user.js 0 → 100644
import { GetData, PostLogin, PostData } from "./api";
export const loginApi = async (body) =>
PostLogin("http://hrm.auth.dcv.vn/api/v1/auth/login", body)
.then((res) => res)
.catch((err) => err);
export const getDataApi = async (body) =>
GetData("http://hrm.auth.dcv.vn/api/v1/auth/login", body)
.then((res) => res)
.catch((err) => err);
export const checkInApi = async (body) =>
PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkin", body)
.then((res) => res)
.catch((err) => err);
export const checkOutApi = async (body) =>
PostData("http://hrm.japi.dcv.vn/venus-service/checkinService/checkout", 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