Pre-github

2026-04-24 14:09:04 -05:00
parent 7a2fffd62e
commit fcaa15bf6e
68 changed files with 707 additions and 10574 deletions
@@ -3,14 +3,10 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Select Location - CGW Product Finder</title>
+    <title>Select Location</title>
    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -43,72 +39,75 @@

        .location-header p {
            color: #666;
-            font-size: 14px;
+            font-size: 15px;
        }

        .user-info {
            background: #f7fafc;
            padding: 15px;
            border-radius: 5px;
-            margin-bottom: 25px;
+            margin-bottom: 30px;
            border-left: 4px solid #667eea;
        }

-        .user-info p {
+        .user-info strong {
            color: #333;
+            display: block;
            margin-bottom: 5px;
        }

-        .user-info strong {
-            color: #667eea;
+        .user-info span {
+            color: #666;
+            font-size: 14px;
        }

-        .location-list {
-            margin-bottom: 25px;
+        .location-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
        }

-        .location-item {
+        .location-card {
            background: #f7fafc;
-            padding: 15px 20px;
-            border-radius: 5px;
-            margin-bottom: 10px;
+            border: 3px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 30px 20px;
+            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
-            border: 2px solid transparent;
-            display: flex;
-            align-items: center;
+            position: relative;
        }

-        .location-item:hover {
-            background: #e6f2ff;
+        .location-card:hover {
            border-color: #667eea;
-            transform: translateX(5px);
+            background: #edf2f7;
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }

-        .location-item input[type="radio"] {
-            margin-right: 15px;
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-        }
-
-        .location-item label {
-            cursor: pointer;
-            flex: 1;
-            font-size: 16px;
-            color: #333;
-            font-weight: 500;
-        }
-
-        .location-badge {
-            background: #667eea;
+        .location-card.selected {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 12px;
+        }
+
+        .location-card .icon {
+            font-size: 40px;
+            margin-bottom: 10px;
+        }
+
+        .location-card .name {
+            font-size: 18px;
            font-weight: 600;
        }

+        .location-card .description {
+            font-size: 13px;
+            margin-top: 5px;
+            opacity: 0.8;
+        }
+
        .btn {
            width: 100%;
            padding: 14px;
@@ -134,30 +133,6 @@
            transform: none;
        }

-        .btn-logout {
-            background: #f56565;
-            margin-top: 15px;
-        }
-
-        .btn-logout:hover {
-            background: #e53e3e;
-            box-shadow: 0 5px 15px rgba(245, 101, 101, 0.4);
-        }
-
-        .btn-admin {
-            background: #48bb78;
-            margin-top: 15px;
-        }
-
-        .btn-admin:hover {
-            background: #38a169;
-            box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
-        }
-
-        .btn-admin.hidden {
-            display: none;
-        }
-
        .alert {
            padding: 12px;
            border-radius: 5px;
@@ -174,145 +149,194 @@
            color: #742a2a;
            border-left: 4px solid #f56565;
        }
+
+        .footer {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .footer a {
+            color: #667eea;
+            text-decoration: none;
+            font-size: 14px;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        .loading-spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+            display: inline-block;
+            margin-left: 10px;
+            vertical-align: middle;
+            display: none;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @media (max-width: 600px) {
+            .location-grid {
+                grid-template-columns: 1fr;
+            }
+        }
    </style>
 </head>
 <body>
    <div class="location-container">
        <div class="location-header">
            <h1>📍 Select Your Location</h1>
-            <p>Choose a location to access the Product Finder</p>
+            <p>Choose which location you'll be working from today</p>
        </div>

-        <div class="user-info" id="userInfo">
-            <p><strong>Welcome:</strong> <span id="userName"></span></p>
-            <p><strong>Default Location:</strong> <span id="defaultLocation"></span></p>
+        <div class="user-info">
+            <strong>Welcome, <span id="username">User</span>!</strong>
+            <span>Default Location: <span id="defaultLocation">-</span></span>
        </div>

        <div class="alert alert-error" id="errorAlert"></div>

-        <form id="locationForm">
-            <div class="location-list" id="locationList">
-                <!-- Locations will be populated here -->
-            </div>
+        <div class="location-grid" id="locationGrid">
+            <!-- Locations will be populated here -->
+        </div>

-            <button type="submit" class="btn" id="continueBtn">
-                Continue to Product Finder
-            </button>
-        </form>
-
-        <button class="btn btn-admin hidden" id="userManagementBtn" onclick="goToUserManagement()">
-            ⚙️ User Management
+        <button class="btn" id="confirmBtn" disabled>
+            Confirm Location
+            <span class="loading-spinner" id="loadingSpinner"></span>
        </button>

-        <button class="btn btn-logout" onclick="logout()">
-            Sign Out
-        </button>
+        <div class="footer">
+            <a href="{{ url_for('users.user_manager') }}" id="manageUsersLink" style="display: none; margin-right: 15px;">Manage Users</a>
+            <a href="{{ url_for('auth.logout') }}">Logout</a>
+        </div>
    </div>

    <script>
-        // Base URL for API calls (supports subdirectory deployments)
-        const BASE_URL = '{{ base_url }}';
-        
-        const LOCATION_NAMES = {
-            'LINDS': 'Lindsborg',
-            'IOLA': 'Iola',
-            'KC': 'KC',
-            'BMD': 'BMD'
-        };
-
+        let selectedLocation = null;
        let sessionData = null;

-        async function loadLocationData() {
+        // Location details
+        const locationDetails = {
+            'LINDS': {
+                icon: '🏭',
+                name: 'LINDS',
+                description: 'Lindsborg Location'
+            },
+            'IOLA': {
+                icon: '🏢',
+                name: 'IOLA',
+                description: 'Iola Location'
+            },
+            'KC': {
+                icon: '🌆',
+                name: 'KC',
+                description: 'Kansas City Location'
+            },
+            'BMD': {
+                icon: '🏛️',
+                name: 'BMD',
+                description: 'BMD Location'
+            }
+        };
+
+        // Load session data on page load
+        loadSessionData();
+
+        async function loadSessionData() {
            try {
-                const response = await fetch(BASE_URL + '/api/session');
+                const response = await fetch('/api/session');
                const data = await response.json();

                if (data.status === 'success') {
                    sessionData = data;
-                    
-                    // Populate user info
-                    document.getElementById('userName').textContent = data.username;
-                    document.getElementById('defaultLocation').textContent = 
-                        LOCATION_NAMES[data.defaultLocation] || data.defaultLocation;
+                    document.getElementById('username').textContent = data.username;
+                    document.getElementById('defaultLocation').textContent = data.defaultLocation || 'Not set';

-                    // Populate location list
-                    const locationList = document.getElementById('locationList');
-                    const locations = data.accessibleLocations || [];
-
-                    if (locations.length === 0) {
-                        showAlert('No accessible locations found. Please contact an administrator.');
-                        document.getElementById('continueBtn').disabled = true;
-                        return;
+                    // Show manage users link if user has permission
+                    if (data.permissions && data.permissions.manage_users === true) {
+                        document.getElementById('manageUsersLink').style.display = 'inline';
                    }

-                    locationList.innerHTML = locations.map((code, index) => {
-                        const isDefault = code === data.defaultLocation;
-                        const checked = isDefault ? 'checked' : '';
-                        
-                        return `
-                            <div class="location-item" onclick="selectLocation('${code}')">
-                                <input type="radio" name="location" value="${code}" 
-                                       id="loc_${code}" ${checked}>
-                                <label for="loc_${code}">
-                                    ${LOCATION_NAMES[code] || code}
-                                </label>
-                                ${isDefault ? '<span class="location-badge">Default</span>' : ''}
-                            </div>
-                        `;
-                    }).join('');
+                    // Render accessible locations
+                    renderLocations(data.accessibleLocations || []);
+
+                    // Auto-select default location if available
+                    if (data.defaultLocation && data.accessibleLocations.includes(data.defaultLocation)) {
+                        selectLocation(data.defaultLocation);
+                    }
                } else {
-                    // Not logged in or session expired
-                    window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Please log in first');
+                    showError('Error loading session. Please login again.');
+                    setTimeout(() => {
+                        window.location.href = '{{ url_for("auth.login_page") }}';
+                    }, 2000);
                }
-
-                // Check if user has manage_users permission
-                await checkUserManagementPermission();
            } catch (error) {
-                showAlert('Error loading location data. Please try again.');
+                showError('Error connecting to server.');
            }
        }

-        async function checkUserManagementPermission() {
-            try {
-                const response = await fetch(BASE_URL + '/api/check-permission', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ permission: 'manage_users' })
-                });
+        function renderLocations(accessibleLocations) {
+            const grid = document.getElementById('locationGrid');

-                const data = await response.json();
-
-                if (data.status === 'success' && data.hasPermission) {
-                    document.getElementById('userManagementBtn').classList.remove('hidden');
-                }
-            } catch (error) {
-                // Permission check failed, keep button hidden
-                console.error('Error checking permission:', error);
-            }
-        }
-
-        function goToUserManagement() {
-            window.location.href = BASE_URL + '/users';
-        }
-
-        function selectLocation(code) {
-            document.getElementById(`loc_${code}`).checked = true;
-        }
-
-        document.getElementById('locationForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
-            const selectedLocation = document.querySelector('input[name="location"]:checked')?.value;
-            
-            if (!selectedLocation) {
-                showAlert('Please select a location');
+            if (accessibleLocations.length === 0) {
+                grid.innerHTML = '<p style="color: #666; text-align: center; grid-column: 1 / -1;">No accessible locations found.</p>';
                return;
            }

+            grid.innerHTML = accessibleLocations.map(locCode => {
+                const loc = locationDetails[locCode] || {
+                    icon: '📍',
+                    name: locCode,
+                    description: locCode
+                };
+
+                return `
+                    <div class="location-card" onclick="selectLocation('${locCode}')" data-location="${locCode}">
+                        <div class="icon">${loc.icon}</div>
+                        <div class="name">${loc.name}</div>
+                        <div class="description">${loc.description}</div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        function selectLocation(locCode) {
+            selectedLocation = locCode;
+
+            // Remove selected class from all cards
+            document.querySelectorAll('.location-card').forEach(card => {
+                card.classList.remove('selected');
+            });
+
+            // Add selected class to clicked card
+            const card = document.querySelector(`[data-location="${locCode}"]`);
+            if (card) {
+                card.classList.add('selected');
+            }
+
+            // Enable confirm button
+            document.getElementById('confirmBtn').disabled = false;
+        }
+
+        document.getElementById('confirmBtn').addEventListener('click', async () => {
+            if (!selectedLocation) return;
+
+            const confirmBtn = document.getElementById('confirmBtn');
+            const spinner = document.getElementById('loadingSpinner');
+
+            confirmBtn.disabled = true;
+            spinner.style.display = 'inline-block';
+
            try {
-                const response = await fetch(BASE_URL + '/api/select-location', {
+                const response = await fetch('/api/select-location', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
@@ -323,26 +347,21 @@
                const data = await response.json();

                if (data.status === 'success') {
-                    // Redirect to main app
-                    window.location.href = BASE_URL + '/';
+                    // Redirect to quiz page
+                    window.location.href = '{{ url_for("products.product_finder") }}';
                } else {
-                    showAlert(data.message || 'Error selecting location');
+                    showError(data.message || 'Error selecting location');
+                    confirmBtn.disabled = false;
+                    spinner.style.display = 'none';
                }
            } catch (error) {
-                showAlert('Error connecting to server. Please try again.');
+                showError('Error connecting to server');
+                confirmBtn.disabled = false;
+                spinner.style.display = 'none';
            }
        });

-        async function logout() {
-            try {
-                await fetch(BASE_URL + '/api/logout', { method: 'POST' });
-                window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Successfully logged out');
-            } catch (error) {
-                window.location.href = BASE_URL + '/login';
-            }
-        }
-
-        function showAlert(message) {
+        function showError(message) {
            const alert = document.getElementById('errorAlert');
            alert.textContent = message;
            alert.classList.add('show');
@@ -351,9 +370,6 @@
                alert.classList.remove('show');
            }, 5000);
        }
-
-        // Load location data on page load
-        loadLocationData();
    </script>
 </body>
 </html>