Pre-github
This commit is contained in:
Jason
@@ -1,77 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - Page Not Found</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
padding: 60px 40px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<p>Sorry, the page you're looking for doesn't exist or has been moved.</p>
|
||||
<a href="/" class="button">Go Home</a>
|
||||
<a href="/quiz" class="button" style="margin-left: 10px;">Start Quiz</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,133 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Access Denied - CGW Product Finder</title>
|
||||
<style>
|
||||
* {
|
||||
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%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.access-denied-container {
|
||||
background: white;
|
||||
padding: 50px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f56565;
|
||||
margin-bottom: 15px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
margin: 10px 5px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e0e0e0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="access-denied-container">
|
||||
<div class="icon">🚫</div>
|
||||
<h1>Access Denied</h1>
|
||||
<p class="message">
|
||||
You do not have permission to access this page or perform this action.
|
||||
</p>
|
||||
|
||||
{% if required_permission %}
|
||||
<div class="permission-info">
|
||||
Required Permission: <strong>{{ required_permission }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p class="message">
|
||||
If you believe this is an error, please contact your administrator.
|
||||
</p>
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<a href="javascript:history.back()" class="btn btn-secondary">← Go Back</a>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-primary">Return to Home</a>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
Need help? Contact your system administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,381 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dynamic Image Generation - Test Page</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-container h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
max-height: 500px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.control-group select,
|
||||
.control-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #e3f2fd;
|
||||
border-left: 4px solid #2196F3;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-box h4 {
|
||||
color: #1976D2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.url-display {
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #ffebee;
|
||||
border-left: 4px solid #f44336;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎨 Dynamic Image Generation API</h1>
|
||||
<p class="subtitle">Test the product image generation endpoints</p>
|
||||
|
||||
<div class="info-box">
|
||||
<h4>How It Works</h4>
|
||||
<p>
|
||||
This demo uses server-side image processing to dynamically generate product images
|
||||
with different colors and configurations. Select options below to see the image update in real-time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<h3>Product Configuration</h3>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="product-select">Product:</label>
|
||||
<select id="product-select">
|
||||
<option value="cobrai">COBRAI - Storm Door</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="color-select">Color:</label>
|
||||
<select id="color-select">
|
||||
<option value="white">White</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="bronze">Bronze</option>
|
||||
<option value="sandstone">Sandstone</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Hinge Location:</label>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input type="radio" name="hinge" value="right" checked>
|
||||
Right Hinge
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="hinge" value="left">
|
||||
Left Hinge
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>
|
||||
<input type="checkbox" id="cache-checkbox" checked>
|
||||
Use Cache
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button onclick="updateImages()">🔄 Update Images</button>
|
||||
<button onclick="clearCache()">🗑️ Clear Cache</button>
|
||||
<button onclick="getConfig()">📋 Get Config</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="image-container">
|
||||
<h3>Direct Image URL Method</h3>
|
||||
<p style="color: #666; font-size: 14px; margin-bottom: 10px;">
|
||||
Using: <code><img src="..."></code>
|
||||
</p>
|
||||
<img id="direct-image" class="product-image" src="" alt="Product">
|
||||
<div class="url-display" id="direct-url">Loading...</div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<h3>JSON/Base64 Method</h3>
|
||||
<p style="color: #666; font-size: 14px; margin-bottom: 10px;">
|
||||
Using: <code>fetch() + base64</code>
|
||||
</p>
|
||||
<img id="json-image" class="product-image" src="" alt="Product">
|
||||
<div class="url-display" id="json-url">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error-box" style="display: none;" class="error"></div>
|
||||
|
||||
<div id="config-box" style="display: none; margin-top: 20px;">
|
||||
<h3>Product Configuration</h3>
|
||||
<pre id="config-display" style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow-x: auto;"></pre>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
|
||||
<h3>API Endpoints Used</h3>
|
||||
<ul style="line-height: 2;">
|
||||
<li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}</code></li>
|
||||
<li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}&format=json</code></li>
|
||||
<li><code>GET /api/product-config/{product}</code></li>
|
||||
<li><code>POST /api/clear-image-cache</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize on load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
updateImages();
|
||||
});
|
||||
|
||||
// Auto-update when controls change
|
||||
document.getElementById('product-select').addEventListener('change', updateImages);
|
||||
document.getElementById('color-select').addEventListener('change', updateImages);
|
||||
document.querySelectorAll('[name="hinge"]').forEach(radio => {
|
||||
radio.addEventListener('change', updateImages);
|
||||
});
|
||||
|
||||
function updateImages() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
const color = document.getElementById('color-select').value;
|
||||
const hinge = document.querySelector('[name="hinge"]:checked').value;
|
||||
const useCache = document.getElementById('cache-checkbox').checked;
|
||||
|
||||
hideError();
|
||||
|
||||
// Method 1: Direct image URL
|
||||
updateDirectImage(product, color, hinge, useCache);
|
||||
|
||||
// Method 2: JSON with base64
|
||||
updateJsonImage(product, color, hinge, useCache);
|
||||
}
|
||||
|
||||
function updateDirectImage(product, color, hinge, useCache) {
|
||||
const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&cache=${useCache}`;
|
||||
|
||||
const img = document.getElementById('direct-image');
|
||||
img.src = url;
|
||||
|
||||
document.getElementById('direct-url').textContent = url;
|
||||
}
|
||||
|
||||
async function updateJsonImage(product, color, hinge, useCache) {
|
||||
const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&format=json&cache=${useCache}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
document.getElementById('json-image').src = data.image;
|
||||
document.getElementById('json-url').textContent = url;
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function getConfig() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
const url = `/api/product-config/${product}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
document.getElementById('config-display').textContent =
|
||||
JSON.stringify(data.config, null, 2);
|
||||
document.getElementById('config-box').style.display = 'block';
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function clearCache() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/clear-image-cache', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ productCode: product })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
alert(data.message);
|
||||
updateImages();
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const errorBox = document.getElementById('error-box');
|
||||
errorBox.textContent = message;
|
||||
errorBox.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
document.getElementById('error-box').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,230 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Details Form</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #d0d0ff;
|
||||
border: 1px solid #333;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #b0b0ff;
|
||||
}
|
||||
|
||||
.specifications-section {
|
||||
border: 3px solid #4CAF50;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #f0fff0;
|
||||
}
|
||||
|
||||
.specifications-section.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conditional-field {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conditional-field.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spec-row label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.spec-row input {
|
||||
border: 1px solid #333;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.questions-section {
|
||||
border: 1px solid #333;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.questions-section p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.questions-section .placeholder {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-group">
|
||||
<label>Type (door, window, other)</label>
|
||||
<select id="typeSelect" onchange="toggleOtherField()">
|
||||
<option value="">-- Select Type --</option>
|
||||
<option value="door">Door</option>
|
||||
<option value="window">Window</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group conditional-field" id="otherField">
|
||||
<label>Please specify</label>
|
||||
<input type="text" placeholder="Enter type details">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<textarea placeholder="textfield"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Notes</label>
|
||||
<textarea placeholder="textfield"></textarea>
|
||||
</div>
|
||||
|
||||
<button onclick="toggleSpecifications()">Match and Review</button>
|
||||
|
||||
<div class="specifications-section hidden" id="specificationsSection">
|
||||
<div class="spec-row">
|
||||
<label>Product Code:</label>
|
||||
<input type="text" placeholder="" readonly>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Width:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Height</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Color</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Frame:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Screen:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Etc...</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Quantity</label>
|
||||
<input type="number" min="1" value="1" placeholder="">
|
||||
</div>
|
||||
|
||||
<button>Confirm and Add</button>
|
||||
|
||||
<div class="questions-section">
|
||||
<p>Possible questions for customers based on what is selected or missing</p>
|
||||
<div class="placeholder">[list - checkbox per question]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSpecifications() {
|
||||
const section = document.getElementById('specificationsSection');
|
||||
section.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function toggleOtherField() {
|
||||
const typeSelect = document.getElementById('typeSelect');
|
||||
const otherField = document.getElementById('otherField');
|
||||
|
||||
if (typeSelect.value === 'other') {
|
||||
otherField.classList.add('visible');
|
||||
} else {
|
||||
otherField.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,75 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Finder</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Product Finder</h1>
|
||||
<div class="user-info-bar" id="userInfoBar">
|
||||
<span id="userLocationInfo"></span>
|
||||
<button onclick="logout()" class="logout-btn">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
Start
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<!-- Content will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
// Load user session info
|
||||
async function loadUserInfo() {
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/session');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
const locationNames = {
|
||||
'LINDS': 'Lindsborg',
|
||||
'IOLA': 'Iola',
|
||||
'KC': 'KC',
|
||||
'BMD': 'BMD'
|
||||
};
|
||||
|
||||
const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
|
||||
document.getElementById('userLocationInfo').textContent =
|
||||
`👤 ${data.username} | 📍 ${currentLoc}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading user info:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
if (confirm('Are you sure you want to log out?')) {
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load user info when page loads
|
||||
loadUserInfo();
|
||||
</script>
|
||||
<script>
|
||||
// Pass BASE_URL to script.js by setting it as a window variable
|
||||
window.APP_BASE_URL = BASE_URL;
|
||||
</script>
|
||||
<script src="{{ url_for('serve_js', filename='script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,14 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - CGW Product Finder</title>
|
||||
<title>Login</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%);
|
||||
@@ -113,27 +109,6 @@
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #bee3f8;
|
||||
color: #2c5282;
|
||||
border-left: 4px solid #4299e1;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
@@ -156,7 +131,7 @@
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h1>🔐 CGW Product Finder</h1>
|
||||
<h1>🔐 Login</h1>
|
||||
<p>Please sign in to continue</p>
|
||||
</div>
|
||||
|
||||
@@ -180,16 +155,9 @@
|
||||
<span class="loading-spinner" id="loadingSpinner"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ url_for('user_manager') }}">User Management</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -198,12 +166,11 @@
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const spinner = document.getElementById('loadingSpinner');
|
||||
|
||||
// Disable button and show spinner
|
||||
loginBtn.disabled = true;
|
||||
spinner.style.display = 'inline-block';
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/login', {
|
||||
const response = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -216,11 +183,9 @@
|
||||
if (data.status === 'success') {
|
||||
// Check if user needs to select a location
|
||||
if (data.requiresLocationSelection) {
|
||||
// Redirect to location selection page
|
||||
window.location.href = '/select-location';
|
||||
window.location.href = '{{ url_for("auth.select_location_page") }}';
|
||||
} else {
|
||||
// Redirect to main app
|
||||
window.location.href = '/';
|
||||
window.location.href = '{{ url_for("products.product_finder") }}';
|
||||
}
|
||||
} else {
|
||||
showAlert(data.message || 'Invalid username or password');
|
||||
@@ -243,13 +208,6 @@
|
||||
alert.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Check if there's a message in URL (e.g., after logout)
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const message = urlParams.get('message');
|
||||
if (message) {
|
||||
showAlert(message);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<title>Product Finder</title>
|
||||
<link rel="stylesheet" href="{{ url_for('products.serve_css', filename='styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Product Finder</h1>
|
||||
</div>
|
||||
|
||||
<div class="user-info-bar" id="userInfoBar">
|
||||
<span id="userLocationInfo"></span>
|
||||
<a href="{{ url_for('auth.logout') }}" class="logout-btn" title="Logout"
|
||||
onclick="return confirm('Are you sure you want to log out?');"
|
||||
style="background: none; border: none; cursor: pointer; font-size: 16px; text-decoration: none; display: inline-block; padding: 8px 12px;">🚪</a>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
Start
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<!-- Content will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls
|
||||
const BASE_URL = '';
|
||||
|
||||
// Load user session info
|
||||
async function loadUserInfo() {
|
||||
try {
|
||||
const response = await fetch('/api/session');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
const locationNames = {
|
||||
'LINDS': 'Lindsborg',
|
||||
'IOLA': 'Iola',
|
||||
'KC': 'Kansas City',
|
||||
'BMD': 'BMD'
|
||||
};
|
||||
|
||||
const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
|
||||
const canChangeLocation = data.accessibleLocations && data.accessibleLocations.length > 1;
|
||||
|
||||
let locationDisplay;
|
||||
if (canChangeLocation) {
|
||||
locationDisplay = `<a href="{{ url_for('auth.select_location_page') }}" style="color: #6a4c93; text-decoration: none; font-weight: 500; cursor: pointer;"
|
||||
onmouseover="this.style.textDecoration='underline'"
|
||||
onmouseout="this.style.textDecoration='none'"
|
||||
title="Click to change location">📍 ${currentLoc}</a>`;
|
||||
} else {
|
||||
locationDisplay = `📍 ${currentLoc}`;
|
||||
}
|
||||
|
||||
document.getElementById('userLocationInfo').innerHTML =
|
||||
`👤 ${data.username} | ${locationDisplay}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading user info:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load user info when page loads
|
||||
loadUserInfo();
|
||||
</script>
|
||||
<script>
|
||||
// Pass BASE_URL to script.js by setting it as a window variable
|
||||
window.APP_BASE_URL = '';
|
||||
// Set data path for the quiz
|
||||
window.DATA_PATH = '{{ url_for("products.serve_data", filename="") }}';
|
||||
</script>
|
||||
<script src="{{ url_for('products.serve_js', filename='script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
+201
-185
@@ -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>
|
||||
|
||||
+272
-720
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user