Merge pull request #3 from cityofasheville/development

Improved Filter Logic, Basic IE-only view
cityofasheville · Aug 30, 2021 · 28f5b24 · 28f5b24
2 parents 71ab9f3 + 31b418d
commit 28f5b24
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 19 deletions.
diff --git a/src/App.css b/src/App.css
@@ -502,6 +502,11 @@ h3 {
 
 td, th {
   vertical-align: middle;
+  width: 33%;
+}
+
+.print-days-column {
+  min-width: 270px;
 }
 
 @media print {

diff --git a/src/FilterDropdown.js b/src/FilterDropdown.js
@@ -2,28 +2,35 @@ import React from 'react';
 
 function FilterDropdown(props) {
 
-  let activeTypeFilters, dropdownContainerClass = 'dropdown mx-2 mb-4 resource-filter';
+  let activeTypeFilters
+  let dropdownContainerClass = 'dropdown mx-2 mb-4 resource-filter'
+  let extraCountText = '';
 
   if (props.activeFilters.hasOwnProperty(props.filterName)) {
     activeTypeFilters = props.activeFilters[props.filterName];
     if (props.activeFilters[props.filterName].length) {
       dropdownContainerClass += ' resource-filter--active';
+      extraCountText += ' more';
     }
   } else {
     activeTypeFilters = [];
   }
 
   const optionListDropdownAlt = props.filterOptions.data.reduce( (accumulator, currentOption, currentIndex) => {
 
-    let thisAction, thisActionLabel, thisButtonClass = 'dropdown-item ', showCount = true;
+    let thisAction, thisActionLabel, thisButtonClass = 'dropdown-item ';
+
+    if (currentOption.count === 0) {
+      thisButtonClass += ' disabled';
+    }
 
     if (!activeTypeFilters.includes(currentOption.value)) {
       thisAction = props.changeHandler;
       thisActionLabel = 'Add the filter';
 
-      if(props.filterName === 'day') {
-        showCount = false;
-      }
+      // if(props.filterName === 'day') {
+      //   showCount = false;
+      // }
 
       accumulator.push(
         <li key={currentIndex}>
@@ -36,7 +43,7 @@ function FilterDropdown(props) {
             onClick={thisAction}
             >
               {currentOption.label} 
-              {showCount ? ` (${currentOption.count})` : ''}
+              {` (${currentOption.count}${extraCountText})`}
           </button>
         </li>
       );

diff --git a/src/LocationCard.js b/src/LocationCard.js
@@ -34,7 +34,16 @@ function LocationCard(props) {
             </ul>
           </li>          
           <li className="list-group-item">{props.location.hoursOpen}<br />{props.location.daysOpen}</li>
-          <li className="list-group-item"><a className="map-link text-dark" href={`https://www.google.com/maps/search/${q}`} title={`View location of ${props.location.name} on a Google Map in a new browser tab`} target="_blank" rel="noopener noreferrer"><i className="fas fa-external-link-alt me-1" aria-hidden="true"></i>Location</a>: {props.location.address}</li>
+          <li className="list-group-item">
+            <a 
+              className="map-link text-dark" 
+              href={`https://www.google.com/maps/dir/?api=1&destination=${q}`} 
+              title={`Get directions from your location to ${props.location.name} on a Google Map in a new browser tab`} 
+              target="_blank" 
+              rel="noopener noreferrer"
+            >
+              <i className="fas fa-external-link-alt me-1" aria-hidden="true"></i>Directions</a>: {props.location.address}
+          </li>
         </ul>
       </div>
     </div>

diff --git a/src/LocationStrip.js b/src/LocationStrip.js
@@ -2,16 +2,10 @@ import React from 'react';
 
 function LocationCard(props) {
 
-
-
-  let q = encodeURIComponent(props.location.address);
   let iconClass = props.location.serviceIcon;
-  // let cardMapClass = '';
-  // let q = encodeURIComponent(`${props.location.wgs_y},${props.location.wgs_x}`);
 
   if (props.context === 'map') {
     iconClass += ' service-icon-map';
-    // cardMapClass += ' card-map';
   }
 
   return(
@@ -29,7 +23,10 @@ function LocationCard(props) {
         </ul>
         {props.location.hoursOpen} | {props.location.daysOpen}
       </td>
-      <td className="px-3">Area: {props.location.generalArea}<br /><a className="map-link text-dark" href={`https://www.google.com/maps/search/${q}`} title={`View location of ${props.location.name} on a Google Map in a new browser tab`} target="_blank" rel="noopener noreferrer">Location</a>: {props.location.address}</td>
+      <td className="px-3">
+        Area: {props.location.generalArea}<br />
+        {props.location.address}
+      </td>
     </tr>
   )
 }

diff --git a/src/MealSites.js b/src/MealSites.js
@@ -486,6 +486,7 @@ class MealSites extends Component {
       let thisLocationPasses = true;
       let filterKeysFailed = [];
       let termMatches = 0;
+      let filterKeysPassed = [];
 
       Object.keys(this.state.activeFilters).forEach( (activeFilterKey, i) => {
         if (this.state.activeFilters[activeFilterKey].length) {
@@ -497,6 +498,8 @@ class MealSites extends Component {
           if (!termMatches) {
             thisLocationPasses = false;
             filterKeysFailed.push(activeFilterKey);
+          } else {
+            filterKeysPassed.push(activeFilterKey);
           }
           termMatches = 0;
         }
@@ -505,6 +508,7 @@ class MealSites extends Component {
       // Following loop is to increment location count based on remaining locations
       Object.keys(filteredDataForOutput.filterOptions).forEach( (allFilterOptionsKey, i) => {
         if (filteredDataForOutput.filterOptions[allFilterOptionsKey].data.length) {
+          let locationAlreadyPassedFacet = false;
           filteredDataForOutput.filterOptions[allFilterOptionsKey].data.forEach( (termObject, i) => {
             let thisOptionLocationCounted = false;
             let otherFacetFailures = 0;
@@ -513,7 +517,10 @@ class MealSites extends Component {
                 otherFacetFailures++;
               }
             });
-            if (location.selectors.includes(termObject.value) && !otherFacetFailures && !thisOptionLocationCounted) {
+            if (filterKeysPassed.includes(allFilterOptionsKey)) {
+              locationAlreadyPassedFacet = true;
+            }
+            if (location.selectors.includes(termObject.value) && !otherFacetFailures && !thisOptionLocationCounted && !locationAlreadyPassedFacet) {
               filteredDataForOutput.filterOptions[allFilterOptionsKey].data[i].count++;
               thisOptionLocationCounted = true;
             }

diff --git a/src/NavBar.js b/src/NavBar.js
@@ -1,8 +1,10 @@
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 function NavBar(props) {
 
   let currentUrlParams = new URLSearchParams(window.location.search);
+  let symptomsOfInternetExplorer = /MSIE|Trident/.test(window.navigator.userAgent);
 
   return(
     <nav className="navbar navbar-expand navbar-dark bg-coa-blue">
@@ -13,19 +15,19 @@ function NavBar(props) {
         </div>
         <div className="collapse navbar-collapse flex-row-reverse flex-lg-row" id="navbarNavAltMarkup">
           <div className="navbar-nav">
-            {window.location.pathname !== '/' &&
+            {(window.location.pathname !== '/' && !symptomsOfInternetExplorer) &&
               <button type="button" className="btn btn-link nav-link ms-4 active button-filter__trigger" data-bs-toggle="modal" data-bs-target="#filtersModal">
                 <i className="fa fa-filter nav-link-icon" aria-hidden="true"></i>Filter Results
-              </button>            
+              </button>    
             }
-            {window.location.pathname.startsWith('/print/') &&
+            {(window.location.pathname.startsWith('/print/') && !symptomsOfInternetExplorer) &&
               <NavLink 
                 className="nav-link mx-4 active" 
                 to={`/map/?${currentUrlParams}`}>
                   <i className="fa fa-map-o nav-link-icon" aria-hidden="true"></i>Map View
               </NavLink>
             }
-            {window.location.pathname.startsWith('/map/') && 
+            {(window.location.pathname.startsWith('/map/') && !symptomsOfInternetExplorer) && 
               <NavLink 
                 className="nav-link mx-4 d-none d-lg-inline-block active" 
                 to={`/print/?${currentUrlParams}`}>