From 2272a85185537dab83e4ee3c455961ddd7bbab30 Mon Sep 17 00:00:00 2001 From: Xander Johnson Date: Sat, 3 Mar 2018 19:52:26 -0800 Subject: [PATCH] Make the today / tomorrow / all shows buttons work --- .eslintrc.js | 5 +- src/css/stylish.css | 7 +- src/js/app.jsx | 116 +++++++++++++++++------ src/js/components/dates/DateSelector.jsx | 8 +- src/js/components/dates/Dates.jsx | 1 + 5 files changed, 101 insertions(+), 36 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index b09ad01..7608a49 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,5 +3,8 @@ module.exports = { env: { "browser": true }, - parser: "babel-eslint" + parser: "babel-eslint", + rules: { + "no-param-reassign": "off", + } } diff --git a/src/css/stylish.css b/src/css/stylish.css index b58a87a..c7fe287 100644 --- a/src/css/stylish.css +++ b/src/css/stylish.css @@ -41,11 +41,8 @@ body { #date-selector-container { font-size: 16px; display: grid; - margin-left: 5%; + margin-left: 10%; margin-bottom: 5%; - grid-template-rows: repeat(5, auto); - grid-template-columns: auto auto; - grid-auto-flow: column; grid-auto-columns: 50% 50%; } @@ -58,7 +55,7 @@ body { .mapboxgl-popup-content { font-family: 'Open Sans', sans-serif; - overflow: scroll; + overflow: auto; } .mapboxgl-popup-content h1 { diff --git a/src/js/app.jsx b/src/js/app.jsx index 4bd29cb..ab470be 100644 --- a/src/js/app.jsx +++ b/src/js/app.jsx @@ -20,7 +20,7 @@ const CLUSTER_RADIUS = 50; class Application extends Component { constructor(props) { super(props); - this.toggleCheckbox = this.toggleCheckbox.bind(this); + this.state = { query: '', dates: [], @@ -36,6 +36,10 @@ class Application extends Component { }); this.bindMap = this.bindMap.bind(this); + this.filterAll = this.filterAll.bind(this); + this.filterToday = this.filterToday.bind(this); + this.filterTomorrow = this.filterTomorrow.bind(this); + this.toggleCheckbox = this.toggleCheckbox.bind(this); this.start = { lng: -122.416, @@ -54,12 +58,6 @@ class Application extends Component { this.setState({ dates: data.dates }); this.allShows = data.geojson.features; - // Add the dates - const dateEl = document.getElementById('date-selector-container'); - render(, dateEl); this.setupMap(data.geojson, this.state.dates); @@ -96,6 +94,13 @@ class Application extends Component { const checkedDates = _.filter(this.state.dates, _.matches({ checked: true })); const checkedDatesList = _.map(checkedDates, 'date'); + // Add the dates + const dateEl = document.getElementById('date-selector-container'); + render(, dateEl); + // Set filter for points this.map.setFilter('shows', ['in', 'date'].concat(checkedDatesList)); @@ -198,14 +203,18 @@ class Application extends Component { }); }); - map.on('click', 'shows', e => this.addPopupAndEase(map, e)); - - - $('#filter-all').on('click', () => { - // Util.toggleDates('all'); - showAllShows(geojson); - // this.filterEl.value = ''; - $('.close-filter-modal').click(); + map.on('click', (e) => { + const m = 50; + const bbox = [[e.point.x - m, e.point.y - m], [e.point.x + m, e.point.y + m]]; + const features = map.queryRenderedFeatures(bbox, { layers: ['shows'] }); + + this.popup.remove(); + if (features.length) { + this.addPopupAndEase(map, { features }); + // Hack to make popups work everytime + // eslint-disable-next-line + e.target._listeners['click'].pop(); + } }); map.addLayer({ @@ -289,13 +298,8 @@ class Application extends Component { const idx = dates.findIndex((obj => obj.date === date)); dates[idx].checked = !dates[idx].checked; - const checkedDates = _.filter(dates, _.matches({ checked: true })); - const checkedDatesList = _.map(checkedDates, 'date'); - - const filteredByDate = this.allShows.filter(feature => - _.includes(checkedDatesList, feature.properties.date)); - - this.setState({ dates, filteredByDate }); + this.updateFilteredByDate(dates); + this.setState({ dates }); } addPopupAndEase(map, e) { @@ -321,6 +325,60 @@ class Application extends Component { } } + updateFilteredByDate(dates) { + const checkedDates = _.filter(dates, _.matches({ checked: true })); + const checkedDatesList = _.map(checkedDates, 'date'); + + const filteredByDate = this.allShows.filter(feature => + _.includes(checkedDatesList, feature.properties.date)); + + this.setState({ filteredByDate }); + } + + + filterAll() { + const { dates } = this.state; + const allDates = _.map(dates, (date) => { + date.checked = true; return date; + }); + + this.setState({ + dates: allDates, + query: '', + }); + + this.updateFilteredByDate(dates); + + $('#hide-filter-button').click(); + } + + filterDate(newDate) { + const { dates } = this.state; + + const newDates = _.map(dates, (dateObj) => { + const someday = newDate.toString().slice(0, 10); + const somedayList = someday.split(' '); + somedayList[2] = String(parseInt(somedayList[2], 10)); + const date = somedayList.join(' '); + dateObj.checked = dateObj.date === date; + return dateObj; + }); + + this.setState({ dates: newDates }); + this.updateFilteredByDate(dates); + $('#hide-filter-button').click(); + } + + filterToday() { + this.filterDate(new Date()); + } + + filterTomorrow() { + const tomorrow = new Date(); + tomorrow.setDate(tomorrow.getDate() + 1); + this.filterDate(tomorrow); + } + bindMap(el) { this.mapContainer = el; } @@ -361,13 +419,13 @@ class Application extends Component {
- See List +
- × +
- Filter shows - Hide filters + +
- All Shows - Today - Tomorrow + + +
diff --git a/src/js/components/dates/DateSelector.jsx b/src/js/components/dates/DateSelector.jsx index 2128c32..453495a 100644 --- a/src/js/components/dates/DateSelector.jsx +++ b/src/js/components/dates/DateSelector.jsx @@ -5,11 +5,16 @@ export default class DateSelector extends Component { constructor(props) { super(props); this.state = { - isChecked: true, + isChecked: this.props.isChecked, }; this.handleChange = this.handleChange.bind(this); } + componentWillReceiveProps(nextProps) { + const { isChecked } = nextProps; + this.setState({ isChecked }); + } + handleChange(e) { // Update dates in application for map to use this.props.handleCheckboxChange(e.target.value); @@ -39,6 +44,7 @@ export default class DateSelector extends Component { DateSelector.propTypes = { date: PropTypes.string.isRequired, + isChecked: PropTypes.bool.isRequired, handleCheckboxChange: PropTypes.func.isRequired, }; diff --git a/src/js/components/dates/Dates.jsx b/src/js/components/dates/Dates.jsx index 55e313d..12a58e3 100644 --- a/src/js/components/dates/Dates.jsx +++ b/src/js/components/dates/Dates.jsx @@ -15,6 +15,7 @@ export default class Dates extends Component { const selector = (); selectors.push(selector);