-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
299 additions
and
117 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,24 @@ | ||
| import React, { Component } from 'react'; | ||
| // import './NavBar.css'; | ||
| import {Link} from 'react-router-dom'; | ||
| import React from 'react'; | ||
|
|
||
| class Banner extends Component { | ||
| render() { | ||
|
|
||
| let navColor = 'transparent'; | ||
| if ( this.props.location.pathname !== '/') { | ||
| navColor = 'black'; | ||
| } | ||
|
|
||
| return( | ||
| <div className="container-fluid px-0"> | ||
| <header title="Buncombe County Area Meal Sites" class="jumbotron jumbotron-fluid no-print"> | ||
| <div class="container position-relative"> | ||
| <div class="jumbotron--text"> | ||
| <h1 class="text-black">Buncombe County Area Meal Sites</h1> | ||
| <p class="lead text-black sub-heading"> | ||
| Find locations around Buncombe County working hard to feed our community. | ||
| </p> | ||
| <p class="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> | ||
| </div> | ||
| 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="jumbotron--text"> | ||
| <h1 className="text-black">Buncombe County Area Meal Sites</h1> | ||
| <p className="lead text-black sub-heading"> | ||
| Find locations around Buncombe County working hard to feed our community. | ||
| </p> | ||
| <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> | ||
| </div> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } | ||
| </div> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Banner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
|
|
||
| function FilterCard(props) { | ||
|
|
||
| console.log('ACTIVE FILTERS IN CARD'); | ||
| let activeFilters = props.activeFilters[props.filterName]; | ||
| console.log(activeFilters); | ||
| const optionList = props.filterOptions.data.map( (thisOption, i) => { | ||
| return ( | ||
| <option key={i} value={thisOption.value}>{thisOption.label}</option> | ||
| ); | ||
| }); | ||
| let activeFiltersList = []; | ||
|
|
||
| let matchingLabel = ''; | ||
|
|
||
| if (props.activeFilters.hasOwnProperty(props.filterName)) { | ||
| props.activeFilters[props.filterName].forEach( (filter, i) => { | ||
| props.filterOptions.data.forEach( (option) => { | ||
| if (option.value === filter) { | ||
| matchingLabel = option.label; | ||
| } | ||
| }); | ||
|
|
||
| activeFiltersList.push({ | ||
| text: matchingLabel, | ||
| value: filter | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| console.log(activeFiltersList); | ||
|
|
||
| const selectedFilters = activeFiltersList.map( (filter, i) => { | ||
| 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>); | ||
| }) | ||
|
|
||
| return( | ||
| <div className="col-lg-4 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} | ||
| </ul> | ||
| <div className="p-3"> | ||
| <label className="select-label" htmlFor={`select-filter-${props.filterName}`}>{props.filterOptions.selectLabel}</label> | ||
| <select data-filter-type={props.filterName} name={`select-filter-${props.filterName}`} className="form-control form-control-sm mt-1" id={`filter-${props.filterName}`} onChange={props.changeHandler}> | ||
| <option></option> | ||
| {optionList} | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default FilterCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
| import FilterCard from './FilterCard'; | ||
|
|
||
| function FilterOptions(props) { | ||
| console.log(props); | ||
| const filterKeys = Object.keys(props.options); | ||
| const filterCardSet = filterKeys.map( (key, i) => { | ||
| let thisKey = `filtercard-${i}`; | ||
| return ( | ||
| <FilterCard key={thisKey} activeFilters={props.activeFilters} filterOptions={props.options[key]} filterName={key} changeHandler={props.changeHandler} removeHandler={props.removeHandler} /> | ||
| ); | ||
| }); | ||
| return( | ||
| <section title="Filter meal sites based on geographical area, days open, or type of service provided." className="container my-5 js-dependent no-print"> | ||
| <div id="object-filters" className="border rounded-lg py-4 px-1"> | ||
| <div className="row"> | ||
| <div className="col-12 mb-3 text-center"> | ||
| <h2 className="">Refine the list with filters</h2> | ||
| <p>View meal sites by geographical area, day of the week, and/or service type offered.</p> | ||
| </div> | ||
| </div> | ||
| <div className="row selected-filters"> | ||
| {filterCardSet} | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } | ||
|
|
||
| export default FilterOptions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.