{idGeneration: 'MONGO'}

sawasawasawa · Dec 31, 2017 · e105fce · e105fce
1 parent 96957ed
commit e105fce
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 47 deletions.
diff --git a/client/main.css b/client/main.css
@@ -93,7 +93,7 @@ header {
     color: #EE3858;
     position: absolute;
     bottom: -3px;
-    left: 60px;
+    left: 45px;
 }
 #legend div span {
     margin-left:10px;
@@ -107,8 +107,7 @@ header {
 .legend-element {
     z-index: 2;
     color: white;
-    margin-right: 5px;
-    margin-left: 5px;
+    margin: 10px;
     align-self: flex-end;
     justify-content: flex-end;
     align-items: flex-end;

diff --git a/imports/api/places.js b/imports/api/places.js
@@ -1,6 +1,6 @@
 import { Meteor } from 'meteor/meteor'
 
-export const Places = new Mongo.Collection('places')
+export const Places = new Mongo.Collection('places', {idGeneration: 'MONGO'})
 
 if (Meteor.isServer) {
   Meteor.publish('places', function placesPublication () {

diff --git a/imports/helpers.js b/imports/helpers.js
@@ -11,27 +11,35 @@ export function getLegendElements (markerType) {
     case 'places':
       return [{
         icon: '/img/disco-ball.svg',
+        type: 'club',
         name: 'Klub'
       }, {
         icon: '/img/outdoorHall.png',
+        type: 'outdoorHall',
         name: 'Świeże powietrze'
       }, {
         icon: '/img/cafe.png',
+        type: 'cafe',
         name: 'Pub/Kawiarnia'
       }, {
         icon: '/img/tv.png',
+        type: 'tv',
         name: 'Telewizja'
       }, {
         icon: '/img/radio.png',
+        type: 'radio',
         name: 'Radio'
       }, {
         icon: '/img/theatre.png',
+        type: 'theatre',
         name: 'Teatr'
       }, {
         icon: '/img/piano.png',
+        type: 'philharmonia',
         name: 'Filharmonia'
       }, {
         icon: '/img/culture.png',
+        type: 'centrum kultury',
         name: 'Ośrodek kultury'
       }]
     case 'media':
@@ -41,9 +49,11 @@ export function getLegendElements (markerType) {
           name: 'youtubeVideo'
         }, {
           icon: '/img/record.png',
+          type: '',
           name: 'mp3'
         }, {
           icon: '/img/record.png',
+          type: '',
           name: 'bandcamp'
         }
       ]

diff --git a/imports/ui/App.js b/imports/ui/App.js
@@ -16,18 +16,20 @@ export class AppContent extends Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    this.setState({places: nextProps.places, media: nextProps.media, events: nextProps.events, markers: nextProps.places})
+    this.setState({places: nextProps.places, media: nextProps.media, events: nextProps.events, markers: nextProps.places, markerFilter: nextProps.markerFilter})
   }
 
   getMediaMarkerPosition (marker) {
     /* TODO fixit*/
     if (marker.placeId) {
       const placeOfRecording = this.props.places.find((place) => {
-        if (place._id._str) {
-          return place._id._str === marker.placeId
+        if (marker.placeId._str) {
+          return place._id._str === marker.placeId._str
         }
         return place._id === marker.placeId })
-      return placeOfRecording.position
+      return placeOfRecording ? placeOfRecording.position : undefined
+    } else {
+      console.log('_____ no place id for ', marker);
     }
   }
 
@@ -41,20 +43,30 @@ export class AppContent extends Component {
       })
       this.setState({markers: newMarkers, markerType: 'media'})
     } else {
-      this.setState({markers: this.props.places, markerType: 'places'})
+      this.setState({markers: this.state.markers, markerType: 'places', markerFilter: null})
     }
   }
 
+  setMarkerFilter = (placeType) => {
+    console.log('_____ qwe');
+    this.setState({markerFilter: placeType })
+  }
+
   render () {
     return <MuiThemeProvider>
       {this.props.dataReady ? (
         <div className='container'>
-          <Header markerType={this.state.markerType} />
+          <Header
+            markerType={this.state.markerType}
+            setMarkerFilter={this.setMarkerFilter}
+            markerFilter={this.state.markerFilter}
+          />
           <Menu {...this.props} markerType={this.state.markerType} />
           <MusicMap {...this.props}
             markers={this.state.markers}
             markerType={this.state.markerType}
             toggleMarkersFor={this.toggleMarkersFor}
+            markerFilter={this.state.markerFilter}
           />
         </div>
       ) : (

diff --git a/imports/ui/Header.js b/imports/ui/Header.js
@@ -34,7 +34,11 @@ export class Header extends Component {
             <Paper id={'header-background'} zDepth={5} style={{ backgroundColor: '#313131' }} />
             <div id='footer-background' style={footerBackgroundStyle}>
               <Paper id='legend-paper' zDepth={2} style={legendPaperStyle} />
-              <Legend markerType={this.props.markerType} />
+              <Legend
+                markerType={this.props.markerType}
+                markerFilter={this.props.markerFilter}
+                setMarkerFilter={this.props.setMarkerFilter}
+              />
             </div>
           </div>
         </div>

diff --git a/imports/ui/MusicMap/Markers.js b/imports/ui/MusicMap/Markers.js
@@ -3,6 +3,26 @@ import MarkerClusterer from 'react-google-maps/lib/addons/MarkerClusterer'
 import PlaceMarker from '../components/common/PlaceMarker'
 
 export const Markers = (props) => {
+  const getMediaAtPlace = (marker) => {
+    return getDocsAtPlace('media', marker)
+  }
+
+  const getEventsAtPlace = (marker) => {
+    return getDocsAtPlace('events', marker)
+  }
+
+  const getDocsAtPlace = (doctype, marker) => {
+    let mediaAtPlace = []
+    if (props.media) {
+      mediaAtPlace = props[doctype].filter((e) => {
+        return marker._id._str
+          ? e.placeId._str === marker._id._str
+          : e.placeId === marker._id
+      })
+    }
+    return mediaAtPlace
+  }
+
   return (<div>
     <MarkerClusterer
       averageCenter
@@ -26,8 +46,8 @@ export const Markers = (props) => {
           marker={marker}
           onMarkerClick={() => props.onMarkerClick(marker)}
           onCloseClick={() => props.onCloseClick(marker)}
-          mediaAtPlace={props.media ? props.media.filter((e) => { return e.placeId === marker._id }) : []}
-          eventsAtPlace={props.events ? props.events.filter((e) => { return e.placeId === marker._id }) : []}
+          mediaAtPlace={getMediaAtPlace(marker)}
+          eventsAtPlace={getEventsAtPlace(marker)}
         />
       })
         : null}

diff --git a/imports/ui/MusicMap/index.js b/imports/ui/MusicMap/index.js
@@ -27,26 +27,40 @@ export default class MusicMap extends Component {
   handleMapModalClose = this.handleMapModalClose.bind(this);
 
   componentWillReceiveProps (nextProps) {
-    const changeMarkerView = nextProps.markerType !== this.state.markerType
-    if (changeMarkerView) {
+    const changeMarkerView = nextProps.markerType !== this.props.markerType
+    const changeFilter = nextProps.markerFilter !== this.props.markerFilter
+    if (changeMarkerView || changeFilter) {
       this.setState({
-        markers: this.prepareMarkers(nextProps.markerType),
-        markerType: nextProps.markerType
+        markers: this.prepareMarkers(nextProps.markerType, nextProps.markerFilter),
       })
     }
   }
 
-  prepareMarkers (markerType) {
+  prepareMarkers (markerType, markerFilter) {
     if (markerType === 'media') {
-      // TODO: fixme
-      return this.props.media.map(this.addPosition).filter(a => !!a)
+      return this.props.media
+        .map(this.addPosition)
+        // TODO: fixme - filtering undefineds
+        .filter(a => !!a)
     } else {
-      return this.props.places
+      if (markerFilter) {
+        return this.getFilteredMarkers(this.props.places, markerFilter)
+      } else {
+        return this.props.places
+      }
+
     }
   }
 
+  getFilteredMarkers = (markers, filter) => {
+    return markers.filter(marker => marker.type === filter)
+  }
+
   addPosition = (mediaFile) => {
     const placeOfRecording = this.props.places.find((place) => {
+      if (mediaFile.placeId._str) {
+        return mediaFile.placeId._str === place._id._str
+      }
       return mediaFile.placeId === place._id
     })
     const position = placeOfRecording && placeOfRecording.position
@@ -67,10 +81,18 @@ export default class MusicMap extends Component {
       return marker._id === targetMarker._id
     })
     modalData.eventsAtPlace = this.props.events
-      ? this.props.events.filter((e) => { return e.placeId === targetMarker._id })
+      ? this.props.events.filter((e) => {
+        if (e.placeId._str) {
+          return e.placeId._str === targetMarker._id._str
+        }
+      })
       : []
     modalData.mediaAtPlace = this.props.media
-      ? this.props.media.filter((e) => { return e.placeId === targetMarker._id })
+      ? this.props.media.filter((e) => {
+        if (!e.placeId._str) {
+          return e.placeId._str === targetMarker._id._str
+        }
+      })
       : []
     return modalData
   }

diff --git a/imports/ui/components/Legend/LegendElement.js b/imports/ui/components/Legend/LegendElement.js
@@ -4,6 +4,7 @@ import Paper from 'material-ui/Paper'
 export class LegendElement extends Component {
   render () {
     const style = {
+      opacity: this.props.dim ? 0.6 : 1,
       pointerEvents: 'all',
       height: 32,
       width: 32,
@@ -17,8 +18,11 @@ export class LegendElement extends Component {
       <div className='legend-element'
         onMouseOver={() => { this.setState({hover: true}) }}
         onMouseLeave={() => { this.setState({hover: false}) }}
+       onClick={()=>{
+         this.props.setMarkerFilter(this.props.type)
+       }}
       >
-        <Paper style={style} zDepth={5} circle ><img src={this.props.image} width='24px' /></Paper>
+        <Paper style={style} zDepth={5} circle ><img src={this.props.icon} width='24px' /></Paper>
         <div className='legend-tooltip'>{
           this.state && this.state.hover
             ? this.props.name

diff --git a/imports/ui/components/Legend/index.js b/imports/ui/components/Legend/index.js
@@ -6,24 +6,46 @@ export class Legend extends Component {
   prepareLegendElements = () => {
     const legendElements = getLegendElements(this.props.markerType)
     const legendElementComponents = legendElements.map((legendElement) => {
-      return <LegendElement key={legendElement.name} image={legendElement.icon} name={legendElement.name} />
+      return <LegendElement
+        {...legendElement}
+        key={legendElement.name}
+        dim={(this.props.markerFilter ? legendElement.type != this.props.markerFilter : false)}
+        setMarkerFilter={this.props.setMarkerFilter}
+      />
     })
     return insertBreaks(legendElementComponents)
   }
 
-  render () {
+  render() {
     return (
       <div id='legend'>
         <div id='legend-content'>
           {this.prepareLegendElements()}
-          <h5 className='legend-title'>Legenda</h5>
+          <h5
+            className='legend-title'
+            style={{
+              pointerEvents: 'all'
+            }}
+            onClick={() => {
+              this.props.setMarkerFilter(null)
+            }}
+          >
+            {this.props.markerFilter
+              ? <img src='/img/back.png' width='14px' />
+              : null
+            }
+            {this.props.markerFilter
+              ? 'Wróć'
+              : 'Legenda'
+            }
+          </h5>
         </div>
       </div>
     )
   }
 }
 
-function insertBreaks (legendElements) {
+function insertBreaks(legendElements) {
   if (legendElements.length < 3) {
     return legendElements
   }
@@ -32,7 +54,8 @@ function insertBreaks (legendElements) {
   legendElements.forEach((element, index) => {
     elementsWithBreaks.push(element)
     if (breakLines.includes(index)) {
-      elementsWithBreaks.push(<div style={{width: '100%', height: '0px', margin: '0px'}} key={Math.round(Math.random()*1000)}/>)
+      elementsWithBreaks.push(<div style={{width: '100%', height: '0px', margin: '0px'}}
+                                   key={Math.round(Math.random() * 1000)}/>)
     }
   })
   return elementsWithBreaks

diff --git a/imports/ui/components/common/Select.js b/imports/ui/components/common/Select.js
@@ -13,22 +13,34 @@ export default class Select extends React.Component {
     this.setState({selectedOption})
   }
 
-  render () {
-    const options = this.props.selectOptions.map((option, index) => {
-      return <MenuItem key={option._id || index} value={option._id} primaryText={option.name} />
-    })
+  sortAlpahebtically(a, b) {
+    if (a.name < b.name)
+      return -1;
+    if (a.name > b.name)
+      return 1;
+    return 0;
+  }
+
+  render() {
+    const options = this.props.selectOptions
+      .sort(this.sortAlpahebtically)
+      .map((option, index) => {
+        return <MenuItem key={option._id || index} value={option._id} primaryText={option.name}/>
+      })
     return (
       <SelectField
         value={this.state.selectedOption}
         floatingLabelText={this.props.floatingLabelText}
         onChange={this.handleOptionChange}
-        floatingLabelStyle={{color:
-orange500,
-        width: '500px'}}
+        floatingLabelStyle={{
+          color:
+          orange500,
+          width: '500px'
+        }}
         maxHeight={400}
         style={{width: '100%'}}
       >
-        { options }
+        {options}
       </SelectField>
 
     )