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> <script type="module" src="traveldrafter.js"></script>
</head> </head>
<body> <body>
<div id="journey-search-from">Select…</div> <div id="journeys-search-button">Search journeys</div>
<div id="journey-search-to">Select…</div> <div id="journeys-search" class="popup">
<div id="journey-search-submit">Search</div> <div class="popup-close">&times;</div>
<div id="journey-search-result"></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 id="locations-search" class="popup">
<div class="popup-close">&times;</div> <div class="popup-close">&times;</div>

11
web/journeys-search.js
View File

@@ -1,6 +1,7 @@
import { fetchJourneys } from './api.js'; import { fetchJourneys } from './api.js';
import { attachLocationsSearch } from './locations-search.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_from = document.querySelector("#journey-search-from");
let element_to = document.querySelector("#journey-search-to"); let element_to = document.querySelector("#journey-search-to");
let element_submit = document.querySelector("#journey-search-submit"); 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; el.innerText = leg?.line?.name + ": " + leg.origin.name + " > " + leg.destination.name;
return el; 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) { export function attachLocationsSearch(search_element) {
search_element.addEventListener("click", event => { search_element.addEventListener("click", event => {
element_locations_search.locationSelectedCallback = (location_name, location_id) => { element_locations_search.locationSelectedCallback = (location_name, location_id) => {
search_element.innerText = location_name; search_element.value = location_name;
search_element.dataset.locationId = location_id; search_element.dataset.locationId = location_id;
}; };
element_query.value = ""; element_query.value = "";

8
web/style.css
View File

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

4
web/traveldrafter.js
View File

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