GitHub/zTC1
1
0
Fork 0
mirror of https://github.com/oopuuu/zTC1.git synced 2025-12-07 10:52:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化了web端iOS Safari按钮的一些逻辑，现在可以看到文件ota上传进度条了

Browse Source
This commit is contained in:
Your Name
2025-04-19 23:55:57 +08:00
parent dfa8b1c475
commit f3b7477550
1 changed files with 63 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
TC1/http_server/web/index.html
View File

@@ -31,7 +31,7 @@
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header">
<div class="mdl-layout__header-row">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-device-name">
<button class="mdl-button mdl-button--icon edit-device-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -40,7 +40,7 @@
</button>
<span class="mdl-layout-title">TC1智能插座</span>
<div class="mdl-layout-spacer"></div>
<!-- <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button&#45;&#45;icon"-->
<!-- <button class="mdl-button mdl-button&#45;&#45;icon"-->
<!-- id="hdrbtn">-->
<!-- <i class="material-icons">-->
<!-- <svg>-->
@@ -55,7 +55,7 @@
<!-- <li class="mdl-menu__item" onclick="ChangeLanguage('jp')">日本語</li>-->
<!-- </ul>-->
<button onclick="reboot()"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
class="mdl-button mdl-button--icon"
id="rebootbtn">
<i class="material-icons">
<svg>
@@ -176,7 +176,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -195,7 +195,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -214,7 +214,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -233,7 +233,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -252,7 +252,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -271,7 +271,7 @@
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon edit-socket-name">
<button class="mdl-button mdl-button--icon edit-socket-name">
<i class="material-icons">
<svg>
<use xlink:href="#icon-edit"/>
@@ -368,10 +368,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="wifi_submit"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" id="wifi_submit"
class="mdl-button mdl-button--colored ">
提交
</a>
</button>
</div>
</div>
@@ -401,10 +401,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="mqtt_submit"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" id="mqtt_submit"
class="mdl-button mdl-button--colored ">
提交
</a>
</button>
</div>
</div>
@@ -422,10 +422,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a id="mqtt_freq_submit"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" id="mqtt_freq_submit"
class="mdl-button mdl-button--colored ">
提交
</a>
</button>
</div>
</div>
@@ -519,10 +519,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="javascript:AddTimedTask();"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" onclick="AddTimedTask();"
class="mdl-button mdl-button--colored ">
提交
</a>
</button>
</div>
</div>
@@ -598,10 +598,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="javascript:addButtonEvent();"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" onclick="addButtonEvent();"
class="mdl-button mdl-button--colored ">
添加
</a>
</button>
</div>
</div>
@@ -655,10 +655,10 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="javascript:OtaStart();"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" onclick="OtaStart();" id="submit-ota-link"
class="mdl-button mdl-button--colored ">
提交
</a>
</button>
</div>
<div id="ota_status" class="mdl-progress mdl-js-progress"></div>
</div>
@@ -675,10 +675,11 @@
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="javascript:OtaFileUpload();" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" onclick="OtaFileUpload();" class="mdl-button mdl-button--colored " id="submit-ota-file">
上传 OTA 文件
</a>
</button>
</div>
<div id="upload_status" class="mdl-progress mdl-js-progress"></div>
</div>
<div class="page page7 mdl-cell mdl-cell--12-col demo-card-square mdl-card mdl-shadow--2dp">
@@ -689,10 +690,10 @@
<pre id="sys_log"></pre>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="javascript:GetSysLog();"
class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
<button type="button" onclick="GetSysLog();"
class="mdl-button mdl-button--colored ">
刷新
</a>
</button>
</div>
</div>
@@ -1504,12 +1505,15 @@ HttpPost("/shortClickEvent", function (re) {
var ota_url = document.getElementById("ota_url").value;
var protocol = window.location.protocol;
var baseUrl = protocol+"//"+window.location.host;
document.getElementById("submit-ota-link").disabled = true;
HttpPost("/ota", function (re) {
OtaStatus();
}, ota_url);
}
var upload_status = document.querySelector('#upload_status');
upload_status.addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(0);
});
function OtaFileUpload() {
//alert("假的假的是假的，忽略");
//return;
@@ -1520,12 +1524,31 @@ HttpPost("/shortClickEvent", function (re) {
}
clearTimeout(powerTimerId);
console.log(fileInput.files[0].size); // 应显示 647168 左右
fetch("/ota/fileUpload", {
method: "POST",
headers: { "Content-Type": "application/octet-stream" },
body: fileInput.files[0]
}).then(r => r.text()).then(alert).catch(alert);
}
document.getElementById("submit-ota-file").disabled = true;
const xhr = new XMLHttpRequest();
xhr.open("POST", "/ota/fileUpload");
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
let percent = (e.loaded / e.total * 100).toFixed(1);
upload_status.MaterialProgress.setProgress(percent);
console.log(`上传进度：${percent}%`);
}
};
xhr.onload = function () {
alert("上传完成：" + xhr.responseText);
document.getElementById("submit-ota-file").disabled = false;
};
xhr.onerror = function () {
alert("上传失败");
document.getElementById("submit-ota-file").disabled = false;
};
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(fileInput.files[0]);
}
var ota_status = document.querySelector('#ota_status');
ota_status.addEventListener('mdl-componentupgraded', function() {