Change datastore to not need to deserialize LocalStorage for every read

web/datastore.js

@@ -1,89 +1,109 @@
 export class LocationsDataStore {
-	static rememberAll(location_list) {
+	constructor() {
-		let locations = LocationsDataStore.get();
+		this.data = {};
-		for (let location of location_list) {
+		this.read();
-			locations[location.id] = location;
-		}
-		LocationsDataStore.set(locations);
 	}
 
-	static rememberAllIfNotExist(location_list) {
+	read() {
-		let locations = LocationsDataStore.get();
+		this.data = DataStore.get("locations") || {};
+	}
+
+	write() {
+		DataStore.set("locations", this.data);
+	}
+
+	rememberAll(location_list) {
 		for (let location of location_list) {
-			if (!(location.id in locations)) {
+			this.data[location.id] = location;
-				locations[location.id] = location;
+		}
+
+		this.write();
+	}
+
+	rememberAllIfNotExist(location_list) {
+		for (let location of location_list) {
+			if (!(location.id in this.data)) {
+				this.data[location.id] = location;
 			}
 		}
-		LocationsDataStore.set(locations);
-	}
 
-	static get() {
+		this.write();
-		return DataStore.get("locations") || {};
-	}
-
-	static set(value) {
-		DataStore.set("locations", value);
 	}
 }
 
 export class RecentLocationsDataStore {
-	static remember(location_id) {
+	constructor() {
-		let recent_locations = RecentLocationsDataStore.get();
+		this.data = [];
-		recent_locations = recent_locations.filter((item) => {
+		this.read();
+	}
+
+	read() {
+		this.data = DataStore.get("recent-locations") || [];
+	}
+
+	write() {
+		DataStore.set("recent-locations", this.data);
+	}
+
+	remember(location_id) {
+		this.data = this.data.filter((item) => {
 			return item != location_id;
 		});
-		recent_locations.push(location_id);
+		this.data.push(location_id);
-		RecentLocationsDataStore.set(recent_locations);
-	}
 
-	static get() {
+		this.write();
-		return DataStore.get("recent-locations") || [];
-	}
-
-	static set(value) {
-		DataStore.set("recent-locations", value);
 	}
 }
 
 export class TrackedTripsDataStore {
-	static remember(trip_id, origin_id, destination_id) {
+	constructor() {
-		let tracked_trips = TrackedTripsDataStore.get();
+		this.data = [];
-		tracked_trips.push({
+		this.read();
+	}
+
+	read() {
+		this.data = DataStore.get("tracked-trips") || [];
+	}
+
+	write() {
+		DataStore.set("tracked-trips", this.data);
+	}
+
+	remember(trip_id, origin_id, destination_id) {
+		this.data.push({
 			trip: trip_id,
 			origin: origin_id,
 			destination: destination_id,
 		});
-		TrackedTripsDataStore.set(tracked_trips);
-	}
 
-	static get() {
+		this.write();
-		return DataStore.get("tracked-trips") || [];
-	}
-
-	static set(value) {
-		DataStore.set("tracked-trips", value);
 	}
 }
 
 export class TripsDataStore {
-	static remember(trip) {
+	constructor() {
-		TripsDataStore.rememberAll([trip]);
+		this.data = {};
+		this.read();
 	}
 
-	static rememberAll(trip_list) {
+	read() {
-		let tracked_trips = TripsDataStore.get();
+		this.data = DataStore.get("trips") || {};
+	}
+
+	write() {
+		DataStore.set("trips", this.data);
+	}
+
+	remember(trip) {
+		this.rememberAll([trip]);
+	}
+
+	rememberAll(trip_list) {
 		for (let trip of trip_list) {
-			tracked_trips[trip.id] = trip;
+			this.data[trip.id] = trip;
 		}
-		TripsDataStore.set(tracked_trips);
-	}
 
-	static get() {
+		this.write();
-		return DataStore.get("trips") || {};
-	}
-
-	static set(value) {
-		DataStore.set("trips", value);
 	}
 }
 
@@ -96,8 +116,10 @@ export class DataStore {
 		window.localStorage.setItem(key, JSON.stringify(value));
 	}
 
-	static locations = LocationsDataStore;
+	constructor() {
-	static recent_locations = RecentLocationsDataStore;
+		this.locations = new LocationsDataStore();
-	static tracked_trips = TrackedTripsDataStore;
+		this.recent_locations = new RecentLocationsDataStore();
-	static trips = TripsDataStore;
+		this.tracked_trips = new TrackedTripsDataStore();
+		this.trips = new TripsDataStore();
+	}
 }

web/drafting-board.js

@@ -1,15 +1,14 @@
 import { EL } from "./dom.js";
 import { displayTripDetails } from "./trip-details.js";
 import { fetchTrip } from './api.js';
-import { DataStore } from './datastore.js';
 
 let element_board = document.querySelector("#drafting-board-content");
 
 export function addJourneyToDraftingBoard(journey) {
 	for (let leg of journey.legs.filter(item => !("walking" in item))) {
-		DataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id);
+		window.dataStore.tracked_trips.remember(leg.tripId, leg.origin.id, leg.destination.id);
 		fetchTrip(leg.tripId).then(result => {
-			DataStore.trips.remember(result.trip);
+			window.dataStore.trips.remember(result.trip);
 		});
 	}
 
@@ -20,7 +19,7 @@ export function drawDraftingBoard() {
 	element_board.innerText = "";
 
 	let sorted_locations = trackedTripsLocationsSorted();
-	let display_locations = sorted_locations.map(item => DataStore.locations.get()[item]);
+	let display_locations = sorted_locations.map(item => window.dataStore.locations.data[item]);
 
 	let grid_location_indexes = {};
 
@@ -39,7 +38,7 @@ export function drawDraftingBoard() {
 
 	}
 
-	let trip_data = DataStore.trips.get();
+	let trip_data = window.dataStore.trips.data;
 	console.log(trip_data);
 
 	function getStopFromTrip(tripId, location_id) {
@@ -54,7 +53,7 @@ export function drawDraftingBoard() {
 
 	}
 
-	let display_trips = DataStore.tracked_trips.get().map(item => {
+	let display_trips = window.dataStore.tracked_trips.data.map(item => {
 		item["trip_data"] = trip_data[item.trip];
 
 		item.originStop = getStopFromTrip(item.trip, item.origin);
@@ -187,7 +186,7 @@ export function sortLocations(sorted_locations, unsorted_locations, trips) {
 }
 
 export function trackedTripsLocationsSorted() {
-	let tracked_trips = DataStore.tracked_trips.get();
+	let tracked_trips = window.dataStore.tracked_trips.data;
 	let tracked_locations = Array.from(new Set(tracked_trips.map(trip => trip.origin).concat(tracked_trips.map(trip => trip.destination))));
 
 	console.log(tracked_trips);
@@ -197,7 +196,7 @@ export function trackedTripsLocationsSorted() {
 
 	console.log(sorted_locations);
 
-	console.log(sorted_locations.map(item => DataStore.locations.get()[item]?.name));
+	console.log(sorted_locations.map(item => window.dataStore.locations.data[item]?.name));
 
 	return sorted_locations;
 }

web/journeys-search.js

@@ -1,7 +1,6 @@
 import { fetchJourneys } from './api.js';
 import { attachLocationsSearch } from './locations-search.js';
 import { addJourneyToDraftingBoard } from './drafting-board.js';
-import { DataStore } from './datastore.js';
 
 let element_journeys_search = document.querySelector("#journeys-search");
 let element_from = document.querySelector("#journey-search-from");
@@ -27,7 +26,7 @@ function createJourneyElement(journey) {
 	let el = document.createElement("div");
 
 	for (let leg of journey.legs) {
-		DataStore.locations.rememberAllIfNotExist([leg.origin, leg.destination]);
+		window.dataStore.locations.rememberAllIfNotExist([leg.origin, leg.destination]);
 		el.appendChild(createJourneyLegElement(leg));
 	}
 

web/locations-search.js

@@ -1,5 +1,4 @@
 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");
@@ -9,7 +8,7 @@ export function setupLocationsSearch() {
 	element_query.addEventListener("change", (event) => {
 		element_response.innerText = "Loading…";
 		fetchLocations(event.target.value).then(result => {
-			DataStore.locations.rememberAll(result);
+			window.dataStore.locations.rememberAll(result);
 			element_response.innerText = "";
 			result.forEach(location => {
 				let location_element = createLocationElement(location);
@@ -25,7 +24,7 @@ function createLocationElement(location) {
 	location_element.dataset.locationId = location.id;
 
 	location_element.addEventListener("click", event => {
-		DataStore.recent_locations.remember(event.target.dataset.locationId);
+		window.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";
 	});
@@ -41,8 +40,8 @@ export function attachLocationsSearch(search_element) {
 		};
 		element_query.value = "";
 		element_response.innerText = "";
-		let locations = DataStore.locations.get();
+		let locations = window.dataStore.locations.data;
-		for (let location_id of DataStore.recent_locations.get()) {
+		for (let location_id of window.dataStore.recent_locations.data) {
 			let location = locations[location_id];
 			let el = createLocationElement(location);
 			element_response.appendChild(el);

web/traveldrafter.js

@@ -6,7 +6,7 @@ import { drawDraftingBoard } from './drafting-board.js';
 import { DataStore } from './datastore.js';
 
 window.Api = Api;
-window.DataStore = DataStore;
+window.dataStore = new DataStore();
 
 setupPopups();
 setupLocationsSearch();