patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webapp: Upgraded firmware upgrade to typescript

Browse Source
This commit is contained in:
Thomas Basler 2022-06-22 20:31:20 +02:00
parent e6c36dd0db
commit a53f98882c
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/package.json
View File

@ -22,6 +22,7 @@
"@babel/eslint-parser": "^7.18.2", "@babel/eslint-parser": "^7.18.2",
"@types/bootstrap": "^5.1.12", "@types/bootstrap": "^5.1.12",
"@types/node": "^18.0.0", "@types/node": "^18.0.0",
"@types/spark-md5": "^3.0.2",
"@typescript-eslint/parser": "^5.29.0", "@typescript-eslint/parser": "^5.29.0",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",

36
webapp/src/components/FirmwareUpgradeView.vue
View File

@ -12,7 +12,7 @@
</div> </div>
</div> </div>
<div v-if="!loading && !uploading && OTAError !== null" class="card"> <div v-if="!loading && !uploading && OTAError != ''" class="card">
<div class="card-header text-white bg-danger">OTA Error</div> <div class="card-header text-white bg-danger">OTA Error</div>
<div class="card-body text-center"> <div class="card-body text-center">
<p class="h1 mb-2"> <p class="h1 mb-2">
@ -61,8 +61,8 @@
<div class="card-header text-white bg-primary">Upload Progress</div> <div class="card-header text-white bg-primary">Upload Progress</div>
<div class="card-body text-center"> <div class="card-body text-center">
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: this.progress + '%' }" <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100"> v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
{{ progress }}% {{ progress }}%
</div> </div>
</div> </div>
@ -71,7 +71,7 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import SparkMD5 from "spark-md5"; import SparkMD5 from "spark-md5";
@ -81,26 +81,23 @@ export default defineComponent({
loading: true, loading: true,
uploading: false, uploading: false,
progress: 0, progress: 0,
OTAError: null, OTAError: "",
OTASuccess: false, OTASuccess: false,
type: "firmware", type: "firmware",
file: null, file: {} as Blob,
}; };
}, },
methods: { methods: {
fileMD5(file) { fileMD5(file: Blob) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const blobSlice = const blobSlice = File.prototype.slice;
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
const chunkSize = 2097152; // Read in chunks of 2MB const chunkSize = 2097152; // Read in chunks of 2MB
const chunks = Math.ceil(file.size / chunkSize); const chunks = Math.ceil(file.size / chunkSize);
const spark = new SparkMD5.ArrayBuffer(); const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader(); const fileReader = new FileReader();
let currentChunk = 0; let currentChunk = 0;
fileReader.onload = (e) => { fileReader.onload = (e: Event) => {
spark.append(e.target.result); // Append array buffer spark.append(fileReader.result as ArrayBuffer); // Append array buffer
currentChunk += 1; currentChunk += 1;
if (currentChunk < chunks) { if (currentChunk < chunks) {
loadNext(); loadNext();
@ -121,11 +118,14 @@ export default defineComponent({
loadNext(); loadNext();
}); });
}, },
uploadOTA(event) { uploadOTA(event: Event | null) {
this.uploading = true; this.uploading = true;
const formData = new FormData(); const formData = new FormData();
if (event !== null) { if (event !== null) {
[this.file] = event.target.files; const target= event.target as HTMLInputElement;
if (target.files !== null) {
this.file = target.files[0];
}
} }
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.addEventListener("load", () => { request.addEventListener("load", () => {
@ -147,7 +147,7 @@ export default defineComponent({
request.withCredentials = true; request.withCredentials = true;
this.fileMD5(this.file) this.fileMD5(this.file)
.then((md5) => { .then((md5) => {
formData.append("MD5", md5); formData.append("MD5", (md5 as string));
formData.append("firmware", this.file, "firmware"); formData.append("firmware", this.file, "firmware");
request.open("post", "/api/firmware/update"); request.open("post", "/api/firmware/update");
request.send(formData); request.send(formData);
@ -160,12 +160,12 @@ export default defineComponent({
}); });
}, },
retryOTA() { retryOTA() {
this.OTAError = null; this.OTAError = "";
this.OTASuccess = false; this.OTASuccess = false;
this.uploadOTA(null); this.uploadOTA(null);
}, },
clear() { clear() {
this.OTAError = null; this.OTAError = "";
this.OTASuccess = false; this.OTASuccess = false;
}, },
}, },

5
webapp/yarn.lock
View File

@ -1362,6 +1362,11 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@types/spark-md5@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@types/spark-md5/-/spark-md5-3.0.2.tgz#da2e8a778a20335fc4f40b6471c4b0d86b70da55"
integrity sha512-82E/lVRaqelV9qmRzzJ1PKTpyrpnT7mwdneKNJB9hUtypZDMggloDfFUCIqRRx3lYRxteCwXSq9c+W71Vf0QnQ==
"@types/webpack-env@^1.15.2": "@types/webpack-env@^1.15.2":
version "1.17.0" version "1.17.0"
resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"