daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(survyor/penilai): perbaikan view print-resume, lampiran, foto-lampiran, foto, header, main dan controller penilai dan surveyor

Browse Source
This commit is contained in:
majid
2025-02-25 08:50:03 +07:00
parent e4cec2a9a2
commit dfa364cdd8
10 changed files with 245 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
resources/views/penilai/components/foto-lampiran.blade.php
View File

@@ -13,70 +13,101 @@
@foreach ($groupedPhotos as $category => $photos)
<div class="mt-5">
<h2 class="text-gray-800 font-bold text-xl mb-3">{{ $category ?? 'Tanpa Kategori' }}</h2>
<div class="grid gap-5">
@php
$groupedBySubcategory = $photos->groupBy('sub');
@endphp
<div class="card border rounded-lg shadow-lg p-4">
<!-- Carousel Container -->
<div class="relative w-full overflow-hidden">
<div class="flex transition-transform duration-500 ease-in-out" id="carousel-{{ $category }}">
<span class="absolute top-0 right-2 text-white">
<i class="ki-filled ki-maximize"></i>
</span>
@foreach ($photos as $index => $item)
<div class="min-w-full flex flex-col items-center hover:cursor-pointer"
onclick="openPreview('{{ asset('storage/' . $item['path']) }}', '{{ $item['name'] }}', '{{ $item['description'] }}')">
@if ($groupedBySubcategory->isEmpty())
@foreach ($photos as $index => $item)
<div class="flex items-center justify-between">
<div class="grid gap-5">
<h3 class="text-gray-600 font-semibold text-lg">
{{ $item['name'] ?? 'Foto - ' . ($index + 1) }}
</h3>
<div class="flex items-center">
<div class="w-full overflow-hidden rounded-md" style="height: 500px;">
@if (isset($item['path']))
<img src="{{ asset('storage/' . $item['path']) }}" alt="Gambar {{ $index + 1 }}"
class="w-full h-auto object-cover rounded-md">
<img src="{{ asset('storage/' . $item['path']) }}"
alt="Gambar {{ $index + 1 }}" class="w-full h-full object-cover">
@else
<p class="text-gray-500">Gambar tidak tersedia</p>
@endif
</div>
<p class="text-gray-500 text-sm">{{ $item['description'] ?? '-' }}</p>
<h3 class="text-gray-600 font-semibold text-lg mt-3">
{{ $item['name'] ?? 'Foto - ' . ($index + 1) }}
</h3>
<p class="text-gray-500 text-sm mt-1">{{ $item['description'] ?? '-' }}</p>
</div>
</div>
@endforeach
@else
<!-- Jika ada subkategori, tampilkan berdasarkan subkategori -->
@foreach ($groupedBySubcategory as $subcategory => $subPhotos)
<div class="mb-4">
<!-- Judul Subkategori -->
<h4 class="text-gray-700 font-semibold text-lg mb-2">
@if ($subcategory)
{{ $subcategory }}
@endif
</h4>
<div class="grid gap-5">
@foreach ($subPhotos as $index => $item)
<div class="flex items-center justify-between">
<div class="grid gap-5">
<h3 class="text-gray-600 font-semibold text-lg">
{{ $item['name'] ?? 'Foto - ' . ($index + 1) }}
</h3>
<div class="flex items-center">
@if (isset($item['path']))
<img src="{{ asset('storage/' . $item['path']) }}" alt="Gambar {{ $index + 1 }}"
class="w-full h-auto object-cover rounded-md">
@else
<p class="text-gray-500">Gambar tidak tersedia</p>
@endif
</div>
<p class="text-gray-500 text-sm">{{ $item['description'] ?? '-' }}</p>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
@endif
@endforeach
</div>
<!-- Navigation Buttons -->
<button
class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
onclick="prevSlide('{{ $category }}')">
<i class="ki-outline ki-left-square"></i>
</button>
<button
class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
onclick="nextSlide('{{ $category }}')">
<i class="ki-outline ki-right-square"></i>
</button>
</div>
</div>
</div>
@endforeach
@endif
@endisset
<script>
let currentIndex = {};
function nextSlide(category) {
if (!currentIndex[category]) currentIndex[category] = 0;
const carousel = document.getElementById(`carousel-${category}`);
const totalSlides = carousel.children.length;
currentIndex[category] = (currentIndex[category] + 1) % totalSlides;
carousel.style.transform = `translateX(-${currentIndex[category] * 100}%)`;
}
function prevSlide(category) {
if (!currentIndex[category]) currentIndex[category] = 0;
const carousel = document.getElementById(`carousel-${category}`);
const totalSlides = carousel.children.length;
currentIndex[category] = (currentIndex[category] - 1 + totalSlides) % totalSlides;
carousel.style.transform = `translateX(-${currentIndex[category] * 100}%)`;
}
function openPreview(imagePath, name, description) {
const previewModal = document.createElement('div');
previewModal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
previewModal.innerHTML = `
<div class="relative">
<h3 class="text-white font-semibold text-lg mt-3 text-center">${name}</h3>
<img src="${imagePath}" class="max-w-full max-h-screen object-contain">
<button class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2"
onclick="closePreview(this)">×</button>
<p class="text-white text-sm mt-1">${description}</p>
</div>
`;
document.body.appendChild(previewModal);
}
function closePreview(button) {
const modal = button.closest('div.fixed');
if (modal) {
modal.remove();
}
}
</script>
@php
$fotoTypes = ['foto_gistaru', 'foto_bhumi', 'foto_argis_region', 'foto_tempat'];
if (($key = array_search('foto_tempat', $fotoTypes)) !== false) {