From 864fb56705ae20455c7d2542460f6ca3bd1209ed Mon Sep 17 00:00:00 2001
From: Xander Johnson <xander@metasyn.pw>
Date: Sun, 18 Feb 2018 02:48:01 -0800
Subject: [PATCH] Added some rudimentary stuff for a date selection modal, and
 some more react stuff for passing around the dates as props/state.

---
 .babelrc                                 |   3 +-
 .eslintrc.js                             |   3 +-
 package.json                             |  12 +-
 src/css/stylish.css                      | 110 ++++-
 src/index.html                           |  34 +-
 src/js/app.jsx                           |  49 ++-
 src/js/components/dates/DateSelector.jsx |  29 +-
 src/js/components/dates/Dates.jsx        |  15 +-
 src/js/components/map.jsx                |  98 ++---
 src/js/components/parser.js              |  10 +-
 src/js/components/util.js                |  57 ++-
 src/js/mapper.js                         | 489 -----------------------
 12 files changed, 303 insertions(+), 606 deletions(-)
 delete mode 100644 src/js/mapper.js

diff --git a/.babelrc b/.babelrc
index 4ffef06..e7b1f28 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["env", "react"]
+  "presets": ["env", "react"],
+  "plugins": ["transform-class-properties"],
 }
diff --git a/.eslintrc.js b/.eslintrc.js
index 5d97614..b09ad01 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,5 +2,6 @@ module.exports = {
   extends: "airbnb",
   env: {
     "browser": true
-  }
+  },
+  parser: "babel-eslint"
 }
diff --git a/package.json b/package.json
index 2e58551..6e659ea 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,13 @@
   "name": "sf-shows",
   "devDependencies": {
     "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.9",
-    "eslint": "^4.16.0",
+    "eslint": "^4.18.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
@@ -19,13 +21,17 @@
   },
   "scripts": {
     "dev": "webpack-dev-server",
-    "build": "webpack"
+    "build": "webpack",
+    "lint": "./node_modules/.bin/eslint src/js/**"
   },
   "dependencies": {
     "jquery": "^3.3.1",
+    "lodash": "^4.17.5",
     "mapbox-gl": "^0.44.0",
+    "mapboxgl-spiderifier": "^1.0.3",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "prop-types": "^15.6.0"
+    "react-nouislider": "^2.0.1"
   }
 }
diff --git a/src/css/stylish.css b/src/css/stylish.css
index 4a4dbbf..19db7a1 100644
--- a/src/css/stylish.css
+++ b/src/css/stylish.css
@@ -33,9 +33,10 @@ body {
 
 #date-selector-container {
   display: grid;
+  justify-content: center;
   grid-template-rows: repeat(5, 25px);
-  grid-template-columns: 50% 50%;
-  grid-auto-flow: columns;
+  grid-template-columns: 25% 25%;
+  grid-auto-flow: column;
   grid-auto-columns: 50% 50%;
   margin-left: 50px;
 }
@@ -109,18 +110,11 @@ body {
   margin: 0;
 }
 
-.map-overlay .listing a {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: #404;
-  text-decoration: none;
-}
-
-.map-overlay .listing a:last-child {
-  border: none;
-}
 
