add plazer highscore tables with filter

api/routes/players.js

@@ -34,7 +34,7 @@ campaignPlayer.route('/ranking/:campaignId')
 
         const rankingItems = [];
         new Set(items.map(x => x.name)).forEach(playerName => {
-          const playerInstances = items.filter(p => p.name === playerName)
+          const playerInstances = items.filter(p => p.name === playerName);
           const resItem = {name: playerName, kill: 0, death: 0, friendlyFire: 0, revive: 0, respawn: 0, flagTouch: 0};
           for (let i = 0; i < playerInstances.length; i++) {
             resItem.kill += playerInstances[i].kill;
@@ -48,17 +48,23 @@ campaignPlayer.route('/ranking/:campaignId')
           rankingItems.push(resItem);
         });
 
-        function getTopFive(fieldName) {
-          return rankingItems.sort((a, b) => b[fieldName] - a[fieldName]).slice(0, 5)
+        function getSortedField(fieldName) {
+          let num = 1;
+          rankingItems.sort((a, b) => b[fieldName] - a[fieldName])
+          const res = JSON.parse(JSON.stringify(rankingItems));
+          for (const entity of res) {
+            entity.num = num++;
+          }
+          return res;
         }
 
         res.locals.items = {
-          kills: getTopFive('kill'),
-          death: getTopFive('death'),
-          friendlyFire: getTopFive('friendlyFire'),
-          revive: getTopFive('revive'),
-          respawn: getTopFive('respawn'),
-          flagTouch: getTopFive('flagTouch')
+          kill: getSortedField('kill'),
+          death: getSortedField('death'),
+          friendlyFire: getSortedField('friendlyFire'),
+          revive: getSortedField('revive'),
+          respawn: getSortedField('respawn'),
+          flagTouch: getSortedField('flagTouch')
         };
         next();
       })

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.6.3",
+  "version": "1.6.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -8,7 +8,7 @@
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
     "deploy-static": "cd ./static && $(npm bin)/ng build && ln -s ../api/resource/ ../public/resource",
-    "deploy-static-prod": "cd ./static && $(npm bin)/ng build --prod --aot && ln -s ../api/resource/ ../public/resource",
+    "deploy-static:prod": "cd ./static && $(npm bin)/ng build --prod --aot && ln -s ../api/resource/ ../public/resource",
     "postinstall": "npm install --prefix ./static && npm install --prefix  ./api",
     "mongodb": "mkdir -p mongodb-data && mongod --dbpath ./mongodb-data",
     "test": "npm test --prefix ./api",

static/package-lock.json

