redesign log parser upload page

This makes the instructions much more clear and prominent, so it should be more intuitive for players. The previous design often confused users because they saw the big textbox and ignored the little instructions above it.

1 files changed, 25 insertions, 65 deletions

diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
index c4a35e96..eba6451d 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -90,27 +90,36 @@ smapi.logParser = function (data, sectionUrl) {
     /**********
     ** Upload form
     *********/
-    var error = $("#error");
-    
-    $("#upload-button").on("click", function(e) {
-        e.preventDefault();
-
-        $("#input").val("");
-        $("#popup-upload").fadeIn();
-    });
-
-    var closeUploadPopUp = function() {
-        $("#popup-upload").fadeOut(400);
-    };
+    // get elements
+    var systemOptions = $("input[name='os']");
+    var systemInstructions = $("div[data-os]");
+    var input = $("#input");
+    var submit = $("#submit");
+
+    // instruction OS chooser
+    var chooseSystem = function() {
+        systemInstructions.hide();
+        systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show();
+    }
+    systemOptions.on("click", chooseSystem);
+    chooseSystem();
+
+    // disable submit if it's empty
+    var toggleSubmit = function()
+    {
+        var hasText = !!input.val().trim();
+        submit.prop("disabled", !hasText);
+    }
+    input.on("input", toggleSubmit);
+    toggleSubmit();
 
-    $("#popup-upload").on({
+    // drag & drop file
+    input.on({
         'dragover dragenter': function(e) {
             e.preventDefault();
             e.stopPropagation();
         },
         'drop': function(e) {
-            $("#uploader").attr("data-text", "Reading...");
-            $("#uploader").show();
             var dataTransfer = e.originalEvent.dataTransfer;
             if (dataTransfer && dataTransfer.files.length) {
                 e.preventDefault();
@@ -119,59 +128,10 @@ smapi.logParser = function (data, sectionUrl) {
                 var reader = new FileReader();
                 reader.onload = $.proxy(function(file, $input, event) {
                     $input.val(event.target.result);
-                    $("#uploader").fadeOut();
-                    $("#submit").click();
+                    toggleSubmit();
                 }, this, file, $("#input"));
                 reader.readAsText(file);
             }
-        },
-        'click': function(e) {
-            if (e.target.id === "popup-upload")
-                closeUploadPopUp();
-        }
-    });
-
-    $("#submit").on("click", function() {
-        $("#popup-upload").fadeOut();
-        var paste = $("#input").val();
-        if (paste) {
-            //memory = "";
-            $("#uploader").attr("data-text", "Saving...");
-            $("#uploader").fadeIn();
-            $
-                .ajax({
-                    type: "POST",
-                    url: sectionUrl + "/save",
-                    data: JSON.stringify(paste),
-                    contentType: "application/json" // sent to API
-                })
-                .fail(function(xhr, textStatus) {
-                    $("#uploader").fadeOut();
-                    error.html('<h1>Parsing failed!</h1>Parsing of the log failed, details follow.<br />&nbsp;<p>Stage: Upload</p>Error: ' + textStatus + ': ' + xhr.responseText + "<hr /><pre>" + $("#input").val() + "</pre>");
-                })
-                .then(function(data) {
-                    $("#uploader").fadeOut();
-                    if (!data.success)
-                        error.html('<h1>Parsing failed!</h1>Parsing of the log failed, details follow.<br />&nbsp;<p>Stage: Upload</p>Error: ' + data.error + "<hr /><pre>" + $("#input").val() + "</pre>");
-                    else
-                        location.href = (sectionUrl.replace(/\/$/, "") + "/" + data.id);
-                });
-        } else {
-            alert("Unable to parse log, the input is empty!");
-            $("#uploader").fadeOut();
-        }
-    });
-
-    $(document).on("keydown", function(e) {
-        if (e.which === 27) {
-            if ($("#popup-upload").css("display") !== "none" && $("#popup-upload").css("opacity") === 1) {
-                closeUploadPopUp();
-            }
         }
     });
-    $("#cancel").on("click", closeUploadPopUp);
-
-    if (data.showPopup)
-        $("#popup-upload").fadeIn();
-
 };