Feature/parksearch

package.json

@@ -18,6 +18,7 @@
         "node-sass": "^4.12.0",
         "sass-loader": "^7.1.0",
         "vue": "^2.6.10",
+        "vue-autosuggest": "^1.8.3",
         "vue-browser-geolocation": "^1.8.0",
         "vue-router": "^3.0.7",
         "vue-spinners": "^1.0.2",

server/triffidsapi/api.py

@@ -26,7 +26,7 @@ def getAllParkNames():
     lng = request.args.get('lng') or 0
     rad = request.args.get('rad') or 1000
     page = request.args.get('page') or 1
-    
+
     if lat == 0 or lng == 0:
         response = parks.getAllParkNames(int(page))
     else:
@@ -36,6 +36,14 @@ def getAllParkNames():
     return jsonify(response)
 
 
+@api.route('/parks/list', methods=['GET'])
+def getParkListing():
+    response = parks.getParkList()
+    if not response:
+        abort(404)
+    return jsonify(response)
+
+
 @api.route('/parks/<string:parkCode>', methods=['GET'])
 def getPark(parkCode):
     response = parks.getPark(parkCode)

server/triffidsapi/parks.py

@@ -137,6 +137,28 @@ def getParkInfo(parkCode):
     return data
 
 
+def getParkList():
+    totalNumParks = str(getTotalNumParks())
+    flds = '&fields=site_code,site_name&rows=' + totalNumParks
+
+    response = requests.get(base_url + dataset + flds)
+    response = response.json()
+    parkNames = []
+    recs = response['records']
+    for index, record in enumerate(sorted(recs, key=lambda x: x['fields']['site_name'])):
+        parkData = record['fields']
+
+        parkNames.append({
+            'id': str(parkData['site_code']),
+            'siteName': str(parkData['site_name'])
+        })
+
+    if parkNames:
+        return parkNames
+    else:
+        return []
+
+
 def getTotalNumParks():
     response = requests.get(base_url + dataset + '&rows=0')
     response = response.json()

src/components/List.vue

@@ -1,11 +1,30 @@
 <template>
   <main class="list">
     <Header v-bind:title="'Parks'"/>
-    <Modal v-if="showModal" @close="showModal = false" @confirm="requestUsersLocation()">
-      <h3 slot="header">Get location</h3>
-      <p slot="body">Please allow this app to use your location to show you the nearest parks.</p>
-    </Modal>
-    <ul class="list__container">
+
+    <vue-autosuggest
+      v-if="doSearch"
+      :suggestions="filteredOptions"
+      :input-props="{id:'autosuggest__input', class: 'suggin', onInputChange: onSearchInputChange, placeholder:'Search for a park by name'}"
+      @selected="onSelected"
+      :get-suggestion-value="getSuggestionValue"
+    >
+      <template slot-scope="{suggestion}">
+        <div class="list__container">
+          <!-- <router-link :to="{path: getParkLink(suggestion.item.id)}" class="list-item"> -->
+          <a :href="getParkLink(suggestion.item.id)" class="list-item">
+            <div class="list-item__inner" :style="getParkPhoto(suggestion.item.id)">
+              <div class="list-item__details">
+                <h3 class="list-item__header">{{ suggestion.item.siteName }}</h3>
+              </div>
+            </div>
+          </a>
+          <!-- </router-link> -->
+        </div>
+      </template>
+    </vue-autosuggest>
+
+    <ul class="list__container" v-if="!doSearch">
       <li v-for="park in parks" v-bind:key="park.id">
         <router-link :to="{
             path: getParkLink(park.id),
@@ -27,19 +46,30 @@
       </span>
       <span v-if="maxDistReached">No more parks found!</span>
     </ul>
+
+    <Modal
+      v-if="showModal"
+      @close="showModal = false; doSearch = true"
+      @confirm="requestUsersLocation()"
+    >
+      <h3 slot="header">Get location</h3>
+      <p slot="body">Please allow this app to use your location to show you the nearest parks.</p>
+    </Modal>
   </main>
 </template>
 
 <script>
 import Header from "./Header.vue";
 import Modal from "./Modal.vue";
 import { parkService } from "../services/Park.service";
