Add upload wait timer and progress explanation
This commit is contained in:
“Naeel”
+1
-1
@@ -28,7 +28,7 @@ try:
|
||||
except (OSError, json.JSONDecodeError):
|
||||
CONFIG = DEFAULT_CONFIG
|
||||
|
||||
VERSION = "0.2.0"
|
||||
VERSION = "0.2.1"
|
||||
|
||||
app = Flask(
|
||||
__name__,
|
||||
|
||||
@@ -28,6 +28,9 @@ button.quiet { color: #5d6a61; background: transparent; }
|
||||
button:disabled { opacity: .45; cursor: not-allowed; }
|
||||
/* Резервная область сообщения интегратора сохраняет высоту и не двигает таблицу. */
|
||||
.status { min-height: 22px; color: #56745f; font: 13px sans-serif; }
|
||||
.upload-progress-explanation { display: grid; gap: 4px; margin-top: 14px; color: #46604e; font: 13px/1.45 sans-serif; }
|
||||
.upload-progress-explanation strong { color: #1b4d3e; }
|
||||
.upload-progress-explanation span:last-child { color: #6b796f; font-variant-numeric: tabular-nums; }
|
||||
/* Горизонтальный scroll на узких экранах не ломает таблицу дерева. */
|
||||
.table-wrap { overflow-x: auto; border-top: 1px solid #b9c7ba; }
|
||||
table { width: 100%; border-collapse: collapse; font: 14px/1.4 sans-serif; }
|
||||
|
||||
+79
-15
@@ -30,6 +30,11 @@
|
||||
</button>
|
||||
<span id="upload-status" style="font: 14px sans-serif; color: #2d4a36;"></span>
|
||||
</div>
|
||||
<div id="upload-progress-explanation" class="upload-progress-explanation" hidden>
|
||||
<strong id="upload-phase">Подготовка загрузки</strong>
|
||||
<span id="upload-phase-help">Первое соединение может занять время: устанавливаются соединения с буфером ВМ и сервисом.</span>
|
||||
<span id="upload-elapsed">Прошло: 00:00</span>
|
||||
</div>
|
||||
<div id="session-info" style="margin-top: 14px; font: 13px sans-serif; display: none;">
|
||||
<strong>Сессия в RAM:</strong> <code id="session-id"></code>
|
||||
<div id="session-files" style="margin-top: 6px; color: #46604e;"></div>
|
||||
@@ -45,9 +50,41 @@
|
||||
const sessionInfo = document.getElementById('session-info');
|
||||
const sessionIdEl = document.getElementById('session-id');
|
||||
const sessionFilesEl = document.getElementById('session-files');
|
||||
const progressExplanation = document.getElementById('upload-progress-explanation');
|
||||
const uploadPhase = document.getElementById('upload-phase');
|
||||
const uploadPhaseHelp = document.getElementById('upload-phase-help');
|
||||
const uploadElapsed = document.getElementById('upload-elapsed');
|
||||
|
||||
let abortCtrl = null;
|
||||
let selectedFiles = [];
|
||||
let uploadTimer = null;
|
||||
let uploadStartedAt = 0;
|
||||
|
||||
const formatElapsed = (seconds) => {
|
||||
const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
|
||||
const remainder = (seconds % 60).toString().padStart(2, '0');
|
||||
return `${minutes}:${remainder}`;
|
||||
};
|
||||
|
||||
const stopUploadTimer = () => {
|
||||
if (uploadTimer) window.clearInterval(uploadTimer);
|
||||
uploadTimer = null;
|
||||
};
|
||||
|
||||
const startUploadTimer = () => {
|
||||
stopUploadTimer();
|
||||
uploadStartedAt = Date.now();
|
||||
progressExplanation.hidden = false;
|
||||
uploadTimer = window.setInterval(() => {
|
||||
uploadElapsed.textContent = `Прошло: ${formatElapsed(Math.floor((Date.now() - uploadStartedAt) / 1000))}`;
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const showUploadPhase = (phase, explanation) => {
|
||||
progressExplanation.hidden = false;
|
||||
uploadPhase.textContent = phase;
|
||||
uploadPhaseHelp.textContent = explanation;
|
||||
};
|
||||
|
||||
const picker = FilePicker.initFilePicker({
|
||||
mount: '#file-picker',
|
||||
@@ -67,30 +104,55 @@
|
||||
cancelBtn.style.display = 'inline-block';
|
||||
sessionInfo.style.display = 'none';
|
||||
abortCtrl = new AbortController();
|
||||
startUploadTimer();
|
||||
showUploadPhase(
|
||||
'Первый файл: устанавливаем соединение',
|
||||
'Это не зависание. Сначала файл отправляется в буфер ВМ, затем сервис забирает его в RAM и очищает буфер.'
|
||||
);
|
||||
|
||||
const vmUploadUrl = new URL({{ config.vmUploadUrl|tojson }}, window.location.origin).href;
|
||||
|
||||
const res = await FilePicker.uploadViaVM(files, {
|
||||
vmUploadUrl: vmUploadUrl,
|
||||
backendUploadUrl: '/api/upload_refs',
|
||||
signal: abortCtrl.signal,
|
||||
onStatus: (msg) => { uploadStatus.textContent = msg; },
|
||||
onFileStatus: (k, statusText) => {
|
||||
const row = document.querySelectorAll('.tree-row.tree-file')[k];
|
||||
if (row) {
|
||||
const statusCell = row.querySelectorAll('td')[2];
|
||||
if (statusCell) statusCell.innerHTML = statusText;
|
||||
let res;
|
||||
try {
|
||||
res = await FilePicker.uploadViaVM(files, {
|
||||
vmUploadUrl: vmUploadUrl,
|
||||
backendUploadUrl: '/api/upload_refs',
|
||||
signal: abortCtrl.signal,
|
||||
onStatus: (msg) => {
|
||||
uploadStatus.textContent = msg;
|
||||
if (msg.startsWith('Загрузка в буфер')) {
|
||||
showUploadPhase('Отправка файла в буфер ВМ', 'Идёт PUT текущего файла. После этого сервис сразу перенесёт его в RAM.');
|
||||
} else if (msg.startsWith('Приём сервисом')) {
|
||||
showUploadPhase('Перенос файла в RAM', 'Сервис забирает текущий файл из буфера ВМ и удаляет его после успешного приёма.');
|
||||
}
|
||||
},
|
||||
onFileStatus: (k, statusText) => {
|
||||
const row = document.querySelectorAll('.tree-row.tree-file')[k];
|
||||
if (row) {
|
||||
const statusCell = row.querySelectorAll('td')[2];
|
||||
if (statusCell) statusCell.innerHTML = statusText;
|
||||
}
|
||||
},
|
||||
onFileComplete: (info) => {
|
||||
console.log('File delivered to RAM:', info);
|
||||
}
|
||||
},
|
||||
onFileComplete: (info) => {
|
||||
console.log('File delivered to RAM:', info);
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
stopUploadTimer();
|
||||
cancelBtn.style.display = 'none';
|
||||
uploadBtn.disabled = selectedFiles.length === 0;
|
||||
showUploadPhase('Загрузка остановлена', 'Произошла непредвиденная ошибка. Повторите загрузку.');
|
||||
uploadStatus.innerHTML = '<span style="color:#b32f22; font-weight: bold;">✗ Ошибка загрузки</span>';
|
||||
console.error('Upload failed unexpectedly', error);
|
||||
return;
|
||||
}
|
||||
|
||||
stopUploadTimer();
|
||||
cancelBtn.style.display = 'none';
|
||||
uploadBtn.disabled = selectedFiles.length === 0;
|
||||
|
||||
if (res.ok) {
|
||||
showUploadPhase('Загрузка завершена', 'Все файлы доставлены в RAM сессии.');
|
||||
uploadStatus.innerHTML = '<span style="color:#1f5a3b; font-weight: bold;">✓ Все ' + res.count + ' файл(ов) успешно доставлены в RAM бэкенда!</span>';
|
||||
sessionIdEl.textContent = res.session;
|
||||
sessionInfo.style.display = 'block';
|
||||
@@ -106,8 +168,10 @@
|
||||
console.error('Failed to load session files', e);
|
||||
}
|
||||
} else if (res.aborted) {
|
||||
showUploadPhase('Загрузка отменена', 'Переданные до отмены файлы уже находятся в RAM сессии.');
|
||||
uploadStatus.innerHTML = '<span style="color:#8c5148;">Загрузка отменена пользователем</span>';
|
||||
} else {
|
||||
showUploadPhase('Загрузка остановлена', 'Проверьте сообщение об ошибке. Уже доставленные файлы остаются в RAM сессии.');
|
||||
uploadStatus.innerHTML = '<span style="color:#b32f22; font-weight: bold;">✗ Ошибка: ' + res.error + '</span>';
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user