Extify the server list, resize the main panels when the size of the browser window changes

pyweb/mumble/templates/mumble/list.html

@@ -1,24 +1,105 @@
 {% extends "index.html" %}
 {% comment %}
-  <!-- kate: space-indent on; indent-width 2; replace-tabs on; -->
+    <!-- kate: space-indent on; indent-width 4; replace-tabs on; -->
 {% endcomment %}
-{% load i18n %}
 {% load mumble_extras %}
-{% block Headline %}
-Configured Mumble Servers
+{% load i18n %}
+{% block body %}
 {% endblock %}
-{% block Content %}
-<div class="rahmen">
-  <ul>
-  {% for mumble in MumbleObjects %}
-    {% if mumble.booted %}
-      <li><a href="{% url mumble.views.show mumble.id %}">{{ mumble.name }}</a></li>
-    {% else %}
-      <li>{{ mumble.name }} (offline)</li>
-    {% endif %}
-  {% empty %}
-    {% trans "No server instances have been configured yet." %}
-  {% endfor %}
-  </ul>
-</div>
+{% block HeadTag %}
+    <script type="text/javascript" src="/jsi18n/"></script>
+    <script type="text/javascript" src="/mumble/api/api.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/buttoniframewindow.js"></script>
+    <script type="text/javascript" src="{{ MEDIA_URL }}/js/loginout_buttons.js"></script>
+    <script type="text/javascript">
+        Ext.onReady( function(){
+            Ext.QuickTips.init();
+            mainpanel = new Ext.Panel({
+                renderTo: document.body,
+                height:   600,
+                layout:   "border",
+                title:    gettext("Mumble Servers"),
+                buttons: [
+                    {% if user.is_staff and ROSETTA_INSTALLED %}
+                    {
+                        xtype: 'buttonIframeWindow',
+                        text:  gettext('Edit Translation'),
+                        url: '{% url rosetta-home %}',
+                    },
+                    {% endif %}
+                    {% if user.is_staff %}
+                    {
+                        xtype: 'buttonIframeWindow',
+                        text:  gettext('Administration'),
+                        url: '{% url admin:app_list "mumble" %}',
+                    },
+                    {% endif %}
+                    {% if user.is_authenticated %}
+                        new Ext.ux.ButtonLogout()
+                    {% else %}
+                        new Ext.ux.ButtonLogin()
+                    {% endif %}
+                ],
+                items: [{
+                    xtype:  "listview",
+                    title: gettext("Available servers"),
+                    region: "west",
+                    width: 350,
+                    split: true,
+                    singleSelect: true,
+                    store: new Ext.data.DirectStore({
+                        directFn: MumbleList.servers,
+                        fields:   [ 'id', 'name' ],
+                        autoLoad: true
+                        }),
+                    columns: [{
+                        header: gettext("Name"),
+                        dataIndex: "name",
+                        width: 1.
+                    }],
+                    listeners: {
+                        dblclick: function(listview){
+                            selectedstuff = listview.getSelectedRecords();
+                            MumbleList.serverurl( selectedstuff[0].data.id, function(provider, response){
+                                window.location.href = response.result;
+                                });
+                        },
+                        selectionchange: function(listview, nodes){
+                            selectedstuff = listview.getSelectedRecords();
+                            MumbleList.serverinfo( selectedstuff[0].data.id, function(provider, response){
+                                mainpanel.descrippanel.el.dom.innerHTML = String.format(
+                                   "<ul><li>Serveradresse: {0}</li><li>Version: {1}</li></ul>"+
+                                   "<br /><fieldset><legend>Willkommensnachricht</legend>{2}</fieldset>",
+                                    response.result.connurl,
+                                    response.result.version,
+                                    response.result.motd
+                                    );
+                                });
+                        }
+                    },
+                }, {
+                    xtype:  "panel",
+                    region: "center",
+                    title:  gettext("Server overview"),
+                    ref:    'descrippanel',
+                    html:   "here goez teh servur descripshun",
+                }],
+            });
+            function updateLayout(){
+                viewsize = {
+                    width:  Ext.lib.Dom.getViewWidth(),
+                    height: Ext.lib.Dom.getViewHeight()
+                };
+                mainpanel.setHeight( viewsize.height - 20 );
+                mainpanel.setWidth( viewsize.width - 40 );
+            }
+            updateLayout();
+            Ext.EventManager.onWindowResize(updateLayout);
+        } );
+    </script>
+    <style type="text/css">
+        body {
+            padding: 20px 20px 0 20px;
+        }
+    </style>
 {% endblock %}

