Add backuplans card to device manager

web/src/app/layouts/components/device-table-right-sidebar/device-table-right-sidebar.component.html

@@ -122,11 +122,12 @@ <h3><i class="fas fa-comment"></i></h3>
 
 
   <div class="text-center">
-    <button class="btn btn-outline-primary btn-lg">
-      <i class="fas fa-history" ngbTooltip="Backup history" style="margin-right: 4px"></i> Backup jobs
+    <button class="btn btn-outline-primary btn-lg" routerLink="/devices/manage/{{device.id}}">
+      <i class="fas fa-gear" ngbTooltip="Manage Device" style="margin-right: 4px"></i> Manage device
     </button>
   </div>
 
+
   <!-- TODO: Delete btn (with question dialog 'delete device with backups or without' and a failsafe delete confirmation)  -->
 
 </ng-container>

web/src/app/layouts/default-layout/default-layout.component.html

@@ -3,7 +3,7 @@
     <div class="col-2 col-xl-2 col-lg-2 col-md-3 col-sm-4 rborder">
       <app-left-sidebar></app-left-sidebar>
     </div>
-    <div class="col">
+    <div class="col mr-1">
       <app-top-headerbar></app-top-headerbar>
 
       <router-outlet></router-outlet>

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.html

@@ -0,0 +1,92 @@
+<div class="backup-accordion">
+  <div class="d-flex bd-highlight" style="cursor: pointer" (click)="this.expanded = !this.expanded">
+    <div class="p-2 flex-grow-1 bd-highlight">
+      <b >{{ name }}</b>
+
+      <i class="ml-1 fas fa-stop-circle" style="color: #c0c0c0" *ngIf="jobStatus == BackupJobStatus.DISABLED"></i>
+      <i class="ml-1 fas fa-spinner fa-spin"  style="color: #97dc71" *ngIf="jobStatus == BackupJobStatus.ACTIVE"></i>
+      <i class="ml-1 fas fa-exclamation-triangle" style="color: #f6e052" *ngIf="jobStatus == BackupJobStatus.WARNING"></i>
+      <i class="ml-1 fas fa-exclamation-circle" style="color: #da706a" *ngIf="jobStatus == BackupJobStatus.ERROR"></i>
+
+
+    </div>
+    <div class="p-2 bd-highlight">
+      <span  *ngIf="expanded"><i class="fas fa-angle-up"></i></span>
+      <span  *ngIf="!expanded"><i class="fas fa-angle-down"></i></span>
+    </div>
+  </div>
+  <div *ngIf="expanded" class="p-2">
+    <div class="d-flex bd-highlight">
+      <div class="flex-grow-1 bd-highlight">
+        <p>Status: {{ BackupJobStatus[jobStatus] }}</p>
+      </div>
+      <div class="pl-2 bd-highlight">
+        <button class="btn btn-sm btn-outline-secondary" routerLink="/jobs/x">Settings</button>
+      </div>
+    </div>
+
+
+    <!---------------------------------------------------------------------->
+
+      <ng-container *ngIf="jobStatus == BackupJobStatus.DISABLED">
+        <!-- Disabled Job -->
+        <div class="alert alert-warning" role="alert">
+          This backup plan is currently disabled. Edit the job to reactivate the backup.
+          <button class="btn btn-sm btn-success pl-2">Edit / Reactivate</button>
+        </div>
+
+      </ng-container>
+
+    <ng-container *ngIf="jobStatus == BackupJobStatus.IDLE">
+      <!-- Disabled Job -->
+      Next start: 01.01.1970 14:00
+      <br>
+      Last run: Successfully
+
+    </ng-container>
+      <ng-container *ngIf="jobStatus == BackupJobStatus.ACTIVE">
+        <!-- Running Job -->
+        <ngb-progressbar class="mb-2" type="success" [value]="49" height="10px"></ngb-progressbar>
+        <div class="d-flex bd-highlight">
+          <div class="flex-grow-1 bd-highlight">49%</div>
+          <div class="pl-2 bd-highlight">
+            <button class="btn btn-sm btn-outline-danger">Cancel</button>
+          </div>
+        </div>
+
+      </ng-container>
+
+      <ng-container *ngIf="jobStatus == BackupJobStatus.WARNING">
+        <!-- Running Job -->
+        <div class="alert alert-warning" role="alert">
+          <b>Warning: </b> ABC1234ABC
+        </div>
+
+        <ngb-progressbar class="mb-2" type="warning" [value]="49" height="10px"></ngb-progressbar>
+        <div class="d-flex bd-highlight">
+          <div class="flex-grow-1 bd-highlight">49%</div>
+          <div class="pl-2 bd-highlight">
+            <button class="btn btn-sm btn-outline-danger">Cancel</button>
+          </div>
+        </div>
+
+      </ng-container>
+      <ng-container *ngIf="jobStatus == BackupJobStatus.ERROR">
+        <!-- Running Job -->
+        <div class="alert alert-danger" role="alert">
+          <b>Error: </b> ABC1234ABC
+        </div>
+
+        <ngb-progressbar class="mb-2" type="danger" [value]="49" height="10px"></ngb-progressbar>
+        <div class="d-flex bd-highlight">
+          <div class="flex-grow-1 bd-highlight">49%</div>
+          <div class="pl-2 bd-highlight">
+            <button class="btn btn-sm btn-outline-danger">Retry</button>
+          </div>
+        </div>
+
+      </ng-container>
+
+
+  </div>
+</div>

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.scss

