e41220949
/
TIF_NGANJUK_E41220949
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aduan blm fiks

This commit is contained in:
rahmagustin 2026-01-24 23:21:34 +07:00
parent 98e112dec2
commit 039d18e5e3
3 changed files with 176 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/assets/user/css/main.css
View File

@ -2069,7 +2069,7 @@ .contact .php-email-form .form-group {
} }
.contact .php-email-form input[type=text], .contact .php-email-form input[type=text],
.contact .php-email-form input[type=email], .contact .php-email-form input[type=tel],
.contact .php-email-form textarea { .contact .php-email-form textarea {
border-radius: 0px; border-radius: 0px;
box-shadow: none; box-shadow: none;
@ -2079,13 +2079,13 @@ .contact .php-email-form textarea {
} }
.contact .php-email-form input[type=text]:focus, .contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus, .contact .php-email-form input[type=tel]:focus,
.contact .php-email-form textarea:focus { .contact .php-email-form textarea:focus {
border-color: var(--accent-color); border-color: var(--accent-color);
} }
.contact .php-email-form input[type=text], .contact .php-email-form input[type=text],
.contact .php-email-form input[type=email] { .contact .php-email-form input[type=tel] {
height: 48px; height: 48px;
padding: 10px 15px; padding: 10px 15px;
} }
@ -2095,6 +2095,52 @@ .contact .php-email-form textarea {
height: 290px; height: 290px;
} }
/* ===== FILE INPUT (BUKTI FOTO) ===== */
.contact .php-email-form input[type=file] {
border-radius: 0px;
box-shadow: none;
font-size: 14px;
height: 48px;
padding: 10px 15px;
cursor: pointer;
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}
/* focus sama seperti input lain */
.contact .php-email-form input[type=file]:focus {
border-color: var(--accent-color);
outline: none;
}
/* styling tombol file (Choose File) */
.contact .php-email-form input[type=file]::file-selector-button {
border: none;
padding: 10px 15px;
margin-right: 10px;
background-color: var(--accent-color);
color: #fff;
font-size: 14px;
border-radius: 0px;
cursor: pointer;
}
/* hover tombol */
.contact .php-email-form input[type=file]::file-selector-button:hover {
opacity: 0.9;
}
/* fallback browser lama */
.contact .php-email-form input[type=file]::-webkit-file-upload-button {
border: none;
padding: 10px 15px;
background-color: var(--accent-color);
color: #fff;
border-radius: 0px;
}
.contact .php-email-form button[type=submit] { .contact .php-email-form button[type=submit] {
background: var(--accent-color); background: var(--accent-color);
color: var(--contrast-color); color: var(--contrast-color);

118
resources/views/user/aduan-tps.blade.php
View File

@ -1,35 +1,35 @@
@extends('user.template') @extends('user.template')
@section('content') @section('content')
<!-- Page Title --> <!-- Page Title -->
<div class="page-title"> <div class="page-title">
<div class="container d-lg-flex justify-content-between align-items-center"> <div class="container d-lg-flex justify-content-between align-items-center">
<h1 class="mb-2 mb-lg-0">Aduan TPS</h1> <h1 class="mb-2 mb-lg-0">Aduan TPS</h1>
<nav class="breadcrumbs"> <nav class="breadcrumbs">
<ol> <ol>
<li><a href="index.html">Beranda</a></li> <li><a href="{{ url('/') }}">Beranda</a></li>
<li class="current">Aduan TPS</li> <li class="current">Aduan TPS</li>
</ol> </ol>
</nav> </nav>
</div> </div>
</div><!-- End Page Title --> </div>
<!-- End Page Title -->
<section id="contact" class="contact section"> <section id="contact" class="contact section">
<div class="container" data-aos="fade"> <div class="container" data-aos="fade">
<div class="row gy-5 gx-lg-5"> <div class="row gy-5 gx-lg-5">
{{-- KOLOM KIRI --}}
<div class="col-lg-4"> <div class="col-lg-4">
<div class="info"> <div class="info">
<h3 class="mb-3">TPS yang Diadukan</h3> <h3 class="mb-3">TPS yang Diadukan</h3>
{{-- FOTO TPS --}} {{-- FOTO TPS --}}
<div class="mb-3"> <div class="mb-3 d-none" id="foto-wrapper">
<img id="foto-tps" <img id="foto-tps" class="img-fluid w-100"
src="{{ $tps && $tps->foto_tps ? asset('storage/' . $tps->foto_tps) : asset('assets/user/img/no-image.png') }}" style="object-fit:cover; max-height:220px;">
class="img-fluid w-100" style="object-fit:cover; max-height:220px;" alt="Foto TPS">
</div> </div>
{{-- INFO TPS --}} {{-- INFO TPS --}}
@ -37,86 +37,114 @@ class="img-fluid w-100" style="object-fit:cover; max-height:220px;" alt="Foto TP
@if ($tps) @if ($tps)
<p class="mb-1"><strong>{{ $tps->nama_tps }}</strong></p> <p class="mb-1"><strong>{{ $tps->nama_tps }}</strong></p>
<p class="mb-1 text-muted">{{ $tps->alamat_tps }}</p> <p class="mb-1 text-muted">{{ $tps->alamat_tps }}</p>
<input type="hidden" name="lokasi_tps_id" value="{{ $tps->id_tps }}">
@else @else
<p class="text-muted mb-2"> <p class="text-muted mb-2">
Silakan pilih TPS yang akan diadukan Silakan pilih TPS yang akan diadukan
</p> </p>
<select name="lokasi_tps_id" id="pilih-tps" class="form-select" required> <select id="pilih-tps" class="form-select">
<option value="">-- Pilih TPS --</option> <option value="">-- Pilih TPS --</option>
@foreach ($listTps as $item) @foreach ($listTps as $item)
<option value="{{ $item->id_tps }}" data-nama="{{ $item->nama_tps }}" <option value="{{ $item->id_tps }}"
data-nama="{{ $item->nama_tps }}"
data-alamat="{{ $item->alamat_tps }}" data-alamat="{{ $item->alamat_tps }}"
data-foto="{{ $item->foto_tps ? asset('storage/' . $item->foto_tps) : asset('assets/user/img/no-image.png') }}"> data-foto="{{ $item->foto_tps
? asset('storage/' . $item->foto_tps)
: asset('assets/user/img/no-image.png') }}">
{{ $item->nama_tps }} {{ $item->nama_tps }}
</option> </option>
@endforeach @endforeach
</select> </select>
@endif @endif
</div> </div>
</div>
</div> </div>
{{-- KOLOM KANAN --}}
</div>
<div class="col-lg-8"> <div class="col-lg-8">
<form action="forms/contact.php" method="post" role="form" class="php-email-form"> <form action="{{ route('user.aduan.store') }}" method="POST"
class="php-email-form" enctype="multipart/form-data">
@csrf
{{-- PENTING --}}
<input type="hidden" name="lokasi_tps_id" id="lokasi_tps_id"
value="{{ $tps ? $tps->id_tps : '' }}">
<div class="row"> <div class="row">
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" <input type="text" name="nama_pelapor" class="form-control"
placeholder="Your Name" required=""> placeholder="Nama Pelapor" required>
</div> </div>
<div class="col-md-6 form-group mt-3 mt-md-0"> <div class="col-md-6 form-group mt-3 mt-md-0">
<input type="email" class="form-control" name="email" id="email" <input type="tel" name="no_pelapor" class="form-control"
placeholder="Your Email" required=""> placeholder="No. Telp Pelapor" required>
</div> </div>
</div> </div>
<div class="form-group mt-3"> <div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" <input type="text" name="alamat_pelapor" class="form-control"
required=""> placeholder="Alamat Pelapor" required>
</div> </div>
<div class="form-group mt-3"> <div class="form-group mt-3">
<textarea class="form-control" name="message" placeholder="Message" required=""></textarea> <textarea name="isi_aduan" class="form-control"
placeholder="Isi Aduan" required></textarea>
</div> </div>
<div class="my-3">
<div class="loading">Loading</div> {{-- FILE INPUT (SUDAH SERAGAM) --}}
<div class="error-message"></div> <div class="form-group mt-3">
<div class="sent-message">Your message has been sent. Thank you!</div> <input type="file" name="bukti_foto"
class="form-control file-input"
accept="image/*">
</div>
<div class="text-center mt-4">
<button type="submit">Kirim Aduan</button>
</div> </div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form> </form>
</div><!-- End Contact Form -->
</div> </div>
</div> </div>
</div>
</section> </section>
{{-- SCRIPT TPS --}}
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const selectTps = document.getElementById('pilih-tps'); const selectTps = document.getElementById('pilih-tps');
const infoTps = document.getElementById('info-tps');
const fotoWrapper = document.getElementById('foto-wrapper');
const fotoTps = document.getElementById('foto-tps');
const inputLokasi = document.getElementById('lokasi_tps_id');
if (!selectTps) return;
if (selectTps) {
selectTps.addEventListener('change', function () { selectTps.addEventListener('change', function () {
if (!this.value) return;
const option = this.options[this.selectedIndex]; const option = this.options[this.selectedIndex];
const foto = option.getAttribute('data-foto'); inputLokasi.value = this.value;
const nama = option.getAttribute('data-nama');
const alamat = option.getAttribute('data-alamat');
// Ganti foto fotoTps.src = option.dataset.foto;
document.getElementById('foto-tps').src = foto; fotoWrapper.classList.remove('d-none');
// Ganti info teks infoTps.innerHTML = `
document.getElementById('info-tps').insertAdjacentHTML('beforeend', ` <p class="mb-1"><strong>${option.dataset.nama}</strong></p>
<p class="mt-3 mb-1"><strong>${nama}</strong></p> <p class="text-muted mb-2">${option.dataset.alamat}</p>
<p class="text-muted">${alamat}</p> <button type="button" class="btn btn-sm btn-outline-secondary" id="ganti-tps">
`); Ganti TPS
</button>
`;
document.getElementById('ganti-tps').onclick = () => {
inputLokasi.value = '';
fotoWrapper.classList.add('d-none');
infoTps.innerHTML = '<p class="text-muted mb-2">Silakan pilih TPS yang akan diadukan</p>';
infoTps.appendChild(selectTps);
selectTps.value = '';
};
}); });
}
}); });
</script> </script>

2
resources/views/user/index.blade.php
View File

@ -452,7 +452,7 @@ function markerIcon(color) {
<p class="small text-muted my-2">atau</p> --}} <p class="small text-muted my-2">atau</p> --}}
<a href="{{ route('user.aduan-tps', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100"> <a href="{{ route('user.aduan', $tpsPertama->id ?? 1) }}" class="btn btn-danger w-100">
<i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan <i class="bi bi-megaphone-fill me-1"></i> Laporkan Aduan
</a> </a>
</div> </div>