From 7cd3648d6da8562204dcc45a20b99386b33f5015 Mon Sep 17 00:00:00 2001
From: Xander Johnson <xander@metasyn.pw>
Date: Fri, 2 Feb 2018 12:07:27 -0800
Subject: [PATCH] Add plotter, add markers, dates. WIP.

---
 package.json                             |   3 +-
 src/css/stylish.css                      |  18 ++++++
 src/img/marker.png                       | Bin 0 -> 1740 bytes
 src/js/app.jsx                           |  25 +++++---
 src/js/components/Plotter.js             |  69 +++++++++++++++++++++++
 src/js/components/dates/DateSelector.jsx |  24 ++++++++
 src/js/components/dates/Dates.jsx        |  33 +++++++++++
 src/js/components/map.jsx                |  60 +++++++++++++++++---
 src/js/components/parser.js              |  66 +++++++++++++++++++++-
 src/js/components/util.js                |  45 +++++++++++----
 10 files changed, 316 insertions(+), 27 deletions(-)
 create mode 100644 src/img/marker.png
 create mode 100644 src/js/components/Plotter.js
 create mode 100644 src/js/components/dates/DateSelector.jsx
 create mode 100644 src/js/components/dates/Dates.jsx

diff --git a/package.json b/package.json
index e73fd9b..2e58551 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "jquery": "^3.3.1",
     "mapbox-gl": "^0.44.0",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "prop-types": "^15.6.0"
   }
 }
