Better display with accordions
This commit is contained in:
parent
c2b7664375
commit
4f326626bf
@ -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')
|
||||
|
Loading…
Reference in New Issue
Block a user