pyweb/mumble/templates/mumble/mumble.html

@@ -4,7 +4,8 @@
 {% endcomment %}
 {% load mumble_extras %}
 {% load i18n %}
-{% block body %}{% endblock %}
+{% block body %}
+{% endblock %}
 {% block HeadTag %}
     <script type="text/javascript" src="/jsi18n/"></script>
     <script type="text/javascript" src="/mumble/api/api.js"></script>
@@ -17,24 +18,32 @@
     <script type="text/javascript" src="{{ MEDIA_URL }}/js/buttoniframewindow.js"></script>
     <script type="text/javascript" src="{{ MEDIA_URL }}/js/loginout_buttons.js"></script>
     <script type="text/javascript">
-        viewsize = {
-            width:  Ext.lib.Dom.getViewWidth(),
-            height: Ext.lib.Dom.getViewHeight()
-        };
-
         Ext.onReady( function(){
             Ext.QuickTips.init();
             mainpanel = new Ext.Panel({
                 renderTo: document.body,
-                height:   viewsize.height,
+                height:   600,
                 layout:   "border",
-                title:    "{{ MumbleServer.name }}",
+                tbar: [ {
+                    text: gettext("back"),
+                    xtype: "button",
+                    handler: function(){
+                        location.href = "{% url mumble.views.mumbles %}";
+                    }
+                } ],
                 buttons: [
+                    {% if user.is_staff and ROSETTA_INSTALLED %}
+                    {
+                        xtype: 'buttonIframeWindow',
+                        text:  gettext('Edit Translation'),
+                        url: '{% url rosetta-home %}',
+                    },
+                    {% endif %}
                     {% if user.is_staff %}
                     {
                         xtype: 'buttonIframeWindow',
                         text:  gettext('Administration'),
-                        url: '/admin',
+                        url: '{% url admin:mumble_mumble_change MumbleServer.id %}',
                     },
                     {% endif %}
                     {% if user.is_authenticated %}
@@ -54,6 +63,15 @@
                     region: "center",
                     activeTab: 0,
                     items: [{
+                        title: gettext("Server info"),
+                        html:  String.format(
+                                   "<ul><li>Serveradresse: {0}</li><li>Version: {1}</li></ul>"+
+                                   "<br /><fieldset><legend>Willkommensnachricht</legend>{2}</fieldset>",
+                                    "{{ MumbleServer.connecturl }}",
+                                    "{{ MumbleServer.prettyversion }}",
+                                    "{{ MumbleServer.motd }}"
+                                    ),
+                    }, {
                         title: gettext("Registration"),
                         xtype: "{{ RegForm|lower }}",
                         pk: {% if MumbleAccount %}{{ MumbleAccount.id }}{% else %}-1{% endif %},
@@ -125,6 +143,21 @@
                     ],
                 }],
             });
+            function updateLayout(){
+                viewsize = {
+                    width:  Ext.lib.Dom.getViewWidth(),
+                    height: Ext.lib.Dom.getViewHeight()
+                };
+                mainpanel.setHeight( viewsize.height - 20 );
+                mainpanel.setWidth( viewsize.width - 40 );
+            }
+            updateLayout();
+            Ext.EventManager.onWindowResize(updateLayout);
         } );
     </script>
+    <style type="text/css">
+        body {
+            padding: 20px 20px 0 20px;
+        }
+    </style>
 {% endblock %}

pyweb/mumble/views.py

@@ -107,6 +107,26 @@ def mumbles( request, mobile=False ):
         context_instance = RequestContext(request)
         )
 
+@EXT_DIRECT_PROVIDER.register_method( "MumbleList" )
+def servers( request ):
+    mms = Mumble.objects.all().order_by( "name" ).values( "id", "name" )
+
+    return [{ 'id': mm['id'], 'name': mm['name'] } for mm in mms]
+
+@EXT_DIRECT_PROVIDER.register_method( "MumbleList" )
+def serverinfo( request, server ):
+    srv = Mumble.objects.get( id=int(server) )
+    return {
+        'id': srv.id,
+        'name': srv.name,
+        'motd': srv.motd,
+        'connurl': srv.connecturl,
+        'version': srv.prettyversion
+        }
+
+@EXT_DIRECT_PROVIDER.register_method( "MumbleList" )
+def serverurl( request, server ):
+    return reverse( show, args=(int(server),) );
 
 def show( request, server ):
     """ Display the channel list for the given Server ID.