diff --git a/src/css/stylish.css b/src/css/stylish.css
index 2353ab7..ae091de 100644
--- a/src/css/stylish.css
+++ b/src/css/stylish.css
@@ -97,3 +97,21 @@ button {
 .vex-content h1 {
   font-size: 32px;
 }
+
+/* Mapbox GL Stuff */
+
+.marker {
+  background-image: url('../img/marker.png');
+  background-size: contain;
+  width: 30px;
+  height: 77px;
+  cursor: pointer;
+}
+
+.mapboxgl-popup {
+  max-width: 200px;
+}
+
+.mapboxgl-popup-content {
+  font-family: 'Open Sans', sans-serif;
+}
diff --git a/src/img/marker.png b/src/img/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c87bec652bce6943ce579fc3acedc4fbe9743cf
GIT binary patch
literal 1740
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

literal 0
HcmV?d00001

diff --git a/src/js/app.jsx b/src/js/app.jsx
index 8e7f4e4..61d6c09 100644
--- a/src/js/app.jsx
+++ b/src/js/app.jsx
@@ -1,25 +1,36 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 
-import Parser from './components/parser';
-import Util from './components/util';
-import ShowMap from './components/map';
+import Parser from './components/Parser';
+import Dates from './components/dates/Dates';
+import ShowMap from './components/Map';
 
 import '../css/stylish.css';
 
 class Application extends Component {
-  static plot() {
+  static prepare() {
     const parsed = new Parser().parseData();
 
+    // keys: organized, dates
     parsed.then((data) => {
-      Util.populateDates(data.dates);
+      // Pop modal?
+      // TODO
+
+      // Add the dates
+      const dateEl = document.getElementById('date-selector-container');
+      render(<Dates dates={data.dates} />, dateEl);
+
+      // Add the shows
+      const mapEl = document.getElementById('app');
+      render(<ShowMap geojson={data.geojson} />, mapEl);
+      console.log(data.geojson)
     });
   }
 
   render() {
-    Application.plot();
+    Application.prepare();
     return (
-      <ShowMap />
+      <div />
     );
   }
 }
diff --git a/src/js/components/Plotter.js b/src/js/components/Plotter.js
new file mode 100644
index 0000000..d2ba40f
--- /dev/null
+++ b/src/js/components/Plotter.js
@@ -0,0 +1,69 @@
+export default class Plotter {
+  static plotShows(organized) {
+    return organized;
+  }
+}
+
+/*
+function plotShows(geojson) {
+  // update function for coordinates infobox
+  window.onmove = function onmove() {
+    // Get the map bounds - the top-left and bottom-right locations.
+    const inBounds = [],
+      bounds = map.getBounds();
+    clusterGroup.eachLayer((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) {
+        const feature = marker.feature;
+        const 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');
+  };
+
+  // attach data
+  const myLayer = L.mapbox.featureLayer(geojson);
+
+  // make clustergroup
+  const 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((e) => {
+    const marker = e;
+    const feature = e.feature;
+
+    // Create custom popup content
+    const 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();
+}
+
+function ModifiedClusterGroup() {
+  return new L.MarkerClusterGroup({
+    spiderfyOnMaxZoom: true,
+    maxClusterRadius: 1,
+    spiderfyDistanceMultiplier: 3,
+  });
+}
+*/
diff --git a/src/js/components/dates/DateSelector.jsx b/src/js/components/dates/DateSelector.jsx
new file mode 100644
index 0000000..59b7cc2
--- /dev/null
+++ b/src/js/components/dates/DateSelector.jsx
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class DateSelector extends Component {
+  render() {
+    return (
+      <div>
+        <input
+          type="checkbox"
+          name="filters"
+          onClick={this.props.showShows}
+          value={this.props.date}
+          defaultChecked
+        /> { this.props.date }
+      </div>
+    );
+  }
+}
+
+DateSelector.propTypes = {
+  date: PropTypes.string.isRequired,
+  showShows: PropTypes.func.isRequired,
+};
+
diff --git a/src/js/components/dates/Dates.jsx b/src/js/components/dates/Dates.jsx
new file mode 100644
index 0000000..23c5422
--- /dev/null
+++ b/src/js/components/dates/Dates.jsx
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+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);
+    this.showShows = this.showShows.bind(this);
+  }
+
+  // eslint-disable-next-line
+  showShows(){}
+
+  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]}
+      />);
+      selectors.push(selector);
+    }
+    return selectors;
+  }
+  render() { return this.makeDateSelectors(this.props.dates); }
+}
+
+Dates.propTypes = {
+  dates: PropTypes.array.isRequired,
+};
diff --git a/src/js/components/map.jsx b/src/js/components/map.jsx
index 794167d..426deec 100644
--- a/src/js/components/map.jsx
+++ b/src/js/components/map.jsx
@@ -1,13 +1,16 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
+import Venues from '../../data/venues.json';
+
 mapboxgl.accessToken = 'pk.eyJ1IjoibWV0YXN5biIsImEiOiIwN2FmMDNhNTRhOWQ3NDExODI1MTllMDk1ODc3NTllZiJ9.Bye80QJ4r0RJsKj4Sre6KQ';
 
 class ShowMap extends Component {
-  constructor(Props) {
-    super(Props);
+  constructor(props) {
+    super(props);
 
     // Centered on SF
     this.state = {
@@ -15,6 +18,8 @@ class ShowMap extends Component {
       lat: 37.76,
       zoom: 13,
     };
+
+    this.bindMap = this.bindMap.bind(this);
   }
 
   componentDidMount() {
@@ -27,6 +32,7 @@ class ShowMap extends Component {
       zoom,
     });
 
+    // Add locator control
     map.addControl(new mapboxgl.GeolocateControl({
       positionOpionts: {
         enableHighAccuracy: true,
@@ -34,26 +40,64 @@ class ShowMap extends Component {
       trackUserLocation: true,
     }));
 
+    // Add the actual shows
+    map.on('load', () => {
+      map.addSource('shows', {
+        type: 'geojson',
+        data: this.props.geojson,
+      });
+    });
+
     map.on('move', () => {
-      const { lng, lat } = map.getCenter();
+      const center = map.getCenter();
 
       this.setState({
-        lng: lng.toFixed(4),
-        lat: lat.toFixed(4),
+        lng: center.lng.toFixed(4),
+        lat: center.lat.toFixed(4),
         zoom: map.getZoom().toFixed(2),
       });
     });
+
+    ShowMap.plotMarkers(this.props.geojson, map);
   }
 
-  render() {
-    const { lng, lat, zoom } = this.state;
+  bindMap(el) {
+    this.mapContainer = el;
+  }
 
+  static plotMarkers(geojson, map) {
+    geojson.features.forEach((marker) => {
+      const el = document.createElement('div');
+      el.className = 'marker';
+
+      const lngLat = Venues[marker.geometry.coordinates];
+      const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(marker.properties.showHTML)
+
+      if (lngLat) {
+        try {
+          new mapboxgl.Marker(el)
+            .setLngLat(lngLat)
+            .setPopup(popup)
+            .addTo(map);
+        } catch (e) {
+          console.log(e)
+        }
+      }
+    });
+  }
+
+
+  render() {
     return (
       <div>
-        <div ref={el => this.mapContainer = el} className="absolute top right left bottom" />
+        <div ref={this.bindMap} className="absolute top right left bottom" />
       </div>
     );
   }
 }
 
+ShowMap.propTypes = {
+  geojson: PropTypes.object.isRequired,
+};
+
 export default ShowMap;
diff --git a/src/js/components/parser.js b/src/js/components/parser.js
index 95eb3b6..bf7e730 100644
--- a/src/js/components/parser.js
+++ b/src/js/components/parser.js
@@ -1,5 +1,8 @@
 import $ from 'jquery';
 
+import Venues from '../../data/venues.json';
+import getEditDistance from './Util';
+
 export default class Parser {
   constructor() {
     this.yql = Parser.makeYQL();
@@ -11,7 +14,8 @@ export default class Parser {
         const results = Parser.parseHTMLtoDOM(success);
         const dates = Parser.getDates(results);
         const organized = Parser.sortByDate(results, dates);
-        return { organized, dates };
+        const geojson = Parser.geojsonify(organized);
+        return { organized, geojson, dates };
       })
       .catch(e => Error((e)));
   }
@@ -68,4 +72,64 @@ export default class Parser {
 
     return organized;
   }
+
+  static geojsonify(data) {
+    const features = [];
+    const dateKeys = Object.keys(data);
+
+    // loop through dates
+    for (let i = 0; i < dateKeys.length; i += 1) {
+      // loop through shows
+      for (let j = 0; j < data[dateKeys[i]].length; j += 1) {
+        const showData = data[dateKeys[i]][j];
+        const venueList = Object.keys(Venues);
+
+        // check for misspellings
+        if (!Venues[showData.venue]) {
+          try {
+            for (let v = 0; v < venueList.length; v += 1) {
+              const misspelled = showData.venue.replace(/\W/g, '');
+              const spelledCorrect = venueList[v].replace(/\W/g, '');
+              const 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);
+          }
+        }
+
+        const showString = `${dateKeys[i]} - ${showData.venue} | ${showData.bands.join(' |')} | ${showData.details}`;
+        const showHTML = `<h1> ${showData.venue} </h1><br/><h3> ${dateKeys[i]} </h3><br/><h2>${showData.bands.join(' |')}<br/> ${showData.details}`;
+
+        const show = {
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [showData.venue] || [-122.422960, 37.826524],
+          },
+          properties: {
+            date: dateKeys[i],
+            venue: showData.venue,
+            bands: showData.bands,
+            details: showData.details.replace(/ ,/g, ''), // fucking commas
+            showString,
+            showHTML,
+          },
+        };
+
+        // add show to features array
+        features.push(show);
+      }
+    }
+
+    // format for valid geojson
+    const geojson = {
+      type: 'FeatureCollection',
+      features,
+    };
+    return geojson;
+  }
 }
diff --git a/src/js/components/util.js b/src/js/components/util.js
index 2cf1c3c..9dc180c 100644
--- a/src/js/components/util.js
+++ b/src/js/components/util.js
@@ -1,13 +1,38 @@
-export default class Util {
-  static populateDates(dates) {
-    const form = document.getElementById('date-selector');
-    form.innerHTML = '<div>';
-    for (let d = 0; d < dates.length; d += 1) {
-      const radio = `<input type='checkbox' name='filters' onclick='showShows();' value=' ${dates[d]}' checked> ${dates[d]}`;
-      form.innerHTML += radio;
+// Compute the edit distance between the two given strings
+export default function getEditDistance(a, b) {
+  if (a.length === 0) return b.length;
+  if (b.length === 0) return a.length;
+
+  const matrix = [];
+
+  // increment along the first column of each row
+  let i;
+  for (i = 0; i <= b.length; i += 1) {
+    matrix[i] = [i];
+  }
+
+  // increment each column in the first row
+  let j;
+  for (j = 0; j <= a.length; j += 1) {
+    matrix[0][j] = j;
+  }
+
+  // Fill in the rest of the matrix
+  for (i = 1; i <= b.length; i += 1) {
+    for (j = 1; j <= a.length; j += 1) {
+      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
+      }
     }
-    form.innerHTML += '</div>';
-    // TODO: handle filters
-    // filters = document.getElementById('date-selector').filters;
   }
+
+  return matrix[b.length][a.length];
 }