Code-Schnipsel für Ungelesene Beiträge/Themen von Forum(ID)

doerek

Guten Abend zusammen,

wir haben bei uns ein Forum im Einsatz das (relativ gesehen) sehr viele Unterforen besitzt. Jedes Unterforum in diesem Forum spiegelt (quasi) einen Hersteller wieder. Da wir nicht jedem Besucher dieses Forums die komplette Auflistung aller Unterforen zumuten wollten, haben wir uns dazu entschieden eine CSS-gridbox zu bauen. Ziel war zunächst nur, dass sie etwas weniger Platz einnimmt als die Standardauflistung der Foren.

Hier ein Beispiel:

Statt ein Forum pro Zeile, passen nun 3 eine eine Zeile.

Die Foren, auf die diese Schaltflächen verweisen sind "Ausgeblendet":

Ich wurde heute darauf angesprochen ob denn auch irgendwo die Anzahl den noch ungelesenen Beiträge angezeigt wird....

Hmjoa....mit Template code bin ich jetzt leider nicht so vertraut wie mit HTML oder CSS als dass ich beurteilen könnte ob es überhaupt möglich ist, aber ich dachte mir....fragen kostet ja nichts.

Das höchste der Gefühle was ich bisher mit Templatecode umgesetzt habe, ist die Ausgabe des momentan angemeldeten Benutzers und dessen ID... *bisschen stolz*

(Aber selbst dort hat mir Marcel Beckers beim Clan-Tag vor dem Benutzernamen geholfen)

Beispiel:

Ist es per Templatecode möglich die Anzahl der noch ungelesenen Beiträge in einem bestimmten Forum für den momentan angemeldeten Benutzer anzuzeigen?

Und hätte evtl. jemand Zeit / Lust mir dabei zu helfen?...

Mfg

doerek

Der Vollständigkeitshalber, hier noch der HTML/CSS Code der Box:

Smarty

<select id="locationSelection">
    <option value="" selected>-- Wähle einen Hersteller</option>
    <option value="https://www.###.de/forum/board/12/">Aegis Dynamics</option>
    <option value="https://www.###.de/forum/board/11/">Anvil Aerospace</option>
    <option value="https://www.###.de/forum/board/25/">Aopoa</option>
    <option value="https://www.###.de/forum/board/14/">Argo Astronautics</option>
    <option value="https://www.###.de/forum/board/16/">Consolidated Outland</option>
    <option value="https://www.###.de/forum/board/17/">Crusader Industries</option>
    <option value="https://www.###.de/forum/board/18/">Drake Interplanetary</option>
    <option value="https://www.###.de/forum/board/19/">Esperia</option>
    <option value="https://www.###.de/forum/board/61/">Gatac Manufacture</option>
    <option value="https://www.###.de/forum/board/20/">Kruger Intergalactic</option>
    <option value="https://www.###.de/forum/board/21/">Musashi Industrial and Starflight Concern</option>
    <option value="https://www.###.de/forum/board/22/">Origin Jumpworks</option>
    <option value="https://www.###.de/forum/board/23/">Roberts Space Industries</option>
    <option value="https://www.###.de/forum/board/15/">Banu</option>
    <option value="https://www.###.de/forum/board/24/">Vanduul</option>
</select>
<script>
document.getElementById("locationSelection").addEventListener("change", function () {
  if (this.value) {
    window.location.href = this.value;
  }
});
</script>

<input type="text" id="text" placeholder="Raumdock durchsuchen" />
<input style="padding: 1px 6px;" type="button" id="btn" value="Suchen" onClick="javascript: window.open('https://www.###.de/search/?q=' + document.getElementById('text').value + '&type=com.woltlab.wbb.post&sortField=time&boardID=27','_self');" />

<script>
var input = document.getElementById("text");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("btn").click();
  }
});
</script>

