From b2d18e5cd0a05a985731c5ca98c72d314435cdeb Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 28 Jul 2018 16:04:38 +0200 Subject: [PATCH 1/5] Finish campaign navigation behavior and load --- api/routes/campaigns.js | 22 +++++++++- .../src/app/services/logs/campaign.service.ts | 5 +++ .../campaign-navigation.component.css | 1 - .../campaign-navigation.component.html | 22 +++------- .../campaign-navigation.component.ts | 41 +++++++++++++++++-- .../campaign/highscore/highscore.component.ts | 3 +- .../overview/stats-overview.component.ts | 2 +- .../war/war-list/war-list.component.ts | 2 +- 8 files changed, 73 insertions(+), 25 deletions(-) diff --git a/api/routes/campaigns.js b/api/routes/campaigns.js index 3155a88..a9ae52f 100644 --- a/api/routes/campaigns.js +++ b/api/routes/campaigns.js @@ -24,6 +24,26 @@ const campaigns = new express.Router(); // routes ********************** campaigns.route('/') + .get((req, res, next) => { + CampaignModel.find({}, {}, { + sort: { + timestamp: 'desc', + }, + }, (err, items) => { + if (err) { + err.status = codes.servererror; + return next(err); + } + if (items && items.length > 0) { + res.locals.items = items; + } else { + res.locals.items = []; + } + res.locals.processed = true; + next(); + }); + }) + .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => { const campaign = new CampaignModel(req.body); // timestamp and default are set automatically by Mongoose Schema Validation @@ -45,7 +65,7 @@ campaigns.route('/') campaigns.route('/:id') .get(idValidator, (req, res, next) => { - return genericGetById(req, res, next, CampaignModel); + return genericGetById(req, res, next, CampaignModel); }) .patch(apiAuthenticationMiddleware, checkMT, (req, res, next) => { diff --git a/static/src/app/services/logs/campaign.service.ts b/static/src/app/services/logs/campaign.service.ts index 2fbda1f..7e1d552 100644 --- a/static/src/app/services/logs/campaign.service.ts +++ b/static/src/app/services/logs/campaign.service.ts @@ -13,6 +13,11 @@ export class CampaignService { } getAllCampaigns() { + return this.http.get(this.config.apiCampaignPath) + .map(res => res.json()); + } + + getAllCampaignsWithWars() { return this.http.get(this.config.apiWarPath) .map(res => res.json()); } diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css index e72ddc8..5473e30 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css @@ -30,7 +30,6 @@ } .campaign-entry { - width: fit-content; border: 1px solid #dadada; min-width: 20%; padding: 15px; diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html index 30372f7..476b344 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html @@ -9,27 +9,15 @@
Ewige Übersicht
-
- Operation Schmelztiegel -
-
- Return to Hell in a Bowl -
-
- Operation Schmelztiegel -
-
- Return to Hell in a Bowl -
-
- Operation Schmelztiegel -
-
- Return to Hell in a Bowl +
+ {{campaign.title}}
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts index cb21e0c..a8f9c78 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts @@ -1,4 +1,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; +import {CampaignService} from '../../../services/logs/campaign.service'; +import {Campaign} from '../../../models/model-interfaces'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'campaign-navigation', @@ -7,23 +10,50 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; }) export class CampaignNavigationComponent { + campaigns: Campaign[]; + @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef; isLeftScrollVisible = false; + isRightScrollVisible = true; + repeater; - constructor() { + constructor(private campaignService: CampaignService, + private route: ActivatedRoute, + private router: Router) { + } + + ngOnInit() { + this.campaignService.getAllCampaigns().subscribe((campaigns) => { + this.campaigns = campaigns; + this.isRightScrollVisible = campaigns.length > 4; + }) } public scrollList(scrollValue: number): void { + const prevScrollLeftValue = this.panel.nativeElement.scrollLeft; + this.panel.nativeElement.scrollLeft += scrollValue; - if (this.panel.nativeElement.scrollLeft > 0) { - this.isLeftScrollVisible = true + + const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft; + + if (scrollValue < 0) { + this.isRightScrollVisible = true; + } + + if (updatedScrollLeftValue > 0) { + if (prevScrollLeftValue === updatedScrollLeftValue) { + this.isRightScrollVisible = false; + this.clearRepeater(); + } + this.isLeftScrollVisible = true; } else { this.isLeftScrollVisible = false; this.clearRepeater(); } + } setRepeater(value: number) { @@ -33,4 +63,9 @@ export class CampaignNavigationComponent { clearRepeater() { clearInterval(this.repeater) } + + selectCampaign(campaignId) { + console.log(campaignId) + this.router.navigate([{outlets: {'primary': ['/campaign', campaignId]}}], {relativeTo: this.route}); + } } diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.ts b/static/src/app/statistic/campaign/highscore/highscore.component.ts index 55f866e..d218b99 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.ts +++ b/static/src/app/statistic/campaign/highscore/highscore.component.ts @@ -45,7 +45,8 @@ export class StatisticHighScoreComponent implements OnInit { if (this.campaignService.campaigns) { this.initData(); } else { - this.campaignService.getAllCampaigns().subscribe(campaigns => { + this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => { + this.campaignService.campaigns = campaigns; this.initData(); }); } diff --git a/static/src/app/statistic/campaign/overview/stats-overview.component.ts b/static/src/app/statistic/campaign/overview/stats-overview.component.ts index 1de0d3a..345afd7 100644 --- a/static/src/app/statistic/campaign/overview/stats-overview.component.ts +++ b/static/src/app/statistic/campaign/overview/stats-overview.component.ts @@ -50,7 +50,7 @@ export class StatisticOverviewComponent implements OnInit { if (this.campaignService.campaigns) { this.initWars(this.campaignService.campaigns); } else { - this.campaignService.getAllCampaigns().subscribe(campaigns => { + this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => { this.initWars(campaigns); }); } diff --git a/static/src/app/statistic/war/war-list/war-list.component.ts b/static/src/app/statistic/war/war-list/war-list.component.ts index b64fc1c..637a7ca 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.ts +++ b/static/src/app/statistic/war/war-list/war-list.component.ts @@ -27,7 +27,7 @@ export class WarListComponent implements OnInit { } ngOnInit() { - this.campaignService.getAllCampaigns().subscribe((items) => { + this.campaignService.getAllCampaignsWithWars().subscribe((items) => { const subPathWar = 'war/'; const subPathOverview = 'overview/'; this.campaignService.campaigns = items; From e8319d351f29fcd01ae479e8407a8de26f0910c3 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 28 Jul 2018 19:13:30 +0200 Subject: [PATCH 2/5] Remove global outlets --- static/src/app/app.component.html | 23 +++--------------- static/src/app/app.routing.ts | 2 +- .../army/army-member/army-member.component.ts | 16 +++---------- static/src/app/army/army.component.ts | 21 ++++------------ static/src/app/army/army.routing.ts | 4 ---- .../decoration-overview.component.ts | 21 ++++------------ 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.routing.ts | 24 ++++++++++--------- .../rank-overview/rank-overview.component.ts | 14 ++--------- 11 files changed, 30 insertions(+), 107 deletions(-) delete mode 100644 static/src/app/pub/public.component.css delete mode 100644 static/src/app/pub/public.component.html delete mode 100644 static/src/app/pub/public.component.ts diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 25cfb77..1e2ba6e 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -18,10 +18,10 @@ Armeeübersicht
  • - Ränge + Ränge
  • - Auszeichnungen + Auszeichnungen
  • Statistiken @@ -115,27 +115,10 @@ - -
    - -
    - -
    +
    - - - -
    -
    • - - - - - - - - - -
    - + + +
    +
    + + +
    -
    +
    Ewige Übersicht
    + [ngClass]="{active : campaign._id === selectedCampaignId}" + (click)="select(campaign)"> {{campaign.title}}
    diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts index a8f9c78..aec1481 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts @@ -1,16 +1,18 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; -import {CampaignService} from '../../../services/logs/campaign.service'; +import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; import {Campaign} from '../../../models/model-interfaces'; -import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'campaign-navigation', templateUrl: './campaign-navigation.component.html', styleUrls: ['./campaign-navigation.component.css'] }) -export class CampaignNavigationComponent { +export class CampaignNavigationComponent implements OnInit { - campaigns: Campaign[]; + @Input() campaigns: Campaign[]; + + @Input() selectedCampaignId; + + @Output() campaignSelect = new EventEmitter(); @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef; @@ -20,16 +22,13 @@ export class CampaignNavigationComponent { repeater; - constructor(private campaignService: CampaignService, - private route: ActivatedRoute, - private router: Router) { + ngOnInit() { + this.isRightScrollVisible = this.campaigns.length > 4; } - ngOnInit() { - this.campaignService.getAllCampaigns().subscribe((campaigns) => { - this.campaigns = campaigns; - this.isRightScrollVisible = campaigns.length > 4; - }) + select(campaign) { + this.selectedCampaignId = campaign._id; + this.campaignSelect.emit(campaign); } public scrollList(scrollValue: number): void { @@ -53,7 +52,6 @@ export class CampaignNavigationComponent { this.isLeftScrollVisible = false; this.clearRepeater(); } - } setRepeater(value: number) { @@ -63,9 +61,4 @@ export class CampaignNavigationComponent { clearRepeater() { clearInterval(this.repeater) } - - selectCampaign(campaignId) { - console.log(campaignId) - this.router.navigate([{outlets: {'primary': ['/campaign', campaignId]}}], {relativeTo: this.route}); - } } diff --git a/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html b/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html index 0d579ca..028d9f1 100644 --- a/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html +++ b/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html @@ -1,9 +1,9 @@

    Kampagnendetails - {{campaignPlayer.name}}

    -

    {{campaignPlayer.campaign.title}} Kampagne

    diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.css b/static/src/app/statistic/campaign/highscore/highscore.component.css index ddd70e2..2f8a387 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.css +++ b/static/src/app/statistic/campaign/highscore/highscore.component.css @@ -7,8 +7,8 @@ h2 { } .search-field { - width: 30%; - margin: 20px 0 0 10%; + width: 40%; + margin: 32px 0 0 8%; } .highscore-table-container { @@ -19,7 +19,7 @@ h2 { overflow-x: hidden; overflow-y: auto; border: solid #dfdfdf 1px; - box-shadow: 3px 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); + box-shadow: 3px 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); } .highscore-table { diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.html b/static/src/app/statistic/campaign/highscore/highscore.component.html index 5829dd6..5b0b146 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.html +++ b/static/src/app/statistic/campaign/highscore/highscore.component.html @@ -1,6 +1,4 @@
    -

    {{title}} ⟶ Highscore

    -
    -

    {{title}}

    - +
    Gesamtpunktzahl
    diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html index 0680b43..b72ec53 100644 --- a/static/src/app/statistic/stats.component.html +++ b/static/src/app/statistic/stats.component.html @@ -1 +1,22 @@ + + + +
    + + + + + + + + + + +
    + diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts index 686b97d..c1a6bed 100644 --- a/static/src/app/statistic/stats.component.ts +++ b/static/src/app/statistic/stats.component.ts @@ -1,11 +1,39 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {Campaign} from '../models/model-interfaces'; +import {CampaignService} from '../services/logs/campaign.service'; +import {ActivatedRoute, Router} from '@angular/router'; @Component({ selector: 'cc-stats', templateUrl: './stats.component.html', styleUrls: ['./stats.component.css'] }) -export class StatisticComponent { - constructor() { +export class StatisticComponent implements OnInit { + + selectedCampaign: Campaign = {}; + + campaigns: Campaign[] = []; + + constructor(private campaignService: CampaignService, + private router: Router, + private route: ActivatedRoute) { + } + + ngOnInit() { + this.campaignService.getAllCampaignsWithWars().subscribe((campaigns) => { + this.campaigns = campaigns; + this.campaignService.campaigns = campaigns; + this.switchCampaign(campaigns[0]) + }); + } + + switchCampaign(campaign) { + this.selectedCampaign = campaign; + if (campaign._id === 'all' || this.router.url.includes('/overview/all')) { + setTimeout(_ => { + window.dispatchEvent(new Event('resize')); + }); + } + this.router.navigate([{outlets: {'right': ['overview', campaign._id]}}], {relativeTo: this.route}); } } diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index f882acd..5d027cc 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -7,13 +7,17 @@ import {NgxChartsModule} from '@swimlane/ngx-charts'; import {CampaignService} from '../services/logs/campaign.service'; import {PlayerService} from '../services/logs/player.service'; import {LogsService} from '../services/logs/logs.service'; -import {MatButtonModule, MatButtonToggleModule, MatExpansionModule, MatTableModule, MatSortModule} from '@angular/material'; +import { + MatButtonToggleModule, + MatSortModule, + MatTableModule +} from '@angular/material'; @NgModule({ declarations: statsRoutingComponents, - imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, MatButtonModule, MatExpansionModule, - MatButtonToggleModule, MatTableModule, MatSortModule], + imports: [CommonModule, SharedModule, NgxChartsModule, MatButtonToggleModule, MatTableModule, MatSortModule, + statsRouterModule], providers: [WarService, CampaignService, PlayerService, LogsService] }) export class StatsModule { diff --git a/static/src/app/statistic/stats.routing.ts b/static/src/app/statistic/stats.routing.ts index 1d69368..c8dc3a3 100644 --- a/static/src/app/statistic/stats.routing.ts +++ b/static/src/app/statistic/stats.routing.ts @@ -16,19 +16,10 @@ import {LoginGuardMT} from '../login'; import {CampaignNavigationComponent} from './campaign/campaign-navigation/campaign-navigation.component'; -export const statsRoutes: Routes = [{ - path: '', component: StatisticComponent, - children: [ - { - path: '', - component: WarListComponent - } - ] -}, +export const statsRoutes: Routes = [ { - path: 'top', - component: CampaignNavigationComponent, - outlet: 'top' + path: '', + component: StatisticComponent, }, { path: 'overview/:id', diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index 419eae2..f6b1ccf 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -1,6 +1,6 @@ .scoreboard-table { height: 60vh; - width:fit-content; + width: fit-content; border: 1px solid #dadada; overflow-x: auto; margin: 56px auto auto; @@ -36,6 +36,7 @@ table.mat-table img { .mat-column-name { width: 200px; } + .mat-column-fraction { width: 90px; } @@ -52,6 +53,6 @@ td.mat-cell:last-child, td.mat-footer-cell:last-child, th.mat-header-cell:last-c /* MAT ICON BUTTON */ -:host/deep/.mat-table .mat-icon { +:host /deep/ .mat-table .mat-icon { color: #666666; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index 5bdb621..fc05452 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -3,7 +3,7 @@ import {War} from '../../../models/model-interfaces'; import {Fraction} from '../../../utils/fraction.enum'; import {PlayerUtils} from '../../../utils/player-utils'; import {saveAs} from 'file-saver/FileSaver'; -import {MatSort, Sort} from '@angular/material'; +import {MatSort} from '@angular/material'; import {SortUtils} from '../../../utils/sort-utils'; @Component({ diff --git a/static/src/app/statistic/war/war-header/war-header.component.css b/static/src/app/statistic/war/war-header/war-header.component.css index 8508278..717723c 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.css +++ b/static/src/app/statistic/war/war-header/war-header.component.css @@ -1,6 +1,7 @@ .war-header-container { width: 920px; - min-height: 168px; + min-height: 165px; + padding-top: 12px; margin: auto; } diff --git a/static/src/app/statistic/war/war-header/war-header.component.html b/static/src/app/statistic/war/war-header/war-header.component.html index 44773fc..6b18990 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.html +++ b/static/src/app/statistic/war/war-header/war-header.component.html @@ -1,6 +1,5 @@
    -

    {{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}

    Endpunktestand:

    {{fraction.BLUFOR}} {{war.ptBlufor}} diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css index e69de29..aaec2d6 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.css +++ b/static/src/app/statistic/war/war-list/war-item.component.css @@ -0,0 +1,42 @@ +.war-item { + cursor: pointer; + border-right: 1px solid #dadada; +} + +.war-item-box { + padding-top: 15px; +} + +.war-title { + font-size: 16px; + color: #333333; +} + +.war-detail { + font-size: 12px; + text-indent: 20px; + color: #666666; +} + +.select-indicator-battle { + display: none; + width: 30px; + height: 30px; + position: absolute; + left: calc(100% - 14px); + background: -moz-linear-gradient(45deg, white 50%, transparent 50%); + background: -webkit-linear-gradient(45deg, white 50%, transparent 50%); + background: linear-gradient(45deg, white 50%, transparent 50%); + cursor: default; + border-left: 1px solid #dadada; + border-bottom: 1px solid #dadada; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.selected div.select-indicator-battle { + display: block !important; +} diff --git a/static/src/app/statistic/war/war-list/war-item.component.html b/static/src/app/statistic/war/war-list/war-item.component.html index 16e16b4..6654d9f 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.html +++ b/static/src/app/statistic/war/war-list/war-item.component.html @@ -1,28 +1,27 @@ -
    - -
    -
    - - {{war.title}} +
    +
    +
    +
    +
    + + ◦ {{war.title}} -
    - vom {{war.date | date: 'dd.MM.yyyy'}} -
    +
    vom {{war.date | date: 'dd.MM.yyyy'}}
    +
    -
    - - -
    +
    + +
    diff --git a/static/src/app/statistic/war/war-list/war-item.component.ts b/static/src/app/statistic/war/war-list/war-item.component.ts index 763e9e0..ee2b96e 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.ts +++ b/static/src/app/statistic/war/war-list/war-item.component.ts @@ -5,7 +5,7 @@ import {LoginService} from '../../../services/app-user-service/login-service'; @Component({ selector: 'cc-war-item', templateUrl: './war-item.component.html', - styleUrls: ['./war-item.component.css', '../../../style/list-entry.css'], + styleUrls: ['./war-item.component.css'], changeDetection: ChangeDetectionStrategy.OnPush }) export class WarItemComponent implements OnInit { diff --git a/static/src/app/statistic/war/war-list/war-list.component.css b/static/src/app/statistic/war/war-list/war-list.component.css index c881da2..0fcc5d5 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.css +++ b/static/src/app/statistic/war/war-list/war-list.component.css @@ -1,71 +1,58 @@ -.select-list { - min-height: calc(100vh - 50px); +.list-header { + border-bottom: 1px solid #dadada; + border-right: 1px solid #dadada; + padding: 25px; + font-size: 16px; + text-transform: uppercase; + color: #333333; + cursor: pointer; +} + +.mat-icon { + color: #666666; + vertical-align: middle; + margin-right: 5px; +} + +.select-indicator { + display: none; + width: 30px; + height: 30px; + position: absolute; + left: calc(20% - 15px); + background: -moz-linear-gradient(45deg, white 50%, transparent 50%); + background: -webkit-linear-gradient(45deg, white 50%, transparent 50%); + background: linear-gradient(45deg, white 50%, transparent 50%); + cursor: default; + border-left: 1px solid #dadada; + border-bottom: 1px solid #dadada; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -o-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.battle-list { + max-height: calc(100vh - 353px); + padding-left: 5px; + margin-left: 10%; + overflow-y: auto; + overflow-x: hidden; + direction: rtl; +} + +.battle-list * { + direction: ltr; +} + +.selected > div.select-indicator { + display: block !important; } .war-list-header { margin: auto; -} - -span > a { - font-weight: 600 !important; -} - -mat-expansion-panel { - border: 1px solid #7d7d7d; -} - -mat-panel-title { - font-size: 18px; - color: #ffffff; -} - -mat-expansion-panel-header { - height: auto; - padding: 30px 15px; - background-color: #4e4e4e; -} - -mat-expansion-panel-header.mat-expansion-panel-header:hover { - background: #222222 !important; -} - -mat-expansion-panel-header.mat-expansion-panel-header:focus { - background-color: #4e4e4e; -} - -.select-list > div:last-child { - margin: 20px 0; -} - -.top-list-entry { - display: flex; - margin: 0 0 6px 0; -} - -.top-list-entry > div { - width: 50%; - float: left; -} - -.war-interaction-panel { - display: contents; -} - -.war-interaction-panel > span { - color: rgba(255, 255, 255, 0.64); - padding: 0 3px; -} - -:host /deep/ .mat-expansion-indicator::after { - color: rgba(255, 255, 255, 0.64); -} - -.select-list > mat-accordion:first-child .mat-expansion-panel { - border-radius: 6px 6px 0 0; -} - -.select-list > mat-accordion:first-child .mat-expansion-panel-header { - border-radius: 4px 4px 0 0; + border-right: 1px solid #dadada; } .stats-add-btn { @@ -75,3 +62,26 @@ mat-expansion-panel-header.mat-expansion-panel-header:focus { margin: 0 10px 10px 10px; width: 95%; } + +.fill-vertical-border { + width: 20%; + position: fixed; + border-right: 1px solid #dadada; + height: 100vh; +} + +/* Table Scrollbar BEGIN */ + +.battle-list::-webkit-scrollbar { + width: 12px; +} + +.battle-list::-webkit-scrollbar-track { + border-left: 1px solid #f1f1f1; +} + +.battle-list::-webkit-scrollbar-thumb { + background: rgb(234, 234, 234); +} + +/* Table Scrollbar END */ diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html index fbb4303..4200a54 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.html +++ b/static/src/app/statistic/war/war-list/war-list.component.html @@ -1,74 +1,42 @@ -
    -
    - - -
    - - - - - - {{campaign.title}} - - - - - - -
    -
    -
    - - Übersicht - -
    -
    -
    -
    - - Highscore - -
    -
    -
    -
    - - -
    -     -     - -
    -
    -
    - - Gesamtübersicht - -
    -
    -
    - +
    + +
    + + +
    +
    + + Übersicht +
    + +
    +
    + + Highscore +
    + +
    + + Schlachten +
    + +
    +
    + + +
    +
    + +
    diff --git a/static/src/app/statistic/war/war-list/war-list.component.ts b/static/src/app/statistic/war/war-list/war-list.component.ts index 637a7ca..a5f953a 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.ts +++ b/static/src/app/statistic/war/war-list/war-list.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Campaign, War} from '../../../models/model-interfaces'; import {WarService} from '../../../services/logs/war.service'; @@ -9,9 +9,11 @@ import {RouteConfig} from '../../../app.config'; @Component({ selector: 'war-list', templateUrl: './war-list.component.html', - styleUrls: ['./war-list.component.css', '../../../style/list-entry.css', '../../../style/select-list.css'] + styleUrls: ['./war-list.component.css'] }) -export class WarListComponent implements OnInit { +export class WarListComponent implements OnInit, OnChanges { + + @Input() campaign: Campaign; selectedWarId: string | number; @@ -26,6 +28,10 @@ export class WarListComponent implements OnInit { private route: ActivatedRoute) { } + ngOnChanges(changes: SimpleChanges) { + this.selectedWarId = this.campaign._id; + } + ngOnInit() { this.campaignService.getAllCampaignsWithWars().subscribe((items) => { const subPathWar = 'war/'; @@ -35,7 +41,7 @@ export class WarListComponent implements OnInit { const url = this.router.url; if (url.endsWith(RouteConfig.statsPath)) { - this.selectOverview(this.campaigns[0]._id); + this.selectOverview(this.campaign._id); } else if (url.indexOf(subPathWar) !== -1) { this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')')); } else if (url.indexOf(subPathOverview) !== -1) { @@ -59,6 +65,9 @@ export class WarListComponent implements OnInit { selectOverview(campaignId) { if (this.selectedWarId !== campaignId) { this.selectedWarId = campaignId; + setTimeout(_ => { + window.dispatchEvent(new Event('resize')); + }); this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route}); } } diff --git a/static/src/assets/icon/stats/award.svg b/static/src/assets/icon/stats/award.svg new file mode 100644 index 0000000..83ed1e0 --- /dev/null +++ b/static/src/assets/icon/stats/award.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/static/src/assets/icon/stats/battle.svg b/static/src/assets/icon/stats/battle.svg new file mode 100644 index 0000000..1d16d66 --- /dev/null +++ b/static/src/assets/icon/stats/battle.svg @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/static/src/assets/icon/stats/flagTouch.svg b/static/src/assets/icon/stats/flagTouch.svg new file mode 100644 index 0000000..e73e0b2 --- /dev/null +++ b/static/src/assets/icon/stats/flagTouch.svg @@ -0,0 +1,196 @@ + + + + + + + + + + + + + + + + + + F + + F + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/friendlyFire.svg b/static/src/assets/icon/stats/friendlyFire.svg new file mode 100644 index 0000000..0a9d201 --- /dev/null +++ b/static/src/assets/icon/stats/friendlyFire.svg @@ -0,0 +1,198 @@ + + + + + + + + + + + + + + + + + + F + + F + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/highscore.svg b/static/src/assets/icon/stats/highscore.svg new file mode 100644 index 0000000..9ac9253 --- /dev/null +++ b/static/src/assets/icon/stats/highscore.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/kill.svg b/static/src/assets/icon/stats/kill.svg new file mode 100644 index 0000000..44c90ff --- /dev/null +++ b/static/src/assets/icon/stats/kill.svg @@ -0,0 +1,200 @@ + + + + + + + + + + + + + + + + + + + + F + + F + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/respawn.svg b/static/src/assets/icon/stats/respawn.svg new file mode 100644 index 0000000..cb50c5e --- /dev/null +++ b/static/src/assets/icon/stats/respawn.svg @@ -0,0 +1,193 @@ + + + + + + + + + + + + + + + + + + F + + F + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/revive.svg b/static/src/assets/icon/stats/revive.svg new file mode 100644 index 0000000..e29fba7 --- /dev/null +++ b/static/src/assets/icon/stats/revive.svg @@ -0,0 +1,198 @@ + + + + + + + + + + + + + + + + + + F + + F + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/stats/statsChart.svg b/static/src/assets/icon/stats/statsChart.svg new file mode 100644 index 0000000..d8aaa7d --- /dev/null +++ b/static/src/assets/icon/stats/statsChart.svg @@ -0,0 +1,14 @@ + + + + + + + + + + From 24f6b2a1563d491355fb52913ab0afea21feff7e Mon Sep 17 00:00:00 2001 From: HardiReady Date: Mon, 30 Jul 2018 20:43:47 +0200 Subject: [PATCH 4/5] Add stats list sidebar collapse --- static/src/app/statistic/stats.component.css | 21 +++++++++++++ static/src/app/statistic/stats.component.html | 22 +++++++------ static/src/app/statistic/stats.component.ts | 9 ++++++ .../war/war-list/war-item.component.css | 4 +++ .../war/war-list/war-item.component.html | 11 +++++-- .../war/war-list/war-item.component.ts | 2 ++ .../war/war-list/war-list.component.css | 17 +++++++--- .../war/war-list/war-list.component.html | 31 +++++++++++++------ .../war/war-list/war-list.component.ts | 4 ++- 9 files changed, 95 insertions(+), 26 deletions(-) diff --git a/static/src/app/statistic/stats.component.css b/static/src/app/statistic/stats.component.css index e69de29..f6990b2 100644 --- a/static/src/app/statistic/stats.component.css +++ b/static/src/app/statistic/stats.component.css @@ -0,0 +1,21 @@ +.side-bar { + width: 20%; + float: left; +} + +.collapsed { + width: 70px; +} + +.button-container { + position: relative; + z-index: 100; +} + +.button-container > button { + position: fixed; + top: calc(100vh - 35px); + left: -10px; + background: white; + border: 1px solid #dadada; +} diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html index b72ec53..0d2a08d 100644 --- a/static/src/app/statistic/stats.component.html +++ b/static/src/app/statistic/stats.component.html @@ -5,18 +5,22 @@
    - - - - - - - - + class="side-bar" + [ngClass]="{collapsed: collapsed}"> +
    + +
    diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts index c1a6bed..184e46e 100644 --- a/static/src/app/statistic/stats.component.ts +++ b/static/src/app/statistic/stats.component.ts @@ -14,6 +14,8 @@ export class StatisticComponent implements OnInit { campaigns: Campaign[] = []; + collapsed: boolean = false; + constructor(private campaignService: CampaignService, private router: Router, private route: ActivatedRoute) { @@ -36,4 +38,11 @@ export class StatisticComponent implements OnInit { } this.router.navigate([{outlets: {'right': ['overview', campaign._id]}}], {relativeTo: this.route}); } + + toggleCollapse() { + this.collapsed = !this.collapsed; + setTimeout(_ => { + window.dispatchEvent(new Event('resize')); + }); + } } diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css index aaec2d6..3c5b7b5 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.css +++ b/static/src/app/statistic/war/war-list/war-item.component.css @@ -40,3 +40,7 @@ .selected div.select-indicator-battle { display: block !important; } + +.collapsed { + white-space: nowrap; +} diff --git a/static/src/app/statistic/war/war-list/war-item.component.html b/static/src/app/statistic/war/war-list/war-item.component.html index 6654d9f..f13e49f 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.html +++ b/static/src/app/statistic/war/war-list/war-item.component.html @@ -1,12 +1,17 @@
    -
    +
    - + ◦ {{war.title}} -
    vom {{war.date | date: 'dd.MM.yyyy'}}
    +
    vom {{war.date | date: 'dd.MM.yyyy'}} +
    div.select-indicator { +.selected > div.select-indicator-container { display: block !important; } @@ -66,7 +71,7 @@ .fill-vertical-border { width: 20%; position: fixed; - border-right: 1px solid #dadada; + border-right: 1px solid #dadada; height: 100vh; } @@ -85,3 +90,7 @@ } /* Table Scrollbar END */ + +.collapsed { + width: 70px; +} diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html index 4200a54..9ae2e13 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.html +++ b/static/src/app/statistic/war/war-list/war-list.component.html @@ -10,21 +10,31 @@
    -
    - - Übersicht +
    +
    +
    + + Übersicht
    -
    - - Highscore +
    +
    +
    + + Highscore
    - - Schlachten + + Schlachten
    @@ -34,9 +44,12 @@ (warEdit)="editWar($event)" (warDelete)="deleteWar(war)" (warSelected)="selectWar($event)" + [collapsed]="collapsed" [selected]="war._id == selectedWarId">
    -
    +
    +
    diff --git a/static/src/app/statistic/war/war-list/war-list.component.ts b/static/src/app/statistic/war/war-list/war-list.component.ts index a5f953a..88c3195 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.ts +++ b/static/src/app/statistic/war/war-list/war-list.component.ts @@ -15,6 +15,8 @@ export class WarListComponent implements OnInit, OnChanges { @Input() campaign: Campaign; + @Input() collapsed: boolean; + selectedWarId: string | number; campaigns: Campaign[] = []; @@ -29,7 +31,7 @@ export class WarListComponent implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges) { - this.selectedWarId = this.campaign._id; + if (changes.campaign) this.selectedWarId = this.campaign._id; } ngOnInit() { From e7904315c66f05c27e9a1800d529955378fb0b2f Mon Sep 17 00:00:00 2001 From: HardiReady Date: Mon, 30 Jul 2018 21:30:59 +0200 Subject: [PATCH 5/5] Rework management two column layouts --- static/src/app/admin/admin.component.css | 2 +- static/src/app/app.component.html | 5 +- .../app/decorations/decoration.component.css | 0 .../app/decorations/decoration.component.html | 1 - .../app/decorations/decoration.component.ts | 11 ---- .../src/app/decorations/decoration.routing.ts | 19 +++---- static/src/app/ranks/ranks.component.css | 0 static/src/app/ranks/ranks.component.html | 1 - static/src/app/ranks/ranks.component.ts | 11 ---- static/src/app/ranks/ranks.routing.ts | 18 +++---- static/src/app/squads/squads.component.css | 0 static/src/app/squads/squads.component.html | 1 - static/src/app/squads/squads.component.ts | 11 ---- static/src/app/squads/squads.routing.ts | 18 +++---- static/src/app/statistic/stats.component.ts | 20 +++++++- static/src/app/statistic/stats.module.ts | 6 +-- .../war/war-list/war-list.component.ts | 50 ++++++------------- static/src/app/style/entry-form.css | 3 +- static/src/app/style/overview.css | 1 + .../users/award-user/award-user.component.css | 2 +- static/src/app/users/users.component.css | 0 static/src/app/users/users.component.html | 1 - static/src/app/users/users.component.ts | 11 ---- static/src/app/users/users.routing.ts | 19 +++---- static/src/styles.css | 14 ++---- 25 files changed, 72 insertions(+), 153 deletions(-) delete mode 100644 static/src/app/decorations/decoration.component.css delete mode 100644 static/src/app/decorations/decoration.component.html delete mode 100644 static/src/app/decorations/decoration.component.ts delete mode 100644 static/src/app/ranks/ranks.component.css delete mode 100644 static/src/app/ranks/ranks.component.html delete mode 100644 static/src/app/ranks/ranks.component.ts delete mode 100644 static/src/app/squads/squads.component.css delete mode 100644 static/src/app/squads/squads.component.html delete mode 100644 static/src/app/squads/squads.component.ts delete mode 100644 static/src/app/users/users.component.css delete mode 100644 static/src/app/users/users.component.html delete mode 100644 static/src/app/users/users.component.ts diff --git a/static/src/app/admin/admin.component.css b/static/src/app/admin/admin.component.css index 4bc0441..722fd6e 100644 --- a/static/src/app/admin/admin.component.css +++ b/static/src/app/admin/admin.component.css @@ -1,5 +1,5 @@ .overview { - padding: 80px 0 0 10% !important; + padding-bottom: 50px!important; } .trash { diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 45872ed..2315d8b 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -105,17 +105,16 @@
    - -
    +
    - +
    diff --git a/static/src/app/decorations/decoration.component.css b/static/src/app/decorations/decoration.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/src/app/decorations/decoration.component.html b/static/src/app/decorations/decoration.component.html deleted file mode 100644 index 0680b43..0000000 --- a/static/src/app/decorations/decoration.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/src/app/decorations/decoration.component.ts b/static/src/app/decorations/decoration.component.ts deleted file mode 100644 index 4583001..0000000 --- a/static/src/app/decorations/decoration.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -@Component({ - selector: 'cc-decorations', - templateUrl: './decoration.component.html', - styleUrls: ['./decoration.component.css'] -}) -export class DecorationComponent { - constructor() { - } -} diff --git a/static/src/app/decorations/decoration.routing.ts b/static/src/app/decorations/decoration.routing.ts index ad7ea52..c89eb7a 100644 --- a/static/src/app/decorations/decoration.routing.ts +++ b/static/src/app/decorations/decoration.routing.ts @@ -1,19 +1,15 @@ import {RouterModule, Routes} from '@angular/router'; -import {DecorationComponent} from './decoration.component'; import {DecorationListComponent} from './decoration-list/decoration-list.component'; import {EditDecorationComponent} from './edit-decoration/edit-decoration.component'; import {ModuleWithProviders} from '@angular/core'; import {DecorationItemComponent} from './decoration-list/decoration-item.component'; -export const decorationsRoutes: Routes = [{ - path: '', component: DecorationComponent, - children: [ - { - path: '', - component: DecorationListComponent - } - ] -}, +export const decorationsRoutes: Routes = [ + { + path: '', + component: DecorationListComponent, + outlet: 'left' + }, { path: 'new', component: EditDecorationComponent, @@ -27,6 +23,5 @@ export const decorationsRoutes: Routes = [{ export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes); -export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent, - EditDecorationComponent]; +export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent]; diff --git a/static/src/app/ranks/ranks.component.css b/static/src/app/ranks/ranks.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/src/app/ranks/ranks.component.html b/static/src/app/ranks/ranks.component.html deleted file mode 100644 index 0680b43..0000000 --- a/static/src/app/ranks/ranks.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/src/app/ranks/ranks.component.ts b/static/src/app/ranks/ranks.component.ts deleted file mode 100644 index 33d3b23..0000000 --- a/static/src/app/ranks/ranks.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -@Component({ - selector: 'cc-ranks', - templateUrl: './ranks.component.html', - styleUrls: ['./ranks.component.css'] -}) -export class RankComponent { - constructor() { - } -} diff --git a/static/src/app/ranks/ranks.routing.ts b/static/src/app/ranks/ranks.routing.ts index fa72166..076775b 100644 --- a/static/src/app/ranks/ranks.routing.ts +++ b/static/src/app/ranks/ranks.routing.ts @@ -1,19 +1,15 @@ import {RouterModule, Routes} from '@angular/router'; -import {RankComponent} from './ranks.component'; import {RankListComponent} from './rank-list/rank-list.component'; import {EditRankComponent} from './edit-rank/edit-rank.component'; import {RankItemComponent} from './rank-list/rank-item.component'; import {ModuleWithProviders} from '@angular/core'; -export const ranksRoutes: Routes = [{ - path: '', component: RankComponent, - children: [ - { - path: '', - component: RankListComponent - } - ] -}, +export const ranksRoutes: Routes = [ + { + path: '', + component: RankListComponent, + outlet: 'left' + }, { path: 'new', component: EditRankComponent, @@ -27,5 +23,5 @@ export const ranksRoutes: Routes = [{ export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes); -export const ranksRoutingComponents = [RankComponent, RankItemComponent, RankListComponent, EditRankComponent]; +export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent]; diff --git a/static/src/app/squads/squads.component.css b/static/src/app/squads/squads.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/src/app/squads/squads.component.html b/static/src/app/squads/squads.component.html deleted file mode 100644 index 0680b43..0000000 --- a/static/src/app/squads/squads.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/src/app/squads/squads.component.ts b/static/src/app/squads/squads.component.ts deleted file mode 100644 index 3fc7469..0000000 --- a/static/src/app/squads/squads.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -@Component({ - selector: 'cc-users', - templateUrl: './squads.component.html', - styleUrls: ['./squads.component.css'] -}) -export class SquadComponent { - constructor() { - } -} diff --git a/static/src/app/squads/squads.routing.ts b/static/src/app/squads/squads.routing.ts index d6585aa..b1dadb7 100644 --- a/static/src/app/squads/squads.routing.ts +++ b/static/src/app/squads/squads.routing.ts @@ -1,19 +1,15 @@ import {RouterModule, Routes} from '@angular/router'; -import {SquadComponent} from './squads.component'; import {SquadListComponent} from './squad-list/squad-list.component'; import {EditSquadComponent} from './edit-squad/edit-squad.component'; import {ModuleWithProviders} from '@angular/core'; import {SquadItemComponent} from './squad-list/squad-item.component'; -export const squadsRoutes: Routes = [{ - path: '', component: SquadComponent, - children: [ - { - path: '', - component: SquadListComponent - } - ] -}, +export const squadsRoutes: Routes = [ + { + path: '', + component: SquadListComponent, + outlet: 'left' + }, { path: 'new', component: EditSquadComponent, @@ -27,5 +23,5 @@ export const squadsRoutes: Routes = [{ export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes); -export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent]; +export const squadsRoutingComponents = [SquadItemComponent, SquadListComponent, EditSquadComponent]; diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts index 184e46e..1629020 100644 --- a/static/src/app/statistic/stats.component.ts +++ b/static/src/app/statistic/stats.component.ts @@ -14,7 +14,7 @@ export class StatisticComponent implements OnInit { campaigns: Campaign[] = []; - collapsed: boolean = false; + collapsed = false; constructor(private campaignService: CampaignService, private router: Router, @@ -45,4 +45,22 @@ export class StatisticComponent implements OnInit { window.dispatchEvent(new Event('resize')); }); } + + + // TODO: REACTIVATE + // deleteCampaign(campaign) { + // if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) { + // this.campaignService.deleteCampaign(campaign._id) + // .subscribe((res) => { + // if (this.selectedWarId === campaign._id) { + // this.selectOverview('all'); + // } + // this.campaigns.splice(this.campaigns.indexOf(campaign), 1); + // }); + // } + // } + // + // editCampaign(selectCampaign) { + // this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route}); + // } } diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 5d027cc..d3ba14c 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -7,11 +7,7 @@ import {NgxChartsModule} from '@swimlane/ngx-charts'; import {CampaignService} from '../services/logs/campaign.service'; import {PlayerService} from '../services/logs/player.service'; import {LogsService} from '../services/logs/logs.service'; -import { - MatButtonToggleModule, - MatSortModule, - MatTableModule -} from '@angular/material'; +import {MatButtonToggleModule, MatSortModule, MatTableModule} from '@angular/material'; @NgModule({ diff --git a/static/src/app/statistic/war/war-list/war-list.component.ts b/static/src/app/statistic/war/war-list/war-list.component.ts index 88c3195..8f21340 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.ts +++ b/static/src/app/statistic/war/war-list/war-list.component.ts @@ -19,8 +19,6 @@ export class WarListComponent implements OnInit, OnChanges { selectedWarId: string | number; - campaigns: Campaign[] = []; - public readonly highscore = 'HIGHSCORE'; constructor(private warService: WarService, @@ -31,25 +29,23 @@ export class WarListComponent implements OnInit, OnChanges { } ngOnChanges(changes: SimpleChanges) { - if (changes.campaign) this.selectedWarId = this.campaign._id; + if (changes.campaign) { + this.selectedWarId = this.campaign._id; + } } ngOnInit() { - this.campaignService.getAllCampaignsWithWars().subscribe((items) => { - const subPathWar = 'war/'; - const subPathOverview = 'overview/'; - this.campaignService.campaigns = items; - this.campaigns = items; + const url = this.router.url; + const subPathWar = 'war/'; + const subPathOverview = 'overview/'; - const url = this.router.url; - if (url.endsWith(RouteConfig.statsPath)) { - this.selectOverview(this.campaign._id); - } else if (url.indexOf(subPathWar) !== -1) { - this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')')); - } else if (url.indexOf(subPathOverview) !== -1) { - this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')')); - } - }); + if (url.endsWith(RouteConfig.statsPath)) { + this.selectOverview(this.campaign._id); + } else if (url.indexOf(subPathWar) !== -1) { + this.selectedWarId = url.substring(url.lastIndexOf(subPathWar) + subPathWar.length, url.lastIndexOf(')')); + } else if (url.indexOf(subPathOverview) !== -1) { + this.selectedWarId = url.substring(url.lastIndexOf(subPathOverview) + subPathOverview.length, url.lastIndexOf(')')); + } } selectNewCampaign() { @@ -98,26 +94,8 @@ export class WarListComponent implements OnInit, OnChanges { if (this.selectedWarId === war._id) { this.selectOverview('all'); } - this.campaigns.forEach(campaign => { - campaign.wars.splice(campaign.wars.indexOf(war), 1); - }); + this.campaign.wars.splice(this.campaign.wars.indexOf(war), 1); }); } } - - deleteCampaign(campaign) { - if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) { - this.campaignService.deleteCampaign(campaign._id) - .subscribe((res) => { - if (this.selectedWarId === campaign._id) { - this.selectOverview('all'); - } - this.campaigns.splice(this.campaigns.indexOf(campaign), 1); - }); - } - } - - editCampaign(selectCampaign) { - this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route}); - } } diff --git a/static/src/app/style/entry-form.css b/static/src/app/style/entry-form.css index 6a763c3..e01c4b2 100644 --- a/static/src/app/style/entry-form.css +++ b/static/src/app/style/entry-form.css @@ -1,7 +1,6 @@ .overview { overflow: hidden !important; - padding-top: 80px !important; - width: 20%; + width: 30vw; min-width: 380px; } diff --git a/static/src/app/style/overview.css b/static/src/app/style/overview.css index 6f3e5eb..455e529 100644 --- a/static/src/app/style/overview.css +++ b/static/src/app/style/overview.css @@ -4,6 +4,7 @@ overflow-x: hidden; border-left: thin solid lightgrey; padding: 20px 0 0 50px; + top: 50px; height: 100vh; bottom: 10px; } diff --git a/static/src/app/users/award-user/award-user.component.css b/static/src/app/users/award-user/award-user.component.css index fb1ca78..afd1159 100644 --- a/static/src/app/users/award-user/award-user.component.css +++ b/static/src/app/users/award-user/award-user.component.css @@ -25,7 +25,7 @@ } h3 { - margin: 80px 0 20px -20px; + margin-left: -20px; } label { diff --git a/static/src/app/users/users.component.css b/static/src/app/users/users.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/src/app/users/users.component.html b/static/src/app/users/users.component.html deleted file mode 100644 index 0680b43..0000000 --- a/static/src/app/users/users.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/static/src/app/users/users.component.ts b/static/src/app/users/users.component.ts deleted file mode 100644 index 6936f1d..0000000 --- a/static/src/app/users/users.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -@Component({ - selector: 'cc-users', - templateUrl: 'users.component.html', - styleUrls: ['users.component.css'] -}) -export class UsersComponent { - constructor() { - } -} diff --git a/static/src/app/users/users.routing.ts b/static/src/app/users/users.routing.ts index 34813af..9c31085 100644 --- a/static/src/app/users/users.routing.ts +++ b/static/src/app/users/users.routing.ts @@ -1,20 +1,16 @@ import {RouterModule, Routes} from '@angular/router'; -import {UsersComponent} from './users.component'; import {EditUserComponent} from './edit-user/edit-user.component'; import {UserListComponent} from './user-list/user-list.component'; import {AwardUserComponent} from './award-user/award-user.component'; import {ModuleWithProviders} from '@angular/core'; import {UserItemComponent} from './user-list/user-item.component'; -export const usersRoutes: Routes = [{ - path: '', component: UsersComponent, - children: [ - { - path: '', - component: UserListComponent - } - ] -}, +export const usersRoutes: Routes = [ + { + path: '', + component: UserListComponent, + outlet: 'left' + }, { path: 'new', component: EditUserComponent, @@ -34,5 +30,4 @@ export const usersRoutes: Routes = [{ export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes); -export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, - AwardUserComponent]; +export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent]; diff --git a/static/src/styles.css b/static/src/styles.css index c969b80..a38907f 100644 --- a/static/src/styles.css +++ b/static/src/styles.css @@ -40,17 +40,11 @@ form { } #left { - display: none; - width: 20%; - min-width: 350px; - max-width: 450px; + max-width: 20%; + min-width: 345px; + margin: 0; + position: static; float: left; - background: #f9f9f9; - box-shadow: 2px 1px 5px grey; -} - -#left:not(:empty) { - display:block!important; } #right {