feat: Add background image customization

- Add background image upload in settings
- Add preview for uploaded background images
- Add toggle to enable/disable background
- Store background image in localStorage as base64
- Add CSS for background image display with overlay
- Add currentBgImage property to TeeTracker class
- Add setupBackgroundListeners() method
- Add handleBackgroundUpload(), toggleBackground(), saveBackgroundSettings(), removeBackground(), loadBackgroundSettings() methods

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

app.js

@@ -8,6 +8,9 @@ const STORAGE_KEY_TEAS = 'teatracker_teas';
 const STORAGE_KEY_ENTRIES = 'teatracker_entries';
 const STORAGE_KEY_NC_CONFIG = 'teatracker_nextcloud_config';
 
+// Data directory for Nextcloud storage
+const DATA_DIRECTORY = 'data/';
+
 // ============================================
 // Nextcloud Storage Integration
 // ============================================
@@ -63,12 +66,44 @@ class NextcloudStorage {
         }
     }
 
+    
+    // Migrate old files from root to data/ directory
+    async migrateToDataDirectory() {
+        try {
+            // Check if old teas.json exists in root
+            const oldTeasUrl = this.getFileUrl('teas.json');
+            const oldTeasResponse = await fetch(oldTeasUrl, {
+                headers: { 'Authorization': this.authHeader }
+            });
+            
+            if (oldTeasResponse.ok) {
+                const oldTeas = await oldTeasResponse.json();
+                await this.saveFile(DATA_DIRECTORY + 'teas.json', oldTeas);
+                console.log('Migrated teas.json to data/ directory');
+            }
+            
+            // Check if old entries.json exists in root
+            const oldEntriesUrl = this.getFileUrl('entries.json');
+            const oldEntriesResponse = await fetch(oldEntriesUrl, {
+                headers: { 'Authorization': this.authHeader }
+            });
+            
+            if (oldEntriesResponse.ok) {
+                const oldEntries = await oldEntriesResponse.json();
+                await this.saveFile(DATA_DIRECTORY + 'entries.json', oldEntries);
+                console.log('Migrated entries.json to data/ directory');
+            }
+        } catch (error) {
+            console.log('No old files to migrate or migration failed:', error.message);
+        }
+    }
     async ensureDirectory() {
         try {
             const response = await fetch(this.getDirectoryUrl(), {
                 method: 'MKCOL',
                 headers: { 'Authorization': this.authHeader }
             });
+            await this.ensureSubDirectory('data');
             await this.ensureSubDirectory('backup');
             return response.ok || response.status === 405;
         } catch (error) {
@@ -144,6 +179,7 @@ class NextcloudStorage {
 
     async createBackup(backupName, teas, entries) {
         try {
+            await this.ensureSubDirectory('data');
             await this.ensureSubDirectory('backup');
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const backupData = { timestamp, teas, entries };
@@ -185,6 +221,7 @@ class TeeTracker {
         this.entries = [];
         this.currentTeaId = null;
         this.charts = {};
+        this.currentBgImage = null;
         
         // Initialize
         this.initStorage();
@@ -237,8 +274,11 @@ class TeeTracker {
             // Try to load from Nextcloud first
             await this.nextcloudStorage.ensureDirectory();
             
-            const teas = await this.nextcloudStorage.loadFile('teas.json');
+            // Check if old files exist in root directory and migrate to data/ directory
-            const entries = await this.nextcloudStorage.loadFile('entries.json');
+            await this.migrateToDataDirectory();
+            
+            const teas = await this.nextcloudStorage.loadFile(DATA_DIRECTORY + 'teas.json');
+            const entries = await this.nextcloudStorage.loadFile(DATA_DIRECTORY + 'entries.json');
             
             if (teas) {
                 this.teas = teas.map(tea => ({
@@ -294,8 +334,8 @@ class TeeTracker {
                 await this.nextcloudStorage.ensureDirectory();
                 
                 // Save to Nextcloud
-                const teasSaved = await this.nextcloudStorage.saveFile('teas.json', this.teas);
+                const teasSaved = await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'teas.json', this.teas);
-                const entriesSaved = await this.nextcloudStorage.saveFile('entries.json', this.entries);
+                const entriesSaved = await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'entries.json', this.entries);
                 
                 // Also save locally as backup
                 this.saveToLocalStorage();
@@ -625,6 +665,9 @@ class TeeTracker {
             });
         }
         
+        // Background image settings
+        this.setupBackgroundListeners();
+        
         // Nextcloud settings
         this.setupNextcloudListeners();
     }
@@ -717,6 +760,111 @@ class TeeTracker {
         }
     }
     
+    setupBackgroundListeners() {
+        // Background image upload
+        const bgUpload = document.getElementById('bg-image-upload');
+        if (bgUpload) {
+            bgUpload.addEventListener('change', (e) => this.handleBackgroundUpload(e));
+        }
+        
+        // Background enable toggle
+        const bgEnabled = document.getElementById('bg-enabled');
+        if (bgEnabled) {
+            bgEnabled.addEventListener('change', () => this.toggleBackground());
+        }
+        
+        // Save background button
+        const saveBgBtn = document.getElementById('save-bg');
+        if (saveBgBtn) {
+            saveBgBtn.addEventListener('click', () => this.saveBackgroundSettings());
+        }
+        
+        // Remove background button
+        const removeBgBtn = document.getElementById('remove-bg');
+        if (removeBgBtn) {
+            removeBgBtn.addEventListener('click', () => this.removeBackground());
+        }
+        
+        // Load saved background settings
+        this.loadBackgroundSettings();
+    }
+    
+    handleBackgroundUpload(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const preview = document.getElementById('bg-preview-img');
+        const previewContainer = document.getElementById('bg-image-preview');
+        const removeBtn = document.getElementById('remove-bg');
+        
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                preview.src = event.target.result;
+                previewContainer.style.display = 'block';
+                removeBtn.style.display = 'inline-flex';
+                this.currentBgImage = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
+    toggleBackground() {
+        const enabled = document.getElementById('bg-enabled').checked;
+        if (enabled && this.currentBgImage) {
+            document.documentElement.style.setProperty('--bg-image', `url("${this.currentBgImage}")`);
+        } else {
+            document.documentElement.style.setProperty('--bg-image', 'none');
+        }
+    }
+    
+    saveBackgroundSettings() {
+        const enabled = document.getElementById('bg-enabled').checked;
+        const bgImage = this.currentBgImage;
+        
+        if (enabled && bgImage) {
+            localStorage.setItem('teatracker_bg_enabled', 'true');
+            localStorage.setItem('teatracker_bg_image', bgImage);
+            this.showToast('Hintergrundbild gespeichert!', 'success');
+        } else {
+            localStorage.removeItem('teatracker_bg_enabled');
+            localStorage.removeItem('teatracker_bg_image');
+            this.showToast('Hintergrundbild deaktiviert!', 'success');
+        }
+        this.toggleBackground();
+    }
+    
+    removeBackground() {
+        this.currentBgImage = null;
+        document.getElementById('bg-preview-img').src = '';
+        document.getElementById('bg-image-preview').style.display = 'none';
+        document.getElementById('remove-bg').style.display = 'none';
+        document.getElementById('bg-enabled').checked = false;
+        this.toggleBackground();
+    }
+    
+    loadBackgroundSettings() {
+        this.currentBgImage = localStorage.getItem('teatracker_bg_image');
+        const enabled = localStorage.getItem('teatracker_bg_enabled') === 'true';
+        
+        if (this.currentBgImage) {
+            document.getElementById('bg-enabled').checked = enabled;
+            if (enabled) {
+                document.documentElement.style.setProperty('--bg-image', `url("${this.currentBgImage}")`);
+            }
+            
+            // Show preview
+            const preview = document.getElementById('bg-preview-img');
+            const previewContainer = document.getElementById('bg-image-preview');
+            const removeBtn = document.getElementById('remove-bg');
+            if (preview && previewContainer && removeBtn) {
+                preview.src = this.currentBgImage;
+                previewContainer.style.display = 'block';
+                removeBtn.style.display = 'inline-flex';
+            }
+        }
+    }
+    
     // ============================================
     // Nextcloud Functions
     // ============================================
@@ -778,6 +926,30 @@ class TeeTracker {
                     return;
                 }
                 
+                // Load existing data from localStorage before switching to Nextcloud
+                // This prevents data loss when connecting to Nextcloud for the first time
+                const existingTeas = localStorage.getItem(STORAGE_KEY_TEAS);
+                const existingEntries = localStorage.getItem(STORAGE_KEY_ENTRIES);
+                
+                if (existingTeas) {
+                    try {
+                        this.teas = JSON.parse(existingTeas).map(tea => ({
+                            ...tea,
+                            organic: tea.organic !== undefined ? tea.organic : false
+                        }));
+                    } catch (error) {
+                        console.error('Error loading existing teas:', error);
+                    }
+                }
+                
+                if (existingEntries) {
+                    try {
+                        this.entries = JSON.parse(existingEntries);
+                    } catch (error) {
+                        console.error('Error loading existing entries:', error);
+                    }
+                }
+                
                 // Save config WITHOUT password for security
                 // Password will be requested each time or stored in sessionStorage
                 const config = { baseUrl: url, username, path };
@@ -914,8 +1086,8 @@ class TeeTracker {
         localStorage.removeItem(STORAGE_KEY_ENTRIES);
         
         if (this.useNextcloud && this.nextcloudStorage) {
-            await this.nextcloudStorage.saveFile('teas.json', []);
+            await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'teas.json', []);
-            await this.nextcloudStorage.saveFile('entries.json', []);
+            await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'entries.json', []);
         }
         
         this.closeConfirmModal();

styles.css

@@ -936,3 +936,38 @@ header p {
     outline: none;
     border-color: var(--primary-color);
 }
+
+/* Background Image Settings */
+.bg-preview {
+    margin-top: 10px;
+}
+
+.bg-preview img {
+    max-width: 200px;
+    max-height: 150px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    object-fit: cover;
+}
+
+/* Background Image for App */
+.app-container {
+    background-image: var(--bg-image, none);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+/* Overlay for better text readability */
+.app-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.85);
+    z-index: -1;
+    pointer-events: none;
+}