From 14e6a68e6f6e241d1d47b8f026151053270d988b Mon Sep 17 00:00:00 2001
From: "Tomi P. Hakala" <tomi.hakala@pobox.fi>
Date: Tue, 14 Jan 2025 22:07:03 +0200
Subject: [PATCH] feat: enhance species settings functionality with caching and
 improved predictions

- Introduced caching for species data using localStorage to optimize loading times and reduce unnecessary API calls.
- Updated the `init` and `loadSpeciesData` methods to handle species data initialization and caching based on the app version.
- Refactored the `updatePredictions` method to utilize cached data, improving responsiveness when filtering species.
- Added a new `filteredSpecies` array to manage included species more effectively.

These changes improve the performance and user experience of the species settings component.
---
 views/settings/speciesSettings.html | 97 ++++++++++++++++++++++-------
 1 file changed, 74 insertions(+), 23 deletions(-)

diff --git a/views/settings/speciesSettings.html b/views/settings/speciesSettings.html
index 9140d6a..0f3a248 100644
--- a/views/settings/speciesSettings.html
+++ b/views/settings/speciesSettings.html
@@ -13,15 +13,58 @@
         },
         newIncludeSpecies: '',
         showTooltip: null,
-        hasChanges: false,
+        hasChanges: false,       
+        speciesSettingsOpen: false,
+        showActionsModal: false,
+        currentSpecies: '',
         predictions: [],
         allSpecies: [],
+        filteredSpecies: [],
         async init() {
-            this.allSpecies = {{getAllSpecies | toJSON}};
+            this.allSpecies = [];
+            this.filteredSpecies = [];
+            // Use app version for cache busting
+            const appVersion = '{{.Settings.Version}}';
+            const cached = localStorage.getItem('allSpecies');
+            const cachedFiltered = localStorage.getItem('filteredSpecies');
+            const cachedVersion = localStorage.getItem('allSpeciesVersion');
+            
+            if (cached && cachedVersion === appVersion) {
+                this.allSpecies = JSON.parse(cached);
+            }
+            if (cachedFiltered && cachedVersion === appVersion) {
+                this.filteredSpecies = JSON.parse(cachedFiltered);
+            }
+        },
+        async loadSpeciesData() {
+            if (this.allSpecies.length === 0) {
+                this.allSpecies = {{getAllSpecies | toJSON}};
+                // Cache with app version
+                localStorage.setItem('allSpecies', JSON.stringify(this.allSpecies));
+                localStorage.setItem('allSpeciesVersion', '{{.Settings.Version}}');
+            }
+            if (this.filteredSpecies.length === 0) {
+                this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+                // Cache filtered species
+                localStorage.setItem('filteredSpecies', JSON.stringify(this.filteredSpecies));
+            }
+        },
+        async updatePredictions(input, listType) {
+            if (!input) {
+                this.predictions = [];
+                return;
+            }
+            
+            await this.loadSpeciesData();
+            
+            const sourceList = listType === 'Include' ? this.allSpecies : this.filteredSpecies;
+            
+            this.predictions = sourceList
+                .filter(species => 
+                    species.toLowerCase().includes(input.toLowerCase())
+                )
+                .slice(0, 5);
         },
-        speciesSettingsOpen: false,
-        showActionsModal: false,
-        currentSpecies: '',
         resetChanges() {
             this.hasChanges = false;
         },
@@ -37,21 +80,6 @@
             this.speciesSettings[list] = this.speciesSettings[list].filter(s => s !== species);
             this.hasChanges = true;
         },
-        updatePredictions(input, listType) {
-            if (!input) {
-                this.predictions = [];
-                return;
-            }
-            
-            // Use different species list based on whether we're including or excluding
-            const sourceList = this.allSpecies;
-            
-            this.predictions = sourceList
-                .filter(species => 
-                    species.toLowerCase().includes(input.toLowerCase())
-                )
-                .slice(0, 5);
-        },
     }" 
     x-init="init(); $watch('speciesSettings', () => { hasChanges = true }, { deep: true })"
     x-cloak>
@@ -137,7 +165,19 @@
         predictions: [],
         filteredSpecies: [],
         async init() {
-            this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+            // Use app version for cache busting
+            const appVersion = '{{.Settings.Version}}';
+            const cachedFiltered = localStorage.getItem('filteredSpecies');
+            const cachedVersion = localStorage.getItem('allSpeciesVersion');
+            
+            if (cachedFiltered && cachedVersion === appVersion) {
+                this.filteredSpecies = JSON.parse(cachedFiltered);
+            } else {
+                this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+                // Cache filtered species
+                localStorage.setItem('filteredSpecies', JSON.stringify(this.filteredSpecies));
+                localStorage.setItem('allSpeciesVersion', '{{.Settings.Version}}');
+            }
         },
         resetChanges() {
             this.hasChanges = false;
@@ -249,8 +289,19 @@
         allSpecies: [],
         filteredSpecies: [],
         async init() {
-            this.allSpecies = {{getAllSpecies | toJSON}};
-            this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+            // Use app version for cache busting
+            const appVersion = '{{.Settings.Version}}';
+            const cachedFiltered = localStorage.getItem('filteredSpecies');
+            const cachedVersion = localStorage.getItem('allSpeciesVersion');
+            
+            if (cachedFiltered && cachedVersion === appVersion) {
+                this.filteredSpecies = JSON.parse(cachedFiltered);
+            } else {
+                this.filteredSpecies = {{getIncludedSpecies | toJSON}};
+                // Cache filtered species
+                localStorage.setItem('filteredSpecies', JSON.stringify(this.filteredSpecies));
+                localStorage.setItem('allSpeciesVersion', '{{.Settings.Version}}');
+            }
         },
         speciesSettingsOpen: false,
         showActionsModal: false,