463 lines
17 KiB
HTML
463 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Đăng ký Công trình - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="project-submission-list.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Đăng ký Công trình</h1>
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<form id="projectForm" class="space-y-4">
|
|
<!-- Basic Information -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin cơ bản</h3>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Tên công trình <span class="text-red-500">*</span></label>
|
|
<input type="text" class="form-input" id="projectName" placeholder="Nhập tên công trình" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Địa chỉ <span class="text-red-500">*</span></label>
|
|
<textarea class="form-input" id="projectAddress" rows="2" placeholder="Nhập địa chỉ đầy đủ" required></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Chủ đầu tư <span class="text-red-500">*</span></label>
|
|
<input type="text" class="form-input" id="projectOwner" placeholder="Tên chủ đầu tư" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Đơn vị thiết kế</label>
|
|
<input type="text" class="form-input" id="designUnit" placeholder="Tên đơn vị thiết kế">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Đơn vị thi công</label>
|
|
<input type="text" class="form-input" id="designUnit" placeholder="Tên đơn vị thi công">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Details -->
|
|
<div class="card">
|
|
<h3 class="card-title">Chi tiết dự án</h3>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Tổng diện tích<span class="text-red-500">*</span></label>
|
|
<input type="text" class="form-input" id="projectOwner" placeholder="Nhập diện tích m²" required>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Sản phẩm đưa vào thiết kế <span class="text-red-500">*</span></label>
|
|
<textarea class="form-input" id="projectProducts" rows="4" placeholder="Liệt kê các sản phẩm gạch đã sử dụng trong công trình (tên sản phẩm, mã SP, số lượng...)" required></textarea>
|
|
<small class="text-gray-500">Ví dụ: Gạch granite 60x60 - GP-001 - 100m², Gạch mosaic - MS-002 - 50m²</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Tiến độ công trình <span class="text-red-500">*</span></label>
|
|
<select class="form-input" id="projectProgress" onchange="toggleStartDateField()" required>
|
|
<option value="">Chọn tiến độ</option>
|
|
<option value="not-started">Chưa khởi công</option>
|
|
<option value="foundation">Khởi công móng</option>
|
|
<option value="rough-construction">Đang phần thô</option>
|
|
<option value="finishing">Đang hoàn thiện</option>
|
|
<option value="topped-out">Cất nóc</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="startDateGroup" style="display: none;">
|
|
<label class="form-label">Ngày dự kiến khởi công</label>
|
|
<input type="date" class="form-input" id="expectedStartDate">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin bổ sung</h3>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Mô tả công trình</label>
|
|
<textarea class="form-input" id="projectDescription" rows="3" placeholder="Mô tả ngắn gọn về công trình, diện tích, đặc điểm nổi bật..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Upload -->
|
|
<div class="card">
|
|
<h3 class="card-title">Ảnh minh chứng</h3>
|
|
|
|
<div class="upload-area" id="uploadArea">
|
|
<div class="upload-content">
|
|
<i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
|
|
<p class="text-lg font-medium">Kéo thả ảnh vào đây</p>
|
|
<p class="text-gray-500">hoặc nhấn để chọn file</p>
|
|
<input type="file" id="fileInput" multiple accept="image/*,.pdf" style="display: none;">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="fileList" class="file-list mt-4"></div>
|
|
|
|
<small class="text-gray-500 mt-2 block">
|
|
Hỗ trợ: JPG, PNG, PDF. Tối đa 10MB mỗi file.
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="form-actions">
|
|
<!--<button type="button" class="btn btn-secondary" onclick="resetForm()">
|
|
<i class="fas fa-redo"></i> Nhập lại
|
|
</button>-->
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane"></i> Gửi đăng ký
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content info-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Hướng dẫn đăng ký</h3>
|
|
<button class="modal-close" onclick="closeInfoModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Đăng ký Công trình:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Điền đầy đủ thông tin công trình theo yêu cầu</li>
|
|
<li>Upload ảnh minh chứng chất lượng cao</li>
|
|
<li>Mô tả chi tiết sản phẩm đã sử dụng</li>
|
|
<li>Chọn đúng tiến độ hiện tại của công trình</li>
|
|
<li>Kiểm tra kỹ thông tin trước khi gửi</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.upload-area {
|
|
border: 2px dashed #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
border-color: #005B9A;
|
|
background: #f8f9ff;
|
|
}
|
|
|
|
.upload-area.dragover {
|
|
border-color: #005B9A;
|
|
background: #f0f7ff;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px;
|
|
background: #f8f9fa;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.file-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-size {
|
|
font-size: 12px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.remove-file {
|
|
background: none;
|
|
border: none;
|
|
color: #ef4444;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text-red-500 {
|
|
color: #ef4444;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let uploadedFiles = [];
|
|
|
|
// Initialize page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupFileUpload();
|
|
setupFormValidation();
|
|
});
|
|
|
|
function setupFileUpload() {
|
|
const uploadArea = document.getElementById('uploadArea');
|
|
const fileInput = document.getElementById('fileInput');
|
|
|
|
// Click to upload
|
|
uploadArea.addEventListener('click', () => fileInput.click());
|
|
|
|
// File input change
|
|
fileInput.addEventListener('change', handleFileSelect);
|
|
|
|
// Drag and drop
|
|
uploadArea.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.add('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('dragleave', () => {
|
|
uploadArea.classList.remove('dragover');
|
|
});
|
|
|
|
uploadArea.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
uploadArea.classList.remove('dragover');
|
|
const files = Array.from(e.dataTransfer.files);
|
|
processFiles(files);
|
|
});
|
|
}
|
|
|
|
function handleFileSelect(e) {
|
|
const files = Array.from(e.target.files);
|
|
processFiles(files);
|
|
}
|
|
|
|
function processFiles(files) {
|
|
files.forEach(file => {
|
|
if (validateFile(file)) {
|
|
uploadedFiles.push(file);
|
|
displayFile(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
function validateFile(file) {
|
|
const maxSize = 10 * 1024 * 1024; // 10MB
|
|
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'application/pdf'];
|
|
|
|
if (file.size > maxSize) {
|
|
alert(`File ${file.name} quá lớn. Tối đa 10MB.`);
|
|
return false;
|
|
}
|
|
|
|
if (!allowedTypes.includes(file.type)) {
|
|
alert(`File ${file.name} không đúng định dạng.`);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function displayFile(file) {
|
|
const fileList = document.getElementById('fileList');
|
|
const fileItem = document.createElement('div');
|
|
fileItem.className = 'file-item';
|
|
|
|
const fileSize = (file.size / 1024 / 1024).toFixed(2);
|
|
|
|
fileItem.innerHTML = `
|
|
<div class="file-info">
|
|
<i class="fas ${getFileIcon(file.type)} text-blue-500"></i>
|
|
<div>
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">${fileSize}MB</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="remove-file" onclick="removeFile('${file.name}')">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
`;
|
|
|
|
fileList.appendChild(fileItem);
|
|
}
|
|
|
|
function getFileIcon(fileType) {
|
|
if (fileType.startsWith('image/')) return 'fa-image';
|
|
if (fileType === 'application/pdf') return 'fa-file-pdf';
|
|
return 'fa-file';
|
|
}
|
|
|
|
function removeFile(fileName) {
|
|
uploadedFiles = uploadedFiles.filter(file => file.name !== fileName);
|
|
renderFileList();
|
|
}
|
|
|
|
function renderFileList() {
|
|
const fileList = document.getElementById('fileList');
|
|
fileList.innerHTML = '';
|
|
uploadedFiles.forEach(displayFile);
|
|
}
|
|
|
|
function toggleStartDateField() {
|
|
const select = document.getElementById('projectProgress');
|
|
const startDateGroup = document.getElementById('startDateGroup');
|
|
|
|
if (select.value === 'not-started') {
|
|
startDateGroup.style.display = 'block';
|
|
} else {
|
|
startDateGroup.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function setupFormValidation() {
|
|
const form = document.getElementById('projectForm');
|
|
form.addEventListener('submit', handleFormSubmit);
|
|
}
|
|
|
|
function handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
// Validate required fields
|
|
const requiredFields = ['projectName', 'projectAddress', 'projectOwner', 'projectProducts', 'projectProgress'];
|
|
let isValid = true;
|
|
|
|
requiredFields.forEach(fieldId => {
|
|
const field = document.getElementById(fieldId);
|
|
if (!field.value.trim()) {
|
|
field.classList.add('border-red-500');
|
|
isValid = false;
|
|
} else {
|
|
field.classList.remove('border-red-500');
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
alert('Vui lòng điền đầy đủ các trường bắt buộc!');
|
|
return;
|
|
}
|
|
|
|
// Show success message
|
|
if (confirm('Xác nhận gửi đăng ký công trình?')) {
|
|
alert('Đăng ký công trình đã được gửi thành công!\nChúng tôi sẽ xem xét và liên hệ với bạn sớm nhất.');
|
|
window.location.href = 'project-submission-list.html';
|
|
}
|
|
}
|
|
|
|
function resetForm() {
|
|
if (confirm('Bạn có chắc muốn nhập lại toàn bộ thông tin?')) {
|
|
document.getElementById('projectForm').reset();
|
|
uploadedFiles = [];
|
|
renderFileList();
|
|
document.getElementById('startDateGroup').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |