hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Add new war and campaign edit/delete menus

pull/38/head
HardiReady 2018-08-06 20:50:04 +02:00
parent 447925b44f
commit d8544edb5e
13 changed files with 86 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/src/app/app.component.ts
View File

@ -26,21 +26,18 @@ export class AppComponent implements OnInit {
scrollBtnVisibleVal = 100;
leftBackground;
leftBoxShadow;
// a map of svgIcon names and associated svg file names
// to load from assets/icon folder
svgIcons = {
'add': 'outline-add_box-24px',
'add-user': 'twotone-person_add-24px',
'edit': 'twotone-edit-24px',
'delete': 'twotone-delete-24px',
'edit': 'baseline-edit-24px',
'delete': 'baseline-delete-24px',
'stats-detail': 'round-assessment-24px',
'chevron-left': 'baseline-chevron_left-24px',
'chevron-right': 'baseline-chevron_right-24px',
'arrow-up': 'baseline-arrow_upward-24px',
'more-vert': 'baseline-more_vert-24px',
// --------STATISTICS---------
'award': 'stats/award',
'battle': 'stats/battle',
@ -79,18 +76,6 @@ export class AppComponent implements OnInit {
if (currentUrl.includes('/overview')) {
this.scrollToTop();
}
// remove sidebar styling for components that are rendered inside,
// but not really shown as sidebar (legacy)
if (currentUrl.includes('/login') ||
currentUrl.includes('/signup') ||
currentUrl.endsWith('/404')) {
this.leftBackground = 'none';
this.leftBoxShadow = 'none';
} else {
this.leftBackground = '#f9f9f9';
this.leftBoxShadow = '2px 1px 5px grey';
}
}
});
}

19
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
View File

@ -16,6 +16,25 @@
[ngClass]="{active : campaign._id === selectedCampaignId}"
(click)="select(campaign)">
{{campaign.title}}
<span style="display:inline-block;"
*ngIf="loginService.hasPermission(3)">
<button mat-icon-button
[matMenuTriggerFor]="menu"
(click)="$event.stopPropagation()"
style="height: 20px; line-height: 20px;">
<mat-icon svgIcon="more-vert"></mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="edit(campaign)">
<mat-icon svgIcon="edit"></mat-icon>
<span>Bearbeiten</span>
</button>
<button mat-menu-item (click)="delete(campaign)">
<mat-icon svgIcon="delete"></mat-icon>
<span>Löschen</span>
</button>
</mat-menu>
</span>
</div>
</div>

16
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts
View File

