121 lines
5.2 KiB
PHTML
121 lines
5.2 KiB
PHTML
<?php
|
|
/**
|
|
* @var \App\Assets $assets
|
|
* @var \App\Entity\Station $station
|
|
*/
|
|
|
|
$this->layout('main', ['title' => __('Listeners'), 'manual' => true]);
|
|
|
|
$assets
|
|
->load('vue')
|
|
->load('daterangepicker')
|
|
->load('leaflet')
|
|
->addInlineJs($this->fetch('stations/reports/listeners.js', ['station' => $station]));
|
|
?>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card">
|
|
<div class="card-header bg-primary-dark">
|
|
<div class="d-flex align-items-center">
|
|
<h2 class="card-title flex-fill my-0">
|
|
<?=__('Listeners')?>
|
|
</h2>
|
|
<div class="flex-shrink">
|
|
<a class="btn btn-bg" id="btn-export" href="<?=$router->fromHere(
|
|
'api:listeners:index',
|
|
[],
|
|
['format' => 'csv']
|
|
)?>" target="_blank" title="<?=__('Download CSV')?>">
|
|
<i class="material-icons" aria-hidden="true">file_download</i> <?=__('Download CSV')?>
|
|
</a>
|
|
<a class="btn btn-bg dropdown-toggle" id="reportrange" href="#">
|
|
<i class="material-icons" aria-hidden="true">date_range</i>
|
|
<span><?=__('Live Listeners')?></span> <i class="caret"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="map" style="height: 350px; z-index:0;">
|
|
</div>
|
|
<div id="app-datatable">
|
|
<div class="card-body row">
|
|
<div class="col-md-4">
|
|
<h5>
|
|
<?=__('Unique Listeners')?><br>
|
|
<small><?=__('for selected period')?></small>
|
|
</h5>
|
|
<h3>{{ listeners.length }}</h3>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h5>
|
|
<?=__('Total Listener Hours')?><br>
|
|
<small><?=__('for selected period')?></small>
|
|
</h5>
|
|
<h3>{{ total_listener_hours }}</h3>
|
|
</div>
|
|
</div>
|
|
<table class="data-table table table-responsive table-striped" id="app-datatable">
|
|
<thead>
|
|
<tr>
|
|
<th><?=__('IP')?></th>
|
|
<th><?=__('Time')?></th>
|
|
<th><?=__('Time (sec)')?></th>
|
|
<th><?=__('User Agent')?></th>
|
|
<th><?=__('Stream')?></th>
|
|
<th><?=__('Location')?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="listener in listeners">
|
|
<td>{{ listener.ip }}</td>
|
|
<td>{{ formatTime(listener.connected_time) }}</td>
|
|
<td>{{ listener.connected_time }}</td>
|
|
<td>
|
|
<span v-if="listener.is_mobile">
|
|
<i class="material-icons" aria-hidden="true">smartphone</i>
|
|
<span class="sr-only"><?=__('Mobile Device')?></span>
|
|
</span>
|
|
<span v-else>
|
|
<i class="material-icons" aria-hidden="true">desktop_windows</i>
|
|
<span class="sr-only"><?=__('Desktop Device')?></span>
|
|
</span>
|
|
{{ listener.user_agent }} <br>
|
|
<small>{{ listener.client }}</small>
|
|
</td>
|
|
<td>
|
|
<span v-if="listener.mount_name == ''">
|
|
<?=__('Unknown')?>
|
|
</span>
|
|
<span v-else>
|
|
{{ listener.mount_name }}<br>
|
|
<small v-if="listener.mount_is_local">
|
|
<?=__('Local')?>
|
|
</small>
|
|
<small v-else>
|
|
<?=__('Remote')?>
|
|
</small>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="listener.location.status == 'success'">
|
|
{{ listener.location.region }}, {{ listener.location.country }}
|
|
</span>
|
|
<span v-else-if="listener.location.message">
|
|
{{ listener.location.message }}
|
|
</span>
|
|
<span v-else>
|
|
<?=__('Unknown')?>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="card-body card-padding-sm text-muted">
|
|
<?=$attribution?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|