@@ -1160,6 +1160,7 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
+        "fsevents": "1.1.3",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -3164,6 +3165,795 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "fsevents": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
+      "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
+      "optional": true,
+      "requires": {
+        "nan": "2.7.0",
+        "node-pre-gyp": "0.6.39"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "bundled": true,
+          "optional": true
+        },
+        "ajv": {
+          "version": "4.11.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "co": "4.6.0",
+            "json-stable-stringify": "1.0.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.2.9"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "bundled": true,
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "bundled": true,
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true,
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "bundled": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        },
+        "boom": {
+          "version": "2.10.1",
+          "bundled": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.7",
+          "bundled": true,
+          "requires": {
+            "balanced-match": "0.4.2",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true,
+          "optional": true
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "bundled": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "bundled": true,
+          "requires": {
+            "boom": "2.10.1"
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.8",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "bundled": true,
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "extend": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true,
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.5",
+            "mime-types": "2.1.15"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.6.1"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "fstream": "1.0.11",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.1.1",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true
+        },
+        "har-schema": {
+          "version": "1.0.5",
+          "bundled": true,
+          "optional": true
+        },
+        "har-validator": {
+          "version": "4.2.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "ajv": "4.11.8",
+            "har-schema": "1.0.5"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "bundled": true,
+          "requires": {
+            "boom": "2.10.1",
+            "cryptiles": "2.0.5",
+            "hoek": "2.16.3",
+            "sntp": "1.0.9"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "bundled": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "0.2.0",
+            "jsprim": "1.4.0",
+            "sshpk": "1.13.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true
+        },
+        "ini": {
+          "version": "1.3.4",
+          "bundled": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true,
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true,
+          "optional": true
+        },
+        "json-stable-stringify": {
+          "version": "1.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "jsonify": "0.0.0"
+          }
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "jsonify": {
+          "version": "0.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.4.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.0.2",
+            "json-schema": "0.2.3",
+            "verror": "1.3.6"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "mime-db": {
+          "version": "1.27.0",
+          "bundled": true
+        },
+        "mime-types": {
+          "version": "2.1.15",
+          "bundled": true,
+          "requires": {
+            "mime-db": "1.27.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "requires": {
+            "brace-expansion": "1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.39",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.2",
+            "hawk": "3.1.3",
+            "mkdirp": "0.5.1",
+            "nopt": "4.0.1",
+            "npmlog": "4.1.0",
+            "rc": "1.2.1",
+            "request": "2.81.0",
+            "rimraf": "2.6.1",
+            "semver": "5.3.0",
+            "tar": "2.2.1",
+            "tar-pack": "3.4.0"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.0",
+            "osenv": "0.1.4"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "bundled": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.4",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true
+        },
+        "performance-now": {
+          "version": "0.2.0",
+          "bundled": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "bundled": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true,
+          "optional": true
+        },
+        "qs": {
+          "version": "6.4.0",
+          "bundled": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.1",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.4.2",
+            "ini": "1.3.4",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.9",
+          "bundled": true,
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "request": {
+          "version": "2.81.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.5",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.1.4",
+            "har-validator": "4.2.1",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.15",
+            "oauth-sign": "0.8.2",
+            "performance-now": "0.2.0",
+            "qs": "6.4.0",
+            "safe-buffer": "5.0.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.2",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.1",
+          "bundled": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.0.1",
+          "bundled": true
+        },
+        "semver": {
+          "version": "5.3.0",
+          "bundled": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "bundled": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "sshpk": {
+          "version": "1.13.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "asn1": "0.2.3",
+            "assert-plus": "1.0.0",
+            "bcrypt-pbkdf": "1.0.1",
+            "dashdash": "1.14.1",
+            "ecc-jsbn": "0.1.1",
+            "getpass": "0.1.7",
+            "jodid25519": "1.0.2",
+            "jsbn": "0.1.1",
+            "tweetnacl": "0.14.5"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "optional": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "bundled": true,
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "bundled": true,
+          "requires": {
+            "block-stream": "0.0.9",
+            "fstream": "1.0.11",
+            "inherits": "2.0.3"
+          }
+        },
+        "tar-pack": {
+          "version": "3.4.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.8",
+            "fstream": "1.0.11",
+            "fstream-ignore": "1.0.5",
+            "once": "1.4.0",
+            "readable-stream": "2.2.9",
+            "rimraf": "2.6.1",
+            "tar": "2.2.1",
+            "uid-number": "0.0.6"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "punycode": "1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true,
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "bundled": true,
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",

static/src/app/services/logs/player.service.ts

@@ -14,5 +14,10 @@ export class PlayerService {
       .map(res => res.json())
   }
 
+  getCampaignHighscore(campaignId: string) {
+    return this.http.get(this.config.apiPlayersPath + '/ranking/' + campaignId)
+      .map(res => res.json())
+  }
+
 }
 

static/src/app/statistic/highscore/highscore.component.css

@@ -0,0 +1,71 @@
+h2 {
+  margin-left: 10%;
+}
+
+.player-name {
+  font-weight: bold;
+}
+
+.search-field {
+  width: 30%;
+  margin: 20px 0 0 10%;
+}
+
+ngx-datatable {
+  width: 345px;
+  margin: 3% 5% 0 5%;
+  height: 310px;
+  float: left;
+  border: solid #dfdfdf 1px;
+  border-radius: 10px 10px 2px 2px;
+}
+
+:host /deep/ .datatable-header {
+  background: #222222;
+  font-weight: 700;
+  border-radius: 10px 10px 0 0;
+  color: white;
+}
+
+:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
+  padding-left: 8px;
+}
+
+:host /deep/ .ngx-datatable .datatable-header {
+  /*vertical center alignment*/
+  display: table-cell;
+  vertical-align: middle;
+}
+
+:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
+  /*vertical alignment*/
+  position: relative;
+  top: 10px;
+}
+
+:host /deep/ .datatable-body-row {
+  color: #222222;
+  border-bottom: 1px solid grey;
+}
+
+:host /deep/ .datatable-body-row:hover {
+  background-color: #f7f7f7;
+}
+
+/* Table Scrollbar BEGIN */
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
+  width: 12px;
+}
+
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+}
+
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #4b4b4b;
+  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
+}
+
+/* Table Scrollbar END */

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

@@ -0,0 +1,150 @@
+<div class="highscore-container fade-in">
+  <h2>{{title}} ⟶ Highscore</h2>
+
+  <div class="input-group search-field">
+    <input id="search-tasks"
+           placeholder="Spielername"
+           type="text" #query class="form-control"
+           (keyup.enter)="filterPlayers()"
+           [formControl]="searchTerm">
+    <span class="input-group-btn">
+      <button class="btn btn-default" type="button"
+              (click)="filterPlayers()">
+        Filter
+      </button>
+    </span>
+  </div>
+
+  <ngx-datatable
+    [rows]="players.kill"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="Kills" prop="kill"></ngx-datatable-column>
+  </ngx-datatable>
+
+  <ngx-datatable
+    [rows]="players.death"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="Tode" prop="death"></ngx-datatable-column>
+  </ngx-datatable>
+  <ngx-datatable
+    [rows]="players.respawn"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="Respawn" prop="respawn"></ngx-datatable-column>
+  </ngx-datatable>
+
+  <ngx-datatable
+    [rows]="players.friendlyFire"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+  </ngx-datatable>
+
+  <ngx-datatable
+    [rows]="players.revive"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="Revive" prop="revive"></ngx-datatable-column>
+  </ngx-datatable>
+
+  <ngx-datatable
+    [rows]="players.flagTouch"
+    [reorderable]="reorderable"
+    [messages]="emptyMessage"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [columnMode]="'force'"
+    [scrollbarV]="true"
+    [selectionType]="'single'">
+    <ngx-datatable-column [width]="numberColWidth" name="#" prop="num"></ngx-datatable-column>
+    <ngx-datatable-column name="Spieler" prop="name" [width]="nameColWidth" style="padding-left:10px">
+      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        <span class="player-name"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="valueColWidth" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+  </ngx-datatable>
+
+</div>
+

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

@@ -0,0 +1,96 @@
+import {Component} from "@angular/core";
+import {ActivatedRoute} from "@angular/router";
+import {PlayerService} from "../../services/logs/player.service";
+import {CampaignService} from "../../services/logs/campaign.service";
+import {Fraction} from "../../utils/fraction.enum";
+import {FormControl} from "@angular/forms";
+
+
+@Component({
+  selector: 'stats-highscore',
+  templateUrl: './highscore.component.html',
+  styleUrls: ['./highscore.component.css', '../../style/list-entry.css', '../../style/overview.css'],
+  inputs: ['campaigns']
+})
+export class StatisticHighScoreComponent {
+
+  id = '';
+
+  title = '';
+
+  searchTerm = new FormControl();
+
+  players = {};
+
+  playersStored = {};
+
+  cellHeight = 40;
+
+  numberColWidth = 60;
+
+  nameColWidth = 210;
+
+  valueColWidth = 110;
+
+  emptyMessage = {emptyMessage: 'Keine Einträge'};
+
+  reorderable = false;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
+
+  readonly fraction = Fraction;
+
+  constructor(private route: ActivatedRoute,
+              private playerService: PlayerService,
+              private campaignService: CampaignService) {
+  }
+
+  ngOnInit() {
+    this.route.params
+      .map(params => params['id'])
+      .subscribe((id) => {
+        this.id = id;
+        if (this.campaignService.campaigns) {
+          this.initData();
+        } else {
+          this.campaignService.getAllCampaigns().subscribe(campaigns => {
+            this.initData()
+          })
+        }
+      });
+  }
+
+  initData() {
+    this.title = this.campaignService.campaigns
+      .filter(camp => camp._id === this.id).pop().title;
+
+    this.playerService.getCampaignHighscore(this.id).subscribe(players => {
+      this.players = players;
+      this.playersStored = players;
+    })
+  }
+
+  filterPlayers() {
+    if (!this.searchTerm.value || this.searchTerm.value === '') {
+      this.players = this.playersStored;
+    } else {
+      this.players = {
+        kill: this.filterPlayerAttribute('kill'),
+        friendlyFire: this.filterPlayerAttribute('friendlyFire'),
+        death: this.filterPlayerAttribute('death'),
+        respawn: this.filterPlayerAttribute('respawn'),
+        revive: this.filterPlayerAttribute('revive'),
+        flagTouch: this.filterPlayerAttribute('flagTouch')
+      }
+    }
+  }
+
+  private filterPlayerAttribute(attribute) {
+    const query = this.searchTerm.value.toLowerCase();
+    return this.playersStored[attribute].filter(p => p.name.toLowerCase().includes(query))
+  }
+
+}

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

@@ -1,6 +1,5 @@
 import {Component} from "@angular/core";
 import {ActivatedRoute} from "@angular/router";
-import {CarouselConfig} from "ngx-bootstrap";
 import {CampaignService} from "../../services/logs/campaign.service";
 import {ChartUtils} from "../../utils/chart-utils";
 import {Fraction} from "../../utils/fraction.enum";
@@ -10,8 +9,7 @@ import {Fraction} from "../../utils/fraction.enum";
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
   styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css', '../../style/overview.css'],
-  inputs: ['campaigns'],
-  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
+  inputs: ['campaigns']
 })
 export class StatisticOverviewComponent {
 

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

@@ -10,6 +10,7 @@ import {WarDetailComponent} from "./war-detail/war-detail.component";
 import {ScoreboardComponent} from "./war-detail/scoreboard/scoreboard.component";
 import {WarSubmitComponent} from "./war-submit/war-submit.component";
 import {FractionStatsComponent} from "./war-detail/fraction-stats/fraction-stats.component";
+import {StatisticHighScoreComponent} from "./highscore/highscore.component";
 
 
 export const statsRoutes: Routes = [{
@@ -26,6 +27,11 @@ export const statsRoutes: Routes = [{
     component: StatisticOverviewComponent,
     outlet: 'right'
   },
+  {
+    path: 'highscore/:id',
+    component: StatisticHighScoreComponent,
+    outlet: 'right'
+  },
   {
     path: 'new-campaign',
     component: CampaignSubmitComponent,
@@ -49,7 +55,7 @@ export const statsRoutes: Routes = [{
 
 export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
 
-export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
-  WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
-  CampaignPlayerDetailComponent, WarItemComponent];
+export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, StatisticHighScoreComponent,
+  CampaignSubmitComponent, WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent,
+  FractionStatsComponent, CampaignPlayerDetailComponent, WarItemComponent];
 

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.css

@@ -42,6 +42,26 @@ ngx-datatable {
   background-color: #f7f7f7;
 }
 
+/* Table Scrollbar BEGIN */
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
+  width: 12px;
+}
+
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  border-radius: 10px;
+}
+
+:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #4b4b4b;
+  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
+}
+/* Table Scrollbar END */
+
+
+
+
 .in-table-btn {
   position: absolute;
   margin-top: -5px;

static/src/app/statistic/war-detail/war-detail.component.css

@@ -39,18 +39,3 @@
 .nav-tabs > li.deactivated > a.nav-link {
   cursor: not-allowed !important;
 }
-
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar {
-  width: 12px;
-}
-
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-  border-radius: 10px;
-}
-
-:host /deep/ .ngx-datatable.scroll-vertical .datatable-body::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: #4b4b4b;
-  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
-}

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

@@ -5,3 +5,10 @@
   color: white;
   font-weight: 600;
 }