@ -1,5 +1,6 @@
import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
import {Campaign} from '../../../models/model-interfaces';
import {LoginService} from '../../../services/app-user-service/login-service';
@Component({
selector: 'campaign-navigation',
@ -14,6 +15,10 @@ export class CampaignNavigationComponent implements OnChanges {
@Output() campaignSelect = new EventEmitter();
@Output() campaignEdit = new EventEmitter();
@Output() campaignDelete = new EventEmitter();
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
isLeftScrollVisible = false;
@ -22,6 +27,9 @@ export class CampaignNavigationComponent implements OnChanges {
repeater;
constructor(public loginService: LoginService) {
}
ngOnChanges() {
this.isRightScrollVisible = this.campaigns.length > 4;
}
@ -31,6 +39,14 @@ export class CampaignNavigationComponent implements OnChanges {
this.campaignSelect.emit(campaign);
}
edit(campaign) {
this.campaignEdit.emit(campaign);
}
delete(campaign) {
this.campaignDelete.emit(campaign);
}
public scrollList(scrollValue: number): void {
const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;

4
static/src/app/statistic/stats.component.html
View File

@ -1,7 +1,9 @@
<campaign-navigation
[campaigns]="campaigns"
[selectedCampaignId]="selectedCampaign._id"
(campaignSelect)="switchCampaign($event)">
(campaignSelect)="switchCampaign($event)"
(campaignEdit)="editCampaign($event)"
(campaignDelete)="deleteCampaign($event)">
</campaign-navigation>
<div *ngIf="selectedCampaign._id !== 'all'"

27
static/src/app/statistic/stats.component.ts
View File

@ -46,21 +46,16 @@ export class StatisticComponent implements OnInit {
});
}
deleteCampaign(campaign) {
if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
this.campaignService.deleteCampaign(campaign._id)
.subscribe((res) => {
this.campaigns.splice(this.campaigns.indexOf(campaign), 1);
});
}
}
// 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});
// }
editCampaign(selectCampaign) {
this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
}
}

4
static/src/app/statistic/stats.module.ts
View File

@ -7,13 +7,13 @@ 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, MatMenuModule, MatSortModule, MatTableModule} from '@angular/material';
@NgModule({
declarations: statsRoutingComponents,
imports: [CommonModule, SharedModule, NgxChartsModule, MatButtonToggleModule, MatTableModule, MatSortModule,
statsRouterModule],
MatMenuModule, statsRouterModule],
providers: [WarService, CampaignService, PlayerService, LogsService]
})
export class StatsModule {

34
static/src/app/statistic/war/war-list/war-item.component.html
View File

@ -8,25 +8,25 @@
<span class="war-title"
[ngClass]="{collapsed: collapsed}">
◦ {{war.title}}
</span>
</span>
<span style="float:right;margin-right: 12px;"
*ngIf="!collapsed && loginService.hasPermission(3)">
<button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
<mat-icon svgIcon="more-vert"></mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="edit()">
<mat-icon svgIcon="edit"></mat-icon>
<span>Bearbeiten</span>
</button>
<button mat-menu-item (click)="delete()">
<mat-icon svgIcon="delete"></mat-icon>
<span>Löschen</span>
</button>
</mat-menu>
</span>
<div class="war-detail"
[ngClass]="{collapsed: collapsed}">vom {{war.date | date: 'dd.MM.yyyy'}}
</div>
</div>
<div *ngIf="loginService.hasPermission(3)"
class="interact-ico-container">
<button mat-icon-button
class="add-btn"
matTooltip="Bearbeiten"
(click)="edit(); $event.stopPropagation()">
<mat-icon svgIcon="edit"></mat-icon>
</button>
<button mat-icon-button
class="add-btn"
matTooltip="Löschen"
(click)="delete(); $event.stopPropagation()">
<mat-icon svgIcon="delete"></mat-icon>
</button>
</div>
</div>

6
static/src/app/statistic/war/war-list/war-list.component.html
View File

@ -1,10 +1,10 @@
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
<button mat-stroked-button (click)="selectNewWar()">
Schlacht hinzufügen
</button>
<button mat-stroked-button (click)="selectNewCampaign()">
Kampagne hinzufügen
</button>
<button mat-stroked-button (click)="selectNewWar()">
Schlacht hinzufügen
</button>
</div>

4
static/src/assets/icon/baseline-delete-24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 227 B

4
static/src/assets/icon/baseline-edit-24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 299 B

4
static/src/assets/icon/baseline-more_vert-24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 295 B

49
static/src/assets/icon/twotone-delete-24px.svg
View File

@ -1,49 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Header_x2F_BG" display="none">
<rect x="-270" y="-270" display="inline" fill="#F1F1F2" width="520" height="520"/>
</g>
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Rounded" display="none">
<g id="ui_x5F_spec_x5F_header_copy_5" display="inline">
</g>
<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
v0C19,4.45,18.55,4,18,4z"/>
</g>
<g id="Sharp" display="none">
<g id="ui_x5F_spec_x5F_header_copy_4" display="inline">
</g>
<path display="inline" d="M6,21h12V7H6V21z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
</g>
<g id="Outline" display="none">
<g id="ui_x5F_spec_x5F_header" display="inline">
</g>
<path id="XMLID_282_" display="inline" d="M16,9v10H8V9H16 M14.5,3h-5l-1,1H5v2h14V4h-3.5L14.5,3L14.5,3z M18,7H6v12
c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7L18,7z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_2">
</g>
<g>
<rect x="8" y="9" opacity="0.3" width="8" height="10"/>
<g>
<polygon points="15.5,4 14.5,3 9.5,3 8.5,4 5,4 5,6 19,6 19,4 "/>
<path d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M8,9h8v10H8V9z"/>
</g>
</g>
</g>
<g id="Fill" display="none">
<g id="ui_x5F_spec_x5F_header_copy" display="inline">
</g>
<path display="inline" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M19,4h-3.5l-1-1h-5l-1,1H5v2h14V4z"/>
</g>
<g id="nyt_x5F_exporter_x5F_info" display="none">
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

20
static/src/assets/icon/twotone-edit-24px.svg
View File

@ -1,20 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_5">
</g>
<g>
<polygon opacity="0.3" points="5,18.08 5,19 5.92,19 14.98,9.94 14.06,9.02 "/>
<path d="M20.71,7.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C18.17,3.09,17.92,3,17.66,3s-0.51,0.1-0.7,0.29l-1.83,1.83l3.75,3.75
L20.71,7.04z"/>
<path d="M3,17.25V21h3.75L17.81,9.94l-3.75-3.75L3,17.25z M5.92,19H5v-0.92l9.06-9.06l0.92,0.92L5.92,19z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 891 B