X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/1c9098d6313e24c7fd873859c7e10b81452f4bec..dc3368dad09fa4acb4cc480845f0ff3edc126483:/project/static/js/models.js?ds=inline diff --git a/project/static/js/models.js b/project/static/js/models.js index 97682d02..e3fb0ce6 100644 --- a/project/static/js/models.js +++ b/project/static/js/models.js @@ -1,5 +1,5 @@ -/*globals Editor fileId SplitView PanelContainerView*/ -var documentsUrl = '/api/documents/'; +/*globals Editor fileId SplitView PanelContainerView EditorView FlashView messageCenter*/ +var documentsUrl = '/platforma/api/documents/'; Editor.Model = Editor.Object.extend({ @@ -8,35 +8,143 @@ Editor.Model = Editor.Object.extend({ }); +Editor.ToolbarButtonsModel = Editor.Model.extend({ + _className: 'Editor.ToolbarButtonsModel', + serverURL: '/platforma/api/toolbar/buttons', + buttons: {}, + + init: function() { + this._super(); + }, + + load: function() { + if (!this.get('buttons').length) { + $.ajax({ + url: this.serverURL, + dataType: 'json', + success: this.loadSucceeded.bind(this) + }); + } + }, + + loadSucceeded: function(data) { + this.set('buttons', data); + } +}); + + +// Stany modelu: +// +// -> error -> loading +// / +// empty -> loading -> synced -> unsynced -> loading +// \ +// -> dirty -> updating -> updated -> synced +// Editor.XMLModel = Editor.Model.extend({ _className: 'Editor.XMLModel', serverURL: null, + data: '', + state: 'empty', - init: function(serverURL) { + init: function(serverURL, revision) { this._super(); + this.set('state', 'empty'); + this.set('revision', revision); this.serverURL = serverURL; + this.toolbarButtonsModel = new Editor.ToolbarButtonsModel(); + this.addObserver(this, 'data', this.dataChanged.bind(this)); + }, + + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); + $.ajax({ + url: this.serverURL, + dataType: 'text', + data: {revision: this.get('revision')}, + success: this.loadingSucceeded.bind(this), + error: this.loadingFailed.bind(this) + }); + return true; + } + return false; }, - getData: function() { - if (!this.data) { - this.reload(); + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); } - return this.data; + this.set('data', data); + this.set('state', 'synced'); }, - load: function() { - if (!this.get('synced')) { + loadingFailed: function() { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + this.set('error', 'Nie udało się załadować panelu'); + this.set('state', 'error'); + }, + + update: function(message) { + if (this.get('state') == 'dirty') { + this.set('state', 'updating'); + + var payload = { + contents: this.get('data'), + revision: this.get('revision') + }; + if (message) { + payload.message = message; + } + $.ajax({ url: this.serverURL, - dataType: 'text', - success: this.reloadSucceeded.bind(this) + type: 'post', + dataType: 'json', + data: payload, + success: this.updatingSucceeded.bind(this), + error: this.updatingFailed.bind(this) }); + return true; } + return false; }, - reloadSucceeded: function(data) { - this.set('data', data); - this.set('synced', true); + updatingSucceeded: function(data) { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + this.set('revision', data.revision); + this.set('state', 'updated'); + }, + + updatingFailed: function() { + if (this.get('state') != 'updating') { + alert('erroneous state:', this.get('state')); + } + messageCenter.addMessage('error', 'Uaktualnienie nie powiodło się', 'Uaktualnienie nie powiodło się'); + this.set('state', 'dirty'); + }, + + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); + }, + + dataChanged: function(property, value) { + if (this.get('state') == 'synced') { + this.set('state', 'dirty'); + } + }, + + dispose: function() { + this.removeObserver(this); + this._super(); } }); @@ -45,69 +153,251 @@ Editor.HTMLModel = Editor.Model.extend({ _className: 'Editor.HTMLModel', serverURL: null, data: '', + state: 'empty', - init: function(serverURL) { + init: function(serverURL, revision) { this._super(); + this.set('state', 'empty'); + this.set('revision', revision); this.serverURL = serverURL; }, - load: function() { - if (!this.get('synced')) { + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); $.ajax({ url: this.serverURL, dataType: 'text', - success: this.reloadSucceeded.bind(this) + data: {revision: this.get('revision')}, + success: this.loadingSucceeded.bind(this), + error: this.loadingFailed.bind(this) }); } }, - reloadSucceeded: function(data) { + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } this.set('data', data); - this.set('synced', true); + this.set('state', 'synced'); + }, + + loadingFailed: function() { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + this.set('error', 'Nie udało się załadować panelu'); + this.set('state', 'error'); + }, + + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); + } +}); + + +Editor.ImageGalleryModel = Editor.Model.extend({ + _className: 'Editor.ImageGalleryModel', + serverURL: null, + data: [], + state: 'empty', + + init: function(serverURL) { + this._super(); + this.set('state', 'empty'); + this.serverURL = serverURL; + // olewać data + this.pages = []; + }, + + load: function(force) { + if (force || this.get('state') == 'empty') { + this.set('state', 'loading'); + $.ajax({ + url: this.serverURL, + dataType: 'json', + success: this.loadingSucceeded.bind(this) + }); + } + }, + + loadingSucceeded: function(data) { + if (this.get('state') != 'loading') { + alert('erroneous state:', this.get('state')); + } + + console.log('galleries:', data); + + if (data.length === 0) { + this.set('data', []); + } else { + console.log('dupa'); + this.set('data', data[0].pages); + } + + this.set('state', 'synced'); + }, + + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } }); Editor.DocumentModel = Editor.Model.extend({ _className: 'Editor.DocumentModel', - data: null, // name, text_url, latest_rev, latest_shared_rev, parts_url, dc_url, size + data: null, // name, text_url, user_revision, latest_shared_rev, parts_url, dc_url, size, merge_url contentModels: {}, + state: 'empty', init: function() { this._super(); + this.set('state', 'empty'); this.load(); }, load: function() { - console.log('DocumentModel#load'); - $.ajax({ - cache: false, - url: documentsUrl + fileId, - dataType: 'json', - success: this.successfulLoad.bind(this) - }); + if (this.get('state') == 'empty') { + this.set('state', 'loading'); + $.ajax({ + cache: false, + url: documentsUrl + fileId, + dataType: 'json', + success: this.successfulLoad.bind(this) + }); + } }, successfulLoad: function(data) { - console.log('DocumentModel#successfulLoad:', data); this.set('data', data); + this.set('state', 'synced'); this.contentModels = { - 'xml': new Editor.XMLModel(data.text_url), - 'html': new Editor.HTMLModel(data.html_url) + 'xml': new Editor.XMLModel(data.text_url, data.user_revision), + 'html': new Editor.HTMLModel(data.html_url, data.user_revision), + 'gallery': new Editor.ImageGalleryModel(data.gallery_url) }; for (var key in this.contentModels) { - this.contentModels[key].addObserver(this, 'data', this.contentModelDataChanged.bind(this)); + this.contentModels[key].addObserver(this, 'state', this.contentModelStateChanged.bind(this)); + } + }, + + contentModelStateChanged: function(property, value, contentModel) { + if (value == 'dirty') { + this.set('state', 'dirty'); + for (var key in this.contentModels) { + if (this.contentModels[key].guid() != contentModel.guid()) { + this.contentModels[key].set('state', 'unsynced'); + } + } + } else if (value == 'updated') { + this.set('state', 'synced'); + for (key in this.contentModels) { + if (this.contentModels[key].guid() == contentModel.guid()) { + this.contentModels[key].set('state', 'synced'); + this.data.user_revision = this.contentModels[key].get('revision'); + messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.data.user_revision, + 'Uaktualnienie dokumentu do wersji ' + this.data.user_revision); + } + } + for (key in this.contentModels) { + if (this.contentModels[key].guid() != contentModel.guid()) { + this.contentModels[key].set('revision', this.data.user_revision); + this.contentModels[key].set('state', 'empty'); + } + } } }, - contentModelDataChanged: function(property, value, contentModel) { - console.log('data of', contentModel.description(), 'changed!'); + saveDirtyContentModel: function(message) { for (var key in this.contentModels) { - if (this.contentModels[key].guid() != contentModel.guid()) { - console.log(this.contentModels[key].description(), 'frozen'); - this.contentModels[key].set('synced', false); + if (this.contentModels[key].get('state') == 'dirty') { + this.contentModels[key].update(message); + break; } } + }, + + update: function() { + this.set('state', 'loading'); + $.ajax({ + url: this.data.merge_url, + dataType: 'json', + type: 'post', + data: { + type: 'update', + target_revision: this.data.user_revision + }, + complete: this.updateCompleted.bind(this), + success: function(data) { this.set('updateData', data); }.bind(this) + }); + }, + + updateCompleted: function(xhr, textStatus) { + console.log(xhr.status, textStatus); + if (xhr.status == 200) { // Sukces + this.data.user_revision = this.get('updateData').revision; + messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision, + 'Uaktualnienie dokumentu do wersji ' + this.get('updateData').revision); + for (var key in this.contentModels) { + this.contentModels[key].set('revision', this.data.user_revision); + this.contentModels[key].set('state', 'empty'); + } + } else if (xhr.status == 202) { // Wygenerowano PullRequest (tutaj?) + } else if (xhr.status == 204) { // Nic nie zmieniono + } else if (xhr.status == 409) { // Konflikt podczas operacji + } + this.set('state', 'synced'); + this.set('updateData', null); + }, + + merge: function(message) { + this.set('state', 'loading'); + $.ajax({ + url: this.data.merge_url, + type: 'post', + dataType: 'json', + data: { + type: 'share', + target_revision: this.data.user_revision, + message: message + }, + complete: this.mergeCompleted.bind(this), + success: function(data) { this.set('mergeData', data); }.bind(this) + }); + }, + + mergeCompleted: function(xhr, textStatus) { + console.log(xhr.status, textStatus); + if (xhr.status == 200) { // Sukces + this.data.user_revision = this.get('mergeData').revision; + for (var key in this.contentModels) { + this.contentModels[key].set('revision', this.data.user_revision); + this.contentModels[key].set('state', 'empty'); + } + messageCenter.addMessage('info', 'Uaktualnienie dokumentu do wersji ' + this.get('mergeData').revision, + 'Uaktualnienie dokumentu do wersji ' + this.get('mergeData').revision); + } else if (xhr.status == 202) { // Wygenerowano PullRequest + } else if (xhr.status == 204) { // Nic nie zmieniono + } else if (xhr.status == 409) { // Konflikt podczas operacji + } + this.set('state', 'synced'); + this.set('mergeData', null); + }, + + // For debbuging + set: function(property, value) { + if (property == 'state') { + console.log(this.description(), ':', property, '=', value); + } + return this._super(property, value); } }); @@ -116,6 +406,9 @@ var leftPanelView, rightPanelContainer, doc; $(function() { doc = new Editor.DocumentModel(); + var editor = new EditorView('#body-wrap', doc); + editor.freeze(); + var flashView = new FlashView('#flashview', messageCenter); var splitView = new SplitView('#splitview', doc); leftPanelView = new PanelContainerView('#left-panel-container', doc); rightPanelContainer = new PanelContainerView('#right-panel-container', doc);