+
+.top-list-entry {
+  margin-top: -16px;
+  margin-bottom: 10px;
+  width: 50%;
+  float: left;
+}

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

@@ -20,17 +20,29 @@
         </span>
       </div>
 
-      <div class="fade-in list-entry" style="margin-top: -16px; margin-bottom: 10px;"
+      <div class="fade-in list-entry top-list-entry"
            [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-        <div class="row">
-          <div class="col-xs-9">
+        <div style="margin: auto;">
+          <div class="col-xs-3">
             <span style="margin:auto">
-        <a style="font-size: 22px;">Kampagnenübersicht</a>
+              <a style="font-size: 22px;">Übersicht</a>
             </span>
           </div>
         </div>
       </div>
 
+      <div class="fade-in list-entry top-list-entry"
+           [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
+        <div style="margin: auto">
+          <div class="col-xs-3">
+            <span style="margin:auto">
+              <a style="font-size: 22px;">Highscore</a>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div style="padding-top: 40px;">
         <div *ngFor="let war of campaign.wars">
           <pjm-war-item
             [war]="war"
@@ -39,6 +51,7 @@
             [selected]="war._id == selectedWarId">
           </pjm-war-item>
         </div>
+      </div>
     </accordion-group>
   </accordion>
 

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

@@ -17,6 +17,8 @@ export class WarListComponent implements OnInit {
 
   campaigns: Campaign[] = [];
 
+  public readonly highscore = 'HIGHSCORE';
+
   constructor(private warService: WarService,
               private campaignService: CampaignService,
               public loginService: LoginService,
@@ -59,10 +61,17 @@ export class WarListComponent implements OnInit {
     }
   }
 
-  selectOverview(overviewId) {
-    if (this.selectedWarId != overviewId) {
-      this.selectedWarId = overviewId;
-      this.router.navigate([{outlets: {'right': ['overview', overviewId]}}], {relativeTo: this.route});
+  selectOverview(campaignId) {
+    if (this.selectedWarId != campaignId) {
+      this.selectedWarId = campaignId;
+      this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route});
+    }
+  }
+
+  selectHighscore(campaignId) {
+    if (this.selectedWarId != campaignId + this.highscore) {
+      this.selectedWarId = campaignId + this.highscore;
+      this.router.navigate([{outlets: {'right': ['highscore', campaignId]}}], {relativeTo: this.route});
     }
   }