<#import "/spring.ftl" as spring>

<#-- ### Content Panel -->
Ext.define('App.view.ContentPanel', {
	extend: 'Ext.panel.Panel',
	xtype: 'contentPanel',

	id: 'contentPanel',
	scrollable: true,
	height: '100%',
	width: '100%',
	<#--  title: '&nbsp;'  -->	
});

<#-- ### Header -->
Ext.define('App.view.Header', {
	extend: 'Ext.toolbar.Toolbar',
	xtype: 'appheader',
	
	<#--
	cls: 'header-toolbar',
	-->
	style:{
		background: '#8bc34a !important',
		padding: '0 0 0 6px !important',
		// background-image: 'url('../images/user/header-bg.png') !important'
		<#--  'toolbar-border-style' : '0 4px 8px 0 rgba(0,0,0,0.2)'  -->
		<#--  'border-bottom': '1px solid #191919 !important',  -->
		<#--  '-webkit-box-shadow': 'inset 0 0 1px rgba(255, 255, 255, 0.1), 0 0 3px rgba(0, 0, 0, 0.8) !important',  -->
	},
	onChangeLocale: function(locale) {
		Ext.Ajax.request({
			method: 'GET',
			url: '<@spring.url "/locale" />',
			params:	{ locale: locale },

			success: function(response, opts) {
				var obj = Ext.decode(response.responseText);
				location.reload(); 
			},

			failure: function(response, opts) {
				console.log('server-side failure with status code ' + response.status);
			}
		});
	},

	initComponent: function() {
		var me = this;
		const items = [];
		
		me.items = [
			{
				xtype: 'tbitem',
				html: '<a href="<@spring.url "/home" />"><img src="<@spring.url "/resources/images/logo.png" />" width="75" height="24" /></a>',
				width: 75,
				height: 24
			},
			{
				xtype: 'toolbar',
				overflowHandler: 'menu',
				items: items,
				flex: 1,
				style: me.style,
			},
		];
		Ext.apply(items, [
			{
				xtype: 'button',
				text: 'PCS',
				//tooltip: '',
				iconCls: 'silk-monitor',
				width: 85,
				handler: function(button, e) {
					App.location('<@spring.url "/pcs" />');
				}
			},
			{
				xtype: 'button',
				text: 'Edit ',
				iconCls: 'silk-monitor',
				width: 85,
				menu: [
					{
						text: 'Vendor',
						iconCls: 'icon-users',
						handler: function(button, e) {
							App.loadModule('vendorPanel');
						}
					},
					'-',
					{
						text: 'Equipment',
						iconCls: 'icon-users',
						handler: function(button, e) {
							App.loadModule('equipmentBasePanel');
						}
					},
					
				]
			},
			{
				xtype: 'button',
				text: 'New ViewPort',
				//tooltip: '',
				iconCls: 'silk-monitor',
				width: 85,
				handler: function(button, e) {
					window.open('<@spring.url "/home/new-viewport" />');
				}
			},

			'->',
			{
				xtype: 'combo',
				store: Ext.create('App.store.LocaleStore', {}),
				valueField: 'value',
				value: '${rc.getLocale()}',
				editable: false,
				forceSelection: true,
				width: 68+15,
				hideTrigger: true,
				displayTpl: '<tpl for=".">🌐{text}</tpl>',
				listeners: {
					change: function(combo, newValue, oldValue, eOpts) {
						me.onChangeLocale(newValue);
					}
				}
			},
			<#--
			{
				xtype: 'tbtext',
				text: '${SecurityUtils.getUser().getFullname()}',
				cls: 'x-panel-header-text-container-default header-text'
			},
			{
				xtype: 'tbspacer'
			},
			-->
			{
				xtype: 'button',
				text: '${SecurityUtils.getUser().getFullname()}',
				//tooltip: '',
				iconCls: 'icon-page-key',
				//iconCls: 'fa fa-key',
				//cls: 'password-btn',
				handler: function() {
					App.loadModuleWin('userChangePasswordWindow');
				}
			},
			{
				xtype: 'button',
				text: '<@spring.message "COMMON.logout" />',
				//tooltip: '',
				iconCls: 'icon-generate',
				//cls: 'logout-btn',
				//iconCls: 'fa fa-sign-out',
				handler: function() {
					App.logout();
				}
			}
		]);
		me.callParent(arguments);
	}
});

<#-- ### Viewport -->
Ext.define('App.view.Viewport', {
	extend: 'Ext.container.Viewport',

	layout: {
		type: 'border'
	},

	initComponent: function() {
		var me = this;

		Ext.apply(me, {
			items: [
<#if !SecurityUtils.isGranted("KANBAN_MODE")>
				{
					xtype: 'appheader',
					region: 'north',
					height: 48
				},
</#if>
				{
					xtype: 'contentPanel',
					region: 'center'
				}
			],
			listeners: {
				render: function(viewport, eOpts) {
//					App.loadModule('dashboardPanel');
//					App.loadModule('kanbanJobStatusView');
				}
			}
		});

		me.callParent(arguments);
	}

});
