v2.1.x Мониторинг серверов для XenForo

Сообщения
9
Реакции
1
Баллы
3
s1.png

Мониторинг серверов для XenForo 2.1.x с кастомным виджетом.
Переделка плагина [tl] Game Server Listing

Установка
1. Установить как обычный плагин из архива truonglv-gameservers-2.0.4.zip
2. В админке перейти в Плагины -> Публичные шаблоны -> tl_gs_widget_servers и вставить этот код:
PHP:
<xf:if is="$servers is not empty">
    <div class="block"{{ widget_data($widget) }}>
        <div class="block-container">
            <h3 class="block-minorHeader">
                <a href="{$link}" rel="nofollow">{$title}</a>
            </h3>

            <div class="block-body table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="width: 30px;"></th>
                            <th style="text-align: left;">Название</th>
                            <th style="text-align: left;">Карта</th>
                            <th>Игроки</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <xf:foreach loop="$servers" value="$server">
                        <xf:macro name="server_row" arg-server="{$server}"/>
                    </xf:foreach>
                </table>
            </div>
        </div>
    </div>
</xf:if>

<xf:macro name="server_row" arg-server="!">
    <xf:if is="$server.join_link">
        <tr>
            <td><img style="margin-left: 5px;" data-xf-init="tooltip" data-original-title="{$server.Game.game_name}" src="{$server.Game.getUrlPngIcons()}" alt="{$server.Game.game_name}" width="16" height="16" /></td>
            <td>{$server.server_name}</td>
            <td>
                <xf:if is="$server.Game.game_id != 76">{$server.getServerMap()}
                <xf:else/>none</xf:if>
            </td>
            <td>
                <div class="progress" style="position: relative;min-width: 70px;">
                    <div style="width: {$server.getProcentOnlinePlayers()}%" class="progress-bar" role="progressbar" aria-valuenow="{$server.getProcentOnlinePlayers()}" aria-valuemin="0" aria-valuemax="{$server.max_active_players}"></div>
                    <span>{$server.current_active_players}/{$server.max_active_players}</span>
                </div>
            </td>
            <td style="text-align: center;">
                <i class="fas fa-plug"></i> <a href="{$server.join_link}" target="_blank">{{ phrase('tl_game_servers.join') }}</a>
            </td>
            <td>
                <xf:if is="$server.getGameTracker() == true">
                    <a href="https://www.gametracker.com/server_info/{$server.getServerHost()}/" target="_blank" data-xf-init="tooltip" data-original-title="GameTracker">
                        <img src="https://www.gametracker.com/favicon.ico"/>
                    </a>
                </xf:if>
            </td>
        </tr>
    </xf:if>
</xf:macro>

3. В админке Стили -> Шаблоны ->extra.less и вставить код:
CSS:
/* progress bar */
.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #c1c1c1;
    border-radius: 2px;
    margin-top: 3px;
}
.progress span {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    color: #fff;
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    background-color: #2d303a;
    transition: width .6s ease;
}

/* table */
.table {
    width: 100%;
    color: #212529;
    border-spacing: 0;
}
.table td, .table th {
    padding: 5px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}
.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0,0,0,.075);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
4. Файлы из архива replace.zip закинуть в src/addons/Truonglv/GameServers/Entity с заменой
5. Внешний вид -> Виджеты -> Добавить виджет -> [tl] Game Server Listing
  • Ключ виджета "tl_game_server_list"
  • Позиции для отображения: Список разделов: Над узлами: 1
6. Языки -> Фразы ->в филтре введите join, tl_game_servers.join: Текст фразы: Подключиться
Готово!

Иконки игр добавлять в папку styles/Truonglv/game-icons, название иконки = id игры, можно посмотреть в консоли браузера.
Что-бы отображался значок GameTracker поставе галочку в настройках сервера Enable GameTracker?
И как всегда, при копирование материала ссылка на источник обязательна!
 

Вложения

Последнее редактирование:
  • Like
Реакции: Grom
Верх