<div class="raumdock-welcomebox" style="">
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/12/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Aegis_Dynamics.svg" alt="####"><span class="rwbe_kürzel">AEGS</span></div>
        <div class="rwbe_titel">Aegis Dynamics</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/11/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Anvil_Aerospace.svg" alt="####"><span class="rwbe_kürzel">ANVL</span></div>
        <div class="rwbe_titel">Anvil Aerospace</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/25/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/AopoA.svg" alt="####"><span class="rwbe_kürzel">XNAA</span></div>
        <div class="rwbe_titel">Aopoa</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/14/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/ARGO_Astronautics.svg" alt="####"><span class="rwbe_kürzel">ARGO</span></div>
        <div class="rwbe_titel">Argo Astronautics</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/16/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Consolidated_Outland.svg" alt="####"><span class="rwbe_kürzel">CNOU</span></div>
        <div class="rwbe_titel">Consolidated Outland</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/17/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Crusader_Industries.svg" alt="####"><span class="rwbe_kürzel">CRUS</span></div>
        <div class="rwbe_titel">Crusader Industries</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/18/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Drake_Interplanetary.svg" alt="####"><span class="rwbe_kürzel">DRAK</span></div>
        <div class="rwbe_titel">Drake Interplanetary</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/19/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Esperia.svg" alt="####"><span class="rwbe_kürzel">ESPR</span></div>
        <div class="rwbe_titel">Esperia</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/61/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/gatac.svg" alt="####"><span class="rwbe_kürzel">GAMA</span></div>
        <div class="rwbe_titel">Gatac Manufacture</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/20/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Kruger_Intergalactic.svg" alt="####"><span class="rwbe_kürzel">KRIG</span></div>
        <div class="rwbe_titel">Kruger Intergalactic</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/21/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/MISC.svg" alt="####"><span class="rwbe_kürzel">MISC</span></div>
        <div class="rwbe_titel">Musashi Industrial and Starflight Concern</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/22/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Origin_Jumpworks.svg" alt="####"><span class="rwbe_kürzel">ORIG</span></div>
        <div class="rwbe_titel">Origin Jumpworks</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/23/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Roberts_Space_Industries.svg" alt="####"><span class="rwbe_kürzel">RSI</span></div>
        <div class="rwbe_titel">Roberts Space Industries</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/15/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/Banu.svg" alt="####"><span class="rwbe_kürzel">BANU</span></div>
        <div class="rwbe_titel">Banu</div>
        <div class="rwbe_subgrid">###</div>
    </div>
    <div class="raumdock-welcomebox_element" onclick='location.href = "https://www.###.de/forum/board/24/";'>
        <div class="rwbe_icon"><img src="/images/ship_manufacturers/####.svg" alt="####"><span class="rwbe_kürzel">####</span></div>
        <div class="rwbe_titel">Vanduul</div>
        <div class="rwbe_subgrid">###</div>
    </div>    
</div>

Alles anzeigen

CSS

/* Raumdock Willkommensbox - Start */

@media only screen and (max-width: 544px)    {
    .raumdock-welcomebox_element > .rwbe_titel {
    display:none;
    }
    
    .raumdock-welcomebox_element > .rwbe_subgrid {
    display:none;
    }
    
        .raumdock-welcomebox_element  {
    justify-items: center !important;
    grid-template-columns: auto !important;
    }
                                            }

.raumdock-welcomebox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25vw, auto));
    gap: 10px;
    box-sizing: border-box;
    }

.raumdock-welcomebox_element {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: min-content 1fr;
    border: #81818182 1px solid;
    column-gap: 5px;
    padding: 5px 5px;
    cursor: pointer;
}
.raumdock-welcomebox_element > .rwbe_icon {
    grid-row: 1 / 3;
    width: 64px;
    text-align: center;
    opacity: 0.5;
      -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
        }

.raumdock-welcomebox_element:hover > .rwbe_icon {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
        }

.raumdock-welcomebox_element > .rwbe_icon img {
    width: inherit;
        }

.raumdock-welcomebox_element > .rwbe_titel {
    font-size: 1.3em;
    border-bottom: 1px #b5b5b569 solid;
    color: white;
    position: relative;
        }
.raumdock-welcomebox_element > .rwbe_icon > .rwbe_kürzel { 
    font-size: 0.8rem;
    color: #ffffff4d;
    font-family: "Verdana";
}

.raumdock-welcomebox_element > .rwbe_subgrid {
    grid-column: 2 / 2;
        }


/* Raumdock Willkommensbox - Ende */

Alles anzeigen

SileX

Unter der Voraussetzung, dass du unsere PHP in Boxen-Erweiterung installiert hast, hier ein Beispiel, wie man es grundsätzlich so generieren lassen könnte, wie es aktuell manuell gemacht wird:

PHP

<?php

use wbb\data\board\BoardList;
use wcf\data\DatabaseObject;
use wcf\system\WCF;

