Add main pages for ranks and decorations listing and apply routing

static/src/app/app.component.html

@@ -22,6 +22,12 @@
           <li routerLinkActive="active">
             <a routerLink='{{config.overviewPath}}' class="link">Armeeübersicht</a>
           </li>
+          <li routerLinkActive="active">
+            <a [routerLink]="[config.publicPath,{outlets:{right:'ranks'}}]" class="link">Ränge</a>
+          </li>
+          <li routerLinkActive="active">
+            <a [routerLink]="[config.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>
+          </li>
           <li routerLinkActive="active">
             <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
           </li>

static/src/app/app.config.ts

@@ -35,4 +35,7 @@ export const RouteConfig = {
   confirmAwardPath: 'confirm-award',
   confirmPromotionPath: 'confirm-promotion',
   sqlDashboardPath: 'sql-dashboard',
+  publicPath: 'public',
+  rankOverviewPath: 'public/ranks',
+  decorationOverviewPath: 'public/decorations',
 };

static/src/app/app.routing.ts

@@ -42,6 +42,10 @@ export const appRoutes: Routes = [
     loadChildren: './ranks/ranks.module#RanksModule',
     canActivate: [LoginGuardHL]
   },
+  {
+    path: RouteConfig.publicPath,
+    loadChildren: './pub/public.module#PublicModule'
+  },
   {
     path: RouteConfig.adminPanelPath,
     loadChildren: './admin/admin.module#AdminModule',

static/src/app/army/army.routing.ts

@@ -17,4 +17,3 @@ export const armyRoutes: Routes = [
 ];
 
 export const armyRoutingComponents = [ArmyComponent, ArmyMemberComponent];
-

static/src/app/pub/decoration-overview/decoration-overview.component.css

@@ -0,0 +1,75 @@
+.squad-layout {
+  overflow: hidden;
+  padding: 5px 15px 5px 15px;
+}
+
+.row {
+  clear: both;
+}
+
+.squad-cell {
+  display: table-cell;
+  padding: 5px;
+}
+
+.colored-row {
+  background: rgb(34, 34, 34);
+}
+
+.title-row {
+  border-radius: 12px 12px 0 0;
+}
+
+.footer-row {
+  border-radius: 0 0 12px 12px;
+}
+
+.middle-row {
+  min-height: 120px;
+  border: rgb(34, 34, 34);
+  background-color: rgba(255, 255, 255, 0.88);
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.title {
+  color: whitesmoke;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.name-cell {
+  display: inherit;
+  margin-left: 200px;
+}
+
+h1 {
+  text-align: center;
+}
+
+img {
+  position: absolute;
+  margin-top: 8px;
+  margin-left: 25px;
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.army-head {
+  font-weight: bolder;
+  text-align: center
+}
+
+.member-count {
+  margin-top: 15px;
+  padding: 8px;
+  text-align: center;
+  font-weight: bold;
+  color: whitesmoke;
+  background: #222222;
+  border-radius: 12px;
+}
+

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -0,0 +1,18 @@
+<div style="width: 1100px; margin:auto; position: relative;">
+  <h1>Übersicht über alle Ränge</h1>
+
+  <div class="pull-left" style="width: 45%;">
+    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+    <div class="squad-layout" *ngFor="let decoration of decorations">
+      {{decoration.name}}
+    </div>
+  </div>
+
+  <div class="pull-right" style="width: 45%;">
+    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+    <div class="squad-layout" *ngFor="let decoration of decorations">
+      {{decoration.name}}
+    </div>
+  </div>
+
+</div>

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -0,0 +1,45 @@
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {DOCUMENT} from '@angular/common';
+import {Fraction} from "../../utils/fraction.enum";
+import {CSSHelpers} from "../../global.helpers";
+import {RouteConfig} from "../../app.config";
+import {Decoration} from "../../models/model-interfaces";
+import {DecorationService} from "../../services/army-management/decoration.service";
+
+
+@Component({
+  selector: 'cc-decoration-overview',
+  templateUrl: './decoration-overview.component.html',
+  styleUrls: ['./decoration-overview.component.css']
+})
+export class DecorationOverviewComponent implements OnInit, OnDestroy {
+
+  decorations: Decoration[];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private decorationService: DecorationService,
+              @Inject(DOCUMENT) private document) {
+  }
+
+  ngOnInit() {
+    // set background image css
+    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
+
+    // init rank data
+    this.decorationService.findDecorations()
+        .subscribe(decorations => {
+          this.decorations = decorations;
+        });
+  };
+
+  ngOnDestroy() {
+    if (!this.router.url.includes(RouteConfig.overviewPath)) {
+      this.document.getElementById('right').setAttribute('style', '');
+    }
+  }
+}

static/src/app/pub/public.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/pub/public.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'cc-public',
+  templateUrl: './public.component.html',
+  styleUrls: ['./public.component.css']
+})
+export class PublicComponent {
+  constructor() {
+  }
+}

static/src/app/pub/public.module.ts

@@ -0,0 +1,16 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../shared.module';
+import {CommonModule} from '@angular/common';
+import {RankService} from '../services/army-management/rank.service';
+import {ButtonsModule} from 'ngx-bootstrap';
+import {pubRouterModule, pubRoutingComponents} from "./public.routing";
+import {DecorationService} from "../services/army-management/decoration.service";
+
+@NgModule({
+  declarations: pubRoutingComponents,
+  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), pubRouterModule],
+  providers: [DecorationService, RankService]
+})
+export class PublicModule {
+  static routes = pubRouterModule;
+}

