Permalink
Browse files

Unify js api. Filter and check all controll on currenies page

  • Loading branch information...
ignar committed Oct 23, 2012
1 parent fe53929 commit 704ecef838be3400a72463184ceea9176b76f690
@@ -20,7 +20,7 @@
<input type="button" value="Check/Uncheck All" id="select-all-controll" data-action="check" disabled="disabled" />
</div>
- <table id="countries">
+ <table id="collection">
<thead>
<tr>
<th>Visited</th>
@@ -33,7 +33,7 @@
<tbody>
<% @countries.each do |country| %>
- <tr id="country_record_<%= country.code %>">
+ <tr id="record_<%= country.code %>">
<td><%= check_box_tag("country[]", country.code, current_user.visited?(country),
:id => "country_#{country.code}",
:"data-code" => country.code,
@@ -13,26 +13,36 @@
<h1>Currencies</h1>
- <table id="currencies">
- <tr>
- <th></th>
- <th>Name</th>
- <th>Code</th>
- <th>Status</th>
- <th></th>
- </tr>
+ <div class="filter">
+ <label for="name-filter">Name</label>
+ <input id="name-filter" name="name" type="text" />
+ <input type="button" value="Check/Uncheck All" id="select-all-controll" data-action="check" disabled="disabled" />
+ </div>
+
+ <table id="collection">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Name</th>
+ <th>Code</th>
+ <th>Status</th>
+ <th></th>
+ </tr>
+ </thead>
- <% @currencies.each do |currency| %>
- <tr id="currency_record_<%= currency.code %>">
- <td><%= check_box_tag("currency[]", currency.code, current_user.collect?(currency),
- :id => "currency_#{currency.code}",
- :"data-code" => currency.code,
- :"data-url" => collect_currency_path(currency)) %></td>
- <td><%= currency.name %></td>
- <td><%= currency.code %></td>
- <td class="status"><%= current_user.collect?(currency) ? 'Collected' : 'Not Collected' %></td>
- <td><%= link_to 'Show', currency %></td>
- </tr>
- <% end %>
+ <tbody>
+ <% @currencies.each do |currency| %>
+ <tr id="record_<%= currency.code %>">
+ <td><%= check_box_tag("currency[]", currency.code, current_user.collect?(currency),
+ :id => "currency_#{currency.code}",
+ :"data-code" => currency.code,
+ :"data-url" => collect_currency_path(currency)) %></td>
+ <td class="name"><%= currency.name %></td>
+ <td class="code"><%= currency.code %></td>
+ <td class="status"><%= current_user.collect?(currency) ? 'Collected' : 'Not Collected' %></td>
+ <td><%= link_to 'Show', currency %></td>
+ </tr>
+ <% end %>
+ </tbody>
</table>
</section>
@@ -27,6 +27,6 @@
<footer>
CurrencyTracker &copy; Copyright 2011 by Smart Enterprises.
</footer>
-<%= javascript_include_tag 'extensions', 'jquery-1.8.2.min', 'view_controller', 'simple_pie_chart', "rails.js", "countries", "currencies" %>
+<%= javascript_include_tag 'extensions', 'jquery-1.8.2.min', 'view_controller', 'simple_pie_chart', "rails.js", "countries", "currencies", 'update_elements' %>
</body>
</html>
View
@@ -105,3 +105,5 @@ Clock summary at [2012-10-23 Tue 16:05]
CLOSED: [2012-10-23 Tue 16:01]
CLOCK: [2012-10-23 Tue 15:41]--[2012-10-23 Tue 16:01] => 0:20
CLOCK: [2012-10-23 Tue 14:55]--[2012-10-23 Tue 15:39] => 0:44
+* TODO Filter on currencies page
+ CLOCK: [2012-10-23 Tue 16:07]
@@ -22,26 +22,26 @@
When /^I check country as visited$/ do
visit countries_path
@code = "c1"
- within("table#countries") do
+ within("table#collection") do
find(:xpath, "//input[@type='checkbox' and @id='country_#{@code}']").set(true)
end
end
Then /^status of country should change to "Visited"$/ do
- find(:xpath, "//tr[@id='country_record_#{@code}']//td[@class='status']").should have_content("Visited")
+ find(:xpath, "//tr[@id='record_#{@code}']//td[@class='status']").should have_content("Visited")
end
When /^I check country as not visited$/ do
@country = Country.first
@user.countries << @country
visit countries_path
- within("table#countries") do
+ within("table#collection") do
find(:xpath, "//input[@type='checkbox' and @id='country_#{@country.code}']").set(false)
end
end
Then /^status of country should change to "Not Visited"$/ do
- find(:xpath, "//tr[@id='country_record_#{@country.code}']//td[@class='status']").should have_content("Not Visited")
+ find(:xpath, "//tr[@id='record_#{@country.code}']//td[@class='status']").should have_content("Not Visited")
end
When /^I open country detials page$/ do
@@ -23,24 +23,24 @@
When /^I mark one the currencies as collected$/ do
visit currencies_path
@code = @currency1.code
- within("table#currencies") do
+ within("table#collection") do
find(:xpath, "//input[@type='checkbox' and @id='currency_#{@code}']").set(true)
end
end
Then /^its status changed to "Collected"$/ do
- find(:xpath, "//tr[@id='currency_record_#{@code}']//td[@class='status']").text.should eq("Collected")
+ find(:xpath, "//tr[@id='record_#{@code}']//td[@class='status']").text.should eq("Collected")
end
When /^I mark one the currencies as not collected$/ do
@user.currencies << @currency1
visit currencies_path
@code = @currency1.code
- within("table#currencies") do
+ within("table#collection") do
find(:xpath, "//input[@type='checkbox' and @id='currency_#{@code}']").set(false)
end
end
Then /^its status changed to "Not Collected"$/ do
- find(:xpath, "//tr[@id='currency_record_#{@code}']//td[@class='status']").text.should eq("Not Collected")
+ find(:xpath, "//tr[@id='record_#{@code}']//td[@class='status']").text.should eq("Not Collected")
end
@@ -1,83 +1,10 @@
-;$(function(){
- var update_countries_collection = function(collection){
- if(collection.length == 0) return;
- var checkbox = $(collection.shift());
- $.ajax({
- url: $(checkbox).data("url")
- , dataType: "json"
- , beforeSend: function(jq, settings){
- checkbox.attr("disabled", true);
- }
- , success: function(data, status, jq){
- tr = table.find("tr#country_record_"+checkbox.data("code"));
- tr.find("td.status").html(data.status);
- }
- , error: function(jq, status, error){
- alert(error);
- }
- , complete: function(jq, status){
- checkbox.attr("disabled", false);
- var data = jQuery.parseJSON(jq.responseText);
- $('.simple_pie_chart').each(function() {
- chart = SimplePieChart.initialize(this);
- chart.sets = {
- "Visited": data["Visited"],
- "Not Visited": data["Not Visited"]
- };
- chart.render();
- });
- update_countries_collection(collection);
- }
- });
- };
-
- var table = $("table#countries");
- table.find("input[type='checkbox']").on("change", function(e){
- var checkbox = $(e.currentTarget);
- update_countries_collection([checkbox]);
+var update_chart = function(data){
+ $('.simple_pie_chart').each(function() {
+ chart = SimplePieChart.initialize(this);
+ chart.sets = {
+ "Visited": data["Visited"],
+ "Not Visited": data["Not Visited"]
+ };
+ chart.render();
});
-
- var check_controll = $("#select-all-controll");
- var filter = $("#name-filter");
- var filter_updated_callback = function(e){
- var target = $(e.currentTarget);
- if(target.val().length >= 1) {
- // reset check all button to initial state
- check_controll.attr("disabled", false);
- check_controll.data("action", "check");
- check_controll.val("Check All");
- table.find("tbody tr").each(function(ind, elem){
- var el = $(elem);
- var pattern = new RegExp("^"+target.val(), "i");
- if(pattern.test($(elem).find("td.name").html())){
- el.removeClass("hidden");
- } else {
- el.addClass("hidden");
- }
- });
- } else if(target.val().length == 0) {
- check_controll.attr("disabled", true);
- table.find("tbody tr").removeClass("hidden");
- }
- };
- filter.on("change", filter_updated_callback);
- filter.on("keyup", filter_updated_callback);
-
- check_controll.on("click", function(e){
- e.preventDefault();
- var el = $(e.currentTarget);
- action = el.data("action");
- if(action === "check") {
- el.val("Uncheck All");
- el.data("action", "uncheck")
- chk = true
- } else {
- el.val("Check All");
- el.data("action", "check")
- chk = false;
- }
- var checkboxes = table.find("tbody tr:visible input[type='checkbox']")
- checkboxes.attr("checked", chk);
- update_countries_collection($.makeArray(checkboxes));
- });
-});
+};
@@ -1,32 +1,10 @@
-;$(function(){
- var table = $("table#currencies");
- table.find("input[type='checkbox']").on("change", function(e){
- var checkbox = $(e.currentTarget);
- $.ajax({
- url: $(checkbox).data("url")
- , dataType: "json"
- , beforeSend: function(jq, settings){
- checkbox.attr("disabled", true);
- }
- , success: function(data, status, jq){
- tr = table.find("tr#currency_record_"+checkbox.data("code"));
- tr.find("td.status").html(data.status);
- }
- , error: function(jq, status, error){
- alert(error);
- }
- , complete: function(jq, status){
- checkbox.attr("disabled", false);
- var data = jQuery.parseJSON(jq.responseText);
- $('.simple_pie_chart').each(function() {
- chart = SimplePieChart.initialize(this);
- chart.sets = {
- "Collected": data["Collected"],
- "Not Collected": data["Not Collected"]
- };
- chart.render();
- });
- }
- });
+var update_chart = function(data){
+ $('.simple_pie_chart').each(function() {
+ chart = SimplePieChart.initialize(this);
+ chart.sets = {
+ "Collected": data["Collected"],
+ "Not Collected": data["Not Collected"]
+ };
+ chart.render();
});
-});
+};
@@ -0,0 +1,80 @@
+var update_collection = function(table, collection, complete_callback){
+ if(collection.length == 0) return;
+ var checkbox = $(collection.shift());
+ $.ajax({
+ url: $(checkbox).data("url")
+ , dataType: "json"
+ , beforeSend: function(jq, settings){
+ checkbox.attr("disabled", true);
+ }
+ , success: function(data, status, jq){
+ tr = table.find("tr#record_"+checkbox.data("code"));
+ tr.find("td.status").html(data.status);
+ }
+ , error: function(jq, status, error){
+ alert(error);
+ }
+ , complete: function(jq, status){
+ checkbox.attr("disabled", false);
+ var data = jQuery.parseJSON(jq.responseText);
+ if(typeof complete_callback === 'function'){
+ complete_callback.call(table, data);
+ }
+ update_collection(table, collection, complete_callback);
+ }
+ });
+};
+
+var table = $("table#collection");
+table.find("input[type='checkbox']").on("change", function(e){
+ var checkbox = $(e.currentTarget);
+ update_collection(table, [checkbox], update_chart);
+});
+
+
+var check_controll = $("#select-all-controll");
+var filter = $("#name-filter");
+var filter_updated_callback = function(e){
+ var target = $(e.currentTarget);
+ if(target.val().length >= 1) {
+ // reset check all button to initial state
+ check_controll.attr("disabled", false);
+ check_controll.data("action", "check");
+ check_controll.val("Check All");
+ table.find("tbody tr").each(function(ind, elem){
+ var el = $(elem);
+ var pattern = new RegExp("^"+target.val(), "i");
+ if(pattern.test($(elem).find("td.name").html())){
+ el.removeClass("hidden");
+ } else {
+ el.addClass("hidden");
+ }
+ });
+ } else if(target.val().length == 0) {
+ check_controll.attr("disabled", true);
+ table.find("tbody tr").removeClass("hidden");
+ }
+};
+filter.on("change", filter_updated_callback);
+filter.on("keyup", filter_updated_callback);
+
+check_controll.on("click", function(e){
+ e.preventDefault();
+ var checkboxes = [];
+ var el = $(e.currentTarget);
+ action = el.data("action");
+ if(action === "check") {
+ el.val("Uncheck All");
+ el.data("action", "uncheck")
+ chk = true
+ checkboxes = table.find("tbody tr:visible input[type='checkbox']:not(:checked)")
+ } else {
+ el.val("Check All");
+ el.data("action", "check")
+ chk = false;
+ checkboxes = table.find("tbody tr:visible input[type='checkbox']:checked")
+ }
+
+ checkboxes.attr("checked", chk);
+ update_collection(table, $.makeArray(checkboxes), update_chart);
+});

0 comments on commit 704ecef

Please sign in to comment.