uodate create/detail - no upload file
This commit is contained in:
Phuoc Nguyen
@@ -49,6 +49,8 @@
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
@@ -66,32 +68,93 @@
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
/* Description List Styles */
|
||||
.description-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
text-align: center;
|
||||
padding: 16px 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
.description-item {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
.description-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.description-label {
|
||||
flex-shrink: 0;
|
||||
width: 120px;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
.description-value {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* Floor Plan Styles */
|
||||
.floor-plan-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.floor-plan-thumbnail {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.floor-plan-thumbnail:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.floor-plan-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.floor-plan-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 91, 154, 0.85);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.floor-plan-thumbnail:hover .floor-plan-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.floor-plan-overlay i {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.floor-plan-overlay span {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
@@ -302,17 +365,13 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
.description-item {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
.description-label {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@@ -343,27 +402,31 @@
|
||||
<span class="status-badge" id="status-badge">Hoàn thành</span>
|
||||
</div>
|
||||
|
||||
<!-- Project Info Grid -->
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">Diện tích</div>
|
||||
<div class="info-value" id="project-area">120m²</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Phong cách</div>
|
||||
<div class="info-value" id="project-style">Hiện đại</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Project Info - Simple Description List -->
|
||||
<div class="detail-section" style="margin-bottom: 0;">
|
||||
<dl class="description-list">
|
||||
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">Ngân sách</div>
|
||||
<div class="info-value" id="project-budget">300-500 triệu</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">Trạng thái</div>
|
||||
<div class="info-value" id="project-status">Đã hoàn thành</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-info-circle" style="color: #2563eb;"></i>
|
||||
Thông tin thiết kế
|
||||
</h3>
|
||||
|
||||
<dl class="description-list">
|
||||
<div class="description-item">
|
||||
<dt class="description-label">Tên công trình:</dt>
|
||||
<dd class="description-value" id="project-name">Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)</dd>
|
||||
</div>
|
||||
<div class="description-item">
|
||||
<dt class="description-label">Mô tả chi tiết:</dt>
|
||||
<dd class="description-value" id="project-notes">
|
||||
Diện tích: 85 m² <br>
|
||||
Khu vực: Hồ Chí Minh <br>
|
||||
Phong cách mong muốn: Hiện đại <br>
|
||||
Ngân sách dự kiến: Trao đổi trực tiếp <br>
|
||||
Yêu cầu chi tiết: Thiết kế với 4 phòng ngủ, 3 phòng tắm, phòng khách rộng rãi và khu bếp mở. Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -379,40 +442,8 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Project Details -->
|
||||
<!-- Floor Plan Image -->
|
||||
<div class="detail-card">
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-info-circle" style="color: #2563eb;"></i>
|
||||
Thông tin dự án
|
||||
</h3>
|
||||
<div class="section-content">
|
||||
<p><strong>Tên dự án:</strong> <span id="project-name">Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-edit" style="color: #2563eb;"></i>
|
||||
Mô tả yêu cầu
|
||||
</h3>
|
||||
<div class="section-content" id="project-description">
|
||||
Thiết kế nhà phố 3 tầng phong cách hiện đại với 4 phòng ngủ, 3 phòng tắm, phòng khách rộng rãi và khu bếp mở.
|
||||
Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng. Tầng 1: garage, phòng khách, bếp.
|
||||
Tầng 2: 2 phòng ngủ, 2 phòng tắm. Tầng 3: phòng ngủ master, phòng làm việc, sân thượng.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-phone" style="color: #2563eb;"></i>
|
||||
Thông tin liên hệ
|
||||
</h3>
|
||||
<div class="section-content" id="contact-info">
|
||||
SĐT: 0901234567 | Email: minh.nguyen@email.com
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-paperclip" style="color: #2563eb;"></i>
|
||||
@@ -440,7 +471,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Status Timeline -->
|
||||
<div class="detail-card">
|
||||
<!--<div class="detail-card">
|
||||
<h3 class="section-title">
|
||||
<i class="fas fa-history" style="color: #2563eb;"></i>
|
||||
Lịch sử trạng thái
|
||||
@@ -491,14 +522,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-secondary" onclick="editRequest()">
|
||||
<!--<button class="btn btn-secondary" onclick="editRequest()">
|
||||
<i class="fas fa-edit"></i>
|
||||
Chỉnh sửa
|
||||
</button>
|
||||
</button>-->
|
||||
<button class="btn btn-primary" onclick="contactSupport()">
|
||||
<i class="fas fa-comments"></i>
|
||||
Liên hệ
|
||||
@@ -536,28 +567,26 @@
|
||||
const requestDatabase = {
|
||||
'YC001': {
|
||||
id: 'YC001',
|
||||
status: 'completed',
|
||||
statusText: 'Đã hoàn thành',
|
||||
name: 'Thiết kế nhà phố 3 tầng - Anh Minh (Quận 7)',
|
||||
area: '120m²',
|
||||
style: 'Hiện đại',
|
||||
budget: '300-500 triệu',
|
||||
status: 'completed',
|
||||
statusText: 'Đã hoàn thành',
|
||||
description: 'Thiết kế nhà phố 3 tầng phong cách hiện đại với 4 phòng ngủ, 3 phòng tắm, phòng khách rộng rãi và khu bếp mở. Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng. Tầng 1: garage, phòng khách, bếp. Tầng 2: 2 phòng ngủ, 2 phòng tắm. Tầng 3: phòng ngủ master, phòng làm việc, sân thượng.',
|
||||
contact: 'SĐT: 0901234567 | Email: minh.nguyen@email.com',
|
||||
notes: 'Ưu tiên sử dụng gạch men màu sáng để tạo cảm giác thoáng đãng.',
|
||||
createdDate: '20/10/2024',
|
||||
files: ['mat-bang-hien-tai.jpg', 'ban-ve-kien-truc.dwg'],
|
||||
designLink: 'https://example.com/3d-design/YC001'
|
||||
},
|
||||
'YC002': {
|
||||
id: 'YC002',
|
||||
status: 'designing',
|
||||
statusText: 'Đang thiết kế',
|
||||
name: 'Cải tạo căn hộ chung cư - Chị Lan (Quận 2)',
|
||||
area: '85m²',
|
||||
style: 'Scandinavian',
|
||||
budget: '100-300 triệu',
|
||||
status: 'designing',
|
||||
statusText: 'Đang thiết kế',
|
||||
description: 'Cải tạo căn hộ chung cư 3PN theo phong cách Scandinavian. Tối ưu không gian lưu trữ, sử dụng gạch men màu sáng và gỗ tự nhiên.',
|
||||
contact: 'SĐT: 0987654321',
|
||||
notes: 'Tối ưu không gian lưu trữ, sử dụng gạch men màu sáng và gỗ tự nhiên.',
|
||||
createdDate: '25/10/2024',
|
||||
files: ['hinh-anh-hien-trang.jpg'],
|
||||
designLink: null
|
||||
@@ -565,13 +594,12 @@
|
||||
'YC003': {
|
||||
id: 'YC003',
|
||||
name: 'Thiết kế biệt thự 2 tầng - Anh Đức (Bình Dương)',
|
||||
status: 'pending',
|
||||
statusText: 'Chờ tiếp nhận',
|
||||
area: '200m²',
|
||||
style: 'Luxury',
|
||||
budget: 'Trên 1 tỷ',
|
||||
status: 'pending',
|
||||
statusText: 'Chờ tiếp nhận',
|
||||
description: 'Thiết kế biệt thự 2 tầng phong cách luxury với hồ bơi và sân vườn. 5 phòng ngủ, 4 phòng tắm, phòng giải trí và garage 2 xe.',
|
||||
contact: 'SĐT: 0923456789 | Email: duc.le@gmail.com',
|
||||
notes: 'Thiết kế biệt thự có hồ bơi và sân vườn, 5 phòng ngủ, garage 2 xe.',
|
||||
createdDate: '28/10/2024',
|
||||
files: ['mat-bang-dat.pdf', 'y-tuong-thiet-ke.jpg'],
|
||||
designLink: null
|
||||
@@ -615,10 +643,8 @@
|
||||
document.getElementById('project-name').textContent = request.name;
|
||||
document.getElementById('project-area').textContent = request.area;
|
||||
document.getElementById('project-style').textContent = request.style;
|
||||
document.getElementById('project-budget').textContent = request.budget;
|
||||
document.getElementById('project-status').textContent = request.statusText;
|
||||
document.getElementById('project-description').textContent = request.description;
|
||||
document.getElementById('contact-info').textContent = request.contact;
|
||||
document.getElementById('project-budget').textContent = request.budget + ' VNĐ';
|
||||
document.getElementById('project-notes').textContent = request.notes || 'Không có ghi chú đặc biệt';
|
||||
|
||||
// Update status badge
|
||||
const statusBadge = document.getElementById('status-badge');
|
||||
@@ -633,8 +659,7 @@
|
||||
completionHighlight.style.display = 'none';
|
||||
}
|
||||
|
||||
// Update files list
|
||||
updateFilesList(request.files);
|
||||
// Floor plan image - removed files list
|
||||
|
||||
// Update page title
|
||||
document.title = `${request.id} - Chi tiết Yêu cầu Thiết kế`;
|
||||
@@ -643,37 +668,12 @@
|
||||
window.currentDesignLink = request.designLink;
|
||||
}
|
||||
|
||||
function updateFilesList(files) {
|
||||
const filesList = document.getElementById('files-list');
|
||||
|
||||
if (!files || files.length === 0) {
|
||||
filesList.innerHTML = '<p style="color: #6b7280; font-style: italic;">Không có tài liệu đính kèm</p>';
|
||||
return;
|
||||
function viewFloorPlan() {
|
||||
// In real app, open lightbox or full-screen image viewer
|
||||
const img = document.querySelector('.floor-plan-image');
|
||||
if (img && img.src) {
|
||||
window.open(img.src, '_blank');
|
||||
}
|
||||
|
||||
filesList.innerHTML = files.map(fileName => {
|
||||
const fileIcon = getFileIcon(fileName);
|
||||
return `
|
||||
<div class="file-item">
|
||||
<div class="file-icon">
|
||||
<i class="${fileIcon}"></i>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">${fileName}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function getFileIcon(fileName) {
|
||||
const extension = fileName.toLowerCase().split('.').pop();
|
||||
|
||||
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'fas fa-image';
|
||||
if (extension === 'pdf') return 'fas fa-file-pdf';
|
||||
if (extension === 'dwg') return 'fas fa-drafting-compass';
|
||||
if (['doc', 'docx'].includes(extension)) return 'fas fa-file-word';
|
||||
return 'fas fa-file';
|
||||
}
|
||||
|
||||
function viewDesign3D() {
|
||||
|
||||
Reference in New Issue
Block a user