Skip to content

Commit ece950c

Browse files
jameson-devjameson-dev
committed
Refactor code for consistency
1 parent 309fc60 commit ece950c

12 files changed

Lines changed: 184 additions & 394 deletions

‎index.html‎

Lines changed: 12 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -178,35 +178,35 @@ <h2>Welcome to SA Crash Data Map</h2>
178178
<div class="filter-group">
179179
<label class="filter-label">Crash Severity</label>
180180
<div class="checkbox-dropdown" id="severityDropdown">
181-
<div class="checkbox-dropdown-trigger" onclick="toggleCheckboxDropdown('severity')">
181+
<div class="checkbox-dropdown-trigger">
182182
<span id="severityDisplay">All Severities</span>
183183
<span class="dropdown-arrow">▼</span>
184184
</div>
185185
<div class="checkbox-dropdown-menu" id="severityMenu">
186186
<div class="dropdown-search-wrap">
187-
<input type="text" class="dropdown-search" placeholder="Search..." oninput="filterDropdownItems('severity', this.value)">
187+
<input type="text" class="dropdown-search" placeholder="Search...">
188188
</div>
189189
<div class="dropdown-items-list" id="severityItemsList">
190190
<div class="checkbox-dropdown-item">
191-
<input type="checkbox" id="severity-pdo" value="1: PDO" checked onchange="updateCheckboxDropdownDisplay('severity')">
191+
<input type="checkbox" id="severity-pdo" value="1: PDO" checked>
192192
<label for="severity-pdo">PDO (Property Damage Only)</label>
193193
</div>
194194
<div class="checkbox-dropdown-item">
195-
<input type="checkbox" id="severity-mi" value="2: MI" checked onchange="updateCheckboxDropdownDisplay('severity')">
195+
<input type="checkbox" id="severity-mi" value="2: MI" checked>
196196
<label for="severity-mi">Minor Injury</label>
197197
</div>
198198
<div class="checkbox-dropdown-item">
199-
<input type="checkbox" id="severity-si" value="3: SI" checked onchange="updateCheckboxDropdownDisplay('severity')">
199+
<input type="checkbox" id="severity-si" value="3: SI" checked>
200200
<label for="severity-si">Serious Injury</label>
201201
</div>
202202
<div class="checkbox-dropdown-item">
203-
<input type="checkbox" id="severity-fatal" value="4: Fatal" checked onchange="updateCheckboxDropdownDisplay('severity')">
203+
<input type="checkbox" id="severity-fatal" value="4: Fatal" checked>
204204
<label for="severity-fatal">Fatal</label>
205205
</div>
206206
</div>
207207
<div class="checkbox-dropdown-controls">
208-
<button class="checkbox-select-all" onclick="selectAllDropdownItems('severity')">Select All</button>
209-
<button class="checkbox-clear-all" onclick="clearAllDropdownItems('severity')">Clear All</button>
208+
<button class="checkbox-select-all">Select All</button>
209+
<button class="checkbox-clear-all">Clear All</button>
210210
</div>
211211
</div>
212212
</div>
@@ -215,7 +215,7 @@ <h2>Welcome to SA Crash Data Map</h2>
215215
<div class="filter-group">
216216
<label class="filter-label">Crash Type</label>
217217
<div class="checkbox-dropdown" id="crashTypeDropdown">
218-
<div class="checkbox-dropdown-trigger" onclick="toggleCheckboxDropdown('crashType')">
218+
<div class="checkbox-dropdown-trigger">
219219
<span id="crashTypeDisplay">All Types</span>
220220
<span class="dropdown-arrow">▼</span>
221221
</div>
@@ -228,7 +228,7 @@ <h2>Welcome to SA Crash Data Map</h2>
228228
<div class="filter-group">
229229
<label class="filter-label">Area</label>
230230
<div class="checkbox-dropdown" id="areaDropdown">
231-
<div class="checkbox-dropdown-trigger" onclick="toggleCheckboxDropdown('area')">
231+
<div class="checkbox-dropdown-trigger">
232232
<span id="areaDisplay">All Areas</span>
233233
<span class="dropdown-arrow">▼</span>
234234
</div>
@@ -241,7 +241,7 @@ <h2>Welcome to SA Crash Data Map</h2>
241241
<div class="filter-group">
242242
<label class="filter-label">Suburb</label>
243243
<div class="checkbox-dropdown" id="suburbDropdown">
244-
<div class="checkbox-dropdown-trigger" onclick="toggleCheckboxDropdown('suburb')">
244+
<div class="checkbox-dropdown-trigger">
245245
<span id="suburbDisplay">All Suburbs</span>
246246
<span class="dropdown-arrow">▼</span>
247247
</div>
@@ -383,7 +383,7 @@ <h2>Advanced Filters</h2>
383383
<label class="filter-label">Day/Night</label>
384384
<select id="dayNight" onchange="markFiltersChanged()">
385385
<option value="all" selected>All</option>
386-
<option value="Day">Day</option>
386+
<option value="Daylight">Daylight</option>
387387
<option value="Night">Night</option>
388388
</select>
389389
</div>
@@ -1379,147 +1379,6 @@ <h3 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">Generating PDF Rep
13791379
});
13801380
}
13811381

