fajri/LAB_LINGKUNGAN
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ganti format table

Browse Source
This commit is contained in:
sas.fajri
2025-04-24 14:39:28 +07:00
parent f481cc76f1
commit a2a700280b
11 changed files with 2078 additions and 1397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
FOLDER/Permintaan Layanan/page/permintaan_layanan.html
View File

@@ -206,6 +206,100 @@
border: 1px solid #2196F3;
color: #0d47a1;
}
.parameter-category {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 4px;
}
.parameter-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 15px;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
transition: background-color 0.2s;
}
.parameter-item:hover {
background-color: #f8f9fa;
}
.parameter-info {
display: flex;
flex-direction: column;
}
.parameter-name {
font-weight: bold;
}
.parameter-method {
font-size: 12px;
color: #666;
}
.parameter-price {
font-weight: bold;
color: #2196F3;
}
.selected-material {
margin-bottom: 15px;
padding: 10px;
background: #e3f2fd;
border-radius: 4px;
font-weight: bold;
}
.category-selection {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.category-card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.category-card:hover {
border-color: #2196F3;
background: #f8f9fa;
}
.category-card.selected {
border-color: #2196F3;
background: #e3f2fd;
}
.selected-bidang,
.selected-category {
margin-bottom: 15px;
padding: 10px;
background: #e3f2fd;
border-radius: 4px;
font-weight: bold;
}
.parameter-group {
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 4px;
}
.parameter-group h4 {
margin-bottom: 10px;
color: #2196F3;
}
</style>
</head>
<body>
@@ -217,11 +311,11 @@
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-title">Pilih Template</div>
<div class="step-title">Pilih Bidang Pengujian</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-title">Parameter</div>
<div class="step-title">Pilih Kategori</div>
</div>
<div class="step">
<div class="step-number">4</div>
@@ -258,50 +352,56 @@
</div>
</div>
<!-- Step 2: Pilih Template -->
<!-- Step 2: Pilih Bidang Pengujian -->
<div class="form-section" id="step2">
<h3>Pilih Template Analisis</h3>
<h3>Pilih Bidang Pengujian</h3>
<div class="template-selection">
<div class="template-card" data-template-id="1">
<h4>Air Limbah Industri</h4>
<p>Template standar untuk analisis air limbah industri</p>
<small>15 Parameter</small>
<div class="template-card" data-type="fisika">
<h4>FISIKA</h4>
<p>Pengujian parameter fisika</p>
<small>Udara Lingkungan Kerja</small>
</div>
<div class="template-card" data-template-id="2">
<h4>Air Minum</h4>
<p>Template untuk analisis kualitas air minum</p>
<small>12 Parameter</small>
<div class="template-card" data-type="kimia">
<h4>KIMIA</h4>
<p>Pengujian parameter kimia</p>
<small>Air Minum & Limbah Domestik</small>
</div>
<div class="template-card" data-template-id="3">
<h4>Udara Ambien</h4>
<p>Template untuk analisis kualitas udara</p>
<small>8 Parameter</small>
<div class="template-card" data-type="biologi">
<h4>BIOLOGI</h4>
<p>Pengujian parameter biologi</p>
<small>Air Minum, Limbah & IPAL</small>
</div>
</div>
</div>
<!-- Step 3: Parameter -->
<!-- Step 3: Pilih Kategori -->
<div class="form-section" id="step3">
<h3>Pilih Parameter Analisis</h3>
<div class="parameter-list">
<!-- Parameters will be loaded dynamically based on selected template -->
<h3>Pilih Kategori Pengujian</h3>
<div class="selected-bidang"></div>
<div class="category-selection">
<!-- Categories will be loaded dynamically -->
</div>
</div>
<!-- Step 4: Konfirmasi -->
<!-- Step 4: Parameter -->
<div class="form-section" id="step4">
<h3>Konfirmasi Permintaan</h3>
<div class="price-summary">
<h4>Ringkasan Biaya</h4>
<p>Jumlah Parameter: <span id="parameterCount">0</span></p>
<p>Subtotal: <span id="subtotal">Rp 0</span></p>
<p>PPN (11%): <span id="tax">Rp 0</span></p>
<p><strong>Total: <span id="total">Rp 0</span></strong></p>
<h3>Pilih Parameter Analisis</h3>
<div class="selected-category"></div>
<div class="parameter-list">
<!-- Parameters will be loaded dynamically -->
</div>
</div>
<div class="alert alert-info">
<p>Setelah permintaan disubmit, tim kami akan memproses dan mengirimkan quotation dalam 1x24 jam kerja.</p>
</div>
<div class="price-summary">
<h4>Ringkasan Biaya</h4>
<p>Jumlah Parameter: <span id="parameterCount">0</span></p>
<p>Subtotal: <span id="subtotal">Rp 0</span></p>
<p>PPN (11%): <span id="tax">Rp 0</span></p>
<p><strong>Total: <span id="total">Rp 0</span></strong></p>
</div>
<div class="alert alert-info">
<p>Setelah permintaan disubmit, tim kami akan memproses dan mengirimkan quotation dalam 1x24 jam kerja.</p>
</div>
<div class="navigation-buttons">
@@ -360,17 +460,194 @@
}
});
// Template selection
let selectedBidang = null;
let selectedCategory = null;
let selectedParameters = new Set();
// Handle bidang selection
document.querySelectorAll('.template-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('.template-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
// Here you would typically load the parameters for the selected template
selectedBidang = card.dataset.type;
loadCategories(selectedBidang);
});
});
function loadCategories(bidangType) {
const bidang = testingParameters[bidangType];
if (!bidang) return;
// Show selected bidang
const selectedBidangDiv = document.querySelector('.selected-bidang');
selectedBidangDiv.textContent = `Bidang Pengujian: ${bidang.name}`;
// Load categories
const categorySelection = document.querySelector('.category-selection');
categorySelection.innerHTML = bidang.categories.map(category => `
<div class="category-card" data-category="${category.name}">
<h4>${category.name}</h4>
<p>${category.parameters.length} Parameter Tersedia</p>
</div>
`).join('');
// Add event listeners to category cards
categorySelection.querySelectorAll('.category-card').forEach(card => {
card.addEventListener('click', () => {
document.querySelectorAll('.category-card').forEach(c => c.classList.remove('selected'));
card.classList.add('selected');
selectedCategory = card.dataset.category;
loadParameters(selectedBidang, selectedCategory);
});
});
}
function loadParameters(bidangType, categoryName) {
const bidang = testingParameters[bidangType];
const category = bidang.categories.find(c => c.name === categoryName);
if (!category) return;
// Show selected category
const selectedCategoryDiv = document.querySelector('.selected-category');
selectedCategoryDiv.textContent = `Kategori: ${category.name}`;
// Load parameters
const parameterList = document.querySelector('.parameter-list');
parameterList.innerHTML = category.parameters.map(param => `
<div class="parameter-item">
<input type="checkbox" id="${param.id}" name="parameters[]" value="${param.id}"
${selectedParameters.has(param.id) ? 'checked' : ''}>
<div class="parameter-info">
<span class="parameter-name">${param.name}</span>
<span class="parameter-method">${param.method}</span>
</div>
<span class="parameter-price">Rp ${param.price.toLocaleString()}</span>
</div>
`).join('');
// Add event listeners to checkboxes
parameterList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
selectedParameters.add(checkbox.value);
} else {
selectedParameters.delete(checkbox.value);
}
updatePriceSummary();
});
});
}
function updatePriceSummary() {
let subtotal = 0;
selectedParameters.forEach(paramId => {
const bidang = testingParameters[selectedBidang];
const category = bidang.categories.find(c => c.name === selectedCategory);
const parameter = category.parameters.find(p => p.id === paramId);
if (parameter) {
subtotal += parameter.price;
}
});
const tax = subtotal * 0.11;
const total = subtotal + tax;
document.getElementById('parameterCount').textContent = selectedParameters.size;
document.getElementById('subtotal').textContent = `Rp ${subtotal.toLocaleString()}`;
document.getElementById('tax').textContent = `Rp ${tax.toLocaleString()}`;
document.getElementById('total').textContent = `Rp ${total.toLocaleString()}`;
}
// Initialize form
showStep(1);
const testingParameters = {
// FISIKA
fisika: {
name: "FISIKA",
categories: [
{
name: "Udara Lingkungan Kerja",
parameters: [
{ id: 'debu_total', name: 'Debu Total', method: 'SNI 16-7058-2004', price: 150000 },
{ id: 'intensitas_pencahayaan', name: 'Intensitas Pencahayaan', method: 'SNI 7062:2019', price: 100000 },
{ id: 'tekanan', name: 'Tekanan', method: 'Direct Reading', price: 100000 },
{ id: 'iklim_kerja_suhu', name: 'Iklim Kerja (suhu)', method: 'Direct Reading', price: 100000 },
{ id: 'iklim_kerja_kelembaban', name: 'Iklim Kerja (kelembaban)', method: 'Direct Reading', price: 100000 },
{ id: 'intensitas_kebisingan', name: 'Intensitas Kebisingan', method: 'SNI 7231:2019', price: 150000 },
{ id: 'kebisingan_personal', name: 'Kebisingan Personal', method: 'SNI/APHA', price: 150000 }
]
}
]
},
// KIMIA
kimia: {
name: "KIMIA",
categories: [
{
name: "Air Minum, Hygiene, Sanitasi",
parameters: [
{ id: 'suhu', name: 'Suhu', method: 'SNI/APHA', price: 50000 },
{ id: 'tds', name: 'TDS', method: 'SNI/APHA', price: 75000 },
{ id: 'kekeruhan', name: 'Kekeruhan', method: 'SNI/APHA', price: 75000 },
{ id: 'warna', name: 'Warna', method: 'SNI/APHA', price: 75000 },
{ id: 'bau', name: 'Bau', method: 'SNI/APHA', price: 50000 },
{ id: 'ph', name: 'pH', method: 'SNI/APHA', price: 75000 },
{ id: 'nitrat', name: 'Nitrat (NO3 terlarut)', method: 'SNI/APHA', price: 150000 },
{ id: 'nitrit', name: 'Nitrit (NO2 terlarut)', method: 'SNI/APHA', price: 150000 },
{ id: 'kromium', name: 'Kromium Valensi 6 (CR6+ terlarut)', method: 'SNI/APHA', price: 200000 },
{ id: 'besi', name: 'Besi (Fe Terlarut)', method: 'SNI/APHA', price: 150000 },
{ id: 'mangan', name: 'Mangan (Mn Terlarut)', method: 'SNI/APHA', price: 150000 },
{ id: 'sisa_klor', name: 'Sisa Klor (terlarut)', method: 'SNI/APHA', price: 150000 },
{ id: 'arsen', name: 'Arsen (AS terlarut)', method: 'SNI/APHA', price: 200000 },
{ id: 'kadmium', name: 'Kadmium (Cd) terlarut', method: 'SNI/APHA', price: 200000 },
{ id: 'timbal', name: 'Timbal (Pb terlarut)', method: 'SNI/APHA', price: 200000 },
{ id: 'fluoride', name: 'Fluoride (F) Terlarut', method: 'SNI/APHA', price: 200000 },
{ id: 'aluminium', name: 'Aluminium (Al) Terlarut', method: 'SNI/APHA', price: 200000 }
]
},
{
name: "Limbah Domestik",
parameters: [
{ id: 'ph_limbah', name: 'pH', method: 'SNI-6989.11-2019', price: 75000 },
{ id: 'bod', name: 'BOD', method: 'APHA 5210 B-2017', price: 200000 },
{ id: 'cod', name: 'COD', method: 'APHA 522 0.C-2017', price: 200000 },
{ id: 'tss', name: 'TSS', method: 'SNI 06-6989.3-2004', price: 150000 },
{ id: 'minyak_lemak', name: 'Minyak & Lemak', method: 'SNI-6989.10-2011', price: 200000 },
{ id: 'amoniak', name: 'Amoniak', method: 'SNI 06-6989.30-2005', price: 150000 },
{ id: 'debit', name: 'Debit', method: 'SNI', price: 100000 }
]
}
]
},
// BIOLOGI
biologi: {
name: "BIOLOGI",
categories: [
{
name: "Air Minum, Hygiene, Sanitasi",
parameters: [
{ id: 'ecoli', name: 'E. Coli', method: 'SNI/APHA', price: 200000 },
{ id: 'total_coliform', name: 'Total Coliform', method: 'SNI/APHA', price: 200000 }
]
},
{
name: "Limbah Domestik",
parameters: [
{ id: 'total_coliform_limbah', name: 'Total Coliform', method: 'SNI', price: 200000 }
]
},
{
name: "IPAL OUTLET",
parameters: [
{ id: 'total_coliform_ipal', name: 'Total Coliform', method: 'APHA 23 TAHUN 2017', price: 200000 }
]
}
]
}
};
</script>
</body>
</html>