Perbaikan minor
This commit is contained in:
pand03
@@ -1,3 +1,113 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
/* BUTTON */
|
||||
.btn-primary-modern {
|
||||
background: linear-gradient(135deg,#00a8a8,#007a7a);
|
||||
border: none;
|
||||
padding: 10px 18px;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary-modern:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e5e7eb;
|
||||
border: none;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* MODAL BACKGROUND */
|
||||
.modal-modern {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
backdrop-filter: blur(3px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* CARD */
|
||||
.modal-card {
|
||||
background: white;
|
||||
width: 420px;
|
||||
border-radius: 14px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
|
||||
animation: modalFade 0.25s ease;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CLOSE */
|
||||
.close-btn {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* FORM */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin-bottom: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #00a8a8;
|
||||
box-shadow: 0 0 0 2px rgba(0,168,168,0.2);
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* ANIMATION */
|
||||
@keyframes modalFade {
|
||||
from {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,3 @@
|
||||
@extends('layouts.applications')
|
||||
|
||||
@section('styles')
|
||||
<link rel="stylesheet" href="{{ mix('css/member.css') }}">
|
||||
@endsection
|
||||
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-6">
|
||||
<div class="bg-white shadow-xl rounded-2xl w-full max-w-3xl p-8">
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
||||
@@ -66,6 +57,4 @@ class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
</div>
|
||||
264
resources/views/apps/member/index.blade.php
Normal file
264
resources/views/apps/member/index.blade.php
Normal file
@@ -0,0 +1,264 @@
|
||||
@extends('layouts.applications')
|
||||
|
||||
@section('styles')
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ asset('css/member/member.css') }}">
|
||||
@endsection
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="entry-container">
|
||||
|
||||
{{-- <img src="{{ asset('images/parkq-systems.png') }}"
|
||||
alt="Logo parkq-systems"
|
||||
class="img-fluid logo-img"> --}}
|
||||
|
||||
<div id="form-input">
|
||||
<h2 class="entry-label"> Input No Polisi </h2>
|
||||
<form id="formNopol" method="GET">
|
||||
@csrf
|
||||
<input type="text" id="nopol" name="no_pol" class="nopol-input" placeholder="B1234ABC" autocomplete="off">
|
||||
<button type="submit" class="btn-submit"> Cari </button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- FORM MEMBER AKTIF --}}
|
||||
<div id="form-active" class="status-card active-card" style="display:none;">
|
||||
<div class="status-header">
|
||||
<h3 class="entry-label">Member Aktif</h3>
|
||||
</div>
|
||||
|
||||
<div class="member-info">
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Nama</span>
|
||||
<span id="act-nama" class="value"></span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">No Polisi</span>
|
||||
<span id="act-nopol" class="value"></span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Periode</span>
|
||||
<small id="act-periode" class="value"></small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="active-warning">
|
||||
Member masih aktif
|
||||
</div>
|
||||
|
||||
<p class="text-info">silahkan pilih produk di bawah ini :</p>
|
||||
<div class="select-input">
|
||||
<select id="produkSelect" class="form-control form-select">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn-submit">
|
||||
OPEN GATE
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- FORM MEMBER EXPIRED --}}
|
||||
<div id="form-expired" class="status-card expired-card" style="display:none;">
|
||||
|
||||
<div class="status-header">
|
||||
{{-- <span class="status-badge">EXPIRED</span> --}}
|
||||
<h3 class="entry-label">Member Tidak Aktif</h3>
|
||||
</div>
|
||||
|
||||
<div class="member-info">
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Nama</span>
|
||||
<span id="exp-nama" class="value"></span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">No Polisi</span>
|
||||
<span id="exp-nopol" class="value"></span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Periode</span>
|
||||
<small id="exp-periode" class="value"></small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="status-warning">
|
||||
Masa berlaku member telah berakhir.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="select-input">
|
||||
<select id="produkSelect" class="form-control form-select">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<button class="btn-submit btn-renew">
|
||||
PERPANJANG MEMBER
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- FORM NON MEMBER --}}
|
||||
<div id="form-nonmember" style="display:none;">
|
||||
<h3 class="entry-label">Bukan Member</h3>
|
||||
|
||||
<button class="btn-submit">
|
||||
BUAT TIKET PARKIR
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('javascript')
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
|
||||
let input = document.getElementById("nopol");
|
||||
let form = document.getElementById("formNopol");
|
||||
const produk = @json($produk);
|
||||
|
||||
/* autofocus */
|
||||
input.focus();
|
||||
|
||||
/* uppercase otomatis */
|
||||
input.addEventListener("input", function(){
|
||||
this.value = this.value.toUpperCase();
|
||||
});
|
||||
|
||||
function submitNopol(){
|
||||
|
||||
let nopol = input.value.trim();
|
||||
|
||||
if(!nopol) return;
|
||||
|
||||
fetch("/api/member/" + encodeURIComponent(nopol))
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
/* sembunyikan semua form */
|
||||
document.getElementById("form-input").style.display="none";
|
||||
document.getElementById("form-active").style.display="none";
|
||||
document.getElementById("form-expired").style.display="none";
|
||||
document.getElementById("form-nonmember").style.display="none";
|
||||
|
||||
/* aktif */
|
||||
if(data.status === "active"){
|
||||
|
||||
let jenisMobil = data.data.jenis_mobil;
|
||||
let jLangganan = data.data.unit_kerja;
|
||||
|
||||
console.log(data);
|
||||
document.getElementById("form-active").style.display="block";
|
||||
document.getElementById("act-nama").innerText = data.data.nama;
|
||||
document.getElementById("act-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
|
||||
document.getElementById("act-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
|
||||
// data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
|
||||
renderProduk(jLangganan, jenisMobil);
|
||||
|
||||
}
|
||||
|
||||
/* expired */
|
||||
else if(data.status === "expired"){
|
||||
|
||||
let jenisMobil = data.data.jenis_mobil;
|
||||
let jLangganan = data.data.unit_kerja;
|
||||
|
||||
console.log(data);
|
||||
document.getElementById("form-expired").style.display="block";
|
||||
document.getElementById("exp-nama").innerText = data.data.nama;
|
||||
document.getElementById("exp-nopol").innerText = data.data.vehicle + " - " + data.data.nopol;
|
||||
document.getElementById("exp-periode").innerText = formatTanggal(data.data.awal.split(' ')[0]) + " - " + formatTanggal(data.data.akhir.split(' ')[0])
|
||||
// data.data.awal.split(' ')[0] + " - " + data.data.akhir.split(' ')[0];
|
||||
|
||||
// fetch("/memberin/" + encodeURIComponent(jLangganan))
|
||||
// .then(res => res.json())
|
||||
// .then(data => {
|
||||
// console.log(res);
|
||||
// });
|
||||
console.log(produk);
|
||||
renderProduk(jLangganan, jenisMobil);
|
||||
|
||||
}
|
||||
|
||||
/* bukan member */
|
||||
else{
|
||||
|
||||
document.getElementById("form-nonmember").style.display="block";
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function renderProduk(stasiunId, jenisMobil){
|
||||
|
||||
console.log(stasiunId);
|
||||
console.log(jenisMobil);
|
||||
let select = document.getElementById("produkSelect");
|
||||
|
||||
select.innerHTML = '<option value="">Pilih Produk</option>';
|
||||
|
||||
let filtered = produk.filter(p =>
|
||||
p.stasiunkerja_id == stasiunId &&
|
||||
p.id_mobil == jenisMobil
|
||||
);
|
||||
|
||||
filtered.forEach(p => {
|
||||
|
||||
let option = document.createElement("option");
|
||||
|
||||
option.value = p.id_mobil;
|
||||
option.textContent = p.jenis_langganan + " - Rp " + p.tarif;
|
||||
|
||||
select.appendChild(option);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function formatTanggal(tgl){
|
||||
|
||||
let parts = tgl.split('-');
|
||||
|
||||
return parts[2] + '-' + parts[1] + '-' + parts[0];
|
||||
|
||||
}
|
||||
// input.addEventListener("keydown", function(e){
|
||||
|
||||
// if(e.key === "Enter"){
|
||||
|
||||
// e.preventDefault();
|
||||
// submitNopol();
|
||||
|
||||
// }
|
||||
|
||||
// });
|
||||
|
||||
/* tombol submit */
|
||||
form.addEventListener("submit", function(e){
|
||||
|
||||
e.preventDefault();
|
||||
submitNopol();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -1,9 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ mix('css/member.css') }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
@yield('styles')
|
||||
</head>
|
||||
<body>
|
||||
<div class="brand-logo">
|
||||
<img src="{{ asset('images/parkq-systems.png') }}" alt="ParkQ Systems">
|
||||
{{-- <span class="brand-text">Park<span class="brand-q">Q</span> Systems</span> --}}
|
||||
</div>
|
||||
@yield('content')
|
||||
|
||||
@yield('javascript')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user