+import { VueAutosuggest } from "vue-autosuggest";
 
 export default {
   name: "list",
   components: {
     Header,
-    Modal
+    Modal,
+    VueAutosuggest
   },
   data: () => {
     return {
@@ -48,7 +78,10 @@ export default {
       page: 1,
       foundParksByLocation: false,
       maxDistReached: false,
-      showModal: false
+      showModal: false,
+      doSearch: false,
+      filteredOptions: [],
+      suggestions: null
     };
   },
   beforeMount() {
@@ -59,6 +92,7 @@ export default {
     }
   },
   mounted() {
+    this.getParkList();
     window.onscroll = () => {
       if (
         window.innerHeight + window.scrollY >= document.body.offsetHeight &&
@@ -72,6 +106,33 @@ export default {
     };
   },
   methods: {
+    async getParkList() {
+      this.suggestions = await parkService.parkList();
+    },
+    // eslint-disable-next-line
+    onSearchInputChange(text, oldText) {
+      if (text === null || text.length < 2) {
+        /* Maybe the text is null but you wanna do
+         *  something else, but don't filter by null.
+         */
+        return;
+      }
+      // Full customizability over filtering
+      const filteredData = this.suggestions.filter(option => {
+        return option.siteName.toLowerCase().indexOf(text.toLowerCase()) > -1;
+      });
+      // Store data in one property, and filtered in another
+      this.filteredOptions = [{ data: filteredData }];
+    },
+    onSelected(sel) {
+      this.$router.push(this.getParkLink(sel.item.id));
+    },
+    /**
+     * This is what the <input/> value is set to when you are selecting a suggestion.
+     */
+    getSuggestionValue(suggestion) {
+      return suggestion.item.siteName;
+    },
     getParkLink: parkId => `park/${parkId}`,
     async getParks() {
       if (this.$config.locationAllowed) {
@@ -128,6 +189,7 @@ export default {
     requestUsersLocation() {
       this.showModal = false;
       this.loading = true;
+      this.doSearch = false;
       this.$config.locationAllowed = true;
       this.parks = [];
       this.getParks();
@@ -136,8 +198,25 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<!-- scoped won't work here -->
+<style lang="scss">
 @import "../styles/variables.scss";
+// searchbox
+#autosuggest {
+  background: $primary-color;
+  #autosuggest__input {
+    width: 90%;
+    margin: 2%;
+  }
+}
+.autosuggest__results-container {
+  background: white;
+  padding-top: 20px;
+}
+.result_item {
+  border: 1px inset $dark-primary-color;
+  padding: 5px;
+}
 
 .list {
   background-color: $gray-super-light;

src/components/Tmap.vue

@@ -169,15 +169,15 @@ export default {
     this.mymap = L.map("mapid");
     this.mymap.on("load", this.mapLoaded); // order is important
     L.control.scale({ position: "topright" }).addTo(this.mymap);
-    const loc = L.control
-      .locate({
-        icon: "map-location-control",
-        iconLoading: "map-location-control-loading",
-        enableHighAccuracy: true
-      })
-      .addTo(this.mymap);
-    // loc.start(); // not needed except for linting.
-    // loc.stop(); // not needed except for linting.
+    if (this.$config.locationAllowed) {
+      L.control
+        .locate({
+          icon: "map-location-control",
+          iconLoading: "map-location-control-loading",
+          enableHighAccuracy: true
+        })
+        .addTo(this.mymap);
+    }
     this.mymap.setView(this.center, this.zoom);
 
     L.tileLayer(this.url, {

src/services/Park.service.js

@@ -5,7 +5,18 @@ export const parkService = {
     parks,
     park,
     nearestParks,
-    parkInfo
+    parkInfo,
+    parkList
+}
+
+function parkList() {
+    const url = `${Vue.config.API_URL}/parks/list`;
+    return http.get(url)
+        .then((resp) => {
+            return resp.data;
+        }, (err) => {
+            throw err;
+        });
 }
 
 /**