diff --git a/web/datastore.js b/web/datastore.js new file mode 100644 index 0000000..97cab74 --- /dev/null +++ b/web/datastore.js @@ -0,0 +1,50 @@ +export class LocationsDataStore { + static rememberAll(location_list) { + let locations = LocationsDataStore.get(); + for (let location of location_list) { + locations[location.id] = location; + } + LocationsDataStore.set(locations); + } + + static get() { + return DataStore.get("locations") || {}; + } + + static set(value) { + DataStore.set("locations", value); + } +} + + +export class RecentLocationsDataStore { + static remember(location_id) { + let recent_locations = RecentLocationsDataStore.get(); + recent_locations = recent_locations.filter((item) => { + return item != location_id; + }); + recent_locations.push(location_id); + RecentLocationsDataStore.set(recent_locations); + } + + static get() { + return DataStore.get("recent-locations") || []; + } + + static set(value) { + DataStore.set("recent-locations", value); + } +} + +export class DataStore { + static get(key) { + return JSON.parse(window.localStorage.getItem(key)); + } + + static set(key, value) { + window.localStorage.setItem(key, JSON.stringify(value)); + } + + static locations = LocationsDataStore; + static recent_locations = RecentLocationsDataStore; +} diff --git a/web/locations-search.js b/web/locations-search.js index 50e67a8..e2711e8 100644 --- a/web/locations-search.js +++ b/web/locations-search.js @@ -1,4 +1,5 @@ import { fetchLocations } from './api.js'; +import { DataStore } from './datastore.js'; let element_locations_search = document.querySelector("#locations-search"); let element_query = document.querySelector("#locations-search-query"); @@ -8,29 +9,44 @@ export function setupLocationsSearch() { element_query.addEventListener("change", (event) => { element_response.innerText = "Loading…"; fetchLocations(event.target.value).then(result => { + DataStore.locations.rememberAll(result); element_response.innerText = ""; - result.forEach(lr => { - let location_element = document.createElement("div"); - location_element.innerText = lr.name; - location_element.dataset.locationId = lr.id; - - location_element.addEventListener("click", event => { - console.log(event.target.dataset.locationId); - element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId); - element_locations_search.style.display = "none"; - }); + result.forEach(location => { + let location_element = createLocationElement(location); element_response.appendChild(location_element); }); }); }); } +function createLocationElement(location) { + let location_element = document.createElement("div"); + location_element.innerText = location.name; + location_element.dataset.locationId = location.id; + + location_element.addEventListener("click", event => { + DataStore.recent_locations.remember(event.target.dataset.locationId); + element_locations_search.locationSelectedCallback(event.target.innerText, event.target.dataset.locationId); + element_locations_search.style.display = "none"; + }); + + return location_element; +} + 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.dataset.locationId = location_id; }; + element_query.value = ""; + element_response.innerText = ""; + let locations = DataStore.locations.get(); + for (let location_id of DataStore.recent_locations.get()) { + let location = locations[location_id]; + let el = createLocationElement(location); + element_response.appendChild(el); + } element_locations_search.style.display = "block"; }); }