-.map-overlay .listing a:hover {
-  background: #f0f0f0;
+.map-overlay .listing p:hover {
+  border: #0095ff;
+  border-style: groove;
+  margin: 2px;
 }
 
 #see-list-button {
@@ -132,6 +126,90 @@ body {
 }
 
 
+/* Modal stuff */
+
+.modal {
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+@keyframes animatetop {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+/* The Close Button */
+.close-filter-modal {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close-filter-modal:hover,
+.close-filter-modal:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-header {
+  padding: 5px ;
+  background-color: #5cb85c;
+  color: white;
+  height: 35px;
+  font-size: 20px;
+}
+
+.modal-body {padding: 2px 16px;}
+
+.modal-footer {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+
+#filterModal .buttons {
+  display: flex;
+  justify-content: space-evenly;
+  padding: 20px;
+  text-align: center;
+}
+
+#filterModal .buttons a {
+  margin: 20px;
+}
+
+
 /* Media */
 
 @media only screen and (max-device-width: 480px) {
@@ -140,7 +218,7 @@ body {
     display: none;
   }
 
-  #see-list-button {
+  #see-list-button-mobile {
     position: absolute;
     display: block;
     left: 0px;
@@ -169,4 +247,8 @@ body {
     font-size: 64px;
   }
 
+  #filterModal .buttons {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/src/index.html b/src/index.html
index 3df7cb8..5114862 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@
   </div>
 
 
-  <div id='see-list-button'>
+  <div id='see-list-button-mobile'>
     <div class='button-container'>
       <a href='#' id='open-list' class='button overlay-item'>See List</a>
     </div>
@@ -30,17 +30,39 @@
 
 
     <div class='button-container'>
-      <a href='#' id='filter-button' class='button overlay-item'>Filter by date</a>
+      <a href='#' id='filter-button' class='button overlay-item'>Filter shows</a>
     </div>
 
 
-    <div>
-      <div class='hidden filters' id='date-selector-container'>
-      </div>
+    <div id='feature-listing' class='listing'>
     </div>
 
 
-    <div id='feature-listing' class='listing'>
+    <div id="filterModal" class="hidden modal">
+      <!-- Modal content -->
+
+
+      <div class="modal-content">
+        <div class="modal-header">
+          <span class="close-filter-modal">&#215;</span>
+          <h1>Filter shows by date</h1>
+        </div>
+
+
+        <div class="modal-body">
+          <div class="buttons">
+            <a href='#' id='filter-all' class='button'>All Shows</a>
+            <a href='#' id='filter-today' class='button'>Today</a>
+            <a href='#' id='filter-tomorrow' class='button'>Tomorrow</a>
+          </div>
+          <div>
+            <div id='date-selector-container'>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer"> 
+        </div>
+      </div>
     </div>
   </div>
   <script src='https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js' type="text/javascript">
diff --git a/src/js/app.jsx b/src/js/app.jsx
index eb0977c..c59ebd8 100644
--- a/src/js/app.jsx
+++ b/src/js/app.jsx
@@ -10,46 +10,73 @@ import ShowMap from './components/Map';
 import '../css/stylish.css';
 
 class Application extends Component {
-  static prepare() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dates: {},
+    };
+    this.toggleCheckbox = this.toggleCheckbox.bind(this);
+  }
+
+  componentWillMount() {
+  }
+
+  toggleCheckbox(date) {
+    const idx = this.state.dates.findIndex((obj => obj.date === date));
+    this.state.dates[idx].checked = !this.state.dates[idx].checked;
+  }
+
+  prepare() {
     const parsed = new Parser().parseData();
 
     // keys: organized, dates
     parsed.then((data) => {
-      // Pop modal?
-      // TODO
+      // Pass dates
+      this.state.dates = data.dates;
 
       // Add the dates
       const dateEl = document.getElementById('date-selector-container');
-      render(<Dates dates={data.dates} />, dateEl);
+      render(<Dates
+        dates={this.state.dates}
+        handleCheckboxChange={this.toggleCheckbox}
+      />, dateEl);
 
       // Add the shows
       const mapEl = document.getElementById('app');
-      render(<ShowMap geojson={data.geojson} />, mapEl);
+      render(<ShowMap
+        dates={this.state.dates}
+        geojson={data.geojson}
+      />, mapEl);
 
-      // Add listeners
+      // Modals
       $('#filter-button').on('click', () => {
-        $('.filters').toggleClass('hidden');
+        $('#filterModal').toggleClass('hidden');
+      });
+
+      $('.close-filter-modal').on('click', () => {
+        $('#filterModal').toggleClass('hidden');
       });
 
-      $('#see-list-button').on('click', () => {
+      // Mobile only
+      $('#see-list-button-mobile').on('click', () => {
         $('.map-overlay').css('height', '100%');
         $('#see-list-button').toggleClass('hidden');
       });
 
-      $('.closebtn').on('click', () => {
+      $('.map-overlay .closebtn').on('click', () => {
         $('.map-overlay').css('height', 0);
         $('#see-list-button').toggleClass('hidden');
       });
     });
   }
 
+
   render() {
-    Application.prepare();
+    this.prepare();
     return (
       <div />
     );
   }
 }
 
-
 render(<Application />, document.getElementById('app'));
diff --git a/src/js/components/dates/DateSelector.jsx b/src/js/components/dates/DateSelector.jsx
index b776d73..1f3dd56 100644
--- a/src/js/components/dates/DateSelector.jsx
+++ b/src/js/components/dates/DateSelector.jsx
@@ -2,15 +2,37 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export default class DateSelector extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isChecked: true,
+    };
+  }
+
+  toggleDateCheckboxChange = () => {
+    const { handleCheckboxChange, date } = this.props;
+
+    this.setState(({ isChecked }) => (
+      {
+        isChecked: !isChecked,
+      }
+    ));
+
+    handleCheckboxChange(date);
+  }
+
   render() {
+    const { date } = this.props;
+    const { isChecked } = this.state;
     return (
       <div>
         <input
           type="checkbox"
           name="filters"
-          value={this.props.date}
-          defaultChecked
-        /> { this.props.date }
+          value={date}
+          checked={isChecked}
+          onChange={this.toggleDateCheckboxChange}
+        /> {date}
       </div>
     );
   }
@@ -18,5 +40,6 @@ export default class DateSelector extends Component {
 
 DateSelector.propTypes = {
   date: PropTypes.string.isRequired,
+  handleCheckboxChange: PropTypes.func.isRequired,
 };
 
diff --git a/src/js/components/dates/Dates.jsx b/src/js/components/dates/Dates.jsx
index 5c9b566..a2f99be 100644
--- a/src/js/components/dates/Dates.jsx
+++ b/src/js/components/dates/Dates.jsx
@@ -4,18 +4,13 @@ import PropTypes from 'prop-types';
 import DateSelector from './DateSelector';
 
 export default class Dates extends Component {
-  constructor(props) {
-    super(props);
-    this.makeDateSelectors = this.makeDateSelectors.bind(this);
-  }
-
-  makeDateSelectors(dates) {
+  makeDateSelectors = (dates) => {
     const selectors = [];
     for (let d = 0; d < dates.length; d += 1) {
       const selector = (<DateSelector
-        showShows={this.showShows}
-        date={dates[d]}
-        key={dates[d]}
+        date={dates[d].date}
+        key={dates[d].id}
+        handleCheckboxChange={this.props.handleCheckboxChange}
       />);
       selectors.push(selector);
     }
@@ -25,5 +20,7 @@ export default class Dates extends Component {
 }
 
 Dates.propTypes = {
+  // eslint-disable-next-line
   dates: PropTypes.array.isRequired,
+  handleCheckboxChange: PropTypes.func.isRequired,
 };
diff --git a/src/js/components/map.jsx b/src/js/components/map.jsx
index 750fada..29b5c5b 100644
--- a/src/js/components/map.jsx
+++ b/src/js/components/map.jsx
@@ -2,51 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import _ from 'lodash';
+import $ from 'jquery';
 
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapboxgl-spiderifier/lib/mapboxgl-spiderifier.css';
 
+import * as Util from './Util';
+
 mapboxgl.accessToken = 'pk.eyJ1IjoibWV0YXN5biIsImEiOiIwN2FmMDNhNTRhOWQ3NDExODI1MTllMDk1ODc3NTllZiJ9.Bye80QJ4r0RJsKj4Sre6KQ';
 
 const CLUSTER_RADIUS = 50;
 
 class ShowMap extends Component {
-  // Helper utilties
-  static normalize(x) {
-    if (Array.isArray(x)) {
-      return x.map(y => y.trim().toLowerCase());
-    }
-    return x.trim().toLowerCase();
-  }
-
-  static addPopup(map, features, popup) {
-    const venue = `<h1>${features[0].properties.venue}</h1><br/>`;
-    const html = _.map(features, 'properties.showHTML').reverse().join('<hr><br/>');
-    const point = features[0].geometry.coordinates;
-    popup.setLngLat(point)
-      .setHTML(venue + html)
-      .addTo(map);
-  }
-
-  static getUniqueFeatures(array, comparatorProperty) {
-    const existingFeatureKeys = {};
-    // Because features come from tiled vector data, feature geometries may be split
-    // or duplicated across tile boundaries and, as a result, features may appear
-    // multiple times in query results.
-    const uniqueFeatures = array.filter((el) => {
-      if (existingFeatureKeys[el.properties[comparatorProperty]]) {
-        return false;
-      }
-      existingFeatureKeys[el.properties[comparatorProperty]] = true;
-      return true;
-    });
-
-    return uniqueFeatures;
-  }
-
-  // End of static helpers
-
   constructor(props) {
     super(props);
 
@@ -121,13 +89,22 @@ class ShowMap extends Component {
         return ns && ew;
       }
 
+      const showAllShows = (data) => {
+        // todo
+        _.each(this.props.dates, x => _.set(x, 'checked', true));
+        map.getSource('shows').setData(data);
+        map.setFilter('shows', ['has', 'sid']);
+      };
+
       map.on('moveend', () => {
         const bounds = map.getBounds();
+        const checkedDates = _.filter(this.props.dates, _.matches({ checked: true }));
+        const checkedDatesList = _.map(checkedDates, 'date');
         const features = this.props.geojson.features.filter(x =>
-          inBounds(x.geometry.coordinates, bounds));
+          inBounds(x.geometry.coordinates, bounds) && _.includes(checkedDatesList, x.properties.date));
 
         if (features) {
-          const uniqueFeatures = ShowMap.getUniqueFeatures(features, 'bands');
+          const uniqueFeatures = Util.getUniqueFeatures(features, 'bands');
           // Populate features for the listing overlay.
           this.renderListings(map, uniqueFeatures);
 
@@ -147,24 +124,11 @@ class ShowMap extends Component {
 
       map.on('click', 'shows', e => this.addPopupAndEase(map, e));
 
-      /*
-      map.on('mousemove', 'shows', (e) => {
-        // Change the cursor style as a UI indicator.
-        map.getCanvas().style.cursor = 'pointer';
-        ShowMap.addPopup(map, e.features, this.popup);
-      });
-
-      map.on('mouseleave', 'shows', () => {
-        map.getCanvas().style.cursor = '';
-      });
-      */
-
       this.filterEl.addEventListener('keyup', (e) => {
-        const value = ShowMap.normalize(e.target.value);
+        const value = Util.normalize(e.target.value);
         // Unset filter if empty
         if (value === '') {
-          map.getSource('shows').setData(this.props.geojson);
-          map.setFilter('shows', ['has', 'sid']);
+          showAllShows(this.props.geojson);
         }
 
         if (this.popup.getLngLat()) {
@@ -172,11 +136,15 @@ class ShowMap extends Component {
         }
 
         // Filter visible features that don't match the input value.
+        //
+        const checkedDates = _.filter(this.props.dates, _.matches({ checked: true }));
+        const checkedDatesList = _.map(checkedDates, 'date');
         const filtered = this.onscreenShows.filter((feature) => {
-          function match(x) {
-            const prop = ShowMap.normalize(feature.properties[x]);
-            return prop.indexOf(value) > -1;
-          }
+          const selected = _.includes(checkedDatesList, feature.properties.date);
+          const match = (x) => {
+            const prop = Util.normalize(feature.properties[x]);
+            return prop.indexOf(value) > -1 && selected;
+          };
           return Object.keys(feature.properties).some(match);
         });
 
@@ -191,15 +159,20 @@ class ShowMap extends Component {
         });
 
         // Set the filter to populate features into the layer.
-        const filteredBands = filtered.map(feature => feature.properties.sid);
-        map.setFilter('shows', ['in', 'sid'].concat(filteredBands));
+        const filteredShows = filtered.map(feature => feature.properties.sid);
+        map.setFilter('shows', ['in', 'sid'].concat(filteredShows));
       });
 
       // Call this function on initialization
       // passing an empty array to render an empty state
       this.renderListings(map, []);
 
-      //
+      $('#filter-all').on('click', () => {
+        // Util.toggleDates('all');
+        showAllShows(this.props.geojson);
+        this.filterEl.value = '';
+        $('.close-filter-modal').click();
+      });
 
       map.addLayer({
         id: 'clusters',
@@ -209,9 +182,6 @@ class ShowMap extends Component {
         paint: {
           // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
           // with three steps to implement three types of circles:
-          //   * Blue, 20px circles when point count is less than 100
-          //   * Yellow, 30px circles when point count is between 100 and 750
-          //   * Pink, 40px circles when point count is greater than or equal to 750
           'circle-color': [
             'step',
             ['get', 'point_count'],
@@ -264,7 +234,7 @@ class ShowMap extends Component {
 
     // Populate the popup and set its coordinates based on the feature.
     if (!e.features[0].properties.cluster) {
-      ShowMap.addPopup(map, e.features, this.popup);
+      Util.addPopup(map, e.features, this.popup);
     }
   }
 
@@ -307,6 +277,7 @@ class ShowMap extends Component {
     }
   }
 
+
   render() {
     return (
       <div>
@@ -319,6 +290,7 @@ class ShowMap extends Component {
 ShowMap.propTypes = {
   // eslint-disable-next-line
   geojson: PropTypes.object.isRequired,
+  dates: PropTypes.array.isRequired,
 };
 
 export default ShowMap;
diff --git a/src/js/components/parser.js b/src/js/components/parser.js
index 07dc093..a0a65af 100644
--- a/src/js/components/parser.js
+++ b/src/js/components/parser.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 
 import Venues from '../../data/venues.json';
-import getEditDistance from './Util';
+import { getEditDistance } from './Util';
 
 export default class Parser {
   constructor() {
@@ -37,7 +37,7 @@ export default class Parser {
   static getDates($results) {
     const dates = [];
     $results.find('body > li > a').each((i, x) => {
-      dates.push($.trim(x.text));
+      dates.push({ id: i, date: $.trim(x.text), checked: true });
     });
     return dates;
   }
@@ -47,7 +47,7 @@ export default class Parser {
     const organized = {};
 
     for (let i = 0; i < dates.length; i += 1) {
-      organized[dates[i]] = [];
+      organized[dates[i].date] = [];
 
       // Array is zero indexed but nth-child starts at 1
       const index = i + 1;
@@ -61,9 +61,9 @@ export default class Parser {
 
         const deets = $.trim($shows[si].innerText.split('\n').slice(-3, -2));
 
-        organized[dates[i]].push({
+        organized[dates[i].date].push({
           venue: things.shift(),
-          date: dates[i],
+          date: dates[i].date,
           details: deets,
           bands: things,
         });
diff --git a/src/js/components/util.js b/src/js/components/util.js
index 9dc180c..2172e25 100644
--- a/src/js/components/util.js
+++ b/src/js/components/util.js
@@ -1,5 +1,7 @@
+import _ from 'lodash';
+
 // Compute the edit distance between the two given strings
-export default function getEditDistance(a, b) {
+export function getEditDistance(a, b) {
   if (a.length === 0) return b.length;
   if (b.length === 0) return a.length;
 
@@ -36,3 +38,56 @@ export default function getEditDistance(a, b) {
 
   return matrix[b.length][a.length];
 }
+
+
+export function normalize(x) {
+  if (Array.isArray(x)) {
+    return x.map(y => y.trim().toLowerCase());
+  }
+  return x.trim().toLowerCase();
+}
+
+export function addPopup(map, features, popup) {
+  const venue = `<h1>${features[0].properties.venue}</h1><br/>`;
+  const html = _.map(features, 'properties.showHTML').reverse().join('<hr><br/>');
+  const point = features[0].geometry.coordinates;
+  popup.setLngLat(point)
+    .setHTML(venue + html)
+    .addTo(map);
+}
+
+export function getUniqueFeatures(array, comparatorProperty) {
+  const existingFeatureKeys = {};
+  // Because features come from tiled vector data, feature geometries may be split
+  // or duplicated across tile boundaries and, as a result, features may appear
+  // multiple times in query results.
+  const uniqueFeatures = array.filter((el) => {
+    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
+      return false;
+    }
+    existingFeatureKeys[el.properties[comparatorProperty]] = true;
+    return true;
+  });
+
+  return uniqueFeatures;
+}
+
+
+export function getMinMaxDates(dates) {
+  const minDate = dates[0];
+  const maxDate = dates.slice(-1)[0];
+  const minMonth = new Date(minDate).getMonth();
+  const maxMonth = new Date(maxDate).getMonth();
+  const minYear = new Date().getFullYear();
+  // In the rare case that the max date is a different year
+  const maxYear = (minMonth === 11 && maxMonth === 0) ? minYear + 1 : minYear;
+
+  const minTime = new Date(`${minDate} ${minYear}`).getTime();
+  const maxTime = new Date(`${maxDate} ${maxYear}`).getTime();
+  return {
+    minDate,
+    minTime,
+    maxDate,
+    maxTime,
+  };
+}
diff --git a/src/js/mapper.js b/src/js/mapper.js
deleted file mode 100644
index c0533bc..0000000
--- a/src/js/mapper.js
+++ /dev/null
@@ -1,489 +0,0 @@
-// globals
-
-var data;
-var map;
-var resp;
-var geojson;
-var organized;
-var myLayer;
-var overlays;
-var filters;
-var selectedDatesList;
-var geoResponse;
-
-// the scrape
-
-var urls = "'http://www.foopee.com/punk/the-list/by-date.0.html', 'http://www.foopee.com/punk/the-list/by-date.1.html'";
-var xpath = "//body/ul/li";
-var query = "select * from htmlstring where url in (" + urls + ") and xpath='" + xpath + "'";
-var yql_url = "https://query.yahooapis.com/v1/public/yql?format=json&q=" + encodeURIComponent(query) + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
-
-
-////////////
-// foopee /
-//////////
-
-function get(url) {
-
-    // Return a new promise.
-    return new Promise(function(resolve, reject) {
-
-        var req = new XMLHttpRequest();
-        req.open('GET', url);
-
-        req.onload = function() {
-            if (req.status == 200) {
-                resp = JSON.parse(req.response);
-                organized = sortByDate(resp);
-                resolve(console.log('Request success.'));;
-            } else {
-                reject(console.log(Error(req.statusText)));
-            }
-        };
-
-        // Handle network errors
-        req.onerror = function() {
-            reject(Error("Network Error"));
-        };
-
-        req.send();
-    });
-}
-
-
-////////////
-// MAPBOX /
-//////////
-
-// defaults
-function ModifiedClusterGroup() {
-    return new L.MarkerClusterGroup({
-        spiderfyOnMaxZoom: true,
-        maxClusterRadius: 1,
-        spiderfyDistanceMultiplier: 3
-            /* custom icons ?
-            iconCreateFunction: function(cluster) {
-              return L.mapbox.marker.icon({
-                // show the number of markers in the cluster on the icon.
-                'marker-symbol': cluster.getChildCount(),
-                'marker-color': '#a0d6b4'
-              });
-            }
-            */
-    });
-}
-
-
-function setupMap() {
-    // Return a new promise
-    return new Promise(function(resolve, reject) {
-
-        // easy to change online though if we suspect abuse
-        L.mapbox.accessToken = 'pk.eyJ1IjoibWV0YXN5biIsImEiOiIwN2FmMDNhNTRhOWQ3NDExODI1MTllMDk1ODc3NTllZiJ9.Bye80QJ4r0RJsKj4Sre6KQ';
-
-        // Init map
-        map = L.mapbox.map('map', 'mapbox.dark', {
-                maxZoom: 17
-            })
-            .setView([37.7600, -122.416], 13);
-
-        // Locate me button
-        L.control.locate().addTo(map);
-
-
-        if (map) {
-            resolve(console.log('Map is loaded.'));
-        } else {
-            reject(console.log(Error('Map not loaded!')));
-        }
-    });
-}
-
-// filters
-
-function populateDates(organized) {
-    // grab form
-    var form = document.getElementById('date-selector');
-    var dates = Object.keys(organized);
-
-    // lazy
-    form.innerHTML = '<div>'
-    for (var d = 0; d < dates.length; d++) {
-        var le_radio = "<input type='checkbox' name='filters' onclick='showShows();' value='" + dates[d] + "' checked> " + dates[d]
-        form.innerHTML = form.innerHTML + le_radio
-    }
-    form.innerHTML += '</div>'
-    filters = document.getElementById('date-selector').filters;
-}
-
-
-
-function showShows() {
-
-    selectedDatesList = [];
-    // first collect all of the checked boxes and create an array of strings
-    for (var i = 0; i < filters.length; i++) {
-        if (filters[i].checked) selectedDatesList.push(filters[i].value);
-    }
-    // then remove any previously-displayed marker groups
-    overlays.clearLayers();
-    // create a new marker group
-    var clusterGroup = ModifiedClusterGroup().addTo(overlays);
-    // and add any markers that fit the filtered criteria to that group.
-    myLayer.eachLayer(function(layer) {
-        if (selectedDatesList.indexOf(layer.feature.properties.date) !== -1) {
-            clusterGroup.addLayer(layer);
-        }
-    });
-
-    // update coordinates box
-    onmove();
-
-}
-
-
-
-
-/////////////
-// helpers /
-///////////
-
-function parseHTMLToDOM(j){
-    var res = j['query']['results']['result'];
-    var results = res.join('\n');
-
-    // array of dates
-    p = new DOMParser();
-    results = p.parseFromString(results, 'text/html');
-    $results = $(results);
-
-    return $results;
-}
-
-function sortByDate(j) {
-
-    $results = parseHTMLToDOM(j);
-    console.log($results)
-
-    // grab the dates to use as keys
-    dates = $results.find('body > li > a').map(function() {
-        return $.trim(this.text);
-    }).get();
-
-    organized = {};
-
-    console.log(dates.length)
-
-    for (var i = 0; i < dates.length; i++) {
-
-        // empty date
-        organized[dates[i]] = [];
-
-        // Array is zero indexed but nth-child starts at 1
-        var index = i + 1
-        var $shows = $results.find('body > li:nth-child(' + index + ')').find('li');
-
-        for (var si = 0; si < $shows.length; si++) {
-
-            // god save us all, i'm so sorry
-            var things= $($shows[si]).find('a').map(function() {
-                return $.trim(this.text);
-            }).get();
-
-            // really, I am
-            var venue = things.shift();
-            var bands = things;
-            var deets = $.trim($shows[si].innerText.split('\n').slice(-3, -2));
-            
-            organized[dates[i]].push({
-                'venue': venue,
-                'date': dates[i],
-                'details': deets,
-                'bands': bands,
-            });
-        }
-    }
-
-    // lol "organized"
-    return organized;
-}
-
-
-// Compute the edit distance between the two given strings
-function getEditDistance(a, b) {
-    if (a.length === 0) return b.length;
-    if (b.length === 0) return a.length;
-
-    var matrix = [];
-
-    // increment along the first column of each row
-    var i;
-    for (i = 0; i <= b.length; i++) {
-        matrix[i] = [i];
-    }
-
-    // increment each column in the first row
-    var j;
-    for (j = 0; j <= a.length; j++) {
-        matrix[0][j] = j;
-    }
-
-    // Fill in the rest of the matrix
-    for (i = 1; i <= b.length; i++) {
-        for (j = 1; j <= a.length; j++) {
-            if (b.charAt(i - 1) == a.charAt(j - 1)) {
-                matrix[i][j] = matrix[i - 1][j - 1];
-            } else {
-                matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, // substitution
-                               Math.min(matrix[i][j - 1] + 1, // insertion
-                                        matrix[i - 1][j] + 1)); // deletion
-            }
-        }
-    }
-
-    return matrix[b.length][a.length];
-};
-
-
-function geojsonify(data) {
-    // this function returns a geojson object
-
-    var features = []
-    var dateKeys = Object.keys(data)
-
-    // loop through dates
-    for (var i = 0; i < dateKeys.length; i++) {
-
-        // loop through shows
-        for (var j = 0; j < data[dateKeys[i]].length; j++) {
-
-
-            var showData = data[dateKeys[i]][j];
-            var venueList = Object.keys(lonlatDictionary);
-
-            // check for misspellings
-            if (!lonlatDictionary[showData['venue']]) {
-                try {
-                    for (var v = 0; v < venueList.length; v++) {
-                        var misspelled = showData['venue'].replace(/\W/g, '')
-                        var spelledCorrect = venueList[v].replace(/\W/g, '')
-                        var editDistance = getEditDistance(misspelled, spelledCorrect);
-                        if (editDistance <= 3) {
-                            console.log('"' + showData['venue'] + '" has been replaced with "' + venueList[v] + '"');
-                            showData['venue'] = venueList[v];
-                        }
-                    }
-                } catch (e) {
-                    console.log('Missing Venue?', e);
-                }
-            }
-
-            var show = {
-                "type": "Feature",
-                "geometry": {
-                    "type": "Point",
-                    "coordinates": lonlatDictionary[showData['venue']] || [-122.422960, 37.826524]
-                },
-                "properties": {
-                    "date": dateKeys[i],
-                    "venue": showData['venue'],
-                    "bands": showData['bands'],
-                    "details": showData['details'].replace(/ ,/g, ''), // fucking commas
-                    'marker-color': '#33CC33', //+Math.floor(Math.random()*16777215).toString(16), //random colors !
-                    'marker-size': 'large',
-                    'marker-symbol': 'music'
-                }
-            }
-
-            // add show to features array
-            features.push(show)
-
-        }
-    }
-
-    // format for valid geojson
-    var geojson = {
-        "type": "FeatureCollection",
-        "features": features
-    }
-    return geojson
-}
-
-
-
-function plotShows(json) {
-
-    return new Promise(function(resolve, reject) {
-
-
-        // update function for coordinates infobox
-        window.onmove = function onmove() {
-            // Get the map bounds - the top-left and bottom-right locations.
-            var inBounds = [],
-                bounds = map.getBounds();
-            clusterGroup.eachLayer(function(marker) {
-                // For each marker, consider whether it is currently visible by comparing
-                // with the current map bounds.
-                if (bounds.contains(marker.getLatLng()) && selectedDatesList.indexOf(marker.feature.properties.date) !== -1) {
-                    var feature = marker.feature;
-                    var coordsTemplate = L.mapbox.template('{{properties.date}} - {{properties.venue}} |{{#properties.bands}} {{.}} |{{/properties.bands}}{{properties.details}}', feature)
-                    inBounds.push(coordsTemplate);
-                }
-            });
-            // Display a list of markers.
-            inBounds.reverse()
-            document.getElementById('coordinates').innerHTML = inBounds.join('\n');
-        }
-
-
-        // get that geojson
-        geojson = geojsonify(organized);
-
-        // attach data
-        myLayer = L.mapbox.featureLayer(geojson)
-
-        // make clustergroup
-        var clusterGroup = ModifiedClusterGroup();
-        // add features
-        clusterGroup.addLayer(myLayer);
-        overlays = L.layerGroup().addTo(map);
-        // add cluster layer
-        // overlays are multiple layers
-        // add in showShows()
-        showShows();
-
-        // for each layer in feature layer
-        myLayer.eachLayer(function(e) {
-
-            var marker = e;
-            var feature = e.feature;
-
-            // Create custom popup content
-            var popupContent = L.mapbox.template('<h1> {{properties.venue}} </h1><br><h3> {{properties.date}} </h3><br><h2> {{#properties.bands}} - {{.}} <br> {{/properties.bands}} </h2><br><h2> {{properties.details}} </h2><br>', feature)
-
-            marker.bindPopup(popupContent, {
-                closeButton: true,
-                minWidth: 320
-            });
-        });
-
-
-
-
-        map.on('move', onmove);
-        // call onmove off the bat so that the list is populated.
-        // otherwise, there will be no markers listed until the map is moved.
-        window.onmove();
-
-
-        if (geojson) {
-            resolve(console.log('Shows plotted.'))
-        } else {
-            reject(console.log(Error('Shows cannot be plotted.')));
-        }
-    });
-}
-
-
-function toggleDate(desc) {
-    for (var i = 0; i < filters.length; i++) {
-
-        if (desc == 'today') {
-            var day = Date().slice(0, 10) // this gives us the foopee time format
-        } else if (desc == 'tomorrow') {
-            var d = new Date();
-            var day = new Date(((d.getTime() / 1000) + (60 * 60 * 24)) * 1000); // milliseconds not seconds
-            day = day.toString().slice(0, 10);
-        }
-
-        // lol, so foopee puts its date with no zero padding:
-        if (day) {
-            var day_list = day.split(' ');
-            day_list[2] = String(parseInt(day_list[2]));
-            day = day_list.join(' ');
-        }
-
-        if (filters[i].value == day) {
-            filters[i].checked = 1;
-        } else {
-            filters[i].checked = 0;
-        }
-
-        if (desc == 'all') {
-            filters[i].checked = 1
-        }
-    }
-
-    // update
-    showShows();
-
-}
-////////////////
-// vex modal //
-///////////////
-
-vex.defaultOptions.className = 'vex-theme-flat-attack';
-
-
-function modalPop() {
-    var modalMessage = $('#modal-template').html();
-    $('#q').on("click hover", vex.dialog.alert(modalMessage))
-}
-
-
-///////////////////
-// control logic /
-/////////////////
-
-get(yql_url).then(function(resolve) {
-    try {
-        setupMap();
-    } catch (err) {
-        vex.dialog.alert('OH SHIT SOMETHINGS BROKEN. The List could be down, rawgit could be mad, or my code could be broken.')
-    }
-    populateDates(organized);
-    plotShows(resp);
-    modalPop();
-})
-
-
-
-///////////////
-// gmaps api /
-/////////////
-
-// Note: I don't think I want to use these because they were pretty inacurate when using the venue descriptions
-// from foopee. But I'm going to leave them here in case they get used as a catchall once the locations are all
-// added to the lonlat dictionary.
-
-
-function fetchGeo(venue) {
-
-    return new Promise(function(resolve, reject) {
-
-        // api key
-        var apiKey = "AIzaSyDCyj1LQMqFPcQhgfW92vR8BtXhlDIvF-4";
-        // request
-        var geocoder = "https://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(venue) + "&key=" + apiKey;
-
-        //clear
-        geoResponse = '';
-
-        $.getJSON(geocoder, function(response) {
-
-            if (response) {
-                geoResponse = response;
-                resolve(console.log('Looked up venue.'))
-            } else {
-                reject(console.log(Error('Venue lookup failure.')));
-            }
-        })
-    })
-}
-
-function getLonLat(venue) {
-
-    fetchGeo(venue).then(function(resolve) {
-        geoResponse = [geoResponse.results[0].geometry.location.lng, geoResponse.results[0].geometry.location.lat]
-    })
-}