Merge pull request #19 from parquar:datatable-styling

this looks good
parkerholcomb · Apr 5, 2021 · 445c905 · 445c905
2 parents 7add1ad + 286ea6c
commit 445c905
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 30 deletions.
diff --git a/cloud_functions/search_handler.py b/cloud_functions/search_handler.py
@@ -15,19 +15,19 @@ def _miles_away(lat_lng_a, lat_lng_b):
 def _vaccine_stats(df):
     return dict(
         locations_count = int(df['NAME'].count()),
-        total_available = int(df['VACCINES_AVAILABLE'].sum()),
         pfizer_available = int(df['PFIZER_AVAILABLE'].sum()),
         moderna_available = int(df['MODERNA_AVAILABLE'].sum()),
-        jj_available = int(df['JJ_AVAILABLE'].sum())
+        jj_available = int(df['JJ_AVAILABLE'].sum()),
+        total_available = int(df['VACCINES_AVAILABLE'].sum())
     )
 
 def _location_stats(df):
     stats = df.groupby(['TYPE']).agg(
         locations_count=('NAME','count'), 
-        total_available=('VACCINES_AVAILABLE','sum'),
         pfizer_available=('PFIZER_AVAILABLE','sum'),
         moderna_available=('MODERNA_AVAILABLE','sum'),
-        jj_available=('JJ_AVAILABLE','sum')
+        jj_available=('JJ_AVAILABLE','sum'),
+        total_available=('VACCINES_AVAILABLE','sum')
     ).reset_index()
 
     return stats.to_dict(orient='records')

diff --git a/site/src/app.css b/site/src/app.css
@@ -29,6 +29,8 @@ td, th {
 
 /* table stuff end  */
 
+/* layout */
+
 .container {
   flex-direction: column;
   height: 100%;
@@ -37,14 +39,25 @@ td, th {
   padding: 30px 50px 50px 50px;
 }
 
+.navbar {
+  width: 100%;
+  height: 100px;
+}
+
 .main {
-  margin-top: 100px;
-  height: 60vh;
-  justify-content: center;
+  margin-top: 25px;
+  /* height: 60vh; */
+  /* justify-content: center; */
   /* overflow-x: scroll;
   overflow-y: scroll; */
 }
 
+/* layout end */
+
+.summary-container {
+  font-size: 18px;
+}
+
 
 .logoContainer {
   height: 60vh;
@@ -59,6 +72,7 @@ td, th {
 
 .formContainer {
   width: 100%;
+  margin: 1rem;
 }
 
 .subscribe-form {
@@ -74,27 +88,24 @@ td, th {
   margin-top: 12px;
 }
 
-.navbar {
-  width: 100%;
-  height: 100px;
-}
 
 
-/* Menu */
 
-.menuContainer {
+/* Nav */
+
+/* .menuContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-}
+} */
 
-.menuLogoContainer {
+/* .menuLogoContainer {
   width: 100%;
   justify-content: center;
-}
+} */
 
-.menuLinkContainer {
+.navbar-links-container {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -104,11 +115,11 @@ td, th {
   margin: 10px 0 30px 0;
 }
 
-.menuLink {
+.navbar-link {
   margin: 10px 20px;
   text-decoration: none;
   text-transform: uppercase;
-  color: #fff;
+  color: #fff im !important;
 }
 
 .menuLogo {

diff --git a/site/src/fragments/AvailabilitySummary.js b/site/src/fragments/AvailabilitySummary.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function AvailabilitySummary({ data }) {
+    const keys = data && Object.keys(data)
+    console.log(data);
+    console.log(keys);
+    return (
+        <div style={{flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap', margin: "25px 0"}}>
+            {data && keys.map((key) => <div style={{alignItems: "center", padding: '10px', width: '150px'}}>
+                <div style={{fontSize: '1.25rem', padding: '10px'}}>{data[key]}</div>
+                <div style={{fontSize: '.6rem'}}>{key}</div>
+            </div>)}
+        </div>
+    )
+}
diff --git a/site/src/fragments/Datatable.js b/site/src/fragments/Datatable.js
@@ -1,15 +1,29 @@
 import React from "react";
 
+function drawTd(val){
+    if (val == 0) {
+        return '-'
+    } else {
+        return val
+    }
+}
+
+function getUnits(col) {
+    if (col =='miles_away') {
+        return ' mi.'
+    }
+}
+
 export default function Datatable({ data }) {
     const columns = data[0] && Object.keys(data[0])
-    return <table cellPadding={0} cellSpacing={0}>
+    return <table className='table table-striped' cellPadding={0} cellSpacing={0}>
         <thead>
             <tr>{data[0] && columns.map((heading) => <th>{heading}</th>)}</tr>
         </thead>
         <tbody>
             {data.map(row => <tr>
                 {
-                    columns.map(column => <td>{row[column]}</td>)
+                    columns.map(column => <td>{drawTd(row[column])}{getUnits(column)}</td>)
                 }
             </tr>)}
         </tbody>

diff --git a/site/src/pages/Search.js b/site/src/pages/Search.js
@@ -1,25 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import {withRouter} from 'react-router-dom'
-import axios from 'axios'
 import Nav from '../fragments/Nav'
 import Datatable from '../fragments/Datatable';
-
+import AvailabilitySummary from '../fragments/AvailabilitySummary';
+import PromptForm from '../fragments/PromptForm';
 
 
 function Search() {
 
     const [data, setData] = useState({
         'locations': [],
-        'location_stats': {}, 
+        'location_stats': [], 
         'vax_stats': {}, 
     });
 
-
-    const params = {
+    const [params, setParams] = useState({
         'zip_': '78741',
-        'radius': 100
-    }
-
+        'radius': 50
+    });
+    
     const apiBase = 'https://p6ccqa7dik.execute-api.us-east-1.amazonaws.com/dev'
     const searchEndpoint = `${apiBase}/search`
 
@@ -37,7 +36,14 @@ function Search() {
         <div className='container'>
             <Nav/>
             <div className='main'>
-                <Datatable data={data.locations}/>
+               <h6>Availability Summary for {params.zip_} + {params.radius} miles:</h6>
+                <AvailabilitySummary className='card' data={data.vax_stats}/>
+                {/* <Datatable data={data.location_stats}/> */}
+                {/* <h6>Locations:</h6> */}
+                <div style={{height: '40vh', overflow: 'scroll'}}>
+                    <Datatable data={data.locations}/>
+                </div>
+                <PromptForm/>
             </div>
         </div>
     );