Online Liste Sidebar statt Dashboard

Lu-Event · 5. April 2014

Ich habe eben bei mir mal etwas rum gespielt und mir die Dashboard Box umgebaut auf eine für die Sidebar die man dann auch auf allen Seiten mit Sidebar anzeigen lassen kann.
Den Code dafür möchte ich euch gerne mitteilen für die wo selbiges vor haben.

Zunächst mal habe ich in der Datenbank in der Tabelle wcf1_dashboard_box nach dem Eintrag be.bastelstu.chat.onlineList gesucht und den Box typ von content auf sidebar gestellt.
Hiermit ist es uns schonmal möglich die Box in der Sidebar anzuzeigen was aber wiederum sehr unschön aussieht.

Damit das ganze nach etwas aussieht müssen nun noch 2 Template´s bearbeitet werden.

1. Anwendung Tims Chat / boxRoomList

dieses Template habe ich wie folgt geändert:

Smarty

{foreach from=$rooms item='room'}
    {assign var='users' value=$room->getUsers()}

    {if $showEmptyRooms || $users|count > 0}
        <li>
            <div>
                <div>
                    <div class="containerHeadline">
                        <h3><a href="{link application='chat' controller='Chat' object=$room}{/link}">{$room}</a> <span class="badge">{#$users|count}</span></h3>
                    </div>
                </div>
            </div>
        </li>
    {/if}
{/foreach}

Alles anzeigen

Damit ist die Anzeige wer in welchem Raum ist und die Raum Beschreibung weg. Es bleibt also die Anzeige des Raums und die Anzahl derer die in diesem Raum sind.

2. Anwendung Tims Chat / dashboardBoxOnlineList

diesen Code habe ich in folgenden geändert:

Smarty

{capture assign='roomList'}{include application='chat' file='boxRoomList' showEmptyRooms=false}{/capture}


<fieldset class="dashboardBox"{if !$roomList|trim} style="display: none;"{/if}>
    <legend>{lang}chat.header.menu.chat{/lang}</legend>

    <div>
        <ul class="containerList">
            {@$roomList}
        </ul>
    </div>
    <script data-relocate="true">
        //<![CDATA[
        (function($, window, undefined) {
            proxy = new WCF.Action.Proxy({
                data: {
                    actionName: 'getBoxRoomList',
                    className: 'chat\\data\\room\\RoomAction',
                    parameters: {
                        showEmptyRooms: 0
                    }
                },
                showLoadingOverlay: false,
                suppressErrors: true,
                success: function(data) {
                    if (data.returnValues.template) $('#chatDashboardBoxOnlineListContainer').show();
                    else $('#chatDashboardBoxOnlineListContainer').hide();

                    $('#chatDashboardBoxOnlineListContainer ul').html(data.returnValues.template);
                }
            });

            be.bastelstu.wcf.nodePush.onMessage('be.bastelstu.chat.join', $.proxy(proxy.sendRequest, proxy));
            be.bastelstu.wcf.nodePush.onMessage('be.bastelstu.chat.leave', $.proxy(proxy.sendRequest, proxy));
        })(jQuery, this);
        //]]>
    </script>
</fieldset>

Alles anzeigen

Das ganze erscheint wie die originale Box auch nur dann wenn wirklich jemand im jeweiligen Raum ist.

Evtl. lässt sich der Spaß auch über das Plugin Dashboard CustomBoxes von Michel regeln das habe ich aber noch nicht getestet.
Aussehen tut der Spaß dann wie im Anhang.

**Tim** · 6. April 2014

Hallo,

Zitat von Lu-Event

boxRoomList

Ich möchte nur kurz darauf hinweisen, dass dieses Template auch bei der Raumauswahl vor Betreten des Chats genutzt wird. Das ist möglicherweise nicht erwünscht. Man kann aber mit {if $templateName == 'dashboard'} überprüfen, ob man sich im Dashboard befindet

Mirco83 · 6. April 2014

Super Anleitung vielen Dank hatte bei nmichel auch schon nach gefragt keiner konnte mir helfen, echt TOP!

Lu-Event · 6. April 2014

Zitat von Tim

Ich möchte nur kurz darauf hinweisen, dass dieses Template auch bei der Raumauswahl vor Betreten des Chats genutzt wird.

Stimmt den Hinweis hatte ich vergessen, da ich die Anzeige vor dem Betreten aber nicht nutze, stellt das für mich erstmal weniger ein Problem dar..

Letztlich wird aus der boxRoomList ja auch nur die Beschreibung und die Userliste rausgeworfen, somit funktioniert die Raumauswahl vor dem Betreten zumindest noch soweit das man sieht wie viele hier drin sind.
Letztlich kann man die boxRoomList aber auch so lassen wie sie ist, dann muss man diese Daten nur per CSS ausblenden.

Die Änderung in der Datenbank aus dem ersten Post muss natürlich trotzdem Erfolgen.

damit das geht würde die dashboardBoxOnlineList wie folgt aussehen:

Smarty

{capture assign='roomList'}{include application='chat' file='boxRoomList' showEmptyRooms=false}{/capture}
<fieldset class="dashboardBox timsChat"{if !$roomList|trim} style="display: none;"{/if}>
    <legend>{lang}chat.header.menu.chat{/lang}</legend>

    <div>
        <ul class="containerList">
            {@$roomList}
        </ul>
    </div>
    <script data-relocate="true">
        //<![CDATA[
        (function($, window, undefined) {
            proxy = new WCF.Action.Proxy({
                data: {
                    actionName: 'getBoxRoomList',
                    className: 'chat\\data\\room\\RoomAction',
                    parameters: {
                        showEmptyRooms: 0
                    }
                },
                showLoadingOverlay: false,
                suppressErrors: true,
                success: function(data) {
                    if (data.returnValues.template) $('#chatDashboardBoxOnlineListContainer').show();
                    else $('#chatDashboardBoxOnlineListContainer').hide();

                    $('#chatDashboardBoxOnlineListContainer ul').html(data.returnValues.template);
                }
            });

            be.bastelstu.wcf.nodePush.onMessage('be.bastelstu.chat.join', $.proxy(proxy.sendRequest, proxy));
            be.bastelstu.wcf.nodePush.onMessage('be.bastelstu.chat.leave', $.proxy(proxy.sendRequest, proxy));
        })(jQuery, this);
        //]]>
    </script>
</fieldset>

Alles anzeigen

Die boxRoomList wird in diesem Fall nicht angepackt.

und der CSS Code
für die Beschreibung:

Code

.dashboardBox.timsChat .containerList .containerHeadline p {
  display: none;
}

und für die Benutzer Online Liste:

Code

.dashboardBox.timsChat .dataList {
  display: none;
}

Somit wäre die Raumliste vor dem Betreten wie sie original ist, die Sidebar Box die man überall anzeigen lassen kann Existiert aber trotzdem.

Somit hat man hier nun noch eine andere Alternative.

Mirco83 · 6. April 2014

@Lu-Event hast du eine Idee wie ich nur das Badge (Anzahl wieviele im Chat sind) hinter dem Menüpunkt Chat hinbekomme?

**Tim** · 6. April 2014

Hallo,

Zitat von Mirco83

@Lu-Event hast du eine Idee wie ich nur das Badge (Anzahl wieviele im Chat sind) hinter dem Menüpunkt Chat hinbekomme?

Das wird vorraussichtlich mit Tims Chat 3.1 kommen.

Lu-Event · 6. April 2014

Aktuell stehe ich selber noch rätselnd vor dem Problem. Bin nur in php nicht so fit womit das für mich wohl eher schwerer werden dürfte.

im 3.1 hatte ich das und da war es etwas einfacher.

ich weiß zwar wo ich was ändern müsste, aber nicht was dahin kommt, das ist aktuell mein Problem. Hätte das gerne selber.

Mirco83 · 6. April 2014

Zitat von Tim

Hallo,

Das wird vorraussichtlich mit Tims Chat 3.1 kommen.

Hoffentlich meine User schreien förmlich danach

Zitat von Lu-Event

Aktuell stehe ich selber noch rätselnd vor dem Problem. Bin nur in php nicht so fit womit das für mich wohl eher schwerer werden dürfte.

im 3.1 hatte ich das und da war es etwas einfacher.

ich weiß zwar wo ich was ändern müsste, aber nicht was dahin kommt, das ist aktuell mein Problem. Hätte das gerne selber.

Schade naja dann warten und hoffen das es mit 3.1 kommt.

oliXon · 5. August 2014

Wollte mich nochmal für den Tipp von @Lu-Event bedanken! Hat mir sehr geholfen.

Zitat von Tim

Hallo,

Das wird vorraussichtlich mit Tims Chat 3.1 kommen.

Super, darf man fragen wann 3.1 erscheint? Nur als Information.

**Tim** · 5. August 2014

Hallo,

Zitat von oliXon

Super, darf man fragen wann 3.1 erscheint? Nur als Information.

Dazu gibt es noch keinen Termin.

Baba_Isa · 11. September 2014

Also dashboardBoxOnlineList ist in der Standardtemplate-Gruppe nicht möglich zu bearbeiten, wie kann ich die bearbeiten?

Mirco83 · 11. September 2014

Die kannst du wie im ersten Beitrag beschrieben nur über die Datenbank machen aber warte doch lieber noch einbißchen auf die 3.1 und du hast das Badge direkt hinter dem Menupunkt.

Lu-Event · 23. September 2014

Zitat von Baba_Isa

Also dashboardBoxOnlineList ist in der Standardtemplate-Gruppe nicht möglich zu bearbeiten, wie kann ich die bearbeiten?

Die Standart Template Gruppe ist sowieso nicht zu bearbeiten, Sofern du das Standart Design verwendest oder andere Stile die diese Gruppe verwenden, musst du eben eine Neue Ersatztemplate Gruppe erstellen und diese den Designs zuweisen. Die Änderungen der Templates müssen dann in jedem Design erfolgen.

Ich möchte aber an dieser Stelle darauf hinweisen, das man schon etwas mit dem WCF, der Template Bearbeitung und Datenbank Benutzung vertraut sein sollte für diese Anpassung. Dem nicht visierten und sicherem Benutzer ist unbedingt zu Raten auf die 3.1 zu warten wie Mirco das schon sagte.