106 lines
4.0 KiB
Plaintext
106 lines
4.0 KiB
Plaintext
{block title}Logy{/block}
|
|
|
|
{block content}
|
|
|
|
<div class="platno">
|
|
<header class="lista">
|
|
<div>
|
|
<h1 class="lista-nadpis">Logy</h1>
|
|
<p class="lista-popis">Záznamy za {$nazevMesice} {$rok}.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="panel">
|
|
<div class="filtry logy-filtry">
|
|
<label class="razeni">
|
|
<span class="razeni-popisek">Měsíc</span>
|
|
<select class="razeni-vyber" aria-label="Měsíc" onchange="location.href = this.value">
|
|
<option n:foreach="$mesice as $polozka" value="{$polozka->url}" n:attr="selected: $polozka->aktivni">{$polozka->nazev}</option>
|
|
</select>
|
|
</label>
|
|
<label class="razeni">
|
|
<span class="razeni-popisek">Rok</span>
|
|
<select class="razeni-vyber" aria-label="Rok" onchange="location.href = this.value">
|
|
<option n:foreach="$roky as $polozka" value="{$polozka->url}" n:attr="selected: $polozka->aktivni">{$polozka->rok}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<table class="tabulka" n:if="$pocet > 0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Datum</th>
|
|
<th scope="col">Uživatel</th>
|
|
<th scope="col">Text</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logy-radky">
|
|
{include radky.latte, logy: $logy}
|
|
</tbody>
|
|
</table>
|
|
<p class="prazdno" n:if="$pocet === 0">V tomto měsíci není žádný záznam.</p>
|
|
<p class="lista-popis logy-pocet" id="logy-pocet" n:if="$pocet > 0" data-pocet="{$pocet}">{$pocetText}</p>
|
|
|
|
<div class="logy-dalsi" n:if="$dalsi">
|
|
<button type="button" class="tlacitko" id="logy-dalsi" data-url="{$dalsiUrl}">Načíst dalších 100 logů</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script n:if="$dalsi">
|
|
(function () {
|
|
var tlacitko = document.getElementById('logy-dalsi');
|
|
var telo = document.getElementById('logy-radky');
|
|
var pocet = document.getElementById('logy-pocet');
|
|
if (!tlacitko || !telo) {
|
|
return;
|
|
}
|
|
|
|
function textPoctu(n) {
|
|
var jednotky = n % 10;
|
|
var desitky = n % 100;
|
|
if (jednotky === 1 && desitky !== 11) {
|
|
return 'Zobrazen ' + n + ' záznam.';
|
|
}
|
|
if (jednotky >= 2 && jednotky <= 4 && (desitky < 12 || desitky > 14)) {
|
|
return 'Zobrazeny ' + n + ' záznamy.';
|
|
}
|
|
return 'Zobrazeno ' + n + ' záznamů.';
|
|
}
|
|
|
|
tlacitko.addEventListener('click', function () {
|
|
var url = tlacitko.getAttribute('data-url');
|
|
var puvodni = tlacitko.textContent;
|
|
tlacitko.disabled = true;
|
|
tlacitko.textContent = 'Načítám…';
|
|
fetch(url, {
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
|
credentials: 'same-origin'
|
|
}).then(function (response) {
|
|
if (!response.ok) {
|
|
throw new Error();
|
|
}
|
|
return response.json();
|
|
}).then(function (data) {
|
|
telo.insertAdjacentHTML('beforeend', data.html || '');
|
|
if (pocet) {
|
|
var n = parseInt(pocet.getAttribute('data-pocet') || '0', 10) + (data.pocet || 0);
|
|
pocet.setAttribute('data-pocet', String(n));
|
|
pocet.textContent = textPoctu(n);
|
|
}
|
|
if (data.dalsi && data.url) {
|
|
tlacitko.setAttribute('data-url', data.url);
|
|
tlacitko.disabled = false;
|
|
tlacitko.textContent = puvodni;
|
|
} else {
|
|
tlacitko.parentElement.remove();
|
|
}
|
|
}).catch(function () {
|
|
tlacitko.disabled = false;
|
|
tlacitko.textContent = puvodni;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
{/block}
|