covid tracker

shwetagurnani · Aug 11, 2020 · 8e2900c · 8e2900c
1 parent 9873842
commit 8e2900c
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 1 deletion.
diff --git a/.gcloudignore b/.gcloudignore
@@ -0,0 +1,17 @@
+# This file specifies files that are *not* uploaded to Google Cloud Platform
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /server/node_modules
-/server/package-lock.json
+/server/package-lock.json
+/app.yaml
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -13,6 +13,7 @@
     "jwt-decode": "^2.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-indian-state-region-selector": "^6.1.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",

diff --git a/client/src/App.js b/client/src/App.js
@@ -18,6 +18,8 @@ import DoctorVerify from './components/doctorauth/verify';
 import Navbar from './components/navbar/navbar';
 import PrivateNavbar from './components/privateroutes/PrivateNavbar'
 
+import Map from './components/landing/map';
+
 
 if (localStorage.jwtToken) {
 
@@ -43,6 +45,7 @@ class App extends Component {
           <Switch>
               <PrivateNavbar  component={Navbar} />
             </Switch>  
+            <Route exact path="/" component={Map} />
             <Route exact path="/patient/register" component={PatientRegister} />
             <Route exact path="/patient/verify" component={PatientVerify} />
             <Route exact path="/patient/login" component={PatientLogin} />

diff --git a/client/src/components/landing/map.jsx b/client/src/components/landing/map.jsx
@@ -0,0 +1,101 @@
+import React , {Component} from 'react';
+import axios from 'axios';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+
+class map extends Component {
+  constructor (props) {
+    super(props);
+    this.state = { 
+        total: {},
+        statewise: []
+     };
+   }
+    componentDidMount(){
+        axios.get('https://api.covidindiatracker.com/state_data.json')
+        .then(res=> this.setState({statewise: res.data}));
+        axios.get('https://api.covidindiatracker.com/total.json')
+        .then(res=> this.setState({total: res.data}));
+    }
+
+  render () {
+
+    return (
+      <div class="row mx-auto">
+
+         <div class="col-lg-5 container col-sm-12 col-md-12 mx-auto" style={{overflowX: "auto"}}>
+         <TableContainer>
+            <Table style={{fontFamily: "Lato sans-serif"}}>
+                <colgroup>
+                    <col width="30%" />
+                    <col width="15%" />
+                    <col width="15%" />
+                    <col width="15%" />
+                    <col width="15%" />
+                </colgroup>
+                <TableHead>
+                    <TableRow style={{ height: "10px"}}>
+                        <TableCell style={{color: "black"}}> <b> State </b></TableCell>
+                        <TableCell   style={{color: "red"}} > <b>Confirmed </b> </TableCell>
+                        <TableCell style={{color: "blue"}}> <b> Existing</b> </TableCell>
+                        <TableCell  style={{color: "green"}} > <b>Recovered</b> </TableCell>
+                        <TableCell style={{color: "grey"}}> <b> Deaths </b> </TableCell>
+                    </TableRow>
+                </TableHead>
+                    <TableBody>
+                        {this.state.statewise.map((data) => (
+                            <TableRow key={data.name} style={{ height: "10px"}}>
+                            <TableCell  style={{color: "black" , textDecoration: "bold"}}>  {data.state} </TableCell>
+                        <TableCell  style={{color: "red"}}> {data.confirmed} <br/>  <b><i> {data.cChanges>=0 ?<span>+</span>: null}{data.cChanges}</i></b></TableCell>
+                            <TableCell style={{color: "blue"}} >  {data.active} <br/>  <b><i>   {data.aChanges>=0 ?<span>+</span>: null}{data.aChanges}</i></b> </TableCell>
+                            <TableCell  style={{color: "green"}}>  {data.recovered}  <br/>  <b><i>  {data.rChanges>=0 ?<span>+</span>: null}{data.rChanges}</i></b> </TableCell>
+                            <TableCell style={{color: "grey"}} >  {data.deaths}  <br/>  <b><i>  {data.dChanges>=0 ?<span>+</span>: null}{data.dChanges}</i></b> </TableCell>
+                            </TableRow>
+                        ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+         </div>
+         <div class="col-lg-5 container center mx-auto">
+             <h1 style={{marginTop: "50px", fontFamily: "roboto"}} class="text-center"> COVID Tracker</h1>  
+             <h2 style={{ fontFamily: "roboto"}}> India </h2> 
+             <div class="card" style={{margin: "30px 50px" }} >
+                    <h4 style={{ fontFamily: "roboto", marginTop:"20px" }}> Confirmed </h4>
+                    <h3 style={{color: "red" , fontFamily:"roboto"}}>
+                        {this.state.total.confirmed}
+                    </h3>
+                    <h6 style={{color: "red" , marginBottom:"20px" , fontFamily:"roboto"}}> <b>+{this.state.total.cChanges} </b>  </h6>
+             </div>
+             <div class="card" style={{margin: "30px 50px"}}>
+             <h4 style={{ fontFamily: "roboto", marginTop:"20px" }}> Active </h4>
+             <h3 style={{color: "blue" , fontFamily:"roboto"}}>
+                        {this.state.total.active}
+                    </h3>
+                    <h6 style={{color: "blue" , marginBottom:"20px" , fontFamily:"roboto"}}> <b>+{this.state.total.aChanges} </b>  </h6>
+             </div>
+             <div class="card" style={{margin: "30px 50px"}}>
+             <h4 style={{ fontFamily: "roboto", marginTop:"20px" }}> Recovered </h4>
+             <h3 style={{color: "green" ,  fontFamily:"roboto" }}>
+                        {this.state.total.recovered}
+                    </h3>
+                    <h6 style={{color: "green" , marginBottom:"20px" , fontFamily:"roboto"}}> <b>+{this.state.total.rChanges} </b> </h6>
+             </div>
+             <div class="card" style={{margin: "30px 50px"}}>
+             <h4 style={{ fontFamily: "roboto", marginTop:"20px" }}> Deaths </h4>
+             <h3 style={{color: "darkgrey" ,  fontFamily:"roboto"}}>
+                        {this.state.total.deaths}
+                    </h3>
+                    <h6 style={{color: "darkgrey" , marginBottom:"20px" , fontFamily:"roboto"}}><b>+{this.state.total.dChanges} </b> </h6>
+             </div>
+         </div>
+
+      </div>
+    );
+  }
+}
+
+export default map;
diff --git a/package-lock.json b/package-lock.json