feat: enhance device firmware page (#588)

* feat: enhance device firmware page

* remove confirmation dialog from firmware upgrade buttons

package-lock.json

@@ -3359,22 +3359,14 @@
       "dev": true
     },
     "electron": {
-      "version": "1.7.11",
+      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-1.7.11.tgz",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-1.8.3.tgz",
-      "integrity": "sha1-mTtqp54OeafPzDafTIE/vZoLCNk=",
+      "integrity": "sha512-ZZYSPB9tLh0m4uZOTcQllv/U8ts3GaMyEkBTooBr5rO+xl0WfQlecUcPuyw6aqtrZfNKsqLprorXKgsFmwcI5w==",
       "dev": true,
       "requires": {
-        "@types/node": "7.0.52",
+        "@types/node": "8.0.53",
         "electron-download": "3.3.0",
         "extract-zip": "1.6.5"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "7.0.52",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.52.tgz",
-          "integrity": "sha512-jjpyQsKGsOF/wUElNjfPULk+d8PKvJOIXk3IUeBYYmNCy5dMWfrI+JiixYNw8ppKOlcRwWTXFl0B+i5oGrf95Q==",
-          "dev": true
-        }
       }
     },
     "electron-builder": {

package.json

@@ -37,7 +37,7 @@
     "decompress": "4.2.0",
     "decompress-tarbz2": "^4.1.1",
     "devtron": "1.4.0",
-    "electron": "1.7.11",
+    "electron": "1.8.3",
     "electron-builder": "20.4.0",
     "electron-debug": "1.4.0",
     "electron-devtools-installer": "2.2.0",

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -15,22 +15,20 @@
             </i></p>
 
             <p>
-                Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
                 <button class="btn btn-primary"
                         [disabled]="flashFirmwareButtonDisbabled$ | async"
-                        (click)="onUpdateFirmware()">Flash firmware
+                        (click)="onUpdateFirmware()">
-                </button>
+                    Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
-            </p>
-
-            <p>
-                Flash firmware file <input id="firmware-file-select"
-                                           type="file"
-                                           [disabled]="flashFirmwareButtonDisbabled$ | async"
-                                           (change)="changeFile($event)">
-                <button class="btn btn-primary"
-                        [disabled]="flashFirmwareButtonDisbabled$ | async"
-                        (click)="onUpdateFirmwareWithFile()">Flash firmware
                 </button>
+                <label class="btn btn-primary btn-file"
+                       [class.disabled]="flashFirmwareButtonDisbabled$ | async">
+                    Choose firmware file and flash it
+                    <input id="firmware-file-select"
+                           type="file"
+                           accept=".tar.bz2"
+                           [disabled]="flashFirmwareButtonDisbabled$ | async"
+                           (change)="changeFile($event)">
+                </label>
             </p>
         </div>
 

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -23,7 +23,6 @@ export class DeviceFirmwareComponent implements OnDestroy {
     getAgentVersionInfo$: Observable<VersionInformation>;
     firmwareOkButtonDisabled$: Observable<boolean>;
 
-    arrayBuffer: Uint8Array;
     @ViewChild('scrollMe') divElement: ElementRef;
 
     constructor(private store: Store<AppState>) {
@@ -48,14 +47,6 @@ export class DeviceFirmwareComponent implements OnDestroy {
         this.store.dispatch(new UpdateFirmwareAction());
     }
 
-    onUpdateFirmwareWithFile(): void {
-        if (!this.arrayBuffer) {
-            return;
-        }
-
-        this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(this.arrayBuffer)));
-    }
-
     onOkButtonClick(): void {
         this.store.dispatch(new UpdateFirmwareOkButtonAction());
     }
@@ -64,14 +55,13 @@ export class DeviceFirmwareComponent implements OnDestroy {
         const files = event.srcElement.files;
 
         if (files.length === 0) {
-            this.arrayBuffer = null;
-
             return;
         }
 
         const fileReader = new FileReader();
         fileReader.onloadend = function () {
-            this.arrayBuffer = new Uint8Array(fileReader.result);
+            const arrayBuffer = new Uint8Array(fileReader.result);
+            this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(arrayBuffer)));
         }.bind(this);
         fileReader.readAsArrayBuffer(files[0]);
     }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -128,12 +128,14 @@
         <ul [@toggler]="animation['agent']">
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/settings']">Settings</a>
+                    <a [routerLink]="['/settings']"
+                       [class.disabled]="updatingFirmware$ | async">Settings</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item">
                 <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                    <a [routerLink]="['/about']">About</a>
+                    <a [routerLink]="['/about']"
+                       [class.disabled]="updatingFirmware$ | async">About</a>
                 </div>
             </li>
         </ul>

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -9,6 +9,10 @@
 
 a {
     color: #333;
+
+    &.disabled {
+        opacity: 0.65;
+    }
 }
 
 // General list styles for the sidebar-menu.
@@ -112,6 +116,10 @@ ul {
                 &:focus {
                     text-decoration: none;
                 }
+
+                &.disabled {
+                    opacity: 0.65;
+                }
             }
         }
     }