1382-
// Checkbox dropdown functions
1383-
function toggleCheckboxDropdown(dropdownId) {
1384-
const menu = document.getElementById(`${dropdownId}Menu`);
1385-
const trigger = menu.previousElementSibling;
1386-
const arrow = trigger.querySelector('.dropdown-arrow');
1387-
1388-
// Close all other dropdowns and clear their searches
1389-
document.querySelectorAll('.checkbox-dropdown-menu').forEach(m => {
1390-
if (m !== menu && m.classList.contains('show')) {
1391-
m.classList.remove('show');
1392-
const otherArrow = m.previousElementSibling.querySelector('.dropdown-arrow');
1393-
if (otherArrow) otherArrow.style.transform = 'rotate(0deg)';
1394-
// Clear search in the closed dropdown
1395-
const otherSearch = m.querySelector('.dropdown-search');
1396-
if (otherSearch && otherSearch.value) {
1397-
otherSearch.value = '';
1398-
m.querySelectorAll('.checkbox-dropdown-item').forEach(item => item.style.display = '');
1399-
}
1400-
}
1401-
});
1402-
1403-
// Toggle current dropdown
1404-
if (menu.classList.contains('show')) {
1405-
menu.classList.remove('show');
1406-
arrow.style.transform = 'rotate(0deg)';
1407-
// Clear search when closing
1408-
const search = menu.querySelector('.dropdown-search');
1409-
if (search && search.value) {
1410-
search.value = '';
1411-
menu.querySelectorAll('.checkbox-dropdown-item').forEach(item => item.style.display = '');
1412-
}
1413-
} else {
1414-
menu.classList.add('show');
1415-
arrow.style.transform = 'rotate(180deg)';
1416-
// Focus search input when opening
1417-
const search = menu.querySelector('.dropdown-search');
1418-
if (search) setTimeout(() => search.focus(), 50);
1419-
}
1420-
}
1421-
1422-
function filterDropdownItems(dropdownId, query) {
1423-
const menu = document.getElementById(`${dropdownId}Menu`);
1424-
if (!menu) return;
1425-
const q = query.trim().toLowerCase();
1426-
menu.querySelectorAll('.checkbox-dropdown-item').forEach(function(item) {
1427-
const label = item.querySelector('label');
1428-
const text = label ? label.textContent.toLowerCase() : '';
1429-
item.style.display = (q === '' || text.includes(q)) ? '' : 'none';
1430-
});
1431-
}
1432-
1433-
function updateCheckboxDropdownDisplay(dropdownId) {
1434-
const menu = document.getElementById(`${dropdownId}Menu`);
1435-
const display = document.getElementById(`${dropdownId}Display`);
1436-
1437-
// Add null checks to prevent errors
1438-
if (!menu || !display) {
1439-
return;
1440-
}
1441-
1442-
const checkboxes = menu.querySelectorAll('input[type="checkbox"]:checked');
1443-
1444-
if (checkboxes.length === 0 || checkboxes.length === menu.querySelectorAll('input[type="checkbox"]').length) {
1445-
if (dropdownId === 'crashType') {
1446-
display.textContent = 'All Types';
1447-
} else if (dropdownId === 'area') {
1448-
display.textContent = 'All Areas';
1449-
} else if (dropdownId === 'severity') {
1450-
display.textContent = 'All Severities';
1451-
}
1452-
} else if (checkboxes.length === 1) {
1453-
display.textContent = checkboxes[0].nextElementSibling.textContent;
1454-
} else {
1455-
display.textContent = `${checkboxes.length} selected`;
1456-
}
1457-
1458-
// Mark filters as changed
1459-
if (typeof markFiltersChanged === 'function') {
1460-
markFiltersChanged();
1461-
}
1462-
}
1463-
1464-
function selectAllDropdownItems(dropdownId) {
1465-
const menu = document.getElementById(`${dropdownId}Menu`);
1466-
const checkboxes = menu.querySelectorAll('input[type="checkbox"]');
1467-
checkboxes.forEach(cb => {
1468-
cb.checked = true;
1469-
});
1470-
updateCheckboxDropdownDisplay(dropdownId);
1471-
}
1472-
1473-
function clearAllDropdownItems(dropdownId) {
1474-
const menu = document.getElementById(`${dropdownId}Menu`);
1475-
const checkboxes = menu.querySelectorAll('input[type="checkbox"]');
1476-
checkboxes.forEach(cb => {
1477-
cb.checked = false;
1478-
});
1479-
updateCheckboxDropdownDisplay(dropdownId);
1480-
}
1481-
1482-
// Close dropdowns on Escape key
1483-
document.addEventListener('keydown', function(event) {
1484-
if (event.key !== 'Escape') return;
1485-
document.querySelectorAll('.checkbox-dropdown-menu').forEach(menu => {
1486-
if (menu.classList.contains('show')) {
1487-
menu.classList.remove('show');
1488-
const arrow = menu.previousElementSibling.querySelector('.dropdown-arrow');
1489-
if (arrow) arrow.style.transform = 'rotate(0deg)';
1490-
const search = menu.querySelector('.dropdown-search');
1491-
if (search && search.value) {
1492-
search.value = '';
1493-
menu.querySelectorAll('.checkbox-dropdown-item').forEach(item => item.style.display = '');
1494-
}
1495-
}
1496-
});
1497-
});
1498-
1499-
// Close dropdowns when clicking outside
1500-
document.addEventListener('click', function(event) {
1501-
if (!event.target.closest('.checkbox-dropdown')) {
1502-
document.querySelectorAll('.checkbox-dropdown-menu').forEach(menu => {
1503-
if (menu.classList.contains('show')) {
1504-
menu.classList.remove('show');
1505-
const arrow = menu.previousElementSibling.querySelector('.dropdown-arrow');
1506-
if (arrow) arrow.style.transform = 'rotate(0deg)';
1507-
// Clear search on close
1508-
const search = menu.querySelector('.dropdown-search');
1509-
if (search && search.value) {
1510-
search.value = '';
1511-
menu.querySelectorAll('.checkbox-dropdown-item').forEach(item => item.style.display = '');
1512-
}
1513-
}
1514-
});
1515-
}
1516-
});
1517-
1518-
// Placeholder for updateResultCount (can be implemented in filters.js if needed)
1519-
function updateResultCount() {
1520-
// This can be implemented when crash data is loaded
1521-
}
1522-
15231382
// Analytics panel toggle - opens fullscreen
15241383
function toggleAnalyticsPanel() {
15251384
const panel = document.getElementById('analyticsPanel');
@@ -2607,7 +2466,6 @@ <h3 style="margin: 0 0 20px 0; color: #333; font-size: 20px;">Generating PDF Rep
26072466

26082467
// Make functions available globally for inline scripts
26092468
window.updateChartsWithData = updateChartsWithData;
2610-
window.updateResultCount = updateResultCount;
26112469
</script>
26122470

26132471
<!-- PDF Generator Module -->

0 commit comments

Comments
 (0)