Files
virtuality/web/templates/iso.html
T

199 строки
8.0 KiB
HTML

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ISO — {{ app_name }}</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="shell">
<header class="topbar">
<div>
<div class="brand">ISO</div>
<div class="muted">Установочные образы только .iso в /var/lib/virtuality/iso</div>
</div>
<div class="top-meta">
<span>user: {{ user }}</span>
<a class="link-pill" href="/">← Дашборд</a>
<a class="link-pill accent" href="/vm/create">+ Создать VM</a>
<form method="post" action="/logout" class="logout-form"><button class="ghost">Выйти</button></form>
</div>
</header>
{% if error %}
<div class="alert danger">{{ error }}</div>
{% endif %}
<section class="grid two">
<article class="card">
<div class="card-head">
<h2>Загрузить установочный ISO</h2>
<span class="pill">только .iso</span>
</div>
<form id="iso-upload-form" method="post" action="/iso/upload" enctype="multipart/form-data" class="form-grid">
<label class="upload-box">
<span>Выбери ISO-файл установочного диска</span>
<input id="iso-file-input" type="file" name="iso_file" accept=".iso" required>
</label>
<div id="iso-file-hint" class="muted small-note">Файл ещё не выбран. В этом разделе разрешены только установочные образы .iso.</div>
<div id="upload-progress-wrap" class="upload-progress-wrap" hidden>
<div class="upload-progress-head">
<strong id="upload-status">Подготовка…</strong>
<span id="upload-percent">0%</span>
</div>
<div class="progress big"><span id="upload-progress-bar"></span></div>
<div class="upload-progress-meta">
<span id="upload-loaded">0 MB</span>
<span id="upload-speed">скорость считается…</span>
</div>
</div>
<button id="iso-upload-button" type="submit" class="primary wide">Загрузить ISO</button>
</form>
<p class="muted small-note">Файл попадёт в <b>/var/lib/virtuality/iso</b>. Для готовых системных дисков используй раздел <b>Диски</b>: .img / .raw / .qcow2.</p>
</article>
<article class="card">
<div class="card-head">
<h2>Действия</h2>
<span class="pill">pool</span>
</div>
<div class="actions big-actions">
<form method="post" action="/iso/refresh"><button>Обновить ISO pool</button></form>
<a class="link-pill accent" href="/vm/create">Создать VM</a>
</div>
<pre>sudo virsh pool-refresh virtuality-iso
ls -lh /var/lib/virtuality/iso</pre>
</article>
</section>
<section class="card">
<div class="card-head">
<h2>ISO-образы</h2>
<span class="pill">{{ isos|length }} файлов</span>
</div>
<table>
<thead>
<tr><th>Файл</th><th>Размер</th><th>Обновлён</th><th>Действия</th></tr>
</thead>
<tbody>
{% for iso in isos %}
<tr>
<td class="strong">{{ iso.name }}</td>
<td>{{ iso.size }}</td>
<td>{{ iso.updated }}</td>
<td class="actions">
<form method="post" action="/iso/{{ iso.name }}/delete" onsubmit="return confirm('Удалить ISO {{ iso.name }}?');">
<button class="danger">Удалить</button>
</form>
</td>
</tr>
{% else %}
<tr><td colspan="4" class="muted">ISO пока нет. Загрузи первый установочный .iso через форму выше.</td></tr>
{% endfor %}
</tbody>
</table>
</section>
</div>
<script>
const form = document.getElementById('iso-upload-form');
const fileInput = document.getElementById('iso-file-input');
const button = document.getElementById('iso-upload-button');
const hint = document.getElementById('iso-file-hint');
const box = document.getElementById('upload-progress-wrap');
const bar = document.getElementById('upload-progress-bar');
const percent = document.getElementById('upload-percent');
const statusLine = document.getElementById('upload-status');
const loadedLine = document.getElementById('upload-loaded');
const speedLine = document.getElementById('upload-speed');
function bytesText(bytes) {
if (!bytes) return '0 MB';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let value = bytes;
let i = 0;
while (value >= 1024 && i < units.length - 1) { value /= 1024; i++; }
return value.toFixed(value >= 10 || i === 0 ? 0 : 1) + ' ' + units[i];
}
function validIsoFile(file) {
return file && file.name && file.name.toLowerCase().endsWith('.iso');
}
fileInput.addEventListener('change', function () {
const file = fileInput.files[0];
if (!file) {
hint.textContent = 'Файл ещё не выбран. В этом разделе разрешены только установочные образы .iso.';
return;
}
if (!validIsoFile(file)) {
hint.textContent = 'Неверный тип файла. Здесь можно выбрать только .iso.';
fileInput.value = '';
return;
}
hint.textContent = file.name + ' · ' + bytesText(file.size);
});
form.addEventListener('submit', function (event) {
event.preventDefault();
const file = fileInput.files[0];
if (!validIsoFile(file)) {
hint.textContent = 'Выбери установочный образ .iso.';
return;
}
const xhr = new XMLHttpRequest();
const data = new FormData(form);
const started = Date.now();
box.hidden = false;
button.disabled = true;
fileInput.disabled = true;
statusLine.textContent = 'Передача файла на сервер…';
bar.style.width = '0%';
percent.textContent = '0%';
loadedLine.textContent = '0 MB из ' + bytesText(file.size);
speedLine.textContent = 'скорость считается…';
xhr.upload.onprogress = function (event) {
if (!event.lengthComputable) {
statusLine.textContent = 'Загрузка идёт…';
return;
}
const pct = Math.round((event.loaded / event.total) * 100);
const seconds = Math.max(1, (Date.now() - started) / 1000);
const speed = event.loaded / seconds;
bar.style.width = pct + '%';
percent.textContent = pct + '%';
loadedLine.textContent = bytesText(event.loaded) + ' из ' + bytesText(event.total);
speedLine.textContent = bytesText(speed) + '/s';
if (pct >= 100) statusLine.textContent = 'Файл передан. Сервер сохраняет ISO и обновляет pool…';
};
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
bar.style.width = '100%';
percent.textContent = '100%';
statusLine.textContent = 'Готово. Обновляем список ISO…';
window.location.href = '/iso';
} else {
statusLine.textContent = 'Ошибка загрузки: HTTP ' + xhr.status;
button.disabled = false;
fileInput.disabled = false;
}
};
xhr.onerror = function () {
statusLine.textContent = 'Ошибка сети во время загрузки.';
button.disabled = false;
fileInput.disabled = false;
};
xhr.open('POST', form.action);
xhr.send(data);
});
</script>
</body>
</html>