choteaumt
/
adopt-a-hydrant
mirror of https://github.com/choteaumt/adopt-a-hydrant.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add spinners to all AJAX requests and prevent accidental double-clicks

This commit is contained in:
Erik Michaels-Ober 2011-04-03 18:20:52 -07:00
parent b574170de4
commit d502b4693e
11 changed files with 474 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/controllers/addresses_controller.rb
View File

@ -1,12 +1,10 @@
class AddressesController < ApplicationController
respond_to :json
def show
@address = Address.find_lat_lng("#{params[:address]}, #{params[:city_state]}")
unless @address.blank?
respond_with @address
render(:json => @address)
else
render :json => {"errors" => {"address" => ["Could not find address."]}}
render(:json => {"errors" => {"address" => ["Could not find address."]}})
end
end
end

8
app/controllers/hydrants_controller.rb
View File

@ -3,15 +3,15 @@ class HydrantsController < ApplicationController
@hydrant = Hydrant.find_by_id(params[:hydrant_id])
if @hydrant.adopted?
if user_signed_in? && current_user.id == @hydrant.user_id
render(:partial => "users/thank_you")
render("users/thank_you", :layout => "info_window")
else
render(:partial => "users/profile")
render("users/profile", :layout => "info_window")
end
else
if user_signed_in?
render(:partial => "adopt")
render("adopt", :layout => "info_window")
else
render(:partial => "users/new")
render("users/new", :layout => "info_window")
end
end
end

4
app/controllers/passwords_controller.rb
View File

@ -1,10 +1,7 @@
class PasswordsController < Devise::PasswordsController
respond_to :json, :only => [:create, :update]
# POST /resource/password
def create
self.resource = resource_class.send_reset_password_instructions(params[resource_name])
if resource.errors.empty?
render(:json => {"success" => true})
else
@ -22,7 +19,6 @@ class PasswordsController < Devise::PasswordsController
# PUT /resource/password
def update
self.resource = resource_class.reset_password_by_token(params[resource_name])
if resource.errors.empty?
render(:json => {"success" => true})
else

6
app/controllers/users_controller.rb
View File

@ -1,12 +1,12 @@
class UsersController < Devise::RegistrationsController
def edit
render_with_scope :edit
render("edit", :layout => "info_window")
end
def update
if resource.update_with_password(params[resource_name])
sign_in resource_name, resource, :bypass => true
redirect_to :controller => "hydrants", :action => "show", :hydrant_id => params[:hydrant_id]
sign_in(resource_name, resource, :bypass => true)
redirect_to(:controller => "hydrants", :action => "show", :hydrant_id => params[:hydrant_id])
else
clean_up_passwords(resource)
render(:json => {"errors" => resource.errors})

2
app/views/hydrants/_adopt.html.erb → app/views/hydrants/adopt.html.erb
View File

@ -2,7 +2,7 @@
<h2>Adopt this Hydrant</h2>
<%= f.hidden_field "id" %>
<%= f.hidden_field "user_id", :value => current_user.id %>
<%= f.label "name", "Give your hydrant a name", :id => "hydrant_name_label" %>
<%= f.label "name", "Give this hydrant a name", :id => "hydrant_name_label" %>
<%= f.text_field "name", :tabindex => 1 %>
<%= f.submit "Adopt!", :tabindex => 2, :id => "adoption_form_submit" %>
<p>By adopting this hydrant, you agree to the <%= link_to "Terms of Service", "#", :tabindex => 3 %>.</p>

6
app/views/layouts/info_window.html.erb Normal file
View File

@ -0,0 +1,6 @@
<div id="loader" style="display: none;">
<img src="/images/ajax-loader.gif" />
</div>
<div id="info_window">
<%= yield %>
</div>

0
app/views/users/_new.html.erb → app/views/users/new.html.erb
View File

0
app/views/users/_profile.html.erb → app/views/users/profile.html.erb
View File

