Add public decoration table (CC-38)

Distinct all time overview vs campaign overview
Update alltime stats to use timeline (CC-47)
2018-07-18 21:15:42 +02:00 · 2018-07-18 20:05:06 +02:00 · 2018-07-18 19:55:22 +02:00 · 2018-07-18 19:53:06 +02:00
9 changed files with 182 additions and 121 deletions
--- a/static/package-lock.json
+++ b/static/package-lock.json
@ -2132,9 +2132,9 @@
      "dev": true
    },
    "circular-json": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.4.tgz",
-      "integrity": "sha512-vnJA8KS0BfOihugYEUkLRcnmq21FbuivbxgzDLXNs3zIk4KllV4Mx4UuTzBXht9F00C7QfD1YqMXg1zP6EXpig==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.5.5.tgz",
+      "integrity": "sha512-13YaR6kiz0kBNmIVM87Io8Hp7bWOo4r61vkEANy8iH9R9bc6avud/1FT0SBpqR1RpIQADOh/Q+yHZDA1iL6ysA==",
      "dev": true
    },
    "class-utils": {
@ -3569,9 +3569,9 @@
      "dev": true
    },
    "escodegen": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.10.0.tgz",
-      "integrity": "sha512-fjUOf8johsv23WuIKdNQU4P9t9jhQ4Qzx6pC2uW890OloK3Zs1ZAoCNpg/2larNF501jLl3UNy0kIRcF6VI22g==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.0.tgz",
+      "integrity": "sha512-IeMV45ReixHS53K/OmfKAIztN/igDHzTJUhZM3k1jMhIZWjk45SMwAtBsEXiJp3vSPmTcu6CXn7mDvFHRN66fw==",
      "dev": true,
      "optional": true,
      "requires": {
@ -7067,9 +7067,9 @@
      }
    },
    "log4js": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/log4js/-/log4js-2.10.0.tgz",
-      "integrity": "sha512-NnhN9PjFF9zhxinAjlmDYvkqqrIW+yA3LLJAoTJ3fs6d1zru86OqQHfsxiUcc1kRq3z+faGR4DeyXUfiNbVxKQ==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-2.11.0.tgz",
+      "integrity": "sha512-z1XdwyGFg8/WGkOyF6DPJjivCWNLKrklGdViywdYnSKOvgtEBo2UyEMZS5sD2mZrQlU3TvO8wDWLc8mzE1ncBQ==",
      "dev": true,
      "requires": {
        "amqplib": "^0.5.2",
@ -7739,9 +7739,9 @@
      }
    },
    "ngx-cookie-service": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-1.0.9.tgz",
-      "integrity": "sha512-n4kTAZQr4EnnQLBaRPMjSmf98N/aLlYWknmbRunonJj9aMhpT1Nki6PfjBuRPl5DxT/9NMAVrQyvk66k/pJ0uQ=="
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-1.0.10.tgz",
+      "integrity": "sha512-TAXpQsIONAupTqkUDcH44hFQsLTvsXpxM80eKgxvy3vhBFfT1uIdR7BRhM7VpUW5J7BN9qCbGNgLN5lsnVu7pw=="
    },
    "ngx-infinite-scroll": {
      "version": "0.5.2",
@ -8578,6 +8578,17 @@
          "requires": {
            "ms": "2.0.0"
          }
+        },
+        "socks-proxy-agent": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-3.0.1.tgz",
+          "integrity": "sha512-ZwEDymm204mTzvdqyUqOdovVr2YRd2NYskrYrF2LXyZ9qDiMAoFESGK8CRphiO7rtbo2Y757k2Nia3x2hGtalA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "agent-base": "^4.1.0",
+            "socks": "^1.1.10"
+          }
        }
      }
    },
@ -9114,9 +9125,9 @@
      }
    },
    "proxy-agent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-3.0.0.tgz",
