<commit_before><?php $this->layout('main', ['title' => _('Dashboard'), 'manual' => true]); ?>

<?php
/** @var \AzuraCast\Assets $assets */
$assets
    ->load('radio')
    ->load('highcharts')
    ->load('highcharts_theme_'.$customization->getTheme());
?>

<div class="block-header">
    <h2><?=_('Dashboard') ?></h2>
</div>

<div class="row">
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Listeners Across All Stations') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="network_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Listeners Per Station') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="station_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Station Overview') ?></h2>

                <ul class="actions">
                <?php if ($acl->isAllowed('administer stations')): ?>
                    <li><a class="" title="<?=_('Add') ?>" href="<?=$url->route(['module' => 'admin', 'controller' => 'stations', 'action' => 'edit']) ?>"><i class="zmdi zmdi-plus"></i></a></li>
                <?php endif; ?>
                </ul>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <colgroup>
                        <col width="5%">
                        <col width="30%">
                        <col width="10%">
                        <col width="40%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th><?=_('Station Name') ?></th>
                            <th class="text-center"><?=_('Listeners') ?></th>
                            <th><?=_('Now Playing') ?></th>
                            <th><?=_('Options') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($stations as $row): ?>
                        <tr class="input" id="station_<?=$row['station']->getId() ?>">
                            <td class="text-center">
                                <a class="btn-audio" href="#" data-url="<?=$this->e($row['stream_url']) ?>">
                                    <i class="zmdi zmdi-play"></i>
                                </a>
                            </td>
                            <td>
                                <big><a href="<?=$url->route(['controller' => 'public', 'station' => $row['short_name']]) ?>" target="_blank"><?=$this->e($row['station']->getName()) ?></a></big>
                            </td>
                            <td class="text-center">
                                <span class="nowplaying-listeners">0</span>
                            </td>
                            <td>
                                <strong><span class="nowplaying-title"><?=_('Song Title') ?></span></strong><br>
                                <span class="nowplaying-artist"><?=_('Song Artist') ?></span>
                            </td>
                            <td>
                                <a class="btn btn-primary" role="button" href="<?=$url->route(['module' => 'stations', 'station' => $row['station']->getId()]) ?>"><?=_('Manage') ?></a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<script type="text/javascript">
$(function () {
    Highcharts.setOptions({
        global: {
            timezoneOffset: <?=\App\Timezone::getOffsetMinutes() ?>,
            useUTC: false
        }
    });

    var datetime_axis = {
        type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%a %d %b', this.value);
            },
            dateTimeLabelFormats: {
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            }
        }
    };

    $('#network_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                marker: { enabled: false }
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(_('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            xDateFormat: '%Y-%m-%d'
        },
        colors: [
            '#AEE1FF',
            '#0091E5',
            '#FFA6A6',
            '#8C0000'
        ],

        series: <?=$metrics['network'] ?>
    });

    $('#station_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                lineWidth: 1,
                marker: { enabled: false },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(_('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            xDateFormat: '%Y-%m-%d'
        },

        series: <?=$metrics['station'] ?>
    });
});

$(function() {
    var sub = new NchanSubscriber('/api/live/nowplaying/<?=implode(',', $station_ids) ?>,');

    sub.on("message", function(message, message_metadata) {
        var rows = JSON.parse(message);

        $.each(rows, function(k, row) {
            var station_row = $('#station_' + row.station.id);

            if (station_row.length) {

                if (station_row.find('.btn-audio').hasClass('playing') && 'mediaSession' in navigator) {
                    navigator.mediaSession.metadata = new MediaMetadata({
                        title: row.now_playing.song.title,
                        artist: row.now_playing.song.artist
                    });
                }

                station_row.find('.nowplaying-title').text(row.now_playing.song.title);
                station_row.find('.nowplaying-artist').text(row.now_playing.song.artist);
                station_row.find('.nowplaying-listeners').text(row.listeners.total)
            }
        });
    });

    sub.start();
});
</script><commit_msg>#297 -- Switch to long polling on app homepage.<commit_after><?php $this->layout('main', ['title' => _('Dashboard'), 'manual' => true]); ?>

