Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>{{ title }}</title> | |
| <style> | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 2em; background-color: #f8f9fa; color: #333; } | |
| .container { max-width: 700px; margin: auto; background-color: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } | |
| h1 { color: #005c9e; } | |
| .form-group { margin-bottom: 1.5em; } | |
| label { display: block; margin-bottom: 0.5em; font-weight: bold; } | |
| input[type="url"], select { width: 100%; padding: 0.8em; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } | |
| .btn { display: inline-block; padding: 0.8em 1.5em; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; text-align: center; font-size: 1em; } | |
| .btn:hover { background-color: #0056b3; } | |
| .alert { padding: 1em; margin-bottom: 1em; border-radius: 5px; border: 1px solid transparent; } | |
| .alert-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; } | |
| .alert-error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; } | |
| #image_preview { max-width: 200px; max-height: 200px; margin-top: 1em; border-radius: 4px; border: 1px solid #ddd; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>{{ title }}</h1> | |
| <!-- Display flashed messages --> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, message in messages %} | |
| <div class="alert alert-{{ category }}">{{ message }}</div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <form action="{{ url_for('xero.edit_inventory') }}" method="post"> | |
| <div class="form-group"> | |
| <label for="product_code">Select Product:</label> | |
| <select name="product_code" id="product_code" required> | |
| <option value="">-- Please choose a product --</option> | |
| {% for product in products %} | |
| <option value="{{ product.code }}">{{ product.name }} (Code: {{ product.code }})</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="image_url">New Image URL:</label> | |
| <input type="url" name="image_url" id="image_url" placeholder="https://example.com/new_image.jpg" required> | |
| </div> | |
| <div class="form-group"> | |
| <p><strong>Current Image:</strong> <span id="current_url_display">N/A</span></p> | |
| <img id="image_preview" src="" alt="Image Preview" style="display: none;"> | |
| </div> | |
| <button type="submit" class="btn">Update Image</button> | |
| </form> | |
| </div> | |
| <script> | |
| // Safely pass product data from Flask to JavaScript | |
| const products = {{ products|tojson }}; | |
| const productSelect = document.getElementById('product_code'); | |
| const currentUrlSpan = document.getElementById('current_url_display'); | |
| const imagePreview = document.getElementById('image_preview'); | |
| productSelect.addEventListener('change', (event) => { | |
| const selectedCode = event.target.value; | |
| // Reset if no product is selected | |
| if (!selectedCode) { | |
| currentUrlSpan.textContent = 'N/A'; | |
| imagePreview.style.display = 'none'; | |
| imagePreview.src = ''; | |
| return; | |
| } | |
| // Find the selected product from our data | |
| const selectedProduct = products.find(p => p.code === selectedCode); | |
| if (selectedProduct && selectedProduct.image_url) { | |
| currentUrlSpan.textContent = selectedProduct.image_url; | |
| imagePreview.src = selectedProduct.image_url; | |
| imagePreview.style.display = 'block'; | |
| } else { | |
| currentUrlSpan.textContent = 'No image URL set.'; | |
| imagePreview.style.display = 'none'; | |
| imagePreview.src = ''; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |