From dd89fc7e5a7f4eabbebb28e937feb99fa0b8cf27 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 24 Jun 2018 18:17:52 +0200 Subject: [PATCH] Add main pages for ranks and decorations listing and apply routing --- static/src/app/app.component.html | 6 ++ static/src/app/app.config.ts | 3 + static/src/app/app.routing.ts | 4 + static/src/app/army/army.routing.ts | 1 - .../decoration-overview.component.css | 75 +++++++++++++++++++ .../decoration-overview.component.html | 18 +++++ .../decoration-overview.component.ts | 45 +++++++++++ static/src/app/pub/public.component.css | 0 static/src/app/pub/public.component.html | 1 + static/src/app/pub/public.component.ts | 11 +++ static/src/app/pub/public.module.ts | 16 ++++ static/src/app/pub/public.routing.ts | 23 ++++++ .../rank-overview/rank-overview.component.css | 75 +++++++++++++++++++ .../rank-overview.component.html | 18 +++++ .../rank-overview/rank-overview.component.ts | 45 +++++++++++ 15 files changed, 340 insertions(+), 1 deletion(-) create mode 100644 static/src/app/pub/decoration-overview/decoration-overview.component.css create mode 100644 static/src/app/pub/decoration-overview/decoration-overview.component.html create mode 100644 static/src/app/pub/decoration-overview/decoration-overview.component.ts create mode 100644 static/src/app/pub/public.component.css create mode 100644 static/src/app/pub/public.component.html create mode 100644 static/src/app/pub/public.component.ts create mode 100644 static/src/app/pub/public.module.ts create mode 100644 static/src/app/pub/public.routing.ts create mode 100644 static/src/app/pub/rank-overview/rank-overview.component.css create mode 100644 static/src/app/pub/rank-overview/rank-overview.component.html create mode 100644 static/src/app/pub/rank-overview/rank-overview.component.ts diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index e7c5c94..4e6a4a0 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -22,6 +22,12 @@
  • Armeeübersicht
    • +
  • + Ränge +
    • +
  • + Auszeichnungen +
  • Statistiken
    • diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index 92c7240..ca816f2 100644 --- a/static/src/app/app.config.ts +++ b/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', }; diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index 1bc7229..a1fa2c3 100644 --- a/static/src/app/app.routing.ts +++ b/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', diff --git a/static/src/app/army/army.routing.ts b/static/src/app/army/army.routing.ts index 58d9876..65e8d88 100644 --- a/static/src/app/army/army.routing.ts +++ b/static/src/app/army/army.routing.ts @@ -17,4 +17,3 @@ export const armyRoutes: Routes = [ ]; export const armyRoutingComponents = [ArmyComponent, ArmyMemberComponent]; - diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.css b/static/src/app/pub/decoration-overview/decoration-overview.component.css new file mode 100644 index 0000000..896472d --- /dev/null +++ b/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; +} + diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html new file mode 100644 index 0000000..ae87a39 --- /dev/null +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html @@ -0,0 +1,18 @@ +
    +

    Übersicht über alle Ränge

    + +
    +

    {{fraction.BLUFOR}}

    +
    + {{decoration.name}} +
    +
    + +
    +

    {{fraction.OPFOR}}

    +
    + {{decoration.name}} +
    +
    + +
    diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts new file mode 100644 index 0000000..053f97e --- /dev/null +++ b/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', ''); + } + } +} diff --git a/static/src/app/pub/public.component.css b/static/src/app/pub/public.component.css new file mode 100644 index 0000000..e69de29 diff --git a/static/src/app/pub/public.component.html b/static/src/app/pub/public.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/static/src/app/pub/public.component.html @@ -0,0 +1 @@ + diff --git a/static/src/app/pub/public.component.ts b/static/src/app/pub/public.component.ts new file mode 100644 index 0000000..713636f --- /dev/null +++ b/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() { + } +} diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts new file mode 100644 index 0000000..8cdfa5c --- /dev/null +++ b/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; +} diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts new file mode 100644 index 0000000..119f0f6 --- /dev/null +++ b/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]; + diff --git a/static/src/app/pub/rank-overview/rank-overview.component.css b/static/src/app/pub/rank-overview/rank-overview.component.css new file mode 100644 index 0000000..896472d --- /dev/null +++ b/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; +} + diff --git a/static/src/app/pub/rank-overview/rank-overview.component.html b/static/src/app/pub/rank-overview/rank-overview.component.html new file mode 100644 index 0000000..fa2c0f0 --- /dev/null +++ b/static/src/app/pub/rank-overview/rank-overview.component.html @@ -0,0 +1,18 @@ +
    +

    Übersicht über alle Ränge

    + +
    +

    {{fraction.BLUFOR}}

    +
    + {{rank.name}} +
    +
    + +
    +

    {{fraction.OPFOR}}

    +
    + {{rank.name}} +
    +
    + +
    diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts new file mode 100644 index 0000000..96e2b5e --- /dev/null +++ b/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', ''); + } + } +}