[SOLVED] Ongoing status updates with new UI for Gear Isolation

[agent_kith]

Been a busy week at work trying to finish up some work thing so didn't had a lot of time to dedicate to Snakeoil coding. Here is the Systems page I've been working on and off while I can.
 

While it is simple looking there's a lot of changes under the hood. E.g. I am trying to work on a simpler system to upload firmware. If this works it will allow me to do away with running PHP on the Snakeoil process, meaning one less thing that's running on the system. There are still challenges, namely to get this to actually work, and how to disable PHP while still allowing users to roll back the upgrade if they have to.

The changes under the hood is what's more important. It makes for cleaner (and more modular code), allowing me to update this better in the future. e.g. this page is now rendered like so:
 

Code:

<div class="row" *ngSwitchCase="Mode.NORMAL">
    <ngx-system-uploader class="col-md-12">
    </ngx-system-uploader>

    <ngx-system-commands class="col-md-12" [(config)]="config">
    </ngx-system-commands>
  </div>

  <ngx-system-reboot *ngSwitchCase="Mode.REBOOT" [(config)]="config">
  </ngx-system-reboot>

And the command buttons is now a single loop (ngFor), with the commands defined in it's own data structure.
 

Code:

<nb-card>
      <nb-card-header>
        {{ 'SYSTEM.COMMANDS' | translate }}
      </nb-card-header>
      <nb-card-body class="row">
        <div class="col-lg-3 col-md-4 col-sm-6"
            *ngFor="let command of commands">
          <button nbButton class="command" shape="round"
              (click)="onCmdClick(command.label)" nbTooltip="{{ command.tooltip | translate }}">
            <i class="{{command.icon}}"></i> 
            {{ command.label | translate }}
          </button>
        </div>
      </nb-card-body>
    </nb-card>

The old GUI code, the button codes are created on their own, and while that works, it's not easily expandable. This new design is heaps easier, and more readable. All this means moving forward the code will be more maintainable, and it's easier to add/remove things in the future. (e.g. I can add/remove commands without changing any HTML code.

In other words, this new GUI will take some time to finish as I rework everything to the Angular 11 standards. I really want to make this right, and that takes time.