-      "integrity": "sha512-g6n6vnk8fRf705ShN+FEXFG/SDJaW++lSs0d9KaJh4uBWW/wi7en4Cpo5VYQW3SZzAE121lhB/KLQrbURoubZw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-3.0.1.tgz",
+      "integrity": "sha512-mAZexaz9ZxQhYPWfAjzlrloEjW+JHiBFryE4AJXFDTnaXfmH/FKqC1swTRKuEPbHWz02flQNXFOyDUF7zfEG6A==",
      "dev": true,
      "optional": true,
      "requires": {
@ -9127,7 +9138,7 @@
        "lru-cache": "^4.1.2",
        "pac-proxy-agent": "^2.0.1",
        "proxy-from-env": "^1.0.0",
-        "socks-proxy-agent": "^3.0.0"
+        "socks-proxy-agent": "^4.0.1"
      },
      "dependencies": {
        "debug": {
@ -10139,7 +10150,8 @@
      "version": "1.1.15",
      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-1.1.15.tgz",
      "integrity": "sha1-fxFLW2X6s+KjWqd1uxLw0cZJvxY=",
-      "dev": true
+      "dev": true,
+      "optional": true
    },
    "smtp-connection": {
      "version": "2.12.0",
@ -10361,19 +10373,41 @@
      "resolved": "https://registry.npmjs.org/socks/-/socks-1.1.10.tgz",
      "integrity": "sha1-W4t/x8jzQcU+0FbpKbe/Tei6e1o=",
      "dev": true,
+      "optional": true,
      "requires": {
        "ip": "^1.1.4",
        "smart-buffer": "^1.0.13"
      }
    },
    "socks-proxy-agent": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-3.0.1.tgz",
-      "integrity": "sha512-ZwEDymm204mTzvdqyUqOdovVr2YRd2NYskrYrF2LXyZ9qDiMAoFESGK8CRphiO7rtbo2Y757k2Nia3x2hGtalA==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-Kezx6/VBguXOsEe5oU3lXYyKMi4+gva72TwJ7pQY5JfqUx2nMk7NXA6z/mpNqIlfQjWYVfeuNvQjexiTaTn6Nw==",
      "dev": true,
+      "optional": true,
      "requires": {
-        "agent-base": "^4.1.0",
-        "socks": "^1.1.10"
+        "agent-base": "~4.2.0",
+        "socks": "~2.2.0"
+      },
+      "dependencies": {
+        "smart-buffer": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.1.tgz",
+          "integrity": "sha512-RFqinRVJVcCAL9Uh1oVqE6FZkqsyLiVOYEZ20TqIOjuX7iFVJ+zsbs4RIghnw/pTs7mZvt8ZHhvm1ZUrR4fykg==",
+          "dev": true,
+          "optional": true
+        },
+        "socks": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/socks/-/socks-2.2.1.tgz",
+          "integrity": "sha512-0GabKw7n9mI46vcNrVfs0o6XzWzjVa3h6GaSo2UPxtWAROXUWavfJWh1M4PR5tnE0dcnQXZIDFP4yrAysLze/w==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ip": "^1.1.5",
+            "smart-buffer": "^4.0.1"
+          }
+        }
      }
    },
    "source-list-map": {
--- a/static/package.json
+++ b/static/package.json
@ -36,7 +36,7 @@
    "jquery-ui": "^1.12.0",
    "jquery-ui-bundle": "^1.11.4",
    "ngx-clipboard": "^11.1.1",
-    "ngx-cookie-service": "^1.0.9",
+    "ngx-cookie-service": "^1.0.10",
    "ngx-infinite-scroll": "^0.5.2",
    "rxjs-compat": "^6.2.1",
    "ts-helpers": "^1.1.2",
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@ -15,6 +15,10 @@ li {
  z-index: 500;
 }

+.sidebar-toggle-btn mat-icon {
+  color: #666666;
+}
+
 .content {
  padding-left: 15px;
  padding-right: 15px;
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@ -20,24 +20,34 @@
          <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.publicPath,{outlets:{right:'decorations'}}]" class="link">Auszeichnungen</a>
+          </li>
          <li routerLinkActive="active">
            <a routerLink='{{config.statsPath}}' class="link">Statistiken</a>
          </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+          <li *ngIf="loginService.hasPermission(2)"
+              class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
+               aria-expanded="false">
+              Verwaltung
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu">
+              <li routerLinkActive="active">
                <a routerLink='{{config.userPath}}' class="link">Teilnehmer</a>
              </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                <a routerLink='{{config.squadPath}}' class="link">Squads</a>
              </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                <a routerLink='{{config.decorationPath}}' class="link">Auszeichnungen</a>
              </li>
-          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
+              <li routerLinkActive="active">
                <a routerLink='{{config.rankPath}}' class="link">Ränge</a>
              </li>
+            </ul>
+          </li>
          <li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
              class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css
@ -1,75 +1,42 @@
-.squad-layout {
-  overflow: hidden;
-  padding: 5px 15px 5px 15px;
+table {
+  width: 100%;
+  margin-bottom: 20px;
 }

-.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;
+:host /deep/ table.mat-table {
+  background: rgba(255, 255, 255, 0.6);
 }

 h1 {
  text-align: center;
+  margin-bottom: 30px;
 }

-img {
-  position: absolute;
-  margin-top: 8px;
-  margin-left: 25px;
+td > img {
+  margin: 5px 2px;
 }

-.member-link {
-  cursor: pointer;
-  text-decoration: underline;
+.mat-column-image {
+  width: 160px;
 }

-.army-head {
-  font-weight: bolder;
-  text-align: center
+.mat-column-fraction {
+  width: 90px;
+  text-indent: 10px;
 }

-.member-count {
-  margin-top: 15px;
-  padding: 8px;
-  text-align: center;
-  font-weight: bold;
-  color: whitesmoke;
-  background: #222222;
-  border-radius: 12px;
+.mat-column-description {
+  width: 55%;
 }

+tr.mat-row:hover {
+  background: rgba(231, 231, 231, 0.6);
+}
+
+:host /deep/ table.fixed-header-table > thead {
+  position: fixed;
+  display: inherit;
+  width: 1100px;
+  background: white;
+  top: 50px;
+}
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html
@ -1,18 +1,44 @@
 <div style="width: 1100px; margin:auto; position: relative;">
-  <h1>Übersicht über alle Ränge</h1>
+  <h1>Übersicht über alle Auszeichnungen</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>
+  <table mat-table
+         [dataSource]="rows"
+         [class.fixed-header-table]="hasFixedTableHeader"
+         class="mat-elevation-z8">

-  <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>
+    <ng-container matColumnDef="{{columnMap[0].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[0].head}}</th>
+      <td mat-cell *matCellDef="let element">
+        <img src="resource/decoration/{{element._id}}.png"
+             matTooltip="{{element.name}}"
+             alt="{{element.name}}">
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[1].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[1].head}}</th>
+      <td mat-cell *matCellDef="let element">{{element[columnMap[1].prop]}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[2].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[2].head}}</th>
+      <td mat-cell *matCellDef="let element"
+          [style.color]="element['fraction'] === 'BLUFOR' ?
+           fraction.COLOR_BLUFOR :
+            element['fraction'] === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+        {{element[columnMap[2].prop] === 'BLUFOR'?
+        'NATO' :
+        element[columnMap[2].prop] === 'OPFOR' ? 'CSAT' : 'GLOBAL'}}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="{{columnMap[3].prop}}">
+      <th mat-header-cell *matHeaderCellDef>{{columnMap[3].head}}</th>
+      <td mat-cell *matCellDef="let element">{{element[columnMap[3].prop]}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>

 </div>
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@ -1,4 +1,4 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';

 import {DOCUMENT} from '@angular/common';
@ -16,7 +16,20 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 })
 export class DecorationOverviewComponent implements OnInit, OnDestroy {

-  decorations: Decoration[];
+  rows: Decoration[];
+
+  columnMap = [
+    {prop: 'image', head: 'Abbildung'},
+    {prop: 'name', head: 'Bezeichnung'},
+    {prop: 'fraction', head: 'Fraktion'},
+    {prop: 'description', head: 'Beschreibung'}
+    ];
+
+  displayedColumns = this.columnMap.map(col => col.prop);
+
+  tableHeaderFixedVal = 100;
+
+  hasFixedTableHeader = false;

  readonly fraction = Fraction;

@ -30,13 +43,19 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
    // set background image css
    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));

-    // init rank data
+    // init decoration data
    this.decorationService.findDecorations()
        .subscribe(decorations => {
-          this.decorations = decorations;
+          this.rows = decorations;
        });
  };

