2010-04-13 01:48:48 +02:00
|
|
|
function HistoryWidget(div, tabHeader) {
|
2010-01-27 02:48:42 +01:00
|
|
|
this._div = div;
|
2010-04-13 01:48:48 +02:00
|
|
|
this._tabHeader = tabHeader;
|
2010-01-27 02:48:42 +01:00
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
|
2010-03-22 22:48:36 +01:00
|
|
|
HistoryWidget.prototype.resize = function() {
|
2010-04-13 09:08:23 +02:00
|
|
|
var body = this._div.find(".history-panel-body");
|
|
|
|
var footer = this._div.find(".history-panel-footer");
|
2010-04-17 01:38:49 +02:00
|
|
|
var bodyPaddings = body.outerHeight(true) - body.height();
|
2010-04-13 10:06:05 +02:00
|
|
|
|
2010-04-17 01:38:49 +02:00
|
|
|
body.css("height", (this._div.height() - footer.outerHeight(true) - bodyPaddings) + "px");
|
2010-03-22 22:48:36 +01:00
|
|
|
};
|
|
|
|
|
2010-01-27 02:48:42 +01:00
|
|
|
HistoryWidget.prototype.update = function(onDone) {
|
|
|
|
var self = this;
|
|
|
|
Ajax.chainGetJSON(
|
|
|
|
"/command/get-history?" + $.param({ project: theProject.id }), null,
|
|
|
|
function(data) {
|
|
|
|
self._data = data;
|
|
|
|
self._render();
|
2010-02-26 22:56:41 +01:00
|
|
|
|
|
|
|
if (onDone) {
|
|
|
|
onDone();
|
|
|
|
}
|
2010-01-27 02:48:42 +01:00
|
|
|
}
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
HistoryWidget.prototype._render = function() {
|
|
|
|
var self = this;
|
2010-02-01 01:19:41 +01:00
|
|
|
|
2010-04-13 06:49:28 +02:00
|
|
|
this._tabHeader.html('Undo/Redo <span class="count">' + this._data.past.length + '</span>');
|
2010-04-13 01:48:48 +02:00
|
|
|
|
2010-03-23 20:30:50 +01:00
|
|
|
this._div
|
|
|
|
.empty()
|
|
|
|
.unbind()
|
|
|
|
.html(
|
2010-04-17 01:38:49 +02:00
|
|
|
'<div class="history-panel-help" bind="helpDiv">' +
|
|
|
|
'<h1>Don\'t worry ...</h1>' +
|
|
|
|
'<p>about making mistakes. Every change you make will be shown here, and you can undo changes at any point.</p>' +
|
|
|
|
'<p><a href="">Learn more »</a></p>' +
|
|
|
|
'</div>' +
|
2010-03-23 20:30:50 +01:00
|
|
|
'<div class="history-panel-body" bind="bodyDiv">' +
|
|
|
|
'<div class="history-past" bind="pastDiv"></div>' +
|
|
|
|
'<div class="history-now" bind="nowDiv">done upto here</div>' +
|
|
|
|
'<div class="history-future" bind="futureDiv"></div>' +
|
|
|
|
'</div>' +
|
2010-04-13 09:08:23 +02:00
|
|
|
'<div class="history-panel-footer" bind="footerDiv">' +
|
2010-03-23 20:30:50 +01:00
|
|
|
'<a href="javascript:{}" bind="extractLink">extract</a> • ' +
|
|
|
|
'<a href="javascript:{}" bind="applyLink">apply</a>' +
|
|
|
|
'</div>'
|
|
|
|
);
|
2010-01-27 02:48:42 +01:00
|
|
|
|
2010-03-23 20:30:50 +01:00
|
|
|
var elmts = DOM.bind(this._div);
|
2010-02-01 01:19:41 +01:00
|
|
|
|
2010-01-27 02:48:42 +01:00
|
|
|
var renderEntry = function(container, entry, lastDoneID, title) {
|
|
|
|
var a = $('<a href="javascript:{}"></a>').appendTo(container);
|
|
|
|
a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
|
|
|
|
return self._onClickHistoryEntry(evt, entry, lastDoneID);
|
|
|
|
});
|
2010-02-01 01:19:41 +01:00
|
|
|
return a;
|
2010-01-27 02:48:42 +01:00
|
|
|
};
|
|
|
|
|
2010-04-17 01:38:49 +02:00
|
|
|
if (this._data.past.length > 0 || this._data.future.length > 0) {
|
|
|
|
if (!this._data.past.length) {
|
|
|
|
elmts.pastDiv.html('<div class="history-panel-message">No change to undo</div>');
|
|
|
|
} else {
|
|
|
|
for (var i = 0; i < this._data.past.length; i++) {
|
|
|
|
var entry = this._data.past[i];
|
|
|
|
renderEntry(elmts.pastDiv, entry, i === 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
|
|
|
|
}
|
2010-02-01 01:19:41 +01:00
|
|
|
}
|
|
|
|
|
2010-04-17 01:38:49 +02:00
|
|
|
if (!this._data.future.length) {
|
|
|
|
elmts.futureDiv.html('<div class="history-panel-message">No change to redo</div>');
|
|
|
|
} else {
|
|
|
|
for (var i = 0; i < this._data.future.length; i++) {
|
|
|
|
var entry = this._data.future[i];
|
|
|
|
renderEntry(elmts.futureDiv, entry, entry.id, "Redo to here");
|
|
|
|
}
|
2010-02-01 01:19:41 +01:00
|
|
|
}
|
2010-04-17 01:38:49 +02:00
|
|
|
|
|
|
|
elmts.helpDiv.hide();
|
|
|
|
} else {
|
|
|
|
elmts.bodyDiv.hide();
|
2010-01-27 02:48:42 +01:00
|
|
|
}
|
|
|
|
|
2010-03-23 20:30:50 +01:00
|
|
|
elmts.extractLink.click(function() { self._extractOperations(); });
|
|
|
|
elmts.applyLink.click(function() { self._showApplyOperationsDialog(); });
|
2010-04-13 09:08:23 +02:00
|
|
|
|
|
|
|
this.resize();
|
|
|
|
|
2010-04-17 01:38:49 +02:00
|
|
|
elmts.bodyDiv[0].scrollTop =
|
|
|
|
elmts.nowDiv[0].offsetTop +
|
|
|
|
elmts.nowDiv[0].offsetHeight -
|
|
|
|
elmts.bodyDiv[0].offsetHeight;
|
2010-01-27 02:48:42 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
|
|
|
|
var self = this;
|
2010-02-26 22:56:41 +01:00
|
|
|
|
|
|
|
Gridworks.postProcess(
|
|
|
|
"undo-redo",
|
|
|
|
{ lastDoneID: lastDoneID },
|
2010-01-27 02:48:42 +01:00
|
|
|
null,
|
2010-02-26 22:56:41 +01:00
|
|
|
{ everythingChanged: true }
|
2010-01-27 02:48:42 +01:00
|
|
|
);
|
|
|
|
};
|
2010-02-17 02:30:09 +01:00
|
|
|
|
|
|
|
HistoryWidget.prototype._extractOperations = function() {
|
2010-02-17 02:31:28 +01:00
|
|
|
var self = this;
|
2010-02-17 02:30:09 +01:00
|
|
|
$.getJSON(
|
|
|
|
"/command/get-operations?" + $.param({ project: theProject.id }),
|
|
|
|
null,
|
|
|
|
function(data) {
|
2010-02-22 07:31:09 +01:00
|
|
|
if ("entries" in data) {
|
|
|
|
self._showExtractOperationsDialog(data);
|
2010-02-17 02:30:09 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
"jsonp"
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2010-02-18 06:00:56 +01:00
|
|
|
HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
|
2010-02-17 02:30:09 +01:00
|
|
|
var self = this;
|
|
|
|
var frame = DialogSystem.createDialog();
|
|
|
|
frame.width("800px");
|
|
|
|
|
2010-02-18 06:00:56 +01:00
|
|
|
var header = $('<div></div>').addClass("dialog-header").text("Extract Operations").appendTo(frame);
|
2010-02-17 02:30:09 +01:00
|
|
|
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
|
|
|
|
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
|
|
|
|
|
2010-03-13 08:13:18 +01:00
|
|
|
var html = $(
|
|
|
|
'<div class="grid-layout layout-normal layout-full"><table>' +
|
|
|
|
'<tr><td colspan="2">' +
|
|
|
|
'The following JSON code encodes the operations you have done that can be abstracted. ' +
|
|
|
|
'You can copy and save it in order to apply the same operations in the future.' +
|
|
|
|
'</td></tr>' +
|
|
|
|
'<tr>' +
|
2010-04-26 01:51:48 +02:00
|
|
|
'<td width="50%" style="vertical-align: top">' +
|
2010-03-13 08:13:18 +01:00
|
|
|
'<div class="extract-operation-dialog-entries"><table cellspacing="5" bind="entryTable"></table></div>' +
|
|
|
|
'</td>' +
|
2010-04-26 01:51:48 +02:00
|
|
|
'<td width="50%" style="vertical-align: top">' +
|
2010-03-13 08:13:18 +01:00
|
|
|
'<div class="input-container"><textarea wrap="off" class="history-operation-json" bind="textarea" /></div>' +
|
|
|
|
'</td>' +
|
|
|
|
'</tr>' +
|
|
|
|
'</table></div>'
|
|
|
|
).appendTo(body);
|
|
|
|
|
|
|
|
var elmts = DOM.bind(html);
|
2010-02-18 06:00:56 +01:00
|
|
|
|
2010-03-13 08:13:18 +01:00
|
|
|
var entryTable = elmts.entryTable[0];
|
2010-02-22 07:31:09 +01:00
|
|
|
var createEntry = function(entry) {
|
|
|
|
var tr = entryTable.insertRow(entryTable.rows.length);
|
|
|
|
var td0 = tr.insertCell(0);
|
|
|
|
var td1 = tr.insertCell(1);
|
|
|
|
td0.width = "1%";
|
|
|
|
|
|
|
|
if ("operation" in entry) {
|
|
|
|
entry.selected = true;
|
|
|
|
|
|
|
|
$('<input type="checkbox" checked="true" />').appendTo(td0).click(function() {
|
|
|
|
entry.selected = !entry.selected;
|
|
|
|
updateJson();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('<span>').text(entry.operation.description).appendTo(td1);
|
|
|
|
} else {
|
|
|
|
$('<span>').text(entry.description).css("color", "#888").appendTo(td1);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
for (var i = 0; i < json.entries.length; i++) {
|
|
|
|
createEntry(json.entries[i]);
|
|
|
|
}
|
2010-03-13 08:13:18 +01:00
|
|
|
|
2010-02-22 07:31:09 +01:00
|
|
|
var updateJson = function() {
|
|
|
|
var a = [];
|
|
|
|
for (var i = 0; i < json.entries.length; i++) {
|
|
|
|
var entry = json.entries[i];
|
|
|
|
if ("operation" in entry && entry.selected) {
|
|
|
|
a.push(entry.operation);
|
|
|
|
}
|
|
|
|
}
|
2010-03-13 08:13:18 +01:00
|
|
|
elmts.textarea.text(JSON.stringify(a, null, 2));
|
2010-02-22 07:31:09 +01:00
|
|
|
};
|
|
|
|
updateJson();
|
2010-02-17 02:30:09 +01:00
|
|
|
|
|
|
|
$('<button></button>').text("Done").click(function() {
|
|
|
|
DialogSystem.dismissUntil(level - 1);
|
|
|
|
}).appendTo(footer);
|
|
|
|
|
|
|
|
var level = DialogSystem.showDialog(frame);
|
|
|
|
|
2010-02-18 06:00:56 +01:00
|
|
|
textarea[0].select();
|
|
|
|
};
|
|
|
|
|
2010-03-13 08:13:18 +01:00
|
|
|
HistoryWidget.prototype._showApplyOperationsDialog = function() {
|
2010-02-18 06:00:56 +01:00
|
|
|
var self = this;
|
|
|
|
var frame = DialogSystem.createDialog();
|
|
|
|
frame.width("800px");
|
|
|
|
|
|
|
|
var header = $('<div></div>').addClass("dialog-header").text("Apply Operations").appendTo(frame);
|
|
|
|
var body = $('<div></div>').addClass("dialog-body").appendTo(frame);
|
|
|
|
var footer = $('<div></div>').addClass("dialog-footer").appendTo(frame);
|
|
|
|
|
2010-03-13 08:13:18 +01:00
|
|
|
var html = $(
|
|
|
|
'<div class="grid-layout layout-normal layout-full"><table>' +
|
|
|
|
'<tr><td>' +
|
|
|
|
'Paste the JSON code encoding the operations to perform.' +
|
|
|
|
'</td></tr>' +
|
|
|
|
'<tr><td>' +
|
|
|
|
'<div class="input-container"><textarea wrap="off" bind="textarea" class="history-operation-json" /></div>' +
|
|
|
|
'</td></tr>' +
|
|
|
|
'</table></div>'
|
|
|
|
).appendTo(body);
|
|
|
|
|
|
|
|
var elmts = DOM.bind(html);
|
2010-02-18 06:00:56 +01:00
|
|
|
|
|
|
|
$('<button></button>').text("Apply").click(function() {
|
2010-04-09 03:48:50 +02:00
|
|
|
var json;
|
|
|
|
|
2010-02-18 06:00:56 +01:00
|
|
|
try {
|
2010-04-09 03:48:50 +02:00
|
|
|
json = JSON.parse(elmts.textarea[0].value);
|
2010-02-18 06:00:56 +01:00
|
|
|
} catch (e) {
|
|
|
|
alert("The JSON you pasted is invalid.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2010-02-26 22:56:41 +01:00
|
|
|
Gridworks.postProcess(
|
|
|
|
"apply-operations",
|
|
|
|
{},
|
2010-02-18 06:00:56 +01:00
|
|
|
{ operations: JSON.stringify(json) },
|
2010-02-26 22:56:41 +01:00
|
|
|
{ everythingChanged: true },
|
|
|
|
{
|
|
|
|
onDone: function(o) {
|
|
|
|
if (o.code == "pending") {
|
|
|
|
// Something might have already been done and so it's good to update
|
|
|
|
Gridworks.update({ everythingChanged: true });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2010-02-18 06:00:56 +01:00
|
|
|
);
|
2010-02-26 22:56:41 +01:00
|
|
|
|
|
|
|
DialogSystem.dismissUntil(level - 1);
|
2010-02-18 06:00:56 +01:00
|
|
|
}).appendTo(footer);
|
|
|
|
|
|
|
|
$('<button></button>').text("Cancel").click(function() {
|
|
|
|
DialogSystem.dismissUntil(level - 1);
|
|
|
|
}).appendTo(footer);
|
|
|
|
|
|
|
|
var level = DialogSystem.showDialog(frame);
|
|
|
|
|
2010-02-17 02:30:09 +01:00
|
|
|
textarea[0].focus();
|
|
|
|
};
|