* Revert to legacy load indicator and improve it

* Fix enter submit of forgotten forms

static/src/app/app.component.css

@@ -8,6 +8,12 @@ li {
   display: inline;
 }
 
+.sidebar-toggle-btn {
+  background: linear-gradient(-90deg, #e8e5e5, #ffffff);
+  margin-left: -12px;
+  z-index: 500;
+}
+
 .content {
   padding-left: 15px;
   padding-right: 15px;

static/src/app/app.component.html

@@ -96,9 +96,9 @@
 
 <div>
   <button mat-icon-button
+          class="sidebar-toggle-btn"
           (click)="toggleSidebar()"
-          *ngIf="showSidebarToggleBtn"
+          *ngIf="showSidebarToggleBtn">
-          style="background: linear-gradient(-90deg, #e8e5e5,#ffffff);margin-left: -12px;z-index:500;">
     <mat-icon svgIcon="chevron-left" *ngIf="sidebarOpen">
     </mat-icon>
     <mat-icon svgIcon="chevron-right" *ngIf="!sidebarOpen">
@@ -121,6 +121,6 @@
   </div>
 </div>
 
-<mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
+<span class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
 <button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>

static/src/app/app.component.ts

@@ -34,6 +34,8 @@ export class AppComponent implements OnInit {
 
   leftBoxShadow;
 
+  // a map of svgIcon names and associated svg file names
+  // to load from assets/icon folder
   svgIcons = {
     'add': 'outline-add_box-24px',
     'add-user': 'twotone-person_add-24px',
@@ -63,17 +65,20 @@ export class AppComponent implements OnInit {
         this.spinnerService.activate();
       }
       if (event instanceof NavigationEnd) {
+        this.spinnerService.deactivate();
         const currentUrl = this.router.url;
 
-        this.spinnerService.deactivate();
         // scroll to top on route from army overview to user detail and back
         if (currentUrl.includes('/overview')) {
           this.scrollToTop();
         }
+
         // show sidebar menu on initial page access
         this.sidebarOpen = true;
         this.showSidebarToggleBtn = currentUrl.includes('/stats');
 
+        // remove sidebar styling for components that are rendered inside,
+        // but not really shown as sidebar (legacy)
         if (currentUrl.includes('/login') ||
           currentUrl.includes('/signup') ||
           currentUrl.endsWith('/404')) {
@@ -87,13 +92,14 @@ export class AppComponent implements OnInit {
     });
   }
 
-  toggleSpinner(active){
+  toggleSpinner(active) {
     this.loading = active;
   }
 
   initMaterialSvgIcons() {
     Object.keys(this.svgIcons).forEach(key => {
-      const fileUri = '../assets/icon/' + this.svgIcons[key] + '.svg';
+      const fileUri = '../assets/icon/'.concat(this.svgIcons[key])
+                                       .concat('.svg');
       this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
     });
   }

static/src/app/app.module.ts

@@ -23,13 +23,13 @@ import {UserService} from './services/army-management/user.service';
 import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
-import {MaterialComponentsModule} from './material-components.module';
 import {HttpClientModule} from '@angular/common/http';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
+import {MatSnackBarModule} from '@angular/material';
 
 @NgModule({
   imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
-    ClipboardModule, MaterialComponentsModule],
+    ClipboardModule, MatSnackBarModule],
   providers: [
     HttpClient,
     LoginService,

static/src/app/login/login.component.html

@@ -15,10 +15,6 @@
         <span *ngIf="!loading">Anmelden</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
-      <span *ngIf="showErrorLabel"
-            class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-      </span>
     </div>
 
 

static/src/app/login/login.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -12,16 +13,13 @@ import {RouteConfig} from '../app.config';
 
 export class LoginComponent implements OnInit {
 
-  showErrorLabel = false;
-
-  error: string;
-
   loading = false;
 
   returnUrl: string;
 
   constructor(private router: Router,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -40,11 +38,7 @@ export class LoginComponent implements OnInit {
               this.router.navigate([this.returnUrl]);
             },
             error => {
-              this.error = error._body;
+              this.snackBarService.showError(error._body, 15000);
-              this.showErrorLabel = true;
-              setTimeout(() => {
-                this.showErrorLabel = false;
-              }, 4000);
               this.loading = false;
             });
     }

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

@@ -1,20 +0,0 @@
-/**
- * Angular material imports
- */
-
-import {NgModule} from '@angular/core';
-import {MatProgressSpinnerModule, MatSnackBarModule} from '@angular/material';
-
-@NgModule({
-  imports: [
-    MatSnackBarModule,
-    MatProgressSpinnerModule,
-  ],
-  exports: [
-    MatSnackBarModule,
-    MatProgressSpinnerModule,
-  ]
-})
-
-export class MaterialComponentsModule {
-}

static/src/app/statistic/campaign/campaign-submit/campaign-submit.component.ts

@@ -44,7 +44,7 @@ export class CampaignSubmitComponent {
             this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate([redirectSuccessUrl + campaign._id], {relativeTo: this.route});
           },
-          error => this.snackBarService.showError(error._body.error.message, 30000));
+          error => this.snackBarService.showError(error._body.error.message, 15000));
   }
 
   cancel() {

static/src/app/statistic/war/war-edit/war-edit.component.ts

@@ -12,8 +12,7 @@ import {Message} from '../../../i18n/de.messages';
 @Component({
   selector: 'war-edit',
   templateUrl: './war-edit.component.html',
-  styleUrls: ['./war-edit.component.css', '../../../style/load-indicator.css',
+  styleUrls: ['./war-edit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
-    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarEditComponent {
 
@@ -43,7 +42,7 @@ export class WarEditComponent {
             this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
             this.router.navigate(['../../war/' + war._id], {relativeTo: this.route});
           },
-          error => this.snackBarService.showError(error._body.error.message, 30000));
+          error => this.snackBarService.showError(error._body.error.message, 15000));
   }
 
   cancel() {

static/src/app/statistic/war/war-submit/war-submit.component.html

@@ -49,6 +49,4 @@
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 </form>

static/src/app/statistic/war/war-submit/war-submit.component.ts

@@ -5,13 +5,13 @@ import {WarService} from '../../../services/logs/war.service';
 import {War} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
 import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
+import {SpinnerService} from '../../../services/user-interface/spinner/spinner.service';
 
 
 @Component({
   selector: 'war-submit',
   templateUrl: './war-submit.component.html',
-  styleUrls: ['./war-submit.component.css', '../../../style/load-indicator.css',
+  styleUrls: ['./war-submit.component.css', '../../../style/entry-form.css', '../../../style/overview.css']
-    '../../../style/entry-form.css', '../../../style/overview.css']
 })
 export class WarSubmitComponent {
 
@@ -25,14 +25,13 @@ export class WarSubmitComponent {
 
   loading = false;
 
-  error;
-
   @ViewChild(NgForm) form: NgForm;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
               private snackBarService: SnackBarService,
+              private spinnerService: SpinnerService,
               public campaignService: CampaignService) {
   }
 
@@ -53,15 +52,17 @@ export class WarSubmitComponent {
     }
     const file: File = this.fileList[0];
     this.loading = true;
+    this.spinnerService.activate();
 
     this.warService.submitWar(this.war, file)
         .subscribe(war => {
             this.router.navigate(['../war/' + war._id], {relativeTo: this.route});
           },
           error => {
+            this.spinnerService.deactivate();
             this.loading = false;
             const errorMsg = JSON.parse(error._body).error.message;
-            this.snackBarService.showError('Error: '.concat(errorMsg), 10000);
+            this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
           });
   }
 

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

@@ -2,43 +2,36 @@
   position: absolute;
   top: 50%;
   z-index: 10000;
+  left: 46%;
+  filter: drop-shadow(3px 1px 2px #dadada);
 }
-@media only screen and (max-width: 1199px) {
+
-  .load-indicator {
-    left: 46%;
-  }
-}
 @media only screen and (min-width: 1200px) {
   .load-indicator {
-    left: 46%;
+    left: 47.4%;
   }
 }
 @media only screen and (min-width: 1376px) {
   .load-indicator {
-    left: 46.5%;
+    left: 48%;
   }
 }
 @media only screen and (min-width: 1600px) {
   .load-indicator {
-    left: 47.5%;
+    left: 48.2%;
   }
 }
 @media only screen and (min-width: 1925px) {
   .load-indicator {
-    left: 48%;
+    left: 48.7%;
   }
 }
 
-:host /deep/ .mat-progress-spinner circle, .mat-spinner circle {
-  stroke: #303030 !important;
-  stroke-linecap: round;
-}
-
 .load-arrow {
   background: url(../../assets/loading.png) no-repeat;
   display: block;
-  width: 80px;
+  width: 70px;
-  height: 80px;
+  height: 70px;
 }
 
 /* Loading Animation */