impress/app/assets/javascripts/pets/bulk.js

204 lines
5.3 KiB
JavaScript
Raw Normal View History

var DEBUG = document.location.search.substr(0, 6) == "?debug";
2010-11-05 17:09:03 -07:00
2012-08-06 18:15:31 -07:00
/* Needed items form */
(function () {
var UI = {};
UI.form = $("#needed-items-form");
UI.alert = $("#needed-items-alert");
UI.pet_name_field = $("#needed-items-pet-name-field");
UI.pet_thumbnail = $("#needed-items-pet-thumbnail");
UI.pet_header = $("#needed-items-pet-header");
UI.reload = $("#needed-items-reload");
UI.pet_items = $("#needed-items-pet-items");
UI.item_template = $("#item-template");
2012-08-06 18:15:31 -07:00
var current_request = { abort: function () {} };
function sendRequest(options) {
current_request = $.ajax(options);
}
2012-08-06 18:15:31 -07:00
function cancelRequest() {
if (DEBUG) console.log("Canceling request", current_request);
2012-08-06 18:15:31 -07:00
current_request.abort();
}
2012-08-06 18:15:31 -07:00
/* Pet */
2012-12-30 13:02:57 -08:00
var last_successful_pet_name = null;
2012-08-06 18:15:31 -07:00
function loadPet(pet_name) {
// If there is a request in progress, kill it. Our new pet request takes
// priority, and, if I submit a name while the previous name is loading, I
// don't want to process both responses.
cancelRequest();
2012-08-06 18:15:31 -07:00
sendRequest({
url: UI.form.attr("action") + ".json",
dataType: "json",
data: { name: pet_name },
2012-08-06 18:15:31 -07:00
error: petError,
success: function (data) {
petSuccess(data, pet_name);
},
complete: petComplete,
2012-08-06 18:15:31 -07:00
});
UI.form.removeClass("failed").addClass("loading-pet");
2010-11-05 17:09:03 -07:00
}
2012-08-06 18:15:31 -07:00
function petComplete() {
UI.form.removeClass("loading-pet");
2012-08-06 18:15:31 -07:00
}
2012-08-06 18:15:31 -07:00
function petError(xhr) {
UI.alert.text(xhr.responseText);
UI.form.addClass("failed");
2012-08-06 18:15:31 -07:00
}
2012-08-06 18:15:31 -07:00
function petSuccess(data, pet_name) {
2012-12-30 13:02:57 -08:00
last_successful_pet_name = pet_name;
UI.pet_thumbnail.attr("src", petThumbnailUrl(pet_name));
2012-12-30 13:02:57 -08:00
UI.pet_header.empty();
$("#needed-items-pet-header-template")
.tmpl({ pet_name: pet_name })
.appendTo(UI.pet_header);
2012-08-06 18:15:31 -07:00
loadItems(data.query);
}
2012-08-06 18:15:31 -07:00
function petThumbnailUrl(pet_name) {
return "https://pets.neopets.com/cpn/" + pet_name + "/1/1.png";
2012-08-06 18:15:31 -07:00
}
2012-08-06 18:15:31 -07:00
/* Items */
2012-08-06 18:15:31 -07:00
function loadItems(query) {
UI.form.addClass("loading-items");
2012-08-06 18:15:31 -07:00
sendRequest({
url: "/items/needed.json",
dataType: "json",
2012-08-06 18:15:31 -07:00
data: query,
success: itemsSuccess,
2012-08-06 18:15:31 -07:00
});
}
2012-08-06 18:15:31 -07:00
function itemsSuccess(items) {
if (DEBUG) {
2012-08-06 18:15:31 -07:00
// The dev server is missing lots of data, so sends me 2000+ needed
// items. We don't need that many for styling, so limit it to 100 to make
// my browser happier.
items = items.slice(0, 100);
2010-11-05 17:09:03 -07:00
}
2012-08-06 18:15:31 -07:00
UI.pet_items.empty();
UI.item_template.tmpl(items).appendTo(UI.pet_items);
UI.form.removeClass("loading-items").addClass("loaded");
2010-11-05 17:09:03 -07:00
}
2012-08-06 18:15:31 -07:00
UI.form.submit(function (e) {
e.preventDefault();
loadPet(UI.pet_name_field.val());
});
2012-12-30 13:02:57 -08:00
UI.reload.click(function (e) {
e.preventDefault();
loadPet(last_successful_pet_name);
2012-08-06 18:15:31 -07:00
});
2010-11-05 17:09:03 -07:00
})();
2012-08-06 18:15:31 -07:00
/* Bulk pets form */
(function () {
var form = $("#bulk-pets-form"),
queue_el = form.find("ul"),
names_el = form.find("textarea"),
add_el = $("#bulk-pets-form-add"),
clear_el = $("#bulk-pets-form-clear"),
2012-08-06 18:15:31 -07:00
bulk_load_queue;
$(document.body).addClass("js");
2010-11-05 17:09:03 -07:00
2012-08-06 18:15:31 -07:00
bulk_load_queue = new (function BulkLoadQueue() {
2013-07-02 20:50:34 -07:00
var RECENTLY_SENT_INTERVAL_IN_SECONDS = 30;
var RECENTLY_SENT_MAX = 3;
var pets = [],
url = form.attr("action") + ".json",
recently_sent_count = 0,
loading = false;
2012-08-06 18:15:31 -07:00
function Pet(name) {
var el = $("#bulk-pets-submission-template")
.tmpl({ pet_name: name })
.appendTo(queue_el);
2012-08-06 18:15:31 -07:00
this.load = function () {
el.removeClass("waiting").addClass("loading");
var response_el = el.find("span.response");
2013-07-02 14:10:24 -07:00
pets.shift();
loading = true;
2012-08-06 18:15:31 -07:00
$.ajax({
complete: function (data) {
2013-07-02 14:10:24 -07:00
loading = false;
loadNextIfReady();
2012-08-06 18:15:31 -07:00
},
data: { name: name },
dataType: "json",
2012-08-06 18:15:31 -07:00
error: function (xhr) {
el.removeClass("loading").addClass("failed");
2012-08-06 18:15:31 -07:00
response_el.text(xhr.responseText);
},
success: function (data) {
var points = data.points;
el.removeClass("loading").addClass("loaded");
$("#bulk-pets-submission-success-template")
.tmpl({ points: points })
.appendTo(response_el);
2012-08-06 18:15:31 -07:00
},
type: "post",
url: url,
2012-08-06 18:15:31 -07:00
});
2013-07-02 14:10:24 -07:00
recently_sent_count++;
setTimeout(function () {
recently_sent_count--;
loadNextIfReady();
}, RECENTLY_SENT_INTERVAL_IN_SECONDS * 1000);
};
2012-08-06 18:15:31 -07:00
}
2012-08-06 18:15:31 -07:00
this.add = function (name) {
name = name.replace(/^\s+|\s+$/g, "");
if (name.length) {
2012-08-06 18:15:31 -07:00
var pet = new Pet(name);
pets.push(pet);
if (pets.length == 1) loadNextIfReady();
2013-07-02 14:10:24 -07:00
}
};
2013-07-02 14:10:24 -07:00
function loadNextIfReady() {
if (!loading && recently_sent_count < RECENTLY_SENT_MAX && pets.length) {
2013-07-02 14:10:24 -07:00
pets[0].load();
2012-08-06 18:15:31 -07:00
}
}
})();
2010-11-05 17:09:03 -07:00
2012-08-06 18:15:31 -07:00
names_el.keyup(function () {
var names = this.value.split("\n"),
x = names.length - 1,
i,
name;
for (i = 0; i < x; i++) {
2012-08-06 18:15:31 -07:00
bulk_load_queue.add(names[i]);
}
this.value = x >= 0 ? names[x] : "";
2012-08-06 18:15:31 -07:00
});
add_el.click(function () {
bulk_load_queue.add(names_el.val());
names_el.val("");
2012-08-06 18:15:31 -07:00
});
clear_el.click(function () {
queue_el.children("li.loaded, li.failed").remove();
2012-08-06 18:15:31 -07:00
});
})();