From 13bc7639a4393331583a3dec7d50ec01969762ca Mon Sep 17 00:00:00 2001 From: Kaarle Ritvanen Date: Mon, 20 May 2013 20:20:11 +0300 Subject: web client: highlight status bar when there are uncommitted changes --- web/client.css | 16 +++++++++- web/client.html | 8 ++++- web/client.js | 94 ++++++++++++++++++++++++++++++--------------------------- 3 files changed, 72 insertions(+), 46 deletions(-) (limited to 'web') diff --git a/web/client.css b/web/client.css index 16d810c..e9dabbf 100644 --- a/web/client.css +++ b/web/client.css @@ -4,7 +4,21 @@ */ -#status { min-height: 40px; } +#status { height: 40px; } + +#status p { + position: absolute; + top: 0; + left: 15px; +} + +#status div { + position: absolute; + top: 15px; + right: 15px; +} + +.hidden { display: none; } .invalid { diff --git a/web/client.html b/web/client.html index 3c57e57..c2103c2 100644 --- a/web/client.html +++ b/web/client.html @@ -15,7 +15,13 @@ -

+ +

diff --git a/web/client.js b/web/client.js index 9b47bec..2e5c86e 100644 --- a/web/client.js +++ b/web/client.js @@ -24,6 +24,8 @@ $(function() { } var changed, invalid; + var statusBar = $("#status p"); + var buttons = $("#status div"); function startTxn() { var def = $.Deferred(); @@ -32,13 +34,22 @@ $(function() { txn = xhr.getResponseHeader("X-ACF-Transaction-ID"); changed = {}; invalid = {}; - $("#status").empty(); + $("#status").prop("class", ""); + statusBar.empty(); + buttons.prop("class", "hidden"); def.resolve(); }); return def; } + function showError(el, msg, xhr) { + msg += " " + xhr.statusCode().status; + if (xhr.responseText) msg += ': ' + xhr.responseText; + el.text(msg); + } + + var Field = { format: function(value, status) { var el = this.staticRender(value); @@ -292,49 +303,16 @@ $(function() { invalid[path] = newValue; msg.text("[checking]"); - - function showError(el, msg, xhr) { - msg += " " + xhr.statusCode().status; - if (xhr.responseText) - msg += ': ' + xhr.responseText; - el.text(msg); - } - - function newTxn() { - return startTxn().done(render); - } - - function abortTxn() { - request("/", {type: "DELETE"}); - return newTxn(); + if ($("#status").prop("class") != "invalid") + statusBar.text("Validating changes"); + + function setStatus(status, msg, commit) { + $("#status").prop("class", status); + statusBar.text(msg); + $("#commit").prop("disabled", !commit); + buttons.prop("class", ""); } - var statusBar = $("#status"); - statusBar.html( - "You have uncommitted changes.
" - ); - statusBar.append($("").attr({ - id: "commit", - type: "submit", - value: "Commit", - disabled: true - }).click(function() { - request("/", {type: "PUT"}) - .done(newTxn) - .fail(function(xhr) { - abortTxn().done(function() { - showError( - statusBar, - "Commit failed", - xhr - ); - }); - }); - })); - statusBar.append($("").attr({ - type: "submit", value: "Revert" - }).click(abortTxn)); - task.done(function() { msg.empty(); widget.setStatus( @@ -343,11 +321,21 @@ $(function() { delete invalid[path]; if (!(_.size(invalid))) - $("#commit").prop("disabled", false); - + setStatus( + "changed", + "You have uncommitted changes", + true + ); + }).fail(function(xhr) { showError(msg, "Error", xhr); widget.setStatus("invalid"); + + setStatus( + "invalid", + "Some values need checking", + false + ); }); }); @@ -414,6 +402,24 @@ $(function() { }); } + + function newTxn() { return startTxn().done(render); } + + function abortTxn() { + request("/", {type: "DELETE"}); + return newTxn(); + } + + $("#commit").click(function() { + request("/", {type: "PUT"}).done(newTxn).fail(function(xhr) { + abortTxn().done(function() { + showError(statusBar, "Commit failed", xhr); + }); + }); + }); + $("#revert").click(abortTxn); + + startTxn().done(function() { $(window).bind("hashchange", render); $.bbq.pushState("#/"); -- cgit v1.2.3