added leaflet map, basic nav flow

cityofasheville · Aug 5, 2021 · c208994 · c208994
1 parent d244df4
commit c208994
Show file tree

Hide file tree

Showing 19 changed files with 824 additions and 108 deletions.
diff --git a/package.json b/package.json
@@ -7,9 +7,13 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
+    "leaflet": "^1.7.1",
+    "leaflet.markercluster": "^1.5.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-leaflet": "^3.2.1",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
@@ -26,16 +30,9 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
 }
diff --git a/public/index.html b/public/index.html
@@ -24,13 +24,50 @@
       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`.
     -->
-    <script src="https://kit.fontawesome.com/02e31fba3b.js" crossorigin="anonymous"></script>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <link 
+      rel="stylesheet" 
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
+      crossorigin="anonymous"
+    />
+
+    <link 
+      rel="stylesheet" 
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" 
+      crossorigin=""
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
+    />
+
+    <script 
+      src="https://unpkg.com/[email protected]/dist/leaflet.js" 
+      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" 
+      crossorigin="">
+    </script>
+
+    <script 
+      src="https://kit.fontawesome.com/02e31fba3b.js" 
+      crossorigin="anonymous">
+    </script>
+
+    <script 
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
+      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
+      crossorigin="anonymous">
+    </script>
+
     <title>Find Meal Sites in the Buncombe County Area</title>
+
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="d-flex flex-column"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -40,6 +77,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>
diff --git a/src/App.css b/src/App.css
@@ -1,12 +1,44 @@
+:root {
 
-.jumbotron {
-  background: url('./images/wood.jpg') no-repeat center center fixed;
+  --coa-blue-dark: #004987;
+  --coa-blue-med: #4077a5;
+  --coa-blue-light: #a6bfd4;
+
+  --coa-green-dark: #aaad00;
+  --coa-green-med: #bfc240;
+  --coa-green-light: #e1e2a6;
+
+  --coa-black: rgba(0,0,0,.93);  
+
+  --coa-platinum: #E6E8E6;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+}
+
+.home-cover {
+  background: url('./images/mountains-cover.jpg') no-repeat center center fixed;
   background-size: cover;  
   opacity: 1;
   position: relative;
   padding: 12em 0; 
 }
 
+.jumbotron {
+  background: url('./images/mountains.jpg') no-repeat center center fixed;
+  background-size: cover;  
+  opacity: 1;
+  position: relative;
+  padding: 12em 0; 
+} 
+
 .jumbotron--text {
   z-index: 999;
   position: absolute;
@@ -18,7 +50,7 @@
   background-color: white;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%,-75%);
   border: 2px solid black;
   border-radius: 15px;
   opacity: .83;
@@ -203,6 +235,21 @@ h3 {
   border-radius: 8px;
 }
 
+.service-icon-map.service-student, 
+.service-icon-map.service-delivery, 
+.service-icon-map.service-meal, 
+.service-icon-map.service-farmersmarket, 
+.service-icon-map.service-seniormeals, 
+.service-icon-map.service-ebtgroceries, 
+.service-icon-map.service-wicgroceries, 
+.service-icon-map.service-communitygardens, 
+.service-icon-map.service-foodbox {
+  font-size: 1rem;
+  padding: 2px;
+  margin-right: .25rem;
+  border-radius: 4px;
+}
+
 .service-student {
   color: purple;
   border: 1px solid purple;
@@ -296,4 +343,68 @@ h3 {
   width: 33.33%;
 }
 
-/* Previous CSS file */
+#main {
+  height: calc(100% - 75px);
+}
+
+.leaflet-container {
+  height: 100%;
+  width: 100%
+}
+
+.leaflet-div-icon {
+  background: transparent;
+  border: none;
+}  
+
+.card-body p[class*=" service-"] {
+  border: none;
+}
+
+.leaflet-marker-icon i {
+  background: white;
+  padding: 3px;
+}
+
+.card-body p[class*=" service-"] {
+  font-size: 1rem;
+}
+
+/* .card-map {
+  width: 500px;
+} */
+
+.bg-coa-blue {
+  background-color: var(--coa-blue-dark);
+}
+
+.nav-link-home {
+  font-size: 2rem;
+}
+
+.nav-print-option {
+  display: none;
+}
+
+@media (min-width: 992px) { 
+  .nav-print-option {
+    display: inline-block;
+  }
+}
+
+/* .btn-filter-control {
+  
+} */
+
+.nav-link-icon {
+  margin-right: .6rem;
+}
+
+.map-split-cards {
+  height: 100%;
+  overflow: scroll;
+}
+
+.flex-fill {
+  flex: 1 1 auto;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,16 @@
 import './App.css';
+import React from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import Banner from './Banner';
-import Locations from './Locations';
+import NavBar from './NavBar';
+import MealSites from './MealSites';
 
 function App() {
   return (
     <Router>
-      <div className="App">
-        <Route path="/" component={Banner} />
-        <Route path="/" component={Locations} />
-      </div>
+      <Route path="/" component={NavBar} />
+      {/* <Route exact path="/" component={Banner} /> */}
+      {/* <Route path="/" component={MealSites} /> */}
+      <Route path="/:view*" component={MealSites} />
     </Router>
   );
 }

diff --git a/src/Banner.js b/src/Banner.js
@@ -1,10 +1,14 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Banner(props) {
+
+  let currentUrlParams = new URLSearchParams(window.location.search);
 
-function Banner() {
   return(
-    <div className="container-fluid px-0">
-      <header title="Buncombe County Area Meal Sites" className="jumbotron jumbotron-fluid no-print">
-        <div className="container position-relative">
+    <div className="h-100 container-fluid p-0 m-0 home-cover">
+      {/* <header title="Buncombe County Area Meal Sites" className="jumbotron jumbotron-fluid no-print"> */}
+        <div className="h-100 container position-relative">
           <div className="jumbotron--text">
             <h1 className="text-black">Buncombe County Area Meal Sites</h1>
             <p className="lead text-black sub-heading">
@@ -13,10 +17,17 @@ function Banner() {
             <p className="lead text-black sub-heading">
               <strong>FOR STUDENTS:</strong> text FOODNC to 877-877 to locate nearby free meal sites. 
               The texting service is also available in Spanish by texting COMIDA to 877-877.
-            </p>    
+            </p>   
+            <h2 className="text-black mb-3">View Options</h2>
+            <div className="btn-group d-flex" role="group" aria-label="View locations on a map.">
+              <Link className="btn btn-outline-dark" to={`/map/?${currentUrlParams}`}><i class="fa fa-map-o nav-link-icon" aria-hidden="true"></i>Map</Link>
+              <Link className="btn btn-outline-dark ml-2" to={`/cards/?${currentUrlParams}`}><i class="fa fa-list-alt nav-link-icon" aria-hidden="true"></i>Cards</Link>
+              <Link className="btn btn-outline-dark ml-2 nav-print-option" to={`/print/?${currentUrlParams}`}><i class="fa fa-print nav-link-icon" aria-hidden="true"></i>Print</Link>
+            </div>
           </div>
+
         </div>
-      </header>
+      {/* </header> */}
     </div>
   );
 }

diff --git a/src/FilterCard.js b/src/FilterCard.js
@@ -2,14 +2,27 @@ import React from 'react';
 
 function FilterCard(props) {
 
-  console.log('ACTIVE FILTERS IN CARD');
-  let activeFilters = props.activeFilters[props.filterName];
-  console.log(activeFilters);
+  // let activeFilters = props.activeFilters[props.filterName];
+  // console.log('ACTIVE FILTERS IN CARD');
+  // console.log(activeFilters);
   const optionList = props.filterOptions.data.map( (thisOption, i) => {
     return (
-      <option key={i} value={thisOption.value}>{thisOption.label}</option>
+      <option key={i} value={thisOption.value}>{thisOption.label} ({thisOption.count})</option>
     );
   });
+
+  let filterClass = 'col-lg-4';
+
+  if (props.context === 'map') {
+    filterClass = 'col-xxl-4';
+  }
+
+  // const optionListDropdown = props.filterOptions.data.map( (thisOption, i) => {
+  //   return (
+  //     <li key={i}><a class="dropdown-item" data-value={thisOption.value} href="#">{thisOption.label} ({thisOption.count})</a></li>
+  //   );
+  // });
+
   let activeFiltersList = [];
 
   let matchingLabel = '';
@@ -35,12 +48,20 @@ function FilterCard(props) {
     return(<li key={i} className="list-group-item filter-button" data-filter-value={filter.value} data-filter-type={props.filterName} title="Click to remove this filter" onClick={props.removeHandler}>{filter.text}</li>);
   })
 
+  // const selectedFiltersDropdown = activeFiltersList.map( (filter, i) => {
+  //   return(
+  //   <li key={i}><a className="dropdown-item filter-button" href="#" data-filter-value={filter.value} data-filter-type={props.filterName} title="Click to remove this filter" onClick={props.removeHandler}>{filter.text}</a></li>
+  //   );
+  // })
+
   return(
-    <div className="col-lg-4 mb-3">
+    <div className={`${filterClass} mb-3`}>
       <div className="card inner m-3 h-100">
         <div className="card-header"><h3 className="d-inline">{props.filterOptions.filterHeader}</h3></div>
         <ul className="list-group list-group-flush" id={`list-group-${props.filterName}`}>
-          <li className={`list-group-item selected-filters-default-${props.filterName}`}>{props.filterOptions.defaultDescription}</li>
+          {selectedFilters.length === 0 &&
+            <li className={`list-group-item selected-filters-default-${props.filterName}`}>{props.filterOptions.defaultDescription}</li>
+          }
           {selectedFilters}
         </ul>
         <div className="p-3">