table responsive
This commit is contained in:
Saufi
@@ -4,7 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@yield('tajuk', config('app.name'))</title>
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
@php $cssVer = @filemtime(public_path('css/app.css')) ?: null; @endphp
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}{{ $cssVer ? '?v=' . $cssVer : '' }}">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
|
||||
@@ -26,105 +26,219 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kad" style="overflow-x:auto; padding:0;">
|
||||
<table class="jadual">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="8" style="background:var(--hijau)">HADIR ({{ $hadir->count() }})</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Siri</th>
|
||||
<th>Nama</th>
|
||||
<th>No. Telefon</th>
|
||||
<th>Emel</th>
|
||||
<th>Pusat Mengundi</th>
|
||||
<th>Saluran</th>
|
||||
<th>Jawatan</th>
|
||||
<th>Borang</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($hadir as $p)
|
||||
@php
|
||||
$penempatan = $p->butiranPenempatan();
|
||||
$rekod = $kehadiran->get($p->id);
|
||||
@endphp
|
||||
{{-- ===================== HADIR ===================== --}}
|
||||
<div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
|
||||
<div class="jadual-kepala">
|
||||
<h2 class="tajuk-jadual hijau">HADIR ({{ $hadir->count() }})</h2>
|
||||
<input type="text" class="cari-input tiada-cetak" data-cari
|
||||
placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai hadir">
|
||||
</div>
|
||||
<div class="jadual-bekas">
|
||||
<table class="jadual jadual-responsif">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><strong>{{ $rekod?->nombor_siri_papar }}</strong></td>
|
||||
<td>{{ $p->nama_ic }}</td>
|
||||
<td>{{ $p->no_telefon ?? '-' }}</td>
|
||||
<td>{{ $p->emel ?? '-' }}</td>
|
||||
<td>{{ $penempatan['pusat_mengundi'] }}</td>
|
||||
<td>{{ $penempatan['saluran'] }}</td>
|
||||
<td>{{ $penempatan['jawatan'] }}</td>
|
||||
<td>
|
||||
@if ($rekod?->borang_diambil)
|
||||
<span class="lencana lencana-hijau">Diambil</span>
|
||||
@else
|
||||
<span class="lencana lencana-kelabu">Belum</span>
|
||||
@endif
|
||||
</td>
|
||||
<th>Siri</th>
|
||||
<th>Nama</th>
|
||||
<th>No. Telefon</th>
|
||||
<th>Emel</th>
|
||||
<th>Pusat Mengundi</th>
|
||||
<th>Saluran</th>
|
||||
<th>Jawatan</th>
|
||||
<th>Borang</th>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="8" class="teks-tengah">Tiada petugas hadir lagi.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($hadir as $p)
|
||||
@php
|
||||
$penempatan = $p->butiranPenempatan();
|
||||
$rekod = $kehadiran->get($p->id);
|
||||
@endphp
|
||||
<tr class="baris-data">
|
||||
<td data-label="Siri"><strong>{{ $rekod?->nombor_siri_papar }}</strong></td>
|
||||
<td data-label="Nama">{{ $p->nama_ic }}</td>
|
||||
<td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
|
||||
<td data-label="Emel">{{ $p->emel ?? '-' }}</td>
|
||||
<td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
|
||||
<td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
|
||||
<td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
|
||||
<td data-label="Borang">
|
||||
@if ($rekod?->borang_diambil)
|
||||
<span class="lencana lencana-hijau">Diambil</span>
|
||||
@else
|
||||
<span class="lencana lencana-kelabu">Belum</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="baris-tiada"><td colspan="8" class="teks-tengah">Tiada petugas hadir lagi.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="jadual-kaki tiada-cetak">
|
||||
<span class="teks-kecil" data-info></span>
|
||||
<div class="paging" data-pager></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kad" style="overflow-x:auto; padding:0;">
|
||||
<table class="jadual">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="7" style="background:var(--merah)">TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nama</th>
|
||||
<th>No. Telefon</th>
|
||||
<th>Emel</th>
|
||||
<th>Pusat Mengundi</th>
|
||||
<th>Saluran</th>
|
||||
<th>Jawatan</th>
|
||||
<th>Hubungi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($tidakHadir as $p)
|
||||
@php
|
||||
$penempatan = $p->butiranPenempatan();
|
||||
$telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? '');
|
||||
$waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : '';
|
||||
@endphp
|
||||
{{-- ================ TIDAK / BELUM HADIR ================ --}}
|
||||
<div class="kad jadual-kad" data-alat data-per-page="10" style="padding:0;">
|
||||
<div class="jadual-kepala">
|
||||
<h2 class="tajuk-jadual merah">TIDAK / BELUM HADIR ({{ $tidakHadir->count() }})</h2>
|
||||
<input type="text" class="cari-input tiada-cetak" data-cari
|
||||
placeholder="Cari nama, telefon, pusat mengundi…" aria-label="Cari senarai tidak hadir">
|
||||
</div>
|
||||
<div class="jadual-bekas">
|
||||
<table class="jadual jadual-responsif">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ $p->nama_ic }}</td>
|
||||
<td>{{ $p->no_telefon ?? '-' }}</td>
|
||||
<td>{{ $p->emel ?? '-' }}</td>
|
||||
<td>{{ $penempatan['pusat_mengundi'] }}</td>
|
||||
<td>{{ $penempatan['saluran'] }}</td>
|
||||
<td>{{ $penempatan['jawatan'] }}</td>
|
||||
<td>
|
||||
@if ($telefon !== '')
|
||||
<div class="baris-tindakan">
|
||||
<a class="btn btn-kecil btn-hijau" target="_blank" rel="noopener"
|
||||
href="https://wa.me/{{ $waNombor }}?text={{ urlencode('Salam, ini peringatan taklimat petugas SPR bagi ' . ($sesi->dun->nama ?? '') . ' pada ' . $sesi->tarikh->format('d/m/Y') . ' di ' . $sesi->lokasi . '. Mohon hadir, terima kasih.') }}">
|
||||
WhatsApp
|
||||
</a>
|
||||
<a class="btn btn-kecil" href="tel:{{ $telefon }}">Call</a>
|
||||
</div>
|
||||
@else
|
||||
<span class="teks-kecil">Tiada no. telefon</span>
|
||||
@endif
|
||||
</td>
|
||||
<th>Nama</th>
|
||||
<th>No. Telefon</th>
|
||||
<th>Emel</th>
|
||||
<th>Pusat Mengundi</th>
|
||||
<th>Saluran</th>
|
||||
<th>Jawatan</th>
|
||||
<th>Hubungi</th>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="7" class="teks-tengah">Semua petugas telah hadir.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($tidakHadir as $p)
|
||||
@php
|
||||
$penempatan = $p->butiranPenempatan();
|
||||
$telefon = preg_replace('/[^0-9]/', '', $p->no_telefon ?? '');
|
||||
$waNombor = $telefon !== '' ? (str_starts_with($telefon, '60') ? $telefon : '6' . $telefon) : '';
|
||||
@endphp
|
||||
<tr class="baris-data">
|
||||
<td data-label="Nama">{{ $p->nama_ic }}</td>
|
||||
<td data-label="No. Telefon">{{ $p->no_telefon ?? '-' }}</td>
|
||||
<td data-label="Emel">{{ $p->emel ?? '-' }}</td>
|
||||
<td data-label="Pusat Mengundi">{{ $penempatan['pusat_mengundi'] }}</td>
|
||||
<td data-label="Saluran">{{ $penempatan['saluran'] }}</td>
|
||||
<td data-label="Jawatan">{{ $penempatan['jawatan'] }}</td>
|
||||
<td data-label="Hubungi">
|
||||
@if ($telefon !== '')
|
||||
<div class="baris-tindakan">
|
||||
<a class="btn btn-kecil btn-hijau" target="_blank" rel="noopener"
|
||||
href="https://wa.me/{{ $waNombor }}?text={{ urlencode('Salam, ini peringatan taklimat petugas SPR bagi ' . ($sesi->dun->nama ?? '') . ' pada ' . $sesi->tarikh->format('d/m/Y') . ' di ' . $sesi->lokasi . '. Mohon hadir, terima kasih.') }}">
|
||||
WhatsApp
|
||||
</a>
|
||||
<a class="btn btn-kecil" href="tel:{{ $telefon }}">Call</a>
|
||||
</div>
|
||||
@else
|
||||
<span class="teks-kecil">Tiada no. telefon</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr class="baris-tiada"><td colspan="7" class="teks-tengah">Semua petugas telah hadir.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="jadual-kaki tiada-cetak">
|
||||
<span class="teks-kecil" data-info></span>
|
||||
<div class="paging" data-pager></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="baris-tindakan tiada-cetak">
|
||||
<a href="{{ route('sesi.show', $sesi) }}" class="btn btn-luar">Kembali ke Sesi</a>
|
||||
<button onclick="window.print()" class="btn">Cetak Senarai</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
function init(root) {
|
||||
var perPage = parseInt(root.getAttribute('data-per-page') || '10', 10);
|
||||
var search = root.querySelector('[data-cari]');
|
||||
var tbody = root.querySelector('tbody');
|
||||
var pager = root.querySelector('[data-pager]');
|
||||
var info = root.querySelector('[data-info]');
|
||||
var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr.baris-data'));
|
||||
var page = 1;
|
||||
var filtered = rows;
|
||||
|
||||
if (!rows.length) {
|
||||
if (info) info.textContent = '0 rekod';
|
||||
return;
|
||||
}
|
||||
|
||||
var colCount = rows[0].children.length;
|
||||
|
||||
// Baris "tiada padanan" untuk hasil carian kosong.
|
||||
var kosong = document.createElement('tr');
|
||||
kosong.className = 'baris-tiada tiada-cetak';
|
||||
kosong.style.display = 'none';
|
||||
var kosongTd = document.createElement('td');
|
||||
kosongTd.colSpan = colCount;
|
||||
kosongTd.className = 'teks-tengah';
|
||||
kosongTd.textContent = 'Tiada padanan carian.';
|
||||
kosong.appendChild(kosongTd);
|
||||
tbody.appendChild(kosong);
|
||||
|
||||
function tapis() {
|
||||
var q = (search ? search.value : '').trim().toLowerCase();
|
||||
filtered = q === '' ? rows : rows.filter(function (r) {
|
||||
return r.textContent.toLowerCase().indexOf(q) !== -1;
|
||||
});
|
||||
page = 1;
|
||||
render();
|
||||
}
|
||||
|
||||
function render() {
|
||||
var total = filtered.length;
|
||||
var jumlahPage = Math.max(1, Math.ceil(total / perPage));
|
||||
if (page > jumlahPage) page = jumlahPage;
|
||||
var mula = (page - 1) * perPage;
|
||||
var habis = mula + perPage;
|
||||
|
||||
rows.forEach(function (r) { r.style.display = 'none'; });
|
||||
filtered.slice(mula, habis).forEach(function (r) { r.style.display = ''; });
|
||||
kosong.style.display = total === 0 ? '' : 'none';
|
||||
|
||||
if (info) {
|
||||
info.textContent = total === 0
|
||||
? 'Tiada padanan'
|
||||
: 'Menunjukkan ' + (mula + 1) + '–' + Math.min(habis, total) + ' daripada ' + total;
|
||||
}
|
||||
|
||||
renderPager(jumlahPage);
|
||||
}
|
||||
|
||||
function btn(label, target, opts) {
|
||||
opts = opts || {};
|
||||
var b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = 'paging-btn' + (opts.aktif ? ' aktif' : '');
|
||||
b.textContent = label;
|
||||
if (opts.disabled) {
|
||||
b.disabled = true;
|
||||
} else {
|
||||
b.addEventListener('click', function () { page = target; render(); });
|
||||
}
|
||||
pager.appendChild(b);
|
||||
}
|
||||
|
||||
function renderPager(jumlahPage) {
|
||||
if (!pager) return;
|
||||
pager.innerHTML = '';
|
||||
if (jumlahPage <= 1) return;
|
||||
|
||||
btn('‹', page - 1, { disabled: page === 1 });
|
||||
var start = Math.max(1, page - 2);
|
||||
var end = Math.min(jumlahPage, start + 4);
|
||||
start = Math.max(1, end - 4);
|
||||
for (var i = start; i <= end; i++) {
|
||||
btn(String(i), i, { aktif: i === page });
|
||||
}
|
||||
btn('›', page + 1, { disabled: page === jumlahPage });
|
||||
}
|
||||
|
||||
if (search) search.addEventListener('input', tapis);
|
||||
render();
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-alat]').forEach(init);
|
||||
})();
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user