From 4f326626bff46186d18605cad2d26d7b7e9c6195 Mon Sep 17 00:00:00 2001 From: Emmy D'Anello Date: Mon, 13 Feb 2023 13:02:34 +0100 Subject: [PATCH] Better display with accordions --- templates/index.html | 49 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/templates/index.html b/templates/index.html index 0f01a6d..32a53af 100644 --- a/templates/index.html +++ b/templates/index.html @@ -82,18 +82,55 @@ .then(resp => resp.json()) .then(routes => { result_elem.innerHTML = '' - let city_elem = document.createElement('ul') - result_elem.appendChild(city_elem) + + let cities_number = Object.keys(routes).length + + let accordion = document.createElement('div') + accordion.classList.add('accordion') + accordion.setAttribute('id', 'result-accordion') + result_elem.appendChild(accordion) for (let city in routes) { let city_routes = routes[city] - let city_name_elem = document.createElement('li') - city_name_elem.textContent = city + " :" - city_elem.appendChild(city_name_elem) + let city_id = city.replaceAll(' ', '_') + + let city_elem = document.createElement('div') + city_elem.classList.add('accordion-item') + accordion.appendChild(city_elem) + + let city_header = document.createElement('h2') + city_header.classList.add('accordion-header') + city_header.setAttribute('id', 'collapse-header-' + city_id) + city_elem.appendChild(city_header) + + let city_name_button = document.createElement('button') + city_name_button.classList.add('accordion-button') + if (cities_number > 1) + city_name_button.classList.add('collapsed') + city_name_button.setAttribute('type', 'button') + city_name_button.setAttribute('data-bs-toggle', 'collapse') + city_name_button.setAttribute('data-bs-target', '#collapse-' + city_id) + city_name_button.setAttribute('aria-expanded', cities_number > 1 ? 'false' : 'true') + city_name_button.setAttribute('aria-controls', 'collapse-' + city_id) + city_name_button.textContent = city + city_header.appendChild(city_name_button) + + let collapse = document.createElement('div') + collapse.setAttribute('id', 'collapse-' + city_id) + collapse.classList.add('accordion-collapse') + if (cities_number > 1) + collapse.classList.add('collapse') + collapse.setAttribute('aria-labelled-by', 'collapse-header-' + city_id) + collapse.setAttribute('data-bs-parent', '#result-accordion') + city_elem.appendChild(collapse) + + let collapse_body = document.createElement('div') + collapse_body.classList.add('accordion-body') + collapse.appendChild(collapse_body) let routes_elem = document.createElement('ul') - city_elem.appendChild(routes_elem) + collapse_body.appendChild(routes_elem) for (let route of city_routes) { let route_elem = document.createElement('li')