Remember last used stations

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;
+}

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";
 	});
 }