Updated results to include filters per #14

workspaces/backend/src/api.js

@@ -40,20 +40,62 @@ ApiRouter.get("/api/results", async (ctx) => {
 })
 
 ApiRouter.post("/api/mapResults", async (ctx) => {
-  const result = [];
-  const [north, east, south, west] = ctx.request.body.mapArea;
-  const poly = [[west, north], [east, north], [east, south], [west, south], [west, north]];
-  const cursor = await ctx.db.query(aql`
-    FOR listing IN arangobnb
-    SEARCH ANALYZER(GEO_CONTAINS(GEO_POLYGON(${poly}), listing.location), "geo")
-    LIMIT 20
-    RETURN listing
-    `);
-  for await (const c of cursor){
-    result.push(c);
-  }
-  sendResponse(ctx, result);
-})
+  try {
+
+    const result = [];
+    const body = ctx.request.body;
+    const [north, east, south, west] = body.mapArea;
+    const poly = [[west, north], [east, north], [east, south], [west, south], [west, north]];
+    const additionalCriteria = []
+
+    body.roomType ? 
+    (body.roomType.length ? additionalCriteria.push(aql`
+    AND 
+    ANALYZER(${body.roomType} ANY IN listing.room_type, "identity")
+    `) : ``) : ''
+
+    body.amenities ? 
+    (body.amenities.length ? additionalCriteria.push(aql`
+    AND
+    ANALYZER(${body.amenities} ALL IN listing.amenities, "identity")
+    `) : ``) : ''
+
+    body.priceRange ? 
+    ( body.priceRange.length ? additionalCriteria.push(aql`
+    AND
+    IN_RANGE(listing.price, ${body.priceRange[0]}, ${body.priceRange[1]}, true, true)
+    `) : ``) : ''
+
+
+    const cursor = await ctx.db.query(aql`
+    LET listings = (
+      FOR listing IN arangobnb
+      SEARCH ANALYZER(GEO_CONTAINS(GEO_POLYGON(${poly}), listing.location), "geo")
+      ${aql.join(additionalCriteria)}
+      SORT listing.number_of_reviews DESC, listing.review_scores_rating DESC
+      LIMIT 100
+      RETURN listing
+      )
+      
+      Let amenities = (
+        FOR doc in listings
+        FOR amenity in doc.amenities
+        COLLECT item = amenity with COUNT into c
+        SORT c DESC
+        LIMIT 100
+        RETURN item
+        )
+        
+        RETURN {listings, amenities}
+        `);
+        for await (const c of cursor){
+          result.push(c);
+        }
+        sendResponse(ctx, result);
+      } catch (e) {
+        sendResponse(e.message)
+      }
+      })
 
 ApiRouter.get("/api/filters", async (ctx) => {
   const result = [];

workspaces/frontend-vue/src/components/Filters.vue

@@ -0,0 +1,87 @@
+<template>
+<div>
+    <md-button>
+        <strong v-on:click="showHide">
+        Filter Results
+        </strong>
+    </md-button>
+        <md-card class="md-layout-item md-size-100 md-small-size-100" v-if="showFilters">
+            <md-card-content>
+            <h3>Room Types</h3>
+            <md-checkbox 
+            v-for="room in roomTypes" 
+            :key="room" 
+            v-model="filters.roomType" 
+            v-bind:value="room" 
+            @change="updateFilters"> 
+            {{room}}
+            </md-checkbox>
+            </md-card-content>
+    <md-card-content>
+        <h3>Amenities</h3>
+        <div>
+            <md-checkbox  
+            v-for="amenity in currentAmenities.slice(0,10)" 
+            :key="amenity" 
+            v-model="filters.amenities" 
+            v-bind:value="amenity"
+            @change="updateFilters">
+            {{amenity}}
+            </md-checkbox>
+        </div>
+    </md-card-content>
+    <md-card-content>
+        <h3>Pricing</h3>
+        <div>
+            <label for="fname">Set Max Price</label>
+            <input 
+            type="range" 
+            min="0" 
+            max="1000" 
+            step="1" 
+            v-model.number="maxPrice"
+            @change="updateFilters"> 
+            ${{ maxPrice }}
+        </div>
+    </md-card-content>
+    </md-card>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+name: "Filters",
+data: () => ({
+showFilters: false,
+filters: {"roomType":[], "amenities": [], "priceRange": []},
+roomTypes: [
+  "Entire home/apt",
+  "Private room",
+  "Shared room",
+  "Hotel room"
+],
+maxPrice: 1000
+}),
+computed:
+mapState({
+    currentAmenities: state => state.map.currentAmenities,
+}),
+methods: {
+showHide: function() {
+    this.showFilters = !this.showFilters;
+    },
+updateFilters: function() {
+    this.filters.priceRange = [0, this.maxPrice]    
+    this.$store.dispatch("map/setFilters", this.filters);
+}
+}
+}
+</script>
+
+<style lang="scss" scoped>
+  .md-checkbox {
+    display: inline-flex;
+  }
+</style>

workspaces/frontend-vue/src/components/LogEvents.vue

@@ -0,0 +1,22 @@
+<template>
+<div>
+    <md-button>
+        <strong v-on:click="showHide">
+        {{ showEvents ? "Hide" : "Show" }} log events:
+        </strong>
+    </md-button>
+    <transition name="fade" v-if=showEvents>
+        <pre>{{moveEvents.join('\n')}}</pre>
+    </transition>
+</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

workspaces/frontend-vue/src/components/Map.vue

@@ -25,6 +25,7 @@ export default {
   mapState({
     listings: state => state.map.listings,
     mapPosition: state => state.map.mapPosition,
+    filters: state => state.map.filters
   }),
   watch: {
     mapPosition: function() {
@@ -36,7 +37,10 @@ export default {
       this.showEvents = !this.showEvents;
     },
     logEvent: function (type, text) {
-      this.$store.commit("map/setEvents", { type, text });
+      // Logs move events that the Log Event component relies on
+      // leaving for use in tech component
+      // TODO: Add tech component
+      this.$store.commit("map/setEvents", { type, text }); 
     },
     getCardinalDirectionsFromBounds: function (bounds) {
       return [
@@ -70,7 +74,7 @@ export default {
       function addMarkers(listings) {
         const arangoIcon = new mapIcon({ iconUrl: mapMarker });
 
-        if (markersKeys.length >= 100) {
+        if (markersKeys.length >= 200) {
           markerLayer.clearLayers(); // Would be nice to only clear "old" markers
           markersKeys = [];
         }
@@ -123,8 +127,6 @@ export default {
       });
 
       mymap.on("movestart", (e) => {
-        console.log(L.marker)
-
         const bounds = e.target.getBounds();
 
         const boundsString = [

workspaces/frontend-vue/src/components/ResultsInfo.vue

@@ -1,13 +1,6 @@
 <template>
   <div class="md-layout-item md-scrollbar resultsContainer">
-    <md-button>
-        <strong v-on:click="showHide">
-        {{ showEvents ? "Hide" : "Show" }} log events:
-        </strong>
-      </md-button>
-    <transition name="fade" v-if=showEvents>
-      <pre>{{moveEvents.join('\n')}}</pre>
-    </transition>
+    <Filters />
     <listingsCard class="resultCard" v-for="listing in listings" :key="listing._key" v-bind:listing=listing />
   </div>
 
@@ -16,11 +9,13 @@
 <script>
 import { mapState } from 'vuex'
 import listingsCard from './listingsCard'
+import Filters from './Filters'
 
 export default {
   name: "ResultsInfo",
   components: {
-    listingsCard
+    listingsCard,
+    Filters
   },
   data: () => ({
     showEvents: true,

workspaces/frontend-vue/src/store/modules/map.js

@@ -7,11 +7,14 @@ const API = process.env.VUE_APP_API_ENDPOINT
 export const state = () => ({
   moveEvents: [],
   //default map area
-  mapArea: [[13.3733650830416,52.513472114606735],[13.380215444865636,52.513472114606735],[13.387065806689671,52.513472114606735],[13.387065806689671,52.51550916176831],[13.387065806689671,52.51754620892988],[13.380215444865636,52.51754620892988],[13.3733650830416,52.51754620892988],[13.3733650830416,52.51550916176831],[13.3733650830416,52.513472114606735]],
+  mapArea: [52.52038609931014, 13.387355804443361, 52.51223805957966, 13.373665809631348],
   listings: [],
   markers:[],
   mapPosition: {},
-  filters: []
+  currentAmenities: [],
+  amenities: [],
+  roomType: [],
+  priceRange: []
 });
 
 // getters
@@ -33,8 +36,14 @@ const actions = {
   getResults: async ({commit, state}, payload) => {
     payload ? (
       payload.mapArea ? await commit('setMapArea', payload.mapArea) : console.log('no mapArea')) : console.log('no payload')
+
 
-    let data = JSON.stringify({"mapArea": state.mapArea});
+    let data = JSON.stringify({
+      mapArea: state.mapArea,
+      amenities: state.amenities,
+      roomType: state.roomType,
+      priceRange: state.priceRange      
+    });
 
     let config = {
       method: 'post',
@@ -46,8 +55,11 @@ const actions = {
     };
     await axios(config)
     .then( (response) => {
-      commit("setResults", { listings: response.data });
+      let data = response.data[0]
+
+      commit("setResults", data);
       commit("setMarkers");
+      commit("setAmenities", data);
     })
   },
   setDestination: ({commit}, payload) => {
@@ -57,16 +69,12 @@ const actions = {
       console.log(e)
     }
   },
-  getFilters: ({commit}) => {
-    let config = {
-      method: 'get',
-      url: API + '/api/filters'
-    };
-    axios(config)
-    .then( (response) => {
-      console.log(response.data)
-      commit("setFilters", { filters: response.data });
-    })    
+  setFilters: ({commit, dispatch}, payload) => {
+    payload.roomType ? commit("setSelectedRoomTypes", payload) : ''
+    payload.amenities ? commit("setSelectedAmmenities", payload) : ''
+    payload.priceRange ? commit("setSelectedPriceRange", payload) : ''
+    dispatch("getResults")
+
   }
 };
 
@@ -98,13 +106,34 @@ const mutations = {
       console.log(e);
     }
   },
-  setFilters(state, filters) {
+  setAmenities(state, payload) {
     try {
-      Vue.set(state, 'filters', filters);
+      Vue.set(state, 'currentAmenities', payload.amenities);
     } catch(e) {
       console.log(e);
     }
-  }
+  },
+  setSelectedRoomTypes(state, payload) {
+    try {
+      Vue.set(state, 'roomType', payload.roomType)
+    } catch(e) {
+      console.log(e)
+    }
+  },
+  setSelectedAmmenities(state, payload) {
+    try {
+      Vue.set(state, 'amenities', payload.amenities)
+    } catch(e) {
+      console.log(e)
+    }
+  },
+  setSelectedPriceRange(state, payload) {
+    try {
+      Vue.set(state, 'priceRange', payload.priceRange)
+    } catch(e) {
+      console.log(e)
+    }
+  }  
 };