From 893c838579d9446d28259793415667cddd069eec Mon Sep 17 00:00:00 2001 From: Brandon King Date: Thu, 18 Jun 2009 22:58:19 +0000 Subject: [PATCH] Major UI Changes: * Panels no longer collapse (for now) * Right side of toolbar is defined in html * Login/Logout buttons work. * HTML/JS needs a bit of clean up... but making progress. =o) --- templates/app.html | 20 ++--- www/js/htsw.js | 179 +++++++++++++++++++++++++-------------------- 2 files changed, 109 insertions(+), 90 deletions(-) diff --git a/templates/app.html b/templates/app.html index 4d0e416..cc7bd29 100644 --- a/templates/app.html +++ b/templates/app.html @@ -85,17 +85,17 @@ Change_PW -
- {% if user.is_authenticated %} - Logged in as {{ user.username }}.
- Logout - {% else %} -
Not logged in
- {% endif %} -
-
- {% include "magic.html" %} +
+ {% include "magic.html" %} +
+ +
+ +
+
+
+
{% block msg %} diff --git a/www/js/htsw.js b/www/js/htsw.js index 9f21254..062ff2a 100644 --- a/www/js/htsw.js +++ b/www/js/htsw.js @@ -6,14 +6,30 @@ Ext.override(Ext.Panel,{ } }); +var quick_msg = function(msg) +{ + Ext.MessageBox.show({ + title: 'Info', + msg: msg, + buttons: Ext.MessageBox.OK, + icon: Ext.MessageBox.INFO + }); +} + +var goto_url = function(www_url) + { + //quick_msg(www_url); + window.location = www_url; + } + $(document).ready(function(){ var panel_freezers = new Ext.Panel({ frame: true, title: 'Freezers', - collapsible: true, + //collapsible: true, titleCollapse: true, - collapsed: true, + //collapsed: true, stateful: true, stateId: 'freezer_panel_state', contentEl: 'freezer_menu', @@ -23,9 +39,9 @@ $(document).ready(function(){ var panel_containers = new Ext.Panel({ frame: true, title: 'Containers', - collapsible: true, + //collapsible: true, titleCollapse: true, - collapsed: true, + //collapsed: true, stateful: true, stateId: 'container_panel_state', contentEl: 'container_menu', @@ -35,73 +51,54 @@ $(document).ready(function(){ var panel_samples = new Ext.Panel({ frame: true, title: 'Samples', - collapsible: true, + //collapsible: true, titleCollapse: true, - collapsed: true, + //collapsed: true, stateful: true, stateId: 'sample_panel_state', contentEl: 'sample_menu', stateEvents: ['collapse', 'expand'] }); - var panel_settings = new Ext.Panel({ + /*var panel_settings = new Ext.Panel({ frame: true, title: 'Settings', - collapsible: true, + //collapsible: true, titleCollapse: true, - collapsed: true, + //collapsed: true, stateful: true, stateId: 'settings_panel_state', contentEl: 'settings_menu', stateEvents: ['collapse', 'expand'] - }); + });*/ var panel_bcmagic = new Ext.Panel({ //title: 'BC Magic', + unstyled: true, contentEl: 'bcmagic_div', - height: 160 + height: 180 }); var menuPanel = new Ext.Panel({ - id: 'menu_panel', - region: 'west', - collapsible: true, - margins: '2 0 0 0', - cmargins: '2 2 0 2', - //collapseMode: 'mini', - width: 200, - minWidth: 150, - border: false, - //baseCls: 'x-plain', - items: [panel_freezers, panel_containers, panel_samples, panel_settings, panel_bcmagic] - }); - - /*var menuAccordionPanel = new Ext.Panel({ - id: 'menu_accordion', - flex: 1, - layout: 'accordion', + id: 'menu_panel', + region: 'west', + collapsible: true, + margins: '2 0 0 0', + cmargins: '2 2 0 2', + //collapseMode: 'mini', + width: 200, + minWidth: 150, + border: false, + //baseCls: 'x-plain', + unstyled: true, + layout: 'vbox', layoutConfig: { - animate: true, - fill: false + align: 'stretch', + pack: 'start' }, - items: [{ - title: 'Freezers', - id: 'freezers_menu_panel', - contentEl: 'freezer_menu' - },{ - title: 'Containers', - id: 'containers_menu_panel', - contentEl: 'container_menu' - },{ - title: 'Samples', - id: 'samples_menu_panel', - contentEl: 'sample_menu' - },{ - title: 'Settings', - id: 'settings_menu_panel', - contentEl: 'settings_menu' - }] - });*/ + items: [panel_freezers, panel_containers, panel_samples, /*panel_settings,*/ panel_bcmagic] + }); + var mainBorderPanel = new Ext.Viewport({ layout: 'border', @@ -118,37 +115,17 @@ $(document).ready(function(){ id: 'header-panel', height: 30 },{ + id: 'main_toolbar', xtype: 'toolbar', //height: 100, items: [{ - text: "Button" + text: "Demo Button", + handler: function() { quick_msg('Messages can be fun!'); } }], margins: '2 0 0 0' }], height: 60 - },menuPanel,/*{ - title: 'Menu', - region: 'west', - margins: '2 0 0 0', - width: 200, - collapsible: true, - cmargins: '2 2 0 2', - id: 'menu-panel', - layout: 'vBox', - layoutConfig: { - align: 'stretch', - pack: 'start' - }, - items: [ - menuAccordionPanel, - { - xtype: 'box', - applyTo: 'bcmagic_div', - height: 160 - }] - - //unstyled: true - },*/{ + },menuPanel,{ title: 'Body', region: 'center', xtype: 'container', @@ -162,13 +139,55 @@ $(document).ready(function(){ }] }); - /* - Ext.MessageBox.show({ - title: 'Debug', - msg: 'menuAccordionPanel id: ' + menuAccordionPanel.getItemId(), - buttons: Ext.MessageBox.OK, - icon: Ext.MessageBox.INFO - }) - */ + //------------------------------- + // Menu Bar Setup + //------------------------------- + var main_tb = Ext.getCmp('main_toolbar'); + + var add_buttons_from_html = function(main_tb){ + var right_tbar_data = Ext.fly('right_tbar_data'); + var div_array = right_tbar_data.query('div'); + var div_id = null; + // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar + Ext.each(div_array, function(divobj) { + div_id = divobj.id; + if (div_id == 'spacer'){ + main_tb.add('-'); + } else { + main_tb.add({ + text: div_id, + handler: function() { goto_url(divobj.getAttribute('href')); } + }); + } + }); + //return right_tbar_data; + } + + main_tb.add({ xtype: 'tbfill' }); + var user_info = Ext.fly('login_info'); + var logout_url = user_info.getAttribute('logouturl'); + var login_url = user_info.getAttribute('loginurl'); + + if (user_info.getAttribute('authenticated') == 'true') { + main_tb.add({ + xtype: 'tbtext', + text: 'User: ' + user_info.getAttribute('user') + }); + main_tb.add('-'); + add_buttons_from_html(main_tb); + main_tb.add('-'); + main_tb.add({ + text: 'Logout', + handler: function() { goto_url(logout_url); } + }); + + } else { + main_tb.add({ + text: 'Login', + handler: function() { goto_url(login_url) } + }); + } + + main_tb.doLayout(); }); \ No newline at end of file -- 2.30.2