@@ -0,0 +1,4 @@
+.backup-accordion {
+  border-bottom: 1px solid #313436;
+  user-select: none;
+}

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceManageBackupplansItemComponent } from './device-manage-backupplans-item.component';
+
+describe('DeviceManageBackupplansItemComponent', () => {
+  let component: DeviceManageBackupplansItemComponent;
+  let fixture: ComponentFixture<DeviceManageBackupplansItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeviceManageBackupplansItemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeviceManageBackupplansItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.ts

@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+import {NgIf} from "@angular/common";
+import {BackupJobStatus} from "../../../../../services/backupjob.service";
+import {NgbProgressbar} from "@ng-bootstrap/ng-bootstrap";
+import {RouterLink} from "@angular/router";
+
+
+@Component({
+  selector: 'app-device-manage-backupplans-item',
+  standalone: true,
+  templateUrl: './device-manage-backupplans-item.component.html',
+  imports: [
+    NgIf,
+    NgbProgressbar,
+    RouterLink
+  ],
+  styleUrl: './device-manage-backupplans-item.component.scss'
+})
+export class DeviceManageBackupplansItemComponent {
+
+  @Input()
+  public name: string | undefined;
+
+  @Input()
+  public expanded = false;
+
+  @Input()
+  public jobStatus: BackupJobStatus = BackupJobStatus.IDLE;
+
+  BackupJobStatus : typeof BackupJobStatus = BackupJobStatus ;
+
+}

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.html

@@ -0,0 +1,10 @@
+<app-device-manage-backupplans-item name="Default backup plan"></app-device-manage-backupplans-item>
+<app-device-manage-backupplans-item [jobStatus]="BackupJobStatus.ACTIVE" [expanded]="true" name="Custom backup"></app-device-manage-backupplans-item>
+<app-device-manage-backupplans-item [jobStatus]="BackupJobStatus.ERROR"  name="My backup plan"></app-device-manage-backupplans-item>
+<app-device-manage-backupplans-item [jobStatus]="BackupJobStatus.DISABLED"  name="Weekly backup plan"></app-device-manage-backupplans-item>
+<app-device-manage-backupplans-item [jobStatus]="BackupJobStatus.WARNING"  name="Full backup"></app-device-manage-backupplans-item>
+
+<hr>
+<div class="text-end">
+  <div class="btn btn-outline-primary">New Backup plan</div>
+</div>

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceManageBackupplansComponent } from './device-manage-backupplans.component';
+
+describe('DeviceManageBackupplansComponent', () => {
+  let component: DeviceManageBackupplansComponent;
+  let fixture: ComponentFixture<DeviceManageBackupplansComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeviceManageBackupplansComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeviceManageBackupplansComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import {
+    NgbAccordionBody,
+    NgbAccordionButton,
+    NgbAccordionCollapse,
+    NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem
+} from "@ng-bootstrap/ng-bootstrap";
+import {
+  DeviceManageBackupplansItemComponent
+} from "./device-manage-backupplans-item/device-manage-backupplans-item.component";
+import {BackupJobStatus} from "../../../../services/backupjob.service";
+
+@Component({
+  selector: 'app-device-manage-backupplans',
+  standalone: true,
+  imports: [
+    NgbAccordionBody,
+    NgbAccordionButton,
+    NgbAccordionCollapse,
+    NgbAccordionDirective,
+    NgbAccordionHeader,
+    NgbAccordionItem,
+    DeviceManageBackupplansItemComponent
+  ],
+  templateUrl: './device-manage-backupplans.component.html',
+  styleUrl: './device-manage-backupplans.component.scss'
+})
+export class DeviceManageBackupplansComponent {
+
+  BackupJobStatus = BackupJobStatus;
+
+}

web/src/app/pages/devices/devices-manage/devices-manage.component.html

@@ -1,12 +1,25 @@
-<div class="row">
+<div class="row mt-3">
   <div class="col-6">
     <div class="card">
       <div class="card-body">
-
+          {{device.name}}
       </div>
     </div>
   </div>
   <div class="col-6">
 
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Backup plans</h3>
+      </div>
+      <div class="card-body">
+
+        <app-device-manage-backupplans></app-device-manage-backupplans>
+
+
+      </div>
+    </div>
+
   </div>
 </div>

web/src/app/pages/devices/devices-manage/devices-manage.component.ts

@@ -1,19 +1,37 @@
 import { Component } from '@angular/core';
 import {Device} from "../../../services/device.service";
 import {dummyDevices} from "../../../../../test/data/devices";
+import {ActivatedRoute, Router} from "@angular/router";
+import {
+  NgbAccordionBody,
+  NgbAccordionButton, NgbAccordionCollapse,
+  NgbAccordionDirective,
+  NgbAccordionHeader,
+  NgbAccordionItem
+} from "@ng-bootstrap/ng-bootstrap";
+import {DeviceManageBackupplansComponent} from "./device-manage-backupplans/device-manage-backupplans.component";
 
 @Component({
   selector: 'app-devices-manage',
   standalone: true,
-  imports: [],
+  imports: [
+    NgbAccordionDirective,
+    NgbAccordionHeader,
+    NgbAccordionItem,
+    NgbAccordionButton,
+    NgbAccordionCollapse,
+    NgbAccordionBody,
+    DeviceManageBackupplansComponent,
+  ],
   templateUrl: './devices-manage.component.html',
   styleUrl: './devices-manage.component.scss'
 })
 export class DevicesManageComponent {
-  public device: Device | undefined;
+  public device: Device;
 
-  constructor() {
-    this.device = dummyDevices[0];
+  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
+    const deviceId = activatedRoute.snapshot.params["id"];
+    this.device = dummyDevices.find(value => value.id == deviceId)!;
 
   }
 

web/src/app/pages/devices/devices.module.ts

@@ -21,6 +21,7 @@ const routes: Routes = [
       },
       {
         path: 'manage/:id',
+        pathMatch: "full",
         component: DevicesManageComponent
       }
 

web/src/app/services/backupjob.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+export enum BackupJobStatus {
+  DISABLED, IDLE, ACTIVE, WARNING, ERROR
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class BackupjobService {
+
+  constructor() { }
+}