mumble-django/pyweb/mumble/templates/mumble/mumble.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 PageTitle %}Mumble :: {{ MumbleServer.name }}{% endblock %}
{% block HeadTag %}
    <link rel="stylesheet"    type="text/css"  href="{{ MUMBLE_MEDIA_PREFIX }}css/tab-scroller-menu.css" />
    <style  type="text/css">
        .x-tab-tabmenu-right {
            background: transparent url({{ MUMBLE_MEDIA_PREFIX }}img/tab-scroller-menu.gif) no-repeat 0 0;
        }
    </style>
    <script src="{% url django.views.i18n.javascript_catalog %}"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/api/api.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/api.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/choicescombo.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/{{ RegForm|lower }}.js"></script>
    <script src="{{ MUMBLE_DJANGO_URL }}mumble/forms/mumbleform.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/TabScrollerMenu.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/channelviewer.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/channelviewerplugins.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/rendermumbleserver.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/usereditor.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/logviewer.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/banviewer.js"></script>
    <script src="{{ MUMBLE_MEDIA_PREFIX }}js/buttoniframewindow.js"></script>
    <script 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",
                tbar: [ {
                    text: gettext("Back to the server list"),
                    xtype: "button",
                    handler: function(){
                        location.href = "{% url mumble.views.mumbles %}";
                    }
                } ],
                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:mumble_mumble_change MumbleServer.id %}'
                    },
                    {% endif %}
                    {% if user.is_authenticated %}
                        new Ext.ux.ButtonLogout()
                    {% else %}
                        {% if 'registration' in INSTALLED_APPS %}
                        {
                            xtype: 'buttonIframeWindow',
                            text:  gettext('Register'),
                            url: '{% url registration.views.register %}'
                        },
                        {% endif %}
                        new Ext.ux.ButtonLogin()
                    {% endif %}
                ],
                items: [{
                    xtype: "mumblechannelviewer",
                    region: "west",
                    width: 350,
                    split: true,
                    enableDD: true,
                    plugins: [
                        new Ext.ux.MumbleUserEditor({
                            serverid: {{MumbleServer.id}},
                            is_admin: {{ IsAdmin|lower }}
                            }),
                        new Ext.ux.MumbleChannelEditor({
                            serverid: {{MumbleServer.id}},
                            is_admin: {{ IsAdmin|lower }}
                            })
                        ],
                    source_url: "{% url mumble.views.cvp_json MumbleServer.id %}",
                    imageurl: '{{MUMBLE_MEDIA_PREFIX}}/img',
                    listeners: {
                        moveUser: function( tree, userdata, chandata ){
                            Mumble.moveUser( {{MumbleServer.id}}, userdata.session, chandata.id );
                        },
                        moveChannel: function( tree, chandata, targetdata ){
                            Mumble.moveChannel( {{MumbleServer.id}}, chandata.id, targetdata.id );
                        }
                    }
                }, {
                    xtype: "tabpanel",
                    region: "center",
                    activeTab: 0,
                    enableTabScroll: true,
                    plugins: [ new Ext.ux.TabScrollerMenu() ],
                    items: [{
                        title: gettext("Server info"),
                        html:  renderserverinfos( {{ ServerDict|safe }} )
                    }
                    {% if user.is_authenticated %},
                        {
                            title: gettext("Registration"),
                            xtype: "{{ RegForm|lower }}",
                            pk: {% if MumbleAccount %}{{ MumbleAccount.id }}{% else %}-1{% endif %},
                            labelWidth: 150,
                            baseParams: {serverid: {{MumbleServer.id}} }
                        },
                        {% if IsAdmin %}
                            {
                                title: gettext("Administration"),
                                pk:    {{ MumbleServer.id }},
                                labelWidth: 150,
                                xtype: 'mumbleform'
                            },
                        {% endif %}
                        {% if MumbleAccount %}
                            {
                                title: gettext("User texture"),
                                layout: "border",
                                items: [{
                                    region: "north",
                                    layout: "hbox",
                                    height: 200,
                                    items: [{
                                        flex: 1,
                                        height: 200,
                                        title: gettext("Texture"),
                                        html: String.format('<img src="{0}" alt="Avatar" id="img_avatar" />',
                                          "{% url mumble.views.showTexture MumbleServer.id MumbleAccount.id %}")
                                    }, {
                                        flex: 1,
                                        height: 200,
                                        title: gettext("Gravatar"),
                                        html: String.format('<img src="{0}" alt="grAvatar" />', "{{ MumbleAccount.gravatar }}")
                                    }]
                                }, {
                                    region: "center",
                                    xtype: "form",
                                    labelWidth: 150,
                                    fileUpload: true,
                                    url: "{% url mumble.views.update_avatar MumbleAccount.id %}",
                                    items: [{
                                        name:       "usegravatar",
                                        fieldLabel: gettext("Use Gravatar"),
                                        xtype:      "checkbox"
                                    }, {
                                        name:       "texturefile",
                                        fieldLabel: gettext("Upload Avatar"),
                                        xtype:      "textfield",
                                        inputType:  "file"
                                    }],
                                    buttons: [{
                                        text:   gettext('Submit'),
                                        handler: function(){
                                            this.ownerCt.ownerCt.getForm().submit({
                                                success: function(form, action){
                                                    var now = new Date();
                                                    var img = Ext.fly("img_avatar");
                                                    img.dom.src = String.format("{0}?_dc={1}",
                                                        "{% url mumble.views.showTexture MumbleServer.id MumbleAccount.id %}",
                                                        now.getTime()
                                                        );
                                                    }
                                                });
                                            }
                                    }]
                                }]
                            },
                        {% endif %}
                        {% if IsAdmin %}
                            {
                                xtype: "userEditorPanel",
                                server: {{ MumbleServer.id }}
                            }, {
                                xtype: 'logViewerPanel',
                                server: {{ MumbleServer.id }}
                            }, {
                                xtype: 'banViewerPanel',
                                server: {{ MumbleServer.id }}
                            }
                        {% endif %}
                    {% endif %}
                    ]
                }]
            });
            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 %}