$boards = [
    11 => ['abbr' => 'ANVL', 'image' => 'Anvil_Aerospace'],
    12 => ['abbr' => 'AEGS', 'image' => 'Aegis_Dynamics'],
    14 => ['abbr' => 'ARGO', 'image' => 'ARGO_Astronautics'],
    15 => ['abbr' => 'BANU', 'image' => 'Banu'],
    16 => ['abbr' => 'CNOU', 'image' => 'Consolidated_Outland'],
    17 => ['abbr' => 'CRUS', 'image' => 'Crusader_Industries'],
    18 => ['abbr' => 'DRAK', 'image' => 'Drake_Interplanetary'],
    19 => ['abbr' => 'ESPR', 'image' => 'Esperia'],
    20 => ['abbr' => 'KRIG', 'image' => 'Kruger_Intergalactic'],
    21 => ['abbr' => 'MISC', 'image' => 'MISC'],
    22 => ['abbr' => 'ORIG', 'image' => 'Origin_Jumpworks'],
    23 => ['abbr' => 'RSI', 'image' => 'Roberts_Space_Industries'],
    24 => ['abbr' => 'VDL', 'image' => 'Vanduul'],
    25 => ['abbr' => 'XNAA', 'image' => 'AopoA'],
    61 => ['abbr' => 'GAMA', 'image' => 'gatac']
];

$boardList = new BoardList();
$boardList->setObjectIDs(array_keys($boards));
$boardList->readObjects();

if (!empty($boardList)) {
    DatabaseObject::sort($boardList, 'title', 'ASC');
}

foreach ($boardList as $board) {
    if (isset($boards[$board->boardID])) {
        $board->image = $boards[$board->boardID]['image'];
        $board->abbr = $boards[$board->boardID]['abbr'];
    }
}

WCF::getTPL()->assign([
    'boxBoardList' => $boardList,
]);

Alles anzeigen

Und im Template-Code-Bereich:

Smarty

<select id="locationSelection">
    <option value="" selected>-- Wähle einen Hersteller</option>
    {foreach from=$boxBoardList item='board'}
        <option value="{link controller='Board' object=$board application='wbb'}{/link}">{$board->title|language}</option>
    {/foreach}
</select>

<script>
document.getElementById("locationSelection").addEventListener("change", function () {
  if (this.value) {
    window.location.href = this.value;
  }
});
</script>

<input type="text" id="text" placeholder="Raumdock durchsuchen" />
<input style="padding: 1px 6px;" type="button" id="btn" value="Suchen" onClick="javascript: window.open('{link controller='Search'}q=' + document.getElementById('text').value + '&type=com.woltlab.wbb.post&sortField=time&boardID=27{/link}', '_self');" />

<script>
var input = document.getElementById("text");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("btn").click();
  }
});
</script>

<div class="raumdock-welcomebox" style="">
    {foreach from=$boxBoardList item='board'}
        <div class="raumdock-welcomebox_element" onclick='location.href = "{link controller='Board' object=$board application='wbb'}{/link}";'>
            <div class="rwbe_icon"><img src="/images/ship_manufacturers/{$board->image}.svg" alt="####"><span class="rwbe_kürzel">{$board->abbr}</span></div>
            <div class="rwbe_titel">{$board->title|language}</div>
            <div class="rwbe_subgrid">###</div>
        </div>
    {/foreach}
</div>

Alles anzeigen

Das dürfte etwas "wartbarer" sein, weil du gewisse Dinge weder manuell machen musst (z.B. Hyperlinks definieren), noch Dinge verdoppeln.

Nun aber zu deinem Zähler. Hierfür muss der Code geringfügig erweitert werden:

PHP

<?php

use wbb\data\board\BoardCache;
use wbb\data\board\BoardList;
use wcf\data\DatabaseObject;
use wcf\system\WCF;

