add the only button

src/css/stylish.css

@@ -46,6 +46,12 @@ body {
   grid-auto-columns: 50% 50%;
 }
 
+#date-selector-container button {
+  margin-top: 0px;
+  float: right;
+  color: #888;
+}
+
 /* Mapbox GL Stuff */
 
 .mapboxgl-popup {
@@ -170,6 +176,9 @@ body {
     grid-template-columns: unset;  
   }
 
+
+
+
   .map-overlay .closebtn {
     position: absolute;
     display: block;

src/js/app.jsx

@@ -37,6 +37,7 @@ class Application extends Component {
 
     this.bindMap = this.bindMap.bind(this);
     this.filterAll = this.filterAll.bind(this);
+    this.filterDate = this.filterDate.bind(this);
     this.filterToday = this.filterToday.bind(this);
     this.filterTomorrow = this.filterTomorrow.bind(this);
     this.toggleCheckbox = this.toggleCheckbox.bind(this);
@@ -98,6 +99,7 @@ class Application extends Component {
       render(<Dates
         dates={this.state.dates}
         handleCheckboxChange={this.toggleCheckbox}
+        handleOnlyIsolation={this.filterDate}
       />, dateEl);
 
       // Set filter for points
@@ -361,6 +363,13 @@ class Application extends Component {
   filterDate(newDate) {
     const { dates } = this.state;
 
+    if (typeof newDate === 'string') {
+      // this is such garbage
+      // because we're in PST, this will be one day behind
+      newDate = new Date(newDate);
+      newDate.setDate(newDate.getDate() + 1);
+    }
+
     // Seriously, fuck javascript so much
     // what the serious fuck is wrong with this language
     // this is the most garbage language JFC
@@ -408,13 +417,16 @@ class Application extends Component {
         const popupMouseOver = () => {
           // Highlight corresponding feature on the map
           this.popup.setLngLat(feature.geometry.coordinates)
-            .setHTML(venue + prop.showHTML)
+            .setHTML(venue + prop.showModalHTML)
             .addTo(this.map);
         };
 
         const item = (
           <p key={prop.sid} onMouseOver={popupMouseOver} onFocus={popupMouseOver} >
-            {prop.showString}
+            <div style={{ float: 'right' }}>{Util.formatDate(prop.date)}</div>
+            {prop.venue} <br />
+            {prop.artists.join(' | ')} <br />
+            {prop.details}
           </p>
         );
         listings.push(item);

src/js/components/dates/DateSelector.jsx

@@ -9,6 +9,7 @@ export default class DateSelector extends Component {
       isChecked: this.props.isChecked,
     };
     this.handleChange = this.handleChange.bind(this);
+    this.handleOnly = this.handleOnly.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -27,6 +28,10 @@ export default class DateSelector extends Component {
     ));
   }
 
+  handleOnly(e) {
+    this.props.handleOnlyIsolation(e.target.value);
+  }
+
   render() {
     const { date } = this.props;
     return (
@@ -37,7 +42,9 @@ export default class DateSelector extends Component {
           value={date}
           checked={this.state.isChecked}
           onChange={this.handleChange}
-        /> {formatDate(date)}
+        />
+        {formatDate(date)}
+        <button onClick={this.handleOnly} value={date}>only</button>
       </div>
     );
   }
@@ -47,5 +54,6 @@ DateSelector.propTypes = {
   date: PropTypes.string.isRequired,
   isChecked: PropTypes.bool.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
+  handleOnlyIsolation: PropTypes.func.isRequired,
 };
 

src/js/components/dates/Dates.jsx

@@ -17,6 +17,7 @@ export default class Dates extends Component {
         key={dates[d].id}
         isChecked={dates[d].checked}
         handleCheckboxChange={this.props.handleCheckboxChange}
+        handleOnlyIsolation={this.props.handleOnlyIsolation}
       />);
       selectors.push(selector);
     }
@@ -29,4 +30,5 @@ Dates.propTypes = {
   // eslint-disable-next-line
   dates: PropTypes.array.isRequired,
   handleCheckboxChange: PropTypes.func.isRequired,
+  handleOnlyIsolation: PropTypes.func.isRequired,
 };

src/js/components/parser.js

@@ -104,13 +104,10 @@ export default class Parser {
         }
 
         const formattedDate = formatDate(dateKeys[i]);
-        const showString = `${formattedDate} - ${
-          showData.venue
-        } | ${showData.artists.join(' | ')} | ${showData.details}`;
         const artistsString = showData.artists
           .map(x => `- ${x} <br/>`)
           .join('');
-        const showHTML = `<h2> ${formattedDate} </h2><br/><h3> ${artistsString}<br/> ${showData.details}</h3>`;
+        const showModalHTML = `<h2> ${formattedDate} </h2><br/><h3> ${artistsString}<br/> ${showData.details}</h3>`;
 
         const show = {
           type: 'Feature',
@@ -124,8 +121,7 @@ export default class Parser {
             venue: showData.venue,
             artists: showData.artists,
             details: showData.details.replace(/ ,/g, ''), // fucking commas
-            showString,
-            showHTML,
+            showModalHTML,
           },
         };
 

src/js/components/util.js

@@ -71,7 +71,7 @@ export function addPopup(map, venue, features, popup) {
     return key ? -1 : 1;
   });
 
-  const html = _.map(sortedFeatures, 'properties.showHTML').reverse().join('<hr><br/>');
+  const html = _.map(sortedFeatures, 'properties.showModalHTML').reverse().join('<hr><br/>');
   const point = features[0].geometry.coordinates;
   popup.setLngLat(point)
     .setHTML(venueHtml + html)
@@ -111,6 +111,5 @@ export function getWeekDay(date) {
 export function formatDate(dateString) {
   const date = DateTime.fromISO(dateString); // force pacific timezone
   date.setZone('America/Los_Angeles');
-  return `${date.weekdayShort}, ${date.month}-${date.day}`;
-}
-
+  return `${date.month}-${date.day} ${date.weekdayShort} `;
+}