Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>District-Assembly Relationship Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
<h1 class="text-2xl font-bold text-gray-900 mb-6 text-center">
<i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>District-Assembly Test
</h1>
<div class="space-y-4">
<!-- District -->
<div>
<label for="district_id" class="block text-sm font-medium text-gray-700 mb-2">
District <span class="text-red-500">*</span>
</label>
<select id="district_id" name="district_id" required onchange="loadAssemblies()"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="">Select a District</option>
<option value="1">District 1</option>
<option value="2">District 2</option>
<option value="3">District 3</option>
</select>
</div>
<!-- Assembly -->
<div>
<label for="assembly_id" class="block text-sm font-medium text-gray-700 mb-2">
Assembly <span class="text-red-500">*</span>
</label>
<select id="assembly_id" name="assembly_id" required disabled
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed">
<option value="">First select a district</option>
<!-- District 1 assemblies -->
<option value="101" data-district="1">Assembly A (District 1)</option>
<option value="102" data-district="1">Assembly B (District 1)</option>
<option value="103" data-district="1">Assembly C (District 1)</option>
<!-- District 2 assemblies -->
<option value="201" data-district="2">Assembly X (District 2)</option>
<option value="202" data-district="2">Assembly Y (District 2)</option>
<!-- District 3 assemblies -->
<option value="301" data-district="3">Assembly Z (District 3)</option>
</select>
</div>
<!-- Status Display -->
<div id="status" class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h3 class="font-semibold text-blue-900 mb-2">Status:</h3>
<p id="statusText" class="text-sm text-blue-800">Select a district to see available assemblies</p>
</div>
<!-- Test Button -->
<div class="text-center pt-4">
<button onclick="testSelection()"
class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
<i class="fas fa-check mr-2"></i>Test Selection
</button>
</div>
</div>
</div>
<script>
// Handle district/assembly relationship
function loadAssemblies() {
const districtId = document.getElementById('district_id').value;
const assemblySelect = document.getElementById('assembly_id');
const allOptions = assemblySelect.querySelectorAll('option[data-district]');
const statusText = document.getElementById('statusText');
// Reset assembly selection
assemblySelect.value = '';
// Show/hide assembly options based on selected district
allOptions.forEach(option => {
if (districtId === '' || option.dataset.district === districtId) {
option.style.display = 'block';
} else {
option.style.display = 'none';
}
});
// If only one assembly available for the district, auto-select it
const visibleOptions = Array.from(allOptions).filter(option =>
option.style.display !== 'none' && option.value !== ''
);
if (visibleOptions.length === 1) {
assemblySelect.value = visibleOptions[0].value;
statusText.textContent = `Auto-selected: ${visibleOptions[0].textContent}`;
} else if (visibleOptions.length > 1) {
statusText.textContent = `${visibleOptions.length} assemblies available for District ${districtId}`;
}
// Update assembly dropdown placeholder and state
const placeholder = assemblySelect.querySelector('option[value=""]');
if (districtId === '') {
placeholder.textContent = 'First select a district';
assemblySelect.disabled = true;
assemblySelect.classList.add('bg-gray-100', 'cursor-not-allowed');
statusText.textContent = 'Select a district to see available assemblies';
} else if (visibleOptions.length === 0) {
placeholder.textContent = 'No assemblies available for this district';
assemblySelect.disabled = true;
assemblySelect.classList.add('bg-gray-100', 'cursor-not-allowed');
statusText.textContent = `No assemblies found for District ${districtId}`;
} else {
placeholder.textContent = 'Select an Assembly';
assemblySelect.disabled = false;
assemblySelect.classList.remove('bg-gray-100', 'cursor-not-allowed');
}
}
function testSelection() {
const districtId = document.getElementById('district_id').value;
const assemblyId = document.getElementById('assembly_id').value;
const statusText = document.getElementById('statusText');
if (!districtId) {
alert('Please select a district first!');
return;
}
if (!assemblyId) {
alert('Please select an assembly!');
return;
}
const districtText = document.getElementById('district_id').selectedOptions[0].textContent;
const assemblyText = document.getElementById('assembly_id').selectedOptions[0].textContent;
statusText.innerHTML = `
<strong>Selection Complete!</strong><br>
District: ${districtText} (ID: ${districtId})<br>
Assembly: ${assemblyText} (ID: ${assemblyId})
`;
alert(`Success!\nDistrict: ${districtText}\nAssembly: ${assemblyText}`);
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
loadAssemblies();
});
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists