renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update point

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-12-04 11:43:27 +07:00
parent d4de557662
commit b9b6d91a87
6 changed files with 1724 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

340
html/points-record.html
View File

@@ -319,7 +319,124 @@
color: #0369a1;
}
.product-row {
background: #f8f9fa;
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
position: relative;
}
.product-row-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px dashed #ddd;
}
.product-row-title {
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
}
.btn-remove-product {
background: #fee2e2;
color: #dc2626;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
}
.btn-remove-product:hover {
background: #fecaca;
}
.product-input-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.product-input-full {
grid-column: 1 / -1;
}
.product-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
display: block;
}
.product-label.required::after {
content: " *";
color: var(--danger-color);
}
.product-subtotal {
background: #eff6ff;
border: 2px dashed #005B9A;
border-radius: 8px;
padding: 12px;
text-align: center;
}
.product-subtotal-label {
font-size: 12px;
color: #666;
margin-bottom: 4px;
}
.product-subtotal-value {
font-size: 18px;
font-weight: 700;
color: #005B9A;
}
.btn-add-product {
width: 100%;
background: white;
border: 2px dashed var(--primary-color);
color: var(--primary-color);
padding: 14px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-add-product:hover {
background: #eff6ff;
border-color: var(--primary-dark);
}
.summary-card {
background: linear-gradient(135deg, #eff6ff, #dbeafe);
border: 2px solid #005B9A;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
}
@media (max-width: 480px) {
.product-input-group {
grid-template-columns: 1fr;
}
.content {
padding: 0.75rem;
}
@@ -403,44 +520,9 @@
placeholder="Nhập số hóa đơn (nếu có)"
onchange="validateForm()">
</div>
<!-- Total Amount -->
<div class="form-group">
<label class="form-label required">Tổng giá trị đơn hàng (VNĐ)</label>
<input type="number"
class="form-input"
id="totalAmount"
placeholder="0"
min="0"
step="1000"
required
oninput="calculatePoints(); validateForm()">
</div>
<!-- Points Estimate -->
<!--<div class="points-estimate" id="pointsEstimate">
<div class="estimate-title">Điểm dự kiến nhận được</div>
<div class="estimate-text" id="estimateText">0 điểm</div>
</div>-->
<!-- Products Purchased -->
<!--<div class="form-group">
<label class="form-label">Sản phẩm đã mua</label>
<textarea class="form-input form-textarea"
id="products"
placeholder="Mô tả các sản phẩm đã mua (tùy chọn)"
rows="3"></textarea>
</div>-->
<!-- Points Estimate -->
<div class="points-estimate" id="pointsEstimate">
<div class="estimate-title">Điểm dự kiến nhận được</div>
<div class="estimate-text" id="estimateText">0 điểm</div>
</div>
<!-- Company Information -->
<div class="form-group">
<label class="form-label">Tên công ty</label>
<label class="form-label">Tên đơn vị mua hàng</label>
<input type="text"
class="form-input"
id="companyName"
@@ -454,26 +536,41 @@
id="taxCode"
placeholder="Nhập mã số thuế (nếu có)">
</div>
<!-- Dynamic Product List -->
<div class="form-group">
<label class="form-label">Số lượng (m²) đã mua</label>
<input type="number"
class="form-input"
id="squareMeters"
placeholder="0"
min="0"
step="0.01">
<label class="form-label required">Danh sách sản phẩm</label>
<div id="productsList">
<!-- Product rows will be added here dynamically -->
</div>
<button type="button" onclick="addProductRow()" class="btn-add-product">
<i class="fas fa-plus-circle"></i>
Thêm sản phẩm
</button>
</div>
<!-- Products Purchased -->
<div class="form-group">
<label class="form-label">Sản phẩm đã mua</label>
<textarea class="form-input form-textarea"
id="products"
placeholder="Mô tả các sản phẩm đã mua (tùy chọn)"
rows="3"></textarea>
<!-- Order Summary (Auto-calculated) -->
<div class="summary-card">
<h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px;">
<i class="fas fa-calculator" style="color: #005B9A; margin-right: 8px;"></i>
Tổng kết đơn hàng
</h3>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px dashed #e5e7eb;">
<span style="color: #666; font-size: 15px;">Tổng số lượng:</span>
<span id="totalSquareMeters" style="color: #333; font-weight: 600; font-size: 15px;">0 m²</span>
</div>
<div style="display: flex; justify-content: space-between;">
<span style="color: #666; font-size: 15px;">Tổng giá trị đơn hàng:</span>
<span id="totalAmount" style="color: #005B9A; font-weight: 700; font-size: 18px;">0 đ</span>
</div>
</div>
</div>
<!-- Points Estimate -->
<div class="points-estimate" id="pointsEstimate">
<div class="estimate-title">Điểm dự kiến nhận được</div>
<div class="estimate-text" id="estimateText">0 điểm</div>
</div>
<!-- Invoice Images -->
<div class="form-group">
@@ -504,13 +601,13 @@
</div>
<!-- Additional Notes -->
<div class="form-group">
<!--<div class="form-group">
<label class="form-label">Ghi chú thêm</label>
<textarea class="form-input form-textarea"
id="notes"
placeholder="Ghi chú thêm về đơn hàng (tùy chọn)"
rows="3"></textarea>
</div>
</div>-->
<!-- Submit Button -->
<button type="submit" class="submit-button" id="submitButton" disabled>
@@ -523,26 +620,153 @@
<script>
let selectedFiles = [];
let productCounter = 0;
let products = [];
// Set max date to today
document.getElementById('purchaseDate').max = new Date().toISOString().split('T')[0];
// Add first product row on page load
window.addEventListener('DOMContentLoaded', function() {
addProductRow();
});
function goBack() {
window.history.back();
}
function addProductRow() {
productCounter++;
const productsList = document.getElementById('productsList');
const productRow = document.createElement('div');
productRow.className = 'product-row';
productRow.id = `product-${productCounter}`;
productRow.innerHTML = `
<div class="product-row-header">
<span class="product-row-title">
<i class="fas fa-box"></i> Sản phẩm #${productCounter}
</span>
<button type="button" onclick="removeProductRow(${productCounter})" class="btn-remove-product">
<i class="fas fa-trash"></i> Xóa
</button>
</div>
<div class="product-input-full">
<label class="product-label required">Tên sản phẩm</label>
<input type="text"
class="form-input"
id="productName-${productCounter}"
placeholder="Ví dụ: Gạch Granite 60x60"
required
onchange="updateCalculations()">
</div>
<div class="product-input-group">
<div>
<label class="product-label required">Số lượng (m²)</label>
<input type="number"
class="form-input"
id="productQty-${productCounter}"
placeholder="0"
min="0"
step="0.01"
required
oninput="updateCalculations()">
</div>
<div>
<label class="product-label required">Đơn giá (VNĐ/m²)</label>
<input type="number"
class="form-input"
id="productPrice-${productCounter}"
placeholder="0"
min="0"
step="1000"
required
oninput="updateCalculations()">
</div>
</div>
<div class="product-subtotal">
<div class="product-subtotal-label">Thành tiền</div>
<div class="product-subtotal-value" id="productSubtotal-${productCounter}">0 đ</div>
</div>
`;
productsList.appendChild(productRow);
products.push(productCounter);
updateCalculations();
}
function removeProductRow(id) {
if (products.length <= 1) {
alert('Cần ít nhất một sản phẩm!');
return;
}
const row = document.getElementById(`product-${id}`);
if (row) {
row.remove();
products = products.filter(p => p !== id);
updateCalculations();
}
}
function updateCalculations() {
let totalQty = 0;
let totalValue = 0;
products.forEach(id => {
const qtyInput = document.getElementById(`productQty-${id}`);
const priceInput = document.getElementById(`productPrice-${id}`);
const subtotalEl = document.getElementById(`productSubtotal-${id}`);
if (qtyInput && priceInput && subtotalEl) {
const qty = parseFloat(qtyInput.value) || 0;
const price = parseFloat(priceInput.value) || 0;
const subtotal = qty * price;
totalQty += qty;
totalValue += subtotal;
subtotalEl.textContent = formatCurrency(subtotal);
}
});
// Update summary
document.getElementById('totalSquareMeters').textContent = totalQty.toFixed(2) + ' m²';
document.getElementById('totalAmount').textContent = formatCurrency(totalValue);
// Calculate points
calculatePoints(totalValue);
validateForm();
}
function formatCurrency(value) {
return new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: 'VND',
minimumFractionDigits: 0
}).format(value);
}
function validateForm() {
const purchaseDate = document.getElementById('purchaseDate').value;
const storeLocation = document.getElementById('storeLocation').value;
const totalAmount = document.getElementById('totalAmount').value;
const hasFiles = selectedFiles.length > 0;
// Check if at least one product is filled
let hasValidProduct = false;
products.forEach(id => {
const name = document.getElementById(`productName-${id}`).value;
const qty = document.getElementById(`productQty-${id}`).value;
const price = document.getElementById(`productPrice-${id}`).value;
if (name && qty && price) {
hasValidProduct = true;
}
});
const isValid = purchaseDate && storeLocation && totalAmount && hasFiles;
const isValid = purchaseDate && hasValidProduct && hasFiles;
document.getElementById('submitButton').disabled = !isValid;
}
function calculatePoints() {
const totalAmount = document.getElementById('totalAmount').value;
function calculatePoints(totalAmount) {
const pointsEstimate = document.getElementById('pointsEstimate');
const estimateText = document.getElementById('estimateText');