admin/markbase
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Web Frontend Phase 3: add Upload tab to category_view.html
Some checks failed
Test / build (push) Has been cancelled
Details
Test / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Warren
2026-06-20 16:05:56 +08:00
parent 3ebc10f195
commit 87f5afb9d3
2 changed files with 199 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
markbase-core/src/category_view.html
View File

@@ -146,6 +146,70 @@
margin-bottom: 20px;
}
.back-btn:hover { background: #e8e8ed; }
/* Upload tab styles */
.upload-form {
max-width: 500px;
margin: 0 auto;
padding: 20px 0;
}
.upload-form label {
display: block;
font-weight: 500;
color: #1d1d1f;
margin-bottom: 8px;
}
.upload-form input[type="text"] {
width: 100%;
padding: 10px 14px;
border: 1px solid #d2d2d7;
border-radius: 8px;
font-size: 14px;
margin-bottom: 20px;
}
.upload-form input[type="file"] {
display: block;
margin-bottom: 20px;
font-size: 14px;
}
.upload-form .upload-btn {
width: 100%;
padding: 14px;
background: #0071e3;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
}
.upload-form .upload-btn:hover { background: #0077ed; }
.upload-form .upload-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e8e8ed;
border-radius: 4px;
overflow: hidden;
margin: 16px 0;
display: none;
}
.progress-bar .fill {
height: 100%;
background: #0071e3;
width: 0%;
transition: width 0.3s;
}
.upload-status {
text-align: center;
font-size: 14px;
margin-top: 12px;
color: #86868b;
}
.upload-status.success { color: #30d158; }
.upload-status.error { color: #ff453a; }
</style>
</head>
<body>
@@ -159,6 +223,7 @@
<div class="tabs">
<div class="tab active" data-view="category" onclick="switchTab('category')">By Category</div>
<div class="tab" data-view="series" onclick="switchTab('series')">By Series</div>
<div class="tab" data-view="upload" onclick="switchTab('upload')">Upload</div>
</div>
<div class="stats">
@@ -200,6 +265,13 @@
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelector(`.tab[data-view="${view}"]`).classList.add('active');
if (view === 'upload') {
document.getElementById('back-btn').style.display = 'none';
showUploadForm();
return;
}
document.getElementById('back-btn').style.display = 'none';
document.getElementById('items-label').textContent = view === 'category' ? 'Categories' : 'Series';
@@ -325,6 +397,91 @@
}
}
async function showUploadForm() {
const content = document.getElementById('content');
document.getElementById('total-items').textContent = '-';
document.getElementById('total-files').textContent = '-';
content.innerHTML = `
<div class="upload-form">
<label for="upload-user-id">User ID</label>
<input type="text" id="upload-user-id" value="accusys">
<label for="upload-file">Select File</label>
<input type="file" id="upload-file">
<div class="progress-bar" id="progress-bar">
<div class="fill" id="progress-fill"></div>
</div>
<button class="upload-btn" id="upload-btn" onclick="startUpload()">Upload</button>
<div class="upload-status" id="upload-status"></div>
</div>
`;
}
async function startUpload() {
const fileInput = document.getElementById('upload-file');
const file = fileInput.files[0];
if (!file) {
document.getElementById('upload-status').textContent = 'Please select a file';
document.getElementById('upload-status').className = 'upload-status error';
return;
}
const userId = document.getElementById('upload-user-id').value.trim() || 'accusys';
const btn = document.getElementById('upload-btn');
const status = document.getElementById('upload-status');
const progressBar = document.getElementById('progress-bar');
const progressFill = document.getElementById('progress-fill');
btn.disabled = true;
btn.textContent = 'Uploading...';
status.textContent = '';
status.className = 'upload-status';
progressBar.style.display = 'block';
try {
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', apiBase + '/api/v2/upload-unlimited/' + encodeURIComponent(userId), true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const pct = (e.loaded / e.total) * 100;
progressFill.style.width = pct + '%';
}
};
const result = await new Promise((resolve, reject) => {
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
try { resolve(JSON.parse(xhr.responseText)); }
catch { resolve({ ok: true }); }
} else {
try { reject(JSON.parse(xhr.responseText)); }
catch { reject({ error: 'Upload failed (' + xhr.status + ')' }); }
}
};
xhr.onerror = function() { reject({ error: 'Network error' }); };
xhr.send(formData);
});
progressFill.style.width = '100%';
status.textContent = 'Upload successful! File: ' + file.name;
status.className = 'upload-status success';
btn.textContent = 'Done';
} catch (err) {
status.textContent = 'Upload failed: ' + (err.error || err.message || 'Unknown error');
status.className = 'upload-status error';
btn.disabled = false;
btn.textContent = 'Upload';
progressBar.style.display = 'none';
}
}
function goBack() {
if (navigationStack.length === 0) {
currentItem = null;