add loading spinner to provision and firmware hash steps

This commit is contained in:
liamcottle
2024-12-19 22:33:41 +13:00
parent 5eb0e96a2a
commit 5807073f68

View File

@@ -104,6 +104,7 @@
<div class="h-2 rounded-full bg-blue-600" :style="{ 'width': `${flashingProgress}%`}"></div>
</div>
</div>
</div>
<div class="border-t px-2 py-1 text-sm">
@@ -135,9 +136,18 @@
</div>
<div class="p-3">
<button @click="provision" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
<button v-if="!isProvisioning" @click="provision" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
Provision
</button>
<div v-else class="flex items-center space-x-1">
<div class="mr-1">
<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div>Provisioning: please wait...</div>
</div>
</div>
</div>
@@ -149,9 +159,18 @@
</div>
<div class="p-3">
<button @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
<button v-if="!isSettingFirmwareHash" @click="setFirmwareHash" class="border border-gray-500 px-2 bg-gray-100 hover:bg-gray-200 rounded">
Set Firmware Hash
</button>
<div v-else class="flex items-center space-x-1">
<div class="mr-1">
<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
<div>Setting Firmware Hash: please wait...</div>
</div>
</div>
</div>
@@ -295,6 +314,9 @@
isFlashing: false,
flashingProgress: 0,
isProvisioning: false,
isSettingFirmwareHash: false,
rnodeDisplayImage: null,
selectedProduct: null,
@@ -1293,6 +1315,10 @@
console.log("device is not provisioned yet, doing it now...");
this.isProvisioning = true;
try {
// determine device info
// todo implement ui to configure these values
const product = this.selectedProduct.id;
@@ -1425,10 +1451,18 @@
// done
await rnode.reset();
await rnode.close();
alert("device has been provisioned!");
} catch(e) {
console.log(e);
alert("failed to provision, please try again");
}
this.isProvisioning = false;
await rnode.close();
},
async setFirmwareHash() {
@@ -1455,6 +1489,10 @@
return;
}
this.isSettingFirmwareHash = true;
try {
// todo: this works, but we should be calculating the firmware hash from the file, and not giving the board what it already knows
console.log("setting firmware hash");
await rnode.setFirmwareHash(await rnode.getFirmwareHash());
@@ -1470,11 +1508,18 @@
console.log("couldn't auto reset board, probably did it automatically...");
}
alert("firmware hash has been set!");
} catch(e) {
console.log(e);
alert("failed to set firmware hash, please try again")
}
this.isSettingFirmwareHash = false;
// done
await rnode.close();
alert("firmware hash has been set!");
},
async enableTncMode() {