Latest frontend changes

EthanZeigler · Mar 1, 2020 · ac8537d · ac8537d
1 parent 28d01fb
commit ac8537d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/app/javascript/app/views/home/Index.vue b/app/javascript/app/views/home/Index.vue
@@ -18,6 +18,23 @@
                         <a href="/user/sign_in">Log in</a> to create a location.
                     </span>
                 </p>
+
+                <div class="row">
+                    <div class="col-md-4 pr-0">
+                        <select class="custom-select">
+                            <option value="">All Markers</option>
+                            <option>Bathrooms</option>
+                            <option>Accessible Entrances</option>
+                        </select>
+                    </div>
+                    <div class="col-md-8">
+                        <div class="d-flex mb-4">
+                            <b-form-input v-model="searchTerm" class="mr-2 flex-1" placeholder="Search..."></b-form-input>
+                            <button type="button" class="btn btn-primary" @click.prevent="loadData()"><i class="fas fa-search fa-fw"></i></button>
+                        </div>
+                    </div>
+                </div>
+
                 <div v-if="data.length < 1">
                     There are no locations to display.
                 </div>
@@ -40,6 +57,8 @@
 
 <script>
     import HomeMap from './components/HomeMap';
+
+    let _timer;
     export default {
         components: {
             HomeMap
@@ -48,19 +67,30 @@
             return {
                 loading: true,
                 data: [],
-                loggedIn: this.isUserLoggedIn()
+                loggedIn: this.isUserLoggedIn(),
+                searchTerm: ''
             }
         },
         mounted() {
-            console.log("fetching");
-            fetch('/locations.json')
-                .then((response) => {
-                    return response.json();
-                })
-                .then((data) => {
-                    this.data = data;
-                    this.loading = false;
-                });
+            this.loadData();
+        },
+        methods: {
+            loadData() {
+                clearTimeout(_timer);
+                fetch('/locations.json?search_term=' + encodeURIComponent(this.searchTerm))
+                    .then((response) => {
+                        return response.json();
+                    })
+                    .then((data) => {
+                        this.data = data;
+                        this.loading = false;
+                    });
+            }
+        },
+        watch: {
+            searchTerm() {
+                _timer = setTimeout(() => this.loadData(), 500);
+            }
         }
     }
 </script>
diff --git a/app/javascript/app/views/location/Index.vue b/app/javascript/app/views/location/Index.vue
@@ -13,12 +13,15 @@
                 <p v-else>Log in to add markers to the map.</p>
 
                 <div v-if="!editing">
-                    <p v-for="mark in marks" :key="'mark-loc-' + location.id + '-' + mark.id">
-                        <a href="#" @click.prevent="showPopup(mark)">
-                            [{{ getMarkType(mark) }}]
-                            {{ mark.name }}
-                        </a>
-                    </p>
+                    <ul class="pl-4" v-if="marks.length > 0">
+                        <li v-for="mark in marks" :key="'mark-loc-' + location.id + '-' + mark.id">
+                            <a href="#" @click.prevent="showPopup(mark)">
+                                [{{ getMarkType(mark) }}]
+                                {{ mark.name }}
+                            </a>
+                        </li>
+                    </ul>
+                    <p v-else>There are no markers to display.</p>
                 </div>
             </div>
         </div>
@@ -201,8 +204,8 @@
                     mark: {
                         name: this.createState.name,
                         description: this.createState.description,
-                        lat: this.lat,
-                        long: this.lon,
+                        lat: this.coordinates[1],
+                        long: this.coordinates[0],
                         location_id: parseInt(this.id),
                         mark_type_id: this.createState.markTypeId
                     }
@@ -368,6 +371,7 @@
 
                             this._content.innerHTML = `<strong>Name: </strong> ${this.escape(mark.name)}<br><strong>Type: </strong>${this.escape(this.getMarkType(mark))}`;
                             this._overlay.setPosition(event.coordinate);
+                            map.setCenter(fromLonLat([mark.long, mark.lat]));
                         } else {
                             this._overlay.setPosition(undefined);
                             closer.blur();

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -54,10 +54,10 @@
           <%# Make sure to include the css class as shown in the login example %>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
             <%# The rails administration panel link %>
-            <% if Rails.env.development? %><%= link_to 'Rails Admin', rails_admin_path, class: "dropdown-item" %><% end %>
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
+            <% if Rails.env.development? %>
+              <%= link_to 'Rails Admin', rails_admin_path, class: "dropdown-item" %>
+              <div class="dropdown-divider"></div>
+            <% end %>
             <%# Devise requires that the logout command be sent using the 'delete' HTTP verb (method) %>
             <%= link_to "Logout", destroy_user_session_path, class: "dropdown-item", method: :delete %>
           </div>