Add new war and campaign edit/delete menus

static/src/app/app.component.ts

@@ -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',
+    'edit': 'baseline-edit-24px',
-    'delete': 'twotone-delete-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';
-        }
       }
     });
   }

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html

@@ -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>
 

static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts

@@ -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;
 

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

@@ -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'"

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

@@ -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
+  editCampaign(selectCampaign) {
-  // deleteCampaign(campaign) {
+    this.router.navigate([{outlets: {'right': ['campaign', selectCampaign._id]}}], {relativeTo: this.route});
-  //   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});
-  // }
 }

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

@@ -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 {

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

@@ -9,24 +9,24 @@
           [ngClass]="{collapsed: collapsed}">
         ◦ {{war.title}}
     </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>

static/src/app/statistic/war/war-list/war-list.component.html

@@ -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>
 
 

static/src/assets/icon/baseline-delete-24px.svg

@@ -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>

static/src/assets/icon/baseline-edit-24px.svg

@@ -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>

static/src/assets/icon/baseline-more_vert-24px.svg

@@ -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>

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

@@ -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>

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

@@ -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>