checkin

package-lock.json

@@ -3820,6 +3820,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4825,6 +4830,15 @@
         }
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "css-line-break": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.0.1.tgz",
@@ -6524,6 +6538,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -8082,6 +8101,15 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "inline-style-prefixer": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz",
+      "integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==",
+      "requires": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -12490,6 +12518,27 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
       "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
+    "radium": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/radium/-/radium-0.26.1.tgz",
+      "integrity": "sha512-v2DvtBmy5w01hKrCAZmIkEHOMHmj6AeKI9115W2GOCExosP6+7PXV9LHPjZaiOkw3LP4FGvqhNaAWJhcQzoU4g==",
+      "requires": {
+        "exenv": "^1.2.1",
+        "hoist-non-react-statics": "3.3.0",
+        "inline-style-prefixer": "^4.0.0",
+        "prop-types": "^15.5.8"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+          "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
     "raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -12547,6 +12596,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-animations": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-animations/-/react-animations-1.0.0.tgz",
+      "integrity": "sha512-ePPpVgdKnNEXm+LP1ww5s3n0JzebBw9QdRfxRqogzeg1PDIn6kf0pmvgeTeVZQXXpGmHImkIeTiaQR1O6xjntA=="
+    },
     "react-app-polyfill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz",

src/App.js

@@ -2,7 +2,7 @@ import RootView from "./View/RootView";
 import HomeContainer from "./View/Home/HomeContainer";
 
 function App() {
-  return <HomeContainer />;
+  return <RootView />;
 }
 
 export default App;

src/View/Home/HomeView.js

-import React from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Container, Grid, Paper, Card, Typography } from "@material-ui/core";
+import {
+  Container,
+  Grid,
+  Paper,
+  Card,
+  Typography,
+  Fab,
+} from "@material-ui/core";
 
 import ButtonCheckIn from "./ButtonCheckIn";
 
 const HomeView = (props) => {
+  const [state, setState] = useState({
+    latitude: null,
+    longitude: null,
+  });
+  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>
+    <Container fixed style={{ height: "100vh" }}>
       <div style={{ marginTop: 50 }} />
-      <Grid xs={12} spacing={3} container direction="row">
-        <Grid item xs={4}>
-          <Paper>
-            <Grid justify="center" container alignItems="center">
-              <Grid
-                style={{
-                  width: 100,
-                  height: 100,
-                  borderRadius: 50,
-                  backgroundColor: "red",
-                  justifyContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <Typography style={{ textAlign: "center" }}>CHECKIN</Typography>
-              </Grid>
-            </Grid>
-          </Paper>
-        </Grid>
-        <Grid item xs={8}>
-          <Paper>RIght</Paper>
-        </Grid>
-      </Grid>
-
-      <Grid
-        xs={12}
-        spacing={3}
-        justify="space-between"
-        container
-        direction="row"
-        alignItems="center"
-      >
-        <Grid item xs={6}>
-          Báo cáo
-        </Grid>
-        <Grid item xs={6}>
-          RIght
-        </Grid>
-      </Grid>
-      <Grid
-        xs={12}
-        spacing={3}
-        justify="space-between"
-        container
-        direction="row"
-        alignItems="center"
-      >
-        <Grid item xs={3}>
-          <Card> Hợp lệ</Card>
-        </Grid>
-        <Grid item xs={3}>
-          <Card>Đi muộn</Card>
-        </Grid>
-        <Grid item xs={3}>
-          <Card>Chờ xử lý</Card>
-        </Grid>
-        <Grid item xs={3}>
-          <Card>Nghỉ</Card>
-        </Grid>
+      <div style={{ textAlign: "center", fontSize: "35px" }}>
+        Tên: Lê Trọng Trí
+      </div>
+      <br />
+      <Grid container style={{ height: "100vh", justifyContent: "center" }}>
+        <Fab
+          color="secondary"
+          aria-label="edit"
+          style={{ width: "20vw", height: "20vw" }}
+          onClick={getPosition}
+        >
+          <span style={{ fontSize: "3vw" }}>
+            {status == 0 ? "Checkin" : "Checkout"}
+          </span>
+        </Fab>
       </Grid>
     </Container>
   );

src/View/RootView.js

@@ -2,6 +2,7 @@ import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
 import { useHistory, Redirect } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import LoginScreen from "./Login/LoginScreen";
+import HomeScreen from "./Home/HomeContainer";
 
 const RootView = () => {
   let history = useHistory();
@@ -11,6 +12,9 @@ const RootView = () => {
         <Route exact path="/">
           <LoginScreen />
         </Route>
+        <Route path="/home">
+          <HomeScreen />
+        </Route>
       </Switch>
     </BrowserRouter>
   );