Add basic side panel toggle for stats

api/routes/users.js

@@ -148,6 +148,7 @@ users.route('/:id')
              res.locals.items = item;
            } else {
              err.status = codes.wrongrequest;
+             console.log(err);
              err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
            }
 

static/src/app/app.component.html

@@ -92,20 +92,32 @@
       </div>
     </div>
   </nav>
-
-  <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>
-
 </div>
 
 <div>
-  <mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
+  <button mat-icon-button
-  <div id="left">
+          (click)="toggleSidebar()"
+          *ngIf="router.url.includes('/stats')"
+          style="background: linear-gradient(-90deg, #dadada,transparent);">
+    <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
+    </mat-icon>
+    <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
+    </mat-icon>
+  </button>
+
+  <div id="left" *ngIf="sidebarOpen">
     <router-outlet></router-outlet>
   </div>
+
   <div id="right">
     <router-outlet name="right"></router-outlet>
   </div>
+
   <div id="footer">
     <router-outlet name="footer"></router-outlet>
   </div>
 </div>
+
+<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
+
+<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>

static/src/app/app.component.ts

@@ -21,6 +21,8 @@ export class AppComponent implements OnInit {
 
   loading = false;
 
+  sidebarOpen = true;
+
   scrollTopVisible = false;
 
   scrollBtnVisibleVal = 100;
@@ -44,6 +46,10 @@ export class AppComponent implements OnInit {
       sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-delete-24px.svg'));
     this.iconRegistry.addSvgIcon('stats-detail',
       sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/round-assessment-24px.svg'));
+    this.iconRegistry.addSvgIcon('chevron-left',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_left-24px.svg'));
+    this.iconRegistry.addSvgIcon('chevron-right',
+      sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/baseline-chevron_right-24px.svg'));
 
     router.events.subscribe(event => {
       if (event instanceof NavigationStart) {
@@ -65,6 +71,9 @@ export class AppComponent implements OnInit {
       || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
   }
 
+  toggleSidebar() {
+    this.sidebarOpen = !this.sidebarOpen;
+  }
 
   ngOnInit() {
     if (this.loginService.hasPermission(2)) {

static/src/app/material-components.module.ts

@@ -3,53 +3,18 @@
  */
 
 import {NgModule} from '@angular/core';
-import {
+import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
-  MatSidenavModule,
-  MatFormFieldModule,
-  MatInputModule,
-  MatButtonModule,
-  MatCheckboxModule,
-  MatTableModule,
-  MatPaginatorModule,
-  MatSortModule,
-  MatIconModule,
-  MatSnackBarModule,
-  MatToolbarModule,
-  MatExpansionModule,
-  MatProgressSpinnerModule
-} from '@angular/material';
 
 @NgModule({
   imports: [
-    // MatSidenavModule,
-    // MatFormFieldModule,
-    // MatInputModule,
-    // MatButtonModule,
-    // MatCheckboxModule,
-    // MatTableModule,
-    // MatPaginatorModule,
-    // MatSortModule,
-    // MatIconModule,
     MatSnackBarModule,
     MatProgressSpinnerModule,
-    // MatToolbarModule,
-    // MatExpansionModule
   ],
   exports: [
-    // MatSidenavModule,
-    // MatFormFieldModule,
-    // MatInputModule,
-    // MatButtonModule,
-    // MatCheckboxModule,
-    // MatTableModule,
-    // MatPaginatorModule,
-    // MatSortModule,
-    // MatIconModule,
     MatSnackBarModule,
     MatProgressSpinnerModule,
-    // MatToolbarModule,
-    // MatExpansionModule
   ]
 })
 
-export class MaterialComponentsModule {}
+export class MaterialComponentsModule {
+}

static/src/app/style/load-indicator.css

@@ -1,7 +1,7 @@
 .load-indicator {
   position: absolute;
   top: 50%;
-  z-index: 1;
+  z-index: 10000;
 }
 @media only screen and (max-width: 1199px) {
   .load-indicator {

static/src/app/users/edit-user/edit-user.component.ts

@@ -106,14 +106,14 @@ export class EditUserComponent implements OnInit {
       this.userService.submitUser(updateObject)
           .subscribe(user => {
               this.router.navigate(['..'], {relativeTo: this.route});
+              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
               return true;
             },
             error => {
               // duplicated user error message
-              if (error._body.includes('duplicate')) {
+              const errorMessage = error._body.includes('duplicate') ? Message.DUPLICATED_NAME_ERR : error._body;
-                this.snackBarService.showError(Message.DUPLICATED_NAME_ERR, 10000);
+              this.snackBarService.showError(errorMessage, 10000);
-              }
+            })
-            });
     }
   }
 

static/src/assets/icon/baseline-chevron_left-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

static/src/assets/icon/baseline-chevron_right-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

static/src/styles.css

@@ -45,7 +45,7 @@ form {
   min-width: 350px;
   max-width: 450px;
   float: left;
-  background: #ececec;
+  background: #f9f9f9;
   box-shadow: 2px 1px 5px grey;
 }
 
@@ -69,13 +69,13 @@ form {
 }
 
 .custom-snack-bar > simple-snack-bar {
-  display: block;
+  display: flex;
 }
 
 .snack-bar-button button {
-  color: white;
+  color: #ffffff;
-  border: 2px solid;
+  border: 1px solid;
-  padding: 3px 10px;
+  margin-left: 10px;
 }
 
 /* Icon theme */