winebox 0.1.2__py3-none-any.whl → 0.1.4__py3-none-any.whl

winebox/static/js/app.js

@@ -9,6 +9,7 @@ const API_BASE = '/api';
 let currentPage = 'dashboard';
 let authToken = localStorage.getItem('winebox_token');
 let currentUser = null;
+let lastScanResult = null;  // Store last scan result to avoid rescanning on checkin
 
 // Initialize app
 document.addEventListener('DOMContentLoaded', () => {
@@ -17,8 +18,23 @@ document.addEventListener('DOMContentLoaded', () => {
     initModals();
     initAuth();
     checkAuth();
+    loadAppInfo();
 });
 
+// Load app info for footer
+async function loadAppInfo() {
+    try {
+        const response = await fetch('/health');
+        const data = await response.json();
+        const appInfo = document.getElementById('app-info');
+        if (appInfo && data.app_name && data.version) {
+            appInfo.innerHTML = `${data.app_name} <span class="version">v${data.version}</span>`;
+        }
+    } catch (error) {
+        console.log('Could not load app info');
+    }
+}
+
 // Authentication
 function initAuth() {
     // Login form
@@ -26,6 +42,38 @@ function initAuth() {
 
     // Logout button
     document.getElementById('logout-btn').addEventListener('click', handleLogout);
+
+    // Username link to settings
+    document.getElementById('username-display').addEventListener('click', (e) => {
+        e.preventDefault();
+        navigateTo('settings');
+    });
+
+    // Password toggle for all password fields
+    initPasswordToggles();
+}
+
+function initPasswordToggles() {
+    document.querySelectorAll('.password-toggle').forEach(toggle => {
+        toggle.addEventListener('click', function() {
+            const wrapper = this.closest('.password-input-wrapper');
+            const passwordInput = wrapper.querySelector('input[type="password"], input[type="text"]');
+            const eyeIcon = this.querySelector('.eye-icon');
+            const eyeOffIcon = this.querySelector('.eye-off-icon');
+
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeIcon.style.display = 'none';
+                eyeOffIcon.style.display = 'block';
+                this.setAttribute('aria-label', 'Hide password');
+            } else {
+                passwordInput.type = 'password';
+                eyeIcon.style.display = 'block';
+                eyeOffIcon.style.display = 'none';
+                this.setAttribute('aria-label', 'Show password');
+            }
+        });
+    });
 }
 
 async function checkAuth() {
@@ -58,7 +106,9 @@ function showMainApp() {
     document.body.classList.remove('logged-out');
     document.getElementById('page-login').classList.remove('active');
     document.getElementById('user-info').style.display = 'flex';
-    document.getElementById('username-display').textContent = currentUser.username;
+    // Display full name if available, otherwise username
+    const displayName = currentUser.full_name || currentUser.username;
+    document.getElementById('username-display').textContent = displayName;
     loadDashboard();
 }
 
@@ -166,6 +216,9 @@ function navigateTo(page) {
         case 'search':
             // Search results loaded on form submit
             break;
+        case 'settings':
+            loadSettings();
+            break;
     }
 }
 
@@ -177,6 +230,8 @@ function initForms() {
     checkinForm.addEventListener('reset', () => {
         document.getElementById('front-preview').innerHTML = 'Tap to take photo or select image';
         document.getElementById('back-preview').innerHTML = 'Tap to take photo or select image';
+        clearRawLabelText();
+        lastScanResult = null;  // Clear stored scan result
     });
 
     // Image previews - make clickable to trigger file input
@@ -187,9 +242,11 @@ function initForms() {
 
     frontLabel.addEventListener('change', (e) => {
         previewImage(e.target, 'front-preview');
+        scanLabels();
     });
     backLabel.addEventListener('change', (e) => {
         previewImage(e.target, 'back-preview');
+        scanLabels();
     });
 
     // Click on preview to trigger file input
@@ -200,6 +257,25 @@ function initForms() {
         backLabel.click();
     });
 
+    // Label text collapsible toggle
+    const labelTextToggle = document.getElementById('label-text-toggle');
+    if (labelTextToggle) {
+        labelTextToggle.addEventListener('click', () => {
+            const section = document.getElementById('label-text-section');
+            const content = document.getElementById('label-text-content');
+            const icon = section.querySelector('.collapse-icon');
+
+            section.classList.toggle('open');
+            if (section.classList.contains('open')) {
+                content.style.display = 'block';
+                icon.textContent = '-';
+            } else {
+                content.style.display = 'none';
+                icon.textContent = '+';
+            }
+        });
+    }
+
     // Search form
     document.getElementById('search-form').addEventListener('submit', handleSearch);
 
@@ -212,6 +288,12 @@ function initForms() {
 
     // History filter
     document.getElementById('history-filter').addEventListener('change', loadHistory);
+
+    // Settings forms
+    document.getElementById('profile-form').addEventListener('submit', handleProfileUpdate);
+    document.getElementById('password-form').addEventListener('submit', handlePasswordChange);
+    document.getElementById('api-key-form').addEventListener('submit', handleApiKeyUpdate);
+    document.getElementById('delete-api-key-btn').addEventListener('click', handleApiKeyDelete);
 }
 
 function previewImage(input, previewId) {
@@ -227,10 +309,279 @@ function previewImage(input, previewId) {
     }
 }
 
-async function handleCheckin(e) {
+async function scanLabels() {
+    const frontLabel = document.getElementById('front-label');
+
+    // Only scan if front label is present
+    if (!frontLabel.files || !frontLabel.files[0]) {
+        return;
+    }
+
+    const backLabel = document.getElementById('back-label');
+    const formData = new FormData();
+    formData.append('front_label', frontLabel.files[0]);
+
+    if (backLabel.files && backLabel.files[0]) {
+        formData.append('back_label', backLabel.files[0]);
+    }
+
+    // Show scanning indicator
+    showScanningIndicator(true);
+
+    try {
+        const response = await fetchWithAuth(`${API_BASE}/wines/scan`, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Scan failed');
+        }
+
+        const result = await response.json();
+        lastScanResult = result;  // Store for checkin
+        populateFormFromScan(result);
+        const methodName = result.method === 'claude_vision' ? 'Claude Vision' : 'Tesseract OCR';
+        showToast(`Label scanned with ${methodName}`, 'success');
+    } catch (error) {
+        showToast(`Scan failed: ${error.message}`, 'error');
+    } finally {
+        showScanningIndicator(false);
+    }
+}
+
+function populateFormFromScan(result) {
+    const parsed = result.parsed;
+
+    // Update fields with scanned values (overwrites previous scan results)
+    const fields = {
+        'wine-name': parsed.name,
+        'winery': parsed.winery,
+        'vintage': parsed.vintage,
+        'grape-variety': parsed.grape_variety,
+        'region': parsed.region,
+        'country': parsed.country,
+        'alcohol': parsed.alcohol_percentage
+    };
+
+    for (const [fieldId, value] of Object.entries(fields)) {
+        const input = document.getElementById(fieldId);
+        if (input && value !== null && value !== undefined) {
+            input.value = value;
+            // Add visual indicator that field was auto-filled
+            input.classList.add('auto-filled');
+            setTimeout(() => input.classList.remove('auto-filled'), 2000);
+        }
+    }
+
+    // Populate raw label text section
+    populateRawLabelText(result.ocr, result.method);
+}
+
+function populateRawLabelText(ocr, method) {
+    const section = document.getElementById('label-text-section');
+    const frontText = document.getElementById('raw-front-label-text');
+    const backSection = document.getElementById('raw-back-label-section');
+    const backText = document.getElementById('raw-back-label-text');
+    const header = section.querySelector('h3');
+
+    // Update header to show scan method
+    const methodName = method === 'claude_vision' ? 'Claude Vision' : 'Tesseract OCR';
+    header.innerHTML = `Raw Label Text <span class="scan-method-badge">${methodName}</span>`;
+
+    if (ocr.front_label_text) {
+        frontText.textContent = ocr.front_label_text;
+        section.style.display = 'block';
+    }
+
+    if (ocr.back_label_text) {
+        backText.textContent = ocr.back_label_text;
+        backSection.style.display = 'block';
+    } else {
+        backSection.style.display = 'none';
+    }
+}
+
+function clearRawLabelText() {
+    const section = document.getElementById('label-text-section');
+    const frontText = document.getElementById('raw-front-label-text');
+    const backSection = document.getElementById('raw-back-label-section');
+    const backText = document.getElementById('raw-back-label-text');
+
+    section.style.display = 'none';
+    section.classList.remove('open');
+    document.getElementById('label-text-content').style.display = 'none';
+    document.querySelector('#label-text-section .collapse-icon').textContent = '+';
+    frontText.textContent = '';
+    backText.textContent = '';
+    backSection.style.display = 'none';
+}
+
+function showScanningIndicator(show) {
+    const submitBtn = document.querySelector('#checkin-form button[type="submit"]');
+    const formNote = document.querySelector('#checkin-form .form-note');
+
+    if (show) {
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            submitBtn.dataset.originalText = submitBtn.textContent;
+            submitBtn.textContent = 'Scanning...';
+        }
+        if (formNote) {
+            formNote.dataset.originalText = formNote.textContent;
+            formNote.textContent = 'Analyzing label with Claude Vision...';
+            formNote.classList.add('scanning');
+        }
+    } else {
+        if (submitBtn) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = submitBtn.dataset.originalText || 'Check In Wine';
+        }
+        if (formNote) {
+            formNote.textContent = formNote.dataset.originalText || 'Leave fields blank to use OCR-detected values';
+            formNote.classList.remove('scanning');
+        }
+    }
+}
+
+// Store pending checkin data for confirmation
+let pendingCheckinData = null;
+
+function handleCheckin(e) {
     e.preventDefault();
-    const form = e.target;
-    const formData = new FormData(form);
+
+    const frontLabel = document.getElementById('front-label');
+    if (!frontLabel.files || !frontLabel.files[0]) {
+        showToast('Please select a front label image', 'error');
+        return;
+    }
+
+    // Store the form data for later submission
+    pendingCheckinData = {
+        frontLabel: frontLabel.files[0],
+        backLabel: document.getElementById('back-label').files?.[0] || null,
+        name: document.getElementById('wine-name').value,
+        winery: document.getElementById('winery').value,
+        vintage: document.getElementById('vintage').value,
+        grapeVariety: document.getElementById('grape-variety').value,
+        region: document.getElementById('region').value,
+        country: document.getElementById('country').value,
+        alcohol: document.getElementById('alcohol').value,
+        quantity: document.getElementById('quantity').value || '1',
+        notes: document.getElementById('notes').value,
+        frontLabelText: lastScanResult?.ocr?.front_label_text || '',
+        backLabelText: lastScanResult?.ocr?.back_label_text || ''
+    };
+
+    // Show the confirmation modal with editable fields
+    showCheckinConfirmation();
+}
+
+function showCheckinConfirmation() {
+    const modal = document.getElementById('checkin-confirm-modal');
+    const data = pendingCheckinData;
+
+    // Set image preview
+    const imageContainer = document.getElementById('checkin-confirm-image');
+    if (data.frontLabel) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            imageContainer.innerHTML = `<img src="${e.target.result}" alt="Wine label">`;
+        };
+        reader.readAsDataURL(data.frontLabel);
+    } else {
+        imageContainer.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);">No image</div>';
+    }
+
+    // Populate editable fields
+    document.getElementById('confirm-wine-name').value = data.name || '';
+    document.getElementById('confirm-winery').value = data.winery || '';
+    document.getElementById('confirm-vintage').value = data.vintage || '';
+    document.getElementById('confirm-grape-variety').value = data.grapeVariety || '';
+    document.getElementById('confirm-region').value = data.region || '';
+    document.getElementById('confirm-country').value = data.country || '';
+    document.getElementById('confirm-alcohol').value = data.alcohol || '';
+    document.getElementById('confirm-quantity').value = data.quantity || '1';
+    document.getElementById('confirm-notes').value = data.notes || '';
+
+    // Set OCR text (hidden by default)
+    const ocrSection = document.getElementById('confirm-ocr-section');
+    const ocrContent = document.getElementById('confirm-ocr-content');
+    const ocrToggle = document.getElementById('confirm-ocr-toggle');
+
+    if (data.frontLabelText) {
+        document.getElementById('checkin-confirm-front-ocr').textContent = data.frontLabelText;
+        ocrSection.style.display = 'block';
+        ocrContent.style.display = 'none';  // Hidden by default
+        ocrSection.classList.remove('open');
+        ocrToggle.querySelector('.collapse-icon').textContent = '+';
+        ocrToggle.querySelector('.label').textContent = 'Show Raw Label Text';
+    } else {
+        ocrSection.style.display = 'none';
+    }
+
+    const backOcrSection = document.getElementById('checkin-confirm-back-ocr-section');
+    if (data.backLabelText) {
+        backOcrSection.style.display = 'block';
+        document.getElementById('checkin-confirm-back-ocr').textContent = data.backLabelText;
+    } else {
+        backOcrSection.style.display = 'none';
+    }
+
+    // Show modal
+    modal.classList.add('active');
+
+    // Set up OCR toggle
+    ocrToggle.onclick = () => {
+        ocrSection.classList.toggle('open');
+        if (ocrSection.classList.contains('open')) {
+            ocrContent.style.display = 'block';
+            ocrToggle.querySelector('.collapse-icon').textContent = '-';
+            ocrToggle.querySelector('.label').textContent = 'Hide Raw Label Text';
+        } else {
+            ocrContent.style.display = 'none';
+            ocrToggle.querySelector('.collapse-icon').textContent = '+';
+            ocrToggle.querySelector('.label').textContent = 'Show Raw Label Text';
+        }
+    };
+
+    // Set up button handlers
+    document.getElementById('checkin-confirm-btn').onclick = submitCheckin;
+    document.getElementById('checkin-cancel-btn').onclick = cancelCheckin;
+}
+
+async function submitCheckin() {
+    const modal = document.getElementById('checkin-confirm-modal');
+    const data = pendingCheckinData;
+
+    // Build form data from confirmation modal fields
+    const formData = new FormData();
+    formData.append('front_label', data.frontLabel);
+    if (data.backLabel) {
+        formData.append('back_label', data.backLabel);
+    }
+
+    // Get values from confirmation modal (may have been edited)
+    formData.append('name', document.getElementById('confirm-wine-name').value);
+    formData.append('winery', document.getElementById('confirm-winery').value);
+    const vintage = document.getElementById('confirm-vintage').value;
+    if (vintage) formData.append('vintage', vintage);
+    formData.append('grape_variety', document.getElementById('confirm-grape-variety').value);
+    formData.append('region', document.getElementById('confirm-region').value);
+    formData.append('country', document.getElementById('confirm-country').value);
+    const alcohol = document.getElementById('confirm-alcohol').value;
+    if (alcohol) formData.append('alcohol_percentage', alcohol);
+    formData.append('quantity', document.getElementById('confirm-quantity').value || '1');
+    formData.append('notes', document.getElementById('confirm-notes').value);
+
+    // Include pre-scanned OCR text to avoid rescanning (saves API costs)
+    if (data.frontLabelText) {
+        formData.append('front_label_text', data.frontLabelText);
+    }
+    if (data.backLabelText) {
+        formData.append('back_label_text', data.backLabelText);
+    }
 
     try {
         const response = await fetchWithAuth(`${API_BASE}/wines/checkin`, {
@@ -245,13 +596,29 @@ async function handleCheckin(e) {
 
         const wine = await response.json();
         showToast(`Successfully checked in: ${wine.name}`, 'success');
-        form.reset();
+
+        // Close modal and reset form
+        modal.classList.remove('active');
+        document.getElementById('checkin-form').reset();
+        document.getElementById('front-preview').innerHTML = 'Tap to take photo or select image';
+        document.getElementById('back-preview').innerHTML = 'Tap to take photo or select image';
+        clearRawLabelText();
+        lastScanResult = null;
+        pendingCheckinData = null;
+
+        // Navigate to cellar
         navigateTo('cellar');
     } catch (error) {
         showToast(error.message, 'error');
     }
 }
 
+function cancelCheckin() {
+    const modal = document.getElementById('checkin-confirm-modal');
+    modal.classList.remove('active');
+    // Keep the form data so user can make changes and try again
+}
+
 async function handleSearch(e) {
     e.preventDefault();
     const form = e.target;
@@ -558,9 +925,25 @@ async function showWineDetail(wineId) {
                 ` : ''}
 
                 ${wine.front_label_text ? `
-                    <div class="wine-detail-field">
-                        <div class="label">OCR Text (Front Label)</div>
-                        <div class="wine-detail-ocr">${wine.front_label_text}</div>
+                    <div class="wine-detail-label-text collapsible">
+                        <div class="collapsible-header" onclick="toggleWineDetailLabelText(this)">
+                            <span class="label">Show Raw Label Text</span>
+                            <span class="collapse-icon">+</span>
+                        </div>
+                        <div class="collapsible-content" style="display: none;">
+                            <div class="ocr-raw-text">
+                                <div class="ocr-raw-section">
+                                    <label>Front Label:</label>
+                                    <pre>${escapeHtml(wine.front_label_text)}</pre>
+                                </div>
+                                ${wine.back_label_text ? `
+                                    <div class="ocr-raw-section">
+                                        <label>Back Label:</label>
+                                        <pre>${escapeHtml(wine.back_label_text)}</pre>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        </div>
                     </div>
                 ` : ''}
 
@@ -678,6 +1061,30 @@ function formatDate(dateString) {
     });
 }
 
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function toggleWineDetailLabelText(header) {
+    const section = header.parentElement;
+    const content = section.querySelector('.collapsible-content');
+    const icon = header.querySelector('.collapse-icon');
+    const label = header.querySelector('.label');
+
+    section.classList.toggle('open');
+    if (section.classList.contains('open')) {
+        content.style.display = 'block';
+        icon.textContent = '-';
+        label.textContent = 'Hide Raw Label Text';
+    } else {
+        content.style.display = 'none';
+        icon.textContent = '+';
+        label.textContent = 'Show Raw Label Text';
+    }
+}
+
 function showToast(message, type = 'info') {
     const container = document.getElementById('toast-container');
     const toast = document.createElement('div');
@@ -701,3 +1108,171 @@ function debounce(func, wait) {
         timeout = setTimeout(later, wait);
     };
 }
+
+// Settings
+function loadSettings() {
+    // Populate profile form with current user data
+    document.getElementById('settings-username').value = currentUser.username;
+    document.getElementById('settings-fullname').value = currentUser.full_name || '';
+
+    // Update API key status
+    updateApiKeyStatus(currentUser.has_api_key);
+
+    // Clear password form
+    document.getElementById('password-form').reset();
+
+    // Clear API key form
+    document.getElementById('api-key').value = '';
+}
+
+function updateApiKeyStatus(hasApiKey) {
+    const statusDiv = document.getElementById('api-key-status');
+    const statusText = statusDiv.querySelector('.status-text');
+    const deleteBtn = document.getElementById('delete-api-key-btn');
+
+    statusDiv.classList.remove('configured', 'not-configured');
+
+    if (hasApiKey) {
+        statusDiv.classList.add('configured');
+        statusText.textContent = 'API key is configured';
+        deleteBtn.style.display = 'inline-block';
+    } else {
+        statusDiv.classList.add('not-configured');
+        statusText.textContent = 'No API key configured';
+        deleteBtn.style.display = 'none';
+    }
+}
+
+async function handleProfileUpdate(e) {
+    e.preventDefault();
+
+    const fullName = document.getElementById('settings-fullname').value.trim();
+
+    try {
+        const response = await fetchWithAuth(`${API_BASE}/auth/profile`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ full_name: fullName || null })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to update profile');
+        }
+
+        const updatedUser = await response.json();
+        currentUser = updatedUser;
+
+        // Update display name in header
+        const displayName = currentUser.full_name || currentUser.username;
+        document.getElementById('username-display').textContent = displayName;
+
+        showToast('Profile updated successfully', 'success');
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+async function handlePasswordChange(e) {
+    e.preventDefault();
+
+    const currentPassword = document.getElementById('current-password').value;
+    const newPassword = document.getElementById('new-password').value;
+    const confirmPassword = document.getElementById('confirm-password').value;
+
+    if (newPassword !== confirmPassword) {
+        showToast('New passwords do not match', 'error');
+        return;
+    }
+
+    if (newPassword.length < 6) {
+        showToast('Password must be at least 6 characters', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetchWithAuth(`${API_BASE}/auth/password`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                current_password: currentPassword,
+                new_password: newPassword
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to change password');
+        }
+
+        document.getElementById('password-form').reset();
+        showToast('Password changed successfully', 'success');
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+async function handleApiKeyUpdate(e) {
+    e.preventDefault();
+
+    const apiKey = document.getElementById('api-key').value.trim();
+
+    if (!apiKey) {
+        showToast('Please enter an API key', 'error');
+        return;
+    }
+
+    if (!apiKey.startsWith('sk-ant-')) {
+        showToast('Invalid API key format. Anthropic API keys start with sk-ant-', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetchWithAuth(`${API_BASE}/auth/api-key`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ api_key: apiKey })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to update API key');
+        }
+
+        currentUser.has_api_key = true;
+        updateApiKeyStatus(true);
+        document.getElementById('api-key').value = '';
+        showToast('API key saved successfully', 'success');
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}
+
+async function handleApiKeyDelete() {
+    if (!confirm('Are you sure you want to delete your API key? Wine label scanning will use the default system key if available.')) {
+        return;
+    }
+
+    try {
+        const response = await fetchWithAuth(`${API_BASE}/auth/api-key`, {
+            method: 'DELETE'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Failed to delete API key');
+        }
+
+        currentUser.has_api_key = false;
+        updateApiKeyStatus(false);
+        showToast('API key deleted successfully', 'success');
+    } catch (error) {
+        showToast(error.message, 'error');
+    }
+}