This commit is contained in:
ok-home
2025-09-12 12:28:09 +07:00
committed by GitHub
parent 687d938f8f
commit 2aa272282f

View File

@@ -4,8 +4,31 @@
<title>OTA UPDATE - Обновление прошивки</title> <title>OTA UPDATE - Обновление прошивки</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
/* Встроенные иконки Font Awesome */
.fa {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.fa-sync-alt:before { content: "\f2f1"; }
.fa-exclamation-triangle:before { content: "\f071"; }
.fa-file-upload:before { content: "\f574"; }
.fa-folder-open:before { content: "\f07c"; }
.fa-file-code:before { content: "\f1c9"; }
.fa-play-circle:before { content: "\f144"; }
.fa-times-circle:before { content: "\f057"; }
.fa-check-circle:before { content: "\f058"; }
.fa-undo:before { content: "\f2ea"; }
.fa-power-off:before { content: "\f011"; }
.fa-home:before { content: "\f015"; }
/* Основные стили */
:root { :root {
--primary: #4361ee; --primary: #4361ee;
--primary-dark: #3a56d4; --primary-dark: #3a56d4;
@@ -258,7 +281,7 @@
gap: 10px; gap: 10px;
} }
.file-info i { .file-info .fa {
color: var(--primary); color: var(--primary);
} }
@@ -304,7 +327,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1><i class="fas fa-sync-alt"></i> OTA UPDATE</h1> <h1><i class="fa fa-sync-alt"></i> OTA UPDATE</h1>
<p>Обновление прошивки устройства по воздуху</p> <p>Обновление прошивки устройства по воздуху</p>
</div> </div>
@@ -314,31 +337,31 @@
</div> </div>
<div id="rollback" class="card hidden"> <div id="rollback" class="card hidden">
<h2 class="section-title"><i class="fas fa-exclamation-triangle"></i> Подтверждение обновления</h2> <h2 class="section-title"><i class="fa fa-exclamation-triangle"></i> Подтверждение обновления</h2>
<div class="status-card status-warning"> <div class="status-card status-warning">
<p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p> <p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p>
</div> </div>
<button class="btn btn-success" id="otaVerifyApp"> <button class="btn btn-success" id="otaVerifyApp">
<i class="fas fa-check-circle"></i> Подтвердить и установить обновление <i class="fa fa-check-circle"></i> Подтвердить и установить обновление
</button> </button>
<button class="btn btn-danger" id="otaRollback"> <button class="btn btn-danger" id="otaRollback">
<i class="fas fa-undo"></i> Отменить обновление и откатиться <i class="fa fa-undo"></i> Отменить обновление и откатиться
</button> </button>
</div> </div>
<div id="update" class="card"> <div id="update" class="card">
<h2 class="section-title"><i class="fas fa-file-upload"></i> Загрузка прошивки</h2> <h2 class="section-title"><i class="fa fa-file-upload"></i> Загрузка прошивки</h2>
<input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)"> <input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)">
<button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()"> <button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">
<i class="fas fa-folder-open"></i> Выбрать файл прошивки <i class="fa fa-folder-open"></i> Выбрать файл прошивки
</button> </button>
<div id="fileInfo" class="file-info hidden"> <div id="fileInfo" class="file-info hidden">
<i class="fas fa-file-code"></i> <i class="fa fa-file-code"></i>
<span id="fileName">Файл не выбран</span> <span id="fileName">Файл не выбран</span>
</div> </div>
@@ -356,17 +379,17 @@
<div class="btn-container"> <div class="btn-container">
<button class="btn btn-warning" id="otaStartCancel"> <button class="btn btn-warning" id="otaStartCancel">
<i class="fas fa-play-circle"></i> Начать обновление <i class="fa fa-play-circle"></i> Начать обновление
</button> </button>
<button class="btn btn-success hidden" id="otaReStart"> <button class="btn btn-success hidden" id="otaReStart">
<i class="fas fa-power-off"></i> Перезагрузить с новой прошивкой <i class="fa fa-power-off"></i> Перезагрузить с новой прошивкой
</button> </button>
</div> </div>
</div> </div>
<button class="btn btn-secondary" id="goHome"> <button class="btn btn-secondary" id="goHome">
<i class="fas fa-home"></i> Вернуться на главную <i class="fa fa-home"></i> Вернуться на главную
</button> </button>
</div> </div>
@@ -389,7 +412,7 @@
// Показываем информацию о файле // Показываем информацию о файле
document.getElementById('fileInfo').classList.remove('hidden'); document.getElementById('fileInfo').classList.remove('hidden');
document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`; document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`;
document.getElementById('otaFileSelect').innerHTML = `<i class="fas fa-check-circle"></i> Файл выбран: ${file.name}`; document.getElementById('otaFileSelect').innerHTML = `<i class="fa fa-check-circle"></i> Файл выбран: ${file.name}`;
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
input.value = null; input.value = null;
@@ -432,14 +455,14 @@
if (otaData && otaData.length > 0 && otaStarted == 0) { if (otaData && otaData.length > 0 && otaStarted == 0) {
socket.send(JSON.stringify({ name: "otaSize", value: otaData.length })); socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
otaStarted = 1; otaStarted = 1;
this.innerHTML = "<i class='fas fa-times-circle'></i> Отменить загрузку"; this.innerHTML = "<i class='fa fa-times-circle'></i> Отменить загрузку";
document.getElementById("otaFileSelect").disabled = true; document.getElementById("otaFileSelect").disabled = true;
document.getElementById("otaProgressVisible").classList.remove("hidden"); document.getElementById("otaProgressVisible").classList.remove("hidden");
updateProgress(0, otaData.length); updateProgress(0, otaData.length);
} else { } else {
otaStarted = 0; otaStarted = 0;
socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" })); socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
this.innerHTML = "<i class='fas fa-play-circle'></i> Начать обновление"; this.innerHTML = "<i class='fa fa-play-circle'></i> Начать обновление";
document.getElementById("otaFileSelect").disabled = false; document.getElementById("otaFileSelect").disabled = false;
} }
}); });
@@ -476,18 +499,18 @@
case "otaGetChunk": case "otaGetChunk":
let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize); let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
updateProgress(obj.value, otaData.length); updateProgress(obj.value, otaData.length);
document.getElementById("otaStartCancel").innerHTML = `<i class='fas fa-times-circle'></i> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`; document.getElementById("otaStartCancel").innerHTML = `<i class='fa fa-times-circle'></i> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`;
socket.send(otaDataSend); socket.send(otaDataSend);
break; break;
case "otaEnd": case "otaEnd":
otaStartsegment = 0; otaStartsegment = 0;
otaStarted = 0; otaStarted = 0;
document.getElementById("otaStartCancel").classList.add("hidden"); document.getElementById("otaStartCancel").classList.add("hidden");
document.getElementById("otaStartCancel").innerHTML = "<i class='fas fa-play-circle'></i> Начать обновление"; document.getElementById("otaStartCancel").innerHTML = "<i class='fa fa-play-circle'></i> Начать обновление";
updateProgress(otaData.length, otaData.length); updateProgress(otaData.length, otaData.length);
document.getElementById("otaFileSelect").disabled = false; document.getElementById("otaFileSelect").disabled = false;
document.getElementById("otaReStart").classList.remove("hidden"); document.getElementById("otaReStart").classList.remove("hidden");
document.getElementById("otaReStart").innerHTML = "<i class='fas fa-power-off'></i> Прошивка загружена. Перезагрузить устройство"; document.getElementById("otaReStart").innerHTML = "<i class='fa fa-power-off'></i> Прошивка загружена. Перезагрузить устройство";
document.getElementById("otaReStart").disabled = false; document.getElementById("otaReStart").disabled = false;
showStatus("Прошивка успешно загружена", "success"); showStatus("Прошивка успешно загружена", "success");
break; break;
@@ -496,7 +519,7 @@
otaStartsegment = 0; otaStartsegment = 0;
otaStarted = 0; otaStarted = 0;
document.getElementById("otaStartCancel").classList.remove("hidden"); document.getElementById("otaStartCancel").classList.remove("hidden");
document.getElementById("otaStartCancel").innerHTML = "<i class='fas fa-play-circle'></i> Начать обновление"; document.getElementById("otaStartCancel").innerHTML = "<i class='fa fa-play-circle'></i> Начать обновление";
document.getElementById("otaFileSelect").disabled = false; document.getElementById("otaFileSelect").disabled = false;
document.getElementById("otaReStart").classList.remove("hidden"); document.getElementById("otaReStart").classList.remove("hidden");
document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value; document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value;