app/views/dogs/index.html.erb
<% content_for :page_title, "Browse Dogs" %>
<!-- THE BROWSE DOGS VIEW ON DESKTOP -->
<!--<div class="browse-dogs-container hide-on-med-and-down">-->
<!-- <div class="filters-container">-->
<!-- <div class="filter-title-container">-->
<!-- <h4 id="filter_title">Filter Dogs</h4>-->
<!-- </div>-->
<!-- <%= form_tag({controller: :dogs, action: :index}, method: :get, :multipart => true) do %>-->
<!-- <div class="input-container">-->
<!-- <div id="distance" class="filter">-->
<!-- <label for="distance">Distance (miles)</label>-->
<!-- <%= number_field_tag(:radius, @form_filler.values[:radius], :max => 10000) %>-->
<!-- </div>-->
<!-- <div id="zipcode" class="filter">-->
<!-- <label for="zipcode">Zipcode</label>-->
<!-- <%= number_field_tag(:zipcode, @form_filler.values[:zipcode], :max => 9999999)%>-->
<!-- </div>-->
<!-- <div id="size" class="input-field filter">-->
<!-- <% size_options = options_from_collection_for_select(Size.all, 'value', 'value', @form_filler.values[:size]) %>-->
<!-- <%= select_tag(:size, size_options, {:include_blank => "All", :multiple => true})%>-->
<!-- <label for="size">Size</label>-->
<!-- </div>-->
<!-- <div id="likes" class="input-field filter">-->
<!-- <% like_options = options_from_collection_for_select(Like.all, 'value', 'value', @form_filler.values[:like]) %>-->
<!-- <%= select_tag(:like, like_options, {:include_blank => "All", :multiple => true}) %>-->
<!-- <label for="likes">Likes</label>-->
<!-- </div>-->
<!-- <div id="age" class="input-field filter">-->
<!-- <% age_options = options_for_select(Dog.age_ranges, @form_filler.values[:age]) %>-->
<!-- <%= select_tag(:age, age_options, {:include_blank => "All", :multiple => true}) %>-->
<!-- <label for="age">Age</label>-->
<!-- </div>-->
<!-- <div id="gender" class="input-field filter">-->
<!-- <% gender_options = options_for_select(Dog.genders, @form_filler.values[:gender]) %>-->
<!-- <%= select_tag(:gender, gender_options, {:include_blank => "All", :multiple => true}) %>-->
<!-- <label for="gender">Gender</label>-->
<!-- </div>-->
<!-- <div id="mixes" class="input-field filter">-->
<!-- <% mix_options = options_from_collection_for_select(Mix.all, 'value', 'value', @form_filler.values[:mix]) %>-->
<!-- <%= select_tag(:mix, mix_options, {:include_blank => "Mutt / Other", :multiple => true}) %> <label for="mixes">Mix</label>-->
<!-- </div>-->
<!-- <div id="personalities" class="input-field filter">-->
<!-- <% personality_options = options_from_collection_for_select(Personality.all, 'value', 'value', @form_filler.values[:personality]) %>-->
<!-- <%= select_tag(:personality, personality_options, {:include_blank => "All", :multiple => true}) %>-->
<!-- <label for="personality">Personality</label>-->
<!-- </label>-->
<!-- </div>-->
<!-- <div id="energy_level" class="input-field filter">-->
<!-- <% energy_level_options = options_from_collection_for_select(EnergyLevel.all, 'value', 'value', @form_filler.values[:energy_level]) %>-->
<!-- <%= select_tag(:energy_level, energy_level_options, {:include_blank => "All", :multiple => true}) %>-->
<!-- <label for="energy_level">Energy Level</label>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="button-container">-->
<!-- <input id='dog_search_submit' type="submit" value="Search Dogs" name="dog_search_submit" class="btn green accent-4 s br-15" />-->
<!-- </div>-->
<!-- <% end %>-->
<!-- </div>-->
<!--<span id="zipcodes" data-zipcodes="<%= @zipcodes %>"/>-->
<!--<span id="counts" data-counts="<%= @counts %>"/>-->
<!-- <div class="dog-cards-container">-->
<!-- <% if @no_dogs then %>-->
<!-- <div class="row center-align valign-wrapper no-dogs-message-container">-->
<!-- <div class="col l12 m12 s12 valign no-dogs-message">-->
<!-- No Dogs Found <br>-->
<!-- </div>-->
<!-- </div>-->
<!-- <% else %>-->
<!-- <% @dogs.each do |dog| %>-->
<!-- <%= render "dog_card", :dog => dog, :card_size => "card-grid-size" %>-->
<!-- <% end %>-->
<!-- <% end %>-->
<!-- </div>-->
<!--</div>-->
<!-- THE BROWSE DOGS VIEW ON TABLET AND MOBILE -->
<div id="filters-slide-out" class="side-nav">
<%= form_tag({controller: :dogs, action: :index}, method: :get, :multipart => true) do %>
<div class="input-container">
<div id="distance" class="filter">
<label for="distance">Distance (miles)</label>
<%= text_field_tag(:radius, @form_filler.values[:radius], :placeholder => "10 miles", :size => 10) %>
</div>
<div id="zipcode" class="filter">
<label for="zipcode">Zipcode</label>
<%= text_field_tag(:zipcode, @form_filler.values[:zipcode], :placeholder => "94704", :size => 10 )%>
</div>
<div id="size" class="input-field filter">
<% size_options = options_from_collection_for_select(Size.all, 'value', 'value', @form_filler.values[:size]) %>
<%= select_tag(:size, size_options, {:include_blank => "All", :multiple => true})%>
<label for="size">Size</label>
</div>
<div id="likes" class="input-field filter">
<% like_options = options_from_collection_for_select(Like.all, 'value', 'value', @form_filler.values[:like]) %>
<%= select_tag(:like, like_options, {:include_blank => "All", :multiple => true}) %>
<label for="likes">Likes</label>
</div>
<div id="age" class="input-field filter">
<% age_options = options_for_select(Dog.age_ranges, @form_filler.values[:age]) %>
<%= select_tag(:age, age_options, {:include_blank => "All", :multiple => true}) %>
<label for="age">Age</label>
</div>
<div id="gender" class="input-field filter">
<% gender_options = options_for_select(Dog.genders, @form_filler.values[:gender]) %>
<%= select_tag(:gender, gender_options, {:include_blank => "All", :multiple => true}) %>
<label for="gender">Gender</label>
</div>
<div id="mixes" class="input-field filter">
<% mix_options = options_from_collection_for_select(Mix.all, 'value', 'value', @form_filler.values[:mix]) %>
<%= select_tag(:mix, mix_options, {:include_blank => "Mutt / Other", :multiple => true}) %> <label for="mixes">Mix</label>
</div>
<div id="personalities" class="input-field filter">
<% personality_options = options_from_collection_for_select(Personality.all, 'value', 'value', @form_filler.values[:personality]) %>
<%= select_tag(:personality, personality_options, {:include_blank => "All", :multiple => true}) %>
<label for="personality">Personality</label>
</label>
</div>
<div id="energy_level" class="input-field filter">
<% energy_level_options = options_from_collection_for_select(EnergyLevel.all, 'value', 'value', @form_filler.values[:energy_level]) %>
<%= select_tag(:energy_level, energy_level_options, {:include_blank => "All", :multiple => true}) %>
<label for="energy_level">Energy Level</label>
</div>
</div>
<div class="button-container">
<input id='dog_search_submit' type="submit" value="Search Dogs" name="dog_search_submit" class="btn green accent-4 s br-15" />
</div>
<% end %>
</div>
<div >
<div class="row">
<a href="#" data-activates="filters-slide-out" class="btn filters-button-collapse green accent-4">Add Filters</a>
</div>
<% if @no_dogs then %>
<div class="row center-align valign-wrapper no-dogs-message-container">
<div class="col l12 m12 s12 valign no-dogs-message">
No Dogs Found <br>
</div>
</div>
<% else %>
<div class="row container main-content">
<% @dogs.each do |dog| %>
<%= render "dogs/dog_card", :dog => dog, :card_size => "col s12 m6 l4" %>
<% end %>
</div>
<% end %>
</div>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvpxxyVWimCzY6WLJTY8iYGUUkVy6q7bA">
</script>
<script>
$(document).ready(function(){
$('.ui.sticky')
.sticky({
offset: 50,
context: '#dog_search_results'
});
$('select.dropdown').dropdown();
var geocoder;
var map;
var query = $('#zipcodes').data('zipcodes');
var counts = $('#counts').data('counts');
var query = ['2523 Ridge Road, Berkeley, CA', 'Berkeley'];
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 8,
streetViewControl: false,
zoomControl: true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
codeAddress(counts, bounds);
}
function codeAddress(counts, bounds) {
var address = query;
var visited = [];
for (i = 0; i < address.length; i++) {
if ($.inArray(address[i], visited) == -1) {
visited.push(address[i]);
geocoder.geocode( { 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var current = results[0].address_components[0].long_name;
var marker = new google.maps.Marker({
map: map,
icon: "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+counts[current]+"%7CFE6256%7C000000",
url: '#' + current,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
$('body').animate({scrollTop: $(marker.url).offset().top - 50}, 'slow');
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
}
});
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>