Jason
804 lines
30 KiB
HTML
804 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Manager - CGW</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;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
padding: 40px;
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-section {
|
|
margin-bottom: 30px;
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.form-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: #555;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
label .optional {
|
|
color: #999;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type="text"],
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.note {
|
|
background: #fff9e6;
|
|
border-left: 4px solid #ffd700;
|
|
padding: 10px 15px;
|
|
margin-bottom: 15px;
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.product-codes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.type-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.radio-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.radio-option input[type="radio"] {
|
|
width: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio-option label {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.dynamic-section {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dynamic-section.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 30px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #5568d3;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #e0e0e0;
|
|
color: #333;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #ff4757;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #e84052;
|
|
}
|
|
|
|
.nav-links {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
margin-right: 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.status-default {
|
|
background: #4caf50;
|
|
}
|
|
|
|
.status-discontinued {
|
|
background: #ff4757;
|
|
}
|
|
|
|
.status-hidden {
|
|
background: #ffa502;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.type-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.product-codes-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.product-codes-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="nav-links">
|
|
<a href="{{ url_for('home') }}">← Back to Home</a>
|
|
<a href="/quiz/">Product Finder</a>
|
|
<a href="{{ url_for('products.product_list') }}">Product Manager</a>
|
|
</div>
|
|
|
|
<h1>Product Manager</h1>
|
|
<p class="subtitle">Add or edit product information</p>
|
|
|
|
<form id="productForm">
|
|
<!-- Product Location & Description -->
|
|
<div class="form-section">
|
|
<div class="form-group">
|
|
<label for="location">Product Location:</label>
|
|
<select id="location" name="location" required>
|
|
<option value="">Select location...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" placeholder="Enter product description"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="status">Status</label>
|
|
<select id="status" name="status">
|
|
<option value="default">Default</option>
|
|
<option value="discontinued">Discontinued</option>
|
|
<option value="hidden">Hide</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Codes -->
|
|
<div class="form-section">
|
|
<div class="section-title">Product Codes</div>
|
|
|
|
<div class="form-group">
|
|
<label for="standardCode">Standardized Code <span class="optional">(auto-generated from selections below)</span></label>
|
|
<input type="text" id="standardCode" name="standardCode" placeholder="Select type and modifiers to generate" readonly style="background-color: #f5f5f5;">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="baseCode">Base Code <span class="optional">(optional - e.g., 2000, 3000)</span></label>
|
|
<input type="text" id="baseCode" name="baseCode" placeholder="Enter base product code">
|
|
</div>
|
|
|
|
<div class="product-codes-grid" id="locationCodesContainer">
|
|
<!-- Dynamic location code fields will be inserted here based on user's accessible locations -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Type -->
|
|
<div class="form-section">
|
|
<div class="section-title">Product Type</div>
|
|
|
|
<div class="type-group">
|
|
<div class="form-group">
|
|
<label for="productType">Type</label>
|
|
<select id="productType" name="productType">
|
|
<option value="">Select type...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="productGroup">Group [Category]</label>
|
|
<input type="text" id="productGroup" name="productGroup" placeholder="" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Prefixes -->
|
|
<div class="form-section dynamic-section hidden" id="prefixesSection">
|
|
<div class="section-title">Code Prefixes</div>
|
|
<div class="radio-group" id="prefixesContainer">
|
|
<!-- Dynamic prefix options will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Suffixes -->
|
|
<div class="form-section dynamic-section hidden" id="suffixesSection">
|
|
<div class="section-title">Code Suffixes</div>
|
|
<div style="margin-bottom: 10px; font-size: 13px; color: #666;">Select all that apply (multiple selections allowed)</div>
|
|
<div class="radio-group" id="suffixesContainer">
|
|
<!-- Dynamic suffix options will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Materials -->
|
|
<div class="form-section dynamic-section hidden" id="materialsSection">
|
|
<div class="section-title">Materials</div>
|
|
<div class="radio-group" id="materialsContainer">
|
|
<!-- Dynamic material options will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colors -->
|
|
<div class="form-section dynamic-section hidden" id="colorsSection">
|
|
<div class="section-title">Colors</div>
|
|
<div class="radio-group" id="colorsContainer">
|
|
<!-- Dynamic color options will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Options -->
|
|
<div class="form-section dynamic-section hidden" id="additionalOptionsSection">
|
|
<div class="section-title">Additional Options</div>
|
|
<div class="radio-group" id="additionalOptionsContainer">
|
|
<!-- Dynamic additional options will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="button-group">
|
|
<button type="submit" class="btn-primary">Save Product</button>
|
|
<button type="button" class="btn-secondary" onclick="resetForm()">Clear Form</button>
|
|
<button type="button" class="btn-danger" onclick="deleteProduct()">Delete Product</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
let productAttributes = null;
|
|
let userAccessibleLocations = [];
|
|
|
|
// Load product attributes and user locations
|
|
async function loadProductAttributes() {
|
|
try {
|
|
const response = await fetch('/quiz/data/product_attributes.json');
|
|
productAttributes = await response.json();
|
|
|
|
// Get user's accessible locations from session
|
|
await fetchUserLocations();
|
|
|
|
initializeForm();
|
|
} catch (error) {
|
|
console.error('Error loading product attributes:', error);
|
|
alert('Failed to load product attributes');
|
|
}
|
|
}
|
|
|
|
// Fetch user's accessible locations from session
|
|
async function fetchUserLocations() {
|
|
try {
|
|
const response = await fetch('/quiz/api/user-session');
|
|
const userData = await response.json();
|
|
userAccessibleLocations = userData.accessibleLocations || [];
|
|
|
|
// If user has no accessible locations, default to their current location
|
|
if (userAccessibleLocations.length === 0 && userData.currentLocation) {
|
|
userAccessibleLocations = [userData.currentLocation];
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching user locations:', error);
|
|
// Fallback to all location codes if API fails
|
|
userAccessibleLocations = productAttributes.locations.map(loc => loc.code);
|
|
}
|
|
}
|
|
|
|
// Initialize form with data
|
|
function initializeForm() {
|
|
// Populate locations based on user's access
|
|
// Match user's accessible location codes with full location details
|
|
const locationSelect = document.getElementById('location');
|
|
|
|
productAttributes.locations.forEach(loc => {
|
|
// Check if user has access to this location code
|
|
if (userAccessibleLocations.includes(loc.code)) {
|
|
const option = document.createElement('option');
|
|
option.value = loc.code;
|
|
option.textContent = loc.name;
|
|
locationSelect.appendChild(option);
|
|
}
|
|
});
|
|
|
|
// Initialize location code fields with user's accessible locations
|
|
updateLocationCodes();
|
|
|
|
// Populate product types
|
|
const typeSelect = document.getElementById('productType');
|
|
productAttributes.productTypes.forEach(type => {
|
|
const option = document.createElement('option');
|
|
option.value = type.id;
|
|
option.textContent = type.type;
|
|
option.dataset.category = type.category;
|
|
option.dataset.basetype = type.baseType;
|
|
option.dataset.materials = JSON.stringify(type.availableMaterials);
|
|
option.dataset.colors = JSON.stringify(type.availableColors);
|
|
option.dataset.options = JSON.stringify(type.additionalOptions);
|
|
typeSelect.appendChild(option);
|
|
});
|
|
|
|
// Setup event listeners
|
|
document.getElementById('productType').addEventListener('change', updateDynamicSections);
|
|
document.getElementById('baseCode').addEventListener('input', updateStandardizedCode);
|
|
}
|
|
|
|
// Update location code fields based on user's accessible locations
|
|
function updateLocationCodes() {
|
|
const container = document.getElementById('locationCodesContainer');
|
|
container.innerHTML = '';
|
|
|
|
// Get full location details for each accessible code
|
|
userAccessibleLocations.forEach(locCode => {
|
|
const locationDetails = productAttributes.locations.find(loc => loc.code === locCode);
|
|
if (locationDetails) {
|
|
const div = document.createElement('div');
|
|
div.className = 'form-group';
|
|
div.innerHTML = `
|
|
<label for="code_${locCode}">${locationDetails.name} code</label>
|
|
<input type="text" id="code_${locCode}" name="code_${locCode}" placeholder="">
|
|
`;
|
|
container.appendChild(div);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Update dynamic sections based on product type
|
|
function updateDynamicSections() {
|
|
const typeSelect = document.getElementById('productType');
|
|
const selectedOption = typeSelect.options[typeSelect.selectedIndex];
|
|
|
|
if (!selectedOption.value) {
|
|
hideAllDynamicSections();
|
|
return;
|
|
}
|
|
|
|
// Update category
|
|
document.getElementById('productGroup').value = selectedOption.dataset.category || '';
|
|
|
|
// Get the baseType from the selected option
|
|
const baseType = selectedOption.dataset.basetype || '';
|
|
|
|
// Update code prefixes
|
|
if (baseType && productAttributes.codeModifiers && productAttributes.codeModifiers.prefixes) {
|
|
const applicablePrefixes = productAttributes.codeModifiers.prefixes.filter(
|
|
p => p.appliesTo.includes(baseType)
|
|
);
|
|
if (applicablePrefixes.length > 0) {
|
|
showPrefixesSection(applicablePrefixes);
|
|
} else {
|
|
hidePrefixesSection();
|
|
}
|
|
} else {
|
|
hidePrefixesSection();
|
|
}
|
|
|
|
// Update code suffixes
|
|
if (baseType && productAttributes.codeModifiers && productAttributes.codeModifiers.suffixes) {
|
|
const applicableSuffixes = productAttributes.codeModifiers.suffixes.filter(
|
|
s => s.appliesTo.includes(baseType)
|
|
);
|
|
if (applicableSuffixes.length > 0) {
|
|
showSuffixesSection(applicableSuffixes);
|
|
} else {
|
|
hideSuffixesSection();
|
|
}
|
|
} else {
|
|
hideSuffixesSection();
|
|
}
|
|
|
|
// Update materials
|
|
const materials = JSON.parse(selectedOption.dataset.materials || '[]');
|
|
if (materials.length > 0) {
|
|
showMaterialsSection(materials);
|
|
} else {
|
|
hideMaterialsSection();
|
|
}
|
|
|
|
// Update colors
|
|
const colors = JSON.parse(selectedOption.dataset.colors || '[]');
|
|
if (colors.length > 0) {
|
|
showColorsSection(colors);
|
|
} else {
|
|
hideColorsSection();
|
|
}
|
|
|
|
// Update additional options
|
|
const options = JSON.parse(selectedOption.dataset.options || '[]');
|
|
if (options.length > 0) {
|
|
showAdditionalOptionsSection(options);
|
|
} else {
|
|
hideAdditionalOptionsSection();
|
|
}
|
|
}
|
|
|
|
// Show/hide dynamic sections
|
|
function showMaterialsSection(materials) {
|
|
const section = document.getElementById('materialsSection');
|
|
const container = document.getElementById('materialsContainer');
|
|
container.innerHTML = '';
|
|
|
|
materials.forEach((material, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'radio-option';
|
|
div.innerHTML = `
|
|
<input type="radio" id="material_${index}" name="material" value="${material}" ${index === 0 ? 'checked' : ''}>
|
|
<label for="material_${index}">${material}</label>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
section.classList.remove('hidden');
|
|
}
|
|
|
|
function hideMaterialsSection() {
|
|
document.getElementById('materialsSection').classList.add('hidden');
|
|
}
|
|
|
|
function showColorsSection(colors) {
|
|
const section = document.getElementById('colorsSection');
|
|
const container = document.getElementById('colorsContainer');
|
|
container.innerHTML = '';
|
|
|
|
colors.forEach((color, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'radio-option';
|
|
div.innerHTML = `
|
|
<input type="radio" id="color_${index}" name="color" value="${color}" ${index === 0 ? 'checked' : ''}>
|
|
<label for="color_${index}">${color}</label>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
section.classList.remove('hidden');
|
|
}
|
|
|
|
function hideColorsSection() {
|
|
document.getElementById('colorsSection').classList.add('hidden');
|
|
}
|
|
|
|
function showAdditionalOptionsSection(options) {
|
|
const section = document.getElementById('additionalOptionsSection');
|
|
const container = document.getElementById('additionalOptionsContainer');
|
|
container.innerHTML = '';
|
|
|
|
options.forEach((option, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'radio-option';
|
|
div.innerHTML = `
|
|
<input type="radio" id="option_${index}" name="additionalOption" value="${option}" ${index === 0 ? 'checked' : ''}>
|
|
<label for="option_${index}">${option}</label>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
section.classList.remove('hidden');
|
|
}
|
|
|
|
function hideAdditionalOptionsSection() {
|
|
document.getElementById('additionalOptionsSection').classList.add('hidden');
|
|
}
|
|
|
|
function showPrefixesSection(prefixes) {
|
|
const section = document.getElementById('prefixesSection');
|
|
const container = document.getElementById('prefixesContainer');
|
|
container.innerHTML = '';
|
|
|
|
// Add "None" option first
|
|
const noneDiv = document.createElement('div');
|
|
noneDiv.className = 'radio-option';
|
|
noneDiv.innerHTML = `
|
|
<input type="radio" id="prefix_none" name="codePrefix" value="" checked onchange="updateStandardizedCode()">
|
|
<label for="prefix_none">None</label>
|
|
`;
|
|
container.appendChild(noneDiv);
|
|
|
|
prefixes.forEach((prefix, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'radio-option';
|
|
div.innerHTML = `
|
|
<input type="radio" id="prefix_${index}" name="codePrefix" value="${prefix.value}" onchange="updateStandardizedCode()" title="${prefix.description}">
|
|
<label for="prefix_${index}">${prefix.label}</label>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
section.classList.remove('hidden');
|
|
}
|
|
|
|
function hidePrefixesSection() {
|
|
document.getElementById('prefixesSection').classList.add('hidden');
|
|
}
|
|
|
|
function showSuffixesSection(suffixes) {
|
|
const section = document.getElementById('suffixesSection');
|
|
const container = document.getElementById('suffixesContainer');
|
|
container.innerHTML = '';
|
|
|
|
suffixes.forEach((suffix, index) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'radio-option';
|
|
div.innerHTML = `
|
|
<input type="checkbox" id="suffix_${index}" name="codeSuffix" value="${suffix.value}" onchange="updateStandardizedCode()" title="${suffix.description}">
|
|
<label for="suffix_${index}">${suffix.label}</label>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
|
|
section.classList.remove('hidden');
|
|
}
|
|
|
|
function hideSuffixesSection() {
|
|
document.getElementById('suffixesSection').classList.add('hidden');
|
|
}
|
|
|
|
function updateStandardizedCode() {
|
|
const baseCode = document.getElementById('baseCode').value.trim();
|
|
|
|
// Get selected prefix
|
|
const prefixRadio = document.querySelector('input[name="codePrefix"]:checked');
|
|
const prefix = prefixRadio ? prefixRadio.value : '';
|
|
|
|
// Get selected suffixes (checkboxes)
|
|
const suffixCheckboxes = document.querySelectorAll('input[name="codeSuffix"]:checked');
|
|
const suffixes = Array.from(suffixCheckboxes).map(cb => cb.value);
|
|
|
|
// Build the standardized code
|
|
let standardizedCode = '';
|
|
if (baseCode) {
|
|
standardizedCode = prefix + baseCode;
|
|
if (suffixes.length > 0) {
|
|
standardizedCode += suffixes.join('');
|
|
}
|
|
}
|
|
|
|
document.getElementById('standardCode').value = standardizedCode;
|
|
}
|
|
|
|
function hideAllDynamicSections() {
|
|
document.getElementById('prefixesSection').classList.add('hidden');
|
|
document.getElementById('suffixesSection').classList.add('hidden');
|
|
document.getElementById('materialsSection').classList.add('hidden');
|
|
document.getElementById('colorsSection').classList.add('hidden');
|
|
document.getElementById('additionalOptionsSection').classList.add('hidden');
|
|
document.getElementById('additionalOptionsSection').classList.add('hidden');
|
|
document.getElementById('productGroup').value = '';
|
|
}
|
|
|
|
// Form submission
|
|
document.getElementById('productForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
// Get selected prefix
|
|
const selectedPrefix = document.querySelector('input[name="codePrefix"]:checked');
|
|
const codePrefix = selectedPrefix ? selectedPrefix.value : '';
|
|
|
|
// Get selected suffixes
|
|
const selectedSuffixes = Array.from(document.querySelectorAll('input[name="codeSuffix"]:checked'))
|
|
.map(cb => cb.value);
|
|
|
|
const productData = {
|
|
location: formData.get('location'),
|
|
description: formData.get('description'),
|
|
status: formData.get('status'),
|
|
baseCode: formData.get('baseCode'),
|
|
standardCode: formData.get('standardCode'),
|
|
codePrefix: codePrefix,
|
|
codeSuffixes: selectedSuffixes,
|
|
locationCodes: {},
|
|
productType: formData.get('productType'),
|
|
category: formData.get('productGroup'),
|
|
material: formData.get('material'),
|
|
color: formData.get('color'),
|
|
additionalOption: formData.get('additionalOption')
|
|
};
|
|
|
|
// Collect location codes for user's accessible locations
|
|
userAccessibleLocations.forEach(locCode => {
|
|
const code = formData.get(`code_${locCode}`);
|
|
if (code) {
|
|
productData.locationCodes[locCode] = code;
|
|
}
|
|
});
|
|
|
|
console.log('Product Data:', productData);
|
|
|
|
// Here you would send the data to your backend
|
|
// For now, just show an alert
|
|
alert('Product saved! (This is a demo - in production, this would save to the database)');
|
|
});
|
|
|
|
// Utility functions
|
|
function resetForm() {
|
|
document.getElementById('productForm').reset();
|
|
hideAllDynamicSections();
|
|
}
|
|
|
|
function deleteProduct() {
|
|
if (confirm('Are you sure you want to delete this product?')) {
|
|
alert('Product deleted! (This is a demo)');
|
|
resetForm();
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await loadProductAttributes();
|
|
|
|
// Check if a product code was passed via URL parameter
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const productCode = urlParams.get('product');
|
|
if (productCode) {
|
|
await loadProductByCode(productCode);
|
|
}
|
|
});
|
|
|
|
// Load a product by its code
|
|
async function loadProductByCode(productCode) {
|
|
try {
|
|
const response = await fetch(`/quiz/api/products/${encodeURIComponent(productCode)}`);
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'success' && data.product) {
|
|
// Populate the form with the product data
|
|
const product = data.product;
|
|
|
|
// Fill in basic fields
|
|
document.getElementById('location').value = product.location || '';
|
|
document.getElementById('description').value = product.description || '';
|
|
document.getElementById('productCode').value = product.productCode || '';
|
|
document.getElementById('category').value = product.category || '';
|
|
|
|
// Set discontinued status
|
|
document.getElementById('discontinued').checked = product.discontinued || false;
|
|
|
|
// Note: You may need to add more field mappings based on your form structure
|
|
// This is a basic implementation to get started
|
|
|
|
console.log('Loaded product:', product);
|
|
} else {
|
|
console.error('Product not found:', productCode);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading product:', error);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|