static/src/app/app.component.html

@@ -1,14 +1,10 @@
 <div>
   <mat-sidenav-container>
     <mat-sidenav-content>
-      <app-header (sidenavToggle)="sidenav.toggle()"
-                  (userLogout)="logout()">
-      </app-header>
+      <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
     </mat-sidenav-content>
     <mat-sidenav #sidenav role="navigation">
-      <app-sidenav-list (sidenavClose)="sidenav.close()"
-                        (userLogout)="logout()">
-      </app-sidenav-list>
+      <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
     </mat-sidenav>
   </mat-sidenav-container>
 

static/src/app/app.component.ts

@@ -6,8 +6,6 @@ import {MatIconRegistry} from '@angular/material';
 import {SpinnerService} from './services/user-interface/spinner/spinner.service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
 import {Observable} from 'rxjs';
-import {LoginService} from './services/app-user-service/login-service';
-import {BaseConfig, RouteConfig} from './app.config';
 
 
 @Component({
@@ -66,7 +64,6 @@ export class AppComponent implements OnInit {
   };
 
   constructor(private router: Router,
-              private loginService: LoginService,
               private iconRegistry: MatIconRegistry,
               private sanitizer: DomSanitizer,
               private spinnerService: SpinnerService,
@@ -111,14 +108,6 @@ export class AppComponent implements OnInit {
     });
   }
 
-  logout() {
-    this.loginService.logout();
-    setTimeout(() => {
-      this.router.navigate([RouteConfig.overviewPath]);
-    }, 500);
-  }
-
-
   scrollToTop() {
     this.document.body.scrollTop = 0; // For Safari
     this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

static/src/app/app.config.ts

@@ -1,5 +1,7 @@
 export class AppConfig {
+
   public readonly apiUrl = '/api';
+
   public readonly apiAppUserPath = this.apiUrl + '/account/';
   public readonly apiAuthenticationPath = this.apiUrl + '/authenticate';
   public readonly apiAwardPath = this.apiUrl + '/awardings';
@@ -42,14 +44,6 @@ export const RouteConfig = {
   decorationOverviewPath: 'public/decorations',
 };
 
-export const BaseConfig = {
-  responsive: {
-    breakpointPx: 959,
-  },
-  i18n: {
-    availableLanguages: [
-      'de',
-      'en'
-    ]
-  }
+export const ResponsiveConfig = {
+  breakpointPx: 959,
 };

static/src/app/common/navigation/navigation-header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <div fxHide.gt-sm style="position:absolute;">
+  <div fxHide.gt-sm>
     <button mat-icon-button (click)="onToggleSidenav()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
@@ -11,7 +11,7 @@
     <span class="version-label">v{{version}}</span>
   </div>
   <div fxHide.lt-md>
-    <ul fxLayout="row" class="navigation-items">
+    <ul fxLayout="row" fxLayoutGap="15px" class="navigation-items">
       <li routerLinkActive="active">
         <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
       </li>
@@ -107,7 +107,7 @@
         </mat-menu>
       </li>
       <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
-        <a (click)="doUserLogout()">{{'navigation.top.logout' | translate}}</a>
+        <a (click)="logout()">{{'navigation.top.logout' | translate}}</a>
       </li>
       <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
         <a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
@@ -120,13 +120,13 @@
           </a>
         </mat-list-item>
         <mat-menu #menuLanguage="matMenu">
-          <button mat-menu-item (click)="setLanguage(availableLanguages[0])">
-            <mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
-            <span class="text-uppercase">{{availableLanguages[0]}}</span>
+          <button mat-menu-item (click)="setLanguage(languages[0])">
+            <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
+            <span class="text-uppercase">{{languages[0]}}</span>
           </button>
-          <button mat-menu-item (click)="setLanguage(availableLanguages[1])">
-            <mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
-            <span class="text-uppercase">{{availableLanguages[1]}}</span>
+          <button mat-menu-item (click)="setLanguage(languages[1])">
+            <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
+            <span class="text-uppercase">{{languages[1]}}</span>
           </button>
         </mat-menu>
       </li>

static/src/app/common/navigation/navigation-header.component.scss

@@ -1,70 +1,90 @@
-@import url('../../style/blink-indicator.scss');
+li {
+  height: 50px;
+  line-height: 46px;
+}
+
+li a {
+  font-size: 16px;
+  text-decoration: none;
+  color: #9d9d9d;
+  padding: 16px 5px;
+}
+
+li mat-list-item {
+  cursor: pointer;
+}
+
+li:hover, li.active {
+  a {
+    color: white;
+  }
+}
+
+.navigation-items {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mat-toolbar.mat-primary {
+  background: #222222;
+}
 
 mat-toolbar {
   height: 2.5em;
   min-height: 50px;
-
-  &.mat-toolbar.mat-primary {
-    background: #222222;
-  }
-
-  .navigation-items {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    height: 50px;
-    line-height: 46px;
-    padding: 0 10px;
-    cursor: pointer;
-
-    mat-list-item {
-      cursor: pointer;
-    }
-
-    a {
-      font-size: 16px;
-      text-decoration: none;
-      color: #9d9d9d;
-      padding: 16px 5px;
-    }
-
-    &:hover {
-      a {
-        color: white;
-      }
-    }
-
-    &.active {
-      @extend li:hover;
-
-      background: #000000;
-    }
-  }
-
-  .brand-logo {
-    padding-top: 6px;
-    margin-right: -10px;
-
-    mat-icon {
-      color: #dadada;
-      width: 135px;
-      height: 40px;
-      stroke: #dadada;
-    }
-
-    .version-label {
-      position: relative;
-      left: -42px;
-      font-size: 12px;
-      color: #bebebe;
-    }
-
-    @media all and (max-width: 959px) {
-      margin: auto;
-    }
-  }
-
+}
+
+.brand-logo {
+  padding-top: 6px;
+  margin-right: -10px;
+
+  mat-icon {
+    color: #dadada;
+    width: 135px;
+    height: 40px;
+    stroke: #dadada;
+  }
+
+  .version-label {
+    position: relative;
+    left: -42px;
+    font-size: 12px;
+    color: #bebebe;
+  }
+
+  @media all and (max-width: 959px) {
+    margin: auto;
+  }
+}
+
+.unprocessed {
+  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: color-blink;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+.unprocessed-child {
+  background-color: orange;
+}
+
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}
+
+@keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
 }

static/src/app/common/navigation/navigation-header.component.ts

@@ -1,7 +1,8 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {BaseConfig, RouteConfig} from '../../app.config';
+import {RouteConfig} from '../../app.config';
 import {environment} from '../../../environments/environment';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {Router} from '@angular/router';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {SettingsService} from '../../services/settings.service';
@@ -16,21 +17,20 @@ declare function require(url: string);
 })
 export class NavigationHeaderComponent implements OnInit {
 
-  @Output() sidenavToggle = new EventEmitter();
-
-  @Output() userLogout = new EventEmitter();
+  @Output() public sidenavToggle = new EventEmitter();
 
   readonly features = environment.features;
 
-  readonly availableLanguages = BaseConfig.i18n.availableLanguages;
-
-  readonly version = require('./../../../../../package.json').version;
-
   config = RouteConfig;
 
   language;
 
+  languages = ['de', 'en'];
+
+  version = require('./../../../../../package.json').version;
+
   constructor(public loginService: LoginService,
+              private router: Router,
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private translate: TranslateService,
@@ -49,18 +49,21 @@ export class NavigationHeaderComponent implements OnInit {
     }
   }
 
-  public onToggleSidenav() {
+  public onToggleSidenav = () => {
     this.sidenavToggle.emit();
   };
 
-  public doUserLogout() {
-    this.userLogout.emit()
-  };
-
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
+
+  logout() {
+    this.loginService.logout();
+    setTimeout(() => {
+      this.router.navigate([RouteConfig.overviewPath]);
+    }, 500);
+  }
 }

static/src/app/common/navigation/sidenav-list.component.html

@@ -96,23 +96,23 @@
     </a>
   </mat-list-item>
   <mat-menu #menuLanguage="matMenu">
-    <button mat-menu-item (click)="setLanguage(availableLanguages[0])">
-      <mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
-      <span class="text-uppercase">{{availableLanguages[0]}}</span>
+    <button mat-menu-item (click)="setLanguage(languages[0])">
+      <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
+      <span class="text-uppercase">{{languages[0]}}</span>
     </button>
-    <button mat-menu-item (click)="setLanguage(availableLanguages[1])">
-      <mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
-      <span class="text-uppercase">{{availableLanguages[1]}}</span>
+    <button mat-menu-item (click)="setLanguage(languages[1])">
+      <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
+      <span class="text-uppercase">{{languages[1]}}</span>
     </button>
   </mat-menu>
 
 
   <a mat-list-item *ngIf="loginService.isLoggedIn()"
-    (click)="doUserLogout(); onSidenavClose()">
+    (click)="logout(); onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.logout' | translate}}</span>
   </a>
   <a mat-list-item *ngIf="!loginService.isLoggedIn()"
-     routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
+    routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.login' | translate}}</span>
   </a>
 

static/src/app/common/navigation/sidenav-list.component.scss

@@ -1,14 +1,8 @@
-@import url('../../style/blink-indicator.scss');
-
 mat-list-item.mat-list-item, a.mat-list-item {
   font-size: 16px;
   text-decoration: none;
   color: #9d9d9d;
 
-  &.active {
-    background: #000000;
-  }
-
   &:hover, &.active {
     color: #ffffff;
   }
@@ -23,3 +17,34 @@ mat-divider {
   margin: 15% 0;
   border-color: #9d9d9d;
 }
+
+.unprocessed {
+  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: color-blink;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+.unprocessed-child {
+  background-color: orange;
+}
+
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}
+
+@keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}

static/src/app/common/navigation/sidenav-list.component.ts

@@ -1,11 +1,12 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
-import {BaseConfig, RouteConfig} from '../../app.config';
+import {RouteConfig} from '../../app.config';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {environment} from '../../../environments/environment';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../../services/settings.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-sidenav-list',
@@ -16,19 +17,18 @@ export class SidenavListComponent implements OnInit {
 
   @Output() sidenavClose = new EventEmitter();
 
-  @Output() userLogout = new EventEmitter();
-
   readonly features = environment.features;
 
-  readonly availableLanguages = BaseConfig.i18n.availableLanguages;
-
   config = RouteConfig;
 
   language;
 
+  languages = ['de', 'en'];
+
   constructor(public loginService: LoginService,
-              public promotionService: PromotionService,
-              public awardingService: AwardingService,
+              private router: Router,
+              private promotionService: PromotionService,
+              private awardingService: AwardingService,
               private translate: TranslateService,
               private settingsService: SettingsService) {
   }
@@ -40,18 +40,21 @@ export class SidenavListComponent implements OnInit {
     });
   }
 
-  public onSidenavClose() {
+  public onSidenavClose = () => {
     this.sidenavClose.emit();
   };
 
-  public doUserLogout() {
-    this.userLogout.emit()
-  };
-
   setLanguage(language: string) {
     if (language) {
       this.language = language;
       this.settingsService.setLanguage(language);
     }
   }
+
+  logout() {
+    this.loginService.logout();
+    setTimeout(() => {
+      this.router.navigate([RouteConfig.overviewPath]);
+    }, 500);
+  }
 }

static/src/app/statistic/stats.component.ts

@@ -5,8 +5,9 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../services/settings.service';
 import {WarService} from '../services/logs/war.service';
+import {UIHelpers} from '../utils/global.helpers';
 import {Observable} from 'rxjs';
-import {BaseConfig} from '../app.config';
+import {ResponsiveConfig} from '../app.config';
 
 @Component({
   selector: 'cc-stats',
@@ -30,24 +31,25 @@ export class StatisticComponent implements OnInit {
               private translate: TranslateService,
               private settingsService: SettingsService) {
     this.settingsService.getLanguage().subscribe((language) => this.translate.setDefaultLang(language));
+    this.collapsed = UIHelpers.isMobileDevice();
   }
 
   ngOnInit() {
-    this.campaignService.getAllCampaigns()
-        .filter(campaigns => campaigns.length !== 0)
-        .subscribe((campaigns) => {
-          this.campaigns = campaigns;
-          this.resolveCampaignFromUrl();
-        });
-
     Observable.fromEvent(window, 'resize').subscribe(event => {
-      if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
+      if (event.target['innerWidth'] <= ResponsiveConfig.breakpointPx) {
         this.collapsed = true;
         this.collapseBtnVisible = false;
       } else {
         this.collapseBtnVisible = true;
       }
     });
+
+    this.campaignService.getAllCampaigns()
+        .filter(campaigns => campaigns.length !== 0)
+        .subscribe((campaigns) => {
+          this.campaigns = campaigns;
+          this.resolveCampaignFromUrl();
+        });
   }
 
   resolveCampaignFromUrl() {

static/src/app/style/blink-indicator.scss

@@ -1,30 +0,0 @@
-.unprocessed {
-  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
-  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-  animation-name: color-blink;
-  animation-duration: 4s;
-  animation-iteration-count: infinite;
-}
-
-.unprocessed-child {
-  background-color: orange;
-}
-
-/* Safari 4.0 - 8.0 */
-@-webkit-keyframes color-blink {
-  from {
-    background-color: #222222;
-  }
-  to {
-    background-color: orange;
-  }
-}
-
-@keyframes color-blink {
-  from {
-    background-color: #222222;
-  }
-  to {
-    background-color: orange;
-  }
-}

static/src/app/utils/global.helpers.ts

@@ -21,4 +21,30 @@ export const UIHelpers = {
     }
     return currentVal;
   },
+
+  isMobileDevice: (): boolean => {
+    const exp1 = new RegExp('(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|' +
+      'fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|' +
+      'palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|' +
+      'windows (ce|phone)|xda|xiino', 'i');
+
+    const exp2 = new RegExp('1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)' +
+      '|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl' +
+      '(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|db' +
+      'te|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly' +
+      '(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|' +
+      'hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno' +
+      '|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|' +
+      '50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo' +
+      '(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)' +
+      '|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))' +
+      '|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r6' +
+      '00|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh' +
+      '\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(0' +
+      '0|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|uts' +
+      't|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|web' +
+      'c|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-', 'i');
+
+    return exp1.test(navigator.userAgent) || exp2.test(navigator.userAgent.substr(0, 4));
+  }
 };