272 lines
15 KiB
HTML
272 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">{{ _('My Files') }}</h1>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0 mb-4 bg-light">
|
|
<div class="card-body">
|
|
<div id="drop-zone" class="border border-2 border-primary rounded p-4 text-center bg-white" style="border-style: dashed !important; cursor: pointer; transition: all 0.3s ease;">
|
|
<i class="bi bi-cloud-arrow-up display-4 text-primary mb-2"></i>
|
|
<h5 class="text-secondary fw-normal">{{ _('Drag & Drop STL file here or Click to Select') }}</h5>
|
|
<input type="file" id="file" name="file" accept=".stl" class="d-none">
|
|
</div>
|
|
|
|
<div id="upload-progress-container" class="mt-3 d-none">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="text-muted small" id="upload-status-text"><i class="bi bi-cloud-arrow-up-fill me-1"></i>{{ _('Uploading...') }}</span>
|
|
<span class="text-primary small fw-bold" id="upload-progress-text">0%</span>
|
|
</div>
|
|
<div class="progress shadow-sm" style="height: 10px;">
|
|
<div id="upload-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-striped mb-0 align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-4 fw-semibold text-secondary">{{ _('Date Uploaded') }}</th>
|
|
<th class="fw-semibold text-secondary">{{ _('Original Name') }}</th>
|
|
<th class="fw-semibold text-secondary">{{ _('Status') }}</th>
|
|
<th class="pe-4 fw-semibold text-secondary">{{ _('Actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for file in files %}
|
|
<tr id="file-row-{{ file.id }}" data-status="{{ file.status }}">
|
|
<td class="ps-4 text-muted">
|
|
<i class="bi bi-clock me-1"></i>
|
|
<span class="local-time" data-utc="{{ file.created_at.isoformat() }}">{{ file.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
|
</td>
|
|
<td class="fw-medium">{{ file.original_filename }}</td>
|
|
<td id="status-{{ file.id }}">
|
|
{% if file.status == 'waiting' %}
|
|
<span class="badge bg-info text-dark rounded-pill fw-normal px-2" title="{{ _('Waiting in queue for slicing') }}"><i class="bi bi-hourglass-split me-1"></i>{{ _('Waiting') }}...</span>
|
|
{% elif file.status == 'simplifying' %}
|
|
<span class="badge bg-secondary text-dark rounded-pill fw-normal px-2" style="background-color: #e2e3e5 !important;"><i class="bi bi-funnel bi-spin me-1"></i>{{ _('Simplifying') }}...</span>
|
|
{% elif file.status == 'uploaded' %}
|
|
<span class="badge bg-secondary text-light rounded-pill fw-normal px-2"><i class="bi bi-cloud-check me-1"></i>{{ _('Uploaded') }}</span>
|
|
{% elif file.status == 'merging' %}
|
|
<span class="badge bg-primary text-light rounded-pill fw-normal px-2"><i class="bi bi-intersect me-1"></i>{{ _('Merging') }}...</span>
|
|
{% elif file.status == 'slicing' %}
|
|
<span class="badge bg-warning text-dark rounded-pill fw-normal px-2"><i class="bi bi-gear-wide-connected bi-spin me-1"></i>{{ _('Slicing') }}...</span>
|
|
{% elif file.status == 'sliced' %}
|
|
<span class="badge bg-success rounded-pill fw-normal px-2"><i class="bi bi-check-circle me-1"></i>{{ _('Sliced') }}</span>
|
|
{% elif file.status == 'failed' %}
|
|
<span class="badge bg-danger rounded-pill fw-normal px-2"><i class="bi bi-x-circle me-1"></i>{{ _('Failed') }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="pe-4">
|
|
<div class="d-flex gap-2" id="actions-container-{{ file.id }}">
|
|
<a href="{{ url_for('main.plater') }}?add={{ file.id }}" class="btn btn-sm btn-outline-warning shadow-sm" title="{{ _('Slice') }}"><i class="bi bi-braces"></i> {{ _('Slice') }}</a>
|
|
{% if file.status == 'sliced' %}
|
|
<a href="{{ url_for('main.download_gcode', file_id=file.id) }}" class="btn btn-sm btn-outline-primary shadow-sm" title="{{ _('Download GCode') }}"><i class="bi bi-download"></i></a>
|
|
<a href="{{ url_for('main.preview_gcode', file_id=file.id) }}" class="btn btn-sm btn-outline-info shadow-sm" title="{{ _('GCode Preview') }}"><i class="bi bi-eye"></i></a>
|
|
{% endif %}
|
|
<form action="{{ url_for('main.delete_file', file_id=file.id) }}" method="POST" onsubmit="return confirm('{{ _('Are you sure you want to delete this file?') }}');">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" title="{{ _('Delete') }}"><i class="bi bi-trash3"></i></button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4" class="text-center text-muted py-5">
|
|
<i class="bi bi-folder-x display-4 d-block mb-3 opacity-50"></i>
|
|
{{ _('No files uploaded yet.') }}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Convert UTC to local time
|
|
document.querySelectorAll('.local-time').forEach(el => {
|
|
let utcStr = el.getAttribute('data-utc');
|
|
if (!utcStr) return;
|
|
if (!utcStr.endsWith('Z') && !utcStr.includes('+')) {
|
|
utcStr += 'Z';
|
|
}
|
|
const localDate = new Date(utcStr);
|
|
if (!isNaN(localDate)) {
|
|
const year = localDate.getFullYear();
|
|
const month = String(localDate.getMonth() + 1).padStart(2, '0');
|
|
const day = String(localDate.getDate()).padStart(2, '0');
|
|
const hours = String(localDate.getHours()).padStart(2, '0');
|
|
const minutes = String(localDate.getMinutes()).padStart(2, '0');
|
|
const seconds = String(localDate.getSeconds()).padStart(2, '0');
|
|
el.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
}
|
|
});
|
|
|
|
const checkInterval = 1000;
|
|
let pollTimer = null;
|
|
|
|
function fetchStatus() {
|
|
fetch(`{{ url_for('main.files_status') }}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let hasPending = false;
|
|
for (const [id, status] of Object.entries(data)) {
|
|
const tr = document.getElementById('file-row-' + id);
|
|
if (!tr) continue;
|
|
|
|
const currentStatus = tr.getAttribute('data-status');
|
|
if (currentStatus !== status) {
|
|
tr.setAttribute('data-status', status);
|
|
const statusTd = document.getElementById('status-' + id);
|
|
const actionsTd = document.getElementById('actions-container-' + id);
|
|
|
|
if (status === 'waiting') statusTd.innerHTML = '<span class="badge bg-info text-dark rounded-pill fw-normal px-2"><i class="bi bi-hourglass-split me-1"></i>{{ _("Waiting") }}...</span>';
|
|
else if (status === 'simplifying') statusTd.innerHTML = '<span class="badge bg-secondary text-dark rounded-pill fw-normal px-2" style="background-color: #e2e3e5 !important;"><i class="bi bi-funnel bi-spin me-1"></i>{{ _("Simplifying") }}...</span>';
|
|
else if (status === 'uploaded') statusTd.innerHTML = '<span class="badge bg-secondary text-light rounded-pill fw-normal px-2"><i class="bi bi-cloud-check me-1"></i>{{ _("Uploaded") }}</span>';
|
|
else if (status === 'merging') statusTd.innerHTML = '<span class="badge bg-primary text-light rounded-pill fw-normal px-2"><i class="bi bi-intersect me-1"></i>{{ _("Merging") }}...</span>';
|
|
else if (status === 'slicing') statusTd.innerHTML = '<span class="badge bg-warning text-dark rounded-pill fw-normal px-2"><i class="bi bi-gear-wide-connected bi-spin me-1"></i>{{ _("Slicing") }}...</span>';
|
|
else if (status === 'sliced') statusTd.innerHTML = '<span class="badge bg-success rounded-pill fw-normal px-2"><i class="bi bi-check-circle me-1"></i>{{ _("Sliced") }}</span>';
|
|
else if (status === 'failed') statusTd.innerHTML = '<span class="badge bg-danger rounded-pill fw-normal px-2"><i class="bi bi-x-circle me-1"></i>{{ _("Failed") }}</span>';
|
|
|
|
let actionsHtml = '';
|
|
const platerUrl = `{{ url_for('main.plater') }}?add=${id}`;
|
|
actionsHtml += `<a href="${platerUrl}" class="btn btn-sm btn-outline-warning shadow-sm" title="{{ _('Slice') }}"><i class="bi bi-braces"></i> {{ _('Slice') }}</a>\n`;
|
|
|
|
if (status === 'sliced') {
|
|
const downloadUrl = `{{ url_for('main.download_gcode', file_id=999999999) }}`.replace('999999999', id);
|
|
const previewUrl = `{{ url_for('main.preview_gcode', file_id=999999999) }}`.replace('999999999', id);
|
|
actionsHtml += `<a href="${downloadUrl}" class="btn btn-sm btn-outline-primary shadow-sm" title="{{ _('Download GCode') }}"><i class="bi bi-download"></i></a>\n`;
|
|
actionsHtml += `<a href="${previewUrl}" class="btn btn-sm btn-outline-info shadow-sm" title="{{ _('GCode Preview') }}"><i class="bi bi-eye"></i></a>\n`;
|
|
}
|
|
const deleteUrl = `{{ url_for('main.delete_file', file_id=999999999) }}`.replace('999999999', id);
|
|
actionsHtml += `<form action="${deleteUrl}" method="POST" onsubmit="return confirm('{{ _('Are you sure you want to delete this file?') }}');">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger shadow-sm" title="{{ _('Delete') }}"><i class="bi bi-trash3"></i></button>
|
|
</form>`;
|
|
actionsTd.innerHTML = actionsHtml;
|
|
}
|
|
|
|
if (status === 'waiting' || status === 'slicing' || status === 'merging' || status === 'simplifying') {
|
|
hasPending = true;
|
|
}
|
|
}
|
|
|
|
if (!hasPending) {
|
|
clearInterval(pollTimer);
|
|
pollTimer = null;
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching status:', error));
|
|
}
|
|
|
|
pollTimer = setInterval(fetchStatus, checkInterval);
|
|
|
|
// Drag & Drop File Upload Logic
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const fileInput = document.getElementById('file');
|
|
const progressContainer = document.getElementById('upload-progress-container');
|
|
const progressBar = document.getElementById('upload-progress-bar');
|
|
const progressText = document.getElementById('upload-progress-text');
|
|
const statusText = document.getElementById('upload-status-text');
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
['dragover', 'dragenter'].forEach(evt => {
|
|
dropZone.addEventListener(evt, e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
dropZone.classList.add('bg-light');
|
|
dropZone.classList.replace('border-primary', 'border-success');
|
|
});
|
|
});
|
|
|
|
['dragleave', 'dragend', 'drop'].forEach(evt => {
|
|
dropZone.addEventListener(evt, e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
dropZone.classList.remove('bg-light');
|
|
dropZone.classList.replace('border-success', 'border-primary');
|
|
});
|
|
});
|
|
|
|
dropZone.addEventListener('drop', e => {
|
|
const files = e.dataTransfer.files;
|
|
if (files.length) {
|
|
handleFileUpload(files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', () => {
|
|
if (fileInput.files.length) {
|
|
handleFileUpload(fileInput.files[0]);
|
|
}
|
|
});
|
|
|
|
function handleFileUpload(file) {
|
|
if (!file.name.toLowerCase().endsWith('.stl')) {
|
|
alert('{{ _("Please upload a valid .stl file!") }}');
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
progressContainer.classList.remove('d-none');
|
|
dropZone.classList.add('d-none');
|
|
progressBar.style.width = '0%';
|
|
progressText.innerText = '0%';
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '{{ url_for("main.files") }}', true);
|
|
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
|
|
|
|
xhr.upload.onprogress = function(e) {
|
|
if (e.lengthComputable) {
|
|
const percentComplete = Math.floor((e.loaded / e.total) * 100);
|
|
progressBar.style.width = percentComplete + '%';
|
|
progressText.innerText = percentComplete + '%';
|
|
}
|
|
};
|
|
|
|
xhr.onload = function() {
|
|
if (xhr.status === 200) {
|
|
statusText.innerHTML = '<i class="bi bi-check-circle-fill text-success me-1"></i>{{ _("Upload Complete!") }}';
|
|
progressBar.classList.replace('progress-bar-animated', 'bg-success');
|
|
setTimeout(() => window.location.reload(), 500);
|
|
} else {
|
|
try {
|
|
let response = JSON.parse(xhr.responseText);
|
|
if (response.error) {
|
|
alert('{{ _("Validation Failed") }}:\n' + response.error);
|
|
progressContainer.classList.add('d-none');
|
|
dropZone.classList.remove('d-none');
|
|
return;
|
|
}
|
|
} catch(e) {
|
|
console.log('No JSON error response');
|
|
}
|
|
alert('{{ _("Upload failed.") }}');
|
|
progressContainer.classList.add('d-none');
|
|
dropZone.classList.remove('d-none');
|
|
}
|
|
};
|
|
|
|
xhr.onerror = function() {
|
|
alert('{{ _("Upload error.") }}');
|
|
progressContainer.classList.add('d-none');
|
|
dropZone.classList.remove('d-none');
|
|
};
|
|
|
|
xhr.send(formData);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|