From a53f98882c6042f49b2a6d8ee51a2b7f7b5f90b8 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Wed, 22 Jun 2022 20:31:20 +0200
Subject: [PATCH] webapp: Upgraded firmware upgrade to typescript

---
 webapp/package.json                           |  1 +
 webapp/src/components/FirmwareUpgradeView.vue | 36 +++++++++----------
 webapp/yarn.lock                              |  5 +++
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 1a8c6356..3b848344 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -22,6 +22,7 @@
     "@babel/eslint-parser": "^7.18.2",
     "@types/bootstrap": "^5.1.12",
     "@types/node": "^18.0.0",
+    "@types/spark-md5": "^3.0.2",
     "@typescript-eslint/parser": "^5.29.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
diff --git a/webapp/src/components/FirmwareUpgradeView.vue b/webapp/src/components/FirmwareUpgradeView.vue
index 55b02da8..d52a6577 100644
--- a/webapp/src/components/FirmwareUpgradeView.vue
+++ b/webapp/src/components/FirmwareUpgradeView.vue
@@ -12,7 +12,7 @@
             </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-body text-center">
                 <p class="h1 mb-2">
@@ -61,8 +61,8 @@
             <div class="card-header text-white bg-primary">Upload Progress</div>
             <div class="card-body text-center">
                 <div class="progress">
-                    <div class="progress-bar" role="progressbar" :style="{ width: this.progress + '%' }"
-                        v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100">
+                    <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
+                        v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                         {{ progress }}%
                     </div>
                 </div>
@@ -71,7 +71,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import SparkMD5 from "spark-md5";
 
@@ -81,26 +81,23 @@ export default defineComponent({
             loading: true,
             uploading: false,
             progress: 0,
-            OTAError: null,
+            OTAError: "",
             OTASuccess: false,
             type: "firmware",
-            file: null,
+            file: {} as Blob,
         };
     },
     methods: {
-        fileMD5(file) {
+        fileMD5(file: Blob) {
             return new Promise((resolve, reject) => {
-                const blobSlice =
-                    File.prototype.slice ||
-                    File.prototype.mozSlice ||
-                    File.prototype.webkitSlice;
+                const blobSlice = File.prototype.slice;
                 const chunkSize = 2097152; // Read in chunks of 2MB
                 const chunks = Math.ceil(file.size / chunkSize);
                 const spark = new SparkMD5.ArrayBuffer();
                 const fileReader = new FileReader();
                 let currentChunk = 0;
-                fileReader.onload = (e) => {
-                    spark.append(e.target.result); // Append array buffer
+                fileReader.onload = (e: Event) => {
+                    spark.append(fileReader.result as ArrayBuffer); // Append array buffer
                     currentChunk += 1;
                     if (currentChunk < chunks) {
                         loadNext();
@@ -121,11 +118,14 @@ export default defineComponent({
                 loadNext();
             });
         },
-        uploadOTA(event) {
+        uploadOTA(event: Event | null) {
             this.uploading = true;
             const formData = new FormData();
             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();
             request.addEventListener("load", () => {
@@ -147,7 +147,7 @@ export default defineComponent({
             request.withCredentials = true;
             this.fileMD5(this.file)
                 .then((md5) => {
-                    formData.append("MD5", md5);
+                    formData.append("MD5", (md5 as string));
                     formData.append("firmware", this.file, "firmware");
                     request.open("post", "/api/firmware/update");
                     request.send(formData);
@@ -160,12 +160,12 @@ export default defineComponent({
                 });
         },
         retryOTA() {
-            this.OTAError = null;
+            this.OTAError = "";
             this.OTASuccess = false;
             this.uploadOTA(null);
         },
         clear() {
-            this.OTAError = null;
+            this.OTAError = "";
             this.OTASuccess = false;
         },
     },
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index f111bae4..9b0f666e 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1362,6 +1362,11 @@
   dependencies:
     "@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":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"