From fe94b999f5f059825cb1879fb505076a2f729d18 Mon Sep 17 00:00:00 2001 From: Thomas Michaelis Date: Tue, 26 Dec 2023 16:07:24 +0100 Subject: [PATCH] Add backuplans card to device manager --- .../device-table-right-sidebar.component.html | 5 +- .../default-layout.component.html | 2 +- ...ice-manage-backupplans-item.component.html | 92 +++++++++++++++++++ ...ice-manage-backupplans-item.component.scss | 4 + ...-manage-backupplans-item.component.spec.ts | 23 +++++ ...evice-manage-backupplans-item.component.ts | 32 +++++++ .../device-manage-backupplans.component.html | 10 ++ .../device-manage-backupplans.component.scss | 0 ...evice-manage-backupplans.component.spec.ts | 23 +++++ .../device-manage-backupplans.component.ts | 32 +++++++ .../devices-manage.component.html | 17 +++- .../devices-manage.component.ts | 26 +++++- web/src/app/pages/devices/devices.module.ts | 1 + web/src/app/services/backupjob.service.ts | 11 +++ web/src/app/services/device.service.spec.ts | 16 ---- 15 files changed, 269 insertions(+), 25 deletions(-) create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.html create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.scss create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.spec.ts create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.ts create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.html create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.scss create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.spec.ts create mode 100644 web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.ts create mode 100644 web/src/app/services/backupjob.service.ts delete mode 100644 web/src/app/services/device.service.spec.ts diff --git a/web/src/app/layouts/components/device-table-right-sidebar/device-table-right-sidebar.component.html b/web/src/app/layouts/components/device-table-right-sidebar/device-table-right-sidebar.component.html index b464fe0..0f8aebc 100644 --- a/web/src/app/layouts/components/device-table-right-sidebar/device-table-right-sidebar.component.html +++ b/web/src/app/layouts/components/device-table-right-sidebar/device-table-right-sidebar.component.html @@ -122,11 +122,12 @@

-
+ diff --git a/web/src/app/layouts/default-layout/default-layout.component.html b/web/src/app/layouts/default-layout/default-layout.component.html index 184e23e..98f137a 100644 --- a/web/src/app/layouts/default-layout/default-layout.component.html +++ b/web/src/app/layouts/default-layout/default-layout.component.html @@ -3,7 +3,7 @@
-
+
diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.html b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.html new file mode 100644 index 0000000..527f8d2 --- /dev/null +++ b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.html @@ -0,0 +1,92 @@ +
+
+
+ {{ name }} + + + + + + + +
+
+ + +
+
+
+
+
+

Status: {{ BackupJobStatus[jobStatus] }}

+
+
+ +
+
+ + + + + + + + + + + + + Next start: 01.01.1970 14:00 +
+ Last run: Successfully + + + + + +
+
49%
+
+ +
+
+ + + + + + + + +
+
49%
+
+ +
+
+ + + + + + + +
+
49%
+
+ +
+
+ + + + +
+
diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.scss b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.scss new file mode 100644 index 0000000..d276b39 --- /dev/null +++ b/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; +} diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.spec.ts b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.spec.ts new file mode 100644 index 0000000..71045ce --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeviceManageBackupplansItemComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeviceManageBackupplansItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.ts b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans-item/device-manage-backupplans-item.component.ts new file mode 100644 index 0000000..36a06e2 --- /dev/null +++ b/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 ; + +} diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.html b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.html new file mode 100644 index 0000000..2bf2821 --- /dev/null +++ b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.html @@ -0,0 +1,10 @@ + + + + + + +
+
+
New Backup plan
+
diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.scss b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.spec.ts b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.spec.ts new file mode 100644 index 0000000..5d4a963 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DeviceManageBackupplansComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DeviceManageBackupplansComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.ts b/web/src/app/pages/devices/devices-manage/device-manage-backupplans/device-manage-backupplans.component.ts new file mode 100644 index 0000000..2846be6 --- /dev/null +++ b/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; + +} diff --git a/web/src/app/pages/devices/devices-manage/devices-manage.component.html b/web/src/app/pages/devices/devices-manage/devices-manage.component.html index 4e0d415..56fb553 100644 --- a/web/src/app/pages/devices/devices-manage/devices-manage.component.html +++ b/web/src/app/pages/devices/devices-manage/devices-manage.component.html @@ -1,12 +1,25 @@ -
+
- + {{device.name}}
+ +
+
+

Backup plans

+
+
+ + + + +
+
+
diff --git a/web/src/app/pages/devices/devices-manage/devices-manage.component.ts b/web/src/app/pages/devices/devices-manage/devices-manage.component.ts index e228390..53aa1aa 100644 --- a/web/src/app/pages/devices/devices-manage/devices-manage.component.ts +++ b/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)!; } diff --git a/web/src/app/pages/devices/devices.module.ts b/web/src/app/pages/devices/devices.module.ts index e9ce78b..9b7f168 100644 --- a/web/src/app/pages/devices/devices.module.ts +++ b/web/src/app/pages/devices/devices.module.ts @@ -21,6 +21,7 @@ const routes: Routes = [ }, { path: 'manage/:id', + pathMatch: "full", component: DevicesManageComponent } diff --git a/web/src/app/services/backupjob.service.ts b/web/src/app/services/backupjob.service.ts new file mode 100644 index 0000000..624f7b2 --- /dev/null +++ b/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() { } +} diff --git a/web/src/app/services/device.service.spec.ts b/web/src/app/services/device.service.spec.ts deleted file mode 100644 index d55f5fb..0000000 --- a/web/src/app/services/device.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { DeviceService } from './device.service'; - -describe('DeviceService', () => { - let service: DeviceService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(DeviceService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -});