mumble-django/pyweb/mumble/templates/mumble/list.html

{% extends "index.html" %}
{% comment %}
    <!-- kate: space-indent on; indent-width 4; replace-tabs on; -->
{% endcomment %}
{% load mumble_extras %}
{% load i18n %}
{% block body %}
{% endblock %}
{% block HeadTag %}
    <script type="text/javascript" src="/jsi18n/"></script>
    <script type="text/javascript" src="/mumble/api/api.js"></script>
    <script type="text/javascript" src="{{ MUMBLE_MEDIA_PREFIX }}js/rendermumbleserver.js"></script>
    <script type="text/javascript" src="{{ MUMBLE_MEDIA_PREFIX }}js/buttoniframewindow.js"></script>
    <script type="text/javascript" src="{{ MUMBLE_MEDIA_PREFIX }}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" in INSTALLED_APPS %}
                    {
                        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: {
                        beforerender: function( listview ){
                            listview.store.on("load", function( store, records, objects ){
                                listview.select(0);
                                });
                        },
                        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){
                                var info = renderserverinfos(response.result);
                                mainpanel.descrippanel.el.dom.children[1].children[0].innerHTML = info;
                            });
                        }
                    },
                }, {
                    xtype:  "panel",
                    region: "center",
                    title:  gettext("Server overview"),
                    ref:    'descrippanel',
                    html:   gettext("Loading..."),
                }],
            });
            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 %}