Browse Source
Created new views for Add New Service window and allow custom domains for special services (self-hosted). Fixes #324 Fixes #341pull/367/head
Ramiro Saenz
9 years ago
8 changed files with 394 additions and 631 deletions
@ -0,0 +1,219 @@
|
||||
Ext.define('Rambox.view.add.Add',{ |
||||
extend: 'Ext.window.Window' |
||||
|
||||
,requires: [ |
||||
'Rambox.view.add.AddController' |
||||
,'Rambox.view.add.AddModel' |
||||
] |
||||
|
||||
,controller: 'add-add' |
||||
,viewModel: { |
||||
type: 'add-add' |
||||
} |
||||
|
||||
// private
|
||||
,record: null |
||||
,service: null |
||||
,edit: false |
||||
|
||||
// defaults
|
||||
,modal: true |
||||
,width: 500 |
||||
,autoShow: true |
||||
,resizable: false |
||||
,draggable: false |
||||
,bodyPadding: 20 |
||||
|
||||
,initComponent: function() { |
||||
var me = this; |
||||
|
||||
me.title = (!me.edit ? 'Add ' : 'Edit ') + me.record.get('name'); |
||||
me.icon = me.record.get('type') === 'custom' ? (!me.edit ? 'resources/icons/custom.png' : (me.record.get('logo') === '' ? 'resources/icons/custom.png' : me.record.get('logo'))) : 'resources/icons/'+me.record.get('logo'); |
||||
me.items = [ |
||||
{ |
||||
xtype: 'form' |
||||
,items: [ |
||||
{ |
||||
xtype: 'textfield' |
||||
,fieldLabel: 'Name' |
||||
,value: me.record.get('type') === 'custom' ? (me.edit ? me.record.get('name') : '') : me.record.get('name') |
||||
,name: 'serviceName' |
||||
,allowBlank: true |
||||
,listeners: { specialkey: 'onEnter' } |
||||
} |
||||
,{ |
||||
xtype: 'container' |
||||
,layout: 'column' |
||||
,hidden: me.edit ? me.service.get('url').indexOf('___') === -1 && !me.service.get('custom_domain') : me.record.get('url').indexOf('___') === -1 && !me.record.get('custom_domain') |
||||
,items: [ |
||||
{ |
||||
xtype: 'textfield' |
||||
,fieldLabel: 'URL' |
||||
,name: 'url' |
||||
,value: me.edit && me.service.get('url').indexOf('___') >= 0 ? me.record.get('url').replace(me.service.get('url').split('___')[0], '').replace(me.service.get('url').split('___')[1], '') : (me.record.get('url').indexOf('___') === -1 ? me.record.get('url') : '') |
||||
,readOnly: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? true : me.service.get('url').indexOf('___') === -1 && !me.service.get('custom_domain')) : me.record.get('url').indexOf('___') === -1 && me.record.get('custom_domain') |
||||
,allowBlank: false |
||||
,submitEmptyText: false |
||||
,emptyText: me.record.get('url') === '___' ? 'http://' : '' |
||||
,vtype: me.record.get('url') === '___' ? 'url' : '' |
||||
,width: 275 |
||||
,listeners: { specialkey: 'onEnter' } |
||||
} |
||||
,{ |
||||
xtype: 'cycle' |
||||
,showText: true |
||||
,style: 'border-top-left-radius:0;border-bottom-left-radius:0;' |
||||
,hidden: me.edit ? me.service.get('type') === 'custom' || me.service.get('url') === '___' : me.record.get('type') === 'custom' || me.record.get('url') === '___' |
||||
,arrowVisible: me.edit ? (me.service.get('url').indexOf('___') >= 0 && !me.service.get('custom_domain') ? false : me.service.get('custom_domain')) : (me.record.get('url').indexOf('___') >= 0 && !me.record.get('custom_domain') ? false : me.record.get('custom_domain')) |
||||
,menu: { |
||||
items: [ |
||||
{ |
||||
text: me.edit ? (me.service.get('url').indexOf('___') === -1 ? 'Official Server' : Ext.String.endsWith(me.service.get('url'), '/') ? me.service.get('url').split('___')[1].slice(0, -1) : me.service.get('url').split('___')[1]) : (me.record.get('url').indexOf('___') === -1 ? 'Official Server' : Ext.String.endsWith(me.record.get('url'), '/') ? me.record.get('url').split('___')[1].slice(0, -1) : me.record.get('url').split('___')[1]) |
||||
,checked: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? true : Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1])) : true |
||||
,disabled: me.edit ? me.service.get('url') === '___' : me.record.get('url') === '___' |
||||
} |
||||
,{ |
||||
text: 'Custom Server' |
||||
,checked: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? false : !Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1])) : false |
||||
,custom: true |
||||
,disabled: me.edit ? !me.service.get('custom_domain') : !me.record.get('custom_domain') |
||||
} |
||||
] |
||||
} |
||||
// Fixes bug EXTJS-20094 for version Ext JS 5
|
||||
,arrowHandler: function(cycleBtn, e) { |
||||
if ( !cycleBtn.arrowVisible ) cycleBtn.hideMenu(); |
||||
} |
||||
,changeHandler: function(cycleBtn, activeItem) { |
||||
Ext.apply(cycleBtn.previousSibling(), { |
||||
emptyText: activeItem.custom ? 'http://' : ' ' |
||||
,vtype: activeItem.custom ? 'url' : '' |
||||
}); |
||||
cycleBtn.previousSibling().applyEmptyText(); |
||||
cycleBtn.previousSibling().reset(); |
||||
|
||||
if ( me.edit && cycleBtn.nextSibling().originalValue !== '2' ) { |
||||
me.service.get('custom_domain') && !activeItem.custom ? cycleBtn.previousSibling().reset() : cycleBtn.previousSibling().setValue(''); |
||||
} else if ( me.edit && cycleBtn.nextSibling().originalValue === '2' ) { |
||||
me.service.get('custom_domain') && !activeItem.custom ? cycleBtn.previousSibling().setValue( me.service.get('url').indexOf('___') === -1 && me.service.get('custom_domain') ? me.service.get('url') : '') : cycleBtn.previousSibling().reset(); |
||||
} else if ( !me.edit && cycleBtn.nextSibling().originalValue === '1' ) { |
||||
activeItem.custom ? cycleBtn.previousSibling().setValue('') : cycleBtn.previousSibling().reset(); |
||||
} |
||||
|
||||
cycleBtn.previousSibling().setReadOnly( activeItem.custom ? false : (me.edit ? me.service.get('url').indexOf('___') === -1 : me.record.get('url').indexOf('___') === -1) ); |
||||
cycleBtn.nextSibling().setValue( activeItem.custom ? 2 : 1 ); |
||||
} |
||||
} |
||||
,{ |
||||
xtype: 'hiddenfield' |
||||
,name: 'cycleValue' |
||||
,value: me.edit ? (me.service.get('custom_domain') && me.service.get('url') === me.record.get('url') ? 1 : (!Ext.String.endsWith(me.record.get('url'), me.service.get('url').split('___')[1]) ? 2 : 1)) : 1 |
||||
} |
||||
] |
||||
} |
||||
,{ |
||||
xtype: 'textfield' |
||||
,fieldLabel: 'Logo' |
||||
,emptyText: 'http://url.com/image.png' |
||||
,name: 'logo' |
||||
,vtype: me.record.get('type') === 'custom' ? 'url' : '' |
||||
,value: me.record.get('type') === 'custom' ? (me.edit ? me.record.get('logo') : '') : me.record.get('logo') |
||||
,allowBlank: true |
||||
,hidden: me.record.get('type') !== 'custom' |
||||
,margin: '5 0 0 0' |
||||
,listeners: { specialkey: 'onEnter' } |
||||
} |
||||
,{ |
||||
xtype: 'fieldset' |
||||
,title: 'Options' |
||||
,margin: '10 0 0 0' |
||||
,items: [ |
||||
{ |
||||
xtype: 'checkbox' |
||||
,boxLabel: 'Align to Right' |
||||
,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false |
||||
,name: 'align' |
||||
,uncheckedValue: 'left' |
||||
,inputValue: 'right' |
||||
} |
||||
,{ |
||||
xtype: 'checkbox' |
||||
,boxLabel: 'Show notifications' |
||||
,name: 'notifications' |
||||
,checked: me.edit ? me.record.get('notifications') : true |
||||
,uncheckedValue: false |
||||
,inputValue: true |
||||
} |
||||
,{ |
||||
xtype: 'checkbox' |
||||
,boxLabel: 'Mute all sounds' |
||||
,name: 'muted' |
||||
,checked: me.edit ? me.record.get('muted') : false |
||||
,uncheckedValue: false |
||||
,inputValue: true |
||||
} |
||||
,{ |
||||
xtype: 'checkbox' |
||||
,boxLabel: 'Trust invalid authority certificates' |
||||
,name: 'trust' |
||||
,hidden: me.record.get('type') !== 'custom' |
||||
,checked: me.edit ? me.record.get('trust') : false |
||||
,uncheckedValue: false |
||||
,inputValue: true |
||||
} |
||||
] |
||||
} |
||||
,{ |
||||
xtype: 'fieldset' |
||||
,title: 'Advanced' |
||||
,margin: '10 0 0 0' |
||||
,collapsible: true |
||||
,collapsed: true |
||||
,items: [ |
||||
{ |
||||
xtype: 'textarea' |
||||
,fieldLabel: 'Custom Code (<a href="https://github.com/saenzramiro/rambox/wiki/Inject-JavaScript-Code" target="_blank">read more</a>)' |
||||
,allowBlank: true |
||||
,name: 'js_unread' |
||||
,value: me.edit ? me.record.get('js_unread') : '' |
||||
,anchor: '100%' |
||||
,height: 120 |
||||
} |
||||
] |
||||
} |
||||
,{ |
||||
xtype: 'container' |
||||
,hidden: (me.edit ? Ext.getStore('ServicesList').getById(me.record.get('type')).get('note') === '' : me.record.get('note') === '') |
||||
,data: { note: (me.edit ? Ext.getStore('ServicesList').getById(me.record.get('type')).get('note') : me.record.get('note')) } |
||||
,margin: '10 0 0 0' |
||||
,style: 'background-color:#93CFE0;color:#053767;border-radius:6px;' |
||||
,tpl: [ |
||||
'<i class="fa fa-info-circle" aria-hidden="true" style="font-size:40px;margin:20px;"></i>' |
||||
,'<span style="font-size: 15px;position: absolute;padding: 10px 10px 10px 0;">{note}</span>' |
||||
] |
||||
} |
||||
] |
||||
} |
||||
]; |
||||
|
||||
me.buttons = [ |
||||
{ |
||||
text: 'Cancel' |
||||
,ui: 'decline' |
||||
,handler: 'doCancel' |
||||
} |
||||
,'->' |
||||
,{ |
||||
text: me.title |
||||
,itemId: 'submit' |
||||
,handler: 'doSave' |
||||
} |
||||
]; |
||||
|
||||
this.callParent(this); |
||||
} |
||||
|
||||
,listeners: { |
||||
show: 'onShow' |
||||
} |
||||
}); |
||||
@ -0,0 +1,125 @@
|
||||
Ext.define('Rambox.view.add.AddController', { |
||||
extend: 'Ext.app.ViewController' |
||||
,alias: 'controller.add-add' |
||||
|
||||
,doCancel: function( btn ) { |
||||
var me = this; |
||||
|
||||
me.getView().close(); |
||||
} |
||||
|
||||
,doSave: function( btn ) { |
||||
var me = this; |
||||
|
||||
var win = me.getView(); |
||||
if ( !win.down('form').isValid() ) return false; |
||||
|
||||
var formValues = win.down('form').getValues(); |
||||
|
||||
if ( win.edit ) { |
||||
// Format data
|
||||
if ( win.service.get('url').indexOf('___') >= 0 ) { |
||||
formValues.url = formValues.cycleValue === '1' ? win.service.get('url').replace('___', formValues.url) : formValues.url; |
||||
} |
||||
|
||||
var oldData = win.record.getData(); |
||||
win.record.set({ |
||||
logo: formValues.logo |
||||
,name: formValues.serviceName |
||||
,url: formValues.url |
||||
,align: formValues.align |
||||
,notifications: formValues.notifications |
||||
,muted: formValues.muted |
||||
,trust: formValues.trust |
||||
,js_unread: formValues.js_unread |
||||
}); |
||||
// Change the title of the Tab
|
||||
Ext.getCmp('tab_'+win.record.get('id')).setTitle(formValues.serviceName); |
||||
// Change sound of the Tab
|
||||
Ext.getCmp('tab_'+win.record.get('id')).setAudioMuted(formValues.muted); |
||||
// Change notifications of the Tab
|
||||
Ext.getCmp('tab_'+win.record.get('id')).setNotifications(formValues.notifications); |
||||
// Change the icon of the Tab
|
||||
if ( win.record.get('type') === 'custom' && oldData.logo !== formValues.logo ) Ext.getCmp('tab_'+win.record.get('id')).setConfig('icon', formValues.logo === '' ? 'resources/icons/custom.png' : formValues.logo); |
||||
// Change the URL of the Tab
|
||||
if ( oldData.url !== formValues.url ) Ext.getCmp('tab_'+win.record.get('id')).setURL(formValues.url); |
||||
// Change the align of the Tab
|
||||
if ( oldData.align !== formValues.align ) { |
||||
if ( formValues.align === 'left' ) { |
||||
Ext.cq1('app-main').moveBefore(Ext.getCmp('tab_'+win.record.get('id')), Ext.getCmp('tbfill')); |
||||
} else { |
||||
Ext.cq1('app-main').moveAfter(Ext.getCmp('tab_'+win.record.get('id')), Ext.getCmp('tbfill')); |
||||
} |
||||
} |
||||
// Apply the JS Code of the Tab
|
||||
if ( win.down('textarea').isDirty() ) { |
||||
Ext.Msg.confirm('CUSTOM CODE', 'Rambox needs to reload the service to execute the new JavaScript code. Do you want to do it now?', function( btnId ) { |
||||
if ( btnId === 'yes' ) Ext.getCmp('tab_'+win.record.get('id')).reloadService(); |
||||
}); |
||||
} |
||||
|
||||
Ext.getCmp('tab_'+win.record.get('id')).record = win.record; |
||||
Ext.getCmp('tab_'+win.record.get('id')).tabConfig.service = win.record; |
||||
} else { |
||||
// Format data
|
||||
if ( win.record.get('url').indexOf('___') >= 0 ) { |
||||
formValues.url = formValues.cycleValue === 1 ? win.record.get('url').replace('___', formValues.url) : formValues.url; |
||||
} |
||||
|
||||
var service = Ext.create('Rambox.model.Service', { |
||||
type: win.record.get('id') |
||||
,logo: formValues.logo |
||||
,name: formValues.serviceName |
||||
,url: formValues.url |
||||
,align: formValues.align |
||||
,notifications: formValues.notifications |
||||
,muted: formValues.muted |
||||
,trust: formValues.trust |
||||
,js_unread: formValues.js_unread |
||||
}); |
||||
service.save(); |
||||
Ext.getStore('Services').add(service); |
||||
|
||||
var tabData = { |
||||
xtype: 'webview' |
||||
,id: 'tab_'+service.get('id') |
||||
/* |
||||
,title: service.get('name') |
||||
,icon: service.get('logo') |
||||
,src: service.get('url') |
||||
,type: service.get('type') |
||||
,align: formValues.align |
||||
,notifications: formValues.notifications |
||||
,muted: formValues.muted |
||||
*/ |
||||
,record: service |
||||
,tabConfig: { |
||||
service: service |
||||
} |
||||
}; |
||||
|
||||
if ( formValues.align === 'left' ) { |
||||
var tbfill = Ext.cq1('app-main').getTabBar().down('tbfill'); |
||||
Ext.cq1('app-main').insert(Ext.cq1('app-main').getTabBar().items.indexOf(tbfill), tabData).show(); |
||||
} else { |
||||
Ext.cq1('app-main').add(tabData).show(); |
||||
} |
||||
} |
||||
|
||||
win.close(); |
||||
} |
||||
|
||||
,onEnter: function(field, e) { |
||||
var me = this; |
||||
|
||||
if ( e.getKey() == e.ENTER && field.up('form').isValid() ) me.doSave(); |
||||
} |
||||
|
||||
,onShow: function(win) { |
||||
var me = this; |
||||
|
||||
// Make focus to the name field
|
||||
win.down('textfield[name="serviceName"]').focus(true, 100); |
||||
} |
||||
|
||||
}); |
||||
@ -0,0 +1,4 @@
|
||||
Ext.define('Rambox.view.add.AddModel', { |
||||
extend: 'Ext.app.ViewModel' |
||||
,alias: 'viewmodel.add-add' |
||||
}); |
||||
Loading…
Reference in new issue