0
app/views/users/_thank_you.html.erb → app/views/users/thank_you.html.erb
View File

BIN
public/images/ajax-loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

248
public/javascripts/application.js
View File

@ -38,34 +38,48 @@ $(function() {
if(activeInfoWindow) {
activeInfoWindow.close();
}
$.get('/hydrant', {
'hydrant_id': hydrantId
}, function(data) {
var infoWindow = new google.maps.InfoWindow({
content: data,
maxWidth: 350
});
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
activeHydrantId = hydrantId;
activeMarker = marker;
activeInfoWindow = infoWindow;
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': hydrantId
},
success: function(data) {
// Prevent race condition, which could lead to multiple windows being open at the same time.
if(infoWindow == activeInfoWindow) {
infoWindow.setContent(data);
infoWindow.open(map, marker);
}
}
});
});
hydrantIds.push(hydrantId);
}
function addMarkersAround(lat, lng) {
$.get('/hydrants.json', {
$.ajax({
type: 'GET',
url: '/hydrants.json',
data: {
'commit': $('#address_submit').val(),
'utf8': '✓',
'authenticity_token': $('#address_form input[name="authenticity_token"]').val(),
'lat': lat,
'lng': lng
}, function(data) {
},
success: function(data) {
if(data.errors) {
$('#address_label').addClass('error', 500);
$('#address').addClass('error', 500);
$('#address').focus();
} else {
$('#address_label').removeClass('error', 500);
$('#address').removeClass('error', 500);
var northMost;
var eastMost;
var southMost;
@ -99,6 +113,7 @@ $(function() {
bounds = new google.maps.LatLngBounds(southWest, northEast);
map.fitBounds(bounds);
}
}
});
}
google.maps.event.addListener(map, 'dragend', function() {
@ -106,18 +121,30 @@ $(function() {
addMarkersAround(center.lat(), center.lng());
});
$('#address_form').submit(function() {
var submitButton = $("#address_form input[type='submit']");
$(submitButton).attr("disabled", true);
var submitButtonText = $(submitButton).attr("value");
$(submitButton).attr("value", "Please Wait...");
if($('#address').val() === '') {
$(submitButton).attr("disabled", false);
$(submitButton).attr("value", submitButtonText);
$('#address_label').addClass('error', 500);
$('#address').addClass('error', 500);
$('#address').focus();
} else {
$.get('/address.json', {
$.ajax({
type: 'GET',
url: '/address.json',
data: {
'commit': $('#address_submit').val(),
'utf8': '✓',
'authenticity_token': $('#address_form input[name="authenticity_token"]').val(),
'city_state': $('#city_state').val(),
'address': $('#address').val()
}, function(data) {
},
success: function(data) {
$(submitButton).attr("disabled", false);
$(submitButton).attr("value", submitButtonText);
if(data.errors) {
$('#address_label').addClass('error', 500);
$('#address').addClass('error', 500);
@ -125,6 +152,7 @@ $(function() {
} else {
addMarkersAround(data[0], data[1]);
}
}
});
}
return false;
@ -155,6 +183,8 @@ $(function() {
}
});
$('#combo_form').live('submit', function() {
var submitButton = $("#combo_form input[type='submit']");
$(submitButton).attr("disabled", true);
var errors = []
if(!/[\w\.%\+\]+@[\w\]+\.+[\w]{2,}/.test($('#user_email').val())) {
errors.push($('#user_email'));
@ -182,9 +212,13 @@ $(function() {
$('#user_password_confirmation').removeClass('error');
}
if(errors.length > 0) {
$(submitButton).attr("disabled", false);
errors[0].focus();
} else {
$.post('/users.json', {
$.ajax({
type: 'POST',
url: '/users.json',
data: {
'commit': $('#user_sign_up_submit').val(),
'utf8': '✓',
'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
@ -197,8 +231,16 @@ $(function() {
'password': $('#user_password_confirmation').val(),
'password_confirmation': $('#user_password_confirmation').val()
}
}, function(data) {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
if(data.errors) {
$('#loader').hide();
$('#info_window').show();
$(submitButton).attr("disabled", false);
if(data.errors.email) {
errors.push($('#user_email'));
$('#user_email_label').addClass('error', 500);
@ -231,12 +273,18 @@ $(function() {
}
errors[0].focus();
} else {
$.get('/hydrant', {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
}
});
}
}
});
}
} else if($(this).data('state') === 'user_sign_in') {
@ -249,9 +297,13 @@ $(function() {
$('#user_password').removeClass('error');
}
if(errors.length > 0) {
$(submitButton).attr("disabled", false);
errors[0].focus();
} else {
$.post('/users/sign_in.json', {
$.ajax({
type: 'POST',
url: '/users/sign_in.json',
data: {
'commit': $('#user_sign_in_submit').val(),
'utf8': '✓',
'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
@ -260,33 +312,59 @@ $(function() {
'password': $('#user_password').val(),
'remember_me': $('#user_remember_me').val()
}
}, function(data) {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
if(data.errors) {
$('#loader').hide();
$('#info_window').show();
$(submitButton).attr("disabled", false);
$('#user_password_label').addClass('error', 500);
$('#user_password').addClass('error', 500);
$('#user_password').focus();
} else {
$.get('/hydrant', {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
}
});
}
}
});
}
} else if($(this).data('state') === 'user_forgot_password') {
if(errors.length > 0) {
$(submitButton).attr("disabled", false);
errors[0].focus();
} else {
$.post('/users/password.json', {
$.ajax({
type: 'POST',
url: '/users/password.json',
data: {
'commit': $('#user_forgot_password_submit').val(),
'utf8': '✓',
'authenticity_token': $('#combo_form input[name="authenticity_token"]').val(),
'user': {
'email': $('#user_email').val()
}
}, function(data) {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function() {
if(data.errors) {
$('#loader').hide();
$('#info_window').show();
$(submitButton).attr("disabled", false);
$('#user_email_label').addClass('error', 500);
$('#user_email').addClass('error', 500);
$('#user_email').focus();
@ -294,27 +372,49 @@ $(function() {
$('#user_forgot_password_fields').slideUp();
$('#user_sign_in_fields').slideDown();
}
}
});
}
}
return false;
});
$('#sign_out_form').live('submit', function() {
$.get('/users/sign_out.json', {
var submitButton = $("#sign_out_form input[type='submit']");
$(submitButton).attr("disabled", true);
$.ajax({
type: 'GET',
url: '/users/sign_out.json',
data: {
'commit': $('#sign_out_form_submit').val(),
'utf8': '✓',
'authenticity_token': $('#sign_out_form input[name="authenticity_token"]').val()
}, function(data) {
$.get('/hydrant', {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
}
});
}
});
return false;
});
$('#adoption_form').live('submit', function() {
$.post('/hydrant', {
var submitButton = $("#adoption_form input[type='submit']");
$(submitButton).attr("disabled", true);
$.ajax({
type: 'POST',
url: '/hydrant',
data: {
'id': $('#hydrant_id').val(),
'commit': $('#adoption_form_submit').val(),
'utf8': '✓',
@ -324,10 +424,20 @@ $(function() {
'user_id': $('#hydrant_user_id').val(),
'name': $('#hydrant_name').val()
}
}, function(data) {
$.get('/hydrant', {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
activeInfoWindow.setContent(data);
image = new google.maps.MarkerImage('/images/markers/green.png',
new google.maps.Size(27.0, 37.0),
@ -336,14 +446,21 @@ $(function() {
);
activeMarker.setIcon(image);
activeMarker.setAnimation(google.maps.Animation.BOUNCE);
}
});
}
});
return false;
});
$('#abandon_form').live('submit', function() {
var answer = window.confirm("Are you sure you want to abandon this hydrant?")
if(answer) {
$.post('/hydrant', {
var submitButton = $("#abandon_form input[type='submit']");
$(submitButton).attr("disabled", true);
$.ajax({
type: 'POST',
url: '/hydrant',
data: {
'id': $('#hydrant_id').val(),
'commit': $('#abandon_form_submit').val(),
'utf8': '✓',
@ -353,10 +470,19 @@ $(function() {
'user_id': $('#hydrant_user_id').val(),
'name': $('#hydrant_name').val()
}
}, function(data) {
$.get('/hydrant', {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
image = new google.maps.MarkerImage('/images/markers/red.png',
new google.maps.Size(27.0, 37.0),
@ -365,7 +491,9 @@ $(function() {
);
activeMarker.setIcon(image);
activeMarker.setAnimation(null);
}
});
}
});
return false;
}
@ -373,7 +501,12 @@ $(function() {
$('#steal_form').live('submit', function() {
var answer = window.confirm("Are you sure you want to steal this hydrant?")
if(answer) {
$.post('/hydrant', {
var submitButton = $("#steal_form input[type='submit']");
$(submitButton).attr("disabled", true);
$.ajax({
type: 'POST',
url: '/hydrant',
data: {
'id': $('#hydrant_id').val(),
'commit': $('#steal_form_submit').val(),
'utf8': '✓',
@ -383,10 +516,19 @@ $(function() {
'user_id': $('#hydrant_user_id').val(),
'name': $('#hydrant_name').val()
}
}, function(data) {
$.get('/hydrant', {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
$.ajax({
type: 'GET',
url: '/hydrant',
data: {
'hydrant_id': activeHydrantId
}, function(data) {
},
success: function(data) {
activeInfoWindow.setContent(data);
image = new google.maps.MarkerImage('/images/markers/red.png',
new google.maps.Size(27.0, 37.0),
@ -395,22 +537,35 @@ $(function() {
);
activeMarker.setIcon(image);
activeMarker.setAnimation(null);
}
});
}
});
return false;
}
});
$('#edit_profile_form').live('submit', function() {
$.get('/users/edit', {
$.ajax({
type: 'GET',
url: '/users/edit',
data: {
'commit': $('#edit_profile_form_submit').val(),
'utf8': '✓',
'authenticity_token': $('#edit_profile_form input[name="authenticity_token"]').val()
}, function(data) {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
activeInfoWindow.setContent(data);
}
});
return false;
});
$('#edit_form').live('submit', function() {
var submitButton = $("#edit_form input[type='submit']");
$(submitButton).attr("disabled", true);
var errors = []
if(!/[\w\.%\+\]+@[\w\]+\.+[\w]{2,}/.test($('#user_email').val())) {
errors.push($('#user_email'));
@ -445,9 +600,13 @@ $(function() {
$('#user_current_password').removeClass('error');
}
if(errors.length > 0) {
$(submitButton).attr("disabled", false);
errors[0].focus();
} else {
$.post('/users.json', {
$.ajax({
type: 'POST',
url: '/users.json',
data: {
'id': $('#id').val(),
'hydrant_id': activeHydrantId,
'commit': $('#edit_form_submit').val(),
@ -464,8 +623,16 @@ $(function() {
'password_confirmation': $('#user_password').val(),
'current_password': $('#user_current_password').val()
}
}, function(data) {
},
beforeSend: function() {
$('#info_window').hide();
$('#loader').show();
},
success: function(data) {
if(data.errors) {
$('#loader').hide();
$('#info_window').show();
$(submitButton).attr("disabled", false);
if(data.errors.email) {
errors.push($('#user_email'));
$('#user_email_label').addClass('error', 500);
@ -505,6 +672,7 @@ $(function() {
} else {
activeInfoWindow.setContent(data);
}
}
});
}
return false;