Added some rudimentary stuff for a date selection modal, and some mor…

…e react stuff for passing around the dates as props/state.
metasyn · Feb 18, 2018 · 864fb56 · 864fb56
1 parent 60d4cf0
commit 864fb56
Show file tree

Hide file tree

Showing 12 changed files with 303 additions and 606 deletions.
diff --git 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
@@ -2,5 +2,6 @@ module.exports = {
   extends: "airbnb",
   env: {
     "browser": true
-  }
+  },
+  parser: "babel-eslint"
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -2,21 +2,44 @@ 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>
     );
   }
 }
 
 DateSelector.propTypes = {
   date: PropTypes.string.isRequired,
+  handleCheckboxChange: PropTypes.func.isRequired,
 };