<?php
/** @var \AzuraCast\Assets $assets */
$assets
    ->load('radio')
    ->load('highcharts')
    ->load('highcharts_theme_'.$customization->getTheme());
?>

<div class="block-header">
    <h2><?=_('Dashboard') ?></h2>
</div>

<div class="row">
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Listeners Across All Stations') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="network_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Listeners Per Station') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="station_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=_('Station Overview') ?></h2>

                <ul class="actions">
                <?php if ($acl->isAllowed('administer stations')): ?>
                    <li><a class="" title="<?=_('Add') ?>" href="<?=$url->route(['module' => 'admin', 'controller' => 'stations', 'action' => 'edit']) ?>"><i class="zmdi zmdi-plus"></i></a></li>
                <?php endif; ?>
                </ul>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <colgroup>
                        <col width="5%">
                        <col width="30%">
                        <col width="10%">
                        <col width="40%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th><?=_('Station Name') ?></th>
                            <th class="text-center"><?=_('Listeners') ?></th>
                            <th><?=_('Now Playing') ?></th>
                            <th><?=_('Options') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($stations as $row): ?>
                        <tr class="input" id="station_<?=$row['station']->getId() ?>">
                            <td class="text-center">
                                <a class="btn-audio" href="#" data-url="<?=$this->e($row['stream_url']) ?>">
                                    <i class="zmdi zmdi-play"></i>
                                </a>
                            </td>
                            <td>
                                <big><a href="<?=$url->route(['controller' => 'public', 'station' => $row['short_name']]) ?>" target="_blank"><?=$this->e($row['station']->getName()) ?></a></big>
                            </td>
                            <td class="text-center">
                                <span class="nowplaying-listeners">0</span>
                            </td>
                            <td>
                                <strong><span class="nowplaying-title"><?=_('Song Title') ?></span></strong><br>
                                <span class="nowplaying-artist"><?=_('Song Artist') ?></span>
                            </td>
                            <td>
                                <a class="btn btn-primary" role="button" href="<?=$url->route(['module' => 'stations', 'station' => $row['station']->getId()]) ?>"><?=_('Manage') ?></a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<script type="text/javascript">
$(function () {
    Highcharts.setOptions({
        global: {
            timezoneOffset: <?=\App\Timezone::getOffsetMinutes() ?>,
            useUTC: false
        }
    });

    var datetime_axis = {
        type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%a %d %b', this.value);
            },
            dateTimeLabelFormats: {
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            }
        }
    };

    $('#network_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                marker: { enabled: false }
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(_('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            xDateFormat: '%Y-%m-%d'
        },
        colors: [
            '#AEE1FF',
            '#0091E5',
            '#FFA6A6',
            '#8C0000'
        ],

        series: <?=$metrics['network'] ?>
    });

    $('#station_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                lineWidth: 1,
                marker: { enabled: false },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(_('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            xDateFormat: '%Y-%m-%d'
        },

        series: <?=$metrics['station'] ?>
    });
});

$(function() {
    var nchan_opts = { subscriber: 'longpoll' };
    var sub = new NchanSubscriber('/api/live/nowplaying/<?=implode(',', $station_ids) ?>,', nchan_opts);

    sub.on("message", function(message, message_metadata) {
        var rows = JSON.parse(message);

        $.each(rows, function(k, row) {
            var station_row = $('#station_' + row.station.id);

            if (station_row.length) {

                if (station_row.find('.btn-audio').hasClass('playing') && 'mediaSession' in navigator) {
                    navigator.mediaSession.metadata = new MediaMetadata({
                        title: row.now_playing.song.title,
                        artist: row.now_playing.song.artist
                    });
                }

                station_row.find('.nowplaying-title').text(row.now_playing.song.title);
                station_row.find('.nowplaying-artist').text(row.now_playing.song.artist);
                station_row.find('.nowplaying-listeners').text(row.listeners.total)
            }
        });
    });

    sub.start();
});
</script>
{'fraction_non_alphanumeric': 0.1788460206414075, 'fraction_numerical': 0.006441781533559604, 'mean_word_length': 1.234984520123839, 'pattern_counts': {'":': 0, '<': 279, '<?xml version=': 0, '>': 329, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5516375', 'n_tokens_mistral': 4121, 'n_tokens_neox': 3961, 'n_words': 701}