+  @HostListener('window:scroll', [])
+  onWindowScroll() {
+    this.hasFixedTableHeader = document.body.scrollTop > this.tableHeaderFixedVal
+      || document.documentElement.scrollTop > this.tableHeaderFixedVal;
+  }
+
  ngOnDestroy() {
    if (!this.router.url.includes(RouteConfig.overviewPath)) {
      this.document.getElementById('right').setAttribute('style', '');
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@ -5,6 +5,7 @@ import {RankService} from '../services/army-management/rank.service';
 import {pubRouterModule, pubRoutingComponents} from './public.routing';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material';


@NgModule({
--- a/static/src/app/statistic/campaign/overview/stats-overview.component.ts
+++ b/static/src/app/statistic/campaign/overview/stats-overview.component.ts
@ -66,6 +66,7 @@ export class StatisticOverviewComponent implements OnInit {
      itemsProcessed++;
      if (itemsProcessed === campaigns.length) {
        if (this.id === 'all') {
+          this.timeline = true;
          this.title = 'Gesamtübersicht';
          wars.sort((a, b) => {
            // sort by dates, because older campaign can contain newer war
@ -110,34 +111,34 @@ export class StatisticOverviewComponent implements OnInit {

    for (let i = wars.length - 1; i >= 0; i--) {
      const j = wars.length - i - 1;
-      const warDateString = ChartUtils.getShortDateString(wars[i].date);
+      const warDate = (this.id === 'all') ? new Date(wars[i].date) : ChartUtils.getShortDateString(wars[i].date);

      pointsObj[0].series.push({
-        name: warDateString,
+        name: warDate,
        value: wars[i].ptBlufor
      });
      pointsObj[1].series.push({
-        name: warDateString,
+        name: warDate,
        value: wars[i].ptOpfor
      });
      pointsSumObj[0].series.push({
-        name: warDateString,
+        name: warDate,
        value: pointsSumObj[0].series[j - 1] ?
          pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
          wars[i].ptBlufor
      });
      pointsSumObj[1].series.push({
-        name: warDateString,
+        name: warDate,
        value: pointsSumObj[1].series[j - 1]
          ? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
          wars[i].ptOpfor
      });
      playersObj[0].series.push({
-        name: warDateString,
+        name: warDate,
        value: wars[i].playersBlufor
      });
      playersObj[1].series.push({
-        name: warDateString,
+        name: warDate,
        value: wars[i].playersOpfor
      });
    }
@ -156,5 +157,4 @@ export class StatisticOverviewComponent implements OnInit {
  isActiveSlide(index) {
    return this.activeSlideIndex === index ? '#d9edf7' : 'white';
  }
-
 }
Author	SHA1	Message	Date
HardiReady	783d30e91e	Add public decoration table (CC-38)	2018-07-18 21:15:42 +02:00
HardiReady	14901883e6	Distinct all time overview vs campaign overview	2018-07-18 20:05:06 +02:00
HardiReady	2b824bac7c	Update alltime stats to use timeline (CC-47)	2018-07-18 19:55:22 +02:00
HardiReady	e218076ae3	* Use timeline with dates in all time stats overview (CC-47) * Update menu to group managing points	2018-07-18 19:53:06 +02:00