190 lines
7.2 KiB
HTML
190 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Asset Browser Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
.success { color: green; }
|
|
.error { color: red; }
|
|
.info { color: blue; }
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
}
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
th { background-color: #f2f2f2; }
|
|
.status-badge {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
.status-not-started { background-color: #f3f4f6; color: #374151; }
|
|
.status-in-progress { background-color: #dbeafe; color: #1e40af; }
|
|
.status-submitted { background-color: #fef3c7; color: #92400e; }
|
|
.status-approved { background-color: #d1fae5; color: #065f46; }
|
|
.status-retake { background-color: #fee2e2; color: #991b1b; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Asset Browser Task Status Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Instructions</h2>
|
|
<p>This test verifies that task status columns are visible in the asset browser:</p>
|
|
<ol>
|
|
<li>Open the VFX Project Management app at <a href="http://localhost:5174" target="_blank">http://localhost:5174</a></li>
|
|
<li>Login with admin@vfx.com / admin123</li>
|
|
<li>Navigate to a project</li>
|
|
<li>Go to the Assets tab</li>
|
|
<li>Switch to List view (table icon)</li>
|
|
<li>Look for the "Show Task Status" checkbox - it should be checked by default</li>
|
|
<li>Verify that you see columns for Modeling, Surfacing, and Rigging (if applicable)</li>
|
|
<li>Try clicking on the task status badges to change them</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Expected Behavior</h2>
|
|
<ul>
|
|
<li>✅ Task status columns should be visible by default in list view</li>
|
|
<li>✅ Each asset should show individual task status badges</li>
|
|
<li>✅ Rigging column should only show for Characters and Vehicles</li>
|
|
<li>✅ Props and Sets should show "—" for rigging</li>
|
|
<li>✅ Task status badges should be clickable and editable</li>
|
|
<li>✅ Status changes should update immediately</li>
|
|
<li>✅ Toggle should hide/show task status columns</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>API Test Results</h2>
|
|
<div id="api-results">Testing API...</div>
|
|
<div id="asset-table"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const BASE_URL = 'http://localhost:8000';
|
|
let authToken = '';
|
|
|
|
async function testAPI() {
|
|
try {
|
|
// Login
|
|
const loginResponse = await fetch(`${BASE_URL}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
email: 'admin@vfx.com',
|
|
password: 'admin123'
|
|
})
|
|
});
|
|
|
|
if (!loginResponse.ok) {
|
|
throw new Error(`Login failed: ${loginResponse.status}`);
|
|
}
|
|
|
|
const loginData = await loginResponse.json();
|
|
authToken = loginData.access_token;
|
|
|
|
// Get projects
|
|
const projectsResponse = await fetch(`${BASE_URL}/projects/`, {
|
|
headers: { 'Authorization': `Bearer ${authToken}` }
|
|
});
|
|
|
|
const projects = await projectsResponse.json();
|
|
const projectId = projects[0].id;
|
|
|
|
// Get assets with task status
|
|
const assetsResponse = await fetch(`${BASE_URL}/assets/?project_id=${projectId}`, {
|
|
headers: { 'Authorization': `Bearer ${authToken}` }
|
|
});
|
|
|
|
const assets = await assetsResponse.json();
|
|
|
|
document.getElementById('api-results').innerHTML =
|
|
`<span class="success">✅ API working! Found ${assets.length} assets</span>`;
|
|
|
|
// Display assets in table format
|
|
displayAssets(assets);
|
|
|
|
} catch (error) {
|
|
document.getElementById('api-results').innerHTML =
|
|
`<span class="error">❌ API Error: ${error.message}</span>`;
|
|
}
|
|
}
|
|
|
|
function displayAssets(assets) {
|
|
if (assets.length === 0) {
|
|
document.getElementById('asset-table').innerHTML = '<p>No assets found</p>';
|
|
return;
|
|
}
|
|
|
|
let tableHTML = `
|
|
<h3>Assets with Task Status (API Response)</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Category</th>
|
|
<th>Modeling</th>
|
|
<th>Surfacing</th>
|
|
<th>Rigging</th>
|
|
<th>Task Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
`;
|
|
|
|
assets.forEach(asset => {
|
|
const modelingStatus = asset.task_status?.modeling || 'not_started';
|
|
const surfacingStatus = asset.task_status?.surfacing || 'not_started';
|
|
const riggingStatus = asset.task_status?.rigging || 'not_started';
|
|
const isRiggingApplicable = asset.category === 'characters' || asset.category === 'vehicles';
|
|
|
|
tableHTML += `
|
|
<tr>
|
|
<td>${asset.name}</td>
|
|
<td>${asset.category}</td>
|
|
<td><span class="status-badge status-${modelingStatus.replace('_', '-')}">${formatStatus(modelingStatus)}</span></td>
|
|
<td><span class="status-badge status-${surfacingStatus.replace('_', '-')}">${formatStatus(surfacingStatus)}</span></td>
|
|
<td>${isRiggingApplicable ?
|
|
`<span class="status-badge status-${riggingStatus.replace('_', '-')}">${formatStatus(riggingStatus)}</span>` :
|
|
'<span class="info">N/A</span>'}</td>
|
|
<td>${asset.task_details ? asset.task_details.length : 0} tasks</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
tableHTML += '</tbody></table>';
|
|
document.getElementById('asset-table').innerHTML = tableHTML;
|
|
}
|
|
|
|
function formatStatus(status) {
|
|
return status.split('_').map(word =>
|
|
word.charAt(0).toUpperCase() + word.slice(1)
|
|
).join(' ');
|
|
}
|
|
|
|
// Run test
|
|
testAPI();
|
|
</script>
|
|
</body>
|
|
</html> |