vgquotes/Src/VideoGameQuotes.Web/media/js/quoteform.js

(function($, window, undefined){
	
	var toggleFormAndLink = function(type) {
		return function() {
			$("#create-" + type  + "-form")
				.find("input[type='text']").val("").end()
				.find("input[type='checkbox']").removeAttr("checked").end()
				.find("> .edit-mode").val(0).end()
				.find("> fieldset > legend").text("Create new " + type).end()
				.clearModelErrors()
				.toggle();
			
			$("#" + type + "-select").toggle();
			return false;
		}
	};
	
	var addNewCheckbox = function($table, name, value, text, cellsPerRow) {
		var $row = $table.find("tr:last");
		if ($row.find("td").length === cellsPerRow) {
			$row = $("<tr/>");
			$table.append($row);
		}

		var $cell = $("<td/>").append($("<input/>").attr({ 
			type: "checkbox", 
			name: name, 
			value: value, 
			id: name + "_" + value, 
			checked: "checked" 
		})).append($("<label/>").attr("for", name + "_" + value).text(text));
		
		$row.append($cell);
		$table.append($row);
	};
	
	var setupSystemForm = function() {
		$("#create-system-link, #create-system-cancel").click(toggleFormAndLink("system"));
		
		$("#create-system-submit").click(function() {
			var submitting = false;
			return function() {
				if (submitting) {
					return false;
				}
				
				submitting = true;
				
				var $container = $("#create-system-form");
				var $icon = $(this).find(".submit-icon");
				var data = { 
					SystemName: $("#SystemName").val(), 
					SystemAbbreviation: $("#SystemAbbreviation").val(), 
					SystemReleaseDate: $("#SystemReleaseDate").val(), 
					SystemIcon: $("#SystemIcon").val() 
				};
				var url = "/system/create";
				var systemId = $container.find("> .edit-mode").val();
				
				if (systemId > 0) {
					url = "/system/edit";
					data.SystemId = systemId;
				}
				
				$.ajax(url, {
					type: "POST",
					data: data,
					beforeSend: function() { 
						$container.clearModelErrors(); 
						$icon.toggleClass("submit-icon loading-icon");
					},
					success: function(data, statux, $xhr) {
						if (data.Error !== null) {
							$container.applyModelErrors(data.Error, data.Data);
							return;
						}
						
						if (systemId <= 0) {
							//add checkbox to table
							addNewCheckbox($("#system-checkbox-table"), "SystemIds", data.Data.Id, data.Data.Abbreviation, 6);
						} else {
							//update checkbox's label with new abbreviation
							$("#system-checkbox-table").find("input[value='" + data.Data.Id +"'] + label").text(data.Data.Abbreviation);
						}
						toggleFormAndLink("system")();
					},
					complete: function() { 
						submitting = false; 
						$icon.toggleClass("submit-icon loading-icon"); 
					}
				});
				
				return false;
			};
		}());
		
		$(".edit-system-link").click(function() {
			var $link = $(this);
			$link.toggleClass("edit-icon loading-icon");
			
			var systemId = $link.siblings("input[name='SystemIds']").val();
			
			$.vgquotes.getResourceById("system", systemId, function(system) {
				$link.toggleClass("edit-icon loading-icon");
				
				if (system === null) {
					alert("Unable to fetch system " + systemId);
					return;
				}
				
				toggleFormAndLink("system")();
				$("#create-system-form > .edit-mode").val(systemId);
				$("#create-system-form > fieldset > legend").text("Edit System");
				
				//populate system form with system data
				$("#SystemName").val(system.Name);
				$("#SystemAbbreviation").val(system.Abbreviation);
				$("#SystemReleaseDate").val($.vgquotes.parseAndFormatDate(system.ReleaseDate));
				$("#SystemIcon").val(system.Icon);
			});
			
			return false;
		});
		
		$(".delete-system-link").click(function() {
			var $link = $(this);
			$link.toggleClass("delete-icon loading-icon");
			var systemId = $link.siblings("input[name='SystemIds']").val();
			
			$.ajax("/system/delete", {
				type: "POST",
				data: { id: systemId },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove checkbox for that system
					$link.parent().empty();
				},
				complete: function() { $link.toggleClass("delete-icon loading-icon"); }
			});
			
			return false;
		});
	};
	
	var setupGameForm = function() {
		$("#create-game-link, #create-game-cancel").click(toggleFormAndLink("game"));
		
		$("#create-game-submit").click(function() {
			var submitting = false;
			return function() {
				if (submitting) {
					return false;
				}
				
				submitting = true;
				var regions = [], publishers = [], systems = [], data = { GameName: $("#GameName").val(), GameWebsite: $("#GameWebsite").val(), GameIcon: $("#GameIcon").val() };
				$("input:checked[name='GameRegions']").each(function(index, input) { if (typeof(data.GameRegions) === "undefined") { data.GameRegions = []; } data.GameRegions.push(input.value); });
				$("input:checked[name='SystemIds']").each(function(index, input) { if (typeof(data.SystemIds) === "undefined") { data.SystemIds = []; } data.SystemIds.push(input.value); });
				$("input:checked[name='PublisherIds']").each(function(index, input) { if (typeof(data.PublisherIds) === "undefined") { data.PublisherIds = []; } data.PublisherIds.push(input.value); });
				var $container = $("#create-game-form");
				var $icon = $(this).find(".submit-icon");
				
				var url = "/game/create";
				var submittingAnEdit = $("#create-game-form > .edit-mode").val() == 1;
				if (submittingAnEdit) {
					url = "/game/edit";
					data.GameId = $("#GameId").val();
				}
				
				$.ajax(url, {
					type: "POST",
					data: data,
					traditional: true,
					beforeSend: function() { 
						$container.clearModelErrors();
						$icon.toggleClass("submit-icon loading-icon");
					},
					success: function(data, status, $xhr) {
						if (data.Error !== null) {
							$container.applyModelErrors(data.Error, data.Data);
							return;
						}
						
						if (!submittingAnEdit) {
							$("#GameId")
								.append($("<option/>").attr({ value: data.Data.Id}).text(data.Data.Name))
								.val(data.Data.Id);
						} else {
							$("#GameId option[value='" + data.Data.Id + "']").text(data.Data.Name); //make sure the new name is up to date
						}
						
						toggleFormAndLink("game")();
					},
					complete: function() {
						submitting = false;
						$icon.toggleClass("submit-icon loading-icon");
					}
				});
				
				return false;
			}
		}());
		
		$("#edit-game-link").click(function() {
			$("#edit-game-link").toggleClass("edit-icon loading-icon");
			
			var gameId = $("#GameId").val();
			$.vgquotes.getResourceById("game", gameId, function(game) {
				$("#edit-game-link").toggleClass("edit-icon loading-icon");
				
				if (game === null) {
					alert("Unable to fetch game " + gameId);
					return;
				}
				
				toggleFormAndLink("game")();
				$("#create-game-form > .edit-mode").val(1);
				$("#create-game-form > fieldset > legend").text("Edit Game");
				
				//populate game form with game data
				$("#GameName").val(game.Name);
				$("#GameWebsite").val(game.Website);
				$("#GameIcon").val(game.Icon);
				$.each(game.Regions, function() {
					$("input[name='GameRegions'][value='" + this + "']").attr("checked", "checked");
				});
				$.each(game.Systems, function() {
					$("input[name='SystemIds'][value='" + this.Id + "']").attr("checked", "checked");
				});
				$.each(game.Publishers, function() {
					$("input[name='PublisherIds'][value='" + this.Id + "']").attr("checked", "checked");
				});
			});
			
			return false;
		});
		
		$("#delete-game-link").click(function() {
			var $link = $(this);
			var gameId = $("#GameId").val();
			
			$.ajax("/game/delete", {
				type: "POST",
				data: { id: gameId },
				beforeSend: function() { $link.toggleClass("delete-icon loading-icon"); },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove game from the dropdown
					$("#GameId option[value='" + gameId + "']").remove();
				},
				complete: function() { $link.toggleClass("delete-icon loading-icon"); }
			});
			
			return false;
		});
	};
	
	var setupPublisherForm = function() {
		$("#create-publisher-link, #create-publisher-cancel").click(toggleFormAndLink("publisher"));
		
		$("#create-publisher-submit").click(function() {
			var submitting = false;
			return function() {
				if (submitting) {
					return false;
				}
				
				submitting = true;
				var $container = $("#create-publisher-form");
				var $icon = $(this).find(".submit-icon");
				var data = { PublisherName: $("#PublisherName").val(), PublisherWebsite: $("#PublisherWebsite").val() };
				var url = "/publisher/create";
				var publisherId = $container.find("> .edit-mode").val();
				
				if (publisherId > 0) {
					url = "/publisher/edit";
					data.PublisherId = publisherId;
				}
				
				$.ajax(url, {
					type: "POST",
					data: data,
					beforeSend: function() { 
						$container.clearModelErrors(); 
						$icon.toggleClass("submit-icon loading-icon");
					},
					success: function(data, statux, $xhr) {
						if (data.Error !== null) {
							$container.applyModelErrors(data.Error, data.Data);
							return;
						}
						
						if (publisherId <= 0) {
							addNewCheckbox($("#publisher-checkbox-table"), "PublisherIds", data.Data.Id, data.Data.Name, 4);
						} else {
							//update publisher name
							$("#publisher-checkbox-table").find("input[value='" + data.Data.Id +"'] + label").text(data.Data.Name);
						}
						
						toggleFormAndLink("publisher")();
					},
					complete: function() {
						submitting = false;
						$icon.toggleClass("submit-icon loading-icon");
					}
				});
				
				return false;
			}
		}());
		
		$(".edit-publisher-link").click(function() {
			var $link = $(this);
			$link.toggleClass("edit-icon loading-icon");
			
			var publisherId = $link.siblings("input[name='PublisherIds']").val();
			
			$.vgquotes.getResourceById("publisher", publisherId, function(publisher) {
				$link.toggleClass("edit-icon loading-icon");
				
				if (publisher === null) {
					alert("Unable to fetch publisher " + publisherId);
					return;
				}
				
				toggleFormAndLink("publisher")();
				$("#create-publisher-form > .edit-mode").val(publisherId);
				$("#create-publisher-form > fieldset > legend").text("Edit Publisher");
				
				//populate publisher form with publisher data
				$("#PublisherName").val(publisher.Name);
				$("#PublisherWebsite").val(publisher.Website);
			});
			
			return false;
		});
		
		$(".delete-publisher-link").click(function() {
			var $link = $(this);
			$link.toggleClass("delete-icon loading-icon");
			
			$.ajax("/publisher/delete", {
				type: "POST",
				data: { id: $link.siblings("input[name='PublisherIds']").val() },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove checkbox for that publisher
					$link.parent().empty();
				},
				complete: function() { $link.toggleClass("delete-icon loading-icon"); }
			});
			
			return false;
		});
	};
	
	var setupCategoryForm = function() {
		var makeCategoryForm = function(categoryId) {
			if ($("#new-category-name").length > 0) {
				return;
			}
			
			var submitCategory = function() {
				var $link = $(this);
				var url = "/category/create";
				var data = { CategoryName: $input.val() };
				if (categoryId !== undefined) {
					url = "/category/edit";
					data.CategoryId = categoryId;
				}
				
				$.ajax(url, {
					data: data,
					type: "POST",
					beforeSend: function() { $link.toggleClass("submit-icon loading-icon"); },
					success: function(data, status, $xhr) {
						if (data.Error !== null) {
							alert(data.Error);
							return;
						}

						if (categoryId === undefined) {
							//add category checkbox to table
							var $checkbox = $("<input/>")
								.css("display", "none")
								.attr({
									"id": "category_" + data.Data.Id,
									"type": "checkbox",
									"name": "CategoryIds",
									"checked": "checked"
								}).val(data.Data.Id);

							var $label = $("<label/>")
								.css("display", "none")
								.attr("for", $checkbox.attr("id"))
								.text(data.Data.Name);

							$("#new-category-name").before($checkbox).before($label);
						} else {
							$("#new-category-name").siblings("label").text(data.Data.Name);
						}
					},
					complete: function() {
						$link.toggleClass("submit-icon loading-icon");
						var $cell = $("#new-category-name").parent();
						$cell
							.children(":visible").remove().end()
							.children().show();
					}
				});
				
				return false;
			};
			
			var $table = $("#category-checkbox-table"), $cell;
			var $submit = $("<a/>").attr({ href: "#", title: "submit" }).addClass("submit-icon").click(submitCategory);
			var $cancel = $("<a/>").attr({ href: "#", title: "cancel" }).addClass("cancel-icon");
			var $input = $("<input/>").attr({ id: "new-category-name", type: "text" }).bind("keyup", function(e) {
				if (e.which === 13) {
					e.preventDefault(); //make sure the parent form doesn't get submitted
					submitCategory.call($(this).siblings(".submit-icon").get(0)); //make sure to invoke it with the correct context
				} else if (e.which === 27) {
					e.preventDefault();
					$cancel.click();
				}
			});
			
			if (categoryId !== undefined) {
				$cell = $table.find("input[value='" + categoryId + "']").parent();
				$cell.children().hide();
				$cancel.click(function() {
					$input.remove();
					$submit.remove();
					$cancel.remove();
					$cell.children().show();
					return false;
				});
				
				$input.val($cell.find("label").text());
				$cell.append($input).append($submit).append($cancel);
				$input.select();
				return;
			}
			
			var $row = $table.find("tr:last");
			if ($row.length === 0) {
				$row = $("<tr/>");
				$table.append($row);
			}
			$cell = $("<td/>");
			if ($row.find("td").length === 5) {
				$row = $("<tr/>");
				$table.append($row);
			}

			$row.append($cell);
			$input.val("Category name");
			
			$cancel.click(function() {
				$cell.remove();
				return false;
			});

			$cell.append($input).append($submit).append($cancel);
			$input.select();
		};
		
		$("#create-category-link").click(function() {
			makeCategoryForm.call(this);
			return false;
		});
		$(".edit-category-link").click(function() {
			var categoryId = $(this).siblings("input[name='CategoryIds']").val();
			makeCategoryForm.call(this, categoryId);
			return false;
		});
		$(".delete-category-link").click(function() {
			var categoryId = $(this).siblings("input[name='CategoryIds']").val();
			var $link = $(this);
			$.ajax("/category/delete", {
				type: "POST",
				data: { id: categoryId },
				beforeSend: function() { $link.toggleClass("delete-icon loading-icon"); },
				success: function(data) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove checkbox
					$("#category-checkbox-table").find("input[value='" + categoryId + "']").parent().empty();
				},
				complete: function() { $link.toggleClass("delete-icon loading-icon"); }
			});
			
			return false;
		});
	};
	
	var setupFlagLink = function() {
		$(".dismiss-flag-link").click(function() {
			var $link = $(this);
			var $container = $link.parents(".quote-flag");
			var flagId = $container.find(".quote-flag-id").val();
			var quoteId = $("#quote-id").val();

			$.ajax("/dismiss-flag", {
				type: "POST",
				data: { quoteId: quoteId, flagId : flagId },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}

					$container.remove();
				}
			});

			return false;
		});
	};
	
	//initialize everything
	(function() {
		$(document).ready(function() {
			setupGameForm();
			setupSystemForm();
			setupPublisherForm();
			setupCategoryForm();
			setupFlagLink();
		});
	}());

}(jQuery, window));