AzuraCast/templates/frontend/index/index.phtml

<?php
/**
 * @var \App\Customization $customization
 * @var \App\Assets $assets
 * @var array $metrics
 * @var array $stations
 * @var array $admin_panels
 * @var bool $show_admin
 */

$this->layout('main', ['title' => __('Dashboard'), 'manual' => true]);

$assets
    ->load('vue')
    ->load('InlinePlayer')
    ->addInlineJs($this->fetch('partials/radio_controls.js'), 95)
    ->addInlineJs($this->fetch('frontend/index/index.js', ['stations' => $stations]));

if ($metrics) {
    $assets
        ->load('chartjs')
        ->addInlineJs($this->fetch('frontend/index/index_metrics.js', [
            'metrics' => $metrics,
        ]));
}

$user = $request->getUser();
?>

<section class="card mb-4" role="region">
    <div class="card-header bg-primary-dark d-flex align-items-center">
        <a class="flex-shrink-0" href="http://www.gravatar.com/" target="_blank">
            <img src="<?=$user->getAvatar(64)?>" style="width: 64px; height: auto;" alt="">
        </a>
        <div class="flex-fill ml-3">
            <h2 class="card-title mt-0">
                <?php if (!empty($user->getName())): ?>
                    <?=$this->e($user->getName())?>
                <?php else: ?>
                    <?=__('AzuraCast User')?>
                <?php endif; ?>
            </h2>
            <h3 class="card-subtitle">
                <?=$this->e($user->getEmail())?>
            </h3>
        </div>
        <div class="flex-shrink-0">
            <a class="btn btn-bg" role="button" href="<?=$router->named('profile:index')?>">
                <i class="material-icons" aria-hidden="true">account_circle</i>
                <?=__('My Account')?>
            </a>
            <?php if ($show_admin): ?>
                <a class="btn btn-bg ml-2" role="button" href="<?=$router->named('admin:index:index')?>">
                    <i class="material-icons" aria-hidden="true">settings</i>
                    <?=__('Administration')?>
                </a>
            <?php endif; ?>
        </div>
    </div>

    <?php if (!empty($notifications)): ?>
        <?php foreach ($notifications as $notification): ?>
            <?php /** @var \App\Notification\Notification $notification */ ?>
            <div class="card-body alert-<?=$notification->getType()?> d-flex" role="alert">
                <div class="flex-shrink-0 mt-3 mr-3">
                    <?php if (\App\Notification\Notification::INFO === $notification->getType()): ?>
                        <i class="material-icons lg" aria-hidden="true">info</i>
                    <?php else: ?>
                        <i class="material-icons lg" aria-hidden="true">warning</i>
                    <?php endif; ?>
                </div>
                <div class="flex-fill">
                    <h4><?=$notification->getTitle()?></h4>
                    <p class="card-text">
                        <?=$notification->getBody()?>
                    </p>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</section>

<?php if ($metrics): ?>
    <section class="card mb-4" role="region">
        <div class="card-header bg-primary-dark">
            <h3 class="card-title"><?=__('Listeners Per Station')?></h3>
        </div>
        <div class="card-body">
            <canvas id="station_chart" style="width: 100%;" aria-label="<?=__('Listeners Per Station')?>" role="img">
                <?=$metrics['station_alt']?>
            </canvas>
        </div>
    </section>
<?php endif; ?>

<section class="card" role="region">
    <div class="card-header bg-primary-dark">
        <h3 class="card-title"><?=__('Station Overview')?></h3>
    </div>
    <?php if ($acl->userAllowed($user, 'administer stations')): ?>
        <div class="card-actions">
            <a class="btn btn-outline-primary" href="<?=$router->named('admin:stations:add')?>">
                <i class="material-icons" aria-hidden="true">add</i>
                <?=__('Add Station')?>
            </a>
        </div>
    <?php endif; ?>
    <table class="table table-striped table-responsive mb-0" id="station_dashboard">
        <colgroup>
            <col width="5%">
            <col width="30%">
            <col width="10%">
            <col width="40%">
            <col width="15%">
        </colgroup>
        <thead>
        <tr>
            <th class="pr-3">&nbsp;</th>
            <th class="pl-2"><?=__('Station Name')?></th>
            <th class="text-center"><?=__('Listeners')?></th>
            <th><?=__('Now Playing')?></th>
            <th class="text-right"></th>
        </tr>
        </thead>
        <tbody>
        <tr class="align-middle" v-bind:id="'station_' + row.station.id" v-for="row in stations">
            <td class="text-center pr-3">
                <a class="btn-audio" href="#" v-bind:data-url="row.stream_url" @click.prevent="toggle(row.stream_url)">
                    <i class="material-icons lg align-middle" aria-hidden="true">play_circle_filled</i>
                </a>
            </td>
            <td class="pl-2">
                <big><a v-bind:href="row.public_url" target="_blank">{{ row.station.name }}</a></big>
            </td>
            <td class="text-center">
                <span class="nowplaying-listeners">{{ row.np.listeners.current }}</span>
            </td>
            <td>
                <div v-if="row.np.now_playing.song.title != ''">
                    <strong><span class="nowplaying-title">{{ row.np.now_playing.song.title }}</span></strong><br>
                    <span class="nowplaying-artist">{{ row.np.now_playing.song.artist }}</span>
                </div>
                <div v-else>
                    <strong><span class="nowplaying-title">{{ row.np.now_playing.song.text }}</span></strong>
                </div>
            </td>
            <td class="text-right">
                <a class="btn btn-primary" v-bind:href="row.manage_url"><?=__('Manage')?></a>
            </td>
        </tr>
        </tbody>
    </table>
</section>