$boards = [
    11 => ['abbr' => 'ANVL', 'image' => 'Anvil_Aerospace'],
    12 => ['abbr' => 'AEGS', 'image' => 'Aegis_Dynamics'],
    14 => ['abbr' => 'ARGO', 'image' => 'ARGO_Astronautics'],
    15 => ['abbr' => 'BANU', 'image' => 'Banu'],
    16 => ['abbr' => 'CNOU', 'image' => 'Consolidated_Outland'],
    17 => ['abbr' => 'CRUS', 'image' => 'Crusader_Industries'],
    18 => ['abbr' => 'DRAK', 'image' => 'Drake_Interplanetary'],
    19 => ['abbr' => 'ESPR', 'image' => 'Esperia'],
    20 => ['abbr' => 'KRIG', 'image' => 'Kruger_Intergalactic'],
    21 => ['abbr' => 'MISC', 'image' => 'MISC'],
    22 => ['abbr' => 'ORIG', 'image' => 'Origin_Jumpworks'],
    23 => ['abbr' => 'RSI', 'image' => 'Roberts_Space_Industries'],
    24 => ['abbr' => 'VDL', 'image' => 'Vanduul'],
    25 => ['abbr' => 'XNAA', 'image' => 'AopoA'],
    61 => ['abbr' => 'GAMA', 'image' => 'gatac']
];

$boardList = new BoardList();
$boardList->setObjectIDs(array_keys($boards));
$boardList->readObjects();

if (!empty($boardList)) {
    DatabaseObject::sort($boardList, 'title', 'ASC');
}

foreach ($boardList as $board) {
    if (isset($boards[$board->boardID])) {
        $board->image = $boards[$board->boardID]['image'];
        $board->abbr = $boards[$board->boardID]['abbr'];
        $board->unreadThreads = BoardCache::getInstance()->getUnreadThreads($board->boardID);
    }
}

WCF::getTPL()->assign([
    'boxBoardList' => $boardList,
]);

Alles anzeigen

Nun kannst du den Zähler an beliebiger Stelle einbauen, z.B. neben dem Forennamen:

Smarty

<select id="locationSelection">
    <option value="" selected>-- Wähle einen Hersteller</option>
    {foreach from=$boxBoardList item='board'}
        <option value="{link controller='Board' object=$board application='wbb'}{/link}">{$board->title|language}</option>
    {/foreach}
</select>

<script>
document.getElementById("locationSelection").addEventListener("change", function () {
  if (this.value) {
    window.location.href = this.value;
  }
});
</script>

<input type="text" id="text" placeholder="Raumdock durchsuchen" />
<input style="padding: 1px 6px;" type="button" id="btn" value="Suchen" onClick="javascript: window.open('{link controller='Search'}q=' + document.getElementById('text').value + '&type=com.woltlab.wbb.post&sortField=time&boardID=27{/link}', '_self');" />

<script>
var input = document.getElementById("text");
input.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
    document.getElementById("btn").click();
  }
});
</script>

<div class="raumdock-welcomebox" style="">
    {foreach from=$boxBoardList item='board'}
        <div class="raumdock-welcomebox_element" onclick='location.href = "{link controller='Board' object=$board application='wbb'}{/link}";'>
            <div class="rwbe_icon"><img src="/images/ship_manufacturers/{$board->image}.svg" alt="####"><span class="rwbe_kürzel">{$board->abbr}</span></div>
            <div class="rwbe_titel">{$board->title|language} {if $board->unreadThreads} <span class="badge badgeUpdate">{#$board->unreadThreads}</span>{/if}</div>
            <div class="rwbe_subgrid">###</div>
        </div>
    {/foreach}
</div>

Alles anzeigen

Ich hoffe, das hilft dir ein wenig. Es ginge auch noch wesentlich komplexer, wenn man mit Boardnodes arbeitet, also auch mit Unterforen, etc.

doerek

OK..wow....Die möglichkeit alles über ein Array? managen zu können ...grandios!

Alphabetische Sortierung, Eine direkte anzeige der foren-titel...alles drin...Bin gerade etwas sprachlos.

sehe ich das richtig?

ID => ['abbr' => 'KÜRZEL', 'image' => 'FILENAME'],

Du bist mein Held

mfg

SileX

Dateiname ohne Erweiterung, ja. Einfach, weil ich davon ausgehe, dass jedes Bild ein SVG ist.

Selbst das könnte man "automatisieren", wenn die Dateinamen einem festen Schema folgen würden.

Und selbst das ganze Array mit den zusätzlichen Attributen könnte man sich sparen, wenn man die Attribute zu den Board-Einstellungen mittels Plugin hinzufügen würde inkl. Checkbox, ob das jeweilige Forum in der Box angezeigt werden soll, oder nicht

Code-Schnipsel für Ungelesene Beiträge/Themen von Forum(ID)

Jetzt mitmachen!

Benutzer online in diesem Thema