refactor last part of frontend

frontend/src/app/app.component.html

@@ -1,6 +1,6 @@
 <app-header
   [enableHamburger]="hasSidebar && !isDesktop"
-  (onHamburgerClick)="onHamburgerClick()"
+  (onHamburgerClick)="sidebar.toggle()"
 ></app-header>
 
 <mat-sidenav-container class="grow-full">
@@ -9,9 +9,9 @@
   </mat-sidenav>
 
   <mat-sidenav-content>
-    <div class="sidenav-content" [class.container]="containerWrap">
+    <div class="sidenav-content" [class.container]="wrapContentWithContainer">
       <div class="header-spacer"></div>
-      <div class="grow-full" [class.container]="containerWrap">
+      <div class="grow-full" [class.container]="wrapContentWithContainer">
         <router-outlet></router-outlet>
       </div>
       <app-footer></app-footer>

frontend/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { Portal } from '@angular/cdk/portal';
-import { Component, Injector, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import {
   ActivatedRoute,
@@ -21,36 +21,19 @@ export class AppComponent implements OnInit {
 
   @ViewChild(MatSidenav) sidebar: MatSidenav;
 
-  containerWrap: boolean = true;
+  wrapContentWithContainer: boolean = true;
   sidebarPortal: Portal<any> | undefined = undefined;
 
   isDesktop: boolean = false;
   hasSidebar: boolean = false;
 
-  constructor(
+  public constructor(
     private router: Router,
     private activatedRoute: ActivatedRoute,
-    private breakPointObserver: BreakpointObserver,
-    private injector: Injector
+    private breakPointObserver: BreakpointObserver
   ) {}
 
-  private get routeData(): PRouteData {
-    let currentRoute: ActivatedRoute | null = this.activatedRoute;
-    let accumulate: PRouteData = {};
-    while (currentRoute !== null) {
-      const data = currentRoute.snapshot.data;
-      if (data !== undefined) {
-        accumulate = {
-          ...accumulate,
-          ...data,
-        };
-      }
-      currentRoute = currentRoute.firstChild;
-    }
-    return accumulate;
-  }
-
-  ngOnInit() {
+  public ngOnInit() {
     this.subscribeRouter();
     this.subscribeMobile();
   }
@@ -73,11 +56,8 @@ export class AppComponent implements OnInit {
       });
   }
 
-  onHamburgerClick() {
-    this.sidebar.toggle();
-  }
-
   private async onNavigationError(event: NavigationError) {
+    // 404 handler
     const error: Error = event.error;
     if (error.message.startsWith('Cannot match any routes'))
       this.router.navigate(['/error/404'], { replaceUrl: true });
@@ -85,7 +65,7 @@ export class AppComponent implements OnInit {
 
   private async onNavigationEnd(event: NavigationEnd) {
     const data = this.routeData;
-    this.containerWrap = !data.noContainer;
+    this.wrapContentWithContainer = !data.noContainer;
 
     if (data._sidebar_portal !== undefined) {
       this.sidebarPortal = data._sidebar_portal;
@@ -109,4 +89,21 @@ export class AppComponent implements OnInit {
       this.sidebar.opened = true;
     }
   }
+
+  // Recusively collect and merge all route data
+  private get routeData(): PRouteData {
+    let currentRoute: ActivatedRoute | null = this.activatedRoute;
+    let accumulate: PRouteData = {};
+    while (currentRoute !== null) {
+      const data = currentRoute.snapshot.data;
+      if (data !== undefined) {
+        accumulate = {
+          ...accumulate,
+          ...data,
+        };
+      }
+      currentRoute = currentRoute.firstChild;
+    }
+    return accumulate;
+  }
 }

frontend/src/app/app.routing.module.ts

@@ -7,12 +7,7 @@ import { SettingsRouteModule } from './routes/settings/settings.module';
 import { UploadRouteModule } from './routes/upload/upload.module';
 import { UserRouteModule } from './routes/user/user.module';
 import { ViewRouteModule } from './routes/view/view.module';
-// PageNotFoundRouteModule,
-// UploadRouteModule,
-// ProcessingRouteModule,
-// ViewRouteModule,
-// UserRouteModule,
-// SettingsRouteModule,
+
 const routes: PRoutes = [
   {
     path: '',

frontend/src/app/util/confirm-dialog/confirm-dialog.component.scss

@@ -1,3 +1,23 @@
 .button-red {
   background-color: #C62828;
 }
+
+.button-green {
+  background-color: #4CAF50;
+}
+
+.button-blue {
+  background-color: #2196F3;
+}
+
+.button-yellow {
+  background-color: #FFEB3B;
+}
+
+.button-grey {
+  background-color: #9E9E9E;
+}
+
+.button-orange {
+  background-color: #FF9800;
+}