diff options
author | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-05-20 20:20:11 +0300 |
---|---|---|
committer | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-05-20 20:35:35 +0300 |
commit | 13bc7639a4393331583a3dec7d50ec01969762ca (patch) | |
tree | b6ddc8c1b7ce0d9b80677b5044851db6ae926127 /web | |
parent | 89827951582ddc0157c8bf89606c61218aece215 (diff) | |
download | aconf-13bc7639a4393331583a3dec7d50ec01969762ca.tar.bz2 aconf-13bc7639a4393331583a3dec7d50ec01969762ca.tar.xz |
web client: highlight status bar when there are uncommitted changes
Diffstat (limited to 'web')
-rw-r--r-- | web/client.css | 16 | ||||
-rw-r--r-- | web/client.html | 8 | ||||
-rw-r--r-- | web/client.js | 94 |
3 files changed, 72 insertions, 46 deletions
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 @@ <script type="text/javascript" src="client.js"></script> </head> <body> - <p id="status"></p> + <div id="status"> + <p></p> + <div class="hidden"> + <input id="revert" type="submit" value="Revert"></input> + <input id="commit" type="submit" value="Commit"></input> + </div> + </div> <ul id="modules"></ul> <ul id="tabs"></ul> <div id="content"></div> 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.<br/>" - ); - statusBar.append($("<input>").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($("<input>").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("#/"); |