static/src/app/pub/public.routing.ts

@@ -0,0 +1,23 @@
+import {RouterModule, Routes} from "@angular/router";
+import {RankOverviewComponent} from "./rank-overview/rank-overview.component";
+import {ModuleWithProviders} from "@angular/core";
+import {DecorationOverviewComponent} from "./decoration-overview/decoration-overview.component";
+import {PublicComponent} from "./public.component";
+
+export const publicRoutes: Routes = [
+  {
+    path: 'ranks',
+    component: RankOverviewComponent,
+    outlet: 'right'
+  },
+  {
+    path: 'decorations',
+    component: DecorationOverviewComponent,
+    outlet: 'right'
+  },
+];
+
+export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
+
+export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent];
+

static/src/app/pub/rank-overview/rank-overview.component.css

@@ -0,0 +1,75 @@
+.squad-layout {
+  overflow: hidden;
+  padding: 5px 15px 5px 15px;
+}
+
+.row {
+  clear: both;
+}
+
+.squad-cell {
+  display: table-cell;
+  padding: 5px;
+}
+
+.colored-row {
+  background: rgb(34, 34, 34);
+}
+
+.title-row {
+  border-radius: 12px 12px 0 0;
+}
+
+.footer-row {
+  border-radius: 0 0 12px 12px;
+}
+
+.middle-row {
+  min-height: 120px;
+  border: rgb(34, 34, 34);
+  background-color: rgba(255, 255, 255, 0.88);
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.title {
+  color: whitesmoke;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.name-cell {
+  display: inherit;
+  margin-left: 200px;
+}
+
+h1 {
+  text-align: center;
+}
+
+img {
+  position: absolute;
+  margin-top: 8px;
+  margin-left: 25px;
+}
+
+.member-link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.army-head {
+  font-weight: bolder;
+  text-align: center
+}
+
+.member-count {
+  margin-top: 15px;
+  padding: 8px;
+  text-align: center;
+  font-weight: bold;
+  color: whitesmoke;
+  background: #222222;
+  border-radius: 12px;
+}
+

static/src/app/pub/rank-overview/rank-overview.component.html

@@ -0,0 +1,18 @@
+<div style="width: 1100px; margin:auto; position: relative;">
+  <h1>Übersicht über alle Ränge</h1>
+
+  <div class="pull-left" style="width: 45%;">
+    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+    <div class="squad-layout" *ngFor="let rank of ranks">
+      {{rank.name}}
+    </div>
+  </div>
+
+  <div class="pull-right" style="width: 45%;">
+    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+    <div class="squad-layout" *ngFor="let rank of ranks">
+      {{rank.name}}
+    </div>
+  </div>
+
+</div>

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -0,0 +1,45 @@
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+import {DOCUMENT} from '@angular/common';
+import {Fraction} from "../../utils/fraction.enum";
+import {CSSHelpers} from "../../global.helpers";
+import {RouteConfig} from "../../app.config";
+import {Rank} from "../../models/model-interfaces";
+import {RankService} from "../../services/army-management/rank.service";
+
+
+@Component({
+  selector: 'cc-rank-overview',
+  templateUrl: './rank-overview.component.html',
+  styleUrls: ['./rank-overview.component.css']
+})
+export class RankOverviewComponent implements OnInit, OnDestroy {
+
+  ranks: Rank[];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private rankService: RankService,
+              @Inject(DOCUMENT) private document) {
+  }
+
+  ngOnInit() {
+    // set background image css
+    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
+
+    // init rank data
+    this.rankService.findRanks()
+        .subscribe(ranks => {
+          this.ranks = ranks;
+        });
+  };
+
+  ngOnDestroy() {
+    if (!this.router.url.includes(RouteConfig.overviewPath)) {
+      this.document.getElementById('right').setAttribute('style', '');
+    }
+  }
+}