File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090016/Shirts 016/app.js

Back
// Default products with realistic photos and fallbacks const DEFAULT_PRODUCTS = [ { id: "p1", name: "เสื้อยืดสตรีทมินิมอล Streetwear Tee - Classic Black", price: 150, category: "tshirt", description: "เสื้อยืดสไตล์สตรีทมินิมอล ผ้า Cotton 100% เกรดพรีเมียม ระบายอากาศดี ทรง Oversize ใส่สบาย", sizes: ["S", "M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p2", name: "เสื้อยืดกราฟิก 90s Vintage Art Graphic Tee", price: 160, category: "tshirt", description: "เสื้อยืดลายกราฟิกสไตล์เรโทรยุค 90s ผ้าฟอกนุ่ม สกรีนคมชัดไม่หลุดลอก", sizes: ["S", "M", "L", "XL"], image: "https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p3", name: "เสื้อกีฬาออกกำลังกาย Active Quick-Dry Sport Tee", price: 120, category: "tshirt", description: "เสื้อยืดกีฬาเนื้อผ้า Micro-Polyester แห้งไว ระบายเหงื่อยอดเยี่ยม เหมาะสำหรับวิ่งและฟิตเนส", sizes: ["S", "M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1578587018452-892bacefd3f2?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p4", name: "เสื้อยืดเบสิก Basic Heavy Cotton Tee - Navy Blue", price: 100, category: "tshirt", description: "เสื้อยืดคอกลมสีพื้นเรียบหรู คอตตอนเนื้อหนาอยู่ทรง ใส่ได้ทุกวันแมตช์ง่าย", sizes: ["S", "M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1581655353564-df123a1eb820?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p5", name: "เสื้อเชิ้ตฮาวาย Vintage Hawaii Floral Shirt", price: 190, category: "shirt", description: "เสื้อเชิ้ตฮาวายลายดอกไม้วินเทจ เนื้อผ้าสปันนุ่มลื่น พริ้วไหว ใส่สบายคลายร้อน", sizes: ["M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1598033129183-c4f50c736f10?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p6", name: "เสื้อเชิ้ตทำงานพรีเมียม Oxford Slim Fit Shirt - White", price: 200, category: "shirt", description: "เสื้อเชิ้ตสีขาวผ้าอ็อกฟอร์ดพรีเมียม ทรงเข้ารูป คอปกสวยอยู่ทรง สุภาพและดูดี", sizes: ["S", "M", "L", "XL"], image: "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p7", name: "เสื้อเชิ้ตยีนส์ Denim Casual Workwear Shirt", price: 195, category: "shirt", description: "เสื้อเชิ้ตยีนส์เดนิมคลาสสิก แขนยาว ทรงสมาร์ทแคชชวล สวมทับหรือติดกระดุมก็เท่", sizes: ["M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1602810318383-e386cc2a3ccf?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p8", name: "เสื้อแจ็คเก็ตบอมเบอร์ Modern Bomber Jacket", price: 200, category: "jacket", description: "เสื้อแจ็คเก็ตสไตล์บอมเบอร์ กันลมและละอองน้ำ มีซับในนุ่ม กระเป๋าข้างใช้งานสะดวก", sizes: ["M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p9", name: "เสื้อฮู้ดดี้สตรีท Cozy Streetwear Hoodie", price: 190, category: "jacket", description: "เสื้อกันหนาวมีฮู้ด ผ้าฟลีซหนานุ่ม อบอุ่น ทรง Oversized สตรีทแวร์ยอดนิยม", sizes: ["M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1556905055-8f358a7a47b2?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p10", name: "เสื้อคลุมยีนส์ Retro Indigo Denim Jacket", price: 200, category: "jacket", description: "เสื้อแจ็คเก็ตยีนส์ฟอกวินเทจ คลาสสิกไร้กาลเวลา กระดุมโลหะ แข็งแรงทนทาน", sizes: ["S", "M", "L", "XL", "XXL"], image: "https://images.unsplash.com/photo-1576995853123-5a10305d93c0?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p11", name: "เข็มขัดหนังแท้วินเทจ Vintage Classic Leather Belt", price: 130, category: "other", description: "เข็มขัดหนังแท้คุณภาพสูง หัวเข็มขัดโลหะรมดำ แข็งแรง ทนทาน แมตช์ได้กับทุกชุด", sizes: ["S", "M", "L", "XL"], image: "https://images.unsplash.com/photo-1624222247344-550fb60583dc?auto=format&fit=crop&w=600&q=80", owner: "admin" }, { id: "p12", name: "หมวกแก๊ปสตรีทแวร์ Streetwear Cotton Baseball Cap", price: 110, category: "other", description: "หมวกแก๊ปผ้า Cotton 100% ทรงสวย ปีกหมวกกันแดดได้ดี สายปรับระดับกระชับศีรษะ", sizes: ["Free Size"], image: "https://images.unsplash.com/photo-1588850561407-ed78c282e89b?auto=format&fit=crop&w=600&q=80", owner: "admin" } ]; // App State let products = []; let cart = []; let currentUser = null; // { username: '...', role: 'user'\|'admin' } let currentCategoryFilter = "all"; let currentSearchQuery = ""; let uploadedImageBase64 = ""; let editUploadedImageBase64 = ""; // DOM Elements const productGridContainer = document.getElementById("product-grid-container"); const productTotalDisplay = document.getElementById("product-total-display"); const cartItemsList = document.getElementById("cart-items-list"); const cartTotalPrice = document.getElementById("cart-total-price"); const cartCountBadge = document.getElementById("cart-count"); // Sidebar & Modals const cartSidebar = document.getElementById("cart-sidebar"); const cartSidebarOverlay = document.getElementById("cart-sidebar-overlay"); const loginModal = document.getElementById("login-modal"); const addProductModal = document.getElementById("add-product-modal"); const editProductModal = document.getElementById("edit-product-modal"); // Auth display const authStatusContainer = document.getElementById("auth-status-container"); const userDisplay = document.getElementById("user-display"); const usernameDisplay = document.getElementById("username-display"); const btnLoginModal = document.getElementById("btn-login-modal"); const btnLogout = document.getElementById("btn-logout"); const btnAddProductModal = document.getElementById("btn-add-product-modal"); // Initialize Data function init() { // Load products with automatic fallback, update, and merge of default sample products const storedProducts = localStorage.getItem("shoptique_products"); if (storedProducts) { try { const parsed = JSON.parse(storedProducts); if (Array.isArray(parsed) && parsed.length > 0) { const defaultMap = new Map(DEFAULT_PRODUCTS.map(p => [p.id, p])); products = parsed.map(p => { if (defaultMap.has(p.id)) { return { ...p, price: defaultMap.get(p.id).price }; } return p; }); const existingIds = new Set(products.map(p => p.id)); const newDefaults = DEFAULT_PRODUCTS.filter(p => !existingIds.has(p.id)); products = [...products, ...newDefaults]; } else { products = [...DEFAULT_PRODUCTS]; } } catch (e) { products = [...DEFAULT_PRODUCTS]; } } else { products = [...DEFAULT_PRODUCTS]; } localStorage.setItem("shoptique_products", JSON.stringify(products)); // Load cart const storedCart = localStorage.getItem("shoptique_cart"); if (storedCart) { cart = JSON.parse(storedCart); } // Load user auth state (Default to admin for instant full access) const storedUser = localStorage.getItem("shoptique_user"); if (storedUser) { currentUser = JSON.parse(storedUser); } else { currentUser = { username: "admin", role: "admin" }; localStorage.setItem("shoptique_user", JSON.stringify(currentUser)); } updateAuthUI(); renderProducts(); renderCart(); setupEventListeners(); } // Update Auth UI elements based on currentUser state function updateAuthUI() { if (currentUser) { userDisplay.classList.remove("hidden-element"); usernameDisplay.textContent = currentUser.username + (currentUser.role === "admin" ? " (Admin)" : ""); btnLogout.classList.remove("hidden-element"); btnAddProductModal.classList.remove("hidden-element"); btnLoginModal.classList.add("hidden-element"); } else { userDisplay.classList.add("hidden-element"); btnLogout.classList.add("hidden-element"); btnAddProductModal.classList.add("hidden-element"); btnLoginModal.classList.remove("hidden-element"); } } // Render Products list with search and filter applied function renderProducts() { productGridContainer.innerHTML = ""; const filtered = products.filter(product => { const matchesCategory = currentCategoryFilter === "all" \|\| product.category === currentCategoryFilter; const matchesSearch = product.name.toLowerCase().includes(currentSearchQuery.toLowerCase()) \|\| (product.description && product.description.toLowerCase().includes(currentSearchQuery.toLowerCase())); return matchesCategory && matchesSearch; }); productTotalDisplay.textContent = `พบทั้งหมด ${filtered.length} รายการ`; if (filtered.length === 0) { productGridContainer.innerHTML = ` <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-secondary);"> <i class="fa-solid fa-shirt" style="font-size: 48px; opacity: 0.3; margin-bottom: 10px;"></i> <p>ไม่พบสินค้าที่คุณค้นหา</p> </div> `; return; } filtered.forEach(product => { const productCard = document.createElement("div"); productCard.className = "product-card"; // Size tags const sizeTagsHTML = product.sizes.map(size => `<span class="size-tag">${size}</span>`).join(""); // Size selector for adding to cart let sizeSelectOptionsHTML = product.sizes.map(size => `<option value="${size}">${size}</option>`).join(""); // Edit & Delete button permissions: admin or owner can manage const canManage = currentUser && (currentUser.role === "admin" \|\| product.owner === currentUser.username); const actionButtonsHTML = canManage ? ` <div class="card-actions-group"> <button class="edit-product-btn" data-id="${product.id}" title="แก้ไขสินค้านี้"> <i class="fa-solid fa-pen-to-square"></i> </button> <button class="delete-product-btn" data-id="${product.id}" title="ลบสินค้านี้"> <i class="fa-solid fa-trash-can"></i> </button> </div> ` : ""; productCard.innerHTML = ` ${actionButtonsHTML} <div class="product-image-container"> <img src="${product.image}" alt="${product.name}" class="product-img" loading="lazy" onerror="this.onerror=null; this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 300 300%22 width=%22300%22 height=%22300%22><rect width=%22300%22 height=%22300%22 fill=%22%23e2e8f0%22/><path d=%22M70,70 L110,30 L190,30 L230,70 L260,110 L220,130 L200,100 L200,250 L100,250 L100,100 L80,130 L40,110 Z%22 fill=%22%2394a3b8%22 stroke=%22%23ffffff%22 stroke-width=%223%22/><text x=%22150%22 y=%22160%22 fill=%22%23475569%22 font-family=%22sans-serif%22 font-size=%2218%22 font-weight=%22bold%22 text-anchor=%22middle%22>SHIRT</text></svg>';"> </div> <div class="product-info"> <h4 class="product-name">${product.name}</h4> <p class="product-desc">${product.description \|\| "ไม่มีรายละเอียดสินค้า"}</p> <div class="product-sizes"> ${sizeTagsHTML} </div> <div class="product-price-row"> <div> <span class="product-price">฿${product.price.toLocaleString()}</span> <div class="size-selector-dropdown"> <label style="font-size:10px; color:var(--text-secondary);">ไซส์: </label> <select class="size-select" id="size-select-${product.id}"> ${sizeSelectOptionsHTML} </select> </div> </div> <button class="btn-add-cart" data-id="${product.id}" title="เพิ่มลงตะกร้า"> <i class="fa-solid fa-cart-plus"></i> </button> </div> </div> `; productGridContainer.appendChild(productCard); }); // Attach click events to edit buttons document.querySelectorAll(".edit-product-btn").forEach(btn => { btn.addEventListener("click", (e) => { e.stopPropagation(); const id = btn.getAttribute("data-id"); openEditProductModal(id); }); }); // Attach click events to delete buttons document.querySelectorAll(".delete-product-btn").forEach(btn => { btn.addEventListener("click", (e) => { e.stopPropagation(); const id = btn.getAttribute("data-id"); deleteProduct(id); }); }); // Attach click events to add to cart buttons document.querySelectorAll(".btn-add-cart").forEach(btn => { btn.addEventListener("click", () => { const id = btn.getAttribute("data-id"); const sizeSelect = document.getElementById(`size-select-${id}`); const selectedSize = sizeSelect ? sizeSelect.value : "M"; addToCart(id, selectedSize); }); }); } // Add shirt to cart function addToCart(productId, size) { const product = products.find(p => p.id === productId); if (!product) return; // Check if same product and size already in cart const existingIndex = cart.findIndex(item => item.id === productId && item.size === size); if (existingIndex > -1) { cart[existingIndex].quantity += 1; } else { cart.push({ id: product.id, name: product.name, price: product.price, size: size, image: product.image, quantity: 1 }); } saveCart(); renderCart(); // Visual feedback - temporary open sidebar openCartSidebar(); } // Render shopping cart contents function renderCart() { cartItemsList.innerHTML = ""; let totalItems = 0; let totalPrice = 0; if (cart.length === 0) { cartItemsList.innerHTML = ` <div class="empty-cart-message"> <i class="fa-solid fa-cart-flatbed"></i> <p>ตะกร้าสินค้าของคุณยังว่างเปล่า</p> </div> `; cartCountBadge.textContent = "0"; cartTotalPrice.textContent = "฿0"; return; } cart.forEach((item, index) => { totalItems += item.quantity; totalPrice += item.price * item.quantity; const cartItemEl = document.createElement("div"); cartItemEl.className = "cart-item"; cartItemEl.innerHTML = ` <img src="${item.image}" alt="${item.name}" class="cart-item-img"> <div class="cart-item-info"> <h4 class="cart-item-name">${item.name}</h4> <div class="cart-item-meta">ไซส์: <strong>${item.size}</strong> \| ฿${item.price.toLocaleString()}</div> <div class="cart-item-controls"> <div class="qty-control"> <button class="qty-btn btn-qty-minus" data-index="${index}">-</button> <span class="qty-val">${item.quantity}</span> <button class="qty-btn btn-qty-plus" data-index="${index}">+</button> </div> <span class="cart-item-price">฿${(item.price * item.quantity).toLocaleString()}</span> <button class="remove-cart-item-btn" data-index="${index}" title="นำออก"> <i class="fa-solid fa-trash"></i> </button> </div> </div> `; cartItemsList.appendChild(cartItemEl); }); cartCountBadge.textContent = totalItems; cartTotalPrice.textContent = `฿${totalPrice.toLocaleString()}`; // Cart listeners document.querySelectorAll(".btn-qty-minus").forEach(btn => { btn.addEventListener("click", () => { const index = parseInt(btn.getAttribute("data-index")); updateCartQuantity(index, -1); }); }); document.querySelectorAll(".btn-qty-plus").forEach(btn => { btn.addEventListener("click", () => { const index = parseInt(btn.getAttribute("data-index")); updateCartQuantity(index, 1); }); }); document.querySelectorAll(".remove-cart-item-btn").forEach(btn => { btn.addEventListener("click", () => { const index = parseInt(btn.getAttribute("data-index")); removeFromCart(index); }); }); } function updateCartQuantity(index, change) { if (cart[index]) { cart[index].quantity += change; if (cart[index].quantity <= 0) { cart.splice(index, 1); } saveCart(); renderCart(); } } function removeFromCart(index) { if (cart[index]) { cart.splice(index, 1); saveCart(); renderCart(); } } function saveCart() { localStorage.setItem("shoptique_cart", JSON.stringify(cart)); } // Add a new product to list (Admin/Logged in users) function addProduct(name, price, category, description, sizes, imageBase64) { const newProduct = { id: "p_" + Date.now(), name: name, price: parseFloat(price), category: category, description: description, sizes: sizes, image: imageBase64 \|\| `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300"><rect width="300" height="300" fill="%23e0e0e0"/><text x="50%25" y="50%25" fill="%23888888" font-family="Arial" font-size="16" text-anchor="middle">No Image</text></svg>`, owner: currentUser ? currentUser.username : "guest" }; products.unshift(newProduct); localStorage.setItem("shoptique_products", JSON.stringify(products)); renderProducts(); } // Open Edit Product Modal and populate existing data function openEditProductModal(id) { const product = products.find(p => p.id === id); if (!product) return; if (!currentUser) { alert("กรุณาเข้าสู่ระบบก่อนดำเนินการแก้ไขสินค้า"); return; } if (currentUser.role !== "admin" && product.owner !== currentUser.username) { alert("คุณไม่มีสิทธิ์แก้ไขสินค้าของผู้อื่น"); return; } document.getElementById("edit-prod-id").value = product.id; document.getElementById("edit-prod-name").value = product.name; document.getElementById("edit-prod-price").value = product.price; document.getElementById("edit-prod-category").value = product.category; document.getElementById("edit-prod-description").value = product.description \|\| ""; // Set checkboxes const sizeCheckboxes = document.querySelectorAll('input[name="edit-sizes"]'); sizeCheckboxes.forEach(cb => { cb.checked = Array.isArray(product.sizes) && product.sizes.includes(cb.value); }); // Image preview const imagePreview = document.getElementById("edit-image-preview"); imagePreview.src = product.image; imagePreview.onerror = function() { this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="300" height="300"><rect width="300" height="300" fill="%23e2e8f0"/><path d="M70,70 L110,30 L190,30 L230,70 L260,110 L220,130 L200,100 L200,250 L100,250 L100,100 L80,130 L40,110 Z" fill="%2394a3b8" stroke="%23ffffff" stroke-width="3"/><text x="150" y="160" fill="%23475569" font-family="sans-serif" font-size="18" font-weight="bold" text-anchor="middle">SHIRT</text></svg>'; }; // Reset upload fields document.getElementById("edit-prod-image").value = ""; document.getElementById("edit-selected-file-info").textContent = ""; editUploadedImageBase64 = ""; openModal(editProductModal); } // Update existing product function updateProduct(id, name, price, category, description, sizes, newImageBase64) { const productIndex = products.findIndex(p => p.id === id); if (productIndex === -1) return; products[productIndex].name = name; products[productIndex].price = parseFloat(price); products[productIndex].category = category; products[productIndex].description = description; products[productIndex].sizes = sizes; if (newImageBase64) { products[productIndex].image = newImageBase64; } // Sync with cart if product is in cart cart.forEach(item => { if (item.id === id) { item.name = name; item.price = parseFloat(price); if (newImageBase64) item.image = newImageBase64; } }); saveCart(); renderCart(); localStorage.setItem("shoptique_products", JSON.stringify(products)); renderProducts(); } // Delete product function deleteProduct(id) { const product = products.find(p => p.id === id); if (!product) return; if (!currentUser) { alert("กรุณาเข้าสู่ระบบก่อนดำเนินการลบสินค้า"); return; } // Check delete permission (Admin can delete all, Owner can delete own) if (currentUser.role === "admin" \|\| product.owner === currentUser.username) { if (confirm(`คุณต้องการลบสินค้า "${product.name}" ใช่หรือไม่?`)) { products = products.filter(p => p.id !== id); localStorage.setItem("shoptique_products", JSON.stringify(products)); renderProducts(); } } else { alert("คุณไม่มีสิทธิ์ลบสินค้าของผู้อื่น"); } } // Sidebar open/close handlers function openCartSidebar() { cartSidebar.classList.add("open"); cartSidebarOverlay.classList.add("open"); } function closeCartSidebar() { cartSidebar.classList.remove("open"); cartSidebarOverlay.classList.remove("open"); } function openModal(modal) { modal.classList.add("open"); } function closeModal(modal) { modal.classList.remove("open"); } // Setup listeners function setupEventListeners() { // Logo Click (Reset Filters) document.getElementById("btn-logo-home").addEventListener("click", (e) => { e.preventDefault(); currentCategoryFilter = "all"; currentSearchQuery = ""; document.getElementById("search-input").value = ""; document.querySelectorAll(".category-btn").forEach(btn => btn.classList.remove("active")); document.querySelector('[data-category="all"]').classList.add("active"); renderProducts(); }); // Cart toggle document.getElementById("btn-open-cart").addEventListener("click", openCartSidebar); document.getElementById("btn-close-cart").addEventListener("click", closeCartSidebar); cartSidebarOverlay.addEventListener("click", closeCartSidebar); // Login modal toggles btnLoginModal.addEventListener("click", () => openModal(loginModal)); // Universal close buttons inside modals document.querySelectorAll(".modal-close-btn").forEach(btn => { btn.addEventListener("click", () => { closeModal(loginModal); closeModal(addProductModal); closeModal(editProductModal); }); }); // Click outside modal to close window.addEventListener("click", (e) => { if (e.target === loginModal) closeModal(loginModal); if (e.target === addProductModal) closeModal(addProductModal); if (e.target === editProductModal) closeModal(editProductModal); }); // Add Product Modal open btnAddProductModal.addEventListener("click", () => openModal(addProductModal)); // Handle Login submission document.getElementById("login-form").addEventListener("submit", (e) => { e.preventDefault(); const usernameVal = document.getElementById("login-username").value.trim(); const passwordVal = document.getElementById("login-password").value.trim(); if (usernameVal === "admin" && passwordVal === "123456") { currentUser = { username: "admin", role: "admin" }; } else if (usernameVal === "admin" && passwordVal !== "123456") { alert("รหัสผ่าน Admin ไม่ถูกต้อง!"); return; } else { // General user auto registration/login for ease of use currentUser = { username: usernameVal, role: "user" }; } localStorage.setItem("shoptique_user", JSON.stringify(currentUser)); updateAuthUI(); renderProducts(); closeModal(loginModal); // Clear login fields document.getElementById("login-username").value = ""; document.getElementById("login-password").value = ""; }); // Handle Logout btnLogout.addEventListener("click", () => { currentUser = null; localStorage.removeItem("shoptique_user"); updateAuthUI(); renderProducts(); }); // Handle Category clicks document.querySelectorAll(".category-btn").forEach(btn => { btn.addEventListener("click", () => { document.querySelectorAll(".category-btn").forEach(b => b.classList.remove("active")); btn.classList.add("active"); currentCategoryFilter = btn.getAttribute("data-category"); renderProducts(); }); }); // Handle Search input const searchInput = document.getElementById("search-input"); const searchBtn = document.getElementById("search-btn"); const performSearch = () => { currentSearchQuery = searchInput.value.trim(); renderProducts(); }; searchBtn.addEventListener("click", performSearch); searchInput.addEventListener("keyup", (e) => { if (e.key === "Enter") { performSearch(); } }); // Handle Add Product Image file input parsing const fileInput = document.getElementById("prod-image"); const uploadBtn = document.getElementById("upload-placeholder-btn"); const selectedFileInfo = document.getElementById("selected-file-info"); uploadBtn.addEventListener("click", () => fileInput.click()); fileInput.addEventListener("change", (e) => { const file = e.target.files[0]; if (file) { selectedFileInfo.textContent = `ไฟล์ที่เลือก: ${file.name}`; const reader = new FileReader(); reader.onload = function(event) { uploadedImageBase64 = event.target.result; }; reader.readAsDataURL(file); } else { selectedFileInfo.textContent = ""; uploadedImageBase64 = ""; } }); // Handle Edit Product Image file input parsing const editFileInput = document.getElementById("edit-prod-image"); const editUploadBtn = document.getElementById("edit-upload-placeholder-btn"); const editSelectedFileInfo = document.getElementById("edit-selected-file-info"); const editImagePreview = document.getElementById("edit-image-preview"); if (editUploadBtn && editFileInput) { editUploadBtn.addEventListener("click", () => editFileInput.click()); editFileInput.addEventListener("change", (e) => { const file = e.target.files[0]; if (file) { editSelectedFileInfo.textContent = `ไฟล์ใหม่: ${file.name}`; const reader = new FileReader(); reader.onload = function(event) { editUploadedImageBase64 = event.target.result; editImagePreview.src = event.target.result; }; reader.readAsDataURL(file); } else { editSelectedFileInfo.textContent = ""; editUploadedImageBase64 = ""; } }); } // Handle Add Product Submission document.getElementById("add-product-form").addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("prod-name").value.trim(); const price = document.getElementById("prod-price").value.trim(); const category = document.getElementById("prod-category").value; const description = document.getElementById("prod-description").value.trim(); // Get size checkboxes checked const sizeCheckboxes = document.querySelectorAll('input[name="sizes"]:checked'); const sizes = Array.from(sizeCheckboxes).map(cb => cb.value); if (sizes.length === 0) { alert("กรุณาเลือกไซส์เสื้อผ้าอย่างน้อย 1 ไซส์"); return; } if (!uploadedImageBase64) { alert("กรุณาอัปโหลดรูปภาพตัวอย่างสินค้า"); return; } addProduct(name, price, category, description, sizes, uploadedImageBase64); // Reset form & states document.getElementById("add-product-form").reset(); selectedFileInfo.textContent = ""; uploadedImageBase64 = ""; closeModal(addProductModal); alert("เพิ่มสินค้าเรียบร้อยแล้ว!"); }); // Handle Edit Product Submission const editProductForm = document.getElementById("edit-product-form"); if (editProductForm) { editProductForm.addEventListener("submit", (e) => { e.preventDefault(); const id = document.getElementById("edit-prod-id").value; const name = document.getElementById("edit-prod-name").value.trim(); const price = document.getElementById("edit-prod-price").value.trim(); const category = document.getElementById("edit-prod-category").value; const description = document.getElementById("edit-prod-description").value.trim(); const sizeCheckboxes = document.querySelectorAll('input[name="edit-sizes"]:checked'); const sizes = Array.from(sizeCheckboxes).map(cb => cb.value); if (sizes.length === 0) { alert("กรุณาเลือกไซส์เสื้อผ้าอย่างน้อย 1 ไซส์"); return; } updateProduct(id, name, price, category, description, sizes, editUploadedImageBase64); closeModal(editProductModal); alert("แก้ไขข้อมูลสินค้าเรียบร้อยแล้ว!"); }); } // Checkout button alert document.getElementById("btn-checkout").addEventListener("click", () => { alert("ขอบคุณสำหรับการทดสอบสั่งซื้อ! ระบบชำระเงินจำลองยังไม่ได้เชื่อมต่อจริง"); }); } // Launch application on DOM Content Loaded document.addEventListener("DOMContentLoaded", init);

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.29 | proxy | phpinfo | Settings