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)

diff --git a/templates/app.html b/templates/app.html
index 4d0e41658971a3c827c76c0c1862ab71257d3093..cc7bd2953f78d4e26ebaaf53c0d310246bbf865e 100644 (file)
--- a/templates/app.html
+++ b/templates/app.html
@@ -85,17 +85,17 @@
             <a href="{% url django.contrib.auth.views.password_change %}">Change_PW</a>
         </li>
     </ul>
-    <div id="bcmagic_div">
-    {% if user.is_authenticated %}
-    Logged in as <b>{{ user.username }}</b>.<br />
-    <a href="{% url django.contrib.auth.views.logout_then_login %}">Logout</a>
-    {% else %}
-    <center>Not logged in</center>
-    {% endif %}
-    <br />
-    <br />
-    {% include "magic.html" %}
+    <div id="bcmagic_div" class="x-hidden">
+        {% include "magic.html" %}
+    </div>
+    
+    <div id="right_tbar_data" class="x-hidden">
+        <!--<div id="spacer"></div>-->
+        <div id="Admin" href="/admin/"></div>
+        <div id="Profile" href="{% url samplebc.samples.views.user_profile %}"></div>
+        <div id="Password Change" href="{% url django.contrib.auth.views.password_change %}"></div>
     </div>
+    <div id="login_info" class="x-hidden" authenticated="{{ user.is_authenticated|lower }}" user="{{ user.username }}" loginurl="{% url django.contrib.auth.views.login %}" logouturl="{% url django.contrib.auth.views.logout_then_login %}"></div>
     
     <div id="body_content">
         {% block msg %}

diff --git a/www/js/htsw.js b/www/js/htsw.js
index 9f212545ad89a06c11a47b2787af42390f05512c..062ff2a3e66bbd89195f8415c022da60ba49d019 100644 (file)
--- 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