Created basic working client UI using ExtJS.
[~jspiros/reader.git] / templates / reader / lib.js
diff --git a/templates/reader/lib.js b/templates/reader/lib.js
new file mode 100644 (file)
index 0000000..94f62d1
--- /dev/null
@@ -0,0 +1,217 @@
+Ext.ns('Reader');
+
+
+Reader.SubscriptionPanel = Ext.extend(Ext.Panel, {
+       constructor: function(application, config) {
+               this.application = application;
+               var self = this;
+               
+               var listView = this.listView = new Ext.list.ListView({
+                       emptyText: 'No Subscriptions',
+                       store: this.application.subscription_store,
+                       columns: [
+                               {
+                                       header: 'Title',
+                                       dataIndex: 'title',
+                                       width: .75,
+                               },
+                               {
+                                       header: 'Unread',
+                                       dataIndex: 'unread',
+                                       align: 'right',
+                               },
+                       ],
+                       hideHeaders: true,
+                       singleSelect: true,
+                       loadingText: 'Loading...',
+               });
+               
+               Reader.SubscriptionPanel.superclass.constructor.call(this, Ext.applyIf(config||{}, {
+                       title: 'Subscriptions',
+                       items: [
+                               this.listView,
+                       ],
+                       bbar: [
+                               {
+                                       text: 'Add Feed...',
+                                       iconCls: 'icon-add-feed',
+                                       handler: function() {
+                                               Ext.MessageBox.prompt('Add Feed', 'Enter the URL to the feed:', function(button, text) {
+                                                       if (button == 'ok') {
+                                                               Ext.Ajax.request({
+                                                                       url: '{% url reader_add_subscription %}',
+                                                                       params: {
+                                                                               'url': text,
+                                                                               'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
+                                                                       },
+                                                                       success: function() {
+                                                                               self.application.subscription_store.reload();
+                                                                       },
+                                                                       failure: function() {
+                                                                               alert('Unable to add feed.');
+                                                                       },
+                                                               });
+                                                       }
+                                               });
+                                       },
+                               },'->',{
+                                       text: 'Refresh',
+                                       handler: function() {
+                                               self.application.subscription_store.reload();
+                                       },
+                               },
+                       ],
+                       collapsible: true,
+               }));
+               
+               listView.on('selectionchange', function(listView, selections) {
+                       if (selections.length > 0) {
+                               self.application.selected_subscription(listView.getSelectedRecords()[0]['data']);
+                       }
+               });
+       },
+});
+
+
+Reader.EntryPanel = Ext.extend(Ext.Panel, {
+       constructor: function(application, config) {
+               this.application = application;
+               var self = this;
+               
+               var gridView = this.gridView = new Ext.grid.GridPanel({
+                       store: this.application.entry_store,
+                       columns: [
+                               {
+                                       header: 'Title',
+                                       dataIndex: 'title',
+                               },
+                               {
+                                       header: 'Date',
+                                       dataIndex: 'date',
+                               },
+                       ],
+                       viewConfig: {
+                               forceFit: true,
+                       },
+                       sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
+                       region: 'north',
+                       split: true,
+                       height: 200,
+                       minSize: 150,
+                       maxSize: 400,
+               });
+               
+               var entryDetailTpl = this.entryDetailTpl = new Ext.Template(
+                       '<h1><a href="{link}" target="_blank">{title}</a></h1>',
+                       '<p style="font-size: smaller;">{date}</p>',
+                       '<p>{content}</p>'
+               );
+               
+               var entryDetail = this.entryDetail = {
+                       id: 'entryDetail',
+                       region: 'center',
+                       bodyStyle: {
+                               background: 'white',
+                               padding: '7px',
+                               color: 'black',
+                       },
+                       preventBodyReset: true,
+                       html: 'Select an entry to view',
+                       autoScroll: true,
+               };
+               
+               gridView.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
+                       var detailPanel = Ext.getCmp('entryDetail');
+                       entryDetailTpl.overwrite(detailPanel.body, r.data);
+                       
+                       Ext.Ajax.request({
+                               url: '{% url reader_read_entry %}',
+                               params: {
+                                       'entry_id': r.data['id'],
+                                       'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
+                               },
+                               success: function() {
+                                       self.application.subscription_store.reload();
+                               },
+                               failure: function() {
+                                       console.log('Unable to set read entry');
+                               },
+                       });
+               });
+               
+               Reader.EntryPanel.superclass.constructor.call(this, Ext.applyIf(config||{}, {
+                       title: 'Entries',
+                       header: true,
+                       items: [ this.gridView, this.entryDetail ],
+                       layout: 'border',
+               }));
+       },
+});
+
+
+Reader.Application = Ext.extend(Ext.util.Observable, {
+       constructor: function(config) {
+               Ext.apply(this, config, {
+                       renderTo: Ext.getBody(),
+               });
+               Reader.Application.superclass.constructor.call(this);
+               this.init();
+       },
+       init: function() {
+               Ext.QuickTips.init();
+               
+               var subscription_store = this.subscription_store = new Ext.data.JsonStore({
+                       autoLoad: true,
+                       autoDestroy: true,
+                       url: '{% url reader_get_subscriptions %}',
+                       root: 'root',
+                       totalProperty: 'len',
+                       fields: [
+                               'id',
+                               'title',
+                               'unread',
+                       ]
+               });
+               
+               var entry_store = this.entry_store = new Ext.data.JsonStore({
+                       url: '{% url reader_get_entries %}',
+                       baseParams: {
+                               'subscription_id': '-2',
+                               'csrfmiddlewaretoken': '{% with csrf_token as csrf_token_clean %}{{ csrf_token_clean }}{% endwith %}',
+                       },
+                       root: 'root',
+                       totalProperty: 'len',
+                       fields: [
+                               'id', 'title', 'date', 'content', 'link'
+                       ],
+               });
+               
+               var subscription_panel = this.subscription_panel = new Reader.SubscriptionPanel(this, {
+                       region: 'west',
+                       split: true,
+                       width: 200,
+                       minSize: 150,
+                       maxSize: 400,
+               });
+               var entry_panel = this.entry_panel = new Reader.EntryPanel(this, {
+                       region: 'center',
+                       autoScroll: true,
+               });
+               var viewport = this.viewport = new Ext.Viewport({
+                       layout: 'border',
+                       renderTo: this.renderTo,
+                       items: [
+                               this.subscription_panel,
+                               this.entry_panel,
+                       ],
+               });
+               
+               this.viewport.doLayout();
+       },
+       selected_subscription: function(subscription) {
+               this.entry_panel.setTitle(subscription['title']);
+               this.entry_store.reload({ params: {
+                       'subscription_id': subscription['id'],
+               }});
+       }
+});
\ No newline at end of file