130 lines
5.3 KiB
Twig
130 lines
5.3 KiB
Twig
{% extends "layouts/default.twig" %}
|
||
|
||
{% block header %}
|
||
<p class="text-muted small">
|
||
Обновлено: {{ updated_at }} МСК<br/>
|
||
Плейлистов в списке: <strong>{{ count }}</strong>
|
||
</p>
|
||
<hr/>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="table-responsive">
|
||
<table class="table table-responsive table-dark table-hover small">
|
||
<thead>
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Информация о плейлисте</th>
|
||
<th>Каналов</th>
|
||
<th class="d-none d-sm-table-cell">Ссылка для ТВ</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for id, playlist in playlists %}
|
||
<tr class="pls" data-playlist-id="{{ id }}">
|
||
<td class="text-center id">
|
||
<strong>{{ id }}</strong>
|
||
</td>
|
||
<td class="info">
|
||
<strong>{{ playlist.name }}</strong>
|
||
<span class="badge small bg-secondary text-dark status">loading</span>
|
||
<div class="small mt-2">
|
||
{% if playlist.desc|length > 0 %}
|
||
<p class="my-1 d-none d-lg-block">{{ playlist.desc }}</p>
|
||
{% endif %}
|
||
<a href="{{ base_url(id ~ '/details') }}">Подробнее...</a>
|
||
{# <a class="btn btn-sm btn-outline-light" href="{{ base_url(id ~ '/details') }}">Подробнее...</a>#}
|
||
</div>
|
||
</td>
|
||
<td class="text-center count">
|
||
<div class="spinner-border text-success" role="status">
|
||
<span class="visually-hidden">загрузка...</span>
|
||
</div>
|
||
</td>
|
||
<td class="col-3 d-none d-sm-table-cell">
|
||
<span onclick="prompt('Скопируй адрес плейлиста', '{{ playlist.url }}')"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="top"
|
||
title="Нажми на ссылку, чтобы скопировать её в буфер обмена"
|
||
class="font-monospace cursor-pointer">
|
||
{{ playlist.url }}
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
{% if pages.count > 0 %}
|
||
<div aria-label="pages">
|
||
<ul class="pagination justify-content-center">
|
||
{% for page in range(1, pages.count) %}
|
||
{% if page == pages.current %}
|
||
<li class="page-item active" aria-current="page">
|
||
<span class="page-link">{{ page }}</span>
|
||
</li>
|
||
{% else %}
|
||
<li class="page-item">
|
||
<a class="page-link bg-dark border-secondary text-light" href="{{ base_url('page/' ~ page) }}">{{ page }}</a>
|
||
</li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block footer %}
|
||
<script>
|
||
document.querySelectorAll('tr.pls').forEach((tr) => {
|
||
const id = tr.attributes['data-playlist-id'].value
|
||
const xhr = new XMLHttpRequest()
|
||
xhr.responseType = 'json'
|
||
xhr.timeout = 60000 // ms = 1 min
|
||
let el_status = tr.querySelector('span.status')
|
||
let el_count = tr.querySelector('td.count')
|
||
xhr.onreadystatechange = () => {
|
||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||
console.log('[' + id + '] DONE', xhr.response)
|
||
el_status.classList.remove('bg-secondary')
|
||
el_status.innerText = xhr.response.status
|
||
el_count.innerText = xhr.response?.count ?? 0
|
||
switch (xhr.response.status) {
|
||
case 'online':
|
||
el_status.classList.add('bg-success')
|
||
break
|
||
case 'timeout':
|
||
el_status.classList.add('bg-warning')
|
||
break
|
||
default:
|
||
el_status.classList.add('bg-danger')
|
||
break
|
||
}
|
||
if (xhr.response.error) {
|
||
el_status.title = '[' + xhr.response.error.code + '] ' + xhr.response.error.message
|
||
}
|
||
}
|
||
}
|
||
xhr.onerror = () => {
|
||
console.log('[' + id + '] ERROR', xhr.response)
|
||
el_status.classList.add('bg-danger')
|
||
el_status.innerText = 'error'
|
||
el_count.innerText = 0
|
||
}
|
||
xhr.onabort = () => {
|
||
console.log('[' + id + '] ABORTED', xhr.response)
|
||
el_status.classList.add('bg-secondary')
|
||
el_count.innerText = 0
|
||
}
|
||
xhr.ontimeout = () => {
|
||
console.log('[' + id + '] TIMEOUT', xhr.response)
|
||
el_status.classList.add('bg-secondary')
|
||
el_status.innerText = 'timeout'
|
||
el_count.innerText = 0
|
||
}
|
||
xhr.open('GET', '/' + id + '/json')
|
||
xhr.send()
|
||
})
|
||
</script>
|
||
{% endblock %}
|