tps dan kategori

This commit is contained in:
rahmagustin 2026-01-30 10:18:47 +07:00
parent 01ae5917d7
commit 3f01fe71b1
5 changed files with 172 additions and 127 deletions

View File

@ -29968,11 +29968,4 @@ @media (max-width: 991px) {
}
}
.deskripsi-cell {
max-width: 350px; /* atur sesuai kebutuhan */
white-space: normal; /* teks boleh turun baris */
word-wrap: break-word; /* potong kata panjang */
vertical-align: top;
}
/*# sourceMappingURL=../maps/vertical-layout-light/style.css.map */

View File

@ -14,17 +14,17 @@
<div class="form-group">
<label>Nama Kategori</label>
<input type="text" name="nama_kategori" class="form-control" required>
<input type="text" name="nama_kategori" class="form-control" placeholder="Nama Kategori">
</div>
<div class="form-group">
<label>Kepanjangan Kategori</label>
<input type="text" name="kepanjangan_kategori" class="form-control">
<input type="text" name="kepanjangan_kategori" class="form-control" placeholder="Kepanjangan Kategori">
</div>
<div class="form-group">
<label for="exampleTextarea1">Deskripsi</label>
<textarea name="deskripsi" class="form-control" id="exampleTextarea1" rows="4"></textarea>
<textarea name="deskripsi" class="form-control" id="exampleTextarea1" rows="8" placeholder="Deskripsi"></textarea>
</div>
<div class="form-group">

View File

@ -28,7 +28,7 @@ class="form-control">
<div class="form-group">
<label>Deskripsi</label>
<textarea name="deskripsi" class="form-control">{{ $kategori->deskripsi }}</textarea>
<textarea name="deskripsi" rows="8" class="form-control">{{ $kategori->deskripsi }}</textarea>
</div>
<div class="form-group">

View File

@ -1,115 +1,124 @@
@extends('admin.template')
@section('content')
<div class="content-wrapper">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<div>
<h4 class="card-title mb-0">Data Kategori TPS</h4>
<p class="card-description mb-0">
Daftar Kategori Tempat Pembangunan Sampah (TPS)
</p>
</div>
<a href="{{ route('admin.kategori.create') }}" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> Tambah
</a>
<style>
.deskripsi-truncate-div {
max-width: 300px; /* lebar kolom deskripsi */
white-space: normal !important; /* override Bootstrap */
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.table td {
vertical-align: top; /* supaya teks membungkus ke bawah */
}
</style>
<div class="content-wrapper">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="mb-3 d-flex justify-content-between">
<div>
<h4 class="mb-0 card-title">Data Kategori TPS</h4>
<p class="mb-0 card-description">
Daftar Kategori Tempat Pembangunan Sampah (TPS)
</p>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Kategori</th>
<th>Foto</th>
<th>Deskripsi</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($kategori as $item)
<tr>
<td>{{ $item->nama_kategori }}</td>
<td>
@if ($item->foto_kategori)
<img src="{{ asset('storage/' . $item->foto_kategori) }}" alt="Foto Kategori"
style="
width:200px;
height:auto;
border-radius:2px;
">
@else
<span class="text-muted">-</span>
@endif
</td>
<td class="deskripsi-truncate">
{{ $item->deskripsi ?? '-' }}
</td>
<td class="text-center">
<a href="{{ route('admin.kategori.edit', $item->id_kategori_tps) }}"
class="btn btn-warning btn-sm me-1" title="Edit">
<i class="bi bi-pencil-square"></i>
</a>
<form action="{{ route('admin.tps.destroy', $item->id_kategori_tps) }}" method="POST"
class="form-hapus" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">
<i class="bi bi-trash"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<a href="{{ route('admin.kategori.create') }}" class="btn btn-primary">
<i class="bi bi-plus-lg"></i> Tambah
</a>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Kategori</th>
<th>Foto</th>
<th>Deskripsi</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($kategori as $item)
<tr>
<td>{{ $item->nama_kategori }}</td>
<td>
@if ($item->foto_kategori)
<img src="{{ asset('storage/' . $item->foto_kategori) }}" alt="Foto Kategori"
style="width:200px; height:auto; border-radius:2px;">
@else
<span class="text-muted">-</span>
@endif
</td>
<td>
<div class="deskripsi-truncate-div">
{{ $item->deskripsi ?? '-' }}
</div>
</td>
<td class="text-center">
<a href="{{ route('admin.kategori.edit', $item->id_kategori_tps) }}"
class="btn btn-warning btn-sm me-1" title="Edit">
<i class="bi bi-pencil-square"></i>
</a>
<form action="{{ route('admin.tps.destroy', $item->id_kategori_tps) }}" method="POST"
class="form-hapus" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">
<i class="bi bi-trash"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.form-hapus').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
</div>
Swal.fire({
title: 'Hapus Data Kategori TPS?',
text: 'Data yang sudah dihapus tidak dapat dikembalikan!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Ya, Hapus',
cancelButtonText: 'Batal',
didOpen: () => {
document.querySelector('.swal2-popup').style.fontFamily =
'Nunito, sans-serif';
}
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
});
<script>
document.querySelectorAll('.form-hapus').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
Swal.fire({
title: 'Hapus Data Kategori TPS?',
text: 'Data yang sudah dihapus tidak dapat dikembalikan!',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#6c757d',
confirmButtonText: 'Ya, Hapus',
cancelButtonText: 'Batal',
didOpen: () => {
document.querySelector('.swal2-popup').style.fontFamily =
'Nunito, sans-serif';
}
}).then((result) => {
if (result.isConfirmed) {
form.submit();
}
});
</script>
});
});
</script>
@if (session('success'))
<script>
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: '{{ session('success') }}',
timer: 2000,
showConfirmButton: false
});
</script>
@endif
@if (session('success'))
<script>
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: '{{ session('success') }}',
timer: 2000,
showConfirmButton: false
});
</script>
@endif
@endsection

View File

@ -15,7 +15,9 @@
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{{ asset('assets/user/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
@ -42,21 +44,60 @@
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="{{ route('user.index') }}" class="active">Beranda<br></a></li>
<li class="dropdown"><a href="{{ route('user.about') }}"><span>Tentang</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="{{ route('user.about-tps') }}">TPS</a></li>
<li><a href="{{ route('user.about-tps') }}">TPS 3R</a></li>
<li><a href="{{ route('user.about-tps') }}">TPA</a></li>
</ul>
<li>
<a href="{{ route('user.index') }}"
class="{{ Request::routeIs('user.index') ? 'active' : '' }}">
Beranda<br>
</a>
</li>
<li class="dropdown">
<a href="{{ route('user.about') }}"
class="{{ Request::routeIs('user.about*') ? 'active' : '' }}">
<span>Tentang</span>
<i class="bi bi-chevron-down toggle-dropdown"></i>
</a>
<ul>
<li>
<a href="{{ route('user.about-tps') }}"
class="{{ Request::routeIs('user.about-tps') ? 'active' : '' }}">TPS</a>
</li>
<li><a href="{{ route('user.sig-tps') }}">Sebaran TPS</a></li>
<li><a href="{{ route('user.aduan') }}">Aduan TPS</a></li>
<li><a href="{{ route('user.kontak') }}">Kontak</a></li>
<li>
<a href="{{ route('user.about-tps') }}"
class="{{ Request::routeIs('user.about-tps') ? 'active' : '' }}">TPS 3R</a>
</li>
<li>
<a href="{{ route('user.about-tps') }}"
class="{{ Request::routeIs('user.about-tps') ? 'active' : '' }}">TPA</a>
</li>
</ul>
</li>
<li>
<a href="{{ route('user.sig-tps') }}"
class="{{ Request::routeIs('user.sig-tps') ? 'active' : '' }}">
Sebaran TPS
</a>
</li>
<li>
<a href="{{ route('user.aduan') }}"
class="{{ Request::routeIs('user.aduan') ? 'active' : '' }}">
Aduan TPS
</a>
</li>
<li>
<a href="{{ route('user.kontak') }}"
class="{{ Request::routeIs('user.kontak') ? 'active' : '' }}">
Kontak
</a>
</li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
<a class="btn-getstarted" href="{{ route('login') }}">Masuk</a>
</div>
@ -75,9 +116,10 @@
<a href="index.html" class="logo d-flex align-items-center">
<span class="sitename">SIG TPS Kab. Nganjuk</span>
</a>
<div class="footer-contact pt-3">
<div class="pt-3 footer-contact">
<p>Dinas Lingkungan Hidup Kabupaten Nganjuk</p>
<p>Jl. Raya Kedondong No.01, Sanggrahan, Kedondong, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461</p>
<p>Jl. Raya Kedondong No.01, Sanggrahan, Kedondong, Kec. Bagor, Kabupaten Nganjuk, Jawa
Timur 64461</p>
</div>
</div>
@ -129,7 +171,8 @@
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i
class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>