clerie/traveldrafter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move journeys search menu to popup

Browse Source
This commit is contained in:
clerie
2025-06-18 16:57:38 +02:00
parent 0715083935
commit f507299c15
5 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/index.html
View File

@@ -8,10 +8,18 @@
<script type="module" src="traveldrafter.js"></script>
</head>
<body>
<div id="journey-search-from">Select…</div>
<div id="journey-search-to">Select…</div>
<div id="journey-search-submit">Search</div>
<div id="journey-search-result"></div>
<div id="journeys-search-button">Search journeys</div>
<div id="journeys-search" class="popup">
<div class="popup-close">&times;</div>
<div id="journeys-search-content" class="popup-content">
<div class="container">
<input id="journey-search-from" class="form-control" type="text" placeholder="From" readonly/>
<input id="journey-search-to" class="form-control" type="text" placeholder="To" readonly/>
<div id="journey-search-submit">Search</div>
<div id="journey-search-result"></div>
</div>
</div>
</div>
<div id="locations-search" class="popup">
<div class="popup-close">&times;</div>

11
web/journeys-search.js
View File

@@ -1,6 +1,7 @@
import { fetchJourneys } from './api.js';
import { attachLocationsSearch } from './locations-search.js';
let element_journeys_search = document.querySelector("#journeys-search");
let element_from = document.querySelector("#journey-search-from");
let element_to = document.querySelector("#journey-search-to");
let element_submit = document.querySelector("#journey-search-submit");
@@ -37,3 +38,13 @@ function createJourneyLegElement(leg) {
el.innerText = leg?.line?.name + ": " + leg.origin.name + " > " + leg.destination.name;
return el;
}
export function attachJourneysSearch(search_element) {
search_element.addEventListener("click", event => {
element_from.value = "";
element_to.value = "";
element_result.innerText = "";
element_journeys_search.style.display = "block";
});
}

2
web/locations-search.js
View File

@@ -36,7 +36,7 @@ function createLocationElement(location) {
export function attachLocationsSearch(search_element) {
search_element.addEventListener("click", event => {
element_locations_search.locationSelectedCallback = (location_name, location_id) => {
search_element.innerText = location_name;
search_element.value = location_name;
search_element.dataset.locationId = location_id;
};
element_query.value = "";

8
web/style.css
View File

@@ -25,6 +25,14 @@
display: none;
}
#journeys-search {
z-index: 8000;
}
#locations-search {
z-index: 9000;
}
.popup .popup-close {
margin: 60px;
margin-left: auto;

4
web/traveldrafter.js
View File

@@ -1,10 +1,12 @@
import * as Api from './api.js';
import { setupPopups } from "./popup.js";
import { setupLocationsSearch } from './locations-search.js';
import { setupJourneysSearch } from './journeys-search.js';
import { setupJourneysSearch, attachJourneysSearch } from './journeys-search.js';
window.Api = Api;
setupPopups();
setupLocationsSearch();
setupJourneysSearch();
attachJourneysSearch(document